@pungfe/element 0.0.1-alpha.7 → 0.0.1-alpha.9

package/dist/basic/XTag.vue.d.ts

@@ -0,0 +1,28 @@
+import { TagProps } from 'element-plus';
+export interface XTagProps {
+    type?: TagProps['type'];
+    color?: TagProps['color'];
+    closable?: TagProps['closable'];
+    round?: TagProps['round'];
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<XTagProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<XTagProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, 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/dist/index.d.ts

@@ -9,7 +9,7 @@ export { default as XDialog } from './basic/XDialog.vue';
 export * from './basic/XDialog.vue';
 export { default as XDivider } from './basic/XDivider.vue';
 export * from './basic/XDivider.vue';
-export { default as XForm } from './basic/XForm.vue';
+export { default as XForm, XFormItem } from './basic/XForm.vue';
 export * from './basic/XForm.vue';
 export { default as XImage } from './basic/XImage.vue';
 export * from './basic/XImage.vue';
@@ -31,8 +31,10 @@ export { default as XSpace } from './basic/XSpace.vue';
 export * from './basic/XSpace.vue';
 export { default as XTable } from './basic/XTable.vue';
 export * from './basic/XTable.vue';
-export { default as XTabs } from './basic/XTabs.vue';
+export { XTabPane, default as XTabs } from './basic/XTabs.vue';
 export * from './basic/XTabs.vue';
+export { default as XTag } from './basic/XTag.vue';
+export * from './basic/XTag.vue';
 export { default as XText } from './basic/XText.vue';
 export * from './basic/XText.vue';
 export { default as XUpload } from './basic/XUpload.vue';

package/dist/index.js

@@ -1,6 +1,6 @@
-import { defineComponent as b, openBlock as m, createBlock as y, unref as h, mergeProps as C, withCtx as g, renderSlot as E, useModel as x, inject as p, mergeModels as B, computed as V, toValue as L, onMounted as K, nextTick as re, getCurrentScope as de, onScopeDispose as ue, getCurrentInstance as G, shallowRef as N, watch as W, createElementBlock as j, Fragment as Y, renderList as J, useSlots as se, createSlots as ce, normalizeProps as O, guardReactiveProps as M, ref as F, provide as $, createVNode as z, resolveComponent as U, createTextVNode as q, useTemplateRef as Z, toDisplayString as fe, normalizeClass as me } from "vue";
-import { ElButton as pe, ElCascader as be, ElCheckboxGroup as ye, ElCheckbox as ve, ElColorPicker as ge, ElDialog as he, ElDivider as Be, ElForm as we, ElFormItem as Ve, ElMessage as ee, ElImage as Ce, ElInput as Ee, ElPagination as xe, ElRate as Te, ElPopconfirm as Xe, ElScrollbar as Se, ElSpace as ze, ElTable as ke, ElTableColumn as Ie, ElTabs as Ae, ElTabPane as $e, ElText as Oe, ElUpload as Me } from "element-plus";
-const je = /* @__PURE__ */ b({
+import { defineComponent as b, openBlock as m, createBlock as y, unref as h, mergeProps as V, withCtx as v, renderSlot as E, useModel as T, inject as p, mergeModels as B, computed as C, toValue as L, onMounted as K, nextTick as de, getCurrentScope as re, onScopeDispose as ue, getCurrentInstance as G, shallowRef as N, watch as W, createElementBlock as j, Fragment as Y, renderList as J, useSlots as se, createSlots as ce, normalizeProps as O, guardReactiveProps as M, ref as F, provide as $, createVNode as z, resolveComponent as U, createTextVNode as q, useTemplateRef as Z, toDisplayString as fe, normalizeClass as me } from "vue";
+import { ElButton as pe, ElCascader as be, ElCheckboxGroup as ye, ElCheckbox as ve, ElColorPicker as ge, ElDialog as he, ElDivider as Be, ElForm as we, ElFormItem as Ve, ElMessage as ee, ElImage as Ce, ElInput as Ee, ElPagination as Te, ElRate as xe, ElPopconfirm as Xe, ElScrollbar as Se, ElSpace as ze, ElTable as ke, ElTableColumn as Ie, ElTabs as Ae, ElTabPane as $e, ElTag as Oe, ElText as Me, ElUpload as Pe } from "element-plus";
+const Ke = /* @__PURE__ */ b({
   __name: "XButton",
   props: {
     size: {},
@@ -24,25 +24,25 @@ const je = /* @__PURE__ */ b({
   },
   emits: ["click"],
   setup(e, { emit: t }) {
-    const o = e, n = t;
-    return (l, i) => (m(), y(h(pe), C(o, {
-      onClick: i[0] || (i[0] = (r) => n("click", r))
+    const l = e, n = t;
+    return (o, i) => (m(), y(h(pe), V(l, {
+      onClick: i[0] || (i[0] = (d) => n("click", d))
     }), {
-      default: g(() => [
-        E(l.$slots, "default")
+      default: v(() => [
+        E(o.$slots, "default")
       ]),
       _: 3
     }, 16));
   }
 }), P = /* @__PURE__ */ Symbol("X_FORM_ITEM_LABEL"), te = /* @__PURE__ */ Symbol("X_FORM_VALIDATIONS"), k = /* @__PURE__ */ Symbol(
   "X_FORM_ITEM_VALIDATION"
-), Pe = /* @__PURE__ */ Symbol(
+), Re = /* @__PURE__ */ Symbol(
   "X_FORM_TAB_UPDATE_HOOK"
 ), ae = /* @__PURE__ */ Symbol("X_TAB_PANES"), le = /* @__PURE__ */ Symbol("X_TAB_PANE"), D = /* @__PURE__ */ Symbol(
   "X_TABLE_QUERY_UPDATE_HOOK"
 ), H = /* @__PURE__ */ Symbol(
   "X_TABLE_QUERY_EXECUTE_HOOK"
-), Ke = /* @__PURE__ */ b({
+), Ge = /* @__PURE__ */ b({
   __name: "XCascader",
   props: /* @__PURE__ */ B({
     clearable: {
@@ -64,74 +64,74 @@ const je = /* @__PURE__ */ b({
   setup(e, {
     emit: t
   }) {
-    const o = e, n = t, l = x(e, "modelValue"), i = p(k, void 0);
+    const l = e, n = t, o = T(e, "modelValue"), i = p(k, void 0);
     if (i?.required) {
       const {
         validator: c,
-        label: d
+        label: r
       } = i;
-      i.validator = () => l.value ? c?.() : `请输入${d}`;
+      i.validator = () => o.value ? c?.() : `请输入${r}`;
     }
-    const r = p(P, void 0), a = p(D, void 0), u = p(H, void 0);
-    a?.on(([c, d]) => r === c && d === void 0 && (l.value = void 0)), u?.on(() => r && a?.trigger([r, l.value]));
+    const d = p(P, void 0), a = p(D, void 0), u = p(H, void 0);
+    a?.on(([c, r]) => d === c && r === void 0 && (o.value = void 0)), u?.on(() => d && a?.trigger([d, o.value]));
     const s = () => {
       i?.validate(), n("blur");
     };
-    return (c, d) => (m(), y(h(be), C(o, {
-      modelValue: l.value,
-      "onUpdate:modelValue": d[0] || (d[0] = (w) => l.value = w),
+    return (c, r) => (m(), y(h(be), V(l, {
+      modelValue: o.value,
+      "onUpdate:modelValue": r[0] || (r[0] = (w) => o.value = w),
       onBlur: s
     }), null, 16, ["modelValue"]));
   }
 });
-function Re(e, t) {
-  return de() ? (ue(e, t), !0) : !1;
+function Le(e, t) {
+  return re() ? (ue(e, t), !0) : !1;
 }
-const Le = typeof window < "u" && typeof document < "u";
+const Ue = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-function Ue(e) {
+function Fe(e) {
   return Array.isArray(e) ? e : [e];
 }
-function Fe(e) {
+function De(e) {
   return G();
 }
-function De(e, t = !0, o) {
-  Fe() ? K(e, o) : t ? e() : re(e);
+function He(e, t = !0, l) {
+  De() ? K(e, l) : t ? e() : de(e);
 }
 // @__NO_SIDE_EFFECTS__
 function Q(e, t) {
-  return V(() => L(e).map((o) => L(o)).map(t));
+  return C(() => L(e).map((l) => L(l)).map(t));
 }
-const oe = Le ? window : void 0;
+const oe = Ue ? window : void 0;
 function I(e) {
   var t;
-  const o = L(e);
-  return (t = o?.$el) !== null && t !== void 0 ? t : o;
+  const l = L(e);
+  return (t = l?.$el) !== null && t !== void 0 ? t : l;
 }
 // @__NO_SIDE_EFFECTS__
-function He() {
+function _e() {
   const e = N(!1), t = G();
   return t && K(() => {
     e.value = !0;
   }, t), e;
 }
 // @__NO_SIDE_EFFECTS__
-function _e(e) {
-  const t = /* @__PURE__ */ He();
-  return V(() => (t.value, !!e()));
+function Ne(e) {
+  const t = /* @__PURE__ */ _e();
+  return C(() => (t.value, !!e()));
 }
-function Ne(e, t, o = {}) {
-  const { window: n = oe, ...l } = o;
+function qe(e, t, l = {}) {
+  const { window: n = oe, ...o } = l;
   let i;
-  const r = /* @__PURE__ */ _e(() => n && "ResizeObserver" in n), a = () => {
+  const d = /* @__PURE__ */ Ne(() => n && "ResizeObserver" in n), a = () => {
     i && (i.disconnect(), i = void 0);
-  }, u = W(V(() => {
+  }, u = W(C(() => {
     const c = L(e);
-    return Array.isArray(c) ? c.map((d) => I(d)) : [I(c)];
+    return Array.isArray(c) ? c.map((r) => I(r)) : [I(c)];
   }), (c) => {
-    if (a(), r.value && n) {
+    if (a(), d.value && n) {
       i = new ResizeObserver(t);
-      for (const d of c) d && i.observe(d, l);
+      for (const r of c) r && i.observe(r, o);
     }
   }, {
     immediate: !0,
@@ -139,49 +139,49 @@ function Ne(e, t, o = {}) {
   }), s = () => {
     a(), u();
   };
-  return Re(s), {
-    isSupported: r,
+  return Le(s), {
+    isSupported: d,
     stop: s
   };
 }
-function qe(e, t = {
+function Qe(e, t = {
   width: 0,
   height: 0
-}, o = {}) {
-  const { window: n = oe, box: l = "content-box" } = o, i = V(() => {
-    var d;
-    return (d = I(e)) === null || d === void 0 || (d = d.namespaceURI) === null || d === void 0 ? void 0 : d.includes("svg");
-  }), r = N(t.width), a = N(t.height), { stop: u } = Ne(e, ([d]) => {
-    const w = l === "border-box" ? d.borderBoxSize : l === "content-box" ? d.contentBoxSize : d.devicePixelContentBoxSize;
+}, l = {}) {
+  const { window: n = oe, box: o = "content-box" } = l, i = C(() => {
+    var r;
+    return (r = I(e)) === null || r === void 0 || (r = r.namespaceURI) === null || r === void 0 ? void 0 : r.includes("svg");
+  }), d = N(t.width), a = N(t.height), { stop: u } = qe(e, ([r]) => {
+    const w = o === "border-box" ? r.borderBoxSize : o === "content-box" ? r.contentBoxSize : r.devicePixelContentBoxSize;
     if (n && i.value) {
-      const T = I(e);
-      if (T) {
-        const X = T.getBoundingClientRect();
-        r.value = X.width, a.value = X.height;
+      const x = I(e);
+      if (x) {
+        const X = x.getBoundingClientRect();
+        d.value = X.width, a.value = X.height;
       }
     } else if (w) {
-      const T = Ue(w);
-      r.value = T.reduce((X, { inlineSize: A }) => X + A, 0), a.value = T.reduce((X, { blockSize: A }) => X + A, 0);
+      const x = Fe(w);
+      d.value = x.reduce((X, { inlineSize: A }) => X + A, 0), a.value = x.reduce((X, { blockSize: A }) => X + A, 0);
     } else
-      r.value = d.contentRect.width, a.value = d.contentRect.height;
-  }, o);
-  De(() => {
-    const d = I(e);
-    d && (r.value = "offsetWidth" in d ? d.offsetWidth : t.width, a.value = "offsetHeight" in d ? d.offsetHeight : t.height);
+      d.value = r.contentRect.width, a.value = r.contentRect.height;
+  }, l);
+  He(() => {
+    const r = I(e);
+    r && (d.value = "offsetWidth" in r ? r.offsetWidth : t.width, a.value = "offsetHeight" in r ? r.offsetHeight : t.height);
   });
-  const s = W(() => I(e), (d) => {
-    r.value = d ? t.width : 0, a.value = d ? t.height : 0;
+  const s = W(() => I(e), (r) => {
+    d.value = r ? t.width : 0, a.value = r ? t.height : 0;
   });
   function c() {
     u(), s();
   }
   return {
-    width: r,
+    width: d,
     height: a,
     stop: c
   };
 }
-const Ge = /* @__PURE__ */ b({
+const Ye = /* @__PURE__ */ b({
   __name: "XCheckbox",
   props: /* @__PURE__ */ B({
     data: {},
@@ -224,22 +224,22 @@ const Ge = /* @__PURE__ */ b({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = x(e, "modelValue"), o = /* @__PURE__ */ Q(() => e.data, e.factory), n = V(() => [...o.value]), l = (s) => {
+    const t = T(e, "modelValue"), l = /* @__PURE__ */ Q(() => e.data, e.factory), n = C(() => [...l.value]), o = (s) => {
       if (typeof s == "object") {
         if (e.identify)
           return e.identify(s);
         throw new Error("`identify` is required when value's type extends `object` or `object[]`");
       } else
         return s;
-    }, i = (s) => n.value.map((c) => c.value).find((c) => l(c) === s), r = V(() => n.value.map((s) => {
-      const c = l(s.value);
+    }, i = (s) => n.value.map((c) => c.value).find((c) => o(c) === s), d = C(() => n.value.map((s) => {
+      const c = o(s.value);
       return {
         ...s,
         key: c,
         value: c
       };
-    })), a = V({
-      get: () => t.value && t.value.map(l),
+    })), a = C({
+      get: () => t.value && t.value.map(o),
       set: (s) => t.value = Array.isArray(s) ? s.map((c) => i(c)) : []
     }), u = p(k, void 0);
     if (u?.required) {
@@ -249,23 +249,23 @@ const Ge = /* @__PURE__ */ b({
       } = u;
       u.validator = () => !t.value || Array.isArray(t.value) && t.value.length === 0 ? `请选择${c}` : s?.();
     }
-    return (s, c) => (m(), y(h(ye), C({
+    return (s, c) => (m(), y(h(ye), V({
       modelValue: a.value,
-      "onUpdate:modelValue": c[0] || (c[0] = (d) => a.value = d)
+      "onUpdate:modelValue": c[0] || (c[0] = (r) => a.value = r)
     }, {
       disabled: e.disabled,
       size: e.size
     }), {
-      default: g(() => [(m(!0), j(Y, null, J(r.value, (d) => (m(), y(h(ve), {
-        key: d.key,
-        disabled: d.disabled,
-        label: d.label,
-        value: d.value
+      default: v(() => [(m(!0), j(Y, null, J(d.value, (r) => (m(), y(h(ve), {
+        key: r.key,
+        disabled: r.disabled,
+        label: r.label,
+        value: r.value
       }, null, 8, ["disabled", "label", "value"]))), 128))]),
       _: 1
     }, 16, ["modelValue"]));
   }
-}), Ye = /* @__PURE__ */ b({
+}), Je = /* @__PURE__ */ b({
   __name: "XColorPicker",
   props: /* @__PURE__ */ B({
     clearable: {
@@ -281,21 +281,21 @@ const Ge = /* @__PURE__ */ b({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, o = x(e, "modelValue"), n = p(k, void 0);
+    const t = e, l = T(e, "modelValue"), n = p(k, void 0);
     if (n?.required) {
       const {
         validator: a,
         label: u
       } = n;
-      n.validator = () => o.value ? a?.() : `请输入${u}`;
+      n.validator = () => l.value ? a?.() : `请输入${u}`;
     }
-    const l = p(P, void 0), i = p(D, void 0), r = p(H, void 0);
-    return i?.on(([a, u]) => l === a && u === void 0 && (o.value = void 0)), r?.on(() => l && i?.trigger([l, o.value])), (a, u) => (m(), y(h(ge), C(t, {
-      modelValue: o.value,
-      "onUpdate:modelValue": u[0] || (u[0] = (s) => o.value = s)
+    const o = p(P, void 0), i = p(D, void 0), d = p(H, void 0);
+    return i?.on(([a, u]) => o === a && u === void 0 && (l.value = void 0)), d?.on(() => o && i?.trigger([o, l.value])), (a, u) => (m(), y(h(ge), V(t, {
+      modelValue: l.value,
+      "onUpdate:modelValue": u[0] || (u[0] = (s) => l.value = s)
     }), null, 16, ["modelValue"]));
   }
-}), Je = /* @__PURE__ */ b({
+}), Ze = /* @__PURE__ */ b({
   __name: "XDialog",
   props: /* @__PURE__ */ B({
     title: {},
@@ -310,27 +310,27 @@ const Ge = /* @__PURE__ */ b({
   setup(e) {
     const {
       header: t,
-      footer: o
-    } = se(), n = x(e, "modelValue");
-    return (l, i) => (m(), y(h(he), {
+      footer: l
+    } = se(), n = T(e, "modelValue");
+    return (o, i) => (m(), y(h(he), {
       modelValue: n.value,
-      "onUpdate:modelValue": i[0] || (i[0] = (r) => n.value = r),
+      "onUpdate:modelValue": i[0] || (i[0] = (d) => n.value = d),
       title: e.title,
       "body-class": `flex flex-col ${e.bodyClass}`
     }, ce({
-      default: g(() => [E(l.$slots, "default")]),
+      default: v(() => [E(o.$slots, "default")]),
       _: 2
     }, [t ? {
       name: "header",
-      fn: g(() => [E(l.$slots, "header")]),
+      fn: v(() => [E(o.$slots, "header")]),
       key: "0"
-    } : void 0, o ? {
+    } : void 0, l ? {
       name: "footer",
-      fn: g(() => [E(l.$slots, "footer")]),
+      fn: v(() => [E(o.$slots, "footer")]),
       key: "1"
     } : void 0]), 1032, ["modelValue", "title", "body-class"]));
   }
-}), Ze = /* @__PURE__ */ b({
+}), et = /* @__PURE__ */ b({
   __name: "XDivider",
   props: {
     direction: {},
@@ -339,46 +339,46 @@ const Ge = /* @__PURE__ */ b({
   },
   setup(e) {
     const t = e;
-    return (o, n) => (m(), y(h(Be), O(M(t)), {
-      default: g(() => [
-        E(o.$slots, "default")
+    return (l, n) => (m(), y(h(Be), O(M(t)), {
+      default: v(() => [
+        E(l.$slots, "default")
       ]),
       _: 3
     }, 16));
   }
-}), et = /* @__PURE__ */ b((e, {
+}), tt = /* @__PURE__ */ b((e, {
   expose: t
 }) => {
-  const o = p(le, void 0), n = p(Pe, void 0), l = F(), i = {
+  const l = p(le, void 0), n = p(Re, void 0), o = F(), i = {
     label: e.label,
     required: e.required,
     clearValidate() {
-      l.value = void 0;
+      o.value = void 0;
     },
     validate() {
-      return l.value = i.validator?.() ?? void 0, l.value && o?.name && (ee({
+      return o.value = i.validator?.() ?? void 0, o.value && l?.name && (ee({
         plain: !0,
         type: "warning",
-        message: l.value
-      }), n?.trigger(o.name)), !l.value;
+        message: o.value
+      }), n?.trigger(l.name)), !o.value;
     }
   };
   return p(te, void 0)?.push(i), $(k, i), t({
     ...i
-  }), $(P, e.label), () => z(Ve, C({
+  }), $(P, e.label), () => z(Ve, V({
     label: e.label,
     labelPosition: e.labelPosition,
     labelWidth: e.labelWidth,
     required: e.required
   }, {
-    error: l.value
+    error: o.value
   }), {
     label: () => e.label,
     default: () => e.content?.()
   });
 }, {
   props: ["label", "required", "content", "tooltip"]
-}), tt = /* @__PURE__ */ b({
+}), at = /* @__PURE__ */ b({
   __name: "XForm",
   props: {
     content: {
@@ -404,22 +404,22 @@ const Ge = /* @__PURE__ */ b({
   setup(e, {
     expose: t
   }) {
-    const o = F(), n = [];
+    const l = F(), n = [];
     $(te, n);
-    const l = () => n.every((a) => a.validate()), i = () => {
-      o.value?.resetFields(), n.forEach((a) => a.clearValidate());
+    const o = () => n.every((a) => a.validate()), i = () => {
+      l.value?.resetFields(), n.forEach((a) => a.clearValidate());
     };
     t({
       data: e.data,
-      validate: l,
+      validate: o,
       resetFields: i
     });
-    const r = () => e.content?.({
+    const d = () => e.content?.({
       data: e.data
     });
-    return (a, u) => (m(), y(h(we), C({
+    return (a, u) => (m(), y(h(we), V({
       ref_key: "form",
-      ref: o
+      ref: l
     }, {
       inline: e.inline,
       disabled: e.disabled,
@@ -428,11 +428,11 @@ const Ge = /* @__PURE__ */ b({
       labelPosition: e.labelPosition,
       statusIcon: e.statusIcon
     }), {
-      default: g(() => [z(r)]),
+      default: v(() => [z(d)]),
       _: 1
     }, 16));
   }
-}), at = /* @__PURE__ */ b({
+}), lt = /* @__PURE__ */ b({
   __name: "XImage",
   props: {
     hideOnClickModal: { type: Boolean },
@@ -456,9 +456,9 @@ const Ge = /* @__PURE__ */ b({
   },
   setup(e) {
     const t = e;
-    return (o, n) => (m(), y(h(Ce), O(M(t)), null, 16));
+    return (l, n) => (m(), y(h(Ce), O(M(t)), null, 16));
   }
-}), lt = /* @__PURE__ */ b({
+}), ot = /* @__PURE__ */ b({
   __name: "XInput",
   props: /* @__PURE__ */ B({
     clearable: {
@@ -485,27 +485,27 @@ const Ge = /* @__PURE__ */ b({
   setup(e, {
     emit: t
   }) {
-    const o = e, n = t, l = x(e, "modelValue"), i = p(k, void 0);
+    const l = e, n = t, o = T(e, "modelValue"), i = p(k, void 0);
     if (i?.required) {
       const {
-        validator: d,
+        validator: r,
         label: w
       } = i;
-      i.validator = () => l.value ? d?.() : `请输入${w}`;
+      i.validator = () => o.value ? r?.() : `请输入${w}`;
     }
-    const r = p(P, void 0), a = p(D, void 0), u = p(H, void 0);
-    a?.on(([d, w]) => r === d && w === void 0 && (l.value = void 0)), u?.on(() => r && a?.trigger([r, l.value]));
-    const s = (d) => n("change", d), c = () => {
+    const d = p(P, void 0), a = p(D, void 0), u = p(H, void 0);
+    a?.on(([r, w]) => d === r && w === void 0 && (o.value = void 0)), u?.on(() => d && a?.trigger([d, o.value]));
+    const s = (r) => n("change", r), c = () => {
       i?.validate(), n("blur");
     };
-    return (d, w) => (m(), y(h(Ee), C(o, {
-      modelValue: l.value,
-      "onUpdate:modelValue": w[0] || (w[0] = (T) => l.value = T),
+    return (r, w) => (m(), y(h(Ee), V(l, {
+      modelValue: o.value,
+      "onUpdate:modelValue": w[0] || (w[0] = (x) => o.value = x),
       onBlur: c,
       onChange: s
     }), null, 16, ["modelValue"]));
   }
-}), ot = /* @__PURE__ */ b({
+}), nt = /* @__PURE__ */ b({
   __name: "XInputNumber",
   props: /* @__PURE__ */ B({
     placeholder: {
@@ -537,27 +537,27 @@ const Ge = /* @__PURE__ */ b({
   setup(e, {
     emit: t
   }) {
-    const o = e, n = t, l = x(e, "modelValue"), i = p(k, void 0);
+    const l = e, n = t, o = T(e, "modelValue"), i = p(k, void 0);
     if (i?.required) {
       const {
         validator: a,
         label: u
       } = i;
-      i.validator = () => l.value === void 0 ? `请输入${u}` : a?.();
+      i.validator = () => o.value === void 0 ? `请输入${u}` : a?.();
     }
-    const r = () => {
+    const d = () => {
       i?.validate(), n("blur");
     };
     return (a, u) => {
       const s = U("ElInputNumber");
-      return m(), y(s, C(o, {
-        modelValue: l.value,
-        "onUpdate:modelValue": u[0] || (u[0] = (c) => l.value = c),
-        onBlur: r
+      return m(), y(s, V(l, {
+        modelValue: o.value,
+        "onUpdate:modelValue": u[0] || (u[0] = (c) => o.value = c),
+        onBlur: d
       }), null, 16, ["modelValue"]);
     };
   }
-}), nt = /* @__PURE__ */ b({
+}), it = /* @__PURE__ */ b({
   __name: "XPagination",
   props: /* @__PURE__ */ B({
     sizes: { default: () => [20, 50, 100] },
@@ -590,17 +590,17 @@ const Ge = /* @__PURE__ */ b({
   }),
   emits: /* @__PURE__ */ B(["sizeChange", "currentChange"], ["update:size", "update:current"]),
   setup(e, { emit: t }) {
-    const o = t, n = x(e, "size"), l = x(e, "current");
-    return (i, r) => (m(), y(h(xe), C({ background: e.background, pageSizes: e.sizes, layout: e.layout, total: e.total }, {
-      "current-page": l.value,
-      "onUpdate:currentPage": r[0] || (r[0] = (a) => l.value = a),
+    const l = t, n = T(e, "size"), o = T(e, "current");
+    return (i, d) => (m(), y(h(Te), V({ background: e.background, pageSizes: e.sizes, layout: e.layout, total: e.total }, {
+      "current-page": o.value,
+      "onUpdate:currentPage": d[0] || (d[0] = (a) => o.value = a),
       "page-size": n.value,
-      "onUpdate:pageSize": r[1] || (r[1] = (a) => n.value = a),
-      onSizeChange: r[2] || (r[2] = (a) => o("sizeChange", a)),
-      onCurrentChange: r[3] || (r[3] = (a) => o("currentChange", a))
+      "onUpdate:pageSize": d[1] || (d[1] = (a) => n.value = a),
+      onSizeChange: d[2] || (d[2] = (a) => l("sizeChange", a)),
+      onCurrentChange: d[3] || (d[3] = (a) => l("currentChange", a))
     }), null, 16, ["current-page", "page-size"]));
   }
-}), it = /* @__PURE__ */ b({
+}), dt = /* @__PURE__ */ b({
   __name: "XRate",
   props: /* @__PURE__ */ B({
     ariaLabel: {},
@@ -640,10 +640,10 @@ const Ge = /* @__PURE__ */ b({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, o = x(e, "modelValue");
-    return (n, l) => (m(), y(h(Te), C(t, {
-      modelValue: o.value,
-      "onUpdate:modelValue": l[0] || (l[0] = (i) => o.value = i)
+    const t = e, l = T(e, "modelValue");
+    return (n, o) => (m(), y(h(xe), V(t, {
+      modelValue: l.value,
+      "onUpdate:modelValue": o[0] || (o[0] = (i) => l.value = i)
     }), null, 16, ["modelValue"]));
   }
 }), rt = /* @__PURE__ */ b({
@@ -653,23 +653,23 @@ const Ge = /* @__PURE__ */ b({
   },
   emits: ["cancel", "confirm"],
   setup(e, { emit: t }) {
-    const o = t;
-    return (n, l) => {
+    const l = t;
+    return (n, o) => {
       const i = U("XButton");
       return m(), y(h(Xe), {
         title: e.title,
-        onCancel: l[0] || (l[0] = () => o("cancel")),
-        onConfirm: l[1] || (l[1] = () => o("confirm"))
+        onCancel: o[0] || (o[0] = () => l("cancel")),
+        onConfirm: o[1] || (o[1] = () => l("confirm"))
       }, {
-        reference: g(() => [
+        reference: v(() => [
           E(n.$slots, "default")
         ]),
-        actions: g(({ confirm: r, cancel: a }) => [
+        actions: v(({ confirm: d, cancel: a }) => [
           z(i, {
             size: "small",
             onClick: a
           }, {
-            default: g(() => [...l[2] || (l[2] = [
+            default: v(() => [...o[2] || (o[2] = [
               q(" 取消 ", -1)
             ])]),
             _: 1
@@ -677,9 +677,9 @@ const Ge = /* @__PURE__ */ b({
           z(i, {
             type: "danger",
             size: "small",
-            onClick: r
+            onClick: d
           }, {
-            default: g(() => [...l[3] || (l[3] = [
+            default: v(() => [...o[3] || (o[3] = [
               q(" 确定 ", -1)
             ])]),
             _: 1
@@ -689,7 +689,7 @@ const Ge = /* @__PURE__ */ b({
       }, 8, ["title"]);
     };
   }
-}), dt = /* @__PURE__ */ b({
+}), ut = /* @__PURE__ */ b({
   __name: "XScrollbar",
   props: {
     ariaLabel: {},
@@ -719,18 +719,18 @@ const Ge = /* @__PURE__ */ b({
   setup(e, {
     expose: t
   }) {
-    const o = e, n = Z("scrollbar"), l = V(() => n.value?.wrapRef), i = V(() => l.value?.firstElementChild);
+    const l = e, n = Z("scrollbar"), o = C(() => n.value?.wrapRef), i = C(() => o.value?.firstElementChild);
     return t({
-      wrapRef: l,
+      wrapRef: o,
       viewRef: i
-    }), (r, a) => (m(), y(h(Se), C({
+    }), (d, a) => (m(), y(h(Se), V({
       ref: "scrollbar"
-    }, o), {
-      default: g(() => [E(r.$slots, "default")]),
+    }, l), {
+      default: v(() => [E(d.$slots, "default")]),
       _: 3
     }, 16));
   }
-}), ut = /* @__PURE__ */ b({
+}), st = /* @__PURE__ */ b({
   __name: "XSelect",
   props: /* @__PURE__ */ B({
     data: {},
@@ -841,52 +841,52 @@ const Ge = /* @__PURE__ */ b({
   setup(e, {
     emit: t
   }) {
-    const o = t, n = x(e, "modelValue"), l = F([]), i = /* @__PURE__ */ Q(() => e.data, e.factory), r = V(() => [...(/* @__PURE__ */ Q(l, e.factory)).value, ...i.value]), a = (f) => {
+    const l = t, n = T(e, "modelValue"), o = F([]), i = /* @__PURE__ */ Q(() => e.data, e.factory), d = C(() => [...(/* @__PURE__ */ Q(o, e.factory)).value, ...i.value]), a = (f) => {
       if (typeof f == "object") {
         if (e.identify)
           return e.identify(f);
         throw new Error("`identify` is required when value's type extends `object` or `object[]`");
       } else
         return f;
-    }, u = (f) => r.value.map((v) => v.value).find((v) => a(v) === f);
+    }, u = (f) => d.value.map((g) => g.value).find((g) => a(g) === f);
     let s = 0;
     W([n, i], async () => {
       if (s++, n.value) {
-        const f = [].concat(n.value).filter((_) => !i.value.map((S) => a(S.value)).includes(a(_))), v = s, R = await e.supplement?.(f);
-        v === s && R && (l.value = R);
+        const f = [].concat(n.value).filter((_) => !i.value.map((S) => a(S.value)).includes(a(_))), g = s, R = await e.supplement?.(f);
+        g === s && R && (o.value = R);
       } else
-        l.value = [];
+        o.value = [];
     }, {
       immediate: !0
     });
-    const c = V(() => r.value.map((f) => {
-      const v = a(f.value);
+    const c = C(() => d.value.map((f) => {
+      const g = a(f.value);
       return {
         ...f,
-        key: v,
-        value: v
+        key: g,
+        value: g
       };
-    })), d = V({
+    })), r = C({
       get: () => n.value && (Array.isArray(n.value) ? n.value.map(a) : a(n.value)),
       set: (f) => {
-        Array.isArray(f) ? n.value = f.map((v) => u(v)) : n.value = f === void 0 ? void 0 : u(f) || (e.allowCreate ? f : void 0);
+        Array.isArray(f) ? n.value = f.map((g) => u(g)) : n.value = f === void 0 ? void 0 : u(f) || (e.allowCreate ? f : void 0);
       }
     }), w = p(k, void 0);
     if (w?.required) {
       const {
         validator: f,
-        label: v
+        label: g
       } = w;
-      w.validator = () => !n.value || Array.isArray(n.value) && n.value.length === 0 ? `请选择${v}` : f?.();
+      w.validator = () => !n.value || Array.isArray(n.value) && n.value.length === 0 ? `请选择${g}` : f?.();
     }
-    const T = p(P, void 0), X = p(D, void 0), A = p(H, void 0);
-    X?.on(([f, v]) => T === f && v === void 0 && (d.value = void 0)), A?.on(() => T && X?.trigger([T, d.value === void 0 ? void 0 : [].concat(d.value).map((f) => c.value.find((v) => v.value === f).label).join(",")]));
-    const ne = (f) => o("change", f), ie = () => {
-      w?.validate(), o("blur");
+    const x = p(P, void 0), X = p(D, void 0), A = p(H, void 0);
+    X?.on(([f, g]) => x === f && g === void 0 && (r.value = void 0)), A?.on(() => x && X?.trigger([x, r.value === void 0 ? void 0 : [].concat(r.value).map((f) => c.value.find((g) => g.value === f).label).join(",")]));
+    const ne = (f) => l("change", f), ie = () => {
+      w?.validate(), l("blur");
     };
-    return (f, v) => {
+    return (f, g) => {
       const R = U("ElOption"), _ = U("ElSelect");
-      return m(), y(_, C({
+      return m(), y(_, V({
         allowCreate: e.allowCreate,
         clearable: e.clearable,
         filterable: e.filterable,
@@ -900,24 +900,24 @@ const Ge = /* @__PURE__ */ b({
         collapseTags: e.collapseTags,
         collapseTagsTooltip: e.collapseTags
       }, {
-        modelValue: d.value,
-        "onUpdate:modelValue": v[0] || (v[0] = (S) => d.value = S),
+        modelValue: r.value,
+        "onUpdate:modelValue": g[0] || (g[0] = (S) => r.value = S),
         onBlur: ie,
         onChange: ne
       }), {
-        default: g(() => [(m(!0), j(Y, null, J(c.value, (S) => (m(), y(R, {
+        default: v(() => [(m(!0), j(Y, null, J(c.value, (S) => (m(), y(R, {
           key: S.key,
           label: S.label,
           value: S.value
         }, {
-          default: g(() => [q(fe(S.label), 1)]),
+          default: v(() => [q(fe(S.label), 1)]),
           _: 2
         }, 1032, ["label", "value"]))), 128))]),
         _: 1
       }, 16, ["modelValue"]);
     };
   }
-}), st = /* @__PURE__ */ b({
+}), ct = /* @__PURE__ */ b({
   __name: "XSpace",
   props: {
     direction: {},
@@ -937,12 +937,12 @@ const Ge = /* @__PURE__ */ b({
   },
   setup(e) {
     const t = e;
-    return (o, n) => (m(), y(h(ze), O(M(t)), {
-      default: g(() => [E(o.$slots, "default")]),
+    return (l, n) => (m(), y(h(ze), O(M(t)), {
+      default: v(() => [E(l.$slots, "default")]),
       _: 3
     }, 16));
   }
-}), ct = /* @__PURE__ */ b({
+}), ft = /* @__PURE__ */ b({
   __name: "XTable",
   props: {
     data: {},
@@ -965,19 +965,19 @@ const Ge = /* @__PURE__ */ b({
   setup(e, {
     emit: t
   }) {
-    const o = t, n = Z("container"), l = F(), i = qe(n), r = V(() => e.height ?? i.height.value), a = () => z(ke, C({
-      ref: l
+    const l = t, n = Z("container"), o = F(), i = Qe(n), d = C(() => e.height ?? i.height.value), a = () => z(ke, V({
+      ref: o
     }, {
       data: e.data,
-      height: r.value,
+      height: d.value,
       showOverflowTooltip: e.showOverflowTooltip,
       border: e.border,
       highlightCurrentRow: e.highlightCurrentRow,
       spanMethod: e.spanMethod
     }, {
-      "onRow-click": (u) => o("rowClick", u),
-      "onSelection-change": (u) => o("selectionChange", u),
-      "onHeader-dragend": (u, s, c) => o("headerDragend", u, s, c)
+      "onRow-click": (u) => l("rowClick", u),
+      "onSelection-change": (u) => l("selectionChange", u),
+      "onHeader-dragend": (u, s, c) => l("headerDragend", u, s, c)
     }), {
       default: () => e.columns.map((u) => z(Ie, u, {
         default: ({
@@ -998,18 +998,18 @@ const Ge = /* @__PURE__ */ b({
       class: me([e.height === void 0 && "h-full"])
     }, [z(a)], 2));
   }
-}), ft = /* @__PURE__ */ b((e, {
+}), mt = /* @__PURE__ */ b((e, {
   slots: t
 }) => {
-  const o = {
+  const l = {
     ...e
   };
-  return p(ae, void 0)?.push(o), $(le, o), () => z($e, e, {
+  return p(ae, void 0)?.push(l), $(le, l), () => z($e, e, {
     ...t
   });
 }, {
   props: ["label", "name", "closable", "lazy", "disabled"]
-}), mt = /* @__PURE__ */ b({
+}), pt = /* @__PURE__ */ b({
   __name: "XTabs",
   props: /* @__PURE__ */ B({
     type: {},
@@ -1033,8 +1033,8 @@ const Ge = /* @__PURE__ */ b({
   setup(e, {
     emit: t
   }) {
-    const o = t, n = x(e, "modelValue");
-    return $(ae, []), (i, r) => (m(), y(h(Ae), C({
+    const l = t, n = T(e, "modelValue");
+    return $(ae, []), (i, d) => (m(), y(h(Ae), V({
       addable: e.addable,
       editable: e.editable,
       type: e.type,
@@ -1042,15 +1042,36 @@ const Ge = /* @__PURE__ */ b({
       tabPosition: e.tabPosition
     }, {
       modelValue: n.value,
-      "onUpdate:modelValue": r[0] || (r[0] = (a) => n.value = a),
-      onTabChange: r[1] || (r[1] = (a) => o("tabChange", a)),
-      onTabRemove: r[2] || (r[2] = (a) => o("tabRemove", a))
+      "onUpdate:modelValue": d[0] || (d[0] = (a) => n.value = a),
+      onTabChange: d[1] || (d[1] = (a) => l("tabChange", a)),
+      onTabRemove: d[2] || (d[2] = (a) => l("tabRemove", a))
     }), {
-      default: g(() => [E(i.$slots, "default")]),
+      default: v(() => [E(i.$slots, "default")]),
       _: 3
     }, 16, ["modelValue"]));
   }
-}), pt = /* @__PURE__ */ b({
+}), bt = /* @__PURE__ */ b({
+  __name: "XTag",
+  props: {
+    type: {},
+    color: {},
+    closable: { type: Boolean, default: () => {
+    } },
+    round: { type: Boolean, default: () => {
+    } }
+  },
+  emits: ["close"],
+  setup(e) {
+    return (t, l) => (m(), y(h(Oe), V({ type: e.type, color: e.color, closable: e.closable, round: e.round }, {
+      onClose: l[0] || (l[0] = (n) => t.$emit("close"))
+    }), {
+      default: v(() => [
+        E(t.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+}), yt = /* @__PURE__ */ b({
   __name: "XText",
   props: {
     type: {},
@@ -1059,14 +1080,14 @@ const Ge = /* @__PURE__ */ b({
     } }
   },
   setup(e) {
-    return (t, o) => (m(), y(h(Oe), O(M({ type: e.type, size: e.size, truncated: e.truncated })), {
-      default: g(() => [
+    return (t, l) => (m(), y(h(Me), O(M({ type: e.type, size: e.size, truncated: e.truncated })), {
+      default: v(() => [
         E(t.$slots, "default")
       ]),
       _: 3
     }, 16));
   }
-}), bt = /* @__PURE__ */ b({
+}), vt = /* @__PURE__ */ b({
   __name: "XUpload",
   props: /* @__PURE__ */ B({
     action: {},
@@ -1100,7 +1121,7 @@ const Ge = /* @__PURE__ */ b({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = x(e, "modelValue"), o = V(() => [].concat(t.value ?? []).reverse().map((a) => ({
+    const t = T(e, "modelValue"), l = C(() => [].concat(t.value ?? []).reverse().map((a) => ({
       name: a.split("/").findLast(() => !0),
       url: a,
       uid: Number(a.slice(0, a.lastIndexOf("/")).split("/").findLast(() => !0))
@@ -1112,56 +1133,57 @@ const Ge = /* @__PURE__ */ b({
       } = n;
       n.validator = () => !t.value || Array.isArray(t.value) && t.value.length === 0 ? `请上传${u}` : a?.();
     }
-    const l = (a) => (a.size > e.maxSize && ee.warning("文件过大,请重新选择"), a.size < e.maxSize), i = (a) => window.open(a.url), r = (a, u) => {
+    const o = (a) => (a.size > e.maxSize && ee.warning("文件过大,请重新选择"), a.size < e.maxSize), i = (a) => window.open(a.url), d = (a, u) => {
       t.value = Array.isArray(t.value) ? u.map((s) => s.url) : void 0;
     };
-    return (a, u) => (m(), y(h(Me), O(M({
+    return (a, u) => (m(), y(h(Pe), O(M({
       limit: e.limit,
       disabled: e.disabled,
       data: e.data,
       maxSize: e.maxSize,
       showFileList: e.showFileList,
-      fileList: o.value,
-      beforeUpload: l,
+      fileList: l.value,
+      beforeUpload: o,
       onPreview: i,
-      onRemove: r
+      onRemove: d
     })), {
-      file: g(({
+      file: v(({
         file: s
       }) => [E(a.$slots, "file", {
         file: s
       })]),
-      default: g(() => [E(a.$slots, "default")]),
+      default: v(() => [E(a.$slots, "default")]),
       _: 3
     }, 16));
   }
 });
 export {
-  je as XButton,
-  Ke as XCascader,
-  Ge as XCheckbox,
-  Ye as XColorPicker,
-  Je as XDialog,
-  Ze as XDivider,
-  tt as XForm,
-  et as XFormItem,
-  at as XImage,
-  lt as XInput,
-  ot as XInputNumber,
-  nt as XPagination,
-  it as XRate,
+  Ke as XButton,
+  Ge as XCascader,
+  Ye as XCheckbox,
+  Je as XColorPicker,
+  Ze as XDialog,
+  et as XDivider,
+  at as XForm,
+  tt as XFormItem,
+  lt as XImage,
+  ot as XInput,
+  nt as XInputNumber,
+  it as XPagination,
+  dt as XRate,
   rt as XReconfirm,
-  dt as XScrollbar,
-  ut as XSelect,
-  st as XSpace,
-  ft as XTabPane,
-  ct as XTable,
-  mt as XTabs,
-  pt as XText,
-  bt as XUpload,
+  ut as XScrollbar,
+  st as XSelect,
+  ct as XSpace,
+  mt as XTabPane,
+  ft as XTable,
+  pt as XTabs,
+  bt as XTag,
+  yt as XText,
+  vt as XUpload,
   P as X_FORM_ITEM_LABEL,
   k as X_FORM_ITEM_VALIDATION,
-  Pe as X_FORM_TAB_UPDATE_HOOK,
+  Re as X_FORM_TAB_UPDATE_HOOK,
   te as X_FORM_VALIDATIONS,
   H as X_TABLE_QUERY_EXECUTE_HOOK,
   D as X_TABLE_QUERY_UPDATE_HOOK,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pungfe/element",
   "type": "module",
-  "version": "0.0.1-alpha.7",
+  "version": "0.0.1-alpha.9",
   "description": "Element Plus Components",
   "author": "pungfen <fp94214@gmail.com> (https://github.com/pungfen/)",
   "license": "MIT",