@vunk/form 2.13.2 → 2.14.0

package/components/fieldset/index.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 var elementPlus = require('element-plus');
+var _function = require('@vunk/shared/function');
 var _pluginVue_exportHelper = require('../_plugin-vue_export-helper.cjs');
 
 const props = {
@@ -73,7 +74,10 @@ var _sfc_main = vue.defineComponent({
   props,
   emits,
   setup(props2) {
-    const formContext = vue.inject(elementPlus.formContextKey);
+    const backupFormContext = {
+      addField: _function.noop
+    };
+    const formContext = vue.inject(elementPlus.formContextKey, backupFormContext);
     const labelWidth = vue.computed(() => {
       return props2.labelWidth ?? formContext.labelWidth;
     });
@@ -83,7 +87,7 @@ var _sfc_main = vue.defineComponent({
     vue.provide(
       elementPlus.formContextKey,
       vue.reactive({
-        ...vue.toRefs(formContext),
+        ...formContext === backupFormContext ? backupFormContext : vue.toRefs(formContext),
         labelWidth,
         labelPosition,
         ...useFormLabelWidth()

package/components/fieldset/index.mjs

@@ -1,5 +1,6 @@
 import { ref, computed, defineComponent, inject, provide, reactive, toRefs, openBlock, createElementBlock, renderSlot } from 'vue';
 import { formContextKey } from 'element-plus';
+import { noop } from '@vunk/shared/function';
 import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
 
 const props = {
@@ -69,7 +70,10 @@ var _sfc_main = defineComponent({
   props,
   emits,
   setup(props2) {
-    const formContext = inject(formContextKey);
+    const backupFormContext = {
+      addField: noop
+    };
+    const formContext = inject(formContextKey, backupFormContext);
     const labelWidth = computed(() => {
       return props2.labelWidth ?? formContext.labelWidth;
     });
@@ -79,7 +83,7 @@ var _sfc_main = defineComponent({
     provide(
       formContextKey,
       reactive({
-        ...toRefs(formContext),
+        ...formContext === backupFormContext ? backupFormContext : toRefs(formContext),
         labelWidth,
         labelPosition,
         ...useFormLabelWidth()

package/components/input-array/index.cjs

@@ -0,0 +1,287 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var formItem = require('@vunk/form/components/form-item');
+var elementPlus = require('element-plus');
+var index = require('../index.cjs');
+var composables = require('@vunk/form/composables');
+var formItemRenderer = require('@vunk/form/components/form-item-renderer');
+var templateInstancesProvider = require('@vunk/form/components/template-instances-provider');
+var templatesDefault = require('@vunk/form/components/templates-default');
+var fieldset = require('@vunk/form/components/fieldset');
+var core = require('@vunk/core');
+var rendererData = require('@vunk/form/components/renderer-data');
+var avatar = require('@vunk/plus/components/avatar');
+var cloneDeep = require('../cloneDeep.cjs');
+var _pluginVue_exportHelper = require('../_plugin-vue_export-helper.cjs');
+var formItemRendererTemplate = require('@vunk/form/components/form-item-renderer-template');
+require('../isObject.cjs');
+
+const props = {
+  ...formItem._VkfFormItemCtx.props,
+  modelValue: {
+    type: Array,
+    default: void 0
+  },
+  /**
+   * @description 是否可以 splice,  添加
+   */
+  splicable: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description 开启 form-item 的 label 上的操作区域, 在labelPosition为top时生效
+   */
+  labelActions: {
+    type: Boolean,
+    default: false
+  },
+  defaultItemValue: null,
+  source: {
+    type: Object,
+    default: () => ({})
+  },
+  defaultModelValue: {
+    type: Array,
+    default: void 0
+  },
+  /**
+   * @description 保留最后一行
+   */
+  keepLastRow: {
+    type: Boolean,
+    default: true
+  }
+};
+const emits = {
+  "update:modelValue": null
+};
+
+var _sfc_main$1 = /* @__PURE__ */vue.defineComponent({
+  ...{
+    name: "VkfInputArray"
+  },
+  __name: "index",
+  props: props,
+  emits,
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
+  }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const formItemBindProps = formItem._VkfFormItemCtx.createBindProps(props);
+    const readonly = composables.useComputedReadonly(props);
+    const addToFirst = () => {
+      emit("update:modelValue", [cloneDeep.cloneDeep(props.defaultItemValue), ...(props.modelValue ?? [])]);
+    };
+    if (props.modelValue === void 0 && props.defaultModelValue) {
+      emit("update:modelValue", props.defaultModelValue);
+    }
+    const hasMinus = vue.computed(() => {
+      if (!props.keepLastRow) {
+        return true;
+      }
+      return (props.modelValue ?? []).length > 1;
+    });
+    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 formItems = vue.computed(() => {
+      return props.modelValue?.map((v, index$1) => {
+        const prop = [props.prop ?? [], index$1, props.source.prop ?? []].flat();
+        return {
+          ...props.source,
+          prop,
+          formItemSlots: {
+            ...props.source.formItemSlots,
+            after: () => hasMinus.value && vue.createVNode(avatar.VkAvatar, vue.mergeProps({
+              "icon": index.delete_default,
+              "class": "vkf-input-array-delete",
+              "color": "var(--el-color-danger)"
+            }, {
+              onClick: () => handleMinus(index$1)
+            }), null)
+          }
+        };
+      });
+    });
+    function handleMinus(index) {
+      const data = cloneDeep.cloneDeep(props.modelValue) ?? [];
+      data.splice(index, 1);
+      emit("update:modelValue", data);
+    }
+    const handleFormSetData = e => {
+      const data = cloneDeep.cloneDeep(formData.value);
+      core.ensetData(data, e);
+      emit("update:modelValue", core.getValue(data, props.prop));
+    };
+    const __returned__ = {
+      props,
+      emit,
+      formItemBindProps,
+      readonly,
+      addToFirst,
+      hasMinus,
+      formData,
+      formItems,
+      handleMinus,
+      handleFormSetData,
+      get VkfFormItem() {
+        return formItem.VkfFormItem;
+      },
+      get ElButton() {
+        return elementPlus.ElButton;
+      },
+      get Plus() {
+        return index.plus_default;
+      },
+      get VkfFormItemRenderer() {
+        return formItemRenderer.VkfFormItemRenderer;
+      },
+      get VkfTemplateInstancesProvider() {
+        return templateInstancesProvider.VkfTemplateInstancesProvider;
+      },
+      get VkfTemplatesDefault() {
+        return templatesDefault.VkfTemplatesDefault;
+      },
+      get VkfFieldset() {
+        return fieldset.VkfFieldset;
+      },
+      get VkfRendererData() {
+        return rendererData.VkfRendererData;
+      }
+    };
+    Object.defineProperty(__returned__, "__isScriptSetup", {
+      enumerable: false,
+      value: true
+    });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = {
+  key: 0,
+  class: "vkf-input-array-options"
+};
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createBlock(
+    $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: $setup.addToFirst
+          }, {
+            default: vue.withCtx(() => _cache[1] || (_cache[1] = [
+              vue.createTextVNode(" \u6DFB\u52A0 ")
+            ])),
+            _: 1,
+            __: [1]
+          })
+        ])) : vue.createCommentVNode("v-if", true),
+        vue.createVNode($setup["VkfRendererData"], {
+          data: $setup.formData,
+          onSetData: $setup.handleFormSetData
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode($setup["VkfTemplateInstancesProvider"], null, {
+              placeholder: vue.withCtx(() => [
+                vue.createVNode($setup["VkfTemplatesDefault"])
+              ]),
+              default: vue.withCtx(() => [
+                vue.createVNode($setup["VkfFieldset"], { class: "vkf-input-array-fieldset" }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode($setup["VkfFormItemRenderer"], { source: $setup.formItems }, null, 8, ["source"])
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          _: 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: $setup.addToFirst
+          }, {
+            default: vue.withCtx(() => _cache[0] || (_cache[0] = [
+              vue.createTextVNode(" \u6DFB\u52A0 ")
+            ])),
+            _: 1,
+            __: [0]
+          }, 8, ["icon"])
+        ]),
+        key: "0"
+      } : void 0
+    ]),
+    1040
+    /* FULL_PROPS, DYNAMIC_SLOTS */
+  );
+}
+var VkfInputArray = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/input-array/src/index.vue"]]);
+
+var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "form-template",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const __returned__ = { get VkfFormItemRendererTemplate() {
+      return formItemRendererTemplate.VkfFormItemRendererTemplate;
+    }, Core: VkfInputArray };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createBlock($setup["VkfFormItemRendererTemplate"], { type: "VkfInputArray" }, {
+    default: vue.withCtx(({ input, value, props }) => [
+      vue.createVNode($setup["Core"], vue.mergeProps(props, {
+        "model-value": value,
+        "onUpdate:modelValue": input
+      }), null, 16, ["model-value", "onUpdate:modelValue"])
+    ]),
+    _: 1
+    /* STABLE */
+  });
+}
+var formTemplate = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/input-array/src/form-template.vue"]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkfInputArray.install = (app) => {
+  app.component(VkfInputArray.name || "VkfInputArray", VkfInputArray);
+};
+
+exports.VkfInputArray = VkfInputArray;
+exports.VkfInputArrayFormTemplate = formTemplate;
+exports.__VkfInputArray = types;
+exports.default = VkfInputArray;

package/components/input-array/index.css

@@ -0,0 +1,14 @@
+.vkf-input-array-delete{
+  cursor: pointer;
+}
+.vkf-input-array-options{
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+.vkf-input-array-fieldset > .el-form-item:not(:last-child) {
+  margin-bottom: 8px;
+}
+.vkf-input-array-fieldset .el-form-item__content{
+  flex-wrap: initial;
+}

package/components/input-array/index.mjs

@@ -0,0 +1,280 @@
+import { defineComponent, computed, createVNode, mergeProps, openBlock, createBlock, normalizeProps, guardReactiveProps, createSlots, withCtx, createElementBlock, createTextVNode, createCommentVNode } from 'vue';
+import { _VkfFormItemCtx, VkfFormItem } from '@vunk/form/components/form-item';
+import { ElButton } from 'element-plus';
+import { d as delete_default, p as plus_default } from '../index.mjs';
+import { useComputedReadonly } from '@vunk/form/composables';
+import { VkfFormItemRenderer } from '@vunk/form/components/form-item-renderer';
+import { VkfTemplateInstancesProvider } from '@vunk/form/components/template-instances-provider';
+import { VkfTemplatesDefault } from '@vunk/form/components/templates-default';
+import { VkfFieldset } from '@vunk/form/components/fieldset';
+import { ensetData, getValue } from '@vunk/core';
+import { VkfRendererData } from '@vunk/form/components/renderer-data';
+import { VkAvatar } from '@vunk/plus/components/avatar';
+import { c as cloneDeep } from '../cloneDeep.mjs';
+import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
+import { VkfFormItemRendererTemplate } from '@vunk/form/components/form-item-renderer-template';
+import '../isObject.mjs';
+
+const props = {
+  ..._VkfFormItemCtx.props,
+  modelValue: {
+    type: Array,
+    default: void 0
+  },
+  /**
+   * @description 是否可以 splice,  添加
+   */
+  splicable: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description 开启 form-item 的 label 上的操作区域, 在labelPosition为top时生效
+   */
+  labelActions: {
+    type: Boolean,
+    default: false
+  },
+  defaultItemValue: null,
+  source: {
+    type: Object,
+    default: () => ({})
+  },
+  defaultModelValue: {
+    type: Array,
+    default: void 0
+  },
+  /**
+   * @description 保留最后一行
+   */
+  keepLastRow: {
+    type: Boolean,
+    default: true
+  }
+};
+const emits = {
+  "update:modelValue": null
+};
+
+var _sfc_main$1 = /* @__PURE__ */defineComponent({
+  ...{
+    name: "VkfInputArray"
+  },
+  __name: "index",
+  props: props,
+  emits,
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
+  }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const formItemBindProps = _VkfFormItemCtx.createBindProps(props);
+    const readonly = useComputedReadonly(props);
+    const addToFirst = () => {
+      emit("update:modelValue", [cloneDeep(props.defaultItemValue), ...(props.modelValue ?? [])]);
+    };
+    if (props.modelValue === void 0 && props.defaultModelValue) {
+      emit("update:modelValue", props.defaultModelValue);
+    }
+    const hasMinus = computed(() => {
+      if (!props.keepLastRow) {
+        return true;
+      }
+      return (props.modelValue ?? []).length > 1;
+    });
+    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 formItems = computed(() => {
+      return props.modelValue?.map((v, index) => {
+        const prop = [props.prop ?? [], index, props.source.prop ?? []].flat();
+        return {
+          ...props.source,
+          prop,
+          formItemSlots: {
+            ...props.source.formItemSlots,
+            after: () => hasMinus.value && createVNode(VkAvatar, mergeProps({
+              "icon": delete_default,
+              "class": "vkf-input-array-delete",
+              "color": "var(--el-color-danger)"
+            }, {
+              onClick: () => handleMinus(index)
+            }), null)
+          }
+        };
+      });
+    });
+    function handleMinus(index) {
+      const data = cloneDeep(props.modelValue) ?? [];
+      data.splice(index, 1);
+      emit("update:modelValue", data);
+    }
+    const handleFormSetData = e => {
+      const data = cloneDeep(formData.value);
+      ensetData(data, e);
+      emit("update:modelValue", getValue(data, props.prop));
+    };
+    const __returned__ = {
+      props,
+      emit,
+      formItemBindProps,
+      readonly,
+      addToFirst,
+      hasMinus,
+      formData,
+      formItems,
+      handleMinus,
+      handleFormSetData,
+      get VkfFormItem() {
+        return VkfFormItem;
+      },
+      get ElButton() {
+        return ElButton;
+      },
+      get Plus() {
+        return plus_default;
+      },
+      get VkfFormItemRenderer() {
+        return VkfFormItemRenderer;
+      },
+      get VkfTemplateInstancesProvider() {
+        return VkfTemplateInstancesProvider;
+      },
+      get VkfTemplatesDefault() {
+        return VkfTemplatesDefault;
+      },
+      get VkfFieldset() {
+        return VkfFieldset;
+      },
+      get VkfRendererData() {
+        return VkfRendererData;
+      }
+    };
+    Object.defineProperty(__returned__, "__isScriptSetup", {
+      enumerable: false,
+      value: true
+    });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = {
+  key: 0,
+  class: "vkf-input-array-options"
+};
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock(
+    $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: $setup.addToFirst
+          }, {
+            default: withCtx(() => _cache[1] || (_cache[1] = [
+              createTextVNode(" \u6DFB\u52A0 ")
+            ])),
+            _: 1,
+            __: [1]
+          })
+        ])) : createCommentVNode("v-if", true),
+        createVNode($setup["VkfRendererData"], {
+          data: $setup.formData,
+          onSetData: $setup.handleFormSetData
+        }, {
+          default: withCtx(() => [
+            createVNode($setup["VkfTemplateInstancesProvider"], null, {
+              placeholder: withCtx(() => [
+                createVNode($setup["VkfTemplatesDefault"])
+              ]),
+              default: withCtx(() => [
+                createVNode($setup["VkfFieldset"], { class: "vkf-input-array-fieldset" }, {
+                  default: withCtx(() => [
+                    createVNode($setup["VkfFormItemRenderer"], { source: $setup.formItems }, null, 8, ["source"])
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["data"])
+      ]),
+      _: 2
+      /* DYNAMIC */
+    }, [
+      !$setup.readonly && _ctx.splicable && _ctx.labelActions ? {
+        name: "labelActions",
+        fn: withCtx(() => [
+          createVNode($setup["ElButton"], {
+            size: "small",
+            icon: $setup.Plus,
+            onClick: $setup.addToFirst
+          }, {
+            default: withCtx(() => _cache[0] || (_cache[0] = [
+              createTextVNode(" \u6DFB\u52A0 ")
+            ])),
+            _: 1,
+            __: [0]
+          }, 8, ["icon"])
+        ]),
+        key: "0"
+      } : void 0
+    ]),
+    1040
+    /* FULL_PROPS, DYNAMIC_SLOTS */
+  );
+}
+var VkfInputArray = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/input-array/src/index.vue"]]);
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "form-template",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const __returned__ = { get VkfFormItemRendererTemplate() {
+      return VkfFormItemRendererTemplate;
+    }, Core: VkfInputArray };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock($setup["VkfFormItemRendererTemplate"], { type: "VkfInputArray" }, {
+    default: withCtx(({ input, value, props }) => [
+      createVNode($setup["Core"], mergeProps(props, {
+        "model-value": value,
+        "onUpdate:modelValue": input
+      }), null, 16, ["model-value", "onUpdate:modelValue"])
+    ]),
+    _: 1
+    /* STABLE */
+  });
+}
+var formTemplate = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/input-array/src/form-template.vue"]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkfInputArray.install = (app) => {
+  app.component(VkfInputArray.name || "VkfInputArray", VkfInputArray);
+};
+
+export { VkfInputArray, formTemplate as VkfInputArrayFormTemplate, types as __VkfInputArray, VkfInputArray as default };

package/index.css

@@ -283,6 +283,21 @@
   user-select: text;
 }
 
+.vkf-input-array-delete{
+  cursor: pointer;
+}
+.vkf-input-array-options{
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+.vkf-input-array-fieldset > .el-form-item:not(:last-child) {
+  margin-bottom: 8px;
+}
+.vkf-input-array-fieldset .el-form-item__content{
+  flex-wrap: initial;
+}
+
 .vkf-input-collection-options{
   width: 100%;
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vunk/form",
-  "version": "2.13.2",
+  "version": "2.14.0",
   "description": "",
   "main": "index.esm.js",
   "scripts": {
@@ -200,6 +200,11 @@
       "types": "./components/input-collection/index.d.ts",
       "require": "./components/input-collection/index.cjs"
     },
+    "./components/input-array": {
+      "import": "./components/input-array/index.mjs",
+      "types": "./components/input-array/index.d.ts",
+      "require": "./components/input-array/index.cjs"
+    },
     "./components/input": {
       "import": "./components/input/index.mjs",
       "types": "./components/input/index.d.ts",
@@ -362,6 +367,9 @@
     "./components/input-collection/index.css": {
       "import": "./components/input-collection/index.css"
     },
+    "./components/input-array/index.css": {
+      "import": "./components/input-array/index.css"
+    },
     "./components/information-templates-default/index.css": {
       "import": "./components/information-templates-default/index.css"
     },

package/components/api-tables-select/index.d.ts

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