@vunk/form 2.11.0 → 2.12.1

package/components/dialog-input-collection/index.mjs

@@ -0,0 +1,556 @@
+import { defineComponent, openBlock, createBlock, withCtx, createVNode, renderSlot, ref, watch, resolveComponent, createTextVNode, mergeProps, computed, Fragment, reactive, createElementBlock, normalizeProps, guardReactiveProps, createSlots, createCommentVNode, createElementVNode, toDisplayString } from 'vue';
+import { p as plus_default, e as edit_default, d as delete_default } from '../index.mjs';
+import { setData, ensetData, getValue } from '@vunk/core';
+import { _VkfFormItemCtx, VkfFormItem } from '@vunk/form/components/form-item';
+import { VkfInformationTemplates, VkfInformationData, VkfInformationRenderer } from '@vunk/form/components/information-renderer';
+import { useComputedReadonly } from '@vunk/form/composables';
+import { VkTableColumns } from '@vunk/plus/components/table-columns';
+import { ElDialog, ElButton, ElPopconfirm, ElTable } from 'element-plus';
+import { VkfRendererData } from '@vunk/form/components/renderer-data';
+import { VkfTemplateInstancesProvider } from '@vunk/form/components/template-instances-provider';
+import { VkfInformationTemplatesDefault } from '@vunk/form/components/information-templates-default';
+import { VkfTemplatesDefault } from '@vunk/form/components/templates-default';
+import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
+import { CRUD } from '@vunk/shared/enum';
+import { VkAvatar } from '@vunk/plus/components/avatar';
+import { VkfForm } from '@vunk/form/components/form';
+import { isCallable } from '@vunk/shared/function';
+import { c as cloneDeep } from '../cloneDeep.mjs';
+import '../isObject.mjs';
+
+const props = {
+  ..._VkfFormItemCtx.props,
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * @description 表格数据 v-model
+   */
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  readonly: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * @description 是否可以splice
+   */
+  splicable: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description 开启 form-item 的 label 上的操作区域, 在labelPosition为top时生效
+   */
+  labelActions: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description 添加记录时的默认值
+   */
+  defaultItemValue: {
+    type: Object,
+    default: () => ({})
+  },
+  dialogFormProps: {
+    type: Object,
+    default: () => ({})
+  },
+  modules: {
+    type: Array,
+    default: () => ["operations:add"]
+  }
+};
+const emits = {
+  "update:modelValue": null
+};
+
+var _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "layout",
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["setData"],
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const __returned__ = { get VkfRendererData() {
+      return VkfRendererData;
+    }, get VkfTemplateInstancesProvider() {
+      return VkfTemplateInstancesProvider;
+    }, get VkfInformationTemplates() {
+      return VkfInformationTemplates;
+    }, get VkfInformationData() {
+      return VkfInformationData;
+    }, get VkfInformationTemplatesDefault() {
+      return VkfInformationTemplatesDefault;
+    }, get VkfTemplatesDefault() {
+      return VkfTemplatesDefault;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock($setup["VkfTemplateInstancesProvider"], null, {
+    placeholder: withCtx(() => [
+      createVNode($setup["VkfTemplatesDefault"])
+    ]),
+    default: withCtx(() => [
+      createVNode($setup["VkfInformationTemplates"], null, {
+        placeholder: withCtx(() => [
+          createVNode($setup["VkfInformationTemplatesDefault"])
+        ]),
+        default: withCtx(() => [
+          createVNode($setup["VkfRendererData"], {
+            data: $props.data,
+            onSetData: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("setData", $event))
+          }, {
+            default: withCtx(() => [
+              createVNode($setup["VkfInformationData"], {
+                data: $props.data,
+                onSetData: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("setData", $event))
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "default")
+                ]),
+                _: 3
+                /* FORWARDED */
+              }, 8, ["data"])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["data"])
+        ]),
+        _: 3
+        /* FORWARDED */
+      })
+    ]),
+    _: 3
+    /* FORWARDED */
+  });
+}
+var TemplatesLayout = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/dialog-input-collection/src/layout.vue"]]);
+
+var _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "dialog-form",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    modelValue: {
+      type: Object,
+      default: () => ({})
+    },
+    openReset: {
+      type: Boolean,
+      default: true
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    formItems: {
+      type: Array,
+      default: () => []
+    },
+    dialogFormProps: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["update:modelValue", "update:visible", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const formData = ref(props.modelValue);
+    watch(() => props.visible, (v) => {
+      if (props.openReset && v) {
+        formData.value = { ...props.modelValue };
+      }
+    });
+    function handleSubmit() {
+      emit("update:modelValue", formData.value);
+      emit("change", formData.value);
+      emit("update:visible", false);
+    }
+    const __returned__ = { props, emit, formData, handleSubmit, get VkfForm() {
+      return VkfForm;
+    }, get ElDialog() {
+      return ElDialog;
+    }, get setData() {
+      return setData;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElButton = resolveComponent("ElButton");
+  return openBlock(), createBlock($setup["ElDialog"], {
+    "model-value": $props.visible,
+    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.$emit("update:visible", $event))
+  }, {
+    header: withCtx(() => [
+      renderSlot(_ctx.$slots, "header")
+    ]),
+    footer: withCtx(() => [
+      createVNode(_component_ElButton, {
+        onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:visible", false))
+      }, {
+        default: withCtx(() => _cache[3] || (_cache[3] = [
+          createTextVNode(" \u53D6\u6D88 ")
+        ])),
+        _: 1,
+        __: [3]
+      }),
+      createVNode(_component_ElButton, {
+        type: "primary",
+        onClick: $setup.handleSubmit
+      }, {
+        default: withCtx(() => _cache[4] || (_cache[4] = [
+          createTextVNode(" \u786E\u5B9A ")
+        ])),
+        _: 1,
+        __: [4]
+      })
+    ]),
+    default: withCtx(() => [
+      createVNode($setup["VkfForm"], mergeProps($props.dialogFormProps, {
+        "form-items": $props.formItems,
+        data: $setup.formData,
+        onSetData: _cache[0] || (_cache[0] = ($event) => $setup.setData($setup.formData, $event))
+      }), null, 16, ["form-items", "data"])
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["model-value"]);
+}
+var DialogForm = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/dialog-input-collection/src/dialog-form.vue"]]);
+
+var _sfc_main = /* @__PURE__ */defineComponent({
+  ...{
+    name: "VkfDialogInputCollection"
+  },
+  __name: "index",
+  props: props,
+  emits,
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
+  }) {
+    __expose();
+    const ElTable$1 = ElTable;
+    const props = __props;
+    const emit = __emit;
+    const hasColAdd = computed(() => {
+      return props.modules.includes("operations:add");
+    });
+    const formItemBindProps = _VkfFormItemCtx.createBindProps(props);
+    const readonly = useComputedReadonly(props);
+    const formData = computed(() => {
+      if (!props.prop || props.prop.length === 0) {
+        return props.modelValue;
+      }
+      const data = {};
+      ensetData(data, {
+        k: props.prop,
+        v: props.modelValue
+      });
+      return data;
+    });
+    const fullColumns = computed(() => {
+      return props.columns.map(column => {
+        const tableColProp = Array.isArray(column.prop) ? column.prop.join(".") : column.prop;
+        return {
+          ...column,
+          prop: tableColProp,
+          slots: e => {
+            const prop = [props.prop ?? [], e.$index, column.prop].flat();
+            const formItemProps = {
+              prop,
+              readonly: readonly.value,
+              templateType: column.templateType,
+              templateProps: column.templateProps
+            };
+            if (isCallable(column.templateProps)) {
+              formItemProps.templateProps = () => {
+                return column.templateProps(e.row);
+              };
+            }
+            return createVNode(VkfInformationRenderer, {
+              "source": [{
+                ...formItemProps,
+                ...column.createTemplateProps?.(e, formItemProps)
+              }]
+            }, null);
+          }
+        };
+      });
+    });
+    const buttonsColumn = computed(() => ({
+      label: "\u64CD\u4F5C",
+      align: "center",
+      width: "85",
+      hidden: readonly.value || !props.splicable,
+      className: "vk-input-collection__buttons",
+      slots: ({
+        $index
+      }) => createVNode(Fragment, null, [hasColAdd.value && createVNode(ElButton, {
+        "size": "small",
+        "icon": plus_default,
+        "type": "primary",
+        "link": true,
+        "onClick": () => handlePlus($index)
+      }, null), createVNode(ElButton, {
+        "size": "small",
+        "icon": edit_default,
+        "type": "primary",
+        "link": true,
+        "onClick": () => handleEdit($index)
+      }, null), createVNode(ElPopconfirm, {
+        "title": "\u786E\u5B9A\u5220\u9664\u5417\uFF1F",
+        "onConfirm": () => handleMinus($index),
+        "confirmButtonText": "\u5220\u9664",
+        "cancelButtonText": "\u53D6\u6D88"
+      }, {
+        reference: () => createVNode(ElButton, {
+          "size": "small",
+          "icon": delete_default,
+          "type": "danger",
+          "link": true
+        }, null)
+      })])
+    }));
+    const allColumns = computed(() => {
+      const data = [...fullColumns.value, buttonsColumn.value];
+      return data;
+    });
+    const cuState = reactive({
+      type: CRUD.create,
+      index: 0,
+      // 新增时，表示在哪条点击的 +
+      data: {},
+      dialogVisible: false
+    });
+    const cuFormItems = computed(() => {
+      return props.columns.map(c => {
+        return {
+          label: c.label,
+          readonly: readonly.value,
+          prop: c.prop,
+          templateType: c.templateType,
+          templateProps: c.templateProps
+        };
+      });
+    });
+    function handleMinus(index) {
+      const data = cloneDeep(props.modelValue);
+      data.splice(index, 1);
+      emit("update:modelValue", data);
+    }
+    function handlePlus(index) {
+      cuState.index = index;
+      cuState.data = cloneDeep(props.defaultItemValue);
+      cuState.type = CRUD.create;
+      cuState.dialogVisible = true;
+    }
+    function handleEdit(index) {
+      const data = props.modelValue[index];
+      cuState.index = index;
+      cuState.data = cloneDeep(data);
+      cuState.type = CRUD.update;
+      cuState.dialogVisible = true;
+    }
+    function handleDialogFormChange(data) {
+      const newData = cloneDeep(props.modelValue);
+      if (cuState.type === CRUD.create) {
+        newData.splice(cuState.index + 1, 0, data);
+      } else if (cuState.type === CRUD.update) {
+        newData[cuState.index] = data;
+      }
+      emit("update:modelValue", newData);
+    }
+    const handleFormSetData = e => {
+      console.warn("\u8868\u5355\u9879\u6B63\u5728\u76F4\u63A5\u4FEE\u6539 Data, \u8FD9\u5728 dialog-input-collection \u53EF\u80FD\u662F\u4E00\u4E2A\u610F\u5916\u64CD\u4F5C", e);
+      const data = cloneDeep(formData.value);
+      ensetData(data, e);
+      emit("update:modelValue", getValue(data, props.prop));
+    };
+    const __returned__ = {
+      ElTable: ElTable$1,
+      props,
+      emit,
+      hasColAdd,
+      formItemBindProps,
+      readonly,
+      formData,
+      fullColumns,
+      buttonsColumn,
+      allColumns,
+      cuState,
+      cuFormItems,
+      handleMinus,
+      handlePlus,
+      handleEdit,
+      handleDialogFormChange,
+      handleFormSetData,
+      get Plus() {
+        return plus_default;
+      },
+      get Edit() {
+        return edit_default;
+      },
+      get VkfFormItem() {
+        return VkfFormItem;
+      },
+      get VkTableColumns() {
+        return VkTableColumns;
+      },
+      get ElButton() {
+        return ElButton;
+      },
+      TemplatesLayout,
+      get CRUD() {
+        return CRUD;
+      },
+      get VkAvatar() {
+        return VkAvatar;
+      },
+      DialogForm
+    };
+    Object.defineProperty(__returned__, "__isScriptSetup", {
+      enumerable: false,
+      value: true
+    });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = {
+  key: 0,
+  class: "vkf-dialog-input-collection-options"
+};
+const _hoisted_2 = { class: "vkf-dialog-input-collection__dialog-header" };
+const _hoisted_3 = { class: "vkf-dialog-input-collection__dialog-title" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
+    Fragment,
+    null,
+    [
+      createVNode($setup["TemplatesLayout"], {
+        data: $setup.formData,
+        onSetData: $setup.handleFormSetData
+      }, {
+        default: withCtx(() => [
+          createVNode(
+            $setup["VkfFormItem"],
+            normalizeProps(guardReactiveProps($setup.formItemBindProps)),
+            createSlots({
+              default: withCtx(() => [
+                !$setup.readonly && _ctx.splicable && !_ctx.labelActions ? (openBlock(), createElementBlock("div", _hoisted_1, [
+                  createVNode($setup["ElButton"], {
+                    type: "primary",
+                    onClick: _cache[1] || (_cache[1] = ($event) => $setup.handlePlus(-1))
+                  }, {
+                    default: withCtx(() => _cache[5] || (_cache[5] = [
+                      createTextVNode(" \u6DFB\u52A0 ")
+                    ])),
+                    _: 1,
+                    __: [5]
+                  })
+                ])) : createCommentVNode("v-if", true),
+                createVNode($setup["ElTable"], {
+                  data: _ctx.modelValue,
+                  class: "vkf-dialog-input-collection-table"
+                }, {
+                  default: withCtx(() => [
+                    createVNode($setup["VkTableColumns"], { source: $setup.allColumns }, null, 8, ["source"])
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["data"])
+              ]),
+              _: 2
+              /* DYNAMIC */
+            }, [
+              _ctx.labelActions ? {
+                name: "labelActions",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "labelActions"),
+                  !$setup.readonly && _ctx.splicable ? (openBlock(), createBlock($setup["ElButton"], {
+                    key: 0,
+                    size: "small",
+                    icon: $setup.Plus,
+                    onClick: _cache[0] || (_cache[0] = ($event) => $setup.handlePlus(-1))
+                  }, {
+                    default: withCtx(() => _cache[4] || (_cache[4] = [
+                      createTextVNode(" \u6DFB\u52A0 ")
+                    ])),
+                    _: 1,
+                    __: [4]
+                  }, 8, ["icon"])) : createCommentVNode("v-if", true)
+                ]),
+                key: "0"
+              } : void 0
+            ]),
+            1040
+            /* FULL_PROPS, DYNAMIC_SLOTS */
+          ),
+          createVNode($setup["DialogForm"], {
+            visible: $setup.cuState.dialogVisible,
+            "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => $setup.cuState.dialogVisible = $event),
+            modelValue: $setup.cuState.data,
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => $setup.cuState.data = $event),
+            "form-items": $setup.cuFormItems,
+            "dialog-form-props": _ctx.dialogFormProps,
+            onChange: $setup.handleDialogFormChange
+          }, {
+            header: withCtx(() => [
+              createElementVNode("div", _hoisted_2, [
+                createVNode($setup["VkAvatar"], {
+                  icon: $setup.cuState.type === $setup.CRUD.create ? $setup.Plus : $setup.Edit
+                }, null, 8, ["icon"]),
+                createElementVNode(
+                  "span",
+                  _hoisted_3,
+                  toDisplayString($setup.props.label),
+                  1
+                  /* TEXT */
+                )
+              ])
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["visible", "modelValue", "form-items", "dialog-form-props"])
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["data"]),
+      renderSlot(_ctx.$slots, "default")
+    ],
+    64
+    /* STABLE_FRAGMENT */
+  );
+}
+var VkfDialogInputCollection = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/dialog-input-collection/src/index.vue"]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkfDialogInputCollection.install = (app) => {
+  app.component(VkfDialogInputCollection.name || "VkfDialogInputCollection", VkfDialogInputCollection);
+};
+
+export { VkfDialogInputCollection, types as __VkfDialogInputCollection, VkfDialogInputCollection as default };

package/components/dialog-input-collection/src/ctx.d.ts

@@ -0,0 +1,142 @@
+import { PropType } from 'vue';
+import { NormalObject } from '@vunk/shared';
+import { Modules } from './types';
+export declare const props: {
+    columns: {
+        type: PropType<any[]>;
+        default: () => any[];
+    };
+    /**
+     * @description 表格数据 v-model
+     */
+    modelValue: {
+        type: PropType<NormalObject[]>;
+        default: () => any[];
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    /**
+     * @description 是否可以splice
+     */
+    splicable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @description 开启 form-item 的 label 上的操作区域, 在labelPosition为top时生效
+     */
+    labelActions: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @description 添加记录时的默认值
+     */
+    defaultItemValue: {
+        type: PropType<NormalObject>;
+        default: () => {};
+    };
+    dialogFormProps: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    modules: {
+        type: PropType<Modules[]>;
+        default: () => string[];
+    };
+    required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: undefined;
+    };
+    formItemSize: {
+        type: PropType<"default" | "small" | "large">;
+        default: "default" | "small" | "large";
+    };
+    formItemSlots: {
+        type: PropType<import("@vunk/form/components/form-item/src/types").FormItemSlots>;
+        default: any;
+    };
+    elRef: {
+        type: PropType<any>;
+        required: boolean;
+    };
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    formItemTip: {
+        type: StringConstructor;
+        default: any;
+    };
+    formItemTipClass: any;
+    labelTip: {
+        type: StringConstructor;
+        default: any;
+    };
+    information: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: StringConstructor;
+    labelWidth: {
+        readonly type: PropType<string | number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "";
+    };
+    labelPosition: {
+        readonly type: PropType<"" | "top" | "left" | "right">;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "";
+    };
+    prop: {
+        readonly type: PropType<import("element-plus").FormItemProp>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    rules: {
+        readonly type: PropType<unknown>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    error: StringConstructor;
+    validateStatus: {
+        readonly type: PropType<"" | "error" | "success" | "validating">;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    for: StringConstructor;
+    inlineMessage: {
+        readonly type: PropType<string | boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "";
+    };
+    showMessage: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+};
+export declare const emits: {
+    'update:modelValue': any;
+};