@ticatec/uniface-flexi-module 0.0.2

package/dist/flexi-form/flexi_form/FlexiForm.d.ts

@@ -0,0 +1,127 @@
+import type { FlexiCardSchema } from "../flexi_card/FlexiCard";
+import { type FlexiCompositeSchema } from "../flexi_composite/FlexiComposite";
+import type { LayoutMode } from "../lib";
+import FlexiCard from "../flexi_card/FlexiCard";
+import type { ButtonActions } from "@ticatec/uniface-element/ActionBar";
+import type { Arrangement } from "../lib/types";
+export interface FormElements {
+    [key: string]: FlexiCardSchema | FlexiCompositeSchema;
+}
+export interface FormBlockSchema {
+    id: string;
+    style: string;
+}
+/**
+ * 表单动作
+ */
+export interface FormActionSchema {
+    /**
+     * 按钮文字
+     */
+    label: string;
+    /**
+     * 类型，primary/secondary/...
+     */
+    type: 'default' | 'primary' | 'secondary' | 'third' | 'forth';
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 动作触发的类内方法
+     */
+    action: string;
+}
+export interface FlexiFormSchema {
+    mode?: LayoutMode;
+    arrangement?: Arrangement;
+    props?: any;
+    elements: FormElements;
+    label$style?: string;
+    variant?: 'filled' | 'outlined' | '';
+    actions?: Array<FormActionSchema>;
+    style?: string;
+    blocks?: Array<FormBlockSchema>;
+}
+export type FormInvalidateHandler = () => void;
+export default abstract class FlexiForm {
+    #private;
+    readonly mode: LayoutMode;
+    readonly props: any;
+    readonly arrangement: Arrangement;
+    readonly label$style?: string;
+    readonly variant: 'filled' | 'outlined' | '';
+    protected readonly elements: FormElements;
+    readonly style: string;
+    protected constructor(data: any, formSchema: FlexiFormSchema);
+    /**
+     * 构造表单
+     */
+    initialize(): Promise<void>;
+    /**
+     * 构造所有的卡片
+     * @protected
+     */
+    protected abstract buildCards(): void;
+    /**
+     * 根据名称获取一个组合块的定义
+     * @param name
+     */
+    getCompositeSchema(name: string): FlexiCompositeSchema;
+    /**
+     *
+     * @param value
+     * @protected
+     */
+    protected set cards(value: Array<FlexiCard>);
+    /**
+     * 获取表单中的卡片
+     */
+    get cards(): Array<FlexiCard>;
+    /**
+     * 获取表单关联数据
+     */
+    get data(): any;
+    /**
+     * 获取表单的Title
+     */
+    abstract getTitle(): string;
+    /**
+     * 设置表单刷新的处理器
+     * @param value
+     */
+    setInvalidateHandler(value?: FormInvalidateHandler): void;
+    /**
+     * 刷新表单
+     */
+    invalidate(): void;
+    /**
+     * 返回表单的操作按钮，比如，保存，提交等
+     */
+    getActions(): ButtonActions;
+    private extractDictionaries;
+    /**
+     * 从所有的Field中提取数据字典的名称
+     * @param dicts
+     * @param fields
+     * @private
+     */
+    private extractDictFromFields;
+    /**
+     *
+     * @param formActions
+     * @private
+     */
+    private parseFormActions;
+    validate(): boolean;
+    /**
+     * 获取指定的数据字典
+     * @param key
+     */
+    getDictionary(key: string): Array<any>;
+    /**
+     * 获取表单的动作
+     */
+    get actions(): ButtonActions;
+    getBlocks(): Array<FormBlockSchema> | undefined;
+}

package/dist/flexi-form/flexi_form/FlexiForm.js

@@ -0,0 +1,160 @@
+import {} from "../flexi_composite/FlexiComposite";
+import FlexiCard from "../flexi_card/FlexiCard";
+import FlexiContext from "../..";
+export default class FlexiForm {
+    #blocks;
+    #cards = [];
+    mode = "flex";
+    props = {};
+    arrangement = "vertical";
+    #data;
+    label$style = '';
+    variant;
+    elements;
+    #invalidateHandler;
+    #actions;
+    #dictionaries;
+    style;
+    constructor(data, formSchema) {
+        this.#blocks = formSchema.blocks;
+        this.#data = data;
+        this.mode = formSchema.mode ?? 'flex';
+        this.arrangement = formSchema.arrangement ?? 'vertical';
+        this.props = formSchema.props ?? {};
+        this.label$style = formSchema.label$style;
+        this.variant = formSchema.variant ?? 'filled';
+        this.elements = formSchema.elements;
+        this.#actions = this.parseFormActions(formSchema.actions);
+        this.#dictionaries = {};
+        this.style = formSchema.style ?? '';
+    }
+    /**
+     * 构造表单
+     */
+    async initialize() {
+        console.log('构造表单');
+        let dicts = this.extractDictionaries();
+        this.#dictionaries = await FlexiContext.getInstance().loadDictionaries(dicts);
+        this.buildCards();
+        this.invalidate(); // 通知UI刷新
+    }
+    /**
+     * 根据名称获取一个组合块的定义
+     * @param name
+     */
+    getCompositeSchema(name) {
+        return this.elements[name];
+    }
+    /**
+     *
+     * @param value
+     * @protected
+     */
+    set cards(value) {
+        this.#cards = value;
+    }
+    /**
+     * 获取表单中的卡片
+     */
+    get cards() {
+        return this.#cards;
+    }
+    /**
+     * 获取表单关联数据
+     */
+    get data() {
+        return this.#data;
+    }
+    /**
+     * 设置表单刷新的处理器
+     * @param value
+     */
+    setInvalidateHandler(value) {
+        this.#invalidateHandler = value;
+    }
+    /**
+     * 刷新表单
+     */
+    invalidate() {
+        this.#invalidateHandler?.();
+    }
+    /**
+     * 返回表单的操作按钮，比如，保存，提交等
+     */
+    getActions() {
+        return this.#actions;
+    }
+    extractDictionaries() {
+        let dicts = [];
+        for (let key in this.elements) {
+            const element = this.elements[key];
+            if (element.type == "block") {
+                this.extractDictFromFields(dicts, element.fields);
+            }
+            else {
+                const card = element;
+                this.extractDictFromFields(dicts, card.fields);
+            }
+        }
+        return dicts;
+    }
+    /**
+     * 从所有的Field中提取数据字典的名称
+     * @param dicts
+     * @param fields
+     * @private
+     */
+    extractDictFromFields(dicts, fields) {
+        for (let field of fields) {
+            if (field.type != "composite") {
+                let dictName = field.dictName;
+                if (dictName) {
+                    if (!dicts.includes(dictName)) {
+                        dicts.push(dictName);
+                    }
+                }
+            }
+        }
+    }
+    /**
+     *
+     * @param formActions
+     * @private
+     */
+    parseFormActions(formActions) {
+        let actions = [];
+        if (formActions && formActions.length > 0) {
+            for (let formAction of formActions) {
+                const handler = async (event) => {
+                    this[formAction.action]?.();
+                };
+                actions.push({ label: formAction.label, type: formAction.type, handler });
+            }
+        }
+        return actions;
+    }
+    validate() {
+        let valid = true;
+        for (const card of this.cards) {
+            valid = valid && card.validate();
+        }
+        this.#invalidateHandler?.();
+        return valid;
+    }
+    /**
+     * 获取指定的数据字典
+     * @param key
+     */
+    getDictionary(key) {
+        return [...(this.#dictionaries[key] ?? [])];
+    }
+    /**
+     * 获取表单的动作
+     */
+    get actions() {
+        return this.#actions;
+    }
+    getBlocks() {
+        return this.#blocks;
+    }
+}

package/dist/flexi-form/flexi_form/FlexiFormPanel.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">import FlexiForm from "./FlexiForm";
+import { onMount } from "svelte";
+import FlexiCardPanel from "../flexi_card/FlexiCardPanel.svelte";
+let className = '';
+export { className as class };
+export let actions;
+export let readonly = false;
+export let form;
+let style = form.style;
+let blocks;
+onMount(async () => {
+    form.setInvalidateHandler(() => {
+        refreshCards();
+    });
+    refreshCards();
+});
+// 响应form的变化
+$: if (form) {
+    refreshCards();
+}
+const refreshCards = () => {
+    blocks = form.getBlocks() ?? [];
+    if (blocks && blocks.length > 1) {
+        blocks.forEach(block => block.cards = []);
+        const map = new Map(blocks.map((item) => [item.id, item]));
+        for (let card of form.cards) {
+            let block = (card.block ? map.get(card.block) : blocks[0]) ?? blocks[0];
+            block.cards = [...block.cards, card];
+        }
+    }
+    else {
+        blocks = [{ cards: [...(form.cards || [])] }];
+    }
+    actions = [...(form.getActions() || [])];
+};
+</script>
+
+
+<div class="uniface-flexi-form {className}" {style}>
+    {#if blocks && blocks.length > 1}
+        {#each blocks as block}
+            <div style={block.style}>
+                {#each block.cards as card}
+                    <FlexiCardPanel {card} {readonly}/>
+                {/each}
+            </div>
+        {/each}
+    {:else}
+        <!-- 动态表单 -->
+        {#if blocks[0].cards && blocks[0].cards.length > 0}
+            {#each blocks[0].cards as card}
+                <FlexiCardPanel {card} {readonly}/>
+            {/each}
+        {/if}
+    {/if}
+
+</div>

package/dist/flexi-form/flexi_form/FlexiFormPanel.svelte.d.ts

@@ -0,0 +1,25 @@
+import FlexiForm from "./FlexiForm";
+import type { ButtonActions } from "@ticatec/uniface-element/ActionBar";
+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 FlexiFormPanel: $$__sveltets_2_IsomorphicComponent<{
+    class?: string;
+    actions: ButtonActions;
+    readonly?: boolean;
+    form: FlexiForm;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FlexiFormPanel = InstanceType<typeof FlexiFormPanel>;
+export default FlexiFormPanel;

package/dist/flexi-form/index.d.ts

@@ -0,0 +1,11 @@
+import FlexiForm from "./flexi_form/FlexiForm";
+import FlexiCard from "./flexi_card/FlexiCard";
+import FlexiField from "./flexi_field/FlexiField";
+import FlexiFormPage from "./FlexiFormPage.svelte";
+import FlexiFormDialog from "./FlexiFormDialog.svelte";
+import ComponentBuilder from "./lib/ComponentBuilder";
+import FlexiFormPanel from "./flexi_form/FlexiFormPanel.svelte";
+import { registerFormFieldBuilder } from "./components/CellFieldBuilder";
+export { FlexiForm, FlexiCard, FlexiField, FlexiFormPage, FlexiFormDialog, FlexiFormPanel };
+export { ComponentBuilder };
+export { registerFormFieldBuilder };

package/dist/flexi-form/index.js

@@ -0,0 +1,11 @@
+import FlexiForm from "./flexi_form/FlexiForm";
+import FlexiCard from "./flexi_card/FlexiCard";
+import FlexiField from "./flexi_field/FlexiField";
+import FlexiFormPage from "./FlexiFormPage.svelte";
+import FlexiFormDialog from "./FlexiFormDialog.svelte";
+import ComponentBuilder from "./lib/ComponentBuilder";
+import FlexiFormPanel from "./flexi_form/FlexiFormPanel.svelte";
+import { registerFormFieldBuilder } from "./components/CellFieldBuilder";
+export { FlexiForm, FlexiCard, FlexiField, FlexiFormPage, FlexiFormDialog, FlexiFormPanel };
+export { ComponentBuilder };
+export { registerFormFieldBuilder };

package/dist/flexi-form/lib/ComponentBuilder.d.ts

@@ -0,0 +1,15 @@
+import { type FlexiFieldSchema } from "../flexi_field/FlexiField";
+export type CellField = {
+    component: any;
+    props: any;
+};
+export type DictionaryLoader = (name: string) => Array<any>;
+export type BuildField = (schema: FlexiFieldSchema, dictLoader: DictionaryLoader) => CellField;
+export default class ComponentBuilder {
+    private static instance;
+    private map;
+    private constructor();
+    static getInstance(): ComponentBuilder;
+    register(type: string, builder: BuildField): void;
+    buildField(schema: FlexiFieldSchema, dictLoader: DictionaryLoader): CellField;
+}

package/dist/flexi-form/lib/ComponentBuilder.js

@@ -0,0 +1,31 @@
+import {} from "../flexi_field/FlexiField";
+import UnknownTypeField from "../components/UnknownTypeField.svelte";
+const unknownField = {
+    component: UnknownTypeField,
+    props: {}
+};
+export default class ComponentBuilder {
+    static instance;
+    map;
+    constructor() {
+        this.map = new Map;
+    }
+    static getInstance() {
+        if (ComponentBuilder.instance == null) {
+            ComponentBuilder.instance = new ComponentBuilder();
+        }
+        return ComponentBuilder.instance;
+    }
+    register(type, builder) {
+        this.map.set(type, builder);
+    }
+    buildField(schema, dictLoader) {
+        let builder = this.map.get(schema.type);
+        if (builder != null) {
+            return builder(schema, dictLoader);
+        }
+        else {
+            return unknownField;
+        }
+    }
+}

package/dist/flexi-form/lib/index.d.ts

@@ -0,0 +1,5 @@
+import type { LayoutMode } from "./types";
+import type { Arrangement } from "./types";
+import { Visibility } from "./types";
+export type { LayoutMode, Arrangement };
+export { Visibility };

package/dist/flexi-form/lib/index.js

@@ -0,0 +1,2 @@
+import { Visibility } from "./types";
+export { Visibility };

package/dist/flexi-form/lib/types.d.ts

@@ -0,0 +1,7 @@
+export type LayoutMode = 'flex' | 'grid';
+export type Arrangement = "vertical" | "horizontal";
+export declare enum Visibility {
+    View = 1,//显示
+    Invisible = 0,//不显示，占用当前单元格
+    Hidden = -1
+}

package/dist/flexi-form/lib/types.js

@@ -0,0 +1,6 @@
+export var Visibility;
+(function (Visibility) {
+    Visibility[Visibility["View"] = 1] = "View";
+    Visibility[Visibility["Invisible"] = 0] = "Invisible";
+    Visibility[Visibility["Hidden"] = -1] = "Hidden"; //隐藏，不占用当前单元格
+})(Visibility || (Visibility = {}));

package/dist/flexi-form/lib/utils.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    copyAttrs: (src: any, attrs: Array<string>) => any;
+    extractExpression: (str: string) => string | null;
+    getParentAndKey: (data: any, keyPath: string) => {
+        parent: any;
+        key: string;
+    };
+    formatText: (s: string, obj: any) => string;
+};
+export default _default;

package/dist/flexi-form/lib/utils.js

@@ -0,0 +1,48 @@
+const copyAttrs = (src, attrs) => {
+    let obj = {};
+    for (let attr of attrs) {
+        obj[attr] = src?.[attr];
+    }
+    return obj;
+};
+const extractExpression = (str) => {
+    const match = /^\$exp\{([^}]*)\}$/.exec(str);
+    return match ? match[1] : null;
+};
+/**
+ * 根据点分路径字符串获取目标属性的父对象和键名。
+ * 过程中如果发现父级对象为空（null 或 undefined），会自动为其赋值一个空对象 {}。
+ * * @param {object} data - 待查找和/或修改的原始对象。
+ * @param data
+ * @param {string} keyPath - 点分路径字符串，例如 "a.b.c"。
+ */
+const getParentAndKey = (data, keyPath) => {
+    if (!keyPath || typeof keyPath !== 'string') {
+        throw Error('invalidate key field');
+    }
+    if (keyPath.includes('.')) {
+        const keys = keyPath.split('.');
+        const targetKey = keys.pop();
+        let current = data ?? {};
+        for (const key of keys) {
+            if (current[key] == null) {
+                current[key] = {};
+            }
+            current = current[key];
+        }
+        return {
+            parent: current,
+            key: targetKey
+        };
+    }
+    else {
+        return { parent: data, key: keyPath };
+    }
+};
+const formatText = (s, obj) => {
+    return s.replace(/\{\{(.*?)\}\}/g, (_, key) => {
+        key = key.trim();
+        return obj.hasOwnProperty(key) ? String(obj[key]) : `{{${key}}}`;
+    });
+};
+export default { copyAttrs, extractExpression, getParentAndKey, formatText };

package/dist/i18n-res/i18nRes.d.ts

@@ -0,0 +1,2 @@
+declare const i18nRes: any;
+export default i18nRes;

package/dist/i18n-res/i18nRes.js

@@ -0,0 +1,8 @@
+import { i18nUtils } from "@ticatec/i18n";
+const langRes = {
+    flexi: {
+        validation: {}
+    }
+};
+const i18nRes = i18nUtils.createResourceProxy(langRes, 'uniface');
+export default i18nRes;

package/dist/i18n-res/index.d.ts

@@ -0,0 +1,2 @@
+import i18nRes from "./i18nRes";
+export default i18nRes;

package/dist/i18n-res/index.js

@@ -0,0 +1,2 @@
+import i18nRes from "./i18nRes";
+export default i18nRes;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import FlexiContext from "./FlexiContext";
+import ModuleLoader from "./ModuleLoader";
+import Sandbox from "./Sandbox";
+export default FlexiContext;
+export { ModuleLoader, Sandbox };

package/dist/index.js

@@ -0,0 +1,5 @@
+import FlexiContext from "./FlexiContext";
+import ModuleLoader from "./ModuleLoader";
+import Sandbox from "./Sandbox";
+export default FlexiContext;
+export { ModuleLoader, Sandbox };

package/dist/uniface-flexi-module.css

@@ -0,0 +1,46 @@
+:root {
+  --uniface-form-card-gap: 8px;
+  --flexi-form-background-color: #ffffff;
+}
+
+.uniface-flexi-form {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--flexi-form-background-color);
+  row-gap: var(--uniface-form-card-gap);
+}
+.uniface-flexi-form .uniface-flexi-card {
+  position: relative;
+}
+.uniface-flexi-form .uniface-flexi-card .uniface-flexi-card-title-bar {
+  padding: 12px 12px 8px 12px;
+  display: flex;
+  flex-direction: row;
+}
+.uniface-flexi-form .uniface-flexi-card .uniface-flexi-card-title-bar .title-text {
+  flex: 1 1 auto;
+  font-weight: 600;
+  font-size: 1.15em;
+}
+.uniface-flexi-form .uniface-flexi-composite-panel {
+  position: relative;
+}
+.uniface-flexi-form .uniface-flexi-composite-panel .flexi-composite-title-bar {
+  width: 100%;
+  position: relative;
+  padding: 12px 12px 6px 12px;
+}
+.uniface-flexi-form .uniface-flexi-composite-panel .flexi-composite-title-bar .title-text {
+  flex: 1 1 auto;
+  font-weight: 600;
+  font-size: 1em;
+}
+
+.uniface-flexi-criteria-panel {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding: 8px 0;
+}

package/dist/utils.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    propsFilter: (attrs: any, excludes?: Array<string>) => any;
+};
+export default _default;

package/dist/utils.js

@@ -0,0 +1,8 @@
+const propsFilter = (attrs, excludes = []) => {
+    let obj = { ...attrs };
+    for (let attr of excludes) {
+        delete obj[attr];
+    }
+    return obj;
+};
+export default { propsFilter };