@vunk/form 2.13.1 → 2.14.0

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

@@ -252,6 +252,12 @@
 .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;
+}
 
 .vkf-information-tag__tag{
   cursor: pointer;
@@ -277,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.1",
+  "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;