@farris/ui-vue 1.3.0 → 1.3.3

package/components/capsule/index.esm.js

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