@vunk/form 2.13.1 → 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/form-item/index.cjs

@@ -93,8 +93,9 @@ var _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const _hoisted_1 = {
-  key: 1,
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = {
+  key: 2,
   class: "vkf-form-item-label__actions"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -128,15 +129,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     label: vue.withCtx((e) => [
       vue.renderSlot(_ctx.$slots, "label", vue.normalizeProps(vue.guardReactiveProps(e)), () => [
-        vue.createElementVNode(
+        e.label ? (vue.openBlock(), vue.createElementBlock(
           "span",
-          null,
+          _hoisted_1,
           vue.toDisplayString(e.label),
           1
           /* TEXT */
-        ),
+        )) : vue.createCommentVNode("v-if", true),
         $props.labelTip ? (vue.openBlock(), vue.createBlock($setup["ElTooltip"], {
-          key: 0,
+          key: 1,
           content: $props.labelTip
         }, {
           default: vue.withCtx(() => [
@@ -160,7 +161,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           _: 1
           /* STABLE */
         }, 8, ["content"])) : vue.createCommentVNode("v-if", true),
-        _ctx.$slots.labelActions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        _ctx.$slots.labelActions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
           vue.renderSlot(_ctx.$slots, "labelActions")
         ])) : vue.createCommentVNode("v-if", true)
       ])

package/components/form-item/index.css

@@ -30,3 +30,9 @@
 .vkf-form-item.is-empty-label .el-form-item__label:before{
   display: none;
 }
+.vkf-form-item.is-empty-label .el-form-item__label::after{
+  display: none;
+}
+.vkf-form-item .el-form-item__label:empty{
+  display: none;
+}

package/components/form-item/index.mjs

@@ -89,8 +89,9 @@ var _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1 = {
-  key: 1,
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = {
+  key: 2,
   class: "vkf-form-item-label__actions"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -124,15 +125,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     label: withCtx((e) => [
       renderSlot(_ctx.$slots, "label", normalizeProps(guardReactiveProps(e)), () => [
-        createElementVNode(
+        e.label ? (openBlock(), createElementBlock(
           "span",
-          null,
+          _hoisted_1,
           toDisplayString(e.label),
           1
           /* TEXT */
-        ),
+        )) : createCommentVNode("v-if", true),
         $props.labelTip ? (openBlock(), createBlock($setup["ElTooltip"], {
-          key: 0,
+          key: 1,
           content: $props.labelTip
         }, {
           default: withCtx(() => [
@@ -156,7 +157,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           _: 1
           /* STABLE */
         }, 8, ["content"])) : createCommentVNode("v-if", true),
-        _ctx.$slots.labelActions ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        _ctx.$slots.labelActions ? (openBlock(), createElementBlock("div", _hoisted_2, [
           renderSlot(_ctx.$slots, "labelActions")
         ])) : createCommentVNode("v-if", true)
       ])

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;
+}