ll-plus 2.7.15 → 2.7.17

package/lib/packages/components/key-value/src/components/key-value-item.vue2.js

@@ -23,7 +23,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const attrs = vue.useAttrs();
     const bem = createNamespace.createNamespace("key-value");
     const innerValue = vue.ref(props.value);
-    const form = vue.ref();
+    const formRef = vue.ref();
     const getKeyType = vue.computed(() => {
       const option = props.keyType;
       return option;
@@ -41,27 +41,34 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const getValueDisabled = vue.computed(() => {
       return props.disabledValue?.includes(props.idx) || props.disabled || getValueType.value?.disabled;
     });
-    const getDeleteDisabled = vue.computed(() => {
-      return props.disabledDelete?.includes(props.idx) || props.disabled;
-    });
     const hasValue = vue.computed(() => {
       return innerValue.value["key"] || innerValue.value["key"] === 0 || innerValue.value["value"];
     });
+    const getDeleteDisabled = vue.computed(() => {
+      return props.disabledDelete?.includes(props.idx) || props.disabled || props.values.length === 1 && !hasValue.value;
+    });
     const handleDelete = () => {
       emits("delete");
     };
     const handleChange = async () => {
       innerValue.value["value"] = null;
-      await form.value?.clearValidate();
+      await formRef.value?.clearValidate();
     };
     const validate = async () => {
-      return await form.value?.validate();
+      await vue.nextTick();
+      try {
+        await formRef.value?.validate();
+        return Promise.resolve();
+      } catch (error) {
+        console.log({ error }, props.idx);
+        return Promise.reject();
+      }
     };
     const resetFields = async () => {
-      return await form.value?.resetFields();
+      await formRef.value?.resetFields();
     };
     const clearValidate = async (namePath) => {
-      return await form.value?.clearValidate(namePath);
+      await formRef.value?.clearValidate(namePath);
     };
     vue.watch(
       innerValue,
@@ -92,8 +99,8 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       const _component_a_popconfirm = vue.resolveComponent("a-popconfirm");
       const _component_ll_form = vue.resolveComponent("ll-form");
       return vue.openBlock(), vue.createBlock(_component_ll_form, {
-        ref_key: "form",
-        ref: form,
+        ref_key: "formRef",
+        ref: formRef,
         "form-columns": vue.unref(keyValueItem.formColumns),
         "form-data": props.value,
         "form-options": vue.unref(keyValueItem.formOptions)
@@ -194,7 +201,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     name: "value"
                   }, {
                     default: vue.withCtx(() => [
-                      vue.renderSlot(_ctx.$slots, "value-warapper", vue.normalizeProps(vue.guardReactiveProps(getValueType.value)), () => [
+                      vue.renderSlot(_ctx.$slots, "value-wrapper", vue.normalizeProps(vue.guardReactiveProps(getValueType.value)), () => [
                         (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(`ll-${getValueType.value.type}`), vue.mergeProps({
                           value: innerValue.value["value"],
                           "onUpdate:value": _cache[2] || (_cache[2] = ($event) => innerValue.value["value"] = $event),
@@ -222,57 +229,21 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 2
                 /* CLASS */
               ),
-              props.showDelete ? (vue.openBlock(), vue.createElementBlock(
-                vue.Fragment,
-                { key: 2 },
-                [
-                  hasValue.value ? (vue.openBlock(), vue.createBlock(_component_a_popconfirm, {
-                    key: 0,
-                    title: "\u786E\u5B9A\u8981\u79FB\u9664\u5417?",
-                    "ok-text": "\u786E\u8BA4",
-                    "cancel-text": "\u53D6\u6D88",
-                    placement: "topRight",
-                    "overlay-class-name": vue.unref(bem).m("popconfirm"),
-                    "get-popup-container": (trigger) => trigger.parentNode,
-                    "destroy-tooltip-on-hide": "",
-                    onConfirm: handleDelete
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createElementVNode(
-                        "div",
-                        {
-                          class: vue.normalizeClass(vue.unref(bem).m("delete")),
-                          style: vue.normalizeStyle({
-                            "margin-top": !!vue.unref(attrs)["key-label"] || !!vue.unref(attrs)["value-label"] ? "26px" : "0px"
-                          })
-                        },
-                        [
-                          vue.createVNode(_component_ll_button, {
-                            type: "link",
-                            disabled: getDeleteDisabled.value
-                          }, {
-                            default: vue.withCtx(() => [
-                              vue.renderSlot(_ctx.$slots, "delete-icon", {}, () => [
-                                vue.createVNode(_component_ll_icon, {
-                                  "icon-name": "icon-remove",
-                                  class: "delete"
-                                })
-                              ])
-                            ]),
-                            _: 3
-                            /* FORWARDED */
-                          }, 8, ["disabled"])
-                        ],
-                        6
-                        /* CLASS, STYLE */
-                      )
-                    ]),
-                    _: 3
-                    /* FORWARDED */
-                  }, 8, ["overlay-class-name", "get-popup-container"])) : (vue.openBlock(), vue.createElementBlock(
+              hasValue.value ? (vue.openBlock(), vue.createBlock(_component_a_popconfirm, {
+                key: 2,
+                title: "\u786E\u5B9A\u8981\u79FB\u9664\u5417?",
+                "ok-text": "\u786E\u8BA4",
+                "cancel-text": "\u53D6\u6D88",
+                placement: "topRight",
+                "overlay-class-name": vue.unref(bem).m("popconfirm"),
+                "get-popup-container": (trigger) => trigger.parentNode,
+                "destroy-tooltip-on-hide": "",
+                onConfirm: handleDelete
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createElementVNode(
                     "div",
                     {
-                      key: 1,
                       class: vue.normalizeClass(vue.unref(bem).m("delete")),
                       style: vue.normalizeStyle({
                         "margin-top": !!vue.unref(attrs)["key-label"] || !!vue.unref(attrs)["value-label"] ? "26px" : "0px"
@@ -281,8 +252,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     [
                       vue.createVNode(_component_ll_button, {
                         type: "link",
-                        disabled: getDeleteDisabled.value,
-                        onClick: handleDelete
+                        disabled: getDeleteDisabled.value
                       }, {
                         default: vue.withCtx(() => [
                           vue.renderSlot(_ctx.$slots, "delete-icon", {}, () => [
@@ -298,11 +268,40 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     ],
                     6
                     /* CLASS, STYLE */
-                  ))
+                  )
+                ]),
+                _: 3
+                /* FORWARDED */
+              }, 8, ["overlay-class-name", "get-popup-container"])) : (vue.openBlock(), vue.createElementBlock(
+                "div",
+                {
+                  key: 3,
+                  class: vue.normalizeClass(vue.unref(bem).m("delete")),
+                  style: vue.normalizeStyle({
+                    "margin-top": !!vue.unref(attrs)["key-label"] || !!vue.unref(attrs)["value-label"] ? "26px" : "0px"
+                  })
+                },
+                [
+                  vue.createVNode(_component_ll_button, {
+                    type: "link",
+                    disabled: getDeleteDisabled.value,
+                    onClick: handleDelete
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.renderSlot(_ctx.$slots, "delete-icon", {}, () => [
+                        vue.createVNode(_component_ll_icon, {
+                          "icon-name": "icon-remove",
+                          class: "delete"
+                        })
+                      ])
+                    ]),
+                    _: 3
+                    /* FORWARDED */
+                  }, 8, ["disabled"])
                 ],
-                64
-                /* STABLE_FRAGMENT */
-              )) : vue.createCommentVNode("v-if", true)
+                6
+                /* CLASS, STYLE */
+              ))
             ],
             2
             /* CLASS */

package/lib/packages/components/key-value/src/components/key-value-item.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"key-value-item.vue2.js","sources":["../../../../../../../packages/components/key-value/src/components/key-value-item.vue"],"sourcesContent":["<template>\n  <ll-form\n    ref=\"form\"\n    :form-columns=\"formColumns\"\n    :form-data=\"props.value\"\n    :form-options=\"formOptions\"\n  >\n    <template #formItem=\"{ item }\">\n      <template v-if=\"item.key === 'other'\">\n        <div :class=\"bem.e('item')\">\n          <div v-if=\"props.keyValueType !== 'single'\" :class=\"bem.m('left')\">\n            <ll-form-item\n              :label=\"attrs['key-label']\"\n              :label-col=\"{\n                span: 24\n              }\"\n              :rules=\"getKeyType.rules || []\"\n              name=\"key\"\n            >\n              <slot name=\"key\">\n                <ll-select\n                  v-if=\"!isEmpty(props.keyTypes)\"\n                  v-model:value=\"innerValue['key']\"\n                  :options=\"props.keyTypes\"\n                  :disabled=\"getKeyDisabled\"\n                  style=\"width: 100%\"\n                  placeholder=\"请选择\"\n                  allow-clear\n                  @change=\"handleChange\"\n                />\n                <component\n                  :is=\"`ll-${getKeyType.type}`\"\n                  v-else\n                  v-model:value=\"innerValue['key']\"\n                  v-bind=\"getKeyType\"\n                  :disabled=\"getKeyDisabled\"\n                  style=\"width: 100%\"\n                >\n                  <template\n                    v-for=\"_item in Object.keys($slots)\"\n                    :key=\"_item\"\n                    #[_item]=\"data\"\n                  >\n                    <slot\n                      :name=\"_item\"\n                      v-bind=\"data || {}\"\n                      content=\"key\"\n                    ></slot>\n                  </template>\n                </component>\n              </slot>\n            </ll-form-item>\n          </div>\n\n          <div\n            v-if=\"props.keyValueType !== 'single'\"\n            :class=\"bem.m('separator')\"\n            :style=\"{\n              'margin-top':\n                !!attrs['key-label'] || !!attrs['value-label'] ? '26px' : '0px'\n            }\"\n          >\n            <slot name=\"separator\">~</slot>\n          </div>\n\n          <div :class=\"bem.m('right')\">\n            <ll-form-item\n              :label=\"attrs['value-label']\"\n              :label-col=\"{\n                span: 24\n              }\"\n              :rules=\"getValueType.rules || []\"\n              name=\"value\"\n            >\n              <slot name=\"value-warapper\" v-bind=\"getValueType\">\n                <component\n                  :is=\"`ll-${getValueType.type}`\"\n                  v-model:value=\"innerValue['value']\"\n                  :disabled=\"getValueDisabled\"\n                  style=\"width: 100%\"\n                  v-bind=\"getValueType\"\n                >\n                  <template\n                    v-for=\"_item in Object.keys($slots)\"\n                    :key=\"_item\"\n                    #[_item]=\"data\"\n                  >\n                    <slot\n                      :name=\"_item\"\n                      v-bind=\"data || {}\"\n                      content=\"value\"\n                    ></slot>\n                  </template>\n                </component>\n              </slot>\n            </ll-form-item>\n          </div>\n          <template v-if=\"props.showDelete\">\n            <template v-if=\"hasValue\">\n              <a-popconfirm\n                title=\"确定要移除吗?\"\n                ok-text=\"确认\"\n                cancel-text=\"取消\"\n                placement=\"topRight\"\n                :overlay-class-name=\"bem.m('popconfirm')\"\n                :get-popup-container=\"(trigger: Element) => trigger.parentNode\"\n                destroy-tooltip-on-hide\n                @confirm=\"handleDelete\"\n              >\n                <div\n                  :class=\"bem.m('delete')\"\n                  :style=\"{\n                    'margin-top':\n                      !!attrs['key-label'] || !!attrs['value-label']\n                        ? '26px'\n                        : '0px'\n                  }\"\n                >\n                  <ll-button type=\"link\" :disabled=\"getDeleteDisabled\">\n                    <slot name=\"delete-icon\">\n                      <ll-icon icon-name=\"icon-remove\" class=\"delete\" />\n                    </slot>\n                  </ll-button>\n                </div>\n              </a-popconfirm>\n            </template>\n            <div\n              v-else\n              :class=\"bem.m('delete')\"\n              :style=\"{\n                'margin-top':\n                  !!attrs['key-label'] || !!attrs['value-label']\n                    ? '26px'\n                    : '0px'\n              }\"\n            >\n              <ll-button\n                type=\"link\"\n                :disabled=\"getDeleteDisabled\"\n                @click=\"handleDelete\"\n              >\n                <slot name=\"delete-icon\">\n                  <ll-icon icon-name=\"icon-remove\" class=\"delete\" />\n                </slot>\n              </ll-button>\n            </div>\n          </template>\n        </div>\n      </template>\n    </template>\n  </ll-form>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, useAttrs, watch, nextTick } from 'vue'\nimport { isEmpty } from 'lodash-es'\nimport { createNamespace } from '@ll-plus/utils'\nimport type { FormInstance } from '@ll-plus/components'\nimport {\n  keyValueItemProps,\n  keyValueItemEmits,\n  formColumns,\n  formOptions\n} from '../config'\nimport { type FormColumn } from '@ll-plus/components'\nimport type { NamePath } from 'ant-design-vue/es/form/interface'\n\ndefineOptions({\n  name: 'LlKeyValueItem'\n})\n\nconst props = defineProps(keyValueItemProps)\nconst emits = defineEmits(keyValueItemEmits)\n\nconst attrs = useAttrs()\nconst bem = createNamespace('key-value')\nconst innerValue = ref(props.value)\n\nconst form = ref<FormInstance | null>()\n\nconst getKeyType = computed<FormColumn>(() => {\n  const option = props.keyType\n  return option\n})\nconst getValueType = computed<FormColumn>(() => {\n  let option = props.valueType\n  if (innerValue.value['key'] && !isEmpty(props.keyValueTypeDict)) {\n    option = props.keyValueTypeDict[innerValue.value['key']]\n  }\n  return option\n})\n\nconst getKeyDisabled = computed(() => {\n  return (\n    props.disabledKey?.includes(props.idx) ||\n    props.disabled ||\n    getKeyType.value?.disabled\n  )\n})\n\nconst getValueDisabled = computed(() => {\n  return (\n    props.disabledValue?.includes(props.idx) ||\n    props.disabled ||\n    getValueType.value?.disabled\n  )\n})\n\nconst getDeleteDisabled = computed(() => {\n  return props.disabledDelete?.includes(props.idx) || props.disabled\n})\n\nconst hasValue = computed(() => {\n  return (\n    innerValue.value['key'] ||\n    innerValue.value['key'] === 0 ||\n    innerValue.value['value']\n  )\n})\n\nconst handleDelete = () => {\n  emits('delete')\n}\n\nconst handleChange = async () => {\n  innerValue.value['value'] = null\n  await form.value?.clearValidate()\n}\n\nconst validate = async () => {\n  return await form.value?.validate()\n}\n\nconst resetFields = async () => {\n  return await form.value?.resetFields()\n}\nconst clearValidate = async (namePath?: NamePath[]) => {\n  return await form.value?.clearValidate(namePath)\n}\n\nwatch(\n  innerValue,\n  async val => {\n    await nextTick().then(() => {\n      try {\n        emits('update:value', val)\n        emits('change')\n      } catch (error) {\n        console.error(error)\n      }\n    })\n  },\n  {\n    deep: true\n  }\n)\n\ndefineExpose({\n  validate,\n  resetFields,\n  clearValidate\n})\n</script>\n\n<style scoped></style>\n"],"names":["useAttrs","createNamespace","ref","computed","isEmpty","watch","nextTick"],"mappings":"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"}
+{"version":3,"file":"key-value-item.vue2.js","sources":["../../../../../../../packages/components/key-value/src/components/key-value-item.vue"],"sourcesContent":["<template>\n  <ll-form\n    ref=\"formRef\"\n    :form-columns=\"formColumns\"\n    :form-data=\"props.value\"\n    :form-options=\"formOptions\"\n  >\n    <template #formItem=\"{ item }\">\n      <template v-if=\"item.key === 'other'\">\n        <div :class=\"bem.e('item')\">\n          <div v-if=\"props.keyValueType !== 'single'\" :class=\"bem.m('left')\">\n            <ll-form-item\n              :label=\"attrs['key-label']\"\n              :label-col=\"{\n                span: 24\n              }\"\n              :rules=\"getKeyType.rules || []\"\n              name=\"key\"\n            >\n              <slot name=\"key\">\n                <ll-select\n                  v-if=\"!isEmpty(props.keyTypes)\"\n                  v-model:value=\"innerValue['key']\"\n                  :options=\"props.keyTypes\"\n                  :disabled=\"getKeyDisabled\"\n                  style=\"width: 100%\"\n                  placeholder=\"请选择\"\n                  allow-clear\n                  @change=\"handleChange\"\n                />\n                <component\n                  :is=\"`ll-${getKeyType.type}`\"\n                  v-else\n                  v-model:value=\"innerValue['key']\"\n                  v-bind=\"getKeyType\"\n                  :disabled=\"getKeyDisabled\"\n                  style=\"width: 100%\"\n                >\n                  <template\n                    v-for=\"_item in Object.keys($slots)\"\n                    :key=\"_item\"\n                    #[_item]=\"data\"\n                  >\n                    <slot\n                      :name=\"_item\"\n                      v-bind=\"data || {}\"\n                      content=\"key\"\n                    ></slot>\n                  </template>\n                </component>\n              </slot>\n            </ll-form-item>\n          </div>\n\n          <div\n            v-if=\"props.keyValueType !== 'single'\"\n            :class=\"bem.m('separator')\"\n            :style=\"{\n              'margin-top':\n                !!attrs['key-label'] || !!attrs['value-label'] ? '26px' : '0px'\n            }\"\n          >\n            <slot name=\"separator\">~</slot>\n          </div>\n\n          <div :class=\"bem.m('right')\">\n            <ll-form-item\n              :label=\"attrs['value-label']\"\n              :label-col=\"{\n                span: 24\n              }\"\n              :rules=\"getValueType.rules || []\"\n              name=\"value\"\n            >\n              <slot name=\"value-wrapper\" v-bind=\"getValueType\">\n                <component\n                  :is=\"`ll-${getValueType.type}`\"\n                  v-model:value=\"innerValue['value']\"\n                  :disabled=\"getValueDisabled\"\n                  style=\"width: 100%\"\n                  v-bind=\"getValueType\"\n                >\n                  <template\n                    v-for=\"_item in Object.keys($slots)\"\n                    :key=\"_item\"\n                    #[_item]=\"data\"\n                  >\n                    <slot\n                      :name=\"_item\"\n                      v-bind=\"data || {}\"\n                      content=\"value\"\n                    ></slot>\n                  </template>\n                </component>\n              </slot>\n            </ll-form-item>\n          </div>\n          <template v-if=\"hasValue\">\n            <a-popconfirm\n              title=\"确定要移除吗?\"\n              ok-text=\"确认\"\n              cancel-text=\"取消\"\n              placement=\"topRight\"\n              :overlay-class-name=\"bem.m('popconfirm')\"\n              :get-popup-container=\"(trigger: Element) => trigger.parentNode\"\n              destroy-tooltip-on-hide\n              @confirm=\"handleDelete\"\n            >\n              <div\n                :class=\"bem.m('delete')\"\n                :style=\"{\n                  'margin-top':\n                    !!attrs['key-label'] || !!attrs['value-label']\n                      ? '26px'\n                      : '0px'\n                }\"\n              >\n                <ll-button type=\"link\" :disabled=\"getDeleteDisabled\">\n                  <slot name=\"delete-icon\">\n                    <ll-icon icon-name=\"icon-remove\" class=\"delete\" />\n                  </slot>\n                </ll-button>\n              </div>\n            </a-popconfirm>\n          </template>\n          <div\n            v-else\n            :class=\"bem.m('delete')\"\n            :style=\"{\n              'margin-top':\n                !!attrs['key-label'] || !!attrs['value-label'] ? '26px' : '0px'\n            }\"\n          >\n            <ll-button\n              type=\"link\"\n              :disabled=\"getDeleteDisabled\"\n              @click=\"handleDelete\"\n            >\n              <slot name=\"delete-icon\">\n                <ll-icon icon-name=\"icon-remove\" class=\"delete\" />\n              </slot>\n            </ll-button>\n          </div>\n        </div>\n      </template>\n    </template>\n  </ll-form>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, useAttrs, watch, nextTick } from 'vue'\nimport { isEmpty } from 'lodash-es'\nimport { createNamespace } from '@ll-plus/utils'\nimport type { FormInstance } from '@ll-plus/components'\nimport {\n  keyValueItemProps,\n  keyValueItemEmits,\n  formColumns,\n  formOptions\n} from '../config'\nimport { type FormColumn } from '@ll-plus/components'\nimport type { NamePath } from 'ant-design-vue/es/form/interface'\n\ndefineOptions({\n  name: 'LlKeyValueItem'\n})\n\nconst props = defineProps(keyValueItemProps)\nconst emits = defineEmits(keyValueItemEmits)\n\nconst attrs = useAttrs()\nconst bem = createNamespace('key-value')\nconst innerValue = ref(props.value)\n\nconst formRef = ref<FormInstance | null>()\n\nconst getKeyType = computed<FormColumn>(() => {\n  const option = props.keyType\n  return option\n})\nconst getValueType = computed<FormColumn>(() => {\n  let option = props.valueType\n  if (innerValue.value['key'] && !isEmpty(props.keyValueTypeDict)) {\n    option = props.keyValueTypeDict[innerValue.value['key']]\n  }\n  return option\n})\n\nconst getKeyDisabled = computed(() => {\n  return (\n    props.disabledKey?.includes(props.idx) ||\n    props.disabled ||\n    getKeyType.value?.disabled\n  )\n})\n\nconst getValueDisabled = computed(() => {\n  return (\n    props.disabledValue?.includes(props.idx) ||\n    props.disabled ||\n    getValueType.value?.disabled\n  )\n})\n\nconst hasValue = computed(() => {\n  return (\n    innerValue.value['key'] ||\n    innerValue.value['key'] === 0 ||\n    innerValue.value['value']\n  )\n})\n\nconst getDeleteDisabled = computed(() => {\n  return (\n    props.disabledDelete?.includes(props.idx) ||\n    props.disabled ||\n    (props.values.length === 1 && !hasValue.value)\n  )\n})\n\nconst handleDelete = () => {\n  emits('delete')\n}\n\nconst handleChange = async () => {\n  innerValue.value['value'] = null\n  await formRef.value?.clearValidate()\n}\n\nconst validate = async () => {\n  await nextTick()\n  try {\n    await formRef.value?.validate()\n    return Promise.resolve()\n  } catch (error) {\n    console.log({ error }, props.idx)\n    return Promise.reject()\n  }\n}\n\nconst resetFields = async () => {\n  await formRef.value?.resetFields()\n}\n\nconst clearValidate = async (namePath?: NamePath[]) => {\n  await formRef.value?.clearValidate(namePath)\n}\n\nwatch(\n  innerValue,\n  async val => {\n    await nextTick().then(() => {\n      try {\n        emits('update:value', val)\n        emits('change')\n      } catch (error) {\n        console.error(error)\n      }\n    })\n  },\n  {\n    deep: true\n  }\n)\n\ndefineExpose({\n  validate,\n  resetFields,\n  clearValidate\n})\n</script>\n\n<style scoped></style>\n"],"names":["useAttrs","createNamespace","ref","computed","isEmpty","nextTick","watch"],"mappings":"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"}

package/lib/packages/components/key-value/src/config/key-value-item.js

@@ -31,34 +31,59 @@ const formColumns = [
 ];
 const keyValueItemProps = runtime.buildProps({
   disabled: {
-    type: Boolean
+    type: Boolean,
+    default: false
+  },
+  values: {
+    type: runtime.definePropType(Array),
+    default: () => [
+      {
+        key: null,
+        value: null,
+        guid: ""
+      }
+    ]
   },
   disabledValue: {
-    type: runtime.definePropType(Array)
+    type: runtime.definePropType(Array),
+    default: () => []
   },
   disabledKey: {
-    type: runtime.definePropType(Array)
+    type: runtime.definePropType(Array),
+    default: () => []
   },
   disabledDelete: {
-    type: runtime.definePropType(Array)
+    type: runtime.definePropType(Array),
+    default: () => []
   },
   keyValueType: {
-    type: runtime.definePropType(String)
+    type: runtime.definePropType(String),
+    default: "doubt"
   },
   keyType: {
-    type: runtime.definePropType(Object)
+    type: runtime.definePropType(Object),
+    default: () => ({
+      type: "input",
+      placeholder: "\u8BF7\u8F93\u5165Key"
+    })
   },
   keyTypes: {
-    type: runtime.definePropType(Array)
+    type: runtime.definePropType(Array),
+    default: () => []
   },
   valueType: {
-    type: runtime.definePropType(Object)
+    type: runtime.definePropType(Object),
+    default: () => ({
+      type: "input",
+      placeholder: "\u8BF7\u8F93\u5165Value"
+    })
   },
   value: {
     type: runtime.definePropType(Object),
     default: () => ({
       key: "",
-      value: ""
+      value: "",
+      guid: ""
     })
   },
   idx: {
@@ -69,9 +94,9 @@ const keyValueItemProps = runtime.buildProps({
     type: Object,
     default: () => ({})
   },
-  showDelete: {
+  keepLast: {
     type: Boolean,
-    default: true
+    default: false
   }
 });
 const keyValueItemEmits = {

package/lib/packages/components/key-value/src/config/key-value-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"key-value-item.js","sources":["../../../../../../../packages/components/key-value/src/config/key-value-item.ts"],"sourcesContent":["import { buildProps, definePropType } from '@ll-plus/utils'\nimport type { FormProps } from 'ant-design-vue'\nimport type { FormColumn } from '@ll-plus/components'\nimport type { KeyType } from './'\n\nexport const typeRules = [\n  {\n    trigger: ['blur', 'change'],\n    message: '此字段是必需的',\n    validator: async (_rule: any, value: any) => {\n      if (!value) {\n        return Promise.reject(new Error('此字段是必需的'))\n      } else {\n        return Promise.resolve()\n      }\n    }\n  }\n]\nexport const formOptions = {\n  layout: 'horizontal',\n  labelAlign: 'left'\n} as FormProps\n\nexport const formColumns = [\n  {\n    key: 'other',\n    labelCol: {\n      span: 24\n    }\n  }\n]\n\nexport interface KeyValueItem {\n  key: any | null\n  value: any | null\n}\n\nexport const keyValueItemProps = buildProps({\n  disabled: {\n    type: Boolean\n  },\n  disabledValue: {\n    type: definePropType<number[]>(Array)\n  },\n  disabledKey: {\n    type: definePropType<number[]>(Array)\n  },\n  disabledDelete: {\n    type: definePropType<number[]>(Array)\n  },\n  keyValueType: {\n    type: definePropType<'single' | 'doubt'>(String)\n  },\n  keyType: {\n    type: definePropType<FormColumn>(Object)\n  },\n  keyTypes: {\n    type: definePropType<KeyType[]>(Array)\n  },\n  valueType: {\n    type: definePropType<FormColumn>(Object)\n  },\n  value: {\n    type: definePropType<KeyValueItem>(Object),\n    default: () => ({\n      key: '',\n      value: ''\n    })\n  },\n  idx: {\n    type: Number,\n    required: true\n  },\n  keyValueTypeDict: {\n    type: Object,\n    default: () => ({})\n  },\n  showDelete: {\n    type: Boolean,\n    default: true\n  }\n} as const)\n\nexport const keyValueItemEmits = {\n  delete: () => true,\n  change: () => true,\n  'update:value': (value: KeyValueItem) => !!value\n}\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;AAKO,MAAM,SAAY,GAAA;AAAA,EACvB;AAAA,IACE,OAAA,EAAS,CAAC,MAAA,EAAQ,QAAQ,CAAA;AAAA,IAC1B,OAAS,EAAA,4CAAA;AAAA,IACT,SAAA,EAAW,OAAO,KAAA,EAAY,KAAe,KAAA;AAC3C,MAAA,IAAI,CAAC,KAAO,EAAA;AACV,QAAA,OAAO,OAAQ,CAAA,MAAA,CAAO,IAAI,KAAA,CAAM,4CAAS,CAAC,CAAA,CAAA;AAAA,OACrC,MAAA;AACL,QAAA,OAAO,QAAQ,OAAQ,EAAA,CAAA;AAAA,OACzB;AAAA,KACF;AAAA,GACF;AACF,EAAA;AACO,MAAM,WAAc,GAAA;AAAA,EACzB,MAAQ,EAAA,YAAA;AAAA,EACR,UAAY,EAAA,MAAA;AACd,EAAA;AAEO,MAAM,WAAc,GAAA;AAAA,EACzB;AAAA,IACE,GAAK,EAAA,OAAA;AAAA,IACL,QAAU,EAAA;AAAA,MACR,IAAM,EAAA,EAAA;AAAA,KACR;AAAA,GACF;AACF,EAAA;AAOO,MAAM,oBAAoBA,kBAAW,CAAA;AAAA,EAC1C,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,OAAA;AAAA,GACR;AAAA,EACA,aAAe,EAAA;AAAA,IACb,IAAA,EAAMC,uBAAyB,KAAK,CAAA;AAAA,GACtC;AAAA,EACA,WAAa,EAAA;AAAA,IACX,IAAA,EAAMA,uBAAyB,KAAK,CAAA;AAAA,GACtC;AAAA,EACA,cAAgB,EAAA;AAAA,IACd,IAAA,EAAMA,uBAAyB,KAAK,CAAA;AAAA,GACtC;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,IAAA,EAAMA,uBAAmC,MAAM,CAAA;AAAA,GACjD;AAAA,EACA,OAAS,EAAA;AAAA,IACP,IAAA,EAAMA,uBAA2B,MAAM,CAAA;AAAA,GACzC;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAA,EAAMA,uBAA0B,KAAK,CAAA;AAAA,GACvC;AAAA,EACA,SAAW,EAAA;AAAA,IACT,IAAA,EAAMA,uBAA2B,MAAM,CAAA;AAAA,GACzC;AAAA,EACA,KAAO,EAAA;AAAA,IACL,IAAA,EAAMA,uBAA6B,MAAM,CAAA;AAAA,IACzC,SAAS,OAAO;AAAA,MACd,GAAK,EAAA,EAAA;AAAA,MACL,KAAO,EAAA,EAAA;AAAA,KACT,CAAA;AAAA,GACF;AAAA,EACA,GAAK,EAAA;AAAA,IACH,IAAM,EAAA,MAAA;AAAA,IACN,QAAU,EAAA,IAAA;AAAA,GACZ;AAAA,EACA,gBAAkB,EAAA;AAAA,IAChB,IAAM,EAAA,MAAA;AAAA,IACN,OAAA,EAAS,OAAO,EAAC,CAAA;AAAA,GACnB;AAAA,EACA,UAAY,EAAA;AAAA,IACV,IAAM,EAAA,OAAA;AAAA,IACN,OAAS,EAAA,IAAA;AAAA,GACX;AACF,CAAU,EAAA;AAEH,MAAM,iBAAoB,GAAA;AAAA,EAC/B,QAAQ,MAAM,IAAA;AAAA,EACd,QAAQ,MAAM,IAAA;AAAA,EACd,cAAgB,EAAA,CAAC,KAAwB,KAAA,CAAC,CAAC,KAAA;AAC7C;;;;;;;;"}
+{"version":3,"file":"key-value-item.js","sources":["../../../../../../../packages/components/key-value/src/config/key-value-item.ts"],"sourcesContent":["import { buildProps, definePropType } from '@ll-plus/utils'\nimport type { FormProps } from 'ant-design-vue'\nimport type { FormColumn } from '@ll-plus/components'\nimport type { IKeyType, IKeyValueItem } from './key-value'\n\n// 定义 typeRules 常量\nexport const typeRules: Array<{\n  trigger: string[]\n  message: string\n  validator: (_rule: any, value: any) => Promise<void>\n}> = [\n  {\n    trigger: ['blur', 'change'],\n    message: '此字段是必需的',\n    validator: async (_rule: any, value: any): Promise<void> => {\n      if (!value) {\n        return Promise.reject(new Error('此字段是必需的'))\n      } else {\n        return Promise.resolve()\n      }\n    }\n  }\n]\n\n// 定义 formOptions 常量\nexport const formOptions: FormProps = {\n  layout: 'horizontal',\n  labelAlign: 'left'\n}\n\n// 定义 formColumns 常量\nexport const formColumns: Array<{\n  key: string\n  labelCol: {\n    span: number\n  }\n}> = [\n  {\n    key: 'other',\n    labelCol: {\n      span: 24\n    }\n  }\n]\n\n// 定义 keyValueItemProps 常量\nexport const keyValueItemProps = buildProps({\n  disabled: {\n    type: Boolean,\n    default: false\n  },\n  values: {\n    type: definePropType<IKeyValueItem[]>(Array),\n    default: (): IKeyValueItem[] => [\n      {\n        key: null,\n        value: null,\n        guid: ''\n      }\n    ]\n  },\n  disabledValue: {\n    type: definePropType<number[]>(Array),\n    default: (): number[] => []\n  },\n  disabledKey: {\n    type: definePropType<number[]>(Array),\n    default: (): number[] => []\n  },\n  disabledDelete: {\n    type: definePropType<number[]>(Array),\n    default: (): number[] => []\n  },\n  keyValueType: {\n    type: definePropType<'single' | 'doubt'>(String),\n    default: 'doubt'\n  },\n  keyType: {\n    type: definePropType<FormColumn>(Object),\n    default: (): FormColumn => ({\n      type: 'input',\n      placeholder: '请输入Key'\n    })\n  },\n  keyTypes: {\n    type: definePropType<IKeyType[]>(Array),\n    default: (): IKeyType[] => []\n  },\n  valueType: {\n    type: definePropType<FormColumn>(Object),\n    default: (): FormColumn => ({\n      type: 'input',\n      placeholder: '请输入Value'\n    })\n  },\n  value: {\n    type: definePropType<IKeyValueItem>(Object),\n    default: (): IKeyValueItem => ({\n      key: '',\n      value: '',\n      guid: ''\n    })\n  },\n  idx: {\n    type: Number,\n    required: true\n  },\n  keyValueTypeDict: {\n    type: Object as () => Record<string, string>,\n    default: (): Record<string, string> => ({})\n  },\n  keepLast: {\n    type: Boolean,\n    default: false\n  }\n} as const)\n\n// 定义 keyValueItemEmits 常量\nexport const keyValueItemEmits = {\n  delete: (): boolean => true,\n  change: (): boolean => true,\n  'update:value': (value: IKeyValueItem): boolean => !!value\n}\n"],"names":["buildProps","definePropType"],"mappings":"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"}

package/lib/packages/components/key-value/src/config/key-value.js

@@ -1,17 +1,19 @@
 'use strict';
 
 require('../../../../utils/index.js');
+var data = require('../../../../utils/data.js');
 var runtime = require('../../../../utils/props/runtime.js');
 
 "use strict";
 const getKeyValueItem = () => ({
   key: null,
-  value: null
+  value: null,
+  guid: data.guid()
 });
 const keyValueProps = runtime.buildProps({
   value: {
     type: runtime.definePropType(Array),
-    default: () => [{ key: "", value: "" }]
+    default: () => [{ key: null, value: null }]
   },
   loading: {
     type: Boolean,

package/lib/packages/components/key-value/src/config/key-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"key-value.js","sources":["../../../../../../../packages/components/key-value/src/config/key-value.ts"],"sourcesContent":["import { buildProps, definePropType } from '@ll-plus/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport { type FormColumn } from '@ll-plus/components'\nimport type { KeyValueItem } from './key-value-item'\nimport type KeyValue from '../key-value.vue'\n\nexport interface KeyType {\n  label: string\n  value: string\n  option: FormColumn\n}\n\ntype KeyValueType = 'single' | 'doubt'\n\nexport const getKeyValueItem = () => ({\n  key: null,\n  value: null\n})\n\nexport const keyValueProps = buildProps({\n  value: {\n    type: definePropType<KeyValueItem[]>(Array),\n    default: () => [{ key: '', value: '' }]\n  },\n  loading: {\n    type: Boolean,\n    default: false\n  },\n  disabled: {\n    type: Boolean,\n    default: false\n  },\n  keyLabel: {\n    type: String,\n    default: ''\n  },\n  valueLabel: {\n    type: String,\n    default: ''\n  },\n  addText: {\n    type: String,\n    default: '添加'\n  },\n  keyValueType: {\n    type: definePropType<KeyValueType>(String),\n    default: 'doubt'\n  },\n  keyType: {\n    type: definePropType<FormColumn>(Object),\n    default: () => ({\n      type: 'input',\n      placeholder: '请输入Key'\n    })\n  },\n  keyTypes: {\n    type: definePropType<KeyType[]>(Array),\n    default: () => []\n  },\n  valueType: {\n    type: definePropType<FormColumn>(Object),\n    default: () => ({\n      type: 'input',\n      placeholder: '请输入Value'\n    })\n  },\n  disabledValue: {\n    type: definePropType<number[]>(Array),\n    default: () => []\n  },\n  disabledKey: {\n    type: definePropType<number[]>(Array),\n    default: () => []\n  },\n  disabledDelete: {\n    type: definePropType<number[]>(Array),\n    default: () => []\n  },\n  disabledAdd: {\n    type: Boolean,\n    default: false\n  },\n  validate: {\n    type: Boolean,\n    default: false\n  },\n  keepLast: {\n    type: Boolean,\n    default: true\n  }\n} as const)\n\nexport interface KeyValueAddEmits {\n  index: number\n  item: KeyValueItem\n  value: KeyValueItem[]\n}\n\nexport const keyValueEmits = {\n  change: (value: KeyValueItem[]) => !!value,\n  add: (params: KeyValueAddEmits) => !!params,\n  delete: (index: number) => typeof index === 'number',\n  'update:value': (value: KeyValueItem[]) => !!value\n}\n\n// props\nexport type KeyValueProps = ExtractPropTypes<typeof keyValueProps>\n// emits\nexport type KeyValueEmits = typeof keyValueEmits\n// instance\nexport type KeyValueInstance = InstanceType<typeof KeyValue>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;AAeO,MAAM,kBAAkB,OAAO;AAAA,EACpC,GAAK,EAAA,IAAA;AAAA,EACL,KAAO,EAAA,IAAA;AACT,CAAA,EAAA;AAEO,MAAM,gBAAgBA,kBAAW,CAAA;AAAA,EACtC,KAAO,EAAA;AAAA,IACL,IAAA,EAAMC,uBAA+B,KAAK,CAAA;AAAA,IAC1C,OAAA,EAAS,MAAM,CAAC,EAAE,KAAK,EAAI,EAAA,KAAA,EAAO,IAAI,CAAA;AAAA,GACxC;AAAA,EACA,OAAS,EAAA;AAAA,IACP,IAAM,EAAA,OAAA;AAAA,IACN,OAAS,EAAA,KAAA;AAAA,GACX;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,OAAA;AAAA,IACN,OAAS,EAAA,KAAA;AAAA,GACX;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,EAAA;AAAA,GACX;AAAA,EACA,UAAY,EAAA;AAAA,IACV,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,EAAA;AAAA,GACX;AAAA,EACA,OAAS,EAAA;AAAA,IACP,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,cAAA;AAAA,GACX;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,IAAA,EAAMA,uBAA6B,MAAM,CAAA;AAAA,IACzC,OAAS,EAAA,OAAA;AAAA,GACX;AAAA,EACA,OAAS,EAAA;AAAA,IACP,IAAA,EAAMA,uBAA2B,MAAM,CAAA;AAAA,IACvC,SAAS,OAAO;AAAA,MACd,IAAM,EAAA,OAAA;AAAA,MACN,WAAa,EAAA,uBAAA;AAAA,KACf,CAAA;AAAA,GACF;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAA,EAAMA,uBAA0B,KAAK,CAAA;AAAA,IACrC,OAAA,EAAS,MAAM,EAAC;AAAA,GAClB;AAAA,EACA,SAAW,EAAA;AAAA,IACT,IAAA,EAAMA,uBAA2B,MAAM,CAAA;AAAA,IACvC,SAAS,OAAO;AAAA,MACd,IAAM,EAAA,OAAA;AAAA,MACN,WAAa,EAAA,yBAAA;AAAA,KACf,CAAA;AAAA,GACF;AAAA,EACA,aAAe,EAAA;AAAA,IACb,IAAA,EAAMA,uBAAyB,KAAK,CAAA;AAAA,IACpC,OAAA,EAAS,MAAM,EAAC;AAAA,GAClB;AAAA,EACA,WAAa,EAAA;AAAA,IACX,IAAA,EAAMA,uBAAyB,KAAK,CAAA;AAAA,IACpC,OAAA,EAAS,MAAM,EAAC;AAAA,GAClB;AAAA,EACA,cAAgB,EAAA;AAAA,IACd,IAAA,EAAMA,uBAAyB,KAAK,CAAA;AAAA,IACpC,OAAA,EAAS,MAAM,EAAC;AAAA,GAClB;AAAA,EACA,WAAa,EAAA;AAAA,IACX,IAAM,EAAA,OAAA;AAAA,IACN,OAAS,EAAA,KAAA;AAAA,GACX;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,OAAA;AAAA,IACN,OAAS,EAAA,KAAA;AAAA,GACX;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,OAAA;AAAA,IACN,OAAS,EAAA,IAAA;AAAA,GACX;AACF,CAAU,EAAA;AAQH,MAAM,aAAgB,GAAA;AAAA,EAC3B,MAAQ,EAAA,CAAC,KAA0B,KAAA,CAAC,CAAC,KAAA;AAAA,EACrC,GAAK,EAAA,CAAC,MAA6B,KAAA,CAAC,CAAC,MAAA;AAAA,EACrC,MAAQ,EAAA,CAAC,KAAkB,KAAA,OAAO,KAAU,KAAA,QAAA;AAAA,EAC5C,cAAgB,EAAA,CAAC,KAA0B,KAAA,CAAC,CAAC,KAAA;AAC/C;;;;;;"}
+{"version":3,"file":"key-value.js","sources":["../../../../../../../packages/components/key-value/src/config/key-value.ts"],"sourcesContent":["import { buildProps, definePropType, guid } from '@ll-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport { type FormColumn } from '@ll-plus/components'\nimport type KeyValue from '../key-value.vue'\n\n// 定义 IKeyType 接口\nexport interface IKeyType {\n  label: string\n  value: string\n  option: FormColumn\n}\n\n// 定义 IKeyValueReturn 接口\nexport interface IKeyValueReturn {\n  key: any | null\n  value: any | null\n}\n\n// 定义 IKeyValueItem 类型\nexport type IKeyValueItem = IKeyValueReturn & { guid: string }\n\n// 定义 IKeyValueType 类型\ntype IKeyValueType = 'single' | 'doubt'\n\n// 定义 getKeyValueItem 函数\nexport const getKeyValueItem = (): IKeyValueItem => ({\n  key: null,\n  value: null,\n  guid: guid()\n})\n\n// 定义 keyValueProps 常量\nexport const keyValueProps = buildProps({\n  value: {\n    type: definePropType<IKeyValueReturn[]>(Array),\n    default: (): IKeyValueReturn[] => [{ key: null, value: null }]\n  },\n  loading: {\n    type: Boolean,\n    default: false\n  },\n  disabled: {\n    type: Boolean,\n    default: false\n  },\n  keyLabel: {\n    type: String,\n    default: ''\n  },\n  valueLabel: {\n    type: String,\n    default: ''\n  },\n  addText: {\n    type: String,\n    default: '添加'\n  },\n  keyValueType: {\n    type: definePropType<IKeyValueType>(String),\n    default: 'doubt'\n  },\n  keyType: {\n    type: definePropType<FormColumn>(Object),\n    default: (): FormColumn => ({\n      type: 'input',\n      placeholder: '请输入Key'\n    })\n  },\n  keyTypes: {\n    type: definePropType<IKeyType[]>(Array),\n    default: (): IKeyType[] => []\n  },\n  valueType: {\n    type: definePropType<FormColumn>(Object),\n    default: (): FormColumn => ({\n      type: 'input',\n      placeholder: '请输入Value'\n    })\n  },\n  disabledValue: {\n    type: definePropType<number[]>(Array),\n    default: (): number[] => []\n  },\n  disabledKey: {\n    type: definePropType<number[]>(Array),\n    default: (): number[] => []\n  },\n  disabledDelete: {\n    type: definePropType<number[]>(Array),\n    default: (): number[] => []\n  },\n  disabledAdd: {\n    type: Boolean,\n    default: false\n  },\n  validate: {\n    type: Boolean,\n    default: false\n  },\n  keepLast: {\n    type: Boolean,\n    default: true\n  }\n} as const)\n\n// 定义 IKeyValueAddEmits 接口\nexport interface IKeyValueAddEmits {\n  index: number\n  item: IKeyValueItem\n  value: IKeyValueItem[]\n}\n\n// 定义 keyValueEmits 常量\nexport const keyValueEmits = {\n  change: (value: IKeyValueReturn[]): boolean => !!value,\n  add: (params: IKeyValueAddEmits): boolean => !!params,\n  delete: (index: number): boolean => typeof index === 'number',\n  'update:value': (value: IKeyValueReturn[]): boolean => !!value\n}\n\n// 定义 KeyValueProps 类型\nexport type KeyValueProps = ExtractPropTypes<typeof keyValueProps>\n// 定义 KeyValueEmits 类型\nexport type KeyValueEmits = typeof keyValueEmits\n// 定义 KeyValueInstance 类型\nexport type KeyValueInstance = InstanceType<typeof KeyValue>\n"],"names":["guid","buildProps","definePropType"],"mappings":"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"}

package/lib/packages/components/key-value/src/key-value.vue2.js

@@ -9,6 +9,7 @@ require('./config/index.js');
 var keyValueItem = require('./components/key-value-item.vue.js');
 var keyValue = require('./config/key-value.js');
 var createNamespace = require('../../../utils/create-namespace.js');
+var data = require('../../../utils/data.js');
 
 "use strict";
 var _sfc_main = /* @__PURE__ */ vue.defineComponent({
@@ -21,69 +22,132 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const emits = __emit;
     const bem = createNamespace.createNamespace("key-value");
     const formItemContext = antDesignVue.Form.useInjectFormItemContext();
-    const innerValue = vue.ref([]);
-    const keyValueItems = vue.ref([]);
+    const innerValue = vue.ref(
+      !props.value || props.value && !props.value.length ? [{ key: null, value: null, guid: data.guid() }] : props.value.map((e) => {
+        return {
+          ...e,
+          guid: data.guid()
+        };
+      })
+    );
+    const keyValueItems = vue.ref({});
+    const setKeyValueItems = (el, type) => {
+      if (el) {
+        keyValueItems.value[type] = el;
+      }
+    };
     const keyValueTypeDict = vue.computed(() => {
       const obj = {};
-      props.keyTypes.map((e) => {
+      props.keyTypes.forEach((e) => {
         obj[e.value] = e.option;
       });
       return obj;
     });
     const validate = async () => {
       await vue.nextTick();
-      return Promise.all(
-        keyValueItems.value.filter((e) => !!e).map((e) => e.validate())
+      const validationPromises = Object.values(keyValueItems.value).map(
+        async (item) => {
+          try {
+            await item.validate();
+            return { item, valid: true };
+          } catch (error) {
+            console.error("Validation failed for item:", item, error);
+            return { item, valid: false, error };
+          }
+        }
       );
+      const validationResults = await Promise.all(validationPromises);
+      const allValid = validationResults.every((result) => result.valid);
+      const errors = validationResults.filter((result) => !result.valid);
+      if (!allValid) {
+        console.log("Validation errors:", errors);
+        return { valid: false, errors };
+      }
+      return { valid: true };
     };
     const resetFields = async () => {
       await vue.nextTick();
-      return Promise.all(
-        keyValueItems.value.filter((e) => !!e).map((e) => e.resetFields())
-      );
+      for (const i of Object.values(keyValueItems.value)) {
+        if (i) {
+          i.resetFields();
+        }
+      }
     };
     const clearValidate = async () => {
       await vue.nextTick();
-      return Promise.all(
-        keyValueItems.value.filter((e) => !!e).map((e) => e.clearValidate())
-      );
+      for (const i of Object.values(keyValueItems.value)) {
+        if (i) {
+          i.clearValidate();
+        }
+      }
     };
     const handleAddItem = async () => {
-      const valid = await validate();
-      if (props.validate && !valid)
-        return false;
+      const { valid } = await validate();
+      if (!valid)
+        return;
       innerValue.value.push(keyValue.getKeyValueItem());
       emits("add", {
         index: innerValue.value.length - 1,
         item: innerValue.value[innerValue.value.length - 1],
         value: innerValue.value
       });
-      handleChange();
     };
     const handleDelete = (idx) => {
-      innerValue.value.splice(idx, 1);
-      emits("delete", idx);
-      handleChange();
-    };
-    const handleChange = () => {
-      try {
-        formItemContext.onFieldChange();
-        emits("change", innerValue.value);
-        emits("update:value", innerValue.value);
-      } catch (error) {
-        console.error(error);
+      if (innerValue.value.length === 1) {
+        innerValue.value = [{ key: null, value: null, guid: data.guid() }];
+      } else {
+        innerValue.value.splice(idx, 1);
+        emits("delete", idx);
       }
     };
+    const getValue = (val) => {
+      return val.filter((e) => data.hasValue(e.key) || data.hasValue(e.value)).map((e) => ({
+        key: e.key,
+        value: e.value
+      }));
+    };
     vue.watch(
       () => props.value,
       (n) => {
-        innerValue.value = n && n.length > 0 ? n : props.keepLast ? [{ key: null, value: null }] : n;
+        if (!n || n && !n.length)
+          return;
+        const copyInnerValue = getValue(innerValue.value);
+        const copyPropsValue = getValue(n);
+        if (data.deepCompare(copyInnerValue, copyPropsValue))
+          return;
+        innerValue.value = [
+          ...n && n.length > 0 ? n : props.keepLast ? [{ key: null, value: null, guid: data.guid() }] : n
+        ].map((e) => {
+          return {
+            ...e,
+            guid: data.guid()
+          };
+        });
       },
       {
         immediate: true,
         deep: true
       }
     );
+    vue.watch(
+      () => innerValue.value,
+      (val) => {
+        const copyInnerValue = getValue(val);
+        const copyPropsValue = getValue(props.value);
+        if (data.deepCompare(copyInnerValue, copyPropsValue))
+          return;
+        try {
+          formItemContext.onFieldChange();
+          emits("change", copyInnerValue);
+          emits("update:value", copyInnerValue);
+        } catch (error) {
+          console.error(error);
+        }
+      },
+      {
+        deep: true
+      }
+    );
     __expose({
       validate,
       resetFields,
@@ -115,9 +179,9 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     null,
                     vue.renderList(innerValue.value, (_item, idx) => {
                       return vue.openBlock(), vue.createBlock(keyValueItem.default, {
-                        key: _item,
+                        key: _item.guid,
                         ref_for: true,
-                        ref: (el) => keyValueItems.value[idx] = el,
+                        ref: (el) => setKeyValueItems(el, _item.guid),
                         value: innerValue.value[idx],
                         "onUpdate:value": ($event) => innerValue.value[idx] = $event,
                         idx,
@@ -128,13 +192,13 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         "key-type": props.keyType,
                         "key-types": props.keyTypes,
                         "value-type": props.valueType,
+                        values: innerValue.value,
                         disabled: props.disabled,
                         "disabled-value": props.disabledValue,
                         "disabled-key": props.disabledKey,
                         "disabled-delete": props.disabledDelete,
-                        "show-delete": props.keepLast ? idx > 0 : true,
-                        onDelete: ($event) => handleDelete(idx),
-                        onChange: handleChange
+                        "keep-last": props.keepLast,
+                        onDelete: ($event) => handleDelete(idx)
                       }, vue.createSlots({
                         _: 2
                         /* DYNAMIC */
@@ -147,7 +211,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                             ])
                           };
                         })
-                      ]), 1032, ["value", "onUpdate:value", "idx", "key-label", "value-label", "key-value-type-dict", "key-value-type", "key-type", "key-types", "value-type", "disabled", "disabled-value", "disabled-key", "disabled-delete", "show-delete", "onDelete"]);
+                      ]), 1032, ["value", "onUpdate:value", "idx", "key-label", "value-label", "key-value-type-dict", "key-value-type", "key-type", "key-types", "value-type", "values", "disabled", "disabled-value", "disabled-key", "disabled-delete", "keep-last", "onDelete"]);
                     }),
                     128
                     /* KEYED_FRAGMENT */