@vunk/form 2.11.0 → 2.12.0

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

@@ -0,0 +1,560 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var index = require('../index.cjs');
+var core = require('@vunk/core');
+var formItem = require('@vunk/form/components/form-item');
+var informationRenderer = require('@vunk/form/components/information-renderer');
+var composables = require('@vunk/form/composables');
+var tableColumns = require('@vunk/plus/components/table-columns');
+var elementPlus = require('element-plus');
+var rendererData = require('@vunk/form/components/renderer-data');
+var templateInstancesProvider = require('@vunk/form/components/template-instances-provider');
+var informationTemplatesDefault = require('@vunk/form/components/information-templates-default');
+var templatesDefault = require('@vunk/form/components/templates-default');
+var _pluginVue_exportHelper = require('../_plugin-vue_export-helper.cjs');
+var _enum = require('@vunk/shared/enum');
+var avatar = require('@vunk/plus/components/avatar');
+var form = require('@vunk/form/components/form');
+var _function = require('@vunk/shared/function');
+var cloneDeep = require('../cloneDeep.cjs');
+require('../isObject.cjs');
+
+const props = {
+  ...formItem._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__ */ vue.defineComponent({
+  __name: "layout",
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["setData"],
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const __returned__ = { get VkfRendererData() {
+      return rendererData.VkfRendererData;
+    }, get VkfTemplateInstancesProvider() {
+      return templateInstancesProvider.VkfTemplateInstancesProvider;
+    }, get VkfInformationTemplates() {
+      return informationRenderer.VkfInformationTemplates;
+    }, get VkfInformationData() {
+      return informationRenderer.VkfInformationData;
+    }, get VkfInformationTemplatesDefault() {
+      return informationTemplatesDefault.VkfInformationTemplatesDefault;
+    }, get VkfTemplatesDefault() {
+      return templatesDefault.VkfTemplatesDefault;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createBlock($setup["VkfTemplateInstancesProvider"], null, {
+    placeholder: vue.withCtx(() => [
+      vue.createVNode($setup["VkfTemplatesDefault"])
+    ]),
+    default: vue.withCtx(() => [
+      vue.createVNode($setup["VkfInformationTemplates"], null, {
+        placeholder: vue.withCtx(() => [
+          vue.createVNode($setup["VkfInformationTemplatesDefault"])
+        ]),
+        default: vue.withCtx(() => [
+          vue.createVNode($setup["VkfRendererData"], {
+            data: $props.data,
+            onSetData: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("setData", $event))
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode($setup["VkfInformationData"], {
+                data: $props.data,
+                onSetData: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("setData", $event))
+              }, {
+                default: vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "default")
+                ]),
+                _: 3
+                /* FORWARDED */
+              }, 8, ["data"])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["data"])
+        ]),
+        _: 3
+        /* FORWARDED */
+      })
+    ]),
+    _: 3
+    /* FORWARDED */
+  });
+}
+var TemplatesLayout = /* @__PURE__ */ _pluginVue_exportHelper._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__ */ vue.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 = vue.ref(props.modelValue);
+    vue.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 form.VkfForm;
+    }, get ElDialog() {
+      return elementPlus.ElDialog;
+    }, get setData() {
+      return core.setData;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElButton = vue.resolveComponent("ElButton");
+  return vue.openBlock(), vue.createBlock($setup["ElDialog"], {
+    "model-value": $props.visible,
+    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.$emit("update:visible", $event))
+  }, {
+    header: vue.withCtx(() => [
+      vue.renderSlot(_ctx.$slots, "header")
+    ]),
+    footer: vue.withCtx(() => [
+      vue.createVNode(_component_ElButton, {
+        onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:visible", false))
+      }, {
+        default: vue.withCtx(() => _cache[3] || (_cache[3] = [
+          vue.createTextVNode(" \u53D6\u6D88 ")
+        ])),
+        _: 1,
+        __: [3]
+      }),
+      vue.createVNode(_component_ElButton, {
+        type: "primary",
+        onClick: $setup.handleSubmit
+      }, {
+        default: vue.withCtx(() => _cache[4] || (_cache[4] = [
+          vue.createTextVNode(" \u786E\u5B9A ")
+        ])),
+        _: 1,
+        __: [4]
+      })
+    ]),
+    default: vue.withCtx(() => [
+      vue.createVNode($setup["VkfForm"], vue.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__ */ _pluginVue_exportHelper._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__ */vue.defineComponent({
+  ...{
+    name: "VkfDialogInputCollection"
+  },
+  __name: "index",
+  props: props,
+  emits,
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
+  }) {
+    __expose();
+    const ElTable = elementPlus.ElTable;
+    const props = __props;
+    const emit = __emit;
+    const hasColAdd = vue.computed(() => {
+      return props.modules.includes("operations:add");
+    });
+    const formItemBindProps = formItem._VkfFormItemCtx.createBindProps(props);
+    const readonly = composables.useComputedReadonly(props);
+    const formData = vue.computed(() => {
+      if (!props.prop || props.prop.length === 0) {
+        return props.modelValue;
+      }
+      const data = {};
+      core.ensetData(data, {
+        k: props.prop,
+        v: props.modelValue
+      });
+      return data;
+    });
+    const fullColumns = vue.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 (_function.isCallable(column.templateProps)) {
+              formItemProps.templateProps = () => {
+                return column.templateProps(e.row);
+              };
+            }
+            return vue.createVNode(informationRenderer.VkfInformationRenderer, {
+              "source": [{
+                ...formItemProps,
+                ...column.createTemplateProps?.(e, formItemProps)
+              }]
+            }, null);
+          }
+        };
+      });
+    });
+    const buttonsColumn = vue.computed(() => ({
+      label: "\u64CD\u4F5C",
+      align: "center",
+      width: "85",
+      hidden: readonly.value || !props.splicable,
+      className: "vk-input-collection__buttons",
+      slots: ({
+        $index
+      }) => vue.createVNode(vue.Fragment, null, [hasColAdd.value && vue.createVNode(elementPlus.ElButton, {
+        "size": "small",
+        "icon": index.plus_default,
+        "type": "primary",
+        "link": true,
+        "onClick": () => handlePlus($index)
+      }, null), vue.createVNode(elementPlus.ElButton, {
+        "size": "small",
+        "icon": index.edit_default,
+        "type": "primary",
+        "link": true,
+        "onClick": () => handleEdit($index)
+      }, null), vue.createVNode(elementPlus.ElPopconfirm, {
+        "title": "\u786E\u5B9A\u5220\u9664\u5417\uFF1F",
+        "onConfirm": () => handleMinus($index),
+        "confirmButtonText": "\u5220\u9664",
+        "cancelButtonText": "\u53D6\u6D88"
+      }, {
+        reference: () => vue.createVNode(elementPlus.ElButton, {
+          "size": "small",
+          "icon": index.delete_default,
+          "type": "danger",
+          "link": true
+        }, null)
+      })])
+    }));
+    const allColumns = vue.computed(() => {
+      const data = [...fullColumns.value, buttonsColumn.value];
+      return data;
+    });
+    const cuState = vue.reactive({
+      type: _enum.CRUD.create,
+      index: 0,
+      // 新增时，表示在哪条点击的 +
+      data: {},
+      dialogVisible: false
+    });
+    const cuFormItems = vue.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.cloneDeep(props.modelValue);
+      data.splice(index, 1);
+      emit("update:modelValue", data);
+    }
+    function handlePlus(index) {
+      cuState.index = index;
+      cuState.data = cloneDeep.cloneDeep(props.defaultItemValue);
+      cuState.type = _enum.CRUD.create;
+      cuState.dialogVisible = true;
+    }
+    function handleEdit(index) {
+      const data = props.modelValue[index];
+      cuState.index = index;
+      cuState.data = cloneDeep.cloneDeep(data);
+      cuState.type = _enum.CRUD.update;
+      cuState.dialogVisible = true;
+    }
+    function handleDialogFormChange(data) {
+      const newData = cloneDeep.cloneDeep(props.modelValue);
+      if (cuState.type === _enum.CRUD.create) {
+        newData.splice(cuState.index + 1, 0, data);
+      } else if (cuState.type === _enum.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.cloneDeep(formData.value);
+      core.ensetData(data, e);
+      emit("update:modelValue", core.getValue(data, props.prop));
+    };
+    const __returned__ = {
+      ElTable,
+      props,
+      emit,
+      hasColAdd,
+      formItemBindProps,
+      readonly,
+      formData,
+      fullColumns,
+      buttonsColumn,
+      allColumns,
+      cuState,
+      cuFormItems,
+      handleMinus,
+      handlePlus,
+      handleEdit,
+      handleDialogFormChange,
+      handleFormSetData,
+      get Plus() {
+        return index.plus_default;
+      },
+      get Edit() {
+        return index.edit_default;
+      },
+      get VkfFormItem() {
+        return formItem.VkfFormItem;
+      },
+      get VkTableColumns() {
+        return tableColumns.VkTableColumns;
+      },
+      get ElButton() {
+        return elementPlus.ElButton;
+      },
+      TemplatesLayout,
+      get CRUD() {
+        return _enum.CRUD;
+      },
+      get VkAvatar() {
+        return avatar.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 vue.openBlock(), vue.createElementBlock(
+    vue.Fragment,
+    null,
+    [
+      vue.createVNode($setup["TemplatesLayout"], {
+        data: $setup.formData,
+        onSetData: $setup.handleFormSetData
+      }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(
+            $setup["VkfFormItem"],
+            vue.normalizeProps(vue.guardReactiveProps($setup.formItemBindProps)),
+            vue.createSlots({
+              default: vue.withCtx(() => [
+                !$setup.readonly && _ctx.splicable && !_ctx.labelActions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+                  vue.createVNode($setup["ElButton"], {
+                    type: "primary",
+                    onClick: _cache[1] || (_cache[1] = ($event) => $setup.handlePlus(-1))
+                  }, {
+                    default: vue.withCtx(() => _cache[5] || (_cache[5] = [
+                      vue.createTextVNode(" \u6DFB\u52A0 ")
+                    ])),
+                    _: 1,
+                    __: [5]
+                  })
+                ])) : vue.createCommentVNode("v-if", true),
+                vue.createVNode($setup["ElTable"], {
+                  data: _ctx.modelValue,
+                  class: "vkf-dialog-input-collection-table"
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode($setup["VkTableColumns"], { source: $setup.allColumns }, null, 8, ["source"])
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["data"])
+              ]),
+              _: 2
+              /* DYNAMIC */
+            }, [
+              !$setup.readonly && _ctx.splicable && _ctx.labelActions ? {
+                name: "labelActions",
+                fn: vue.withCtx(() => [
+                  vue.createVNode($setup["ElButton"], {
+                    size: "small",
+                    icon: $setup.Plus,
+                    onClick: _cache[0] || (_cache[0] = ($event) => $setup.handlePlus(-1))
+                  }, {
+                    default: vue.withCtx(() => _cache[4] || (_cache[4] = [
+                      vue.createTextVNode(" \u6DFB\u52A0 ")
+                    ])),
+                    _: 1,
+                    __: [4]
+                  }, 8, ["icon"])
+                ]),
+                key: "0"
+              } : void 0
+            ]),
+            1040
+            /* FULL_PROPS, DYNAMIC_SLOTS */
+          ),
+          vue.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: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_2, [
+                vue.createVNode($setup["VkAvatar"], {
+                  icon: $setup.cuState.type === $setup.CRUD.create ? $setup.Plus : $setup.Edit
+                }, null, 8, ["icon"]),
+                vue.createElementVNode(
+                  "span",
+                  _hoisted_3,
+                  vue.toDisplayString($setup.props.label),
+                  1
+                  /* TEXT */
+                )
+              ])
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["visible", "modelValue", "form-items", "dialog-form-props"])
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["data"]),
+      vue.renderSlot(_ctx.$slots, "default")
+    ],
+    64
+    /* STABLE_FRAGMENT */
+  );
+}
+var VkfDialogInputCollection = /* @__PURE__ */ _pluginVue_exportHelper._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);
+};
+
+exports.VkfDialogInputCollection = VkfDialogInputCollection;
+exports.__VkfDialogInputCollection = types;
+exports.default = VkfDialogInputCollection;

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

@@ -0,0 +1,21 @@
+.vkf-dialog-input-collection__dialog-header{
+  display: flex;
+  align-items: center;
+}
+.vkf-dialog-input-collection__dialog-title{
+  line-height: 40px;
+}
+.vkf-dialog-input-collection-options{
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+.vkf-dialog-input-collection-table{
+  margin-top: var(--gap-m, 8px);
+}
+.vkf-dialog-input-collection-table .vkf-form-item {
+  margin-bottom: 0;
+}
+.vk-input-collection__buttons .cell{
+  padding: 0;
+}

package/components/dialog-input-collection/index.d.ts

@@ -0,0 +1,4 @@
+import VkfDialogInputCollection from './src/index.vue';
+export * as __VkfDialogInputCollection from './src/types';
+export { VkfDialogInputCollection, };
+export default VkfDialogInputCollection;