@ticatec/topside-elements 1.0.0

package/dist/composite/transfer/Transfer.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+    import ListBox from "../../data_display/list_box";
+    import IconButton from "../../general/button/IconButton.svelte";
+
+    import type {FilterFn} from "../../data_display/list_box";
+    import type {BeforeTransfer, OnTransfer} from "../../types";
+    import i18n, {i18nUtils} from "@ticatec/i18n";
+
+
+    interface Props {
+        style?: string;
+        sourceList?: Array<any>;
+        sourceTitle?: string;
+        targetList?: Array<any>;
+        targetTitle?: string;
+        itemRender?: any;
+        filter?: FilterFn | null;
+        /**
+         * 移动前的否决钩子：返回 false 阻止移动。
+         */
+        beforeTransfer?: BeforeTransfer;
+        /**
+         * 移动完成后的通知。
+         */
+        onchange?: OnTransfer;
+        onfocus?: (event: FocusEvent) => void;
+        onblur?: (event: FocusEvent) => void;
+        footer$style?: string;
+    }
+
+    let {
+        style = '',
+        sourceList = $bindable([]),
+        sourceTitle,
+        targetList = $bindable([]),
+        targetTitle,
+        itemRender = null,
+        filter = null,
+        beforeTransfer,
+        onchange,
+        onfocus,
+        onblur,
+        footer$style = 'width: 100%; background-color: #f0f0f0; padding: 2px 6px; text-align: right; box-sizing: border-box'
+    }: Props = $props();
+
+    let sourceSelectedList: Array<any> = $state([]);
+    let targetSelectedList: Array<any> = $state([]);
+    let transferContainer = $state<HTMLDivElement>();
+
+    const handleFocusIn = (event: FocusEvent) => {
+        if (!transferContainer?.contains(event.relatedTarget as Node | null)) onfocus?.(event);
+    };
+
+    const handleFocusOut = (event: FocusEvent) => {
+        if (!transferContainer?.contains(event.relatedTarget as Node | null)) onblur?.(event);
+    };
+
+    const allowMove = async (list: Array<any>, direction: "left" | "right"): Promise<boolean> =>
+        beforeTransfer == null || (await beforeTransfer(list, direction)) !== false;
+
+    const moveToTarget = async () => {
+        if (sourceSelectedList.length > 0 && await allowMove(sourceSelectedList, "right")) {
+            const moved = sourceSelectedList;
+            targetList = [...targetList, ...moved];
+            sourceList = sourceList.filter(item => moved.indexOf(item) === -1);
+            sourceSelectedList = [];
+            onchange?.(moved, "right");
+        }
+    }
+
+    const moveToSource = async () => {
+        if (targetSelectedList.length > 0 && await allowMove(targetSelectedList, "left")) {
+            const moved = targetSelectedList;
+            sourceList = [...sourceList, ...moved];
+            targetList = targetList.filter(item => moved.indexOf(item) === -1);
+            targetSelectedList = [];
+            onchange?.(moved, "left");
+        }
+    }
+</script>
+
+<div bind:this={transferContainer} class="topside-transfer-container" {style} onfocusin={handleFocusIn} onfocusout={handleFocusOut}>
+    <ListBox class="list-container" title={sourceTitle} {filter} style="grid-column: 1/2" list={sourceList} selectMode="multiple"
+             bind:selectedItems={sourceSelectedList} {itemRender}>
+        {#snippet footer()}
+            <div style={footer$style}>
+                <span>{i18nUtils.formatText(i18n.getText('uniface.transfer.selectIndicator'), {
+                    selected: sourceSelectedList.length,
+                    total: sourceList.length
+                })}</span>
+            </div>
+        {/snippet}
+    </ListBox>
+    <div class="icon-button-container" style="grid-column: 2/3;">
+        <IconButton onclick={moveToSource} type="primary" disabled={targetSelectedList.length === 0}>
+            <i class="icon_google_navigate_before"></i>
+        </IconButton>
+        <IconButton onclick={moveToTarget} type="primary" disabled={sourceSelectedList.length === 0}>
+            <i class="icon_google_navigate_next"></i>
+        </IconButton>
+    </div>
+    <ListBox class="list-container" title={targetTitle} style="grid-column: 3/4" {filter} list={targetList} selectMode="multiple"
+             bind:selectedItems={targetSelectedList} {itemRender}>
+        {#snippet footer()}
+            <div style={footer$style}>
+                <span>{i18nUtils.formatText(i18n.getText('uniface.transfer.selectIndicator'), {
+                    selected: targetSelectedList.length,
+                    total: targetList.length
+                })}</span>
+            </div>
+        {/snippet}
+    </ListBox>
+</div>
+
+<style>.topside-transfer-container {
+  height: 100%;
+  width: 100%;
+  display: grid;
+  grid-auto-columns: 1fr 60px 1fr;
+  column-gap: 16px;
+}
+.topside-transfer-container :global(.list-container) {
+  height: 100%;
+  flex: 1 1 auto;
+  overflow: hidden;
+  border: 1px solid var(--topside-inside-border-color);
+  box-sizing: border-box;
+  border-radius: 8px;
+}
+.topside-transfer-container .icon-button-container {
+  display: flex;
+  row-gap: 24px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}</style>

package/dist/composite/transfer/Transfer.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { FilterFn } from "../../data_display/list_box";
+import type { BeforeTransfer, OnTransfer } from "../../types";
+interface Props {
+    style?: string;
+    sourceList?: Array<any>;
+    sourceTitle?: string;
+    targetList?: Array<any>;
+    targetTitle?: string;
+    itemRender?: any;
+    filter?: FilterFn | null;
+    /**
+     * 移动前的否决钩子：返回 false 阻止移动。
+     */
+    beforeTransfer?: BeforeTransfer;
+    /**
+     * 移动完成后的通知。
+     */
+    onchange?: OnTransfer;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+    footer$style?: string;
+}
+declare const Transfer: import("svelte").Component<Props, {}, "sourceList" | "targetList">;
+type Transfer = ReturnType<typeof Transfer>;
+export default Transfer;

package/dist/composite/transfer/index.d.ts

@@ -0,0 +1,4 @@
+import Transfer from "./Transfer.svelte";
+import type { BeforeTransfer, OnTransfer } from "../../types";
+export default Transfer;
+export type { BeforeTransfer, OnTransfer };

package/dist/composite/transfer/index.js

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

package/dist/data_display/accordion/Accordion.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+    import AccordionItemView from './AccordionItemView.svelte';
+    import type AccordionItem from './AccordionItem';
+    import { onMount } from 'svelte';
+
+    interface Props {
+        style?: string;
+        compact?: boolean;
+        /** 折叠项列表 */
+        items?: AccordionItem[];
+        exclusive?: boolean;
+        theme?: string;
+    }
+
+    let {
+        style = '',
+        compact = false,
+        items = [],
+        exclusive = false,
+        theme
+    }: Props = $props();
+
+    let openSet = $state(new Set<AccordionItem>());
+    let activeItem = $state<AccordionItem | null>(null);
+
+    onMount(() => {
+        if (exclusive && activeItem == null && items.length > 0) {
+            activeItem = items[0];
+            openSet.add(items[0]);
+        }
+    });
+
+    const handleAccordionClick = (accordion: AccordionItem) => {
+        return (event: MouseEvent) => {
+            if (exclusive) {
+                if (activeItem !== accordion) {
+                    activeItem = accordion;
+                    openSet = new Set([accordion]);
+                }
+            } else {
+                if (openSet.has(accordion)) {
+                    openSet = new Set(Array.from(openSet).filter(x => x !== accordion));
+                } else {
+                    openSet = new Set([...openSet, accordion]);
+                }
+            }
+        };
+    };
+</script>
+
+<div class="topside-accordion-panel" class:compact {style} data-theme={theme}>
+    {#each items as accordion}
+        <AccordionItemView
+            title={accordion.title}
+            expanded={openSet.has(accordion)}
+            {exclusive}
+            {compact}
+            onclick={handleAccordionClick(accordion)}
+        >
+            {@render accordion.content()}
+        </AccordionItemView>
+    {/each}
+</div>
+
+<style>
+    .topside-accordion-panel {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+
+</style>

package/dist/data_display/accordion/Accordion.svelte.d.ts

@@ -0,0 +1,12 @@
+import type AccordionItem from './AccordionItem';
+interface Props {
+    style?: string;
+    compact?: boolean;
+    /** 折叠项列表 */
+    items?: AccordionItem[];
+    exclusive?: boolean;
+    theme?: string;
+}
+declare const Accordion: import("svelte").Component<Props, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/data_display/accordion/AccordionItem.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+export default interface AccordionItem {
+    title: string;
+    content: Snippet;
+}

package/dist/data_display/accordion/AccordionItem.js

@@ -0,0 +1 @@
+export {};

package/dist/data_display/accordion/AccordionItemView.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+
+    interface Props {
+        title: string;
+        expanded?: boolean;
+        onclick?: (event: MouseEvent) => void;
+        header?: Snippet;
+        exclusive?: boolean;
+        compact?: boolean;
+        children?: Snippet;
+    }
+
+    let {
+        title = '',
+        expanded = false,
+        onclick = undefined,
+        header = undefined,
+        exclusive = false,
+        compact = false,
+        children
+    }: Props = $props();
+
+    const handleClick = (e: MouseEvent) => {
+        onclick?.(e);
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            const mouseEvent = new MouseEvent('click', {
+                bubbles: true,
+                cancelable: true
+            });
+            onclick?.(mouseEvent);
+        }
+    };
+</script>
+
+<div class="accordion">
+    <div
+        class="header"
+        class:compact
+        role="button"
+        tabindex="0"
+        aria-expanded={expanded}
+        onclick={handleClick}
+        onkeydown={handleKeyDown}
+    >
+        {#if header}
+            {@render header()}
+        {:else}
+            <div class="title-wrapper">
+                <span class="truncate">{title}</span>
+            </div>
+            <div class="icon">
+                {#if exclusive}
+                    {#if expanded}
+                        <i class="icon_google_folder_open"></i>
+                    {/if}
+                {:else}
+                    <i class={expanded ? 'icon_google_keyboard_arrow_up' : 'icon_google_keyboard_arrow_down'}></i>
+                {/if}
+            </div>
+        {/if}
+    </div>
+    {#if expanded && children}
+        <div class="content" class:compact>
+            {@render children()}
+        </div>
+    {/if}
+</div>
+
+<style>
+    .accordion {
+        border-bottom: 1px solid var(--topside-accordion-header-border);
+        box-sizing: border-box;
+    }
+
+    .accordion .header {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 100%;
+        cursor: pointer;
+        transition: background-color 0.15s ease;
+        background-color: var(--topside-accordion-header-bg);
+        box-sizing: border-box;
+        gap: var(--topside-spacing-1);
+        padding: var(--topside-spacing-2) var(--topside-spacing-4);
+    }
+
+    .accordion .header.compact {
+        padding: var(--topside-spacing-1);
+    }
+
+    .accordion .header:hover {
+        background-color: var(--topside-accordion-header-hover-bg);
+    }
+
+    .accordion .title-wrapper {
+        flex: 1 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .accordion .icon {
+        flex: 0 0 auto;
+    }
+
+    .accordion .content {
+        overflow: hidden;
+        width: 100%;
+        padding: var(--topside-spacing-4);
+        box-sizing: border-box;
+        transition: height 0.3s ease-out;
+    }
+
+    .accordion .content.compact {
+        padding: var(--topside-spacing-2);
+    }
+
+    .truncate {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+</style>

package/dist/data_display/accordion/AccordionItemView.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    expanded?: boolean;
+    onclick?: (event: MouseEvent) => void;
+    header?: Snippet;
+    exclusive?: boolean;
+    compact?: boolean;
+    children?: Snippet;
+}
+declare const AccordionItemView: import("svelte").Component<Props, {}, "">;
+type AccordionItemView = ReturnType<typeof AccordionItemView>;
+export default AccordionItemView;

package/dist/data_display/accordion/README.md

@@ -0,0 +1,104 @@
+# Accordion
+
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../docs/NAMING.md); the old names `accordions` were removed in 5.1.0 (no compatibility aliases are kept).
+
+A vertically stacked set of expandable panels. Each panel has a clickable header and a collapsible content area.
+
+> Svelte 5 component. Content is passed as **Snippets** (not JSX, not Svelte 4 slots).
+
+## Installation
+
+```bash
+npm install @ticatec/topside-elements
+```
+
+## Import
+
+```svelte
+<script lang="ts">
+  import Accordion from '@ticatec/topside-elements/Accordion';
+  import type { AccordionItem } from '@ticatec/topside-elements/Accordion';
+</script>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `AccordionItem[]` | `[]` | Items to render |
+| `exclusive` | `boolean` | `false` | When `true`, only one panel open at a time. The first item auto-opens on mount. Icon switches to folder/folder-open style |
+| `compact` | `boolean` | `false` | Reduces header and content padding |
+| `style` | `string` | `''` | Inline CSS on the root container |
+| `theme` | `string` | `'theme-light'` | Theme class on the root container |
+
+### `AccordionItem`
+
+```ts
+interface AccordionItem {
+  title: string;       // header label
+  content: Snippet;    // Svelte 5 snippet returning the body
+}
+```
+
+## Examples
+
+### Basic — multiple panels open
+
+```svelte
+<script lang="ts">
+  import Accordion from '@ticatec/topside-elements/Accordion';
+  import type { AccordionItem } from '@ticatec/topside-elements/Accordion';
+
+  const items: AccordionItem[] = [
+    { title: 'Section 1', content: section1 },
+    { title: 'Section 2', content: section2 },
+  ];
+</script>
+
+{#snippet section1()}
+  <div>Content for section 1</div>
+{/snippet}
+
+{#snippet section2()}
+  <div>Content for section 2</div>
+{/snippet}
+
+<Accordion items={items} />
+```
+
+> The snippet must be defined at the **top level of the module script** (or passed via a variable) — not inlined inside the array literal. Inline arrow functions returning JSX like `() => <div>...</div>` are not valid Svelte.
+
+### Exclusive mode — single open panel
+
+```svelte
+<Accordion items={items} exclusive />
+```
+
+In `exclusive` mode:
+- The first item is auto-expanded on mount.
+- Clicking another panel closes the previously open one.
+- The header icon is a folder icon (open when expanded); in non-exclusive mode it's an up/down chevron.
+
+### Compact
+
+```svelte
+<Accordion items={items} compact style="max-width: 600px; margin: 0 auto;" />
+```
+
+## Styling
+
+Override these CSS custom properties (defaults live in `topside-root.scss`):
+
+| Variable | Used on |
+|----------|---------|
+| `--topside-accordion-header-bg` | Header background |
+| `--topside-accordion-header-hover-bg` | Header background on hover |
+| `--topside-accordion-header-border` | Border below each panel |
+
+The `theme` prop is appended as a CSS class on the root, so you can scope overrides: `.theme-light .accordion .header { ... }`.
+
+## Accessibility
+
+- Header has `role="button"` and `tabindex="0"`.
+- Enter / Space toggles the panel.
+- `aria-expanded` reflects the open state.

package/dist/data_display/accordion/README_CN.md

@@ -0,0 +1,104 @@
+# Accordion 手风琴
+
+> **5.1.0 重命名**：本文使用 [API 命名规范](../../../docs/NAMING_CN.md) 中的名字；旧名 `accordions` 已在 5.1.0 移除（5.1.0 不保留兼容别名）。
+
+一组垂直堆叠、可展开/折叠的面板。每个面板有可点击的标题和可折叠的内容区。
+
+> Svelte 5 组件。内容通过 **Snippet** 传入（不是 JSX，也不是 Svelte 4 slot）。
+
+## 安装
+
+```bash
+npm install @ticatec/topside-elements
+```
+
+## 导入
+
+```svelte
+<script lang="ts">
+  import Accordion from '@ticatec/topside-elements/Accordion';
+  import type { AccordionItem } from '@ticatec/topside-elements/Accordion';
+</script>
+```
+
+## 属性
+
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `items` | `AccordionItem[]` | `[]` | 要渲染的项 |
+| `exclusive` | `boolean` | `false` | 为 `true` 时同一时刻只能展开一个面板，第一项在挂载时自动展开，图标改为 文件夹/打开文件夹 样式 |
+| `compact` | `boolean` | `false` | 缩小标题和内容的内边距 |
+| `style` | `string` | `''` | 根容器的内联 CSS |
+| `theme` | `string` | `'theme-light'` | 根容器上的主题 class |
+
+### `AccordionItem`
+
+```ts
+interface AccordionItem {
+  title: string;       // 标题文字
+  content: Snippet;    // Svelte 5 snippet，返回内容区
+}
+```
+
+## 示例
+
+### 基础 —— 多个面板同时展开
+
+```svelte
+<script lang="ts">
+  import Accordion from '@ticatec/topside-elements/Accordion';
+  import type { AccordionItem } from '@ticatec/topside-elements/Accordion';
+
+  const items: AccordionItem[] = [
+    { title: '第一部分', content: section1 },
+    { title: '第二部分', content: section2 },
+  ];
+</script>
+
+{#snippet section1()}
+  <div>第一部分的内容</div>
+{/snippet}
+
+{#snippet section2()}
+  <div>第二部分的内容</div>
+{/snippet}
+
+<Accordion items={items} />
+```
+
+> snippet 必须定义在 **模块顶层**（或通过变量传入），不能在数组字面量里直接写 `() => <div>...</div>` —— 那不是合法的 Svelte 语法。
+
+### exclusive 模式 —— 只展开一个
+
+```svelte
+<Accordion items={items} exclusive />
+```
+
+`exclusive` 模式下：
+- 挂载时第一项自动展开
+- 点击其它面板会关掉之前打开的
+- 标题图标是文件夹样式（展开时是 open folder）；非 exclusive 模式下是上/下箭头
+
+### 紧凑
+
+```svelte
+<Accordion items={items} compact style="max-width: 600px; margin: 0 auto;" />
+```
+
+## 样式定制
+
+覆盖以下 CSS 变量（默认值在 `topside-root.scss`）：
+
+| 变量 | 用处 |
+|------|------|
+| `--topside-accordion-header-bg` | 标题背景色 |
+| `--topside-accordion-header-hover-bg` | 标题悬停背景色 |
+| `--topside-accordion-header-border` | 每个面板下方的分割线颜色 |
+
+`theme` prop 会作为 class 拼到根节点上，所以可以基于它做作用域覆盖：`.theme-light .accordion .header { ... }`。
+
+## 无障碍
+
+- 标题有 `role="button"` 和 `tabindex="0"`
+- Enter / Space 切换展开
+- `aria-expanded` 反映展开状态

package/dist/data_display/accordion/index.d.ts

@@ -0,0 +1,4 @@
+import Accordion from "./Accordion.svelte";
+import type AccordionItem from "./AccordionItem";
+export default Accordion;
+export type { AccordionItem };

package/dist/data_display/accordion/index.js

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