@ticatec/uniface-element 0.3.23 → 5.0.1

package/dist/general/tag/Tag.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+    import utils from "../../overlay/common/utils";
+
+    interface Props {
+        size?: 'big' | 'middle' | 'small';
+        variant?: 'borderless' | 'border' | 'round';
+        removable?: boolean;
+        theme?: string;
+        data?: any;
+        text?: string;
+        style?: string;
+        class?: string;
+        ondelete?: (data?: any)=>void;
+        color?: string;
+    }
+
+    let {
+        size = 'middle',
+        variant = 'border',
+        removable = true,
+        data,
+        theme,
+        text,
+        style,
+        ondelete,
+        color
+    }: Props = $props();
+
+    const colorClass = $derived(utils.isEmpty(color) ? '' : `color color-g${color}`);
+
+    const handleTagClick = (event: MouseEvent) => {
+        ondelete?.(data?.id);
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+</script>
+
+<div class="uniface-tag" {style} data-theme="{theme}">
+    <div class="{size} {variant} {colorClass}" class:removable={removable}>
+        <span>{text}</span>
+        {#if removable}
+            <i class="icon_google_clear uniface-remove-icon" aria-hidden="true" onclick={handleTagClick}></i>
+        {/if}
+    </div>
+</div>
+
+<style>
+    .uniface-tag {
+        display: inline-block;
+        cursor: default;
+        position: relative;
+    }
+
+    .uniface-tag > div {
+        display: block;
+        position: relative;
+        padding: 0 var(--uniface-tag-margin);
+        line-height: var(--uniface-tag-height);
+        color: var(--uniface-tag-g0-color, #374151);
+    }
+
+    .uniface-tag > div.big {
+        line-height: var(--uniface-tag-height-bg);
+    }
+
+    .uniface-tag > div.small {
+        line-height: var(--uniface-tag-height-sm);
+    }
+
+    .uniface-tag > div.border {
+        border-radius: var(--uniface-radius);
+        border: 1px solid color-mix(in srgb, var(--uniface-tag-g0-color) 10%, transparent);
+    }
+
+    .uniface-tag > div.round {
+        border-radius: var(--uniface-radius-xl);
+        border: 1px solid color-mix(in srgb, var(--uniface-tag-g0-color) 50%, transparent);
+    }
+
+    .uniface-tag > div .uniface-remove-icon {
+        color: var(--uniface-tag-action-color);
+        position: absolute;
+        opacity: 0.6;
+        font-size: var(--uniface-tag-font-size);
+        border-radius: 50%;
+        cursor: pointer;
+        top: 2px;
+        right: 2px;
+    }
+
+    .uniface-tag > div .uniface-remove-icon:active {
+        top: 3px;
+    }
+
+    .uniface-tag > div .uniface-remove-icon  {
+        display: block;
+    }
+
+    .uniface-tag > div:hover .uniface-remove-icon {
+        opacity: 1;
+    }
+
+    .uniface-tag > div:not(:hover) .uniface-remove-icon {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+
+    .uniface-tag > div.color-g1 {
+        color: var(--uniface-tag-g1-color);
+        background-color: color-mix(in srgb, var(--uniface-tag-g1-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--uniface-tag-g1-color) 50%, transparent);
+    }
+
+    .uniface-tag > div.color-g2 {
+        color: var(--uniface-tag-g2-color);
+        background-color: color-mix(in srgb, var(--uniface-tag-g2-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--uniface-tag-g2-color) 50%, transparent);
+    }
+
+    .uniface-tag > div.color-g3 {
+        color: var(--uniface-tag-g3-color);
+        background-color: color-mix(in srgb, var(--uniface-tag-g3-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--uniface-tag-g3-color) 50%, transparent);
+    }
+
+    .uniface-tag > div.color-g4 {
+        color: var(--uniface-tag-g4-color);
+        background-color: color-mix(in srgb, var(--uniface-tag-g4-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--uniface-tag-g4-color) 50%, transparent);
+    }
+
+    .uniface-tag > div.color-g5 {
+        color: var(--uniface-tag-g5-color);
+        background-color: color-mix(in srgb, var(--uniface-tag-g5-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--uniface-tag-g5-color) 50%, transparent);
+    }
+
+    .uniface-tag > div.color-g6 {
+        color: var(--uniface-tag-g6-color);
+        background-color: color-mix(in srgb, var(--uniface-tag-g6-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--uniface-tag-g6-color) 50%, transparent);
+    }
+
+    .uniface-tag > div.color-g7 {
+        color: var(--uniface-tag-g7-color);
+        background-color: color-mix(in srgb, var(--uniface-tag-g7-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--uniface-tag-g7-color) 50%, transparent);
+    }
+
+    .uniface-tag > div.color-g8 {
+        color: var(--uniface-tag-g8-color);
+        background-color: color-mix(in srgb, var(--uniface-tag-g8-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--uniface-tag-g8-color) 50%, transparent);
+    }
+
+    .uniface-tag > div.color-g9 {
+        color: var(--uniface-tag-g9-color);
+        background-color: color-mix(in srgb, var(--uniface-tag-g9-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--uniface-tag-g9-color) 50%, transparent);
+    }
+
+    .uniface-tag > div.color-g10 {
+        color: var(--uniface-tag-g10-color);
+        background-color: color-mix(in srgb, var(--uniface-tag-g10-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--uniface-tag-g10-color) 50%, transparent);
+    }
+
+    .uniface-tag > div.color-g11 {
+        color: var(--uniface-tag-g11-color);
+        background-color: color-mix(in srgb, var(--uniface-tag-g11-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--uniface-tag-g11-color) 50%, transparent);
+    }
+
+    .uniface-tag > div.color-g12 {
+        color: var(--uniface-tag-g12-color);
+        background-color: var(--uniface-tag-g12-bg);
+        border-color: var(--uniface-tag-g12-border);
+    }
+</style>

package/dist/general/tag/Tag.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    size?: 'big' | 'middle' | 'small';
+    variant?: 'borderless' | 'border' | 'round';
+    removable?: boolean;
+    theme?: string;
+    data?: any;
+    text?: string;
+    style?: string;
+    class?: string;
+    ondelete?: (data?: any) => void;
+    color?: string;
+}
+declare const Tag: import("svelte").Component<Props, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

package/dist/i18nRes/i18nRes.d.ts

@@ -1,2 +1,3 @@
-declare const i18nRes: any;
+import { i18nUtils } from "@ticatec/i18n";
+declare const i18nRes: ReturnType<typeof i18nUtils.createResourceProxy>;
 export default i18nRes;

package/dist/i18nRes/i18nRes.js

@@ -5,6 +5,8 @@ const langRes = {
         btnCancel: 'Cancel',
         btnConfirm: "OK",
         textMore: "Load more",
+        filterPlaceholder: "Search...",
+        noResultsText: "No results...",
     },
     colorPicker: "Pick up color",
     calendar: {
@@ -27,14 +29,11 @@ const langRes = {
         btnRemove: "Delete",
         btnPickup: "Pickup files"
     },
-    propertyEditor: {
-        colName: "Attribute",
-        colValue: "Value"
-    },
     dataTable: {
         rowNo: "#",
         actions: "Actions",
-        emptyDataSet: 'Empty dataset'
+        emptyDataSet: 'Empty dataset',
+        totalInfo: "Total: <b>{{total}}</b>"
     },
     transfer: {
         selectIndicator: "Selected: {{selected}}/{{total}}"

package/dist/index.d.ts

@@ -1,17 +1,10 @@
 import { DateContext } from "./base-calendar";
-import type { IDialog } from './dialog';
-import { type IMessageBox, ModalResult } from "./message-box";
-import type { Toast } from "./toast";
-import type { Indicator } from "./indicator";
-import { DisplayMode } from "./common/DisplayMode.js";
-import type IHint from "./popup-hint/IHint";
-export { DateContext, ModalResult, DisplayMode };
+import type { IDialog } from './overlay/dialog';
+import { ModalResult } from "./overlay/message-box";
+import { setAppTitle, setEditorVariant, setLayoutMode } from "./unifaceContext";
+export { DateContext, ModalResult, setLayoutMode, setEditorVariant, setAppTitle };
 declare global {
     interface Window {
-        Indicator: Indicator;
-        Toast: Toast;
-        MessageBox: IMessageBox;
         Dialog: IDialog;
-        Hint: IHint;
     }
 }

package/dist/index.js

@@ -1,4 +1,4 @@
 import { DateContext } from "./base-calendar";
-import { ModalResult } from "./message-box";
-import { DisplayMode } from "./common/DisplayMode.js";
-export { DateContext, ModalResult, DisplayMode };
+import { ModalResult } from "./overlay/message-box";
+import { setAppTitle, setEditorVariant, setLayoutMode } from "./unifaceContext";
+export { DateContext, ModalResult, setLayoutMode, setEditorVariant, setAppTitle };

package/dist/layout/flex/README.md

@@ -0,0 +1,148 @@
+# FlexBlock
+
+A flexible flexbox layout component with support for horizontal/vertical directions, resizing, and growth/shrink options.
+
+## Installation
+
+```bash
+npm install @ticatec/uniface-element
+```
+
+## Import
+
+```typescript
+import FlexBlock from '@ticatec/uniface-element/FlexBlock';
+```
+
+## Basic Usage
+
+```svelte
+<script>
+  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
+</script>
+
+<FlexBlock>
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</FlexBlock>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | Flex direction |
+| `flex` | `boolean` | `false` | Apply flex styling based on direction |
+| `fixed` | `boolean` | `false` | Enable fixed positioning |
+| `grow` | `boolean` | `false` | Enable flex-grow |
+| `shrink` | `boolean` | `false` | Enable flex-shrink |
+| `autoFit` | `boolean` | `false` | Enable auto-fit to content |
+| `style` | `string` | `''` | Custom CSS styles for the container |
+| `class` | `string` | `''` | Custom CSS class name |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | Main content area |
+
+## Events
+
+No custom events.
+
+## Examples
+
+### Horizontal Layout
+
+```svelte
+<script>
+  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
+</script>
+
+<FlexBlock direction="horizontal" style="gap: 16px;">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</FlexBlock>
+```
+
+### Vertical Layout
+
+```svelte
+<script>
+  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
+</script>
+
+<FlexBlock direction="vertical" style="gap: 16px;">
+  <div>Header</div>
+  <div>Main Content</div>
+  <div>Footer</div>
+</FlexBlock>
+```
+
+### Flex Grow and Shrink
+
+```svelte
+<script>
+  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
+</script>
+
+<FlexBlock direction="horizontal" flex grow shrink>
+  <div style="flex: 1;">Flexible Item</div>
+  <div style="width: 200px;">Fixed Item</div>
+</FlexBlock>
+```
+
+### Auto-Fit Layout
+
+```svelte
+<script>
+  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
+</script>
+
+<FlexBlock autoFit>
+  {#each items as item}
+    <div>{item}</div>
+  {/each}
+</FlexBlock>
+```
+
+### Card Grid
+
+```svelte
+<script>
+  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
+</script>
+
+<FlexBlock direction="horizontal" autoFit style="gap: 16px;">
+  {#each cards as card}
+    <div style="border: 1px solid #ddd; padding: 16px; border-radius: 8px;">
+      <h3>{card.title}</h3>
+      <p>{card.description}</p>
+    </div>
+  {/each}
+</FlexBlock>
+```
+
+### Fixed Positioning
+
+```svelte
+<script>
+  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
+</script>
+
+<FlexBlock fixed direction="vertical" style="position: fixed; top: 0; left: 0; right: 0; height: 100vh;">
+  <div style="height: 60px;">Header</div>
+  <div style="flex: 1; overflow: auto;">Main Content</div>
+  <div style="height: 40px;">Footer</div>
+</FlexBlock>
+```
+
+## Best Practices
+
+1. **Use direction prop** - Choose horizontal or vertical based on your layout needs
+2. **Combine with flex** - Use `flex` prop for responsive layouts that adapt to container size
+3. **Use autoFit** - Enable auto-fit for dynamic content that should wrap
+4. **Use grow/shrink** - Control how items expand or contract within the flex container
+5. **Fixed positioning** - Use `fixed` for sticky layouts that don't scroll with content

package/dist/layout/flex/README_CN.md

@@ -0,0 +1,148 @@
+# FlexBlock 弹性布局组件
+
+一个灵活的 flexbox 布局组件，支持水平/垂直方向、调整大小和增长/收缩选项。
+
+## 安装
+
+```bash
+npm install @ticatec/uniface-element
+```
+
+## 导入
+
+```typescript
+import FlexBlock from '@ticatec/uniface-element/FlexBlock';
+```
+
+## 基本用法
+
+```svelte
+<script>
+  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
+</script>
+
+<FlexBlock>
+  <div>项目 1</div>
+  <div>项目 2</div>
+  <div>项目 3</div>
+</FlexBlock>
+```
+
+## 属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|---------|------|
+| `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | Flex 方向 |
+| `flex` | `boolean` | `false` | 根据方向应用 flex 样式 |
+| `fixed` | `boolean` | `false` | 启用固定定位 |
+| `grow` | `boolean` | `false` | 启用 flex-grow |
+| `shrink` | `boolean` | `false` | 启用 flex-shrink |
+| `autoFit` | `boolean` | `false` | 启用自动适应内容 |
+| `style` | `string` | `''` | 容器的自定义 CSS 样式 |
+| `class` | `string` | `''` | 自定义 CSS 类名 |
+
+## 插槽
+
+| 插槽 | 说明 |
+|------|------|
+| `default` | 主要内容区域 |
+
+## 事件
+
+无自定义事件。
+
+## 示例
+
+### 水平布局
+
+```svelte
+<script>
+  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
+</script>
+
+<FlexBlock direction="horizontal" style="gap: 16px;">
+  <div>项目 1</div>
+  <div>项目 2</div>
+  <div>项目 3</div>
+</FlexBlock>
+```
+
+### 垂直布局
+
+```svelte
+<script>
+  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
+</script>
+
+<FlexBlock direction="vertical" style="gap: 16px;">
+  <div>头部</div>
+  <div>主要内容</div>
+  <div>页脚</div>
+</FlexBlock>
+```
+
+### 弹性增长和收缩
+
+```svelte
+<script>
+  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
+</script>
+
+<FlexBlock direction="horizontal" flex grow shrink>
+  <div style="flex: 1;">弹性项目</div>
+  <div style="width: 200px;">固定项目</div>
+</FlexBlock>
+```
+
+### 自动适应布局
+
+```svelte
+<script>
+  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
+</script>
+
+<FlexBlock autoFit>
+  {#each items as item}
+    <div>{item}</div>
+  {/each}
+</FlexBlock>
+```
+
+### 卡片网格
+
+```svelte
+<script>
+  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
+</script>
+
+<FlexBlock direction="horizontal" autoFit style="gap: 16px;">
+  {#each cards as card}
+    <div style="border: 1px solid #ddd; padding: 16px; border-radius: 8px;">
+      <h3>{card.title}</h3>
+      <p>{card.description}</p>
+    </div>
+  {/each}
+</FlexBlock>
+```
+
+### 固定定位
+
+```svelte
+<script>
+  import FlexBlock from '@ticatec/uniface-element/FlexBlock';
+</script>
+
+<FlexBlock fixed direction="vertical" style="position: fixed; top: 0; left: 0; right: 0; height: 100vh;">
+  <div style="height: 60px;">头部</div>
+  <div style="flex: 1; overflow: auto;">主要内容</div>
+  <div style="height: 40px;">页脚</div>
+</FlexBlock>
+```
+
+## 最佳实践
+
+1. **使用 direction 属性** - 根据布局需求选择水平或垂直方向
+2. **结合 flex 使用** - 使用 `flex` 属性实现响应式布局，适应容器大小
+3. **使用 autoFit** - 动态内容启用自动适应换行
+4. **使用 grow/shrink** - 控制项目在 flex 容器中的扩展或收缩
+5. **固定定位** - 使用 `fixed` 实现不随内容滚动的粘性布局

package/dist/layout/index.d.ts

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

package/dist/layouts/action_bar/ActionBar.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import type {Snippet} from 'svelte';
+    import type {ButtonAction, ButtonActions} from '../../types';
+    import Button from "../../general/button";
+    import Separator from "../../general/separator";
+
+
+    interface Props {
+        buttons?: ButtonActions;
+        style?: string;
+        theme?: string;
+        children?: Snippet;
+    }
+
+    let {
+        buttons = [],
+        style,
+        theme,
+        children
+    }: Props = $props();
+
+    const handleButtonClick = (button: ButtonAction) => {
+        return (event: MouseEvent) => {
+            button.handler?.(event);
+        };
+    };
+</script>
+
+<div class="uniface-action-bar" {style} data-theme={theme}>
+    {#if children}
+        {@render children()}
+    {:else if buttons}
+        {#each buttons as button}
+            {#if button}
+                <Button
+                        label={button.label}
+                        icon={button.icon}
+                        tooltip={button.tooltip}
+                        disabled={button.disabled === true}
+                        type={button.type}
+                        onclick={handleButtonClick(button)}
+                />
+            {:else}
+                <Separator height="24px"/>
+            {/if}
+        {/each}
+    {/if}
+</div>
+
+<style>
+    .uniface-action-bar {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        width: fit-content;
+        gap: var(--uniface-spacing-actionbar);
+    }
+</style>

package/dist/layouts/action_bar/ActionBar.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { ButtonActions } from '../../types';
+interface Props {
+    buttons?: ButtonActions;
+    style?: string;
+    theme?: string;
+    children?: Snippet;
+}
+declare const ActionBar: import("svelte").Component<Props, {}, "">;
+type ActionBar = ReturnType<typeof ActionBar>;
+export default ActionBar;

package/dist/layouts/action_bar/ButtonAction.d.ts

@@ -0,0 +1,23 @@
+import type { ButtonType, MouseClickHandler } from "../../types";
+export interface ButtonAction {
+    /**
+     * 按钮的文字
+     */
+    label: string;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 前缀图标
+     */
+    icon?: string;
+    /**
+     * 按钮的类型
+     */
+    type?: ButtonType;
+    /**
+     * click处理函数
+     */
+    handler?: MouseClickHandler;
+}