@ticatec/uniface-element 0.3.22 → 5.0.0

package/dist/action-bar/README_CN.md

@@ -1,285 +0,0 @@
-# ActionBar 组件
-
-一个灵活的操作栏组件，用于组织和显示操作按钮，支持可选的分隔符。
-
-## 功能特性
-
-- **按钮组织**: 在水平布局中显示多个操作按钮
-- **灵活配置**: 通过数据定义按钮或使用插槽内容
-- **分隔符**: 使用`null`值在按钮组之间添加视觉分隔符
-- **可定制样式**: 控制间距和应用自定义样式
-- **按钮类型**: 支持所有按钮类型（主要、次要、危险等）
-- **图标支持**: 在按钮标签旁显示图标
-- **禁用状态**: 单个按钮禁用功能
-- **响应式**: 适应容器宽度
-
-## 基本用法
-
-```svelte
-<script>
-import ActionBar, { type ButtonAction } from '@ticatec/uniface-element/ActionBar';
-
-const actions: ButtonAction[] = [
-  {
-    label: '保存',
-    type: 'primary',
-    icon: 'icon_google_save',
-    handler: () => console.log('保存被点击')
-  },
-  {
-    label: '取消',
-    type: 'secondary',
-    handler: () => console.log('取消被点击')
-  }
-];
-</script>
-
-<ActionBar buttons={actions} />
-```
-
-## 属性参数
-
-| 属性 | 类型 | 默认值 | 描述 |
-|------|------|---------|-------------|
-| `buttons` | `ButtonActions` | `[]` | 按钮操作数组或null表示分隔符 |
-| `style` | `string` | `''` | 操作栏的自定义CSS样式 |
-| `gap` | `number` | `8` | 按钮间距（像素） |
-
-## ButtonAction 接口
-
-```typescript
-interface ButtonAction {
-  label: string;           // 按钮文本
-  disabled?: boolean;      // 按钮是否禁用
-  icon?: string;          // 图标类名（可选）
-  type?: ButtonType;      // 按钮样式类型
-  handler?: MouseClickHandler; // 点击事件处理器
-}
-
-type ButtonActions = Array<ButtonAction | null>;
-```
-
-## ButtonType 选项
-
-组件支持所有标准按钮类型：
-- `'primary'` - 主要操作按钮
-- `'secondary'` - 次要操作按钮
-- `'danger'` - 危险/删除操作按钮
-- `'success'` - 成功/确认按钮
-- `'warning'` - 警告按钮
-- `'info'` - 信息按钮
-
-## 使用示例
-
-### 基础操作栏
-
-```svelte
-<script>
-const basicActions = [
-  { label: '新建', handler: createNew },
-  { label: '编辑', handler: editItem },
-  { label: '删除', type: 'danger', handler: deleteItem }
-];
-</script>
-
-<ActionBar buttons={basicActions} />
-```
-
-### 带图标
-
-```svelte
-<script>
-const iconActions = [
-  { 
-    label: '保存', 
-    icon: 'icon_google_save',
-    type: 'primary',
-    handler: save 
-  },
-  { 
-    label: '打印', 
-    icon: 'icon_google_print',
-    handler: print 
-  }
-];
-</script>
-
-<ActionBar buttons={iconActions} />
-```
-
-### 带分隔符
-
-```svelte
-<script>
-const actionsWithSeparators = [
-  { label: '复制', handler: copy },
-  { label: '粘贴', handler: paste },
-  null, // 分隔符
-  { label: '删除', type: 'danger', handler: remove }
-];
-</script>
-
-<ActionBar buttons={actionsWithSeparators} />
-```
-
-### 自定义间距
-
-```svelte
-<ActionBar 
-  buttons={actions}
-  gap={16}
-  style="padding: 12px; background: #f5f5f5;"
-/>
-```
-
-### 使用插槽内容
-
-```svelte
-<ActionBar>
-  <Button label="自定义" type="primary" />
-  <Button label="操作" type="secondary" />
-</ActionBar>
-```
-
-## 动态操作
-
-```svelte
-<script>
-let isEditing = false;
-
-$: actions = isEditing ? [
-  { label: '保存', type: 'primary', handler: save },
-  { label: '取消', handler: cancel }
-] : [
-  { label: '编辑', handler: startEdit },
-  { label: '删除', type: 'danger', handler: remove }
-];
-</script>
-
-<ActionBar buttons={actions} />
-```
-
-## 条件按钮
-
-```svelte
-<script>
-let hasPermission = true;
-let isLoading = false;
-
-$: actions = [
-  { label: '刷新', handler: refresh },
-  hasPermission ? { 
-    label: '保存', 
-    type: 'primary',
-    disabled: isLoading,
-    handler: save 
-  } : null,
-  hasPermission ? { 
-    label: '删除', 
-    type: 'danger',
-    disabled: isLoading,
-    handler: remove 
-  } : null
-].filter(Boolean); // 移除null值
-</script>
-
-<ActionBar buttons={actions} />
-```
-
-## 行为特性
-
-### 按钮渲染
-- 按钮使用内部Button组件渲染
-- 每个按钮接收配置的标签、图标、类型和禁用状态
-- 点击处理器自动绑定到按钮事件
-
-### 分隔符
-- 在按钮数组中使用`null`值插入视觉分隔符
-- 分隔符显示为24px高度的垂直线
-- 用于分组相关操作
-
-### 回退内容
-- 如果没有提供按钮或数组为空，显示插槽内容
-- 允许完全自定义的操作栏布局
-
-## 样式定制
-
-组件使用以下CSS类：
-
-- `.uniface-action-bar` - 主容器，使用flexbox布局
-
-### CSS变量
-
-您可以使用CSS自定义外观：
-
-```css
-.uniface-action-bar {
-  /* 自定义样式 */
-  background: #ffffff;
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  padding: 8px;
-}
-```
-
-## 无障碍访问
-
-- 使用语义化按钮元素以支持正确的键盘导航
-- 禁用按钮正确标记且不可交互
-- 焦点管理遵循标准按钮行为
-- 屏幕阅读器可以正确识别操作按钮
-
-## 常见用例
-
-### 工具栏操作
-
-```svelte
-<ActionBar buttons={[
-  { label: '新建', icon: 'icon_google_add' },
-  { label: '打开', icon: 'icon_google_folder_open' },
-  { label: '保存', icon: 'icon_google_save' },
-  null,
-  { label: '剪切', icon: 'icon_google_content_cut' },
-  { label: '复制', icon: 'icon_google_content_copy' },
-  { label: '粘贴', icon: 'icon_google_content_paste' }
-]} />
-```
-
-### 表单操作
-
-```svelte
-<ActionBar 
-  buttons={[
-    { label: '保存', type: 'primary', handler: submit },
-    { label: '取消', handler: cancel }
-  ]}
-  style="justify-content: flex-end; margin-top: 16px;"
-/>
-```
-
-### CRUD操作
-
-```svelte
-<ActionBar buttons={[
-  { label: '创建', type: 'primary', handler: create },
-  { label: '编辑', handler: edit },
-  { label: '删除', type: 'danger', handler: remove },
-  null,
-  { label: '刷新', handler: refresh }
-]} />
-```
-
-## 最佳实践
-
-1. **分组相关操作**: 使用分隔符分组相关功能
-2. **一致的图标**: 在整个应用程序中使用一致的图标样式
-3. **按钮类型**: 使用适当的按钮类型（主要操作用primary，危险操作用danger）
-4. **禁用状态**: 在操作不可用或加载期间禁用按钮
-5. **响应式设计**: 考虑移动设备的按钮标签和间距
-
-## 注意事项
-
-- 按钮数组中的`null`值会自动渲染为分隔符
-- 如果按钮数组为空，组件会显示插槽内容
-- 所有按钮共享相同的间距设置
-- 图标需要在项目中正确引入相应的图标库

package/dist/action-bar/index.d.ts

@@ -1,5 +0,0 @@
-import ActionBar from "./ActionBar.svelte";
-import type { ButtonActions } from "./ButtonAction";
-import type ButtonAction from "./ButtonAction";
-export default ActionBar;
-export type { ButtonActions, ButtonAction };

package/dist/app-layout/ClassicLayout.svelte

@@ -1,78 +0,0 @@
-<script lang="ts">
-
-    import Split from "../split";
-
-    export let headerHeight: string = "48px";
-    export let sidebarWidth: string = '300px';
-    export let statusHeight: string = "22px";
-
-    export let rightBarWidth: string = '240px';
-
-    export let sidebarResize: boolean = false;
-    export let sidebarMaxWidth: string | null = null;
-    export let sidebarMinWidth: string | null = null;
-
-    export let rightBarResize: boolean = false;
-    export let rightBarMaxWidth: string | null = null;
-    export let rightBarMinWidth: string | null = null;
-
-    let sidebar: any;
-
-    let maxWidth: string;
-    let minWidth: string;
-
-    let rightBar: any;
-    let rightMaxWidth: string;
-    let rightMinWidth: string;
-
-    $: if (sidebarResize && sidebarMaxWidth) {
-        maxWidth = `max-width: ${sidebarMaxWidth};`
-    }
-
-    $: if (sidebarResize && sidebarMinWidth) {
-        minWidth = `min-width: ${sidebarMinWidth};`
-    }
-
-    $: if (rightBarResize && rightBarMaxWidth) {
-        rightMaxWidth = `max-width: ${rightBarMaxWidth};`
-    }
-
-    $: if (rightBarResize && rightBarMinWidth) {
-        rightMinWidth = `min-width: ${rightBarMinWidth};`
-    }
-
-
-</script>
-
-<div style="width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; position: relative">
-    <div style="height: 100%; flex: 0 0 auto; position: relative; height: {headerHeight}">
-        <slot name="header"></slot>
-    </div>
-    <div style="height: 100%; flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: row; position: relative">
-        {#if sidebar}
-            <div bind:this={sidebar} style="width: 100%; flex: 0 0 auto; overflow: auto; width: {sidebarWidth}; {minWidth} {maxWidth}">
-                <slot name="sidebar"></slot>
-            </div>
-        {/if}
-        {#if sidebarResize}
-            <Split direction="vertical" bindingPanel={sidebar}/>
-        {/if}
-        <div style="width: 100%; flex: 1 1 auto; overflow: auto">
-            <slot></slot>
-        </div>
-        {#if $$slots['right-sidebar']}
-            {#if sidebarResize}
-                <Split direction="vertical" bindingPanel={rightBar} reverse/>
-            {/if}
-            <div bind:this={rightBar}
-                 style="width: 100%; flex: 0 0 auto; overflow: auto; width: {rightBarWidth}; {rightMinWidth} {rightMaxWidth}">
-                <slot name="right-sidebar"></slot>
-            </div>
-        {/if}
-    </div>
-    {#if $$slots['bottom']}
-        <div style="height: 100%; flex: 0 0 auto; position:relative; height: {statusHeight}">
-            <slot name="bottom"></slot>
-        </div>
-    {/if}
-</div>

package/dist/app-layout/ClassicLayout.svelte.d.ts

@@ -1,46 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const ClassicLayout: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    headerHeight?: string;
-    sidebarWidth?: string;
-    statusHeight?: string;
-    rightBarWidth?: string;
-    sidebarResize?: boolean;
-    sidebarMaxWidth?: string | null;
-    sidebarMinWidth?: string | null;
-    rightBarResize?: boolean;
-    rightBarMaxWidth?: string | null;
-    rightBarMinWidth?: string | null;
-}, {
-    header: {};
-    sidebar: {};
-    default: {};
-    'right-sidebar': {};
-    bottom: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    header: {};
-    sidebar: {};
-    default: {};
-    'right-sidebar': {};
-    bottom: {};
-}, {}, string>;
-type ClassicLayout = InstanceType<typeof ClassicLayout>;
-export default ClassicLayout;

package/dist/app-layout/ColumnsLayout.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-    import Split from "../split";
-    import {onMount} from "svelte";
-
-    export let width: string = '100%';
-    export let height: string = '100%';
-
-    export let leftWidth: string | null = null;
-
-    export let rightWidth: string | null = null;
-
-    export let leftMin: string | null = null;
-
-    export let leftMax: string | null = null;
-
-    export let rightMin: string | null = null;
-
-    export let rightMax: string | null = null;
-
-    export let leftResize: boolean = false;
-
-    export let rightResize: boolean = false;
-
-    $: colWidth = $$slots.right ? '25%' : '50%'
-
-    let leftPanel: any;
-    let rightPanel: any;
-
-    const generateStyle = (attr: string, v: string | null): string => {
-        return v ? `${attr}: ${v};` : ''
-    }
-
-    let leftStyle: string;
-    let rightStyle: string;
-
-    onMount(()=> {
-        leftStyle = `${generateStyle('min-width', leftMin)} ${generateStyle('max-width', leftMax)} ${generateStyle('width', leftWidth ?? colWidth)}`;
-        rightStyle = `${generateStyle('min-width', rightMin)} ${generateStyle('max-width', rightMax)} ${generateStyle('width', rightWidth ?? colWidth)}`;
-    })
-
-
-</script>
-<div style="display: flex; flex-direction: row;  flex-wrap: nowrap; width: {width}; height: {height}">
-    <div bind:this={leftPanel} style="flex: 0 0 auto; {leftStyle}">
-        <slot name="left"></slot>
-    </div>
-    {#if leftResize}
-        <Split bindingPanel={leftPanel}/>
-    {/if}
-    <div style="flex: 1 1 auto;">
-        <slot/>
-    </div>
-    {#if $$slots.right}
-        {#if rightResize}
-            <Split bindingPanel={rightPanel} reverse/>
-        {/if}
-        <div bind:this={rightPanel} style="flex: 0 0 auto; {rightStyle}">
-            <slot name="right"/>
-        </div>
-    {/if}
-</div>

package/dist/app-layout/ColumnsLayout.svelte.d.ts

@@ -1,42 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const ColumnsLayout: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    width?: string;
-    height?: string;
-    leftWidth?: string | null;
-    rightWidth?: string | null;
-    leftMin?: string | null;
-    leftMax?: string | null;
-    rightMin?: string | null;
-    rightMax?: string | null;
-    leftResize?: boolean;
-    rightResize?: boolean;
-}, {
-    left: {};
-    default: {};
-    right: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    left: {};
-    default: {};
-    right: {};
-}, {}, string>;
-type ColumnsLayout = InstanceType<typeof ColumnsLayout>;
-export default ColumnsLayout;

package/dist/app-layout/HeaderLayout.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-    import Split from "../split";
-
-    export let headerHeight: string = "48px";
-    export let sidebarWidth: string = '300px';
-
-    export let sidebarResize: boolean = false;
-    export let sidebarMaxWidth: string | null = null;
-    export let sidebarMinWidth: string | null = null;
-
-    let sidebar: any;
-
-    let maxWidth: string;
-    let minWidth: string;
-
-    $: if (sidebarResize && sidebarMaxWidth) {
-        maxWidth = `max-width: ${sidebarMaxWidth};`
-    }
-
-    $: if (sidebarResize && sidebarMinWidth) {
-        minWidth = `min-width: ${sidebarMinWidth};`
-    }
-
-
-</script>
-
-<div style="width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; position: relative">
-    <div style="width: 100%; flex: 0 0 auto; height: {headerHeight}">
-        <slot name="header"></slot>
-    </div>
-    <div style="width: 100%; flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: row;">
-        {#if $$slots['sidebar']}
-            <div bind:this={sidebar}
-                 style="height: 100%; flex: 0 0 auto; overflow: auto; width: {sidebarWidth}; {minWidth} {maxWidth}">
-                <slot name="sidebar"></slot>
-            </div>
-            {#if sidebarResize}
-                <Split direction="vertical" bindingPanel={sidebar}/>
-            {/if}
-        {/if}
-        <div style="height: 100%; flex: 1 1 auto; overflow: hidden">
-            <slot></slot>
-        </div>
-    </div>
-</div>

package/dist/app-layout/HeaderLayout.svelte.d.ts

@@ -1,37 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const HeaderLayout: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    headerHeight?: string;
-    sidebarWidth?: string;
-    sidebarResize?: boolean;
-    sidebarMaxWidth?: string | null;
-    sidebarMinWidth?: string | null;
-}, {
-    header: {};
-    sidebar: {};
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    header: {};
-    sidebar: {};
-    default: {};
-}, {}, string>;
-type HeaderLayout = InstanceType<typeof HeaderLayout>;
-export default HeaderLayout;