@farris/ui-vue 1.3.4 → 1.3.6

package/components/capsule/index.esm.js

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