@ticatec/uniface-element 0.3.22 → 5.0.0

package/dist/composite/pagination_panel/README.md

@@ -0,0 +1,128 @@
+# PaginationPanel
+
+A composite pagination bar that combines three controls into one row: a rows-per-page selector, a page navigator, and a total-records info area.
+
+> Svelte 5 component. Callbacks are passed as plain props (`onchange`, `onPageSizeChange`), not as `on:` directives.
+
+## Installation
+
+```bash
+npm install @ticatec/uniface-element
+```
+
+## Import
+
+```svelte
+<script lang="ts">
+  import PaginationPanel from '@ticatec/uniface-element/PaginationPanel';
+  import type { OnPageChange, OnPageSizeChange } from '@ticatec/uniface-element/PaginationPanel';
+</script>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `pageNo` | `number` | `1` | Currently active page (1-based) |
+| `pageCount` | `number` | `0` | Total number of pages |
+| `total` | `number` | `0` | Total record count, shown in the info area |
+| `rowCount` | `number` | `25` | Rows-per-page value. **Bindable** — use `bind:rowCount` to read it back, or pass `onPageSizeChange` to react to changes |
+| `rowsSet` | `Array<number>` | `[25, 50, 100]` | Available options in the rows-per-page selector |
+| `rowCountLabel` | `string` | `'Rows/Page'` | Label shown next to the rows-per-page selector |
+| `type` | `'plain' \| 'round' \| 'circle'` | `'round'` | Visual style of the inner Pagination buttons |
+| `big` | `boolean` | `false` | Larger button size for the inner Pagination |
+| `page$style` | `string` | `''` | Inline CSS applied to the inner Pagination root |
+| `align` | `'left' \| 'right' \| ''` | `''` | Panel alignment. `''` centers; `left`/`right` push the navigator to that side |
+| `generateInfo` | `(total, pageCount, pageNo, rows) => string` | `undefined` | Custom HTML for the info area (returned string is rendered with `{@html}`) |
+| `onchange` | `(pageNo: number) => void` | `undefined` | Fired when the user clicks a page |
+| `onPageSizeChange` | `(size: number) => void` | `undefined` | Fired when the user changes the rows-per-page selector |
+
+> **Callback names matter.** The page-change callback is `onchange` (not `onPageChange`); the rows-per-page callback is `onPageSizeChange` (not `onRowCountChanged`). Passing the wrong name silently does nothing.
+
+## Default info text
+
+When `generateInfo` is not provided, the info area shows `Total: <b>{total}</b> entities.` (English). Provide `generateInfo` to localize it or to show a different format (e.g. "Showing 1–25 of 237").
+
+## Examples
+
+### Minimal
+
+```svelte
+<script lang="ts">
+  import PaginationPanel from '@ticatec/uniface-element/PaginationPanel';
+
+  let pageNo = $state(1);
+  let pageCount = 10;
+  let total = 250;
+
+  const onchange = (p: number) => { pageNo = p; };
+</script>
+
+<PaginationPanel {pageNo} {pageCount} {total} {onchange} />
+```
+
+### With `bind:rowCount`
+
+```svelte
+<script lang="ts">
+  import PaginationPanel from '@ticatec/uniface-element/PaginationPanel';
+
+  let pageNo = $state(1);
+  let rowCount = $state(25);
+  let total = 250;
+  let pageCount = $derived(Math.ceil(total / rowCount));
+
+  // Fires after PaginationPanel has updated its internal value
+  const onPageSizeChange = (size: number) => {
+    pageNo = 1;  // reset to first page on size change
+    console.log('rows per page =', size);
+  };
+  const onchange = (p: number) => { pageNo = p; };
+</script>
+
+<PaginationPanel
+  {pageNo}
+  {pageCount}
+  {total}
+  rowsSet={[10, 25, 50, 100]}
+  bind:rowCount
+  {onchange}
+  {onPageSizeChange}
+/>
+```
+
+### Custom info text (localized)
+
+```svelte
+<script lang="ts">
+  import PaginationPanel from '@ticatec/uniface-element/PaginationPanel';
+
+  const generateInfo = (total: number, _pages: number, pageNo: number, rows: number) => {
+    const start = (pageNo - 1) * rows + 1;
+    const end = Math.min(pageNo * rows, total);
+    return `Showing <b>${start}–${end}</b> of <b>${total}</b> users`;
+  };
+</script>
+
+<PaginationPanel
+  pageNo={3}
+  pageCount={10}
+  total={237}
+  rowCount={25}
+  {generateInfo}
+  align="right"
+/>
+```
+
+## Layout
+
+```
+┌─────────────────────────────────────────────────────────┐
+│ [25 ▼] Rows/Page    ‹ 1 2 3 … 10 ›    Total: 250 users │
+└─────────────────────────────────────────────────────────┘
+       flex: 0 0 auto      flex: 1 1 auto       flex: 0 0 auto
+```
+
+- `align=""` (default): navigator centered in the remaining space
+- `align="left"`: navigator pushed to the left
+- `align="right"`: whole row right-aligned

package/dist/composite/pagination_panel/README_CN.md

@@ -0,0 +1,128 @@
+# PaginationPanel 分页面板
+
+一个组合分页条，把"每页行数选择器 + 页码导航 + 总记录数信息"放在同一行。
+
+> Svelte 5 组件。回调以普通 prop 形式传入（`onchange`、`onPageSizeChange`），不再用 `on:` 指令。
+
+## 安装
+
+```bash
+npm install @ticatec/uniface-element
+```
+
+## 导入
+
+```svelte
+<script lang="ts">
+  import PaginationPanel from '@ticatec/uniface-element/PaginationPanel';
+  import type { OnPageChange, OnPageSizeChange } from '@ticatec/uniface-element/PaginationPanel';
+</script>
+```
+
+## 属性
+
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `pageNo` | `number` | `1` | 当前页码（从 1 开始） |
+| `pageCount` | `number` | `0` | 总页数 |
+| `total` | `number` | `0` | 总记录数，显示在信息区 |
+| `rowCount` | `number` | `25` | 每页行数。**可绑定** —— 用 `bind:rowCount` 读回，或通过 `onPageSizeChange` 监听变化 |
+| `rowsSet` | `Array<number>` | `[25, 50, 100]` | 每页行数选择器的可选项 |
+| `rowCountLabel` | `string` | `'Rows/Page'` | 每页行数选择器旁的标签文字 |
+| `type` | `'plain' \| 'round' \| 'circle'` | `'round'` | 内部 Pagination 按钮的视觉样式 |
+| `big` | `boolean` | `false` | 内部 Pagination 使用大号按钮 |
+| `page$style` | `string` | `''` | 应用到内部 Pagination 根节点的内联 CSS |
+| `align` | `'left' \| 'right' \| ''` | `''` | 面板对齐。`''` 居中；`left` / `right` 把导航推到对应一侧 |
+| `generateInfo` | `(total, pageCount, pageNo, rows) => string` | `undefined` | 自定义信息区 HTML（返回值会以 `{@html}` 渲染） |
+| `onchange` | `(pageNo: number) => void` | `undefined` | 用户点击页码时触发 |
+| `onPageSizeChange` | `(size: number) => void` | `undefined` | 用户改变每页行数时触发 |
+
+> **回调名很重要。** 翻页回调是 `onchange`（不是 `onPageChange`）；每页行数回调是 `onPageSizeChange`（不是 `onRowCountChanged`）。名字写错了不会报错，只是静默不生效。
+
+## 默认信息文案
+
+不传 `generateInfo` 时，信息区显示 `Total: <b>{total}</b> entities.`（英文）。要本地化或换成"显示第 1–25 条，共 237 条"这种格式，传 `generateInfo`。
+
+## 示例
+
+### 最小用法
+
+```svelte
+<script lang="ts">
+  import PaginationPanel from '@ticatec/uniface-element/PaginationPanel';
+
+  let pageNo = $state(1);
+  let pageCount = 10;
+  let total = 250;
+
+  const onchange = (p: number) => { pageNo = p; };
+</script>
+
+<PaginationPanel {pageNo} {pageCount} {total} {onchange} />
+```
+
+### 用 `bind:rowCount`
+
+```svelte
+<script lang="ts">
+  import PaginationPanel from '@ticatec/uniface-element/PaginationPanel';
+
+  let pageNo = $state(1);
+  let rowCount = $state(25);
+  let total = 250;
+  let pageCount = $derived(Math.ceil(total / rowCount));
+
+  // 在 PaginationPanel 更新完内部值之后触发
+  const onPageSizeChange = (size: number) => {
+    pageNo = 1;  // 切换行数后回到第一页
+    console.log('rows per page =', size);
+  };
+  const onchange = (p: number) => { pageNo = p; };
+</script>
+
+<PaginationPanel
+  {pageNo}
+  {pageCount}
+  {total}
+  rowsSet={[10, 25, 50, 100]}
+  bind:rowCount
+  {onchange}
+  {onPageSizeChange}
+/>
+```
+
+### 自定义信息文案（本地化）
+
+```svelte
+<script lang="ts">
+  import PaginationPanel from '@ticatec/uniface-element/PaginationPanel';
+
+  const generateInfo = (total: number, _pages: number, pageNo: number, rows: number) => {
+    const start = (pageNo - 1) * rows + 1;
+    const end = Math.min(pageNo * rows, total);
+    return `显示第 <b>${start}–${end}</b> 条，共 <b>${total}</b> 个用户`;
+  };
+</script>
+
+<PaginationPanel
+  pageNo={3}
+  pageCount={10}
+  total={237}
+  rowCount={25}
+  {generateInfo}
+  align="right"
+/>
+```
+
+## 布局
+
+```
+┌─────────────────────────────────────────────────────────┐
+│ [25 ▼] Rows/Page    ‹ 1 2 3 … 10 ›    Total: 250 users │
+└─────────────────────────────────────────────────────────┘
+       flex: 0 0 auto      flex: 1 1 auto       flex: 0 0 auto
+```
+
+- `align=""`（默认）：导航居中
+- `align="left"`：导航靠左
+- `align="right"`：整行右对齐

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

@@ -0,0 +1,4 @@
+import PaginationPanel from "./PaginationPanel.svelte";
+import type { OnPageChange, GenerateTotalInfo } from "../../types";
+export default PaginationPanel;
+export type { OnPageChange, GenerateTotalInfo };

package/dist/composite/transfer/Transfer.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+    import ListBox from "../../data_display/list_box";
+    import IconButton from "../../general/button/IconButton.svelte";
+
+    import type {FunFilter} from "../../data_display/list_box";
+    import type {TransferData} from "../../types";
+    import i18n, {i18nUtils} from "@ticatec/i18n";
+    import i18nRes from "../../i18nRes";
+
+
+    interface Props {
+        style?: string;
+        sourceList?: Array<any>;
+        sourceTitle?: string;
+        targetList?: Array<any>;
+        targetTitle?: string;
+        itemRender?: any;
+        filter?: FunFilter | null;
+        onchange?: TransferData;
+        onfocus?: (event: FocusEvent) => void;
+        onblur?: (event: FocusEvent) => void;
+        footer$style?: string;
+    }
+
+    let {
+        style = '',
+        sourceList = $bindable([]),
+        sourceTitle,
+        targetList = $bindable([]),
+        targetTitle,
+        itemRender = null,
+        filter = null,
+        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([]);
+
+    const moveToTarget = async () => {
+        if (sourceSelectedList.length > 0 && await onchange?.(sourceSelectedList, "right")) {
+            targetList = [...targetList, ...sourceSelectedList];
+            sourceList = sourceList.filter(item => sourceSelectedList.indexOf(item) === -1);
+            sourceSelectedList = [];
+        }
+    }
+
+    const moveToSource = async () => {
+        if (targetSelectedList.length > 0 && await onchange?.(targetSelectedList, "left")) {
+            sourceList = [...sourceList, ...targetSelectedList];
+            targetList = targetList.filter(item => targetSelectedList.indexOf(item) === -1);
+            targetSelectedList = [];
+        }
+    }
+</script>
+
+<div class="uniface-transfer-container" {onfocus} {onblur} tabindex="0">
+    <ListBox class="list-container" title={sourceTitle} {filter} style="{style}; grid-column: 1/2" list={sourceList} selectMode="multiple"
+             bind:selectedList={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="{style}; grid-column: 3/4" {filter} list={targetList} selectMode="multiple"
+             bind:selectedList={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>.uniface-transfer-container {
+  height: 100%;
+  width: 100%;
+  display: grid;
+  grid-auto-columns: 1fr 60px 1fr;
+  column-gap: 16px;
+}
+.uniface-transfer-container .header-container {
+  margin: 10px auto 10px 10px;
+}
+.uniface-transfer-container .list-container {
+  height: 100%;
+  flex: 1 1 auto;
+  overflow: hidden;
+  border: 1px solid var(--uniface-inside-border-color);
+  box-sizing: border-box;
+  border-radius: 8px;
+}
+.uniface-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,18 @@
+import type { FunFilter } from "../../data_display/list_box";
+import type { TransferData } from "../../types";
+interface Props {
+    style?: string;
+    sourceList?: Array<any>;
+    sourceTitle?: string;
+    targetList?: Array<any>;
+    targetTitle?: string;
+    itemRender?: any;
+    filter?: FunFilter | null;
+    onchange?: TransferData;
+    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 { TransferData } from "../../types";
+export default Transfer;
+export type { TransferData };

package/dist/data_display/accordion/Accordion.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+    import AccordionItemView from './AccordionItemView.svelte';
+    import type AccordionItem from './AccordionItem';
+    import { onMount } from 'svelte';
+
+    interface Props {
+        style?: string;
+        compact?: boolean;
+        accordions?: AccordionItem[];
+        exclusive?: boolean;
+        theme?: string;
+    }
+
+    let {
+        style = '',
+        compact = false,
+        accordions = [],
+        exclusive = false,
+        theme = 'theme-light'
+    }: Props = $props();
+
+    let openSet = $state(new Set<AccordionItem>());
+    let activeItem = $state<AccordionItem | null>(null);
+
+    onMount(() => {
+        if (exclusive && activeItem == null && accordions.length > 0) {
+            activeItem = accordions[0];
+            openSet.add(accordions[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="uniface-accordion-panel {theme}" class:compact {style}>
+    {#each accordions as accordion}
+        <AccordionItemView
+            title={accordion.title}
+            isOpen={openSet.has(accordion)}
+            {exclusive}
+            {compact}
+            onclick={handleAccordionClick(accordion)}
+        >
+            {@render accordion.content()}
+        </AccordionItemView>
+    {/each}
+</div>
+
+<style>
+    .uniface-accordion-panel {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+
+    .uniface-accordion-panel.compact {
+        /* Compact mode handled by passing prop to AccordionItemView */
+    }
+</style>

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

@@ -0,0 +1,11 @@
+import type AccordionItem from './AccordionItem';
+interface Props {
+    style?: string;
+    compact?: boolean;
+    accordions?: 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/AccordionItemView.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+
+    interface Props {
+        title: string;
+        isOpen?: boolean;
+        onclick?: (event: MouseEvent) => void;
+        header?: Snippet;
+        exclusive?: boolean;
+        compact?: boolean;
+        children?: Snippet;
+    }
+
+    let {
+        title = '',
+        isOpen = 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={isOpen}
+        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 isOpen}
+                        <i class="icon_google_folder_open"></i>
+                    {/if}
+                {:else}
+                    <i class={isOpen ? 'icon_google_keyboard_arrow_up' : 'icon_google_keyboard_arrow_down'}></i>
+                {/if}
+            </div>
+        {/if}
+    </div>
+    {#if isOpen && children}
+        <div class="content" class:compact>
+            {@render children()}
+        </div>
+    {/if}
+</div>
+
+<style>
+    .accordion {
+        border-bottom: 1px solid var(--uniface-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(--uniface-accordion-header-bg);
+        box-sizing: border-box;
+        gap: var(--uniface-spacing-1);
+        padding: var(--uniface-spacing-2) var(--uniface-spacing-4);
+    }
+
+    .accordion .header.compact {
+        padding: var(--uniface-spacing-1);
+    }
+
+    .accordion .header:hover {
+        background-color: var(--uniface-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(--uniface-spacing-4);
+        box-sizing: border-box;
+        transition: height 0.3s ease-out;
+    }
+
+    .accordion .content.compact {
+        padding: var(--uniface-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;
+    isOpen?: 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;