@vunk/form 2.0.2 → 2.2.0

package/components/tables-select/index.mjs

@@ -0,0 +1,219 @@
+import { _VkTablesV1CheckboxCtx, VkTablesV1Checkbox } from '@vunk/plus/components/tables-v1-checkbox';
+import { _VkfFormItemCtx } from '@vunk/form/components/form-item';
+import { defineComponent, ref, computed, watch, resolveComponent, openBlock, createElementBlock, Fragment, createVNode, mergeProps, withCtx, toHandlers } from 'vue';
+import { VkfSelect } from '@vunk/form/components/select';
+import { ElDialog } from 'element-plus';
+import { compareArray } from '@vunk/shared/array';
+import { isNotEmptyObject } from '@vunk/shared/object';
+import { useComputedReadonly } from '@vunk/form/composables';
+import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
+
+const props = {
+  ..._VkfFormItemCtx.props,
+  ..._VkTablesV1CheckboxCtx.props,
+  /**
+   * @description v-model 绑定值
+   */
+  modelValue: {
+    type: [Array, String],
+    default: () => []
+  },
+  labelField: {
+    type: String,
+    default: "label"
+  },
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  multiple: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description 获取完整数据
+   */
+  getRows: {
+    type: Function,
+    default: () => []
+  },
+  /**
+   * @description 是否在补全 Rows 后更新 modelValue
+   */
+  updateWhenCompleted: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   *  @description 是否将选中的数据 join 为字符串
+   */
+  stringify: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description 是否只读
+   */
+  readonly: {
+    type: Boolean,
+    default: void 0
+  }
+};
+const emits = {
+  ..._VkTablesV1CheckboxCtx.emits
+};
+
+var _sfc_main = defineComponent({
+  name: "VkfTablesSelect",
+  components: {
+    VkfSelect,
+    VkTablesV1Checkbox,
+    ElDialog
+  },
+  props,
+  emits,
+  setup(props2, { emit }) {
+    const formItemProps = _VkfFormItemCtx.createBindProps(props2);
+    const tablesProps = _VkTablesV1CheckboxCtx.createBindProps(props2, ["modelValue"]);
+    const tablesEmits = _VkTablesV1CheckboxCtx.createOnEmits(emit, ["update:modelValue"]);
+    const readonly = useComputedReadonly(props2);
+    const dialogVisible = ref(false);
+    const backupRowMap = ref(/* @__PURE__ */ new Map());
+    const theModelValue = computed({
+      get: () => {
+        if (props2.stringify && typeof props2.modelValue === "string") {
+          return props2.modelValue ? props2.modelValue.split(",").map((v) => ({ [props2.oidField]: v })) : [];
+        }
+        return props2.modelValue;
+      },
+      set: (modelValue) => {
+        if (!Array.isArray(modelValue)) {
+          modelValue = modelValue ? [modelValue] : [];
+        }
+        if (props2.stringify) {
+          const value = modelValue.reduce((a, v) => {
+            if (isNotEmptyObject(v) && v[props2.oidField] !== void 0) {
+              a.push(v[props2.oidField]);
+            }
+            return a;
+          }, []).join(",");
+          emit("update:modelValue", value);
+          return;
+        }
+        emit("update:modelValue", modelValue);
+      }
+    });
+    const selectOptions = computed(() => {
+      return theModelValue.value.map((item) => {
+        const backupRow = backupRowMap.value.get(item[props2.oidField]);
+        return {
+          label: item[props2.labelField] || backupRow?.[props2.labelField],
+          value: item
+        };
+      });
+    });
+    const selectValue = computed(() => {
+      return props2.multiple ? theModelValue.value : theModelValue.value[0];
+    });
+    watch(
+      () => selectOptions.value.filter((v) => !v.label),
+      (rows) => {
+        if (!rows.length) {
+          return;
+        }
+        readItems(rows.map((v) => v.value[props2.oidField])).then(() => {
+          if (props2.stringify) return;
+          if (!props2.updateWhenCompleted) return;
+          const newModelValue = theModelValue.value.reduce((a, v) => {
+            const backupRow = backupRowMap.value.get(v[props2.oidField]);
+            backupRow ? a.push(backupRow) : a.push(v);
+            return a;
+          }, []);
+          theModelValue.value = newModelValue;
+        });
+      },
+      { immediate: true }
+    );
+    async function readItems(ids) {
+      const idRows = ids.filter((v) => !backupRowMap.value.has(v)).map((id) => ({ [props2.oidField]: id }));
+      if (!idRows.length) {
+        return;
+      }
+      const { updateRows, addMap } = compareArray(props2.data, idRows, props2.oidField);
+      updateRows.forEach((row) => {
+        backupRowMap.value.set(row[props2.oidField], row);
+      });
+      if (!addMap.size) {
+        return;
+      }
+      const oids = Array.from(addMap.keys());
+      const rows = await props2.getRows(oids);
+      rows.forEach((row) => {
+        backupRowMap.value.set(row[props2.oidField], row);
+      });
+    }
+    return {
+      formItemProps,
+      selectOptions,
+      tablesProps,
+      tablesEmits,
+      dialogVisible,
+      selectValue,
+      theModelValue,
+      readonly
+    };
+  }
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_VkfSelect = resolveComponent("VkfSelect");
+  const _component_VkTablesV1Checkbox = resolveComponent("VkTablesV1Checkbox");
+  const _component_ElDialog = resolveComponent("ElDialog");
+  return openBlock(), createElementBlock(
+    Fragment,
+    null,
+    [
+      createVNode(_component_VkfSelect, mergeProps(_ctx.formItemProps, {
+        multiple: _ctx.multiple,
+        options: _ctx.selectOptions,
+        "model-value": _ctx.selectValue,
+        clearable: _ctx.clearable,
+        "popper-class": "vkf-tables-select__popper",
+        "value-key": _ctx.oidField,
+        readonly: _ctx.readonly,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.theModelValue = $event),
+        onVisibleChange: _cache[1] || (_cache[1] = ($event) => !_ctx.readonly && (_ctx.dialogVisible = true))
+      }), null, 16, ["multiple", "options", "model-value", "clearable", "value-key", "readonly"]),
+      createVNode(_component_ElDialog, {
+        modelValue: _ctx.dialogVisible,
+        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => _ctx.dialogVisible = $event),
+        title: _ctx.label ?? "\u8BF7\u9009\u62E9",
+        "append-to-body": "",
+        "model-class": "vkf-tables-select__model",
+        class: "vkf-tables-select__dialog"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_VkTablesV1Checkbox, mergeProps(_ctx.tablesProps, {
+            modelValue: _ctx.theModelValue,
+            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.theModelValue = $event)
+          }, toHandlers(_ctx.tablesEmits)), null, 16, ["modelValue"])
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["modelValue", "title"])
+    ],
+    64
+    /* STABLE_FRAGMENT */
+  );
+}
+var VkfTablesSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/tables-select/src/index.vue"]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkfTablesSelect.install = (app) => {
+  app.component(VkfTablesSelect.name || "VkfTablesSelect", VkfTablesSelect);
+};
+
+export { VkfTablesSelect, types as __VkfTablesSelect, VkfTablesSelect as default };

package/components/tables-select/src/ctx.d.ts

@@ -0,0 +1,338 @@
+import { PropType } from 'vue';
+import { NormalObject } from '@vunk/shared';
+export declare const props: {
+    /**
+     * @description v-model 绑定值
+     */
+    modelValue: {
+        type: PropType<NormalObject[] | string>;
+        default: () => any[];
+    };
+    labelField: {
+        type: StringConstructor;
+        default: string;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @description 获取完整数据
+     */
+    getRows: {
+        type: PropType<(ids: any[]) => Promise<NormalObject[]>>;
+        default: () => any[];
+    };
+    /**
+     * @description 是否在补全 Rows 后更新 modelValue
+     */
+    updateWhenCompleted: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     *  @description 是否将选中的数据 join 为字符串
+     */
+    stringify: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @description 是否只读
+     */
+    readonly: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    oidField: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    selectionHidden: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    checkTrigger: {
+        type: PropType<"check" | "rowClick">;
+        default: string;
+    };
+    paginationDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    border: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tableClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    tableStyle: {
+        type: PropType<import("vue").CSSProperties>;
+        default: any;
+    };
+    layout: {
+        type: StringConstructor;
+        default: any;
+    };
+    pageSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    currentPage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    start: {
+        type: NumberConstructor;
+        default: any;
+    };
+    columns: {
+        type: PropType<import("@vunk/plus/components/tables-v1/src/types").Column[]>;
+        default: () => any[];
+    };
+    modules: {
+        type: PropType<"pagination"[]>;
+        default: () => string[];
+    };
+    align: {
+        type: StringConstructor;
+        default: string;
+    };
+    headerAlign: {
+        type: StringConstructor;
+        default: string;
+    };
+    elRef: {
+        type: PropType<import("@vunk/core").AnyFunc>;
+        default: any;
+    };
+    load: PropType<(row: any, treeNode: import("element-plus").TreeNode, resolve: (data: any[]) => void) => void>;
+    data: {
+        type: PropType<any[]>;
+        default: () => any[];
+    };
+    size: {
+        readonly type: PropType<import("element-plus").ButtonType<StringConstructor, "" | "small" | "default" | "large", never>>;
+        readonly required: false;
+        readonly validator: (val: unknown) => boolean;
+        __epPropKey: true;
+    };
+    width: (StringConstructor | NumberConstructor)[];
+    showOverflowTooltip: PropType<boolean | Partial<Pick<import("element-plus").ElTooltipProps, "popperClass" | "showArrow" | "appendTo" | "transition" | "effect" | "enterable" | "offset" | "placement" | "popperOptions" | "showAfter" | "hideAfter">>>;
+    rowKey: PropType<string | ((row: any) => string)>;
+    summaryMethod: PropType<import("element-plus").SummaryMethod<any>>;
+    rowClassName: PropType<import("element-plus").ColumnCls<any>>;
+    rowStyle: PropType<import("element-plus").ColumnStyle<any>>;
+    cellClassName: PropType<import("element-plus").CellCls<any>>;
+    cellStyle: PropType<import("element-plus").CellStyle<any>>;
+    headerRowClassName: PropType<import("element-plus").ColumnCls<any>>;
+    headerRowStyle: PropType<import("element-plus").ColumnStyle<any>>;
+    headerCellClassName: PropType<import("element-plus").CellCls<any>>;
+    headerCellStyle: PropType<import("element-plus").CellStyle<any>>;
+    expandRowKeys: PropType<any[]>;
+    defaultSort: PropType<import("element-plus").Sort>;
+    tooltipOptions: PropType<Partial<Pick<import("element-plus").ElTooltipProps, "popperClass" | "showArrow" | "appendTo" | "transition" | "effect" | "enterable" | "offset" | "placement" | "popperOptions" | "showAfter" | "hideAfter">>>;
+    spanMethod: PropType<(data: {
+        row: any;
+        rowIndex: number;
+        column: import("element-plus").TableColumnCtx<any>;
+        columnIndex: number;
+    }) => number[] | {
+        rowspan: number;
+        colspan: number;
+    }>;
+    treeProps: {
+        type: PropType<{
+            hasChildren?: string;
+            children?: string;
+        }>;
+        default: () => {
+            hasChildren: string;
+            children: string;
+            checkStrictly: boolean;
+        };
+    };
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    fit: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stripe: BooleanConstructor;
+    showHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showSummary: BooleanConstructor;
+    sumText: StringConstructor;
+    highlightCurrentRow: BooleanConstructor;
+    currentRowKey: (StringConstructor | NumberConstructor)[];
+    emptyText: StringConstructor;
+    defaultExpandAll: BooleanConstructor;
+    tooltipEffect: StringConstructor;
+    selectOnIndeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indent: {
+        type: NumberConstructor;
+        default: number;
+    };
+    lazy: BooleanConstructor;
+    tableLayout: {
+        type: PropType<"fixed" | "auto">;
+        default: string;
+    };
+    scrollbarAlwaysOn: BooleanConstructor;
+    flexible: BooleanConstructor;
+    appendFilterPanelTo: StringConstructor;
+    scrollbarTabindex: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: any;
+    };
+    defaultPageSize: NumberConstructor;
+    total: NumberConstructor;
+    pageCount: NumberConstructor;
+    pagerCount: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 7, boolean>;
+    defaultCurrentPage: NumberConstructor;
+    pageSizes: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => number[]) | (() => number[]) | ((new (...args: any[]) => number[]) | (() => number[]))[], unknown, unknown, () => [10, 20, 30, 40, 50, 100], boolean>;
+    popperClass: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+    prevText: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+    prevIcon: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>) | ((new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>))[], unknown, unknown, () => any, boolean>;
+    nextText: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+    nextIcon: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>) | ((new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>))[], unknown, unknown, () => any, boolean>;
+    teleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    small: BooleanConstructor;
+    background: BooleanConstructor;
+    hideOnSinglePage: BooleanConstructor;
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    label: StringConstructor;
+    className: StringConstructor;
+    labelClassName: StringConstructor;
+    property: StringConstructor;
+    prop: StringConstructor;
+    minWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    renderHeader: PropType<(data: {
+        column: import("element-plus").TableColumnCtx<any>;
+        $index: number;
+    }) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>>;
+    sortable: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
+    sortMethod: PropType<(a: any, b: any) => number>;
+    sortBy: PropType<string | string[] | ((row: any, index: number) => string)>;
+    resizable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    columnKey: StringConstructor;
+    showTooltipWhenOverflow: BooleanConstructor;
+    fixed: (StringConstructor | BooleanConstructor)[];
+    formatter: PropType<(row: any, column: import("element-plus").TableColumnCtx<any>, cellValue: any, index: number) => string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>>;
+    selectable: PropType<(row: any, index: number) => boolean>;
+    reserveSelection: BooleanConstructor;
+    filterMethod: PropType<import("element-plus/es/components/table/src/table-column/defaults").FilterMethods<any>>;
+    filteredValue: PropType<string[]>;
+    filters: PropType<import("element-plus/es/components/table/src/table-column/defaults").Filters>;
+    filterPlacement: StringConstructor;
+    filterMultiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    index: PropType<number | ((index: number) => number)>;
+    sortOrders: {
+        type: PropType<("ascending" | "descending")[]>;
+        default: () => string[];
+        validator: (val: ("ascending" | "descending")[]) => boolean;
+    };
+    required: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    formItemSize: {
+        type: PropType<"default" | "small" | "large">;
+        default: "default" | "small" | "large";
+    };
+    formItemSlots: {
+        type: PropType<import("@vunk/form/components/form-item/src/types").FormItemSlots>;
+        default: any;
+    };
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    formItemTip: {
+        type: StringConstructor;
+        default: any;
+    };
+    formItemTipClass: any;
+    labelTip: {
+        type: StringConstructor;
+        default: any;
+    };
+    labelWidth: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
+    labelPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "" | "top" | "left" | "right", unknown, "", boolean>;
+    rules: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => import("element-plus").FormItemRule | import("element-plus").FormItemRule[]) | (() => import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>) | ((new (...args: any[]) => import("element-plus").FormItemRule | import("element-plus").FormItemRule[]) | (() => import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    error: StringConstructor;
+    validateStatus: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "error" | "success" | "validating", unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    for: StringConstructor;
+    inlineMessage: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, BooleanConstructor], unknown, unknown, "", boolean>;
+    showMessage: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+};
+export declare const emits: {
+    'update:modelValue': (val: any[]) => boolean;
+    'update:start': (val: number) => boolean;
+    select: any;
+    'select-all': any;
+    'selection-change': any;
+    'cell-mouse-enter': any;
+    'cell-mouse-leave': any;
+    'cell-contextmenu': any;
+    'cell-click': any;
+    'cell-dblclick': any;
+    'row-click': any;
+    'row-contextmenu': any;
+    'row-dblclick': any;
+    'header-click': any;
+    'header-contextmenu': any;
+    'sort-change': any;
+    'filter-change': any;
+    'current-change': any;
+    'header-dragend': any;
+    'expand-change': any;
+    scroll: any;
+    'update:current-page': (val: number) => boolean;
+    'update:page-size': (val: number) => boolean;
+    'size-change': (val: number) => boolean;
+    change: (currentPage: number, pageSize: number) => boolean;
+    'prev-click': (val: number) => boolean;
+    'next-click': (val: number) => boolean;
+};