@silver-formily/element-plus 0.0.1-beta.0 → 1.0.1

package/esm/checkbox/index.mjs

@@ -0,0 +1,83 @@
+import { connect as v, mapProps as _ } from "@formily/vue";
+import { ElCheckboxButton as T, ElCheckbox as h, ElCheckboxGroup as A, version as B } from "element-plus";
+import { defineComponent as G, computed as i, useSlots as V, createBlock as n, openBlock as l, unref as a, mergeProps as u, withCtx as p, createElementBlock as f, Fragment as d, renderList as b, resolveDynamicComponent as k, createTextVNode as w, toDisplayString as D, renderSlot as F } from "vue";
+import "@formily/reactive";
+import { mapReadPretty as I } from "../__builtins__/shared/transform-component.mjs";
+import { useCleanAttrs as L, composeExport as N } from "../__builtins__/shared/utils.mjs";
+import { PreviewText as O } from "../preview-text/index.mjs";
+import { isPlainObj as y } from "@formily/shared";
+import { lt as j } from "../__builtins__/shared/simple-version-compare.mjs";
+import "@formily/core";
+import "@formily/reactive-vue";
+const H = /* @__PURE__ */ G({
+  name: "FCheckboxGroup",
+  inheritAttrs: !1,
+  __name: "checkbox-group",
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    optionType: {
+      type: String,
+      default: "default"
+    }
+  },
+  emits: ["change"],
+  setup(x, { emit: C }) {
+    const o = x, S = C, s = i(() => o.optionType === "button" ? T : h), g = j(B, "2.6.0"), m = i(() => o.options.map((e) => {
+      if (!y(e))
+        return {
+          label: e,
+          value: e
+        };
+      /* istanbul ignore if -- @preserve */
+      return g ? {
+        ...e,
+        label: e.value
+      } : e;
+    })), P = V(), { props: E } = L();
+    return (e, c) => (l(), n(a(A), u(a(E), {
+      "model-value": o.value,
+      "onUpdate:modelValue": c[0] || (c[0] = (t) => S("change", t))
+    }), {
+      default: p(() => [
+        a(P).option ? (l(!0), f(d, { key: 1 }, b(m.value, (t, r) => (l(), n(k(s.value), u({ key: r }, { ref_for: !0 }, t), {
+          default: p(() => [
+            F(e.$slots, "option", { option: t })
+          ]),
+          _: 2
+        }, 1040))), 128)) : (l(!0), f(d, { key: 0 }, b(m.value, (t, r) => (l(), n(k(s.value), u({ key: r }, { ref_for: !0 }, t), {
+          default: p(() => [
+            w(D(a(y)(o.options[r]) ? o.options[r]?.label : t.label), 1)
+          ]),
+          _: 2
+        }, 1040))), 128))
+      ]),
+      _: 3
+    }, 16, ["model-value"]));
+  }
+}), R = v(
+  H,
+  _({ dataSource: "options", disabled: !0 }),
+  I(O.Select, {
+    multiple: !0
+  })
+), U = v(
+  h,
+  _({
+    value: "modelValue",
+    disabled: !0
+  })
+), ee = N(U, {
+  Group: R
+});
+export {
+  ee as Checkbox,
+  ee as default
+};
+//# sourceMappingURL=index.mjs.map

package/esm/checkbox/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/checkbox/checkbox-group.vue","../../src/checkbox/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CheckboxProps } from 'element-plus'\nimport type { PropType } from 'vue'\nimport { isPlainObj } from '@formily/shared'\nimport { ElCheckbox, ElCheckboxButton, ElCheckboxGroup, version } from 'element-plus'\nimport { computed, useSlots } from 'vue'\nimport { lt, useCleanAttrs } from '../__builtins__'\n\ndefineOptions({\n  name: 'FCheckboxGroup',\n  inheritAttrs: false,\n})\n\nconst props = defineProps({\n  value: {\n    type: Array as PropType<Array<any>>,\n    default: () => [],\n  },\n  options: {\n    type: Array as PropType<Array<CheckboxProps>>,\n    default: () => [],\n  },\n  optionType: {\n    type: String as PropType<'default' | 'button'>,\n    default: 'default',\n  },\n})\n\nconst emits = defineEmits(['change'])\nconst OptionType = computed(() => {\n  return props.optionType === 'button' ? ElCheckboxButton : ElCheckbox\n})\nconst IS_LESS_THAN_2_6_0 = lt(version, '2.6.0')\nconst compatiableProps = computed(() => {\n  return props.options.map((option) => {\n    if (!isPlainObj(option)) {\n      return {\n        label: option,\n        value: option,\n      }\n    }\n    /* istanbul ignore if -- @preserve */\n    if (IS_LESS_THAN_2_6_0) {\n      return {\n        ...option,\n        label: option.value,\n      }\n    }\n    return option\n  })\n})\n\nconst slots = useSlots()\nconst { props: checkboxProps } = useCleanAttrs()\n</script>\n\n<template>\n  <ElCheckboxGroup v-bind=\"checkboxProps\" :model-value=\"props.value\" @update:model-value=\"(value) => emits('change', value)\">\n    <template v-if=\"!slots.option\">\n      <component :is=\"OptionType\" v-for=\"(option, index) of compatiableProps\" :key=\"index\" v-bind=\"option\">\n        {{ isPlainObj(props.options[index]) ? props.options[index]?.label : option.label }}\n      </component>\n    </template>\n    <template v-else>\n      <component :is=\"OptionType\" v-for=\"(option, index) of compatiableProps\" :key=\"index\" v-bind=\"option\">\n        <slot name=\"option\" :option=\"option\" />\n      </component>\n    </template>\n  </ElCheckboxGroup>\n</template>\n","import { connect, mapProps } from '@formily/vue'\nimport { ElCheckbox } from 'element-plus'\nimport { composeExport, mapReadPretty } from '../__builtins__'\nimport { PreviewText } from '../preview-text'\nimport FCheckboxGroup from './checkbox-group.vue'\n\nconst CheckboxGroup = connect(\n  FCheckboxGroup,\n  mapProps({ dataSource: 'options', disabled: true }),\n  mapReadPretty(PreviewText.Select, {\n    multiple: true,\n  }),\n)\n\nconst InnerCheckbox = connect(\n  ElCheckbox,\n  mapProps({\n    value: 'modelValue',\n    disabled: true,\n  }),\n)\n\nexport const Checkbox = composeExport(InnerCheckbox, {\n  Group: CheckboxGroup,\n})\n\nexport default Checkbox\n"],"names":["props","__props","emits","__emit","OptionType","computed","ElCheckboxButton","ElCheckbox","IS_LESS_THAN_2_6_0","lt","version","compatiableProps","option","isPlainObj","slots","useSlots","checkboxProps","useCleanAttrs","_createBlock","_unref","ElCheckboxGroup","_mergeProps","_cache","value","_openBlock","_createElementBlock","_Fragment","_renderList","index","_resolveDynamicComponent","_renderSlot","_ctx","_createTextVNode","_toDisplayString","CheckboxGroup","connect","FCheckboxGroup","mapProps","mapReadPretty","PreviewText","InnerCheckbox","Checkbox","composeExport"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,UAAMA,IAAQC,GAeRC,IAAQC,GACRC,IAAaC,EAAS,MACnBL,EAAM,eAAe,WAAWM,IAAmBC,CAC3D,GACKC,IAAqBC,EAAGC,GAAS,OAAO,GACxCC,IAAmBN,EAAS,MACzBL,EAAM,QAAQ,IAAI,CAACY,MAAW;AACnC,UAAI,CAACC,EAAWD,CAAM;AACpB,eAAO;AAAA,UACL,OAAOA;AAAA,UACP,OAAOA;AAAA,QAAA;AAAA,MAEX;AAEA,aAAIJ,IACK;AAAA,QACL,GAAGI;AAAA,QACH,OAAOA,EAAO;AAAA,MAAA,IAGXA;AAAA,IACT,CAAC,CACF,GAEKE,IAAQC,EAAA,GACR,EAAE,OAAOC,EAAA,IAAkBC,EAAA;2BAI/BC,EAWkBC,EAAAC,CAAA,GAXlBC,EAWkBF,EAAAH,CAAA,GAXoB;AAAA,MAAG,eAAahB,EAAM;AAAA,MAAQ,uBAAkBsB,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAGC,MAAUrB,YAAgBqB,CAAK;AAAA,IAAA;iBACtH,MAIW;AAAA,QAJMJ,EAAAL,CAAA,EAAM,UAMrBU,EAAA,EAAA,GAAAC,EAEYC,GAAA,EAAA,KAAA,KAAAC,EAF0ChB,EAAA,OAAgB,CAAlCC,GAAQgB,YAA5CV,EAEYW,EAFIzB,OAAU,GAA1BiB,EAEY,EAF6D,KAAKO,KAAK,EAAA,SAAA,GAAA,GAAUhB,CAAM,GAAA;AAAA,qBACjG,MAAuC;AAAA,YAAvCkB,EAAuCC,EAAA,QAAA,UAAA,EAAlB,QAAAnB,GAAc;AAAA,UAAA;;6BANrCY,EAAA,EAAA,GAAAC,EAEYC,GAAA,EAAA,KAAA,KAAAC,EAF0ChB,EAAA,OAAgB,CAAlCC,GAAQgB,YAA5CV,EAEYW,EAFIzB,OAAU,GAA1BiB,EAEY,EAF6D,KAAKO,KAAK,EAAA,SAAA,GAAA,GAAUhB,CAAM,GAAA;AAAA,qBACjG,MAAmF;AAAA,YAAhFoB,EAAAC,EAAAd,EAAAN,CAAA,EAAWb,EAAM,QAAQ4B,CAAK,CAAA,IAAK5B,EAAM,QAAQ4B,CAAK,GAAG,QAAQhB,EAAO,KAAK,GAAA,CAAA;AAAA,UAAA;;;;;;;ICtDlFsB,IAAgBC;AAAA,EACpBC;AAAAA,EACAC,EAAS,EAAE,YAAY,WAAW,UAAU,IAAM;AAAA,EAClDC,EAAcC,EAAY,QAAQ;AAAA,IAChC,UAAU;AAAA,EAAA,CACX;AACH,GAEMC,IAAgBL;AAAA,EACpB5B;AAAA,EACA8B,EAAS;AAAA,IACP,OAAO;AAAA,IACP,UAAU;AAAA,EAAA,CACX;AACH,GAEaI,KAAWC,EAAcF,GAAe;AAAA,EACnD,OAAON;AACT,CAAC;"}

package/esm/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export declare const DatePicker: any;
+export default DatePicker;

package/esm/date-picker/index.mjs

@@ -0,0 +1,57 @@
+import { connect as r, mapProps as m } from "@formily/vue";
+import { ElDatePicker as o } from "element-plus";
+import "vue";
+import "@formily/reactive";
+import { transformComponent as n, mapReadPretty as c } from "../__builtins__/shared/transform-component.mjs";
+import { PreviewText as s } from "../preview-text/index.mjs";
+const u = n(
+  o,
+  {
+    change: "update:modelValue"
+  }
+);
+function a(e = "date", t = "format") {
+  if (e === "week" && t === "format")
+    return "[Week] ww";
+  switch (e) {
+    case "year":
+    case "years":
+    case "yearrange":
+      return "YYYY";
+    case "month":
+    case "months":
+    case "monthrange":
+      return "YYYY-MM";
+    case "week":
+      return "ww";
+    case "date":
+    case "dates":
+    case "daterange":
+      return "YYYY-MM-DD";
+    case "datetime":
+    case "datetimerange":
+      return "YYYY-MM-DD HH:mm:ss";
+  }
+}
+const w = r(
+  u,
+  m(
+    {
+      value: "modelValue",
+      readOnly: "readonly",
+      disabled: !0,
+      editable: !0
+    },
+    (e) => ({
+      ...e,
+      format: e.format || a(e.type),
+      valueFormat: e.valueFormat || a(e.type, "valueFormat")
+    })
+  ),
+  c(s.DatePicker)
+);
+export {
+  w as DatePicker,
+  w as default
+};
+//# sourceMappingURL=index.mjs.map

package/esm/date-picker/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/date-picker/index.ts"],"sourcesContent":["import type { DatePickerProps } from 'element-plus'\nimport { connect, mapProps } from '@formily/vue'\nimport { ElDatePicker } from 'element-plus'\nimport { mapReadPretty, transformComponent } from '../__builtins__'\nimport { PreviewText } from '../preview-text'\n\nconst TransformElDatePicker = transformComponent<DatePickerProps>(\n  ElDatePicker,\n  {\n    change: 'update:modelValue',\n  },\n)\n\nfunction getDefaultFormat(type: DatePickerProps['type'] = 'date', formatType = 'format') {\n  if (type === 'week' && formatType === 'format') {\n    return '[Week] ww'\n  }\n  else {\n    switch (type) {\n      case 'year':\n      case 'years':\n      case 'yearrange': {\n        return 'YYYY'\n      }\n      case 'month':\n      case 'months':\n      case 'monthrange': {\n        return 'YYYY-MM'\n      }\n      case 'week': {\n        return 'ww'\n      }\n      case 'date':\n      case 'dates':\n      case 'daterange': {\n        return 'YYYY-MM-DD'\n      }\n      case 'datetime':\n      case 'datetimerange': {\n        return 'YYYY-MM-DD HH:mm:ss'\n      }\n    }\n  }\n}\n\nexport const DatePicker = connect(\n  TransformElDatePicker,\n  mapProps(\n    {\n      value: 'modelValue',\n      readOnly: 'readonly',\n      disabled: true,\n      editable: true,\n    },\n    (props: any) => {\n      return {\n        ...props,\n        format: props.format || getDefaultFormat(props.type),\n        valueFormat:\n          props.valueFormat || getDefaultFormat(props.type, 'valueFormat'),\n      }\n    },\n  ),\n  mapReadPretty(PreviewText.DatePicker),\n)\n\nexport default DatePicker\n"],"names":["TransformElDatePicker","transformComponent","ElDatePicker","getDefaultFormat","type","formatType","DatePicker","connect","mapProps","props","mapReadPretty","PreviewText"],"mappings":";;;;;;AAMA,MAAMA,IAAwBC;AAAA,EAC5BC;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,EAAA;AAEZ;AAEA,SAASC,EAAiBC,IAAgC,QAAQC,IAAa,UAAU;AACvF,MAAID,MAAS,UAAUC,MAAe;AACpC,WAAO;AAGP,UAAQD,GAAA;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,EACT;AAGN;AAEO,MAAME,IAAaC;AAAA,EACxBP;AAAA,EACAQ;AAAA,IACE;AAAA,MACE,OAAO;AAAA,MACP,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,IAAA;AAAA,IAEZ,CAACC,OACQ;AAAA,MACL,GAAGA;AAAA,MACH,QAAQA,EAAM,UAAUN,EAAiBM,EAAM,IAAI;AAAA,MACnD,aACEA,EAAM,eAAeN,EAAiBM,EAAM,MAAM,aAAa;AAAA,IAAA;AAAA,EAErE;AAAA,EAEFC,EAAcC,EAAY,UAAU;AACtC;"}

package/esm/editable/editable-popover.d.ts

@@ -0,0 +1,25 @@
+import { IFormItemProps } from '../form-item/types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        contentRef: HTMLDivElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<IFormItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<IFormItemProps> & Readonly<{}>, {
+    size: "small" | "default" | "large";
+    feedbackLayout: "loose" | "terse" | "popover";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    contentRef: HTMLDivElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/esm/editable/editable.d.ts

@@ -0,0 +1,187 @@
+import { IFormItemProps } from '../form-item/types';
+import { nextTick } from 'vue';
+type __VLS_Props = IFormItemProps & {
+    editProps?: IFormItemProps;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        innerRef: HTMLDivElement;
+        formItemRef: {
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: Partial<{
+                colon: boolean;
+                fullness: boolean;
+                feedbackLayout: "loose" | "terse" | "popover";
+            }> & Omit<{
+                readonly label?: string;
+                readonly for?: string;
+                readonly tooltip?: string;
+                readonly addonBefore?: string;
+                readonly addonAfter?: string;
+                readonly extra?: string;
+                readonly feedbackText?: string;
+                readonly feedbackStatus?: "error" | "warning" | "success" | "pending";
+                readonly asterisk?: boolean;
+                readonly colon?: boolean;
+                readonly labelAlign?: "right" | "left";
+                readonly wrapperAlign?: "right" | "left";
+                readonly labelWrap?: boolean;
+                readonly labelWidth?: number;
+                readonly wrapperWidth?: number;
+                readonly wrapperWrap?: boolean;
+                readonly labelCol?: number;
+                readonly wrapperCol?: number;
+                readonly fullness?: boolean;
+                readonly size?: "small" | "default" | "large";
+                readonly layout?: "vertical" | "horizontal" | "inline" | ("vertical" | "horizontal" | "inline")[];
+                readonly feedbackLayout?: "loose" | "terse" | "popover";
+                readonly tooltipLayout?: "icon" | "text";
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "colon" | "fullness" | "feedbackLayout">;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: any;
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any>;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: any;
+            $options: import('vue').ComponentOptionsBase<Readonly<IFormItemProps> & Readonly<{}>, {
+                feedbackTooltipRef: import('vue').Ref<import('element-plus').TooltipInstance, import('element-plus').TooltipInstance>;
+            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+                colon: boolean;
+                fullness: boolean;
+                feedbackLayout: "loose" | "terse" | "popover";
+            }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+        } & Readonly<{
+            colon: boolean;
+            fullness: boolean;
+            feedbackLayout: "loose" | "terse" | "popover";
+        }> & Omit<Readonly<IFormItemProps> & Readonly<{}>, ("colon" | "fullness" | "feedbackLayout") | "feedbackTooltipRef"> & import('vue').ShallowUnwrapRef<{
+            feedbackTooltipRef: import('vue').Ref<import('element-plus').TooltipInstance, import('element-plus').TooltipInstance>;
+        }> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: any;
+        };
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "small" | "default" | "large";
+    feedbackLayout: "loose" | "terse" | "popover";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    innerRef: HTMLDivElement;
+    formItemRef: {
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            colon: boolean;
+            fullness: boolean;
+            feedbackLayout: "loose" | "terse" | "popover";
+        }> & Omit<{
+            readonly label?: string;
+            readonly for?: string;
+            readonly tooltip?: string;
+            readonly addonBefore?: string;
+            readonly addonAfter?: string;
+            readonly extra?: string;
+            readonly feedbackText?: string;
+            readonly feedbackStatus?: "error" | "warning" | "success" | "pending";
+            readonly asterisk?: boolean;
+            readonly colon?: boolean;
+            readonly labelAlign?: "right" | "left";
+            readonly wrapperAlign?: "right" | "left";
+            readonly labelWrap?: boolean;
+            readonly labelWidth?: number;
+            readonly wrapperWidth?: number;
+            readonly wrapperWrap?: boolean;
+            readonly labelCol?: number;
+            readonly wrapperCol?: number;
+            readonly fullness?: boolean;
+            readonly size?: "small" | "default" | "large";
+            readonly layout?: "vertical" | "horizontal" | "inline" | ("vertical" | "horizontal" | "inline")[];
+            readonly feedbackLayout?: "loose" | "terse" | "popover";
+            readonly tooltipLayout?: "icon" | "text";
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "colon" | "fullness" | "feedbackLayout">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: any;
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any>;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<IFormItemProps> & Readonly<{}>, {
+            feedbackTooltipRef: import('vue').Ref<import('element-plus').TooltipInstance, import('element-plus').TooltipInstance>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+            colon: boolean;
+            fullness: boolean;
+            feedbackLayout: "loose" | "terse" | "popover";
+        }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{
+        colon: boolean;
+        fullness: boolean;
+        feedbackLayout: "loose" | "terse" | "popover";
+    }> & Omit<Readonly<IFormItemProps> & Readonly<{}>, ("colon" | "fullness" | "feedbackLayout") | "feedbackTooltipRef"> & import('vue').ShallowUnwrapRef<{
+        feedbackTooltipRef: import('vue').Ref<import('element-plus').TooltipInstance, import('element-plus').TooltipInstance>;
+    }> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: any;
+    };
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/esm/editable/index.d.ts

@@ -0,0 +1,147 @@
+import { ElPopover } from 'element-plus';
+import { IFormItemProps } from '../form-item/types';
+export type EditableProps = IFormItemProps;
+export type EditablePopoverProps = typeof ElPopover;
+export declare const Editable: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<IFormItemProps & {
+        editProps?: IFormItemProps;
+    }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        size: "small" | "default" | "large";
+        feedbackLayout: "loose" | "terse" | "popover";
+    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        innerRef: HTMLDivElement;
+        formItemRef: {
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: Partial<{
+                colon: boolean;
+                fullness: boolean;
+                feedbackLayout: "loose" | "terse" | "popover";
+            }> & Omit<{
+                readonly label?: string;
+                readonly for?: string;
+                readonly tooltip?: string;
+                readonly addonBefore?: string;
+                readonly addonAfter?: string;
+                readonly extra?: string;
+                readonly feedbackText?: string;
+                readonly feedbackStatus?: "error" | "warning" | "success" | "pending";
+                readonly asterisk?: boolean;
+                readonly colon?: boolean;
+                readonly labelAlign?: "right" | "left";
+                readonly wrapperAlign?: "right" | "left";
+                readonly labelWrap?: boolean;
+                readonly labelWidth?: number;
+                readonly wrapperWidth?: number;
+                readonly wrapperWrap?: boolean;
+                readonly labelCol?: number;
+                readonly wrapperCol?: number;
+                readonly fullness?: boolean;
+                readonly size?: "small" | "default" | "large";
+                readonly layout?: "vertical" | "horizontal" | "inline" | ("vertical" | "horizontal" | "inline")[];
+                readonly feedbackLayout?: "loose" | "terse" | "popover";
+                readonly tooltipLayout?: "icon" | "text";
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "colon" | "fullness" | "feedbackLayout">;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: any;
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any>;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: any;
+            $options: import('vue').ComponentOptionsBase<Readonly<IFormItemProps> & Readonly<{}>, {
+                feedbackTooltipRef: import('vue').Ref<import('element-plus').TooltipInstance, import('element-plus').TooltipInstance>;
+            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+                colon: boolean;
+                fullness: boolean;
+                feedbackLayout: "loose" | "terse" | "popover";
+            }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import('vue').nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+        } & Readonly<{
+            colon: boolean;
+            fullness: boolean;
+            feedbackLayout: "loose" | "terse" | "popover";
+        }> & Omit<Readonly<IFormItemProps> & Readonly<{}>, ("colon" | "fullness" | "feedbackLayout") | "feedbackTooltipRef"> & import('vue').ShallowUnwrapRef<{
+            feedbackTooltipRef: import('vue').Ref<import('element-plus').TooltipInstance, import('element-plus').TooltipInstance>;
+        }> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: any;
+        };
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<IFormItemProps & {
+        editProps?: IFormItemProps;
+    }> & Readonly<{}>, {}, {}, {}, {}, {
+        size: "small" | "default" | "large";
+        feedbackLayout: "loose" | "terse" | "popover";
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<IFormItemProps & {
+    editProps?: IFormItemProps;
+}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    size: "small" | "default" | "large";
+    feedbackLayout: "loose" | "terse" | "popover";
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {}): any;
+    };
+}) & {
+    Popover: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<IFormItemProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+            size: "small" | "default" | "large";
+            feedbackLayout: "loose" | "terse" | "popover";
+        }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+            contentRef: HTMLDivElement;
+        }, any, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<IFormItemProps> & Readonly<{}>, {}, {}, {}, {}, {
+            size: "small" | "default" | "large";
+            feedbackLayout: "loose" | "terse" | "popover";
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import('vue').ComponentOptionsBase<Readonly<IFormItemProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+        size: "small" | "default" | "large";
+        feedbackLayout: "loose" | "terse" | "popover";
+    }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+        $slots: {
+            default?(_: {}): any;
+        };
+    });
+};
+export default Editable;