@vunk/form 2.0.2 → 2.2.0

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

@@ -0,0 +1,256 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var formItem = require('@vunk/form/components/form-item');
+var vue = require('vue');
+var composables = require('@vunk/form/composables');
+var elementPlus = require('element-plus');
+var core = require('@vunk/core');
+var templatesDefault = require('@vunk/form/components/templates-default');
+var templateInstancesProvider = require('@vunk/form/components/template-instances-provider');
+var formItemRenderer = require('@vunk/form/components/form-item-renderer');
+var rendererData = require('@vunk/form/components/renderer-data');
+var cloneDeep = require('../cloneDeep.cjs');
+var _pluginVue_exportHelper = require('../_plugin-vue_export-helper.cjs');
+
+const props = {
+  ...formItem._VkfFormItemCtx.props,
+  formItems: {
+    type: Array,
+    default: () => []
+  },
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  readonly: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * @description 是否可以splice
+   */
+  splicable: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description card中的模板是否继承父级表单的模板
+   */
+  inheritTemplates: {
+    type: Boolean,
+    default: false
+  }
+};
+const emits = {};
+
+var _sfc_main = vue.defineComponent({
+  name: "VkfCardInputCollection",
+  components: {
+    VkfFormItem: formItem.VkfFormItem,
+    ElCard: elementPlus.ElCard,
+    ElButton: elementPlus.ElButton,
+    ElEmpty: elementPlus.ElEmpty,
+    VkfTemplateInstancesProvider: templateInstancesProvider.VkfTemplateInstancesProvider,
+    VkfTemplatesDefault: templatesDefault.VkfTemplatesDefault,
+    VkfRendererData: rendererData.VkfRendererData,
+    VkfFormItemRenderer: formItemRenderer.VkfFormItemRenderer
+  },
+  props,
+  emits,
+  setup(props2, { emit }) {
+    const formItemBindProps = formItem._VkfFormItemCtx.createBindProps(props2);
+    const readonly = composables.useComputedReadonly(props2);
+    const formData = vue.computed(() => {
+      if (!props2.prop || props2.prop.length === 0) {
+        return props2.modelValue;
+      }
+      const data = {};
+      core.ensetData(data, {
+        k: props2.prop,
+        v: props2.modelValue
+      });
+      return data;
+    });
+    function handlePlus(index) {
+      const data = cloneDeep.cloneDeep(props2.modelValue);
+      data.splice(index + 1, 0, {});
+      emit("update:modelValue", data);
+    }
+    function handleMinus(index) {
+      const data = cloneDeep.cloneDeep(props2.modelValue);
+      data.splice(index, 1);
+      emit("update:modelValue", data);
+    }
+    const addToFirst = () => {
+      emit("update:modelValue", [
+        {},
+        ...props2.modelValue
+      ]);
+    };
+    const handleFormSetData = (e) => {
+      const data = cloneDeep.cloneDeep(formData.value);
+      core.ensetData(data, e);
+      emit("update:modelValue", core.getValue(data, props2.prop));
+    };
+    function createTheFormItems(index) {
+      return props2.formItems.map((formItem) => {
+        return {
+          readonly: readonly.value,
+          ...formItem,
+          prop: [
+            props2.prop ?? [],
+            index,
+            formItem.prop
+          ].flat()
+        };
+      });
+    }
+    return {
+      formItemBindProps,
+      addToFirst,
+      readonly,
+      handleMinus,
+      handlePlus,
+      formData,
+      handleFormSetData,
+      createTheFormItems
+    };
+  }
+});
+
+const _hoisted_1 = {
+  key: 0,
+  class: "vkf-card-input-collection-options"
+};
+const _hoisted_2 = { class: "vkf-card-input-collection-card__footer" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_VkfTemplatesDefault = vue.resolveComponent("VkfTemplatesDefault");
+  const _component_ElButton = vue.resolveComponent("ElButton");
+  const _component_ElEmpty = vue.resolveComponent("ElEmpty");
+  const _component_VkfFormItemRenderer = vue.resolveComponent("VkfFormItemRenderer");
+  const _component_ElCard = vue.resolveComponent("ElCard");
+  const _component_VkfFormItem = vue.resolveComponent("VkfFormItem");
+  const _component_VkfRendererData = vue.resolveComponent("VkfRendererData");
+  const _component_VkfTemplateInstancesProvider = vue.resolveComponent("VkfTemplateInstancesProvider");
+  return vue.openBlock(), vue.createBlock(_component_VkfTemplateInstancesProvider, { "inherit-templates": _ctx.inheritTemplates }, {
+    default: vue.withCtx(() => [
+      !_ctx.inheritTemplates ? (vue.openBlock(), vue.createBlock(_component_VkfTemplatesDefault, { key: 0 })) : vue.createCommentVNode("v-if", true),
+      vue.createVNode(_component_VkfRendererData, {
+        data: _ctx.formData,
+        onSetData: _ctx.handleFormSetData
+      }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(
+            _component_VkfFormItem,
+            vue.mergeProps(_ctx.formItemBindProps, { class: "vkf-card-input-collection" }),
+            {
+              default: vue.withCtx(() => [
+                !_ctx.readonly && _ctx.splicable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+                  vue.createVNode(_component_ElButton, {
+                    type: "primary",
+                    onClick: _ctx.addToFirst
+                  }, {
+                    default: vue.withCtx(() => _cache[0] || (_cache[0] = [
+                      vue.createTextVNode(" \u6DFB\u52A0 ")
+                    ])),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["onClick"])
+                ])) : vue.createCommentVNode("v-if", true),
+                !_ctx.modelValue?.length ? (vue.openBlock(), vue.createBlock(_component_ElEmpty, {
+                  key: 1,
+                  class: "vkf-card-input-collection-empty"
+                }, {
+                  image: vue.withCtx(() => _cache[1] || (_cache[1] = [
+                    vue.createTextVNode(vue.toDisplayString(""))
+                  ])),
+                  _: 1
+                  /* STABLE */
+                })) : vue.createCommentVNode("v-if", true),
+                (vue.openBlock(true), vue.createElementBlock(
+                  vue.Fragment,
+                  null,
+                  vue.renderList(_ctx.modelValue, (item, index) => {
+                    return vue.openBlock(), vue.createBlock(
+                      _component_ElCard,
+                      {
+                        key: index,
+                        class: "vkf-card-input-collection-card",
+                        shadow: "hover"
+                      },
+                      vue.createSlots({
+                        default: vue.withCtx(() => [
+                          vue.createVNode(_component_VkfFormItemRenderer, {
+                            source: _ctx.createTheFormItems(index)
+                          }, null, 8, ["source"])
+                        ]),
+                        _: 2
+                        /* DYNAMIC */
+                      }, [
+                        !_ctx.readonly && _ctx.splicable ? {
+                          name: "footer",
+                          fn: vue.withCtx(() => [
+                            vue.createElementVNode("div", _hoisted_2, [
+                              vue.createVNode(_component_ElButton, {
+                                type: "primary",
+                                onClick: () => _ctx.handlePlus(index)
+                              }, {
+                                default: vue.withCtx(() => [..._cache[2] || (_cache[2] = [
+                                  vue.createTextVNode(" \u6DFB\u52A0 ")
+                                ])]),
+                                _: 2
+                                /* DYNAMIC */
+                              }, 1032, ["onClick"]),
+                              vue.createVNode(_component_ElButton, {
+                                type: "danger",
+                                onClick: () => _ctx.handleMinus(index)
+                              }, {
+                                default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
+                                  vue.createTextVNode(" \u5220\u9664 ")
+                                ])]),
+                                _: 2
+                                /* DYNAMIC */
+                              }, 1032, ["onClick"])
+                            ])
+                          ]),
+                          key: "0"
+                        } : void 0
+                      ]),
+                      1024
+                      /* DYNAMIC_SLOTS */
+                    );
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ]),
+              _: 1
+              /* STABLE */
+            },
+            16
+            /* FULL_PROPS */
+          )
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["data", "onSetData"])
+    ]),
+    _: 1
+    /* STABLE */
+  }, 8, ["inherit-templates"]);
+}
+var VkfCardInputCollection = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/card-input-collection/src/index.vue"]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkfCardInputCollection.install = (app) => {
+  app.component(VkfCardInputCollection.name || "VkfCardInputCollection", VkfCardInputCollection);
+};
+
+exports.VkfCardInputCollection = VkfCardInputCollection;
+exports.__VkfCardInputCollection = types;
+exports.default = VkfCardInputCollection;

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

@@ -0,0 +1,21 @@
+.vkf-card-input-collection-options{
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+.vkf-card-input-collection-card {
+  width: 100%;
+  margin-top: var(--gap-m, 8px);
+}
+.vkf-card-input-collection-card__footer{
+  display: flex;
+  justify-content: flex-end;
+}
+.vkf-card-input-collection-card .vkf-form-item:not(:last-child) {
+  margin-bottom: 18px;
+}
+.vkf-card-input-collection-empty{
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}

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

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

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

@@ -0,0 +1,250 @@
+import { _VkfFormItemCtx, VkfFormItem } from '@vunk/form/components/form-item';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, createVNode, mergeProps, createElementBlock, createTextVNode, toDisplayString, Fragment, renderList, createSlots, createElementVNode } from 'vue';
+import { useComputedReadonly } from '@vunk/form/composables';
+import { ElCard, ElButton, ElEmpty } from 'element-plus';
+import { ensetData, getValue } from '@vunk/core';
+import { VkfTemplatesDefault } from '@vunk/form/components/templates-default';
+import { VkfTemplateInstancesProvider } from '@vunk/form/components/template-instances-provider';
+import { VkfFormItemRenderer } from '@vunk/form/components/form-item-renderer';
+import { VkfRendererData } from '@vunk/form/components/renderer-data';
+import { c as cloneDeep } from '../cloneDeep.mjs';
+import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
+
+const props = {
+  ..._VkfFormItemCtx.props,
+  formItems: {
+    type: Array,
+    default: () => []
+  },
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  readonly: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * @description 是否可以splice
+   */
+  splicable: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description card中的模板是否继承父级表单的模板
+   */
+  inheritTemplates: {
+    type: Boolean,
+    default: false
+  }
+};
+const emits = {};
+
+var _sfc_main = defineComponent({
+  name: "VkfCardInputCollection",
+  components: {
+    VkfFormItem,
+    ElCard,
+    ElButton,
+    ElEmpty,
+    VkfTemplateInstancesProvider,
+    VkfTemplatesDefault,
+    VkfRendererData,
+    VkfFormItemRenderer
+  },
+  props,
+  emits,
+  setup(props2, { emit }) {
+    const formItemBindProps = _VkfFormItemCtx.createBindProps(props2);
+    const readonly = useComputedReadonly(props2);
+    const formData = computed(() => {
+      if (!props2.prop || props2.prop.length === 0) {
+        return props2.modelValue;
+      }
+      const data = {};
+      ensetData(data, {
+        k: props2.prop,
+        v: props2.modelValue
+      });
+      return data;
+    });
+    function handlePlus(index) {
+      const data = cloneDeep(props2.modelValue);
+      data.splice(index + 1, 0, {});
+      emit("update:modelValue", data);
+    }
+    function handleMinus(index) {
+      const data = cloneDeep(props2.modelValue);
+      data.splice(index, 1);
+      emit("update:modelValue", data);
+    }
+    const addToFirst = () => {
+      emit("update:modelValue", [
+        {},
+        ...props2.modelValue
+      ]);
+    };
+    const handleFormSetData = (e) => {
+      const data = cloneDeep(formData.value);
+      ensetData(data, e);
+      emit("update:modelValue", getValue(data, props2.prop));
+    };
+    function createTheFormItems(index) {
+      return props2.formItems.map((formItem) => {
+        return {
+          readonly: readonly.value,
+          ...formItem,
+          prop: [
+            props2.prop ?? [],
+            index,
+            formItem.prop
+          ].flat()
+        };
+      });
+    }
+    return {
+      formItemBindProps,
+      addToFirst,
+      readonly,
+      handleMinus,
+      handlePlus,
+      formData,
+      handleFormSetData,
+      createTheFormItems
+    };
+  }
+});
+
+const _hoisted_1 = {
+  key: 0,
+  class: "vkf-card-input-collection-options"
+};
+const _hoisted_2 = { class: "vkf-card-input-collection-card__footer" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_VkfTemplatesDefault = resolveComponent("VkfTemplatesDefault");
+  const _component_ElButton = resolveComponent("ElButton");
+  const _component_ElEmpty = resolveComponent("ElEmpty");
+  const _component_VkfFormItemRenderer = resolveComponent("VkfFormItemRenderer");
+  const _component_ElCard = resolveComponent("ElCard");
+  const _component_VkfFormItem = resolveComponent("VkfFormItem");
+  const _component_VkfRendererData = resolveComponent("VkfRendererData");
+  const _component_VkfTemplateInstancesProvider = resolveComponent("VkfTemplateInstancesProvider");
+  return openBlock(), createBlock(_component_VkfTemplateInstancesProvider, { "inherit-templates": _ctx.inheritTemplates }, {
+    default: withCtx(() => [
+      !_ctx.inheritTemplates ? (openBlock(), createBlock(_component_VkfTemplatesDefault, { key: 0 })) : createCommentVNode("v-if", true),
+      createVNode(_component_VkfRendererData, {
+        data: _ctx.formData,
+        onSetData: _ctx.handleFormSetData
+      }, {
+        default: withCtx(() => [
+          createVNode(
+            _component_VkfFormItem,
+            mergeProps(_ctx.formItemBindProps, { class: "vkf-card-input-collection" }),
+            {
+              default: withCtx(() => [
+                !_ctx.readonly && _ctx.splicable ? (openBlock(), createElementBlock("div", _hoisted_1, [
+                  createVNode(_component_ElButton, {
+                    type: "primary",
+                    onClick: _ctx.addToFirst
+                  }, {
+                    default: withCtx(() => _cache[0] || (_cache[0] = [
+                      createTextVNode(" \u6DFB\u52A0 ")
+                    ])),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["onClick"])
+                ])) : createCommentVNode("v-if", true),
+                !_ctx.modelValue?.length ? (openBlock(), createBlock(_component_ElEmpty, {
+                  key: 1,
+                  class: "vkf-card-input-collection-empty"
+                }, {
+                  image: withCtx(() => _cache[1] || (_cache[1] = [
+                    createTextVNode(toDisplayString(""))
+                  ])),
+                  _: 1
+                  /* STABLE */
+                })) : createCommentVNode("v-if", true),
+                (openBlock(true), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(_ctx.modelValue, (item, index) => {
+                    return openBlock(), createBlock(
+                      _component_ElCard,
+                      {
+                        key: index,
+                        class: "vkf-card-input-collection-card",
+                        shadow: "hover"
+                      },
+                      createSlots({
+                        default: withCtx(() => [
+                          createVNode(_component_VkfFormItemRenderer, {
+                            source: _ctx.createTheFormItems(index)
+                          }, null, 8, ["source"])
+                        ]),
+                        _: 2
+                        /* DYNAMIC */
+                      }, [
+                        !_ctx.readonly && _ctx.splicable ? {
+                          name: "footer",
+                          fn: withCtx(() => [
+                            createElementVNode("div", _hoisted_2, [
+                              createVNode(_component_ElButton, {
+                                type: "primary",
+                                onClick: () => _ctx.handlePlus(index)
+                              }, {
+                                default: withCtx(() => [..._cache[2] || (_cache[2] = [
+                                  createTextVNode(" \u6DFB\u52A0 ")
+                                ])]),
+                                _: 2
+                                /* DYNAMIC */
+                              }, 1032, ["onClick"]),
+                              createVNode(_component_ElButton, {
+                                type: "danger",
+                                onClick: () => _ctx.handleMinus(index)
+                              }, {
+                                default: withCtx(() => [..._cache[3] || (_cache[3] = [
+                                  createTextVNode(" \u5220\u9664 ")
+                                ])]),
+                                _: 2
+                                /* DYNAMIC */
+                              }, 1032, ["onClick"])
+                            ])
+                          ]),
+                          key: "0"
+                        } : void 0
+                      ]),
+                      1024
+                      /* DYNAMIC_SLOTS */
+                    );
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ]),
+              _: 1
+              /* STABLE */
+            },
+            16
+            /* FULL_PROPS */
+          )
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["data", "onSetData"])
+    ]),
+    _: 1
+    /* STABLE */
+  }, 8, ["inherit-templates"]);
+}
+var VkfCardInputCollection = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/card-input-collection/src/index.vue"]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkfCardInputCollection.install = (app) => {
+  app.component(VkfCardInputCollection.name || "VkfCardInputCollection", VkfCardInputCollection);
+};
+
+export { VkfCardInputCollection, types as __VkfCardInputCollection, VkfCardInputCollection as default };

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

@@ -0,0 +1,82 @@
+import { PropType } from 'vue';
+import { NormalObject } from '@vunk/shared';
+export declare const props: {
+    formItems: {
+        type: PropType<any[]>;
+        default: () => any[];
+    };
+    modelValue: {
+        type: PropType<NormalObject[]>;
+        default: () => any[];
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    /**
+     * @description 是否可以splice
+     */
+    splicable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @description card中的模板是否继承父级表单的模板
+     */
+    inheritTemplates: {
+        type: BooleanConstructor;
+        default: 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;
+    };
+    elRef: {
+        type: PropType<any>;
+        required: boolean;
+    };
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    formItemTip: {
+        type: StringConstructor;
+        default: any;
+    };
+    formItemTipClass: any;
+    labelTip: {
+        type: StringConstructor;
+        default: any;
+    };
+    label: StringConstructor;
+    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>;
+    prop: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | string[]) | (() => import("element-plus").FormItemProp) | ((new (...args: any[]) => string | string[]) | (() => import("element-plus").FormItemProp))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    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: {};