mirror of
https://github.com/Ku6epXBOCTuK/easy-png-tools.git
synced 2026-09-14 21:46:35 +00:00
feat: add new simple components
This commit is contained in:
@@ -0,0 +1,31 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
interface Props {
|
||||
compact?: boolean;
|
||||
children: Snippet;
|
||||
}
|
||||
|
||||
let { compact = false, children }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="field-grid" class:compact>
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.field-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 1fr 1.2fr;
|
||||
gap: 16px;
|
||||
}
|
||||
.field-grid.compact {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.field-grid,
|
||||
.field-grid.compact {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,37 @@
|
||||
<script lang="ts">
|
||||
import type { Component } from "svelte";
|
||||
import { Upload } from "@lucide/svelte";
|
||||
|
||||
interface Props {
|
||||
name: string;
|
||||
size?: string;
|
||||
icon?: Component<{ size?: number }>;
|
||||
}
|
||||
|
||||
let { name, size, icon = Upload }: Props = $props();
|
||||
const Cmp = $derived(icon);
|
||||
</script>
|
||||
|
||||
<div class="file-chip">
|
||||
<Cmp size={15} />
|
||||
<span>{name}</span>
|
||||
{#if size}<b>{size}</b>{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.file-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
white-space: nowrap;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
font: 11px var(--font-mono);
|
||||
color: var(--muted);
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.file-chip b {
|
||||
color: var(--blue);
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,44 @@
|
||||
<script lang="ts">
|
||||
import { RotateCcw } from "@lucide/svelte";
|
||||
import StatusDot from "./StatusDot.svelte";
|
||||
|
||||
interface Props {
|
||||
onreset?: () => void;
|
||||
note?: string;
|
||||
}
|
||||
|
||||
let { onreset, note = "changes are applied automatically" }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="pipeline-footer">
|
||||
<button class="reset-btn" onclick={() => onreset?.()}>
|
||||
<RotateCcw size={14} /> Reset pipeline
|
||||
</button>
|
||||
<span class="auto-note"><StatusDot /> {note}</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.pipeline-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 18px;
|
||||
}
|
||||
.reset-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
color: var(--blue);
|
||||
background: none;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
.auto-note {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--muted);
|
||||
font: 11px var(--font-mono);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
interface Props {
|
||||
pad?: string;
|
||||
children: Snippet;
|
||||
}
|
||||
|
||||
let { pad = "0", children }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="preview-stack" style="padding:{pad};">
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.preview-stack {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
import MonoLabel from "./MonoLabel.svelte";
|
||||
|
||||
interface Props {
|
||||
label: string;
|
||||
title: string;
|
||||
meta?: string;
|
||||
actions?: Snippet;
|
||||
}
|
||||
|
||||
let { label, title, meta, actions }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="section-label">
|
||||
<div class="section-text">
|
||||
<MonoLabel>{label}</MonoLabel>
|
||||
<strong>{title}{#if meta}<em>{meta}</em>{/if}</strong>
|
||||
</div>
|
||||
{#if actions}
|
||||
<div class="section-actions">
|
||||
{@render actions()}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.section-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.section-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
.section-text strong {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
font: 600 14px var(--font-mono);
|
||||
color: var(--foreground);
|
||||
}
|
||||
.section-text em {
|
||||
color: #25a96a;
|
||||
font-style: normal;
|
||||
font-size: 10px;
|
||||
}
|
||||
.section-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script lang="ts">
|
||||
import Toggle from "./Toggle.svelte";
|
||||
|
||||
interface Props {
|
||||
label: string;
|
||||
checked: boolean;
|
||||
onchange?: (checked: boolean) => void;
|
||||
}
|
||||
|
||||
let { label, checked = $bindable(), onchange }: Props = $props();
|
||||
</script>
|
||||
|
||||
<label class="toggle-row">
|
||||
<span>{label}</span>
|
||||
<Toggle bind:checked {onchange} {label} />
|
||||
</label>
|
||||
|
||||
<style>
|
||||
.toggle-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
color: var(--foreground);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
interface Props {
|
||||
settings: Snippet;
|
||||
preview: Snippet;
|
||||
columns?: string;
|
||||
gap?: string;
|
||||
padding?: string;
|
||||
maxWidth?: string;
|
||||
stickyTop?: string;
|
||||
padMobile?: string;
|
||||
gapMobile?: string;
|
||||
}
|
||||
|
||||
let {
|
||||
settings,
|
||||
preview,
|
||||
columns = "minmax(0, 1fr) minmax(0, 1.1fr)",
|
||||
gap = "40px",
|
||||
padding = "48px clamp(24px, 4vw, 72px) 72px",
|
||||
maxWidth = "1680px",
|
||||
stickyTop = "84px",
|
||||
padMobile = "32px 16px 48px",
|
||||
gapMobile = "24px",
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="ws"
|
||||
style="--ws-cols:{columns};--ws-gap:{gap};--ws-pad:{padding};--ws-max:{maxWidth};--ws-sticky:{stickyTop};--ws-pad-mobile:{padMobile};--ws-gap-mobile:{gapMobile};"
|
||||
>
|
||||
<div class="ws-settings">{@render settings()}</div>
|
||||
<div class="ws-preview">{@render preview()}</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.ws {
|
||||
display: grid;
|
||||
grid-template-columns: var(--ws-cols);
|
||||
align-items: start;
|
||||
gap: var(--ws-gap);
|
||||
max-width: var(--ws-max);
|
||||
margin: auto;
|
||||
padding: var(--ws-pad);
|
||||
}
|
||||
.ws-settings {
|
||||
min-width: 0;
|
||||
}
|
||||
.ws-preview {
|
||||
position: sticky;
|
||||
top: var(--ws-sticky);
|
||||
min-width: 0;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.ws {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--ws-gap-mobile);
|
||||
padding: var(--ws-pad-mobile);
|
||||
}
|
||||
.ws-preview {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user