@vunk/form 2.9.2 → 2.10.0

package/components/editable-text/index.cjs

@@ -0,0 +1,266 @@
+'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 form = require('@vunk/form');
+var composables = require('@vunk/core/composables');
+var formItemRenderer = require('@vunk/form/components/form-item-renderer');
+var templatesDefault = require('@vunk/form/components/templates-default');
+var rendererData = require('@vunk/form/components/renderer-data');
+var core = require('@vunk/core');
+var avatar = require('@vunk/plus/components/avatar');
+var index = require('../index2.cjs');
+var _pluginVue_exportHelper = require('../_plugin-vue_export-helper.cjs');
+
+const props = {
+  ...formItem._VkfFormItemCtx.props,
+  /**
+   * @description model;
+   */
+  modelValue: null,
+  iconSize: {
+    type: Number,
+    default: 22
+  },
+  readonly: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   *  @description model; Whether the text is editable.
+   *  @default false
+   */
+  editable: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * @description 编辑主体
+   * @default __VkfInput.Source
+   */
+  edit: {
+    type: Object,
+    default: void 0
+  }
+};
+const emits = {
+  "update:editable": null,
+  "update:modelValue": null
+};
+
+var _sfc_main = /* @__PURE__ */vue.defineComponent({
+  ...{
+    name: "VkfEditableText"
+  },
+  __name: "index",
+  props: props,
+  emits,
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
+  }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const id = vue.useId();
+    const editable = composables.useModelComputed({
+      key: "editable",
+      default: false
+    }, props, emit);
+    const prop = vue.computed(() => {
+      return props.prop ?? id;
+    });
+    const formItemBindProps = formItem._VkfFormItemCtx.createBindProps(props, []);
+    const readonly = form.useComputedReadonly(props);
+    const formItemContainerRef = vue.ref();
+    const formItemRef = vue.ref();
+    const editSource = vue.computed(() => {
+      const source = {
+        templateType: "VkfInput",
+        ...formItemBindProps.value,
+        inline: true,
+        onBlur: handleCheck,
+        ...props.edit,
+        prop: prop.value,
+        elRef: e => {
+          props.edit?.elRef?.(e);
+          formItemRef.value = e;
+        }
+      };
+      return [source];
+    });
+    const rendererData$1 = vue.computed(() => {
+      const data = {};
+      core.setData(data, {
+        k: prop.value,
+        v: props.modelValue
+      });
+      return data;
+    });
+    const handleSetData = ({
+      v
+    }) => {
+      emit("update:modelValue", v);
+    };
+    const originValue = vue.ref(props.modelValue);
+    function handleEdit() {
+      originValue.value = props.modelValue;
+      editable.value = true;
+      vue.nextTick(() => {
+        const input = formItemContainerRef.value?.$el.querySelector("input, textarea");
+        if (input) {
+          input.focus();
+        }
+      });
+    }
+    function handleCheck() {
+      if (formItemRef.value?.validate) {
+        formItemRef.value.validate().then(() => {
+          editable.value = false;
+        }).catch(() => {
+          console.warn("Validation failed, editable text remains open.");
+        });
+      } else {
+        editable.value = false;
+      }
+    }
+    function handleCancel() {
+      emit("update:modelValue", originValue.value);
+      editable.value = false;
+    }
+    const __returned__ = {
+      props,
+      emit,
+      id,
+      editable,
+      prop,
+      formItemBindProps,
+      readonly,
+      formItemContainerRef,
+      formItemRef,
+      editSource,
+      rendererData: rendererData$1,
+      handleSetData,
+      originValue,
+      handleEdit,
+      handleCheck,
+      handleCancel,
+      get VkfFormItem() {
+        return formItem.VkfFormItem;
+      },
+      get ElText() {
+        return elementPlus.ElText;
+      },
+      get VkfFormItemRenderer() {
+        return formItemRenderer.VkfFormItemRenderer;
+      },
+      get VkfTemplatesDefault() {
+        return templatesDefault.VkfTemplatesDefault;
+      },
+      get VkfRendererData() {
+        return rendererData.VkfRendererData;
+      },
+      get VkAvatar() {
+        return avatar.VkAvatar;
+      },
+      get CloseBold() {
+        return index.close_bold_default;
+      },
+      get Select() {
+        return index.select_default;
+      }
+    };
+    Object.defineProperty(__returned__, "__isScriptSetup", {
+      enumerable: false,
+      value: true
+    });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = { class: "vkf-editable-text-actions" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.readonly || !$setup.editable ? (vue.openBlock(), vue.createBlock(
+    $setup["VkfFormItem"],
+    vue.normalizeProps(vue.mergeProps({ key: 0 }, $setup.formItemBindProps)),
+    {
+      default: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "text", { handleEdit: $setup.handleEdit }, () => [
+          vue.createVNode($setup["ElText"], { onDblclick: $setup.handleEdit }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(
+                vue.toDisplayString(_ctx.modelValue),
+                1
+                /* TEXT */
+              )
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ])
+      ]),
+      _: 3
+      /* FORWARDED */
+    },
+    16
+    /* FULL_PROPS */
+  )) : (vue.openBlock(), vue.createBlock($setup["VkfRendererData"], {
+    key: 1,
+    data: $setup.rendererData,
+    onSetData: $setup.handleSetData
+  }, {
+    default: vue.withCtx(() => [
+      vue.createVNode(
+        $setup["VkfFormItem"],
+        { ref: "formItemContainerRef" },
+        {
+          default: vue.withCtx(() => [
+            vue.createVNode($setup["VkfFormItemRenderer"], { source: $setup.editSource }, {
+              placeholder: vue.withCtx(() => [
+                vue.createVNode($setup["VkfTemplatesDefault"])
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["source"]),
+            vue.createElementVNode("div", _hoisted_1, [
+              vue.createVNode($setup["VkAvatar"], {
+                icon: $setup.Select,
+                size: _ctx.iconSize,
+                color: "var(--el-color-primary)",
+                onClick: $setup.handleCheck
+              }, null, 8, ["icon", "size"]),
+              vue.createVNode($setup["VkAvatar"], {
+                icon: $setup.CloseBold,
+                size: _ctx.iconSize,
+                color: "var(--el-color-danger)",
+                onClick: $setup.handleCancel
+              }, null, 8, ["icon", "size"])
+            ])
+          ]),
+          _: 1
+          /* STABLE */
+        },
+        512
+        /* NEED_PATCH */
+      )
+    ]),
+    _: 1
+    /* STABLE */
+  }, 8, ["data"]));
+}
+var VkfEditableText = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/editable-text/src/index.vue"]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkfEditableText.install = (app) => {
+  app.component(VkfEditableText.name || "VkfEditableText", VkfEditableText);
+};
+
+exports.VkfEditableText = VkfEditableText;
+exports.__VkfEditableText = types;
+exports.default = VkfEditableText;

package/components/editable-text/index.css

@@ -0,0 +1,6 @@
+.vkf-editable-text-actions{
+  display: flex;
+}
+.vkf-editable-text-actions .el-avatar {
+  cursor: pointer;
+}

package/components/editable-text/index.d.ts

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

package/components/editable-text/index.mjs

@@ -0,0 +1,260 @@
+import { defineComponent, useId, computed, ref, nextTick, openBlock, createBlock, normalizeProps, mergeProps, withCtx, renderSlot, createVNode, createTextVNode, toDisplayString, createElementVNode } from 'vue';
+import { _VkfFormItemCtx, VkfFormItem } from '@vunk/form/components/form-item';
+import { ElText } from 'element-plus';
+import { useComputedReadonly } from '@vunk/form';
+import { useModelComputed } from '@vunk/core/composables';
+import { VkfFormItemRenderer } from '@vunk/form/components/form-item-renderer';
+import { VkfTemplatesDefault } from '@vunk/form/components/templates-default';
+import { VkfRendererData } from '@vunk/form/components/renderer-data';
+import { setData } from '@vunk/core';
+import { VkAvatar } from '@vunk/plus/components/avatar';
+import { a as close_bold_default, s as select_default } from '../index2.mjs';
+import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
+
+const props = {
+  ..._VkfFormItemCtx.props,
+  /**
+   * @description model;
+   */
+  modelValue: null,
+  iconSize: {
+    type: Number,
+    default: 22
+  },
+  readonly: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   *  @description model; Whether the text is editable.
+   *  @default false
+   */
+  editable: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * @description 编辑主体
+   * @default __VkfInput.Source
+   */
+  edit: {
+    type: Object,
+    default: void 0
+  }
+};
+const emits = {
+  "update:editable": null,
+  "update:modelValue": null
+};
+
+var _sfc_main = /* @__PURE__ */defineComponent({
+  ...{
+    name: "VkfEditableText"
+  },
+  __name: "index",
+  props: props,
+  emits,
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
+  }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const id = useId();
+    const editable = useModelComputed({
+      key: "editable",
+      default: false
+    }, props, emit);
+    const prop = computed(() => {
+      return props.prop ?? id;
+    });
+    const formItemBindProps = _VkfFormItemCtx.createBindProps(props, []);
+    const readonly = useComputedReadonly(props);
+    const formItemContainerRef = ref();
+    const formItemRef = ref();
+    const editSource = computed(() => {
+      const source = {
+        templateType: "VkfInput",
+        ...formItemBindProps.value,
+        inline: true,
+        onBlur: handleCheck,
+        ...props.edit,
+        prop: prop.value,
+        elRef: e => {
+          props.edit?.elRef?.(e);
+          formItemRef.value = e;
+        }
+      };
+      return [source];
+    });
+    const rendererData = computed(() => {
+      const data = {};
+      setData(data, {
+        k: prop.value,
+        v: props.modelValue
+      });
+      return data;
+    });
+    const handleSetData = ({
+      v
+    }) => {
+      emit("update:modelValue", v);
+    };
+    const originValue = ref(props.modelValue);
+    function handleEdit() {
+      originValue.value = props.modelValue;
+      editable.value = true;
+      nextTick(() => {
+        const input = formItemContainerRef.value?.$el.querySelector("input, textarea");
+        if (input) {
+          input.focus();
+        }
+      });
+    }
+    function handleCheck() {
+      if (formItemRef.value?.validate) {
+        formItemRef.value.validate().then(() => {
+          editable.value = false;
+        }).catch(() => {
+          console.warn("Validation failed, editable text remains open.");
+        });
+      } else {
+        editable.value = false;
+      }
+    }
+    function handleCancel() {
+      emit("update:modelValue", originValue.value);
+      editable.value = false;
+    }
+    const __returned__ = {
+      props,
+      emit,
+      id,
+      editable,
+      prop,
+      formItemBindProps,
+      readonly,
+      formItemContainerRef,
+      formItemRef,
+      editSource,
+      rendererData,
+      handleSetData,
+      originValue,
+      handleEdit,
+      handleCheck,
+      handleCancel,
+      get VkfFormItem() {
+        return VkfFormItem;
+      },
+      get ElText() {
+        return ElText;
+      },
+      get VkfFormItemRenderer() {
+        return VkfFormItemRenderer;
+      },
+      get VkfTemplatesDefault() {
+        return VkfTemplatesDefault;
+      },
+      get VkfRendererData() {
+        return VkfRendererData;
+      },
+      get VkAvatar() {
+        return VkAvatar;
+      },
+      get CloseBold() {
+        return close_bold_default;
+      },
+      get Select() {
+        return select_default;
+      }
+    };
+    Object.defineProperty(__returned__, "__isScriptSetup", {
+      enumerable: false,
+      value: true
+    });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = { class: "vkf-editable-text-actions" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.readonly || !$setup.editable ? (openBlock(), createBlock(
+    $setup["VkfFormItem"],
+    normalizeProps(mergeProps({ key: 0 }, $setup.formItemBindProps)),
+    {
+      default: withCtx(() => [
+        renderSlot(_ctx.$slots, "text", { handleEdit: $setup.handleEdit }, () => [
+          createVNode($setup["ElText"], { onDblclick: $setup.handleEdit }, {
+            default: withCtx(() => [
+              createTextVNode(
+                toDisplayString(_ctx.modelValue),
+                1
+                /* TEXT */
+              )
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ])
+      ]),
+      _: 3
+      /* FORWARDED */
+    },
+    16
+    /* FULL_PROPS */
+  )) : (openBlock(), createBlock($setup["VkfRendererData"], {
+    key: 1,
+    data: $setup.rendererData,
+    onSetData: $setup.handleSetData
+  }, {
+    default: withCtx(() => [
+      createVNode(
+        $setup["VkfFormItem"],
+        { ref: "formItemContainerRef" },
+        {
+          default: withCtx(() => [
+            createVNode($setup["VkfFormItemRenderer"], { source: $setup.editSource }, {
+              placeholder: withCtx(() => [
+                createVNode($setup["VkfTemplatesDefault"])
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["source"]),
+            createElementVNode("div", _hoisted_1, [
+              createVNode($setup["VkAvatar"], {
+                icon: $setup.Select,
+                size: _ctx.iconSize,
+                color: "var(--el-color-primary)",
+                onClick: $setup.handleCheck
+              }, null, 8, ["icon", "size"]),
+              createVNode($setup["VkAvatar"], {
+                icon: $setup.CloseBold,
+                size: _ctx.iconSize,
+                color: "var(--el-color-danger)",
+                onClick: $setup.handleCancel
+              }, null, 8, ["icon", "size"])
+            ])
+          ]),
+          _: 1
+          /* STABLE */
+        },
+        512
+        /* NEED_PATCH */
+      )
+    ]),
+    _: 1
+    /* STABLE */
+  }, 8, ["data"]));
+}
+var VkfEditableText = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/editable-text/src/index.vue"]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkfEditableText.install = (app) => {
+  app.component(VkfEditableText.name || "VkfEditableText", VkfEditableText);
+};
+
+export { VkfEditableText, types as __VkfEditableText, VkfEditableText as default };

package/components/editable-text/src/ctx.d.ts

@@ -0,0 +1,89 @@
+export declare const props: {
+    /**
+     * @description model;
+     */
+    modelValue: any;
+    iconSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    /**
+     *  @description model; Whether the text is editable.
+     *  @default false
+     */
+    editable: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    /**
+     * @description 编辑主体
+     * @default __VkfInput.Source
+     */
+    edit: {
+        type: ObjectConstructor;
+        default: any;
+    };
+    required: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    formItemSize: {
+        type: import("vue").PropType<"default" | "small" | "large">;
+        default: "default" | "small" | "large";
+    };
+    formItemSlots: {
+        type: import("vue").PropType<import("@vunk/form/components/form-item/src/types").FormItemSlots>;
+        default: any;
+    };
+    elRef: {
+        type: import("vue").PropType<any>;
+        required: boolean;
+    };
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    formItemTip: {
+        type: StringConstructor;
+        default: any;
+    };
+    formItemTipClass: any;
+    labelTip: {
+        type: StringConstructor;
+        default: any;
+    };
+    information: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: StringConstructor;
+    labelWidth: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
+    labelPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "" | "top" | "left" | "right", unknown, "", boolean>;
+    prop: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | string[]) | (() => import("element-plus").FormItemProp) | ((new (...args: any[]) => string | string[]) | (() => import("element-plus").FormItemProp))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    rules: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => import("element-plus").FormItemRule | import("element-plus").FormItemRule[]) | (() => import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>) | ((new (...args: any[]) => import("element-plus").FormItemRule | import("element-plus").FormItemRule[]) | (() => import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    error: StringConstructor;
+    validateStatus: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "error" | "success" | "validating", unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    for: StringConstructor;
+    inlineMessage: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, BooleanConstructor], unknown, unknown, "", boolean>;
+    showMessage: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+};
+export declare const emits: {
+    'update:editable': any;
+    'update:modelValue': any;
+};