@ticatec/uniface-element 0.3.23 → 5.0.0

package/dist/criteria-field/README_CN.md

@@ -1,532 +0,0 @@
-# CriteriaField 条件字段组件
-
-一个简单的布局组件，用于创建一致的条件和过滤表单字段，具有适当的标签和尺寸设置。非常适合搜索表单、过滤面板和基于条件的界面。
-
-## 功能特性
-
-- **一致的布局**：标准化的标签和字段排列
-- **灵活的尺寸**：多种预定义尺寸选项
-- **自定义样式**：灵活的标签和容器样式设置
-- **简洁结构**：简单轻量的组件设计
-
-## 基本用法
-
-```svelte
-<script>
-import CriteriaField from '@ticatec/uniface-element/CriteriaField';
-import TextEditor from '@ticatec/uniface-element/TextEditor';
-
-let searchName = '';
-</script>
-
-<CriteriaField label="姓名" size="x25">
-  <TextEditor 
-    variant="outlined" 
-    bind:value={searchName} 
-    placeholder="输入要搜索的姓名"
-  />
-</CriteriaField>
-```
-
-## 属性
-
-| 属性 | 类型 | 默认值 | 描述 |
-|------|------|---------|-------------|
-| `label` | `string` | `"Label"` | 字段的标签文本 |
-| `style` | `string` | `''` | 容器的自定义 CSS 样式 |
-| `label$style` | `string` | `''` | 标签的自定义 CSS 样式 |
-| `size` | `'' \| 'x15' \| 'x20' \| 'x25' \| 'x30' \| 'x35' \| 'x40'` | `''` | 字段的预定义尺寸 |
-| `labelSuffix` | `string` | `':'` | 标签后的后缀文本 |
-| `class` | `string` | `''` | 附加的 CSS 类名 |
-
-## 尺寸选项
-
-`size` 属性为不同布局需求提供一致的宽度：
-
-- `x15`：超小宽度
-- `x20`：小宽度
-- `x25`：中小宽度
-- `x30`：中等宽度
-- `x35`：中大宽度
-- `x40`：大宽度
-
-## 基础示例
-
-### 简单文本搜索字段
-
-```svelte
-<script>
-import CriteriaField from '@ticatec/uniface-element/CriteriaField';
-import TextEditor from '@ticatec/uniface-element/TextEditor';
-
-let searchText = '';
-</script>
-
-<CriteriaField label="搜索" size="x30">
-  <TextEditor 
-    variant="outlined" 
-    bind:value={searchText}
-    placeholder="* 是通配符"
-  />
-</CriteriaField>
-```
-
-### 日期范围过滤器
-
-```svelte
-<script>
-import CriteriaField from '@ticatec/uniface-element/CriteriaField';
-import DateRange from '@ticatec/uniface-element/DateRange';
-
-let dateFrom = '';
-let dateTo = '';
-</script>
-
-<CriteriaField label="日期范围" size="x35">
-  <DateRange 
-    variant="outlined"
-    bind:fromValue={dateFrom}
-    bind:toValue={dateTo}
-  />
-</CriteriaField>
-```
-
-### 数值范围过滤器
-
-```svelte
-<script>
-import CriteriaField from '@ticatec/uniface-element/CriteriaField';
-import NumberRange from '@ticatec/uniface-element/NumberRange';
-
-let priceFrom = null;
-let priceTo = null;
-</script>
-
-<CriteriaField label="价格范围" size="x30">
-  <NumberRange 
-    variant="outlined"
-    bind:fromValue={priceFrom}
-    bind:toValue={priceTo}
-    placeholder="0.00"
-  />
-</CriteriaField>
-```
-
-### 自定义样式标签
-
-```svelte
-<script>
-import CriteriaField from '@ticatec/uniface-element/CriteriaField';
-import SearchBox from '@ticatec/uniface-element/SearchBox';
-
-let query = '';
-</script>
-
-<CriteriaField 
-  label="高级搜索" 
-  size="x40"
-  label$style="color: #2563eb; font-weight: 600; font-size: 14px;"
-  labelSuffix=""
->
-  <SearchBox 
-    bind:value={query}
-    placeholder="输入搜索关键词..."
-  />
-</CriteriaField>
-```
-
-## 高级示例
-
-### 多条件搜索表单
-
-```svelte
-<script>
-import CriteriaField from '@ticatec/uniface-element/CriteriaField';
-import TextEditor from '@ticatec/uniface-element/TextEditor';
-import DateRange from '@ticatec/uniface-element/DateRange';
-import OptionsSelect from '@ticatec/uniface-element/OptionsSelect';
-import CheckBox from '@ticatec/uniface-element/CheckBox';
-
-let criteria = {
-  name: '',
-  email: '',
-  dateFrom: '',
-  dateTo: '',
-  status: '',
-  includeInactive: false
-};
-
-const statusOptions = [
-  { code: 'active', text: '激活' },
-  { code: 'inactive', text: '未激活' },
-  { code: 'pending', text: '待处理' }
-];
-
-const handleSearch = () => {
-  console.log('搜索条件:', criteria);
-};
-
-const clearCriteria = () => {
-  criteria = {
-    name: '',
-    email: '',
-    dateFrom: '',
-    dateTo: '',
-    status: '',
-    includeInactive: false
-  };
-};
-</script>
-
-<div class="search-form">
-  <h3>客户搜索</h3>
-  
-  <div class="criteria-row">
-    <CriteriaField label="姓名" size="x25">
-      <TextEditor 
-        variant="outlined" 
-        bind:value={criteria.name}
-        placeholder="客户姓名 (* 表示通配符)"
-      />
-    </CriteriaField>
-
-    <CriteriaField label="邮箱" size="x30">
-      <TextEditor 
-        variant="outlined" 
-        bind:value={criteria.email}
-        placeholder="email@domain.com"
-      />
-    </CriteriaField>
-
-    <CriteriaField label="状态" size="x20">
-      <OptionsSelect 
-        variant="outlined"
-        bind:value={criteria.status}
-        options={statusOptions}
-        placeholder="所有状态"
-      />
-    </CriteriaField>
-  </div>
-
-  <div class="criteria-row">
-    <CriteriaField label="注册日期" size="x35">
-      <DateRange 
-        variant="outlined"
-        bind:fromValue={criteria.dateFrom}
-        bind:toValue={criteria.dateTo}
-      />
-    </CriteriaField>
-
-    <CriteriaField label="选项" size="x25" labelSuffix="">
-      <CheckBox 
-        label="包含未激活客户"
-        bind:value={criteria.includeInactive}
-      />
-    </CriteriaField>
-  </div>
-
-  <div class="form-actions">
-    <button class="btn-primary" on:click={handleSearch}>搜索</button>
-    <button class="btn-secondary" on:click={clearCriteria}>清除</button>
-  </div>
-</div>
-
-<style>
-  .search-form {
-    padding: 24px;
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
-    background: #f9fafb;
-  }
-  
-  .criteria-row {
-    display: flex;
-    gap: 16px;
-    margin: 16px 0;
-    flex-wrap: wrap;
-  }
-  
-  .form-actions {
-    margin-top: 24px;
-    display: flex;
-    gap: 12px;
-  }
-  
-  .btn-primary, .btn-secondary {
-    padding: 8px 16px;
-    border-radius: 4px;
-    border: 1px solid;
-    cursor: pointer;
-    font-weight: 500;
-  }
-  
-  .btn-primary {
-    background: #2563eb;
-    color: white;
-    border-color: #2563eb;
-  }
-  
-  .btn-secondary {
-    background: white;
-    color: #374151;
-    border-color: #d1d5db;
-  }
-</style>
-```
-
-### 过滤面板布局
-
-```svelte
-<script>
-import CriteriaField from '@ticatec/uniface-element/CriteriaField';
-import TextEditor from '@ticatec/uniface-element/TextEditor';
-import NumberRange from '@ticatec/uniface-element/NumberRange';
-import OptionsSelect from '@ticatec/uniface-element/OptionsSelect';
-import OptionsMultiSelect from '@ticatec/uniface-element/OptionsMultiSelect';
-
-let filters = {
-  productName: '',
-  priceFrom: null,
-  priceTo: null,
-  category: '',
-  tags: '',
-  availability: ''
-};
-
-const categories = [
-  { code: 'electronics', text: '电子产品' },
-  { code: 'clothing', text: '服装' },
-  { code: 'books', text: '图书' },
-  { code: 'home', text: '家居园艺' }
-];
-
-const availabilityOptions = [
-  { code: 'in-stock', text: '有库存' },
-  { code: 'out-of-stock', text: '缺货' },
-  { code: 'pre-order', text: '预订' }
-];
-
-const applyFilters = () => {
-  console.log('应用过滤器:', filters);
-};
-</script>
-
-<div class="filter-panel">
-  <h3>产品过滤器</h3>
-
-  <div class="filter-group">
-    <h4>基本</h4>
-    <CriteriaField label="产品名称" size="x35">
-      <TextEditor 
-        variant="outlined"
-        bind:value={filters.productName}
-        placeholder="按产品名称搜索"
-      />
-    </CriteriaField>
-
-    <CriteriaField label="分类" size="x25">
-      <OptionsSelect 
-        variant="outlined"
-        bind:value={filters.category}
-        options={categories}
-        placeholder="选择分类"
-      />
-    </CriteriaField>
-  </div>
-
-  <div class="filter-group">
-    <h4>价格</h4>
-    <CriteriaField label="价格范围" size="x30">
-      <NumberRange 
-        variant="outlined"
-        bind:fromValue={filters.priceFrom}
-        bind:toValue={filters.priceTo}
-        placeholder="0.00"
-      />
-    </CriteriaField>
-  </div>
-
-  <div class="filter-group">
-    <h4>高级</h4>
-    <CriteriaField label="标签" size="x35">
-      <OptionsMultiSelect 
-        variant="outlined"
-        bind:value={filters.tags}
-        options={[
-          { code: 'new', text: '新品' },
-          { code: 'sale', text: '促销' },
-          { code: 'featured', text: '精选' },
-          { code: 'bestseller', text: '畅销' }
-        ]}
-        placeholder="选择标签"
-      />
-    </CriteriaField>
-
-    <CriteriaField label="库存状态" size="x25">
-      <OptionsSelect 
-        variant="outlined"
-        bind:value={filters.availability}
-        options={availabilityOptions}
-        placeholder="任意状态"
-      />
-    </CriteriaField>
-  </div>
-
-  <div class="filter-actions">
-    <button class="apply-btn" on:click={applyFilters}>应用过滤器</button>
-  </div>
-</div>
-
-<style>
-  .filter-panel {
-    width: 300px;
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
-    background: white;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    padding: 16px;
-  }
-  
-  .filter-panel h3 {
-    margin: 0 0 16px 0;
-    padding-bottom: 8px;
-    border-bottom: 1px solid #e5e7eb;
-  }
-  
-  .filter-group {
-    margin: 16px 0;
-  }
-  
-  .filter-group h4 {
-    margin: 0 0 12px 0;
-    font-size: 14px;
-    color: #6b7280;
-    text-transform: uppercase;
-    font-weight: 600;
-  }
-  
-  .filter-actions {
-    margin-top: 24px;
-    padding-top: 16px;
-    border-top: 1px solid #e5e7eb;
-  }
-  
-  .apply-btn {
-    width: 100%;
-    padding: 8px 16px;
-    background: #2563eb;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-weight: 500;
-  }
-  
-  .apply-btn:hover {
-    background: #1d4ed8;
-  }
-</style>
-```
-
-### 不同尺寸对比
-
-```svelte
-<script>
-import CriteriaField from '@ticatec/uniface-element/CriteriaField';
-import TextEditor from '@ticatec/uniface-element/TextEditor';
-
-let values = {};
-</script>
-
-<div class="size-comparison">
-  <h3>尺寸对比</h3>
-  
-  <CriteriaField label="超小 (x15)" size="x15">
-    <TextEditor variant="outlined" bind:value={values.x15} />
-  </CriteriaField>
-
-  <CriteriaField label="小 (x20)" size="x20">
-    <TextEditor variant="outlined" bind:value={values.x20} />
-  </CriteriaField>
-
-  <CriteriaField label="中小 (x25)" size="x25">
-    <TextEditor variant="outlined" bind:value={values.x25} />
-  </CriteriaField>
-
-  <CriteriaField label="中等 (x30)" size="x30">
-    <TextEditor variant="outlined" bind:value={values.x30} />
-  </CriteriaField>
-
-  <CriteriaField label="中大 (x35)" size="x35">
-    <TextEditor variant="outlined" bind:value={values.x35} />
-  </CriteriaField>
-
-  <CriteriaField label="大 (x40)" size="x40">
-    <TextEditor variant="outlined" bind:value={values.x40} />
-  </CriteriaField>
-</div>
-
-<style>
-  .size-comparison {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    padding: 20px;
-    max-width: 600px;
-  }
-</style>
-```
-
-## 最佳实践
-
-```svelte
-<!-- 好的：清晰、描述性的标签 -->
-<CriteriaField label="客户邮箱地址">
-  <TextEditor variant="outlined" type="email" />
-</CriteriaField>
-
-<!-- 好的：相关字段使用一致的尺寸 -->
-<div class="criteria-group">
-  <CriteriaField label="姓" size="x25">
-    <TextEditor variant="outlined" />
-  </CriteriaField>
-  <CriteriaField label="名" size="x25">
-    <TextEditor variant="outlined" />
-  </CriteriaField>
-</div>
-
-<!-- 好的：为内容选择合适的字段类型 -->
-<CriteriaField label="出生日期" size="x20">
-  <DatePicker variant="outlined" />
-</CriteriaField>
-
-<!-- 好的：强调重要字段的自定义标签样式 -->
-<CriteriaField 
-  label="重要字段" 
-  label$style="color: red; font-weight: bold;"
->
-  <TextEditor variant="outlined" />
-</CriteriaField>
-```
-
-## CSS 类名
-
-组件应用以下 CSS 类名：
-
-- `.uniface-filter-field` - 基础类
-- `.x15`, `.x20`, `.x25`, `.x30`, `.x35`, `.x40` - 尺寸类
-
-## 浏览器支持
-
-支持所有现代浏览器：
-- ES6+ JavaScript
-- 现代 DOM API
-- CSS 自定义属性
-- Flexbox 布局
-
-## 性能考虑
-
-- 轻量的组件结构
-- 最少的 DOM 元素
-- 高效的基于 slot 的内容投影
-- 无复杂状态管理

package/dist/data-table/DataTable.svelte

@@ -1,125 +0,0 @@
-<script lang="ts">
-
-    import ContentPanel from "./parts/ContentPanel.svelte";
-    import type DataColumn from "./lib/DataColumn";
-    import type ActionsColumn from "./lib/ActionsColumn";
-    import type IndicatorColumn from "./lib/IndicatorColumn";
-    import type TableRow from "./parts/TableRow";
-    import UniDataTable from "./UniDataTable";
-    import {onMount} from "svelte";
-    import FixedColumnsPanel from "./parts/FixedColumnsPanel.svelte";
-    import ActionPanel from "./parts/ActionsPanel.svelte";
-    import {OrderDirection} from "./lib/OrderDirection";
-    import type {CompareFunction} from "./lib/CompareFunction";
-    import type {GetRowFontStyle} from "./lib/types";
-
-    export let columns: Array<DataColumn>;
-    export let actionsColumn: ActionsColumn | null = null;
-    export let indicatorColumn: IndicatorColumn | null = null;
-    export let rowHeight: number = 42;  //{ rowHeight}
-    export let list: Array<any>;
-    export let selectedRows: Array<any> = [];
-    export let inlineRowHeight: number = 80;
-    export let rowBorder: boolean = false;
-    export let colBorder: boolean = false;
-    export let emptyIndicator: string | undefined = undefined;
-    export let getRowFontStyle: GetRowFontStyle | undefined = undefined;
-
-    export let style: string = '';
-
-    let dataColumns: Array<DataColumn>;
-
-    let rows: Array<TableRow>;
-    let table: UniDataTable = null as unknown as UniDataTable;
-    let tabStyle: string = '';
-
-    let id: string = (new Date()).getTime().toString(36);
-
-    onMount(() => {
-        table = new UniDataTable(id, indicatorColumn?.width);
-        selectedRows = selectedRows ?? [];
-        initializeTable();
-    })
-
-    let expandRow: TableRow | null = null;
-    let fixedCols: Array<DataColumn>;
-    let scrollTop: number;
-
-    const initializeTable = () => {
-        table.setColumns(columns);
-        rows = table.rows;
-        dataColumns = table.columns;
-        fixedCols = table.frozenColumns;
-        tabStyle = table.generateTemplateStyle();
-        tabWidth = table.width;
-        frozenWidth = table.frozenWidth;
-    }
-
-
-    $: if (table && columns) {
-        initializeTable();
-    }
-
-    let tabWidth: number;
-    let frozenWidth: number;
-    const handleWidthChange = () => {
-        tabStyle = table.generateTemplateStyle();
-        tabWidth = table.width;
-        frozenWidth = table.frozenWidth;
-    }
-
-    let orderColumn: DataColumn = null as unknown as DataColumn;
-    let orderDirection: OrderDirection = OrderDirection.Ascending;
-    const sortRows = (compareFun: CompareFunction, descending: boolean) => {
-        expandRow = null;
-        let oList = list.sort(compareFun);
-        table.data = descending ? oList.reverse() : oList;
-        rows = table.rows;
-    }
-    const handleCellClick = (col: DataColumn) => (e: MouseEvent) => {
-        if (col.compareFunction != null) {
-            if (col == orderColumn) {
-                orderDirection = orderDirection == OrderDirection.Ascending ? OrderDirection.Descending : OrderDirection.Ascending;
-            } else {
-                orderColumn = col;
-                orderDirection = OrderDirection.Ascending;
-            }
-            sortRows(col.compareFunction, orderDirection == OrderDirection.Descending);
-        }
-    }
-
-    let inlineComponent: any;
-    const handleRowExpand = async (row: TableRow) => {
-        if (row == expandRow) {
-            expandRow = null;
-            inlineComponent = null;
-        } else {
-            inlineComponent = await indicatorColumn?.buildInlineComponent?.(row.data);
-            expandRow = row;
-        }
-    }
-
-    $: rowHeight = rowHeight ?? 42;
-
-</script>
-
-<div id="tab-{id}" {style} class="uniface-data-table" class:cell-border={colBorder} class:row-border={rowBorder}>
-    {@html tabStyle}
-    {#if table && dataColumns && fixedCols}
-        {#if indicatorColumn || fixedCols.length > 0}
-            <FixedColumnsPanel {handleRowExpand} bind:selectedRows {orderDirection} {orderColumn} {handleCellClick} {indicatorColumn}
-                               bind:expandRow
-                               {rowHeight} {fixedCols} {inlineRowHeight} {rows} {handleWidthChange} width={frozenWidth}
-                               bind:scrollTop/>
-        {/if}
-
-        <ContentPanel columns={dataColumns} {orderDirection} {orderColumn} {handleWidthChange} {handleCellClick} {tabWidth} bind:rows
-                      bind:scrollTop {expandRow} {rowHeight} {list} {table} {inlineComponent} bind:inlineRowHeight {emptyIndicator}
-                      displayHorizontalScroll={actionsColumn!=null || indicatorColumn != null || fixedCols.length > 0}
-                      showVerticalScroll={actionsColumn == null} {getRowFontStyle}/>
-    {/if}
-
-    {#if actionsColumn}
-        <ActionPanel {expandRow} {rowHeight} {actionsColumn} {rows} {inlineRowHeight} bind:scrollTop/>
-    {/if}
-</div>

package/dist/data-table/DataTable.svelte.d.ts

@@ -1,35 +0,0 @@
-import type DataColumn from "./lib/DataColumn";
-import type ActionsColumn from "./lib/ActionsColumn";
-import type IndicatorColumn from "./lib/IndicatorColumn";
-import type { GetRowFontStyle } from "./lib/types";
-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;
-}
-declare const DataTable: $$__sveltets_2_IsomorphicComponent<{
-    columns: Array<DataColumn>;
-    actionsColumn?: ActionsColumn | null;
-    indicatorColumn?: IndicatorColumn | null;
-    rowHeight?: number;
-    list: Array<any>;
-    selectedRows?: Array<any>;
-    inlineRowHeight?: number;
-    rowBorder?: boolean;
-    colBorder?: boolean;
-    emptyIndicator?: string | undefined;
-    getRowFontStyle?: GetRowFontStyle | undefined;
-    style?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DataTable = InstanceType<typeof DataTable>;
-export default DataTable;