@ticatec/uniface-flexi-module 0.0.2

package/dist/flexi-form/flexi_card/FlexiCard.js

@@ -0,0 +1,66 @@
+import {} from "../lib";
+import FlexField from "../flexi_field/FlexiField";
+import FlexiField from "../flexi_field/FlexiField";
+import FlexiComposite from "../flexi_composite/FlexiComposite";
+import FlexiForm from "../flexi_form/FlexiForm";
+import FlexiCompound from "../FlexiCompound";
+export default class FlexiCard extends FlexiCompound {
+    block;
+    form;
+    arrangement = "vertical";
+    composite = {};
+    #schema;
+    foldable;
+    constructor(form, schema, data) {
+        const mode = schema.mode ?? form.mode;
+        const readonly = schema.readonly == true;
+        const disabled = schema.disabled == true;
+        const label$style = schema.label$style ?? form.label$style;
+        const variant = schema.variant ?? form.variant;
+        super(data ?? form.data, readonly, disabled, variant, mode, schema.props, schema.attrs, schema.title, label$style);
+        this.block = schema.block;
+        this.form = form;
+        this.arrangement = schema.arrangement ?? form.arrangement;
+        this.#schema = schema;
+        this.foldable = schema.foldable == true;
+        this.createFromSchema();
+    }
+    /**
+     * 从schema构建卡片
+     * @protected
+     */
+    createFromSchema() {
+        for (const field of this.#schema.fields) {
+            if (field.type == 'composite') {
+                const schema = field;
+                let composite = this.createComposite(schema);
+                this._fields.push(composite);
+                this.composite[schema.name] = composite;
+            }
+            else {
+                const cellField = this.createFlexiField(field);
+                this._fields.push(cellField);
+                this.field[field.name] = cellField;
+            }
+        }
+        for (let action of (this.#schema.actions ?? [])) {
+            const handler = this[action.handler];
+            if (handler) {
+                this.actions.push({ icon: action.icon, handler });
+            }
+            else {
+                console.warn(`Method ${action.handler} not found!`);
+            }
+        }
+        console.log('当前的字段', this._fields);
+    }
+    createComposite(schema) {
+        throw new Error('Implement is in subclass');
+    }
+    createFlexiField(fieldSchema) {
+        return new FlexiField(this, this.data, this.mode, fieldSchema);
+    }
+    getCompositeSchema(name) {
+        return this.form.getCompositeSchema(name);
+    }
+}

package/dist/flexi-form/flexi_card/FlexiCardPanel.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">import FlexiCard from "./FlexiCard";
+import FlexiPanel from "../containers/FlexiPanel.svelte";
+import FlexiField from "../flexi_field/FlexiField";
+import FlexiFieldCell from "../flexi_field/FlexiFieldCell.svelte";
+import FlexiBlockPanel from "../flexi_composite/FlexiCompositePanel.svelte";
+import FlexiComposite from "../flexi_composite/FlexiComposite";
+import { onMount } from "svelte";
+import Icon from "@ticatec/uniface-element/Icon";
+export let card;
+export let readonly;
+onMount(() => {
+    card.setInvalidateHandler(() => {
+        fields = [...card.fields];
+        arrangement = card.arrangement;
+    });
+    return () => {
+        card.setInvalidateHandler();
+    };
+});
+$: fields = [...card.fields];
+$: arrangement = card.arrangement;
+</script>
+
+<div class="uniface-flexi-card">
+
+    {#if card.title}
+        <div class="uniface-flexi-card-title-bar">
+            <div class="title-text">
+                <span>{card.title}</span>
+            </div>
+            <div class="action-bar">
+                {#each card.actions as action}
+                    <Icon onclick={action.handler} name={action.icon}/>
+                {/each}
+            </div>
+        </div>
+    {/if}
+
+    <FlexiPanel style="padding: 0" mode={card.mode} {...card.props} {arrangement}>
+        {#each fields as field}
+            {#if field instanceof FlexiField}
+                <FlexiFieldCell {field} readonly={readonly || field.isReadonly} disabled={card.disabled} variant={card.variant}/>
+            {:else if Array.isArray(field) && field.length>0 && field[0] instanceof FlexiComposite}
+                {#each field as composite}
+                    {#if composite.visible}
+                        <FlexiBlockPanel readonly={readonly || card.readonly} {arrangement} disabled={card.disabled} {composite}/>
+                    {/if}
+                {/each}
+            {:else if field instanceof FlexiComposite }
+                {#if field.visible}
+                    <FlexiBlockPanel readonly={readonly || card.readonly} {arrangement}  disabled={card.disabled} composite={field}/>
+                {/if}
+            {/if}
+        {/each}
+    </FlexiPanel>
+
+</div>

package/dist/flexi-form/flexi_card/FlexiCardPanel.svelte.d.ts

@@ -0,0 +1,22 @@
+import FlexiCard from "./FlexiCard";
+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 FlexiCardPanel: $$__sveltets_2_IsomorphicComponent<{
+    card: FlexiCard;
+    readonly: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FlexiCardPanel = InstanceType<typeof FlexiCardPanel>;
+export default FlexiCardPanel;

package/dist/flexi-form/flexi_composite/FlexiComposite.d.ts

@@ -0,0 +1,50 @@
+import FlexiField, { type FlexiFieldSchema } from "../flexi_field/FlexiField";
+import FlexiCard from "../flexi_card/FlexiCard";
+import { type LayoutMode } from "../lib";
+import type { Arrangement } from "../lib/types";
+import FlexiCompound from "../FlexiCompound";
+/**
+ * 一个结构块的Schema，可以包括一组字段，独立布局，样式
+ */
+export interface FlexiCompositeSchema {
+    /** 类型 - block */
+    type?: 'block';
+    /** 字段组合块的标题 */
+    title?: string;
+    /** 中间包括的字段 */
+    fields: Array<FlexiFieldSchema>;
+    /** 是否只读 */
+    readonly?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 买个字段中label的格式 */
+    label$style?: string;
+    /** 字段的样式，（填充/边框线) */
+    variant?: string;
+    /** 布局模式，Flex布局还是Grid布局 */
+    mode?: LayoutMode;
+    /** 布局的属性，对于grid，需要确定列的数量 */
+    props?: any;
+    /** label和字段内容的布局方式，上下布局还是左右布局*/
+    arrangement?: Arrangement;
+}
+/**
+ * 用于卡片中嵌入的结构块的定义
+ */
+export interface FlexiCompositeFieldSchema {
+    type: "composite";
+    /** 嵌套对象的key */
+    keyField?: string;
+    /** 卡片中block的名称*/
+    name: string;
+    /** block的名称*/
+    composite: string;
+    /** 字段单元格的属性，比如span等*/
+    cell?: any;
+}
+export default class FlexiComposite extends FlexiCompound<FlexiField> {
+    visible: boolean;
+    readonly card: FlexiCard;
+    constructor(card: FlexiCard, data: any, schema: FlexiCompositeSchema, cell: any);
+    protected buildFlexiFields(card: FlexiCard, fields: Array<FlexiFieldSchema>): FlexiField[];
+}

package/dist/flexi-form/flexi_composite/FlexiComposite.js

@@ -0,0 +1,26 @@
+import FlexiField, {} from "../flexi_field/FlexiField";
+import FlexiCard from "../flexi_card/FlexiCard";
+import {} from "../lib";
+import FlexiCompound from "../FlexiCompound";
+export default class FlexiComposite extends FlexiCompound {
+    visible = true;
+    card;
+    constructor(card, data, schema, cell) {
+        const readonly = schema.readonly == true;
+        const disabled = schema.disabled == true;
+        const label$style = schema.label$style ?? card.label$style;
+        const variant = schema.variant ?? card.variant;
+        const mode = schema.mode ?? card.mode;
+        const props = schema.props ?? {};
+        super(data, readonly, disabled, variant, mode, props, cell, schema.title, label$style);
+        this._fields = this.buildFlexiFields(card, schema.fields);
+        this.card = card;
+    }
+    buildFlexiFields(card, fields) {
+        let list = [];
+        for (let field of fields) {
+            list.push(new FlexiField(card, this._data, this.mode, field));
+        }
+        return list;
+    }
+}

package/dist/flexi-form/flexi_composite/FlexiCompositePanel.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">import FlexiPanel from "../containers/FlexiPanel.svelte";
+import FlexiFieldCell from "../flexi_field/FlexiFieldCell.svelte";
+/** 组合框的单元所在的表单的布局模式 */
+export let composite;
+export let readonly;
+export let disabled;
+export let arrangement;
+$: mode = composite.card.mode;
+$: title = composite.title;
+$: fields = composite.fields;
+$: if (composite) {
+    composite.setInvalidateHandler(() => {
+        fields = [...composite.fields];
+    });
+}
+const getGridCellStyle = () => {
+    let cell = composite.cell;
+    return `rowSpan: ${cell.rowSpan ?? 1}; colSpan: ${cell.colSpan ?? 1}; row: ${cell.row}; col: ${cell.col}, height: ${cell.height ?? "auto"}`;
+};
+const getFlexCellStyle = () => {
+    let cell = composite.cell;
+    return `flex: 0 0 auto; width: ${(cell.span ?? 1) * 100 / 12}%`;
+};
+$: cellStyle = mode === "grid" ? getGridCellStyle() : getFlexCellStyle();
+</script>
+
+<div class="uniface-flexi-composite-panel" style="{cellStyle}">
+    {#if title}
+        <div class="flexi-composite-title-bar">
+            <div class="title-text">
+                <span>{title}</span>
+            </div>
+        </div>
+    {/if}
+    <FlexiPanel style="padding: 0" mode={composite.mode} props={composite.props} {arrangement}>
+        {#each fields as field}
+            <FlexiFieldCell {field} readonly={readonly || composite.readonly} disabled={disabled || composite.disabled} variant={composite.variant}
+                            label$style={composite.label$style}/>
+        {/each}
+
+    </FlexiPanel>
+</div>

package/dist/flexi-form/flexi_composite/FlexiCompositePanel.svelte.d.ts

@@ -0,0 +1,25 @@
+import type FlexiComposite from "./FlexiComposite";
+import type { Arrangement } from "../lib";
+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 FlexiCompositePanel: $$__sveltets_2_IsomorphicComponent<{
+    /** 组合框的单元所在的表单的布局模式 */ composite: FlexiComposite;
+    readonly: boolean;
+    disabled: boolean;
+    arrangement: Arrangement;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FlexiCompositePanel = InstanceType<typeof FlexiCompositePanel>;
+export default FlexiCompositePanel;

package/dist/flexi-form/flexi_composite/README.md

@@ -0,0 +1,50 @@
+## FlexiBlock
+
+`FlexiBlock`是一个字段组，可以包括一个到多个字段，拥有独立的布局模式和全局的`readonly`，`disabled`和`visible`的属性。
+
+### 属性
+
+- `isReadonly` 为**true**时，区块内的所有字段只读，如果为**false**时，每个字段可以自主控制，可以是布尔值或者表达式
+- `disabled` 为**true**时，区块内的所有字段禁用，如果为**false**时，每个字段可以自主控制，可以是布尔值或者表达式
+- `visible` 整个区块的显示或者隐藏
+- `title` 可以是一段**文字**，**函数名**或者**null**，函数名为`@{}`包裹
+- `mode` 布局模式，可以是**flex**布局或者**grid**布局
+- `props` 布局属性，根据布局的不同，属性也不同
+- `key` 关键
+- `fields` 
+#### 示例
+
+* 简单模式
+基于flex布局的表单块
+```json
+{
+  "keyField": "contact",
+  "readonly": false,
+  "disabled": false,
+  "title": "联系人",
+  "mode": "flex",
+  "fields": [
+    {
+      "type": "TextEditor",
+      "field": "name",
+      "readonly": false,
+      "disabled": false,
+      "props": {
+        "input$maxLength": 30
+      },
+      "span": 4
+    },
+    {
+      "type": "TextEditor",
+      "field": "phoneNumber",
+      "array": true,
+      "isReadonly": false,
+      "disabled": false,
+      "props": {
+        "input$maxLength": 30
+      },
+      "span": 4
+    }
+  ]
+}
+```

package/dist/flexi-form/flexi_datasheet/FlexiDataSheet.d.ts

@@ -0,0 +1,4 @@
+export interface FlexiDataSheetSchema {
+}
+export default class FlexiDataSheet {
+}

package/dist/flexi-form/flexi_datasheet/FlexiDataSheet.js

@@ -0,0 +1,2 @@
+export default class FlexiDataSheet {
+}

package/dist/flexi-form/flexi_field/FlexiField.d.ts

@@ -0,0 +1,76 @@
+import FlexiCard from "../flexi_card/FlexiCard";
+import type { SvelteComponent } from "svelte";
+import { type LayoutMode, Visibility } from "../lib";
+import type FlexiComposite from "../flexi_composite/FlexiComposite";
+export interface ValidationSchema {
+    /** 字符串格式 */
+    format?: {
+        regex: string;
+        message: string;
+    };
+    /** 数字类型的最小值 */
+    minValue?: number;
+    /** 数字类型的最大值 */
+    maxValue?: number;
+    /** 字符类型的最小长度 */
+    minLength?: number;
+    /** 自定义的检查方法 */
+    check?: string;
+}
+export interface FlexiFieldSchema {
+    /** 字段的类型 */
+    type: string;
+    /** 字段的名称 */
+    keyField: string;
+    /** 字段的名称 */
+    name: string;
+    /** 关联的数据字典项目 */
+    dictName?: string;
+    /** 字段的标签 */
+    label: string;
+    /** 输入框的样式 */
+    variant?: "" | "outlined" | "filled";
+    /** 是否只读 */
+    readonly?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否必须 */
+    required?: boolean;
+    /** 事件 */
+    events?: Record<string, string>;
+    /** 在卡片/Block中所在单元格的属性，flex布局和grid布局对应的属性也不一样*/
+    cell?: any;
+    /** 字段的属性 */
+    props?: any;
+    /** 检测规则 */
+    validation?: ValidationSchema;
+}
+export default class FlexiField {
+    #private;
+    readonly data: any;
+    readonly keyField: string;
+    readonly component: typeof SvelteComponent;
+    readonly variant?: "" | "outlined" | "filled";
+    visibility: Visibility;
+    readonly mode: LayoutMode;
+    label: string;
+    isReadonly: boolean;
+    disabled: boolean;
+    required: boolean;
+    constructor(parent: FlexiCard | FlexiComposite, data: any, mode: LayoutMode, schema: FlexiFieldSchema);
+    validate(): boolean;
+    get error(): string | null;
+    /**
+     *
+     */
+    get events(): any;
+    /**
+     * 字段的属性
+     */
+    get props(): any;
+    /**
+     * 单元格属性，通常包括span等
+     */
+    get cell(): any;
+    private parseValidationRule;
+}

package/dist/flexi-form/flexi_field/FlexiField.js

@@ -0,0 +1,128 @@
+import FlexiCard from "../flexi_card/FlexiCard";
+import { Visibility } from "../lib";
+import ComponentBuilder from "../lib/ComponentBuilder";
+import utils from "../lib/utils";
+export default class FlexiField {
+    #parent;
+    data;
+    keyField;
+    component;
+    variant;
+    visibility = Visibility.View;
+    #error = null;
+    #props = {};
+    #events = {};
+    #cell = {};
+    mode;
+    label;
+    isReadonly;
+    disabled;
+    required;
+    #validation;
+    constructor(parent, data, mode, schema) {
+        this.#parent = parent;
+        this.mode = mode;
+        this.label = schema.label;
+        this.variant = schema.variant;
+        this.isReadonly = schema.readonly == true;
+        this.disabled = schema.disabled == true;
+        this.required = schema.required = true;
+        this.#cell = schema.cell;
+        const card = parent instanceof FlexiCard ? parent : parent.card;
+        if (schema.events) {
+            for (let key in schema.events) {
+                let eventHandler = schema.events[key];
+                this.#events[key] = (...args) => card[eventHandler]?.(...args);
+            }
+        }
+        this.#validation = this.parseValidationRule(schema.validation);
+        const cellField = ComponentBuilder.getInstance().buildField(schema, (name) => card.form.getDictionary(name));
+        this.component = cellField.component;
+        this.#props = cellField.props;
+        const result = utils.getParentAndKey(data, schema.keyField);
+        this.keyField = result?.key;
+        this.data = result?.parent;
+    }
+    validate() {
+        let valid = true;
+        this.#error = null;
+        if (!this.isReadonly && !this.disabled && this.visibility == Visibility.View) {
+            let value = this.data[this.keyField];
+            let valueType = typeof value;
+            if (value == null || (valueType == "string" && value.trim().length == 0)) {
+                if (this.required) {
+                    this.#error = '请输入数值';
+                    valid = false;
+                }
+            }
+            else {
+                if (valueType == "string") { //检查字符串类型
+                    if (this.#validation?.minLength && this.data.length < this.#validation?.minLength) {
+                        this.#error = '低于最小长度';
+                        valid = false;
+                    }
+                    if (valid && this.#validation?.format) { //如果有正则表达式，检查正则表达式
+                        if (!this.#validation.format.regex.test(this.data)) {
+                            this.#error = this.#validation.format.message;
+                        }
+                    }
+                }
+                else if (valueType == "number") { //如果是数字，检查最大/最小值
+                    if (this.#validation?.minValue && this.data < this.#validation.minValue) {
+                        this.#error = '低于最小值';
+                        valid = false;
+                    }
+                    else if (this.#validation?.maxValue && this.data > this.#validation.maxValue) {
+                        this.#error = '超过最大值';
+                        valid = false;
+                    }
+                }
+            }
+            if (valid && this.#validation?.check) { //如果有自定义检查，通过自定义方法检查
+                const result = this.#validation.check(this.data, this.#parent.data);
+                if (!result.valid) {
+                    valid = false;
+                    this.#error = result.message;
+                }
+            }
+        }
+        return valid;
+    }
+    get error() {
+        return this.#error;
+    }
+    /**
+     *
+     */
+    get events() {
+        return { ...this.#events };
+    }
+    /**
+     * 字段的属性
+     */
+    get props() {
+        return { ...this.#props };
+    }
+    /**
+     * 单元格属性，通常包括span等
+     */
+    get cell() {
+        return { ...this.#cell };
+    }
+    parseValidationRule(validation) {
+        if (validation) {
+            const rule = { minValue: validation.minValue, maxValue: validation.maxValue, minLength: validation.minLength };
+            if (validation.format) {
+                rule.format = { regex: new RegExp(validation.format.regex), message: validation.format.message };
+            }
+            if (validation.check) {
+                let checkFun = this.#parent[validation.check];
+                if (checkFun) {
+                    rule.check = checkFun;
+                }
+            }
+            return rule;
+        }
+        return undefined;
+    }
+}

package/dist/flexi-form/flexi_field/FlexiFieldCell.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">import { CellField } from "@ticatec/uniface-element/FlexForm";
+import { GridField } from "@ticatec/uniface-element/GridForm";
+import { Visibility } from "../lib/types";
+export let field;
+export let readonly = false;
+export let disabled = false;
+export let variant;
+export let label$style = '';
+let component = field.component;
+$: label = field.label;
+$: required = field.required;
+$: mode = field.mode;
+$: error = field.error;
+$: cell = field.cell;
+$: displayStyle = field.visibility == Visibility.View ? 'display: block; visibility: visible' : field.visibility == Visibility.Hidden ? 'display: none; visibility: visible' : 'display: block; visibility: hidden';
+$: FormCell = mode === "grid" ? GridField : CellField;
+$: props = mode === "grid" ?
+    {
+        rowSpan: cell.rowSpan ?? 1,
+        colSpan: cell.colSpan ?? 1,
+        row: cell.row,
+        col: cell.col,
+        height: cell.height,
+        labelSuffix: cell.labelSuffix,
+        style: displayStyle
+    } : {
+    span: cell.span,
+    labelSuffix: cell.labelSuffix,
+    style: `${displayStyle}; ${cell.style ?? ''}`
+};
+</script>
+
+<svelte:component this={FormCell} {label} {...props} {error} {required} {label$style}>
+    <svelte:component this={component} {field} {readonly} {disabled} {variant}/>
+</svelte:component>

package/dist/flexi-form/flexi_field/FlexiFieldCell.svelte.d.ts

@@ -0,0 +1,25 @@
+import type FlexiField from "./FlexiField";
+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 FlexiFieldCell: $$__sveltets_2_IsomorphicComponent<{
+    field: FlexiField;
+    readonly?: boolean;
+    disabled?: boolean;
+    variant: any;
+    label$style?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FlexiFieldCell = InstanceType<typeof FlexiFieldCell>;
+export default FlexiFieldCell;

package/dist/flexi-form/flexi_field/UnknownField.d.ts

@@ -0,0 +1,3 @@
+import FlexiField from "./FlexiField";
+export default class UnknownField extends FlexiField {
+}

package/dist/flexi-form/flexi_field/UnknownField.js

@@ -0,0 +1,3 @@
+import FlexiField from "./FlexiField";
+export default class UnknownField extends FlexiField {
+}