@xto/form 1.3.2 → 1.3.4

package/es/index.mjs

@@ -282,8 +282,8 @@ const Je = ["aria-hidden", "aria-label"], Ze = ["stroke-width"], Qe = ["d"], ee
     ie(
       [() => e.modelValue, () => e.value],
       ([F, B]) => {
-        const O = F ?? B ?? "";
-        O !== C.value && (C.value = O);
+        const E = F ?? B ?? "";
+        E !== C.value && (C.value = E);
       },
       { immediate: !0 }
     );
@@ -334,7 +334,7 @@ const Je = ["aria-hidden", "aria-label"], Ze = ["stroke-width"], Qe = ["d"], ee
       ue(d("input", {
         ref_key: "inputRef",
         ref: f,
-        "onUpdate:modelValue": B[0] || (B[0] = (O) => C.value = O),
+        "onUpdate:modelValue": B[0] || (B[0] = (E) => C.value = E),
         type: T.value,
         placeholder: s.placeholder,
         disabled: s.disabled,
@@ -342,7 +342,7 @@ const Je = ["aria-hidden", "aria-label"], Ze = ["stroke-width"], Qe = ["d"], ee
         maxlength: s.maxlength,
         minlength: s.minlength,
         class: u(n(t).e("inner")),
-        onInput: B[1] || (B[1] = (O) => z(O.target.value)),
+        onInput: B[1] || (B[1] = (E) => z(E.target.value)),
         onChange: H,
         onFocus: L,
         onBlur: A
@@ -473,7 +473,7 @@ const Je = ["aria-hidden", "aria-label"], Ze = ["stroke-width"], Qe = ["d"], ee
       }
       a("blur", o);
     }
-    function O(o) {
+    function E(o) {
       m.value = !0, S.value = e.modelValue, a("focus", o);
     }
     function j(o) {
@@ -533,7 +533,7 @@ const Je = ["aria-hidden", "aria-label"], Ze = ["stroke-width"], Qe = ["d"], ee
           type: "text",
           autocomplete: "off",
           onInput: F,
-          onFocus: O,
+          onFocus: E,
           onBlur: B,
           onKeydown: j
         }, null, 42, ll)
@@ -1188,8 +1188,8 @@ const pl = [
       if (F && r) {
         const B = t.value;
         if (B) {
-          const O = r < B ? r : B, j = r < B ? B : r;
-          return Ye(h, O, j);
+          const E = r < B ? r : B, j = r < B ? B : r;
+          return Ye(h, E, j);
         }
         return pe(h, r);
       }
@@ -1238,8 +1238,8 @@ const pl = [
       ]),
       d("tbody", null, [
         (i(!0), c(J, null, Q(y.value, ($, F) => (i(), c("tr", { key: F }, [
-          (i(!0), c(J, null, Q($, (B, O) => (i(), c("td", {
-            key: O,
+          (i(!0), c(J, null, Q($, (B, E) => (i(), c("td", {
+            key: E,
             class: u(H(B)),
             onClick: (j) => L(B),
             onMouseenter: (j) => A(B),
@@ -1435,7 +1435,7 @@ const pl = [
     }), F = M(() => {
       const I = S();
       return !I || Array.isArray(I) ? null : I instanceof Date ? I : fe(I);
-    }), B = M(() => H.value.getFullYear()), O = M(() => H.value.getMonth()), j = M(() => Ne(B.value)), p = M(() => b.value === "year" ? `${j.value[0]} 年 - ${j.value[1]} 年` : b.value === "month" ? `${B.value} 年` : `${B.value} 年 ${O.value + 1} 月`), w = M(() => [
+    }), B = M(() => H.value.getFullYear()), E = M(() => H.value.getMonth()), j = M(() => Ne(B.value)), p = M(() => b.value === "year" ? `${j.value[0]} 年 - ${j.value[1]} 年` : b.value === "month" ? `${B.value} 年` : `${B.value} 年 ${E.value + 1} 月`), w = M(() => [
       t.b(),
       t.m(e.size),
       t.is("disabled", e.disabled),
@@ -1496,7 +1496,7 @@ const pl = [
       } else
         b.value = "date";
     }, q = (I) => {
-      if (H.value = new Date(I, O.value, 1), e.type === "year") {
+      if (H.value = new Date(I, E.value, 1), e.type === "year") {
         const Y = new Date(I, 0, 1), W = e.valueFormat ? ve(Y, e.valueFormat) : Y;
         D(W), g();
       } else
@@ -1506,12 +1506,12 @@ const pl = [
     }, ye = () => {
       H.value = vl(H.value);
     }, xe = () => {
-      b.value === "year" ? H.value = new Date(B.value - 10, O.value, 1) : H.value = fl(H.value);
+      b.value === "year" ? H.value = new Date(B.value - 10, E.value, 1) : H.value = fl(H.value);
     }, ze = () => {
-      b.value === "year" ? H.value = new Date(B.value + 10, O.value, 1) : H.value = ml(H.value);
+      b.value === "year" ? H.value = new Date(B.value + 10, E.value, 1) : H.value = ml(H.value);
     }, Te = () => {
       b.value = "month";
-    }, E = () => {
+    }, O = () => {
       b.value = "year";
     }, G = () => {
       D(null), a("clear"), A.value = {
@@ -1670,11 +1670,11 @@ const pl = [
                     key: 0,
                     onClick: Y[1] || (Y[1] = (W) => b.value = "month")
                   }, U(p.value), 1)) : (i(), c(J, { key: 1 }, [
-                    d("span", { onClick: E }, U(B.value) + " 年", 1),
+                    d("span", { onClick: O }, U(B.value) + " 年", 1),
                     b.value === "date" ? (i(), c("span", {
                       key: 0,
                       onClick: Te
-                    }, U(O.value + 1) + " 月", 1)) : X("", !0)
+                    }, U(E.value + 1) + " 月", 1)) : X("", !0)
                   ], 64))
                 ], 2),
                 d("button", {
@@ -1854,12 +1854,12 @@ const Tl = ["onClick"], Hl = ["onClick"], Ll = ["onClick"], Rl = /* @__PURE__ */
         K.push(q);
       return K;
     }), b = M(() => l.disabledHours ? new Set(l.disabledHours()) : /* @__PURE__ */ new Set()), H = M(() => l.disabledMinutes ? new Set(l.disabledMinutes(t.value)) : /* @__PURE__ */ new Set()), L = M(() => l.disabledSeconds ? new Set(l.disabledSeconds(t.value, f.value)) : /* @__PURE__ */ new Set()), A = M(() => `${Me(t.value)}:${Me(f.value)}${T.value ? ":" + Me(m.value) : ""}`), V = (K) => b.value.has(K), h = (K) => H.value.has(K), r = (K) => L.value.has(K), $ = (K) => {
-      V(K) || (t.value = K, w(y.value, O(K)));
+      V(K) || (t.value = K, w(y.value, E(K)));
     }, F = (K) => {
       h(K) || (f.value = K, w(S.value, j(K)));
     }, B = (K) => {
       r(K) || (m.value = K, w(D.value, p(K)));
-    }, O = (K) => C.value.indexOf(K), j = (K) => z.value.indexOf(K), p = (K) => P.value.indexOf(K), w = (K, re) => {
+    }, E = (K) => C.value.indexOf(K), j = (K) => z.value.indexOf(K), p = (K) => P.value.indexOf(K), w = (K, re) => {
       if (!K) return;
       const q = 32, ye = re * q + 84 - 200 / 2 + q / 2;
       K.scrollTop = Math.max(0, ye);
@@ -1888,7 +1888,7 @@ const Tl = ["onClick"], Hl = ["onClick"], Ll = ["onClick"], Rl = /* @__PURE__ */
         t.value = K.getHours(), f.value = K.getMinutes(), m.value = K.getSeconds();
       }
       De(() => {
-        w(y.value, O(t.value)), w(S.value, j(f.value)), T.value && w(D.value, p(m.value));
+        w(y.value, E(t.value)), w(S.value, j(f.value)), T.value && w(D.value, p(m.value));
       });
     };
     return ie(
@@ -2039,7 +2039,7 @@ const Tl = ["onClick"], Hl = ["onClick"], Ll = ["onClick"], Rl = /* @__PURE__ */
       t.e("input"),
       t.is("focus", m.value)
     ]), $ = () => {
-      e.disabled || e.readonly || (m.value ? O() : B());
+      e.disabled || e.readonly || (m.value ? E() : B());
     }, F = (v) => {
       e.disabled || e.readonly || (P.value = v, m.value || B());
     }, B = () => {
@@ -2053,7 +2053,7 @@ const Tl = ["onClick"], Hl = ["onClick"], Ll = ["onClick"], Rl = /* @__PURE__ */
           };
         }
       }), a("focus", {});
-    }, O = () => {
+    }, E = () => {
       m.value = !1, a("blur", {});
     }, j = (v) => {
       if (e.type === "timerange")
@@ -2062,14 +2062,14 @@ const Tl = ["onClick"], Hl = ["onClick"], Ll = ["onClick"], Rl = /* @__PURE__ */
         else {
           z.value.startTime && v < z.value.startTime ? (z.value.endTime = z.value.startTime, z.value.startTime = v) : z.value.endTime = v;
           const g = e.valueFormat ? ke(z.value.startTime, e.valueFormat) : z.value.startTime, N = e.valueFormat ? ke(z.value.endTime, e.valueFormat) : z.value.endTime;
-          a("update:modelValue", [g, N]), a("change", [g, N]), O();
+          a("update:modelValue", [g, N]), a("change", [g, N]), E();
         }
       else {
         const g = e.valueFormat ? ke(v, e.valueFormat) : v;
-        a("update:modelValue", g), a("change", g), O();
+        a("update:modelValue", g), a("change", g), E();
       }
     }, p = () => {
-      O();
+      E();
     }, w = () => {
       a("update:modelValue", null), a("change", null), a("clear"), z.value = {
         startTime: null,
@@ -2078,7 +2078,7 @@ const Tl = ["onClick"], Hl = ["onClick"], Ll = ["onClick"], Rl = /* @__PURE__ */
     }, x = (v) => {
       if (!S.value) return;
       const g = v.target;
-      S.value.contains(g) || D.value && D.value.contains(g) || O();
+      S.value.contains(g) || D.value && D.value.contains(g) || E();
     };
     ie(
       () => e.modelValue,
@@ -2099,7 +2099,7 @@ const Tl = ["onClick"], Hl = ["onClick"], Ll = ["onClick"], Rl = /* @__PURE__ */
       }, P.value = "start");
     });
     const o = (v) => {
-      v.key === "Escape" && O();
+      v.key === "Escape" && E();
     };
     return ge(() => {
       document.addEventListener("click", x), document.addEventListener("keydown", o);
@@ -2305,34 +2305,34 @@ const Ol = ["onClick"], El = ["placeholder", "disabled", "readonly", "value"], Y
   },
   emits: ["update:modelValue", "update:value", "change", "clear", "focus", "blur", "visible-change", "remove-tag"],
   setup(s, { emit: k }) {
-    const l = s, e = k, a = ae("select"), t = Ae(), f = () => Oe().next(), m = R(), y = R(), S = R(), D = R(!1), T = R(2e3), C = R(""), z = R(-1), P = R({ top: "0px", left: "0px" }), b = R([]), H = (E) => {
-      b.value.find((G) => G.value === E.value) || b.value.push(E);
-    }, L = M(() => l.type === "multiple" || l.mode === "multiple"), A = M(() => l.type === "cascader"), V = R([]), h = M(() => l.options && l.options.length > 0 ? l.options : b.value), r = (E) => {
-      l.modelValue !== void 0 && e("update:modelValue", E), l.value !== void 0 && e("update:value", E), l.modelValue === void 0 && l.value === void 0 && e("update:modelValue", E), e("change", E);
+    const l = s, e = k, a = ae("select"), t = Ae(), f = () => Oe().next(), m = R(), y = R(), S = R(), D = R(!1), T = R(2e3), C = R(""), z = R(-1), P = R({ top: "0px", left: "0px" }), b = R([]), H = (O) => {
+      b.value.find((G) => G.value === O.value) || b.value.push(O);
+    }, L = M(() => l.type === "multiple" || l.mode === "multiple"), A = M(() => l.type === "cascader"), V = R([]), h = M(() => l.options && l.options.length > 0 ? l.options : b.value), r = (O) => {
+      l.modelValue !== void 0 && e("update:modelValue", O), l.value !== void 0 && e("update:value", O), l.modelValue === void 0 && l.value === void 0 && e("update:modelValue", O), e("change", O);
     }, $ = M(() => {
-      const E = l.modelValue !== void 0 ? l.modelValue : l.value !== void 0 ? l.value : "";
-      return L.value ? Array.isArray(E) ? E : [] : A.value ? Array.isArray(E) ? E : E ? [E] : [] : E !== "" && E !== null && E !== void 0 ? [E] : [];
+      const O = l.modelValue !== void 0 ? l.modelValue : l.value !== void 0 ? l.value : "";
+      return L.value ? Array.isArray(O) ? O : [] : A.value ? Array.isArray(O) ? O : O ? [O] : [] : O !== "" && O !== null && O !== void 0 ? [O] : [];
     }), F = M(() => {
-      const E = h.value;
-      return A.value ? Pl(E, l.childrenKey) : E.map((G) => ({ ...G, level: 0 }));
-    }), B = M(() => !l.filterable || !C.value ? F.value : F.value.filter((E) => {
-      const G = E[l.labelKey] || "";
+      const O = h.value;
+      return A.value ? Pl(O, l.childrenKey) : O.map((G) => ({ ...G, level: 0 }));
+    }), B = M(() => !l.filterable || !C.value ? F.value : F.value.filter((O) => {
+      const G = O[l.labelKey] || "";
       return Il(G, C.value, l.filterMethod);
-    })), O = M(() => {
-      const E = [];
+    })), E = M(() => {
+      const O = [];
       for (const G of $.value) {
         const _ = Xe(h.value, G, l.valueKey, l.childrenKey);
-        _ && E.push(_);
+        _ && O.push(_);
       }
-      return E;
+      return O;
     }), j = M(() => {
       if (L.value)
         return "";
       if (A.value)
         return Be(h.value, $.value[$.value.length - 1], l.valueKey, l.childrenKey).map((_) => _[l.labelKey]).join(l.separator);
-      const E = O.value[0];
-      return E ? E[l.labelKey] : "";
-    }), p = M(() => L.value ? O.value : []), w = M(() => l.collapseTags ? p.value.slice(0, l.maxCollapseTags) : p.value), x = M(() => l.collapseTags ? Math.max(0, p.value.length - l.maxCollapseTags) : 0), o = M(() => [
+      const O = E.value[0];
+      return O ? O[l.labelKey] : "";
+    }), p = M(() => L.value ? E.value : []), w = M(() => l.collapseTags ? p.value.slice(0, l.maxCollapseTags) : p.value), x = M(() => l.collapseTags ? Math.max(0, p.value.length - l.maxCollapseTags) : 0), o = M(() => [
       a.b(),
       a.m(l.size),
       a.is("disabled", l.disabled),
@@ -2342,9 +2342,9 @@ const Ol = ["onClick"], El = ["placeholder", "disabled", "readonly", "value"], Y
       a.is("focus", D.value)
     ]), v = () => {
       if (!m.value || !S.value || !D.value) return;
-      const E = m.value.getBoundingClientRect(), G = S.value.getBoundingClientRect();
-      let _ = E.bottom + 4, de = E.left;
-      de + G.width > window.innerWidth && (de = window.innerWidth - G.width - 8), _ + G.height > window.innerHeight && (_ = E.top - G.height - 4), P.value = {
+      const O = m.value.getBoundingClientRect(), G = S.value.getBoundingClientRect();
+      let _ = O.bottom + 4, de = O.left;
+      de + G.width > window.innerWidth && (de = window.innerWidth - G.width - 8), _ + G.height > window.innerHeight && (_ = O.top - G.height - 4), P.value = {
         top: `${_}px`,
         left: `${de}px`
       };
@@ -2354,10 +2354,10 @@ const Ol = ["onClick"], El = ["placeholder", "disabled", "readonly", "value"], Y
       }), e("visible-change", !0), e("focus", {}));
     }, N = () => {
       D.value = !1, C.value = "", V.value = [], e("visible-change", !1), e("blur", {});
-    }, ne = (E) => {
-      if (!E.disabled)
+    }, ne = (O) => {
+      if (!O.disabled)
         if (L.value) {
-          const G = [...$.value], _ = E[l.valueKey], de = G.indexOf(_);
+          const G = [...$.value], _ = O[l.valueKey], de = G.indexOf(_);
           if (de > -1)
             G.splice(de, 1), e("remove-tag", _);
           else {
@@ -2367,59 +2367,59 @@ const Ol = ["onClick"], El = ["placeholder", "disabled", "readonly", "value"], Y
           }
           r(G);
         } else if (A.value)
-          if (E.children && E.children.length > 0) {
-            const G = Be(h.value, E[l.valueKey], l.valueKey, l.childrenKey);
+          if (O.children && O.children.length > 0) {
+            const G = Be(h.value, O[l.valueKey], l.valueKey, l.childrenKey);
             V.value = G;
           } else {
-            const _ = Be(h.value, E[l.valueKey], l.valueKey, l.childrenKey).map((de) => de[l.valueKey]);
+            const _ = Be(h.value, O[l.valueKey], l.valueKey, l.childrenKey).map((de) => de[l.valueKey]);
             r(_), N();
           }
         else
-          r(E[l.valueKey]), N();
-    }, K = (E) => {
-      const G = $.value.filter((_) => _ !== E[l.valueKey]);
-      r(G), e("remove-tag", E[l.valueKey]);
+          r(O[l.valueKey]), N();
+    }, K = (O) => {
+      const G = $.value.filter((_) => _ !== O[l.valueKey]);
+      r(G), e("remove-tag", O[l.valueKey]);
     }, re = () => {
-      const E = L.value ? [] : "";
-      r(E), e("clear");
-    }, q = (E) => {
-      C.value = E.target.value;
-    }, me = (E) => {
+      const O = L.value ? [] : "";
+      r(O), e("clear");
+    }, q = (O) => {
+      C.value = O.target.value;
+    }, me = (O) => {
       if (!m.value) return;
-      const G = E.target;
+      const G = O.target;
       m.value.contains(G) || S.value && S.value.contains(G) || N();
-    }, ye = (E) => {
-      if (E.key === "Escape")
+    }, ye = (O) => {
+      if (O.key === "Escape")
         N();
-      else if (E.key === "Enter" && D.value) {
+      else if (O.key === "Enter" && D.value) {
         const G = B.value[z.value];
         G && ne(G);
-      } else E.key === "ArrowDown" && D.value ? (E.preventDefault(), z.value = Math.min(z.value + 1, B.value.length - 1)) : E.key === "ArrowUp" && D.value && (E.preventDefault(), z.value = Math.max(z.value - 1, 0));
-    }, xe = (E) => $.value.includes(E[l.valueKey]), ze = (E, G) => [
+      } else O.key === "ArrowDown" && D.value ? (O.preventDefault(), z.value = Math.min(z.value + 1, B.value.length - 1)) : O.key === "ArrowUp" && D.value && (O.preventDefault(), z.value = Math.max(z.value - 1, 0));
+    }, xe = (O) => $.value.includes(O[l.valueKey]), ze = (O, G) => [
       a.e("option"),
-      a.is("selected", xe(E)),
-      a.is("disabled", E.disabled === !0),
+      a.is("selected", xe(O)),
+      a.is("disabled", O.disabled === !0),
       a.is("hover", z.value === G),
-      a.is("group", !!(E.children && E.children.length > 0))
+      a.is("group", !!(O.children && O.children.length > 0))
     ], Te = M(() => {
       if (!A.value) return [];
-      const E = [h.value];
+      const O = [h.value];
       for (const G of V.value)
-        G.children && G.children.length > 0 && E.push(G.children);
-      return E;
+        G.children && G.children.length > 0 && O.push(G.children);
+      return O;
     });
     return ge(() => {
       document.addEventListener("click", me), document.addEventListener("keydown", ye);
     }), $e(() => {
       document.removeEventListener("click", me), document.removeEventListener("keydown", ye), document.removeEventListener("scroll", v, !0);
-    }), ie(D, (E) => {
-      E ? document.addEventListener("scroll", v, !0) : document.removeEventListener("scroll", v, !0);
+    }), ie(D, (O) => {
+      O ? document.addEventListener("scroll", v, !0) : document.removeEventListener("scroll", v, !0);
     }), Se("select", {
       selectedValues: $,
       handleSelect: ne,
       isSelected: xe,
       registerOption: H
-    }), (E, G) => (i(), c("div", {
+    }), (O, G) => (i(), c("div", {
       ref_key: "selectRef",
       ref: m,
       class: u(o.value)
@@ -2513,11 +2513,11 @@ const Ol = ["onClick"], El = ["placeholder", "disabled", "readonly", "value"], Y
                   key: 0,
                   class: u(n(a).e("empty"))
                 }, U(C.value ? s.noMatchText : s.noDataText), 3)) : (i(), c(J, { key: 1 }, [
-                  n(t).default ? (i(), c("div", {
+                  O.$slots.default ? (i(), c("div", {
                     key: 0,
                     class: u(n(a).e("options"))
                   }, [
-                    se(E.$slots, "default")
+                    se(O.$slots, "default")
                   ], 2)) : (i(), c("div", {
                     key: 1,
                     class: u(n(a).e("options"))
@@ -2556,33 +2556,33 @@ const Ol = ["onClick"], El = ["placeholder", "disabled", "readonly", "value"], Y
     disabled: { type: Boolean, default: !1 }
   },
   setup(s) {
-    const k = s, l = ae("select"), e = Ce("select");
+    const k = s, l = ae("select"), e = Ce("select"), a = R(!1);
     ge(() => {
-      e && e.registerOption && e.registerOption({
+      e && (a.value = !0, e.registerOption && e.registerOption({
         value: k.value,
         label: k.label,
         disabled: k.disabled
-      });
+      }));
     });
-    const a = M(() => e ? e.isSelected({ value: k.value }) : !1), t = () => {
-      k.disabled || e && e.handleSelect({
+    const t = M(() => !e || !e.selectedValues ? !1 : e.selectedValues.value.includes(k.value)), f = (m) => {
+      m.stopPropagation(), !k.disabled && e && e.handleSelect && e.handleSelect({
         value: k.value,
         label: k.label,
         disabled: k.disabled
       });
     };
-    return (f, m) => (i(), c("div", {
+    return (m, y) => (i(), c("div", {
       class: u([
         n(l).e("option"),
-        n(l).is("selected", a.value),
+        n(l).is("selected", t.value),
         n(l).is("disabled", s.disabled)
       ]),
-      onClick: t
+      onClick: f
     }, [
       d("span", {
         class: u(n(l).e("option-label"))
       }, U(s.label), 3),
-      a.value ? (i(), c("span", {
+      t.value ? (i(), c("span", {
         key: 0,
         class: u(n(l).e("option-check"))
       }, "✓", 2)) : X("", !0)
@@ -2641,7 +2641,7 @@ const Ol = ["onClick"], El = ["placeholder", "disabled", "readonly", "value"], Y
     }, B = (o) => {
       const v = T.value.indexOf(o);
       v > -1 ? T.value.splice(v, 1) : T.value.push(o), a("left-check-change", [...T.value]);
-    }, O = (o) => {
+    }, E = (o) => {
       const v = C.value.indexOf(o);
       v > -1 ? C.value.splice(v, 1) : C.value.push(o), a("right-check-change", [...C.value]);
     }, j = () => {
@@ -2792,7 +2792,7 @@ const Ol = ["onClick"], El = ["placeholder", "disabled", "readonly", "value"], Y
               n(t).is("disabled", b(g)),
               n(t).is("checked", C.value.includes(z(g)))
             ]),
-            onClick: (N) => !b(g) && O(z(g))
+            onClick: (N) => !b(g) && E(z(g))
           }, [
             d("label", {
               class: u(n(t).e("checkbox"))
@@ -2803,7 +2803,7 @@ const Ol = ["onClick"], El = ["placeholder", "disabled", "readonly", "value"], Y
                 disabled: b(g),
                 onClick: v[5] || (v[5] = oe(() => {
                 }, ["stop"])),
-                onChange: (N) => O(z(g))
+                onChange: (N) => E(z(g))
               }, null, 40, Ql),
               d("span", null, U(P(g)), 1)
             ], 2)
@@ -2898,10 +2898,10 @@ const Ol = ["onClick"], El = ["placeholder", "disabled", "readonly", "value"], Y
       a.b(),
       a.is("disabled", l.disabled),
       a.is("vertical", l.vertical)
-    ]), O = M(() => l.vertical && l.height ? { height: typeof l.height == "number" ? `${l.height}px` : l.height } : {}), j = M(() => l.vertical ? { height: `${S.value}%` } : { width: `${S.value}%` }), p = M(() => l.vertical ? { bottom: `${S.value}%` } : { left: `${S.value}%` });
+    ]), E = M(() => l.vertical && l.height ? { height: typeof l.height == "number" ? `${l.height}px` : l.height } : {}), j = M(() => l.vertical ? { height: `${S.value}%` } : { width: `${S.value}%` }), p = M(() => l.vertical ? { bottom: `${S.value}%` } : { left: `${S.value}%` });
     return (w, x) => (i(), c("div", {
       class: u(B.value),
-      style: te(O.value)
+      style: te(E.value)
     }, [
       d("div", {
         ref_key: "sliderRef",
@@ -3115,7 +3115,7 @@ const Ol = ["onClick"], El = ["placeholder", "disabled", "readonly", "value"], Y
       p.preventDefault(), !e.disabled && e.drag && (y.value = !0);
     }, B = () => {
       y.value = !1;
-    }, O = (p) => {
+    }, E = (p) => {
       var x;
       if (p.preventDefault(), y.value = !1, e.disabled) return;
       const w = (x = p.dataTransfer) == null ? void 0 : x.files;
@@ -3141,7 +3141,7 @@ const Ol = ["onClick"], El = ["placeholder", "disabled", "readonly", "value"], Y
         onClick: $,
         onDragover: F,
         onDragleave: B,
-        onDrop: O
+        onDrop: E
       }, [
         se(p.$slots, "drag", {}, () => [
           d("span", {
@@ -3958,7 +3958,7 @@ const Ol = ["onClick"], El = ["placeholder", "disabled", "readonly", "value"], Y
       f.value = [], m.value = [], e("update:modelValue", D.value ? [] : ""), e("change", D.value ? [] : "");
     }, B = (p) => {
       y.value = p.target.value;
-    }, O = (p) => {
+    }, E = (p) => {
       f.value = p.map((w) => w.value), y.value = "", t.value = !1, r(f.value);
     }, j = (p) => {
       p.target.closest(`.${a.b()}`) || (t.value = !1);
@@ -4022,7 +4022,7 @@ const Ol = ["onClick"], El = ["placeholder", "disabled", "readonly", "value"], Y
           (i(!0), c(J, null, Q(P.value, (x, o) => (i(), c("div", {
             key: o,
             class: u(n(a).e("filter-item")),
-            onClick: (v) => O(x.path)
+            onClick: (v) => E(x.path)
           }, U(x.label), 11, Fa))), 128)),
           P.value.length === 0 ? (i(), c("div", {
             key: 0,
@@ -4094,46 +4094,46 @@ const Ol = ["onClick"], El = ["placeholder", "disabled", "readonly", "value"], Y
   },
   emits: ["update:modelValue", "change"],
   setup(s, { emit: k }) {
-    const l = s, e = k, a = ae("color-picker"), t = R(!1), f = R(0), m = R(100), y = R(100), S = R(100), D = R(), T = R(), C = M(() => b(f.value, m.value, y.value)), z = M(() => l.showAlpha ? `${C.value}${Math.round(S.value * 2.55).toString(16).padStart(2, "0")}` : C.value), P = M(() => l.modelValue || C.value), b = (B, O, j) => {
-      O /= 100, j /= 100;
-      const p = j * O, w = p * (1 - Math.abs(B / 60 % 2 - 1)), x = j - p;
+    const l = s, e = k, a = ae("color-picker"), t = R(!1), f = R(0), m = R(100), y = R(100), S = R(100), D = R(), T = R(), C = M(() => b(f.value, m.value, y.value)), z = M(() => l.showAlpha ? `${C.value}${Math.round(S.value * 2.55).toString(16).padStart(2, "0")}` : C.value), P = M(() => l.modelValue || C.value), b = (B, E, j) => {
+      E /= 100, j /= 100;
+      const p = j * E, w = p * (1 - Math.abs(B / 60 % 2 - 1)), x = j - p;
       let o = 0, v = 0, g = 0;
       B >= 0 && B < 60 ? (o = p, v = w, g = 0) : B >= 60 && B < 120 ? (o = w, v = p, g = 0) : B >= 120 && B < 180 ? (o = 0, v = p, g = w) : B >= 180 && B < 240 ? (o = 0, v = w, g = p) : B >= 240 && B < 300 ? (o = w, v = 0, g = p) : (o = p, v = 0, g = w);
       const N = (ne) => Math.round((ne + x) * 255).toString(16).padStart(2, "0");
       return `#${N(o)}${N(v)}${N(g)}`;
     }, H = (B) => {
       B = B.replace("#", "");
-      const O = parseInt(B.slice(0, 2), 16) / 255, j = parseInt(B.slice(2, 4), 16) / 255, p = parseInt(B.slice(4, 6), 16) / 255, w = Math.max(O, j, p), x = Math.min(O, j, p), o = w - x;
+      const E = parseInt(B.slice(0, 2), 16) / 255, j = parseInt(B.slice(2, 4), 16) / 255, p = parseInt(B.slice(4, 6), 16) / 255, w = Math.max(E, j, p), x = Math.min(E, j, p), o = w - x;
       let v = 0;
       const g = w === 0 ? 0 : o / w, N = w;
       if (o !== 0)
         switch (w) {
-          case O:
+          case E:
             v = ((j - p) / o + (j < p ? 6 : 0)) * 60;
             break;
           case j:
-            v = ((p - O) / o + 2) * 60;
+            v = ((p - E) / o + 2) * 60;
             break;
           case p:
-            v = ((O - j) / o + 4) * 60;
+            v = ((E - j) / o + 4) * 60;
             break;
         }
       return { h: v, s: g * 100, v: N * 100 };
     }, L = (B) => {
       if (!D.value) return;
-      const O = D.value.getBoundingClientRect(), j = Math.max(0, Math.min(1, (B.clientX - O.left) / O.width)), p = Math.max(0, Math.min(1, (B.clientY - O.top) / O.height));
+      const E = D.value.getBoundingClientRect(), j = Math.max(0, Math.min(1, (B.clientX - E.left) / E.width)), p = Math.max(0, Math.min(1, (B.clientY - E.top) / E.height));
       m.value = Math.round(j * 100), y.value = Math.round((1 - p) * 100);
     }, A = (B) => {
       if (!T.value) return;
-      const O = T.value.getBoundingClientRect(), j = Math.max(0, Math.min(1, (B.clientX - O.left) / O.width));
+      const E = T.value.getBoundingClientRect(), j = Math.max(0, Math.min(1, (B.clientX - E.left) / E.width));
       f.value = Math.round(j * 360);
     }, V = (B) => {
       if (!T.value) return;
-      const O = T.value.getBoundingClientRect(), j = Math.max(0, Math.min(1, (B.clientX - O.left) / O.width));
+      const E = T.value.getBoundingClientRect(), j = Math.max(0, Math.min(1, (B.clientX - E.left) / E.width));
       S.value = Math.round(j * 100);
     }, h = (B) => {
-      const O = H(B);
-      f.value = O.h, m.value = O.s, y.value = O.v, e("update:modelValue", B), e("change", B);
+      const E = H(B);
+      f.value = E.h, m.value = E.s, y.value = E.v, e("update:modelValue", B), e("change", B);
     }, r = () => {
       e("update:modelValue", z.value), e("change", z.value), t.value = !1;
     }, $ = () => {
@@ -4144,19 +4144,19 @@ const Ol = ["onClick"], El = ["placeholder", "disabled", "readonly", "value"], Y
     return ie(t, (B) => {
       if (B) {
         if (document.addEventListener("click", F), l.modelValue) {
-          const O = H(l.modelValue.slice(0, 7));
-          f.value = O.h, m.value = O.s, y.value = O.v, l.showAlpha && l.modelValue.length === 9 && (S.value = Math.round(parseInt(l.modelValue.slice(7, 9), 16) / 2.55));
+          const E = H(l.modelValue.slice(0, 7));
+          f.value = E.h, m.value = E.s, y.value = E.v, l.showAlpha && l.modelValue.length === 9 && (S.value = Math.round(parseInt(l.modelValue.slice(7, 9), 16) / 2.55));
         }
       } else
         document.removeEventListener("click", F);
-    }), (B, O) => (i(), c("div", {
+    }), (B, E) => (i(), c("div", {
       class: u([n(a).b(), n(a).m(s.size), n(a).is("disabled", s.disabled)]),
-      onClick: O[1] || (O[1] = oe(() => {
+      onClick: E[1] || (E[1] = oe(() => {
       }, ["stop"]))
     }, [
       d("div", {
         class: u(n(a).e("trigger")),
-        onClick: O[0] || (O[0] = (j) => !s.disabled && (t.value = !t.value))
+        onClick: E[0] || (E[0] = (j) => !s.disabled && (t.value = !t.value))
       }, [
         d("div", {
           class: u(n(a).e("color")),