@farris/ui-vue 1.3.1 → 1.3.3

package/components/capsule/index.esm.js

@@ -1,4 +1,4 @@
-import { defineComponent as N, ref as m, watch as D, computed as V, onMounted as P, createVNode as M, nextTick as T, inject as Q } from "vue";
+import { defineComponent as F, ref as m, watch as P, computed as S, onMounted as T, createVNode as w, nextTick as k, inject as Q } from "vue";
 import { isPlainObject as L, cloneDeep as U } from "lodash-es";
 import { withInstall as X } from "../common/index.esm.js";
 const Y = "https://json-schema.org/draft/2020-12/schema", Z = "https://farris-design.gitee.io/capsule.schema.json", I = "capsule", K = "A Farris Component", x = "object", ee = {
@@ -75,114 +75,118 @@ const Y = "https://json-schema.org/draft/2020-12/schema", Z = "https://farris-de
   properties: ee,
   required: te
 }, q = {}, _ = {};
-function F(n) {
-  const { properties: e, title: r, ignore: a } = n, s = a && Array.isArray(a), o = Object.keys(e).reduce((p, h) => ((!s || !a.find((O) => O == h)) && (p[h] = e[h].type === "object" && e[h].properties ? F(e[h]) : U(e[h].default)), p), {});
-  return r && (!s || !a.find((p) => p == "id")) && (o.id = `${r}-${Date.now()}`), o;
+function C(t) {
+  const { properties: e, title: r, ignore: l } = t, s = l && Array.isArray(l), o = Object.keys(e).reduce((i, h) => ((!s || !l.find((A) => A === h)) && (i[h] = e[h].type === "object" && e[h].properties ? C(e[h]) : U(e[h].default)), i), {});
+  if (r && (!s || !l.find((i) => i === "id"))) {
+    const i = r.toLowerCase().replace(/-/g, "_");
+    o.id = `${i}_${Math.random().toString().slice(2, 6)}`;
+  }
+  return o;
 }
-function z(n, e = {}, r) {
-  const a = q[n];
-  if (a) {
-    let s = F(a);
-    const o = _[n];
-    return s = o ? o({ getSchemaByType: z }, s, e, r) : s, s;
+function H(t, e = {}, r) {
+  const l = q[t];
+  if (l) {
+    let s = C(l);
+    const o = _[t];
+    return s = o ? o({ getSchemaByType: H }, s, e, r) : s, s;
   }
   return null;
 }
-function ae(n, e) {
-  const r = F(e);
-  return Object.keys(n).reduce((a, s) => (a[s] && L(a[s]) && L(n[s]) ? Object.assign(a[s], n[s]) : a[s] = n[s], a), r), r;
+function ae(t, e) {
+  const r = C(e);
+  return Object.keys(r).reduce((l, s) => (l[s] && L(l[s]) && L(t[s] || !t[s]) ? Object.assign(l[s], t[s] || {}) : l[s] = t[s], l), r), r;
 }
-function le(n, e) {
-  return Object.keys(n).filter((a) => n[a] != null).reduce((a, s) => {
+function le(t, e) {
+  return Object.keys(t).filter((l) => t[l] != null).reduce((l, s) => {
     if (e.has(s)) {
       const o = e.get(s);
       if (typeof o == "string")
-        a[o] = n[s];
+        l[o] = t[s];
       else {
-        const p = o(s, n[s], n);
-        Object.assign(a, p);
+        const i = o(s, t[s], t);
+        Object.assign(l, i);
       }
     } else
-      a[s] = n[s];
-    return a;
+      l[s] = t[s];
+    return l;
   }, {});
 }
-function se(n, e, r = /* @__PURE__ */ new Map()) {
-  const a = ae(n, e);
-  return le(a, r);
+function se(t, e, r = /* @__PURE__ */ new Map()) {
+  const l = ae(t, e);
+  return le(l, r);
 }
-function ce(n = {}) {
-  function e(c, f, i, d) {
-    if (typeof i == "number")
-      return d[c].length === i;
-    if (typeof i == "object") {
-      const y = Object.keys(i)[0], g = i[y];
+function ce(t = {}) {
+  function e(c, p, f, v) {
+    if (typeof f == "number")
+      return v[c].length === f;
+    if (typeof f == "object") {
+      const y = Object.keys(f)[0], b = f[y];
       if (y === "not")
-        return Number(d[c].length) !== Number(g);
+        return Number(v[c].length) !== Number(b);
       if (y === "moreThan")
-        return Number(d[c].length) >= Number(g);
+        return Number(v[c].length) >= Number(b);
       if (y === "lessThan")
-        return Number(d[c].length) <= Number(g);
+        return Number(v[c].length) <= Number(b);
     }
     return !1;
   }
-  function r(c, f, i, d) {
-    return d[c] && d[c].propertyValue && String(d[c].propertyValue.value) === String(i);
+  function r(c, p, f, v) {
+    return v[c] && v[c].propertyValue && String(v[c].propertyValue.value) === String(f);
   }
-  const a = /* @__PURE__ */ new Map([
+  const l = /* @__PURE__ */ new Map([
     ["length", e],
     ["getProperty", r]
   ]);
-  Object.keys(n).reduce((c, f) => (c.set(f, n[f]), c), a);
-  function s(c, f) {
-    const i = c;
-    return typeof f == "number" ? [{ target: i, operator: "length", param: null, value: Number(f) }] : typeof f == "boolean" ? [{ target: i, operator: "getProperty", param: c, value: !!f }] : typeof f == "object" ? Object.keys(f).map((d) => {
-      if (d === "length")
-        return { target: i, operator: "length", param: null, value: f[d] };
-      const y = d, g = f[d];
-      return { target: i, operator: "getProperty", param: y, value: g };
+  Object.keys(t).reduce((c, p) => (c.set(p, t[p]), c), l);
+  function s(c, p) {
+    const f = c;
+    return typeof p == "number" ? [{ target: f, operator: "length", param: null, value: Number(p) }] : typeof p == "boolean" ? [{ target: f, operator: "getProperty", param: c, value: !!p }] : typeof p == "object" ? Object.keys(p).map((v) => {
+      if (v === "length")
+        return { target: f, operator: "length", param: null, value: p[v] };
+      const y = v, b = p[v];
+      return { target: f, operator: "getProperty", param: y, value: b };
     }) : [];
   }
   function o(c) {
-    return Object.keys(c).reduce((i, d) => {
-      const y = s(d, c[d]);
-      return i.push(...y), i;
+    return Object.keys(c).reduce((f, v) => {
+      const y = s(v, c[v]);
+      return f.push(...y), f;
     }, []);
   }
-  function p(c, f) {
-    if (a.has(c.operator)) {
-      const i = a.get(c.operator);
-      return i && i(c.target, c.param, c.value, f) || !1;
+  function i(c, p) {
+    if (l.has(c.operator)) {
+      const f = l.get(c.operator);
+      return f && f(c.target, c.param, c.value, p) || !1;
     }
     return !1;
   }
-  function h(c, f) {
-    return o(c).reduce((y, g) => y && p(g, f), !0);
+  function h(c, p) {
+    return o(c).reduce((y, b) => y && i(b, p), !0);
   }
-  function O(c, f) {
-    const i = Object.keys(c), d = i.includes("allOf"), y = i.includes("anyOf"), g = d || y, S = (g ? c[g ? d ? "allOf" : "anyOf" : "allOf"] : [c]).map((E) => h(E, f));
-    return d ? !S.includes(!1) : S.includes(!0);
+  function A(c, p) {
+    const f = Object.keys(c), v = f.includes("allOf"), y = f.includes("anyOf"), b = v || y, $ = (b ? c[b ? v ? "allOf" : "anyOf" : "allOf"] : [c]).map((B) => h(B, p));
+    return v ? !$.includes(!1) : $.includes(!0);
   }
-  return { parseValueSchema: O };
+  return { parseValueSchema: A };
 }
 const ue = {}, re = {};
 ce();
-function oe(n, e, r = /* @__PURE__ */ new Map(), a = (p, h, O) => h, s = {}, o = (p) => p) {
-  return q[e.title] = e, _[e.title] = a, ue[e.title] = s, re[e.title] = o, (p = {}) => {
-    const h = se(p, e, r), O = Object.keys(n).reduce((c, f) => (c[f] = n[f].default, c), {});
-    return Object.assign(O, h);
+function oe(t, e, r = /* @__PURE__ */ new Map(), l = (i, h, A, c) => h, s = {}, o = (i) => i) {
+  return q[e.title] = e, _[e.title] = l, ue[e.title] = s, re[e.title] = o, (i = {}) => {
+    const h = se(i, e, r), A = Object.keys(t).reduce((c, p) => (c[p] = t[p].default, c), {});
+    return Object.assign(A, h);
   };
 }
-function ie(n, e) {
+function ie(t, e) {
   return { customClass: e.class, customStyle: e.style };
 }
 const pe = /* @__PURE__ */ new Map([
   ["appearance", ie]
 ]);
-function fe(n, e, r) {
+function fe(t, e, r) {
   return e;
 }
-const de = "capsule", ve = "A Farris Component", me = "object", ye = {
+const ve = "capsule", de = "A Farris Component", me = "object", ye = {
   basic: {
     description: "Basic Infomation",
     title: "基本信息",
@@ -205,8 +209,8 @@ const de = "capsule", ve = "A Farris Component", me = "object", ye = {
     }
   }
 }, he = {
-  title: de,
-  description: ve,
+  title: ve,
+  description: de,
   type: me,
   categories: ye
 }, W = {
@@ -222,7 +226,7 @@ const de = "capsule", ve = "A Farris Component", me = "object", ye = {
    */
   modelValue: { type: String, default: "" },
   type: { type: String, default: "primary" }
-}, ge = {
+}, be = {
   name: { type: String, default: "" },
   value: { type: String, default: "" },
   isActive: { type: Boolean, default: !1 },
@@ -230,284 +234,291 @@ const de = "capsule", ve = "A Farris Component", me = "object", ye = {
   index: { type: Number, default: 0 },
   show: { type: Boolean, default: !0 },
   disabled: { type: Boolean, default: !1 }
-}, G = oe(W, ne, pe, fe, he), H = /* @__PURE__ */ N({
+}, z = oe(W, ne, pe, fe, he), G = /* @__PURE__ */ F({
   name: "FCapsuleItem",
-  props: ge,
+  props: be,
   emits: ["mounted", "active"],
-  setup(n, e) {
-    const r = m(), a = m(n.isActive);
-    D(() => n.isActive, (p) => {
-      a.value = p;
+  setup(t, e) {
+    const r = m(), l = m(t.isActive);
+    P(() => t.isActive, (i) => {
+      l.value = i;
     });
-    const s = V(() => ({
+    const s = S(() => ({
       "f-capsule-item": !0,
-      "f-capsule-active-item": a.value,
-      "f-capsule-disabled": n.disabled
+      "f-capsule-active-item": l.value,
+      "f-capsule-disabled": t.disabled
     }));
-    P(() => {
-      e.emit("mounted", r, n.value);
+    T(() => {
+      e.emit("mounted", r, t.value);
     });
-    function o(p) {
-      n.disabled || e.emit("active", p, {
-        name: n.name,
-        value: n.value
+    function o(i) {
+      t.disabled || e.emit("active", i, {
+        name: t.name,
+        value: t.value
       });
     }
-    return () => M("div", {
+    return () => w("div", {
       ref: r,
       class: s.value,
-      onClick: (p) => o(p)
-    }, [n.icon && M("i", {
-      class: n.icon
-    }, null), n.name]);
+      onClick: (i) => o(i)
+    }, [t.icon && w("i", {
+      class: t.icon
+    }, null), t.name]);
   }
-}), k = /* @__PURE__ */ N({
+}), N = /* @__PURE__ */ F({
   name: "FCapsule",
   props: W,
   emits: ["change", "update:modelValue"],
-  setup(n, e) {
-    const r = m(n.items), a = m(), s = 2, o = m(n.modelValue), p = m("none"), h = m(n.type), O = V(() => {
-      const l = {
+  setup(t, e) {
+    const r = m(t.items), l = m(), s = 2, o = m(t.modelValue), i = m("none"), h = m(t.type), A = S(() => {
+      const a = {
         "f-capsule-container": !0
       };
-      return h.value && (l[h.value] = !0), l;
-    }), c = V(() => ({})), f = V(() => ({
+      return h.value && (a[h.value] = !0), a;
+    }), c = S(() => ({})), p = S(() => ({
       "f-capsule": !0
-    })), i = m(s), d = m(0), y = m(0), g = V(() => ({
-      left: `${i.value}px`,
-      width: `${d.value}px`,
-      transition: p.value
-    })), B = V(() => ({
+    })), f = m(s), v = m(0), y = m(0), b = S(() => ({
+      left: `${f.value}px`,
+      width: `${v.value}px`,
+      transition: i.value
+    })), V = S(() => ({
       width: `${y.value}px`
-    })), A = /* @__PURE__ */ new Map();
-    function S(l) {
-      var t;
-      if (A.has(l.value)) {
-        const u = (t = A.get(l.value)) == null ? void 0 : t.value;
+    })), M = /* @__PURE__ */ new Map();
+    function $(a) {
+      var n;
+      if (M.has(a.value)) {
+        const u = (n = M.get(a.value)) == null ? void 0 : n.value;
         if (u) {
-          const b = u.getBoundingClientRect(), $ = a.value.getBoundingClientRect();
-          i.value = b.left - $.left + s + a.value.scrollLeft, d.value = b.width - 2 * s;
+          const j = u.getBoundingClientRect(), D = l.value.getBoundingClientRect();
+          f.value = j.left - D.left + s + l.value.scrollLeft, v.value = j.width - 2 * s;
         }
       }
     }
-    function R(l, t) {
-      const u = l.value;
-      o.value = u, e.emit("update:modelValue", u), S(l), t && e.emit("change", u);
+    function R(a, n) {
+      const u = a.value;
+      o.value = u, e.emit("update:modelValue", u), $(a), n && e.emit("change", u);
     }
-    function E(l) {
-      const t = r.value.findIndex((u) => u.value === l);
-      t > -1 && R(r.value[t], !1);
+    function B(a) {
+      const n = r.value.findIndex((u) => u.value === a);
+      n > -1 && R(r.value[n], !1);
     }
-    D(() => n.modelValue, (l) => {
-      o.value = l, E(o.value);
-    }), D(() => n.items, async (l) => {
-      const t = l.filter((u) => u.show);
-      j(t), r.value = t, await T(), E(o.value), y.value = Array.from(A.values()).reduce((u, b) => (u += b.value.clientWidth, u), 0);
-    }), P(async () => {
-      E(o.value), await T(), p.value = "0.1s ease-out all", y.value = Array.from(A.values()).reduce((l, t) => (l += t.value.clientWidth, l), 0);
+    P(() => t.modelValue, (a) => {
+      o.value = a, B(o.value);
+    }), T(async () => {
+      B(o.value), await k(), i.value = "0.1s ease-out all", y.value = Array.from(M.values()).reduce((a, n) => (a += n.value.clientWidth, a), 0);
     });
-    function C(l, t) {
-      R(t, !0);
+    function E(a, n) {
+      R(n, !0);
     }
-    function v(l, t) {
-      A.set(t, l);
+    function d(a, n) {
+      M.set(n, a);
     }
-    function j(l) {
-      Array.from(A.keys()).forEach((t) => {
-        l.find((b) => b.value === t) || A.delete(t);
+    function O(a) {
+      Array.from(M.keys()).forEach((n) => {
+        a.find((j) => j.value === n) || M.delete(n);
       });
     }
-    function w(l, t) {
-      return M(H, {
-        name: l.name,
-        value: l.value,
-        isActive: l.value === o.value,
-        index: t,
-        disabled: l.disabled,
-        key: l.value,
-        onMounted: v,
-        onActive: C
+    function g(a, n) {
+      return w(G, {
+        name: a.name,
+        value: a.value,
+        isActive: a.value === o.value,
+        index: n,
+        disabled: a.disabled,
+        key: a.value,
+        onMounted: d,
+        onActive: E
       }, null);
     }
-    return () => M("span", {
-      ref: a,
-      class: O.value,
+    return P(() => t.items, async (a) => {
+      const n = a.filter((u) => u.show);
+      O(n), r.value = n, await k(), B(o.value), y.value = Array.from(M.values()).reduce((u, j) => (u += j.value.clientWidth, u), 0);
+    }), () => w("span", {
+      ref: l,
+      class: A.value,
       style: c.value
-    }, [M("span", {
+    }, [w("span", {
       class: "f-capsule-pane"
-    }, [r.value.map((l, t) => w(l, t))]), M("small", {
-      class: f.value,
-      style: g.value
-    }, null), M("div", {
+    }, [r.value.map((a, n) => g(a, n))]), w("small", {
+      class: p.value,
+      style: b.value
+    }, null), w("div", {
       class: "f-capsule-board",
-      style: B.value
+      style: V.value
     }, null)]);
   }
 });
-function be(n, e, r) {
-  var C;
-  function a() {
-  }
-  const s = "", o = "", p = m();
-  function h() {
+function ge(t, e, r) {
+  var E;
+  const l = "", s = "", o = m();
+  function i() {
     return (e == null ? void 0 : e.schema.componentType) !== "frame";
   }
-  function O() {
+  function h() {
     return !1;
   }
-  function c() {
+  function A() {
     return (e == null ? void 0 : e.schema.componentType) !== "frame";
   }
-  function f() {
+  function c() {
     return (e == null ? void 0 : e.schema.componentType) === "frame";
   }
-  function i(v) {
-    if (!v || !v.value)
+  function p(d) {
+    if (!d || !d.value)
       return null;
-    if (v.value.schema && v.value.schema.type === "component")
-      return v.value;
-    const j = m(v == null ? void 0 : v.value.parent), w = i(j);
-    return w || null;
+    if (d.value.schema && d.value.schema.type === "component")
+      return d.value;
+    const O = m(d == null ? void 0 : d.value.parent), g = p(O);
+    return g || null;
   }
-  function d(v = e) {
-    const { componentInstance: j, designerItemElementRef: w } = v;
-    return !j || !j.value ? null : j.value.canMove ? w : d(v.parent);
+  function f(d = e) {
+    const { componentInstance: O, designerItemElementRef: g } = d;
+    return !O || !O.value ? null : O.value.canMove ? g : f(d.parent);
   }
-  function y(v) {
+  function v(d) {
     return !!r;
   }
-  function g() {
+  function y() {
     return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
   }
-  function B() {
+  function b() {
   }
-  function A(v, j) {
+  function V(d, O) {
   }
-  function S(v, j) {
-    const { componentType: w } = v;
-    let l = z(w, v, j);
-    const t = w.toLowerCase().replace("-", "_");
-    return l && !l.id && l.type === w && (l.id = `${t}_${Math.random().toString().slice(2, 6)}`), l;
+  function M(d, O) {
+    const { componentType: g } = d;
+    let a = H(g, d, O);
+    const n = g.toLowerCase().replace(/-/g, "_");
+    return a && !a.id && a.type === g && (a.id = `${n}_${Math.random().toString().slice(2, 6)}`), a;
   }
-  function R(v) {
+  function $(d) {
   }
-  function E(...v) {
+  function R(...d) {
   }
-  return p.value = {
-    canMove: h(),
-    canSelectParent: O(),
-    canDelete: c(),
-    canNested: !f(),
+  function B() {
+    e != null && e.schema.contents && e.schema.contents.map((d) => {
+      var a;
+      let O = d.id;
+      d.type === "component-ref" && (O = d.component);
+      const g = t.value.querySelector(`#${O}-design-item`);
+      (a = g == null ? void 0 : g.componentInstance) != null && a.value.onRemoveComponent && g.componentInstance.value.onRemoveComponent();
+    });
+  }
+  return o.value = {
+    canMove: i(),
+    canSelectParent: h(),
+    canDelete: A(),
+    canNested: !c(),
     contents: e == null ? void 0 : e.schema.contents,
-    elementRef: n,
-    parent: (C = e == null ? void 0 : e.parent) == null ? void 0 : C.componentInstance,
+    elementRef: t,
+    parent: (E = e == null ? void 0 : e.parent) == null ? void 0 : E.componentInstance,
     schema: e == null ? void 0 : e.schema,
-    styles: s,
-    designerClass: o,
-    canAccepts: y,
-    getBelongedComponentInstance: i,
-    getDraggableDesignItemElement: d,
-    getDraggingDisplayText: g,
-    getPropConfig: E,
-    getDragScopeElement: B,
-    onAcceptMovedChildElement: A,
-    onChildElementMovedOut: R,
-    addNewChildComponentSchema: S,
-    updateDragAndDropRules: a,
+    styles: l,
+    designerClass: s,
+    canAccepts: v,
+    getBelongedComponentInstance: p,
+    getDraggableDesignItemElement: f,
+    getDraggingDisplayText: y,
+    getPropConfig: R,
+    getDragScopeElement: b,
+    onAcceptMovedChildElement: V,
+    onChildElementMovedOut: $,
+    addNewChildComponentSchema: M,
     triggerBelongedComponentToMoveWhenMoved: m(!1),
-    triggerBelongedComponentToDeleteWhenDeleted: m(!1)
-  }, p;
+    triggerBelongedComponentToDeleteWhenDeleted: m(!1),
+    onRemoveComponent: B
+  }, o;
 }
-const je = /* @__PURE__ */ N({
+const je = /* @__PURE__ */ F({
   name: "FCapsuleDesign",
   props: W,
   emits: ["change", "update:modelValue"],
-  setup(n, e) {
-    const r = m(n.items), a = m(), s = 2, o = m(n.modelValue), p = m("none"), h = m(n.type), O = Q("design-item-context"), c = be(a, O);
-    P(() => {
-      a.value.componentInstance = c;
+  setup(t, e) {
+    const r = m(t.items), l = m(), s = 2, o = m(t.modelValue), i = m("none"), h = m(t.type), A = Q("design-item-context"), c = ge(l, A);
+    T(() => {
+      l.value.componentInstance = c;
     }), e.expose(c.value);
-    const f = V(() => {
-      const t = {
+    const p = S(() => {
+      const n = {
         "f-capsule-container": !0
       };
-      return h.value && (t[h.value] = !0), t;
-    }), i = V(() => ({})), d = V(() => ({
+      return h.value && (n[h.value] = !0), n;
+    }), f = S(() => ({})), v = S(() => ({
       "f-capsule": !0
-    })), y = m(s), g = m(0), B = m(0), A = V(() => ({
+    })), y = m(s), b = m(0), V = m(0), M = S(() => ({
       left: `${y.value}px`,
-      width: `${g.value}px`,
-      transition: p.value
-    })), S = V(() => ({
-      width: `${B.value}px`
+      width: `${b.value}px`,
+      transition: i.value
+    })), $ = S(() => ({
+      width: `${V.value}px`
     })), R = /* @__PURE__ */ new Map();
-    function E(t) {
+    function B(n) {
       var u;
-      if (R.has(t.value)) {
-        const b = (u = R.get(t.value)) == null ? void 0 : u.value;
-        if (b) {
-          const $ = b.getBoundingClientRect(), J = a.value.getBoundingClientRect();
-          y.value = $.left - J.left + s + a.value.scrollLeft, g.value = $.width - 2 * s;
+      if (R.has(n.value)) {
+        const j = (u = R.get(n.value)) == null ? void 0 : u.value;
+        if (j) {
+          const D = j.getBoundingClientRect(), J = l.value.getBoundingClientRect();
+          y.value = D.left - J.left + s + l.value.scrollLeft, b.value = D.width - 2 * s;
         }
       }
     }
-    function C(t, u) {
-      const b = t.value;
-      o.value = b, e.emit("update:modelValue", b), E(t), u && e.emit("change", b);
+    function E(n, u) {
+      const j = n.value;
+      o.value = j, e.emit("update:modelValue", j), B(n), u && e.emit("change", j);
     }
-    function v(t) {
-      const u = r.value.findIndex((b) => b.value === t);
-      u > -1 && C(r.value[u], !1);
+    function d(n) {
+      const u = r.value.findIndex((j) => j.value === n);
+      u > -1 && E(r.value[u], !1);
     }
-    D(() => n.modelValue, (t) => {
-      o.value = t, v(o.value);
-    }), D(() => n.items, async (t) => {
-      r.value = t, await T(), v(o.value), B.value = Array.from(R.values()).reduce((u, b) => (u += b.value.clientWidth, u), 0);
-    }), P(async () => {
-      v(o.value), await T(), p.value = "0.1s ease-out all", B.value = Array.from(R.values()).reduce((t, u) => (t += u.value.clientWidth, t), 0);
+    P(() => t.modelValue, (n) => {
+      o.value = n, d(o.value);
+    }), P(() => t.items, async (n) => {
+      r.value = n, await k(), d(o.value), V.value = Array.from(R.values()).reduce((u, j) => (u += j.value.clientWidth, u), 0);
+    }), T(async () => {
+      d(o.value), await k(), i.value = "0.1s ease-out all", V.value = Array.from(R.values()).reduce((n, u) => (n += u.value.clientWidth, n), 0);
     });
-    function j(t, u) {
-      C(u, !0);
+    function O(n, u) {
+      E(u, !0);
     }
-    function w(t, u) {
-      R.set(u, t);
+    function g(n, u) {
+      R.set(u, n);
     }
-    function l(t, u) {
-      return M(H, {
-        name: t.name,
-        value: t.value,
-        isActive: t.value === o.value,
+    function a(n, u) {
+      return w(G, {
+        name: n.name,
+        value: n.value,
+        isActive: n.value === o.value,
         index: u,
-        onMounted: w,
-        onActive: j
+        onMounted: g,
+        onActive: O
       }, null);
     }
-    return () => M("span", {
-      ref: a,
-      class: f.value,
-      style: i.value
-    }, [M("span", {
+    return () => w("span", {
+      ref: l,
+      class: p.value,
+      style: f.value
+    }, [w("span", {
       class: "f-capsule-pane"
-    }, [r.value.map((t, u) => l(t, u))]), M("small", {
-      class: d.value,
-      style: A.value
-    }, null), M("div", {
+    }, [r.value.map((n, u) => a(n, u))]), w("small", {
+      class: v.value,
+      style: M.value
+    }, null), w("div", {
       class: "f-capsule-board",
-      style: S.value
+      style: $.value
     }, null)]);
   }
 });
-k.register = (n, e, r) => {
-  n.capsule = k, e.capsule = G;
+N.register = (t, e, r) => {
+  t.capsule = N, e.capsule = z;
 };
-k.registerDesigner = (n, e, r) => {
-  n.capsule = je, e.capsule = G;
+N.registerDesigner = (t, e, r) => {
+  t.capsule = je, e.capsule = z;
 };
-const Me = X(k);
+const we = X(N);
 export {
-  k as FCapsule,
-  ge as capsuleItemProps,
+  N as FCapsule,
+  be as capsuleItemProps,
   W as capsuleProps,
-  Me as default,
-  G as propsResolver
+  we as default,
+  z as propsResolver
 };