@ticatec/uniface-element 0.3.22 → 5.0.0

package/dist/data_display/accordion/README.md

@@ -0,0 +1,102 @@
+# Accordion
+
+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/uniface-element
+```
+
+## Import
+
+```svelte
+<script lang="ts">
+  import Accordion from '@ticatec/uniface-element/Accordion';
+  import type { AccordionItem } from '@ticatec/uniface-element/Accordion';
+</script>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `accordions` | `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/uniface-element/Accordion';
+  import type { AccordionItem } from '@ticatec/uniface-element/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 accordions={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 accordions={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 accordions={items} compact style="max-width: 600px; margin: 0 auto;" />
+```
+
+## Styling
+
+Override these CSS custom properties (defaults live in `uniface-root.scss`):
+
+| Variable | Used on |
+|----------|---------|
+| `--uniface-accordion-header-bg` | Header background |
+| `--uniface-accordion-header-hover-bg` | Header background on hover |
+| `--uniface-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,102 @@
+# Accordion 手风琴
+
+一组垂直堆叠、可展开/折叠的面板。每个面板有可点击的标题和可折叠的内容区。
+
+> Svelte 5 组件。内容通过 **Snippet** 传入（不是 JSX，也不是 Svelte 4 slot）。
+
+## 安装
+
+```bash
+npm install @ticatec/uniface-element
+```
+
+## 导入
+
+```svelte
+<script lang="ts">
+  import Accordion from '@ticatec/uniface-element/Accordion';
+  import type { AccordionItem } from '@ticatec/uniface-element/Accordion';
+</script>
+```
+
+## 属性
+
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `accordions` | `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/uniface-element/Accordion';
+  import type { AccordionItem } from '@ticatec/uniface-element/Accordion';
+
+  const items: AccordionItem[] = [
+    { title: '第一部分', content: section1 },
+    { title: '第二部分', content: section2 },
+  ];
+</script>
+
+{#snippet section1()}
+  <div>第一部分的内容</div>
+{/snippet}
+
+{#snippet section2()}
+  <div>第二部分的内容</div>
+{/snippet}
+
+<Accordion accordions={items} />
+```
+
+> snippet 必须定义在 **模块顶层**（或通过变量传入），不能在数组字面量里直接写 `() => <div>...</div>` —— 那不是合法的 Svelte 语法。
+
+### exclusive 模式 —— 只展开一个
+
+```svelte
+<Accordion accordions={items} exclusive />
+```
+
+`exclusive` 模式下：
+- 挂载时第一项自动展开
+- 点击其它面板会关掉之前打开的
+- 标题图标是文件夹样式（展开时是 open folder）；非 exclusive 模式下是上/下箭头
+
+### 紧凑
+
+```svelte
+<Accordion accordions={items} compact style="max-width: 600px; margin: 0 auto;" />
+```
+
+## 样式定制
+
+覆盖以下 CSS 变量（默认值在 `uniface-root.scss`）：
+
+| 变量 | 用处 |
+|------|------|
+| `--uniface-accordion-header-bg` | 标题背景色 |
+| `--uniface-accordion-header-hover-bg` | 标题悬停背景色 |
+| `--uniface-accordion-header-border` | 每个面板下方的分割线颜色 |
+
+`theme` prop 会作为 class 拼到根节点上，所以可以基于它做作用域覆盖：`.theme-light .accordion .header { ... }`。
+
+## 无障碍
+
+- 标题有 `role="button"` 和 `tabindex="0"`
+- Enter / Space 切换展开
+- `aria-expanded` 反映展开状态

package/dist/data_display/card/Card.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+    import type {Snippet} from 'svelte';
+    import type CardAction from "./CardAction";
+    import CommonCardActionBar from "./CommonCardActionBar.svelte";
+    import CardHeader from "./CardHeader.svelte";
+
+    interface Props {
+        style?: string;
+        title?: string;
+        actions?: Array<CardAction>;
+        variant?: 'plain' | '3d';
+        data?: any;
+        headerBar?: Snippet;
+        children?: Snippet;
+        theme?: string;
+    }
+
+    let {
+        style = "",
+        title = "",
+        actions = [],
+        variant = 'plain',
+        data = null,
+        headerBar,
+        children,
+        theme = ""
+    }: Props = $props();
+</script>
+
+<div class="uniface-card" style={style} data-theme={theme}>
+    <div class="card-inner shadow-hover" class:variant-3d={variant === '3d'} >
+        {#if title}
+            <div class="card-header">
+                <CardHeader {title}/>
+            </div>
+        {:else if headerBar}
+            <div class="card-header">
+                {@render headerBar()}
+            </div>
+        {/if}
+        <div class="card-content">
+            {#if children}
+                {@render children()}
+            {/if}
+        </div>
+        {#if actions && actions.length > 0}
+            <CommonCardActionBar {actions} {data}/>
+        {/if}
+    </div>
+</div>
+
+<style>
+    .uniface-card {
+        display: block;
+        width: var(--uniface-card-default-size);
+        padding: 4px 0;
+        overflow: hidden;
+    }
+
+    .card-inner {
+        display: block;
+        border-radius: var(--uniface-card-radius);
+        position: relative;
+        background-color: var(--uniface-card-color-surface);
+        flex-direction: column;
+        overflow: hidden;
+        border: 1px solid var(--uniface-card-border-color);
+        transition: border-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
+        transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
+        box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
+    }
+
+
+    .card-header {
+        padding: var(--uniface-card-header-margin);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-weight: 600;
+        font-size: 1.15rem;
+        color: var(--uniface-card-text-muted);
+        border-bottom: 1px solid var(--uniface-card-color-inside-border);
+    }
+
+    .card-content {
+        flex: 1 1 auto;
+        padding: 20px;
+        font-size: 14px;
+        overflow: hidden;
+        line-height: 1.6;
+    }
+
+    .variant-3d {
+        box-shadow: var(--uniface-card-shadow, rgba(0, 0, 0, 0.16) 0px 1px 4px);
+    }
+</style>

package/dist/data_display/card/Card.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type CardAction from "./CardAction";
+interface Props {
+    style?: string;
+    title?: string;
+    actions?: Array<CardAction>;
+    variant?: 'plain' | '3d';
+    data?: any;
+    headerBar?: Snippet;
+    children?: Snippet;
+    theme?: string;
+}
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/data_display/card/CardAction.d.ts

@@ -0,0 +1,23 @@
+export type ActionCallback = (data: any) => void;
+export default interface CardAction {
+    /**
+     * 使用icon字体
+     */
+    icon?: string;
+    /**
+     * 直接嵌入图标
+     */
+    img?: string;
+    /**
+     * 鼠标停留的提示
+     */
+    tooltip?: string;
+    /**
+     *
+     */
+    disabled?: boolean;
+    /**
+     *
+     */
+    callback: ActionCallback;
+}

package/dist/data_display/card/CardHeader.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    interface Props {
+        title: string;
+    }
+
+    let {title}: Props = $props();
+</script>
+
+<span>{title}</span>

package/dist/data_display/card/CardHeader.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    title: string;
+}
+declare const CardHeader: import("svelte").Component<Props, {}, "">;
+type CardHeader = ReturnType<typeof CardHeader>;
+export default CardHeader;

package/dist/data_display/card/CommonCardActionBar.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+    import type CardAction from "./CardAction";
+    import utils from "../../overlay/common/utils";
+
+    interface Props {
+        actions: Array<CardAction>;
+        color?: string | null;
+        data?: any;
+        theme?: string;
+    }
+
+    let {
+        actions,
+        color = null,
+        data,
+        theme = ""
+    }: Props = $props();
+
+    let clickEnable = $state(true);
+
+    const handleActionClick = (action: CardAction) => async (e: MouseEvent) => {
+        if (clickEnable && !action.disabled) {
+            clickEnable = false;
+            action.callback?.(data);
+            await utils.sleep(0.5);
+            clickEnable = true;
+        }
+    };
+</script>
+
+<div class="card-action-bar">
+    {#each actions as action}
+        {#if action.icon}
+            <i class="action-icon {action.icon}"
+               class:disabled={action.disabled}
+               data-tip={action.disabled ? undefined : action.tooltip}
+               aria-hidden="true"
+               onclick={handleActionClick(action)}
+            ></i>
+        {:else if action.img}
+            <img class="card-action-img"
+                 class:disabled={action.disabled}
+                 alt=""
+                 src={action.img}
+                 data-tip={action.disabled ? undefined : action.tooltip}
+                 aria-hidden="true"
+                 onclick={handleActionClick(action)}
+            />
+        {/if}
+
+    {/each}
+</div>
+
+<style>
+    .card-action-bar {
+        padding: var(--uniface-card-footer-margin);
+        height: var(--uniface-card-footer-height);
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
+        text-align: center;
+        font-size: var(--uniface-card-bar-font-size);
+        border-top: 1px solid var(--uniface-card-color-inside-border);
+        color: var(--uniface-card-color-action-bar);
+    }
+
+    .action-icon {
+        display: block;
+        cursor: pointer;
+        position: relative;
+        font-size: var(--action-image-size, var(--uniface-action-image-size, 15px));
+    }
+
+    .action-icon:hover {
+        color: var(--uniface-card-color-action-bar-hover);
+    }
+
+    .action-icon:active {
+        position: relative;
+        top: 1px;
+    }
+
+    .action-icon.disabled {
+        color: var(--uniface-card-color-action-bar-disabled);
+        top: unset!important;
+        cursor: not-allowed;
+    }
+
+
+    .card-action-img {
+        width: var(--action-image-size, var(--uniface-action-image-size));
+        height: var(--action-image-size, var(--uniface-action-image-size));
+        cursor: pointer;
+    }
+
+    .card-action-img:hover {
+    }
+
+    .card-action-img:active {
+        position: relative;
+        top: 1px;
+    }
+
+    .card-action-img.disabled {
+        cursor: not-allowed;
+        filter: grayscale(100%);
+    }
+
+    .action-item.disabled .action-icon:hover {
+        color: var(--disabled-button-text-color, var(--uniface-disabled-button-text-color, #B3BCCA));
+    }
+
+    .action-item.disabled .action-icon:active {
+        position: relative;
+        top: 0;
+    }
+
+    .action-item.disabled .card-action-img {
+        filter: grayscale(100%);
+        cursor: default;
+    }
+
+    .action-item.disabled .card-action-img:hover {
+        width: var(--action-image-size, var(--uniface-action-image-size, 15px));
+        height: var(--action-image-size, var(--uniface-action-image-size, 15px));
+    }
+
+    .action-item.disabled .card-action-img:active {
+        position: relative;
+        top: 0;
+    }
+</style>

package/dist/data_display/card/CommonCardActionBar.svelte.d.ts

@@ -0,0 +1,10 @@
+import type CardAction from "./CardAction";
+interface Props {
+    actions: Array<CardAction>;
+    color?: string | null;
+    data?: any;
+    theme?: string;
+}
+declare const CommonCardActionBar: import("svelte").Component<Props, {}, "">;
+type CommonCardActionBar = ReturnType<typeof CommonCardActionBar>;
+export default CommonCardActionBar;

package/dist/data_display/card/README.md

@@ -0,0 +1,125 @@
+# Card
+
+A content container with optional title bar (or custom header snippet), body, and an action bar at the bottom.
+
+> Svelte 5 component. Custom header is passed as the `headerBar` snippet; body content is the default children.
+
+## Installation
+
+```bash
+npm install @ticatec/uniface-element
+```
+
+## Import
+
+```svelte
+<script lang="ts">
+  import Card from '@ticatec/uniface-element/Card';
+  import type { CardAction } from '@ticatec/uniface-element/Card';
+</script>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | `''` | Plain-text title rendered by `CardHeader`. If empty and `headerBar` is provided, the custom snippet is used instead |
+| `headerBar` | `Snippet` | `undefined` | Custom header content (takes over when `title` is empty) |
+| `actions` | `CardAction[]` | `[]` | Action bar items rendered at the bottom. Empty array → no footer |
+| `data` | `any` | `null` | Passed as the argument to each action's `callback(data)` |
+| `variant` | `'plain' \| '3d'` | `'plain'` | `'3d'` adds a box-shadow to lift the card |
+| `style` | `string` | `''` | Inline CSS on the root |
+| `theme` | `string` | `''` | Theme value, exposed as `data-theme` on the root for scoped CSS |
+| `children` | `Snippet` | `undefined` | Card body |
+
+### `CardAction`
+
+```ts
+interface CardAction {
+  icon?: string;       // icon font class, e.g. 'icon_google_edit'
+  img?: string;        // image URL (used when `icon` is not set)
+  tooltip?: string;    // hover tooltip (skipped when `disabled`)
+  disabled?: boolean;
+  callback: (data: any) => void;
+}
+```
+
+> If both `icon` and `img` are omitted, the action renders nothing — pick one. The action bar enforces a ~500ms debounce between clicks on the same action.
+
+## Examples
+
+### Title + body
+
+```svelte
+<Card title="My Card" variant="3d">
+  <p>This is the card content</p>
+</Card>
+```
+
+### Custom header snippet
+
+```svelte
+<Card {headerBar}>
+  <p>Body</p>
+</Card>
+
+{#snippet headerBar()}
+  <header style="display:flex; align-items:center; gap:8px;">
+    <i class="icon_google_star"></i>
+    <strong>Custom title</strong>
+  </header>
+{/snippet}
+```
+
+### Action bar
+
+```svelte
+<script lang="ts">
+  import Card from '@ticatec/uniface-element/Card';
+  import type { CardAction } from '@ticatec/uniface-element/Card';
+
+  const cardData = { id: 123, name: 'Sample Item' };
+
+  const actions: CardAction[] = [
+    { icon: 'icon_google_save', tooltip: 'Save', callback: (d) => console.log('save', d) },
+    { icon: 'icon_google_delete', tooltip: 'Delete', callback: (d) => console.log('delete', d) },
+  ];
+</script>
+
+<Card title="Item Details" {actions} data={cardData} variant="3d">
+  <p><strong>ID:</strong> {cardData.id}</p>
+  <p><strong>Name:</strong> {cardData.name}</p>
+</Card>
+```
+
+## Styling
+
+### Card body
+
+| Variable | Used on |
+|----------|---------|
+| `--uniface-card-default-size` | Root width |
+| `--uniface-card-radius` | Border radius |
+| `--uniface-card-color-surface` | Card background |
+| `--uniface-card-border-color` | Outer border |
+| `--uniface-card-color-inside-border` | Border between header / body / footer |
+| `--uniface-card-header-margin` | Header padding |
+| `--uniface-card-text-muted` | Title text color |
+| `--uniface-card-shadow` | Drop shadow for `variant="3d"` (falls back to `rgba(0,0,0,0.16) 0 1px 4px`) |
+
+### Action bar
+
+| Variable | Used on |
+|----------|---------|
+| `--uniface-card-footer-margin` | Footer padding |
+| `--uniface-card-footer-height` | Footer height |
+| `--uniface-card-bar-font-size` | Action icon size baseline |
+| `--uniface-card-color-action-bar` | Default icon color |
+| `--uniface-card-color-action-bar-hover` | Icon hover color |
+| `--uniface-card-color-action-bar-disabled` | Icon disabled color |
+| `--action-image-size` / `--uniface-action-image-size` | Per-card override for action icon/image size |
+
+## Variants
+
+- **`plain`** (default) — flat, only border
+- **`3d`** — adds `--uniface-card-shadow`; the root also has a hover transition (border-color / transform / box-shadow)