@ticatec/topside-elements 1.0.0

package/dist/general/split/Split.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+    import {onDestroy} from 'svelte';
+
+    interface Props {
+        direction?: "horizontal" | "vertical";
+        width?: number;
+        bindingPanel?: HTMLElement;
+        reverse?: boolean;
+        onResizeEnd?: (size: number) => void;
+    }
+
+    let {
+        direction = "vertical",
+        width = 2,
+        bindingPanel,
+        reverse = false,
+        onResizeEnd
+    }: Props = $props();
+
+    let isDragging = $state(false);
+    let startPos = $state(0);
+    let startSize = $state(0);
+
+    const style = $derived(direction === "horizontal" ? `height: ${width}px` : `width: ${width}px`);
+    const fixed = $derived(!bindingPanel);
+
+    const calculateNewSize = (currentPos: number): number => {
+        if (!bindingPanel) return 0;
+
+        const delta = reverse ? startPos - currentPos : currentPos - startPos;
+        const minSize = 5;
+        return Math.max(minSize, startSize + delta);
+    };
+
+    const startDrag = (event: MouseEvent) => {
+        if (fixed || !bindingPanel) return;
+
+        isDragging = true;
+        startPos = direction === "horizontal" ? event.clientY : event.clientX;
+        startSize = direction === "horizontal"
+            ? bindingPanel.clientHeight
+            : bindingPanel.clientWidth;
+
+        document.addEventListener("mousemove", onDrag, { passive: false });
+        document.addEventListener("mouseup", stopDrag);
+        document.body.style.cursor = direction === "horizontal" ? "row-resize" : "col-resize";
+        event.preventDefault();
+    };
+
+    const onDrag = (event: MouseEvent) => {
+        if (!isDragging || !bindingPanel) return;
+
+        const currentPos = direction === "horizontal" ? event.clientY : event.clientX;
+        const newSize = calculateNewSize(currentPos);
+
+        if (direction === "horizontal") {
+            bindingPanel.style.height = `${newSize}px`;
+        } else {
+            bindingPanel.style.width = `${newSize}px`;
+        }
+    };
+
+    const stopDrag = () => {
+        if (!isDragging) return;
+
+        isDragging = false;
+        document.body.style.cursor = "";
+        document.removeEventListener("mousemove", onDrag);
+        document.removeEventListener("mouseup", stopDrag);
+
+        if (bindingPanel && onResizeEnd) {
+            const finalSize = direction === "horizontal"
+                ? bindingPanel.clientHeight
+                : bindingPanel.clientWidth;
+            onResizeEnd(finalSize);
+        }
+    };
+
+    const resizeWithKeyboard = (event: KeyboardEvent) => {
+        if (fixed || !bindingPanel) return;
+        const decreaseKey = direction === 'horizontal' ? 'ArrowUp' : 'ArrowLeft';
+        const increaseKey = direction === 'horizontal' ? 'ArrowDown' : 'ArrowRight';
+        if (event.key !== decreaseKey && event.key !== increaseKey) return;
+
+        event.preventDefault();
+        const directionFactor = event.key === increaseKey ? 1 : -1;
+        const delta = directionFactor * (reverse ? -10 : 10);
+        const currentSize = direction === 'horizontal' ? bindingPanel.clientHeight : bindingPanel.clientWidth;
+        const newSize = Math.max(5, currentSize + delta);
+        if (direction === 'horizontal') bindingPanel.style.height = `${newSize}px`;
+        else bindingPanel.style.width = `${newSize}px`;
+        onResizeEnd?.(newSize);
+    };
+
+    // 组件销毁时清理
+    onDestroy(() => {
+        if (isDragging) {
+            stopDrag();
+        }
+    });
+
+</script>
+
+<!-- The separator is intentionally focusable because its arrow-key handler resizes the bound panel. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+    class="topside-divider {direction}"
+    class:fixed
+    {style}
+    role="separator"
+    aria-orientation={direction}
+    aria-label="Resize handle"
+    tabindex={fixed ? -1 : 0}
+    onmousedown={startDrag}
+    onkeydown={resizeWithKeyboard}
+></div>
+
+<style>
+    .topside-divider {
+        background-color: var(--topside-dividing-line-color, #CBD5E1);
+        flex: 0 0 auto;
+        transition: background-color 0.2s ease;
+    }
+
+    .topside-divider.horizontal {
+        width: 100%;
+        cursor: row-resize;
+    }
+
+    .topside-divider.vertical {
+        height: 100%;
+        cursor: col-resize;
+    }
+
+    .topside-divider.fixed {
+        cursor: default;
+        pointer-events: none;
+    }
+
+    /* 拖动时移除过渡效果，提高响应性 */
+    .topside-divider:hover {
+        background-color: color-mix(in srgb, var(--topside-dividing-line-color, #CBD5E1) 80%, #000);
+    }
+
+    /* 拖动时移除过渡效果，提高响应性 */
+    .topside-divider:active {
+        transition: none;
+    }
+</style>

package/dist/general/split/Split.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    direction?: "horizontal" | "vertical";
+    width?: number;
+    bindingPanel?: HTMLElement;
+    reverse?: boolean;
+    onResizeEnd?: (size: number) => void;
+}
+declare const Split: import("svelte").Component<Props, {}, "">;
+type Split = ReturnType<typeof Split>;
+export default Split;

package/dist/general/split/index.d.ts

@@ -0,0 +1,2 @@
+import Split from "./Split.svelte";
+export default Split;

package/dist/general/split/index.js

@@ -0,0 +1,2 @@
+import Split from "./Split.svelte";
+export default Split;

package/dist/general/tag/README.md

@@ -0,0 +1,319 @@
+# Tag Component
+
+A compact label / status pill. Renders text with optional color theme (1–12), three shapes (border / round / borderless), three sizes, and an optional remove (×) icon that appears on hover.
+
+## Features
+
+- **Three shapes**: `border` (subtle outline), `round` (pill, stronger outline), `borderless`
+- **Three sizes**: `small`, `middle` (default), `big`
+- **12 color themes**: built-in g1–g12 palette via CSS variables; each tint auto-derives its background and border via `color-mix`
+- **Optional remove icon**: × icon shown only on hover; fires `ondelete` on click
+- **Theme aware**: outer wrapper exposes `data-theme="{theme}"` for dark/light scoping
+- **Built with Svelte 5 runes**: `$props()` + `$derived()` (no `$effect`)
+
+## Installation
+
+```bash
+npm install @ticatec/topside-elements
+```
+
+## Import
+
+```typescript
+import Tag from '@ticatec/topside-elements/Tag';
+```
+
+## Basic Usage
+
+```svelte
+<script>
+  import Tag from '@ticatec/topside-elements/Tag';
+
+  function handleDelete(id) {
+    console.log('removed tag id:', id);
+  }
+</script>
+
+<!-- Default: bordered, middle size, removable -->
+<Tag text="Basic" />
+
+<!-- With explicit props -->
+<Tag text=" removable " color="2" variant="round" ondelete={handleDelete} />
+
+<!-- Pure label, no × icon -->
+<Tag text="Status: pending" color="4" removable={false} />
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `text` | `string \| undefined` | `undefined` | Label text rendered inside the tag |
+| `size` | `'small' \| 'middle' \| 'big'` | `'middle'` | Tag size (`small` ≈ 20px tall, `middle` ≈ 28px, `big` ≈ 30px) |
+| `variant` | `'borderless' \| 'border' \| 'round'` | `'border'` | Visual shape. `border` = subtle 10% outline; `round` = pill with 50% outline; `borderless` = no border |
+| `removable` | `boolean` | `true` | When `true`, renders a × icon on hover that fires `ondelete` |
+| `color` | `string \| undefined` | `undefined` | Color theme key `'1'`–`'12'`. Rendered as class `color-g{color}`. Empty / whitespace → default (g0). |
+| `data` | `any` | `undefined` | Arbitrary payload. **Only `data.id` is read** — it's passed to `ondelete` when the × icon is clicked. |
+| `ondelete` | `(id: any) => void` | `undefined` | Fired when × is clicked. **Receives `data.id`, not `data` itself.** |
+| `theme` | `string \| undefined` | `undefined` | Set on the outer wrapper as `data-theme`. Use for dark/light scope via CSS attribute selectors. |
+| `style` | `string \| undefined` | `undefined` | Inline CSS on the outer wrapper |
+| `class` | `string \| undefined` | `undefined` | **Currently unused.** The prop is declared but not rendered into any class slot. Don't rely on it. |
+
+> **`ondelete` signature gotcha**: the callback receives `data?.id`, not `data`. If you need the full data object, close over it in your handler: `ondelete={() => removeTag(tag)}` and ignore the argument.
+
+## Events
+
+| Event | Signature | Description |
+|-------|-----------|-------------|
+| `ondelete` | `(id: any) => void` | Fires when the × icon is clicked. The handler also calls `event.preventDefault()` and `event.stopPropagation()` so the click doesn't bubble. The argument is `data?.id` (whatever you passed in via the `data` prop, dotted with `id`). |
+
+## Basic Examples
+
+### Default Tags
+
+```svelte
+<div style="display: flex; gap: 8px; flex-wrap: wrap;">
+  <Tag text="Default" />
+  <Tag text="Technology" />
+  <Tag text="Design" />
+  <Tag text="Development" />
+</div>
+```
+
+### Sizes
+
+```svelte
+<div style="display: flex; gap: 16px; align-items: center;">
+  <Tag text="Small"  size="small" />
+  <Tag text="Middle" size="middle" />
+  <Tag text="Big"    size="big" />
+</div>
+```
+
+### Variants
+
+```svelte
+<div style="display: flex; gap: 8px;">
+  <Tag text="Borderless" variant="borderless" />
+  <Tag text="Border"     variant="border" />     <!-- default -->
+  <Tag text="Round"      variant="round" />
+</div>
+```
+
+### Color Palette (g1–g12)
+
+```svelte
+<div style="display: flex; gap: 8px; flex-wrap: wrap;">
+  <Tag text="g1"  color="1"  removable={false} />
+  <Tag text="g2"  color="2"  removable={false} />
+  <Tag text="g3"  color="3"  removable={false} />
+  <Tag text="g4"  color="4"  removable={false} />
+  <Tag text="g5"  color="5"  removable={false} />
+  <Tag text="g6"  color="6"  removable={false} />
+  <Tag text="g7"  color="7"  removable={false} />
+  <Tag text="g8"  color="8"  removable={false} />
+  <Tag text="g9"  color="9"  removable={false} />
+  <Tag text="g10" color="10" removable={false} />
+  <Tag text="g11" color="11" removable={false} />
+  <Tag text="g12" color="12" removable={false} />
+</div>
+```
+
+## Detailed Examples
+
+### Removable Tag List
+
+Each tag binds its full object via `data`. The handler ignores the `id` argument and closes over the object directly, which is cleaner than relying on the `data.id` quirk:
+
+```svelte
+<script>
+  import Tag from '@ticatec/topside-elements/Tag';
+
+  let tags = $state([
+    { id: 1, text: 'JavaScript', color: '1' },
+    { id: 2, text: 'Svelte',     color: '5' },
+    { id: 3, text: 'TypeScript', color: '9' }
+  ]);
+
+  function removeTag(tag) {
+    tags = tags.filter(t => t.id !== tag.id);
+  }
+</script>
+
+<div style="display: flex; gap: 8px; flex-wrap: wrap;">
+  {#each tags as tag (tag.id)}
+    <Tag
+      text={tag.text}
+      color={tag.color}
+      data={tag}
+      ondelete={() => removeTag(tag)}
+    />
+  {/each}
+</div>
+```
+
+> Hover a tag — the × icon fades in at the top-right.
+
+### Status Indicators (non-removable)
+
+```svelte
+<script>
+  import Tag from '@ticatec/topside-elements/Tag';
+
+  const items = [
+    { label: 'Online',   count: 1240, color: '2'  },
+    { label: 'Pending',  count: 45,   color: '4'  },
+    { label: 'Error',    count: 12,   color: '3'  },
+    { label: 'Draft',    count: 7,    color: '12' }
+  ];
+</script>
+
+<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;">
+  {#each items as item}
+    <div style="padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px;">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+        <strong>{item.label}</strong>
+        <Tag text={item.label} color={item.color} size="small" variant="round" removable={false} />
+      </div>
+      <div style="font-size: 22px; font-weight: 700;">{item.count}</div>
+    </div>
+  {/each}
+</div>
+```
+
+## Color Reference
+
+| Key | Variable | Typical use |
+|-----|----------|-------------|
+| 1 | `--topside-tag-g1-color` (blue) | primary, links |
+| 2 | `--topside-tag-g2-color` (green) | success |
+| 3 | `--topside-tag-g3-color` (red) | error |
+| 4 | `--topside-tag-g4-color` (yellow) | warning |
+| 5 | `--topside-tag-g5-color` (pink) | highlight |
+| 6 | `--topside-tag-g6-color` (cyan) | info |
+| 7 | `--topside-tag-g7-color` (orange) | alert |
+| 8 | `--topside-tag-g8-color` (amber) | in-progress |
+| 9 | `--topside-tag-g9-color` (indigo) | secondary |
+| 10 | `--topside-tag-g10-color` (purple) | premium |
+| 11 | `--topside-tag-g11-color` (lime) | new |
+| 12 | special | neutral — uses `--topside-tag-g12-bg` / `--topside-tag-g12-border` directly (no `color-mix`), so set both to override |
+
+For g1–g11, the background and border are auto-derived from the color via `color-mix(in srgb, var 10%, transparent)` and `color-mix(in srgb, var 50%, transparent)`. You only need to set the `--topside-tag-gN-color` variable to re-theme.
+
+## DOM Structure & CSS
+
+Rendered output:
+
+```html
+<div class="topside-tag" style="..." data-theme="...">
+  <div class="{size} {variant} {colorClass}" class:removable>
+    <span>{text}</span>
+    <!-- only when removable={true} -->
+    <i class="icon_google_clear topside-remove-icon" aria-hidden="true"></i>
+  </div>
+</div>
+```
+
+### Built-in classes & states
+
+| Class | When applied |
+|-------|--------------|
+| `.topside-tag` | Always (outer wrapper) |
+| `.small` / `.middle` / `.big` | From `size` prop |
+| `.borderless` / `.border` / `.round` | From `variant` prop |
+| `.color` + `.color-g{N}` | When `color` is non-empty |
+| `.removable` | When `removable={true}` |
+
+### Remove icon visibility
+
+The × icon is **hidden by default** and only appears on hover:
+
+```css
+.topside-tag > div:hover .topside-remove-icon { opacity: 1; }
+.topside-tag > div:not(:hover) .topside-remove-icon {
+  opacity: 0;
+  pointer-events: none;
+}
+```
+
+Implication: on touch devices, the × is effectively unreachable because there's no hover state. If you need always-visible removal on mobile, override the CSS or render your own button next to the tag.
+
+### CSS Custom Properties
+
+```css
+:root {
+  /* Base (no color prop) */
+  --topside-tag-g0-color: #374151;
+
+  /* g1–g11: each derives bg + border from its color via color-mix */
+  --topside-tag-g1-color:  #0061FF;
+  --topside-tag-g2-color:  #2DC071;
+  --topside-tag-g3-color:  #FF4D4F;
+  --topside-tag-g4-color:  #FFBF00;
+  --topside-tag-g5-color:  #EB2F96;
+  --topside-tag-g6-color:  #13C2C2;
+  --topside-tag-g7-color:  #FA541C;
+  --topside-tag-g8-color:  #FA8C16;
+  --topside-tag-g9-color:  #2F54EB;
+  --topside-tag-g10-color: #722ED1;
+  --topside-tag-g11-color: #A0D911;
+
+  /* g12 is special: bg/border are set explicitly, no color-mix */
+  --topside-tag-g12-color:  #374151;
+  --topside-tag-g12-bg:     #F8FAFC;
+  --topside-tag-g12-border: #E2E8F0;
+
+  /* Geometry */
+  --topside-tag-margin: 12px;
+  --topside-tag-height: 28px;        /* middle */
+  --topside-tag-height-sm: 20px;     /* small */
+  --topside-tag-height-bg: 30px;     /* big */
+  --topside-tag-font-size: 12px;
+  --topside-tag-action-color: var(--topside-default-text-color, #374151);
+
+  /* Inherited tokens */
+  --topside-radius: 4px;
+  --topside-radius-xl: 12px;
+}
+```
+
+### Dark Theme
+
+Scope via `data-theme`:
+
+```css
+[data-theme='dark'] {
+  --topside-tag-g0-color: #e5e7eb;
+  /* override g1–g12 as needed; color-mix still applies for g1–g11 */
+}
+```
+
+```svelte
+<Tag text="Hello" theme="dark" />
+```
+
+## Accessibility
+
+- The × icon is `<i aria-hidden="true">` with a `click` handler — **not keyboard accessible**. There's no `tabindex`, `role`, or `keydown` handler. Keyboard users cannot remove a tag through the icon alone.
+- If keyboard removal matters, wrap the tag in your own keyboard-accessible container (e.g. a `<button>`), or build a custom tag.
+- The outer `<div>` has no role; screen readers will announce the `text` content as plain text.
+- For status semantics (success / error / etc.), color is the only signal — pair with a visually-hidden label or rely on the `text` content to convey meaning, since none of the color classes carry an ARIA semantic.
+
+## Behavior Notes
+
+- The × icon's `onclick` calls `event.preventDefault()` and `event.stopPropagation()` after firing `ondelete`, so parent click handlers won't see the event.
+- `color` is treated as a string and concatenated into `color-g${color}`. Passing `color={1}` (number) still works because of template-string coercion, but passing `color="azure"` would generate a `color-gazure` class that doesn't exist.
+- Empty / whitespace-only `color` skips the color class entirely (falls back to `--topside-tag-g0-color`).
+
+## Best Practices
+
+1. **Pass the full object via `data`, ignore the `ondelete` argument.** Because the callback receives `data.id`, closing over the object in your handler is less surprising than relying on the id: `ondelete={() => remove(tag)}`.
+2. **Use `removable={false}` for status indicators.** Otherwise the × appears on hover and implies the status is dismissable.
+3. **Keep colors semantically consistent** across the app — g2 always means success, g3 always means error, etc.
+4. **Don't rely on hover for primary actions on mobile.** The × icon is hover-gated; on touch devices consider an alternative UI.
+5. **For very long tag lists, use `{#each ... (key)}` with a stable key** so Svelte can diff efficiently.
+
+## Related Components
+
+- [Button](../button/README.md) — standard button
+- [IconButton](../button/IconButton_README.md) — round icon button