x-next 1.1.0 → 1.2.0

package/dist/es/components/form-radio/RadioGroup.js

@@ -1,12 +1,12 @@
-import { defineComponent as C, toRefs as G, ref as _, computed as d, provide as A, reactive as k, watch as v, createVNode as g, mergeProps as x } from "vue";
-import { radioGroupKey as F } from "./context.js";
-import { isString as L, isNumber as w, isBoolean as D, isUndefined as H, isNull as I, isFunction as K } from "../../_utils/is.js";
-import { useFormItem as M } from "../../_hooks/use-form-item.js";
-import O from "./Radio.js";
-import { useSize as P } from "../../_hooks/use-size.js";
-import { getClassNameMixin as U } from "../../_utils/config.js";
-import { omit as X } from "../../_utils/omit.js";
-const Z = /* @__PURE__ */ C({
+import { defineComponent as I, toRefs as _, useId as F, computed as u, ref as L, provide as k, reactive as w, watch as g, createVNode as v, mergeProps as D } from "vue";
+import { radioGroupKey as H } from "./context.js";
+import { isString as K, isNumber as M, isBoolean as O, isUndefined as P, isNull as U, isFunction as X } from "../../_utils/is.js";
+import { useFormItem as j, useFormItemControl as q } from "../../_hooks/use-form-item.js";
+import E from "./Radio.js";
+import { useSize as J } from "../../_hooks/use-size.js";
+import { getClassNameMixin as Q } from "../../_utils/config.js";
+import { omit as y } from "../../_utils/omit.js";
+const ie = /* @__PURE__ */ I({
   name: "RadioGroup",
   inheritAttrs: !1,
   props: {
@@ -91,7 +91,7 @@ const Z = /* @__PURE__ */ C({
      * @en Trigger when the value changes
      * @property { RadioValue } value
      */
-    change: (a, i) => !0
+    change: (a, l) => !0
   },
   /**
    * @zh radio 文案内容
@@ -109,68 +109,74 @@ const Z = /* @__PURE__ */ C({
    * @version 2.27.0
    */
   setup(a, {
-    attrs: i,
-    emit: o,
-    slots: l
+    attrs: l,
+    emit: n,
+    slots: t
   }) {
-    const t = U("radio--group"), {
+    const r = Q("radio--group"), {
       size: p,
-      type: y,
-      disabled: S,
-      modelValue: h
-    } = G(a), {
-      mergedDisabled: n,
-      mergedSize: z,
-      eventHandlers: V
-    } = M({
+      type: S,
+      disabled: h,
+      modelValue: z
+    } = _(a), N = `x-radio-group-${F()}`, V = u(() => a.name ?? N), {
+      formItemCtx: C,
+      mergedDisabled: o,
+      mergedSize: $,
+      eventHandlers: R
+    } = j({
       size: p,
-      disabled: S
+      disabled: h
+    }), x = q(C, () => ({
+      ...y(l, ["class", "style"]),
+      "aria-label": a.ariaLabel ?? l["aria-label"]
+    }), {
+      labelable: !1
     }), {
       mergedSize: m
-    } = P(z), r = _(a.defaultValue), s = d(() => a.modelValue ?? r.value), f = d(() => (a.options ?? []).map((e) => L(e) || w(e) || D(e) ? {
+    } = J($), i = L(a.defaultValue), s = u(() => a.modelValue ?? i.value), f = u(() => (a.options ?? []).map((e) => K(e) || M(e) || O(e) ? {
       label: e,
       value: e
-    } : e)), N = (e, c) => {
-      var u, b;
-      r.value = e, o("update:modelValue", e), o("change", e, c), (b = (u = V.value) == null ? void 0 : u.onChange) == null || b.call(u, c);
-    };
-    A(F, k({
+    } : e));
+    k(H, w({
       name: "XRadioGroup",
       value: s,
       size: m,
-      type: y,
-      disabled: n,
-      inputName: a.name,
-      slots: l,
-      handleChange: N
-    })), v(s, (e) => {
-      r.value !== e && (r.value = e);
-    }), v(h, (e) => {
-      (H(e) || I(e)) && (r.value = "");
+      type: S,
+      disabled: o,
+      inputName: V,
+      slots: t,
+      handleChange: (e, c) => {
+        var d, b;
+        i.value = e, n("update:modelValue", e), n("change", e, c), (b = (d = R.value) == null ? void 0 : d.onChange) == null || b.call(d, c);
+      }
+    })), g(s, (e) => {
+      i.value !== e && (i.value = e);
+    }), g(z, (e) => {
+      (P(e) || U(e)) && (i.value = "");
     });
-    const R = d(() => [`${a.type === "button" ? t.element("button") : t.block}`, t.modifier(`size-${m.value}`), t.modifier(`direction-${a.direction}`), i.class, {
-      [t.modifier("disabled")]: n.value
-    }]), $ = d(() => X(i, ["class", "style"])), B = () => f.value.map((e) => g(O, {
+    const A = u(() => [`${a.type === "button" ? r.element("button") : r.block}`, r.modifier(`size-${m.value}`), r.modifier(`direction-${a.direction}`), l.class, {
+      [r.modifier("disabled")]: o.value
+    }]), B = u(() => y(l, ["class", "style"])), G = () => f.value.map((e) => v(E, {
       key: `${typeof e.value}-${String(e.value)}`,
       value: e.value,
       disabled: e.disabled
     }, {
-      default: () => [l.label ? l.label({
+      default: () => [t.label ? t.label({
         data: e
-      }) : K(e.label) ? e.label() : e.label]
+      }) : X(e.label) ? e.label() : e.label]
     }));
     return () => {
       var e;
-      return g("span", x({
+      return v("span", D({
         role: "radiogroup",
         "aria-label": a.ariaLabel,
-        "aria-disabled": n.value,
-        class: R.value,
-        style: i.style
-      }, $.value), [f.value.length > 0 ? B() : (e = l.default) == null ? void 0 : e.call(l)]);
+        "aria-disabled": o.value,
+        class: A.value,
+        style: l.style
+      }, B.value, x.value), [f.value.length > 0 ? G() : (e = t.default) == null ? void 0 : e.call(t)]);
     };
   }
 });
 export {
-  Z as default
+  ie as default
 };

package/dist/es/components/form-select/Select.js

@@ -1,30 +1,30 @@
-import { defineComponent as Ae, toRefs as Ne, useId as je, computed as i, ref as f, watch as H, nextTick as De, watchEffect as Re, createVNode as m, mergeProps as A, isVNode as Te } from "vue";
-import { isObject as N, isFunction as y, isArray as _e, isNumber as Ke, isString as Ie, isBoolean as $e, isUndefined as S, isNull as ze, isEmptyObject as He } from "../../_utils/is.js";
-import { getKeyFromValue as M, isGroupOptionInfo as Me, isValidOption as Ue, hasEmptyStringKey as Ge } from "./utils.js";
+import { defineComponent as Ne, toRefs as je, useId as De, computed as i, ref as p, watch as H, nextTick as Re, watchEffect as Te, createVNode as m, mergeProps as A, isVNode as _e } from "vue";
+import { isObject as N, isFunction as y, isArray as Ie, isNumber as Ke, isString as $e, isBoolean as ze, isUndefined as S, isNull as He, isEmptyObject as Me } from "../../_utils/is.js";
+import { getKeyFromValue as M, isGroupOptionInfo as Ue, isValidOption as Ge, hasEmptyStringKey as We } from "./utils.js";
 import { Trigger as U } from "../trigger/index.js";
 import G from "../_components/select-view/select-view.js";
-import We from "./SelectDropdown.vue.js";
-import Ye from "./SelectOption.vue.js";
-import qe from "./SelectOptionGroup.vue.js";
-import Je from "../virtual-list-v2/virtual-list.vue.js";
-import { useSelect as Qe } from "./hooks/use-select.js";
-import { useTrigger as Xe } from "../../_hooks/use-trigger.js";
-import { useFormItem as Ze } from "../../_hooks/use-form-item.js";
-import { useLocale as et } from "../../locale/index.js";
-import { debounce as tt } from "../../_utils/debounce.js";
-import { getClassNameMixin as at } from "../../_utils/config.js";
-import { omit as lt } from "../../_utils/omit.js";
-import nt from "../../_utils/pick.js";
-function ot(t) {
-  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !Te(t);
+import Ye from "./SelectDropdown.vue.js";
+import qe from "./SelectOption.vue.js";
+import Je from "./SelectOptionGroup.vue.js";
+import Qe from "../virtual-list-v2/virtual-list.vue.js";
+import { useSelect as Xe } from "./hooks/use-select.js";
+import { useTrigger as Ze } from "../../_hooks/use-trigger.js";
+import { useFormItem as et } from "../../_hooks/use-form-item.js";
+import { useLocale as tt } from "../../locale/index.js";
+import { debounce as at } from "../../_utils/debounce.js";
+import { getClassNameMixin as lt } from "../../_utils/config.js";
+import { omit as nt } from "../../_utils/omit.js";
+import ot from "../../_utils/pick.js";
+function ut(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !_e(t);
 }
-const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], ut = {
+const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], rt = {
   value: "value",
   label: "label",
   disabled: "disabled",
   tagProps: "tagProps",
   render: "render"
-}, Ct = /* @__PURE__ */ Ae({
+}, Bt = /* @__PURE__ */ Ne({
   name: "Select",
   components: {
     Trigger: U,
@@ -447,7 +447,7 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], ut = {
       error: J,
       options: Q,
       filterOption: h,
-      valueKey: p,
+      valueKey: f,
       multiple: j,
       popupVisible: X,
       defaultPopupVisible: Z,
@@ -456,18 +456,19 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], ut = {
       fieldNames: V,
       loading: ae,
       defaultActiveFirstOption: le
-    } = Ne(t), ne = at("select"), D = je(), B = `${D}-listbox`, x = (e) => `${D}-option-${encodeURIComponent(e)}`, {
-      mergedSize: oe,
+    } = je(t), ne = lt("select"), D = De(), B = `${D}-listbox`, x = (e) => `${D}-option-${encodeURIComponent(e)}`, {
+      formItemCtx: oe,
+      mergedSize: ue,
       mergedDisabled: F,
-      mergedError: ue,
-      eventHandlers: re
-    } = Ze({
+      mergedError: re,
+      eventHandlers: ie
+    } = et({
       size: Y,
       disabled: q,
       error: J
     }), {
-      t: ie
-    } = et(), ce = i(() => t.virtualListProps ? "div" : "li"), P = i(() => N(t.allowSearch) && !!t.allowSearch.retainInputValue);
+      t: ce
+    } = tt(), de = i(() => t.virtualListProps ? "div" : "li"), P = i(() => N(t.allowSearch) && !!t.allowSearch.retainInputValue);
     i(() => {
       if (y(t.formatLabel))
         return (e) => {
@@ -475,37 +476,37 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], ut = {
           return t.formatLabel(l);
         };
     });
-    const R = f(), T = f({}), _ = f(), {
+    const R = p(), T = p({}), _ = p(), {
       computedPopupVisible: c,
       handlePopupVisibleChange: w
-    } = Xe({
+    } = Ze({
       popupVisible: X,
       defaultPopupVisible: Z,
       emit: r
-    }), k = f(t.defaultValue), E = i(() => {
+    }), k = p(t.defaultValue), E = i(() => {
       const e = t.modelValue ?? k.value;
-      return (_e(e) ? e : e || Ke(e) || Ie(e) || $e(e) ? [e] : []).map((a) => ({
+      return (Ie(e) ? e : e || Ke(e) || $e(e) || ze(e) ? [e] : []).map((a) => ({
         value: a,
         key: M(a, t.valueKey)
       }));
     });
     H(te, (e) => {
-      (S(e) || ze(e)) && (k.value = j.value ? [] : e);
+      (S(e) || He(e)) && (k.value = j.value ? [] : e);
     });
-    const d = i(() => E.value.map((e) => e.key)), K = i(() => ({
-      ...ut,
+    const d = i(() => E.value.map((e) => e.key)), I = i(() => ({
+      ...rt,
       ...V == null ? void 0 : V.value
-    })), I = f(), de = (e) => {
+    })), K = p(), se = (e) => {
       const l = {};
       return e.forEach((a) => {
         l[a] = u.get(a);
       }), l;
-    }, se = (e) => {
-      I.value = de(e);
+    }, fe = (e) => {
+      K.value = se(e);
     }, pe = (e) => y(t.fallbackOption) ? t.fallbackOption(e) : {
-      [K.value.value]: e,
-      [K.value.label]: String(N(e) ? e[p == null ? void 0 : p.value] : e)
-    }, fe = () => {
+      [I.value.value]: e,
+      [I.value.label]: String(N(e) ? e[f == null ? void 0 : f.value] : e)
+    }, me = () => {
       const e = [], l = [];
       if (t.allowCreate || t.fallbackOption) {
         for (const a of E.value)
@@ -525,19 +526,19 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], ut = {
         }
       }
       return e;
-    }, v = f([]), me = i(() => v.value.map((e) => {
+    }, v = p([]), ve = i(() => v.value.map((e) => {
       var n;
       let l = pe(e.value);
-      const a = (n = I.value) == null ? void 0 : n[e.key];
-      return !S(a) && !He(a) && (l = {
+      const a = (n = K.value) == null ? void 0 : n[e.key];
+      return !S(a) && !Me(a) && (l = {
         ...l,
         ...a
       }), l;
     }));
-    De(() => {
-      Re(() => {
+    Re(() => {
+      Te(() => {
         var l;
-        const e = fe();
+        const e = me();
         if (e.length !== v.value.length)
           v.value = e;
         else if (e.length > 0) {
@@ -549,28 +550,28 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], ut = {
         }
       });
     });
-    const $ = f(t.defaultInputValue), s = i(() => t.inputValue ?? $.value);
+    const $ = p(t.defaultInputValue), s = i(() => t.inputValue ?? $.value);
     H(c, (e) => {
       !e && !P.value && s.value && g("");
     });
-    const ve = (e) => {
+    const be = (e) => {
       var l;
       return t.multiple ? e.map((a) => {
         var n;
         return ((n = u.get(a)) == null ? void 0 : n.value) ?? "";
-      }) : ((l = u.get(e[0])) == null ? void 0 : l.value) ?? (Ge(u) ? void 0 : "");
+      }) : ((l = u.get(e[0])) == null ? void 0 : l.value) ?? (We(u) ? void 0 : "");
     }, b = (e) => {
       var a, n;
-      const l = ve(e);
-      k.value = l, r("update:modelValue", l), r("change", l), (n = (a = re.value) == null ? void 0 : a.onChange) == null || n.call(a), se(e);
+      const l = be(e);
+      k.value = l, r("update:modelValue", l), r("change", l), (n = (a = ie.value) == null ? void 0 : a.onChange) == null || n.call(a), fe(e);
     }, g = (e) => {
       $.value = e, r("update:inputValue", e), r("inputValueChange", e);
-    }, be = (e, l) => {
+    }, ge = (e, l) => {
       if (t.multiple) {
         if (d.value.includes(e)) {
           const a = d.value.filter((n) => n !== e);
           b(a);
-        } else if (Ce.value.includes(e))
+        } else if (Be.value.includes(e))
           if (t.limit > 0 && d.value.length >= t.limit) {
             const a = u.get(e);
             r("exceedLimit", a == null ? void 0 : a.value, l);
@@ -586,40 +587,40 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], ut = {
         }
         w(!1);
       }
-    }, ge = tt((e) => {
+    }, ye = at((e) => {
       r("search", e);
-    }, t.searchDelay), ye = (e) => {
-      e !== s.value && (c.value || w(!0), g(e), t.allowSearch && ge(e));
-    }, he = (e) => {
+    }, t.searchDelay), he = (e) => {
+      e !== s.value && (c.value || w(!0), g(e), t.allowSearch && ye(e));
+    }, Ve = (e) => {
       const l = u.get(e), a = d.value.filter((n) => n !== e);
       b(a), r("remove", l == null ? void 0 : l.value);
-    }, Ve = (e) => {
+    }, we = (e) => {
       e == null || e.stopPropagation();
       const l = d.value.filter((a) => {
         var n;
         return (n = u.get(a)) == null ? void 0 : n.disabled;
       });
       b(l), g(""), r("clear", e);
-    }, we = (e) => {
-      r("dropdownScroll", e);
     }, Oe = (e) => {
+      r("dropdownScroll", e);
+    }, Se = (e) => {
       r("dropdownReachBottom", e);
     }, {
       validOptions: z,
       optionInfoMap: u,
-      validOptionInfos: Se,
-      enabledOptionKeys: Ce,
+      validOptionInfos: Ce,
+      enabledOptionKeys: Be,
       activeKey: O,
-      handleKeyDown: Be
-    } = Qe({
+      handleKeyDown: xe
+    } = Xe({
       multiple: j,
       options: Q,
-      extraOptions: me,
+      extraOptions: ve,
       inputValue: s,
       filterOption: h,
       showExtraOptions: ee,
-      component: ce,
-      valueKey: p,
+      component: de,
+      valueKey: f,
       fieldNames: V,
       loading: ae,
       popupVisible: c,
@@ -628,32 +629,32 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], ut = {
       optionRefs: T,
       virtualListRef: _,
       defaultActiveFirstOption: le,
-      onSelect: be,
+      onSelect: ge,
       onPopupVisibleChange: w,
       getOptionId: x
-    }), xe = i(() => lt(C, [...W])), Fe = i(() => ({
-      ...nt(C, [...W]),
+    }), Fe = i(() => nt(C, [...W])), Pe = i(() => ({
+      ...ot(C, [...W]),
       role: "combobox",
       "aria-haspopup": "listbox",
       "aria-expanded": String(c.value),
       "aria-controls": B,
       "aria-activedescendant": c.value && !S(O.value) ? x(O.value) : void 0,
       "aria-autocomplete": t.allowSearch || t.allowCreate ? "list" : "none",
-      "aria-label": C["aria-label"] ?? t.placeholder ?? ie("common.select")
-    })), Pe = i(() => {
+      "aria-label": C["aria-label"] ?? (oe.labelId ? void 0 : t.placeholder ?? ce("common.select"))
+    })), ke = i(() => {
       const e = [];
       for (const l of E.value) {
         const a = u.get(l.key);
         a && e.push({
           ...a,
           value: l.key,
-          label: (a == null ? void 0 : a.label) ?? String(N(l.value) ? l.value[p == null ? void 0 : p.value] : l.value),
+          label: (a == null ? void 0 : a.label) ?? String(N(l.value) ? l.value[f == null ? void 0 : f.value] : l.value),
           closable: !(a != null && a.disabled),
           tagProps: a == null ? void 0 : a.tagProps
         });
       }
       return e;
-    }), ke = (e) => {
+    }), Ee = (e) => {
       if (y(o.option)) {
         const l = o.option;
         return () => l({
@@ -662,19 +663,19 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], ut = {
       }
       return y(e.render) ? e.render : () => e.label;
     }, L = (e) => {
-      if (Me(e)) {
+      if (Ue(e)) {
         let l;
-        return m(qe, {
+        return m(Je, {
           key: e.key,
           label: e.label
-        }, ot(l = e.options.map((a) => L(a))) ? l : {
+        }, ut(l = e.options.map((a) => L(a))) ? l : {
           default: () => [l]
         });
       }
-      return Ue(e, {
+      return Ge(e, {
         inputValue: s.value,
         filterOption: h == null ? void 0 : h.value
-      }) ? m(Ye, {
+      }) ? m(qe, {
         ref: (l) => {
           l != null && l.$el && (T.value[e.key] = l.$el);
         },
@@ -684,20 +685,20 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], ut = {
         disabled: e.disabled,
         internal: !0
       }, {
-        default: ke(e)
+        default: Ee(e)
       }) : null;
-    }, Ee = () => m(We, {
+    }, Le = () => m(Ye, {
       ref: R,
       id: B,
       multiple: t.multiple,
       loading: t.loading,
-      empty: Se.value.length === 0,
+      empty: Ce.value.length === 0,
       virtualList: !!t.virtualListProps,
       scrollbar: t.scrollbar,
       showHeaderOnEmpty: t.showHeaderOnEmpty,
       showFooterOnEmpty: t.showFooterOnEmpty,
-      onScroll: we,
-      onReachBottom: Oe
+      onScroll: Oe,
+      onReachBottom: Se
     }, {
       default: () => {
         var e;
@@ -705,7 +706,7 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], ut = {
       },
       "virtual-list": () => (
         // @ts-ignore
-        m(Je, A(t.virtualListProps, {
+        m(Qe, A(t.virtualListProps, {
           ref: _,
           data: z.value
         }), {
@@ -725,7 +726,7 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], ut = {
       ...o.footer ? {
         footer: o.footer
       } : {}
-    }), Le = ({
+    }), Ae = ({
       data: e
     }) => {
       var l, a;
@@ -763,11 +764,11 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], ut = {
           activeDescendant: c.value && !S(O.value) ? x(O.value) : void 0
         })) ?? m(G, A({
           class: ne.block,
-          modelValue: Pe.value,
+          modelValue: ke.value,
           inputValue: s.value,
           multiple: t.multiple,
           disabled: F.value,
-          error: ue.value,
+          error: re.value,
           loading: t.loading,
           allowClear: t.allowClear,
           allowCreate: t.allowCreate,
@@ -776,26 +777,26 @@ const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], ut = {
           maxTagCount: t.maxTagCount,
           placeholder: t.placeholder,
           bordered: t.bordered,
-          size: oe.value,
+          size: ue.value,
           tagNowrap: t.tagNowrap,
-          inputAttrs: Fe.value
-        }, xe.value, {
-          onInputValueChange: ye,
-          onRemove: he,
-          onClear: Ve,
-          onKeydown: Be
+          inputAttrs: Pe.value
+        }, Fe.value, {
+          onInputValueChange: he,
+          onRemove: Ve,
+          onClear: we,
+          onKeydown: xe
         }), {
-          label: Le,
+          label: Ae,
           prefix: o.prefix,
           "arrow-icon": o["arrow-icon"],
           "loading-icon": o["loading-icon"],
           "search-icon": o["search-icon"]
         })];
       },
-      content: Ee
+      content: Le
     });
   }
 });
 export {
-  Ct as default
+  Bt as default
 };

package/dist/es/components/form-slider/Slider.vue.js

@@ -1,19 +1,17 @@
 import g from "./Slider.vue2.js";
-import { resolveComponent as n, openBlock as e, createElementBlock as k, normalizeClass as l, createElementVNode as s, normalizeStyle as d, createBlock as i, createCommentVNode as a, createVNode as y } from "vue";
-import M from "../../_virtual/_plugin-vue_export-helper.js";
-function f(o, t, w, C, b, B) {
-  const m = n("slider-ticks"), u = n("slider-dots"), p = n("slider-marks"), r = n("slider-button"), v = n("slider-input");
-  return e(), k("div", {
-    class: l(o.cls)
-  }, [
-    s("div", {
+import { resolveComponent as n, openBlock as e, createElementBlock as k, mergeProps as a, createElementVNode as d, normalizeClass as s, normalizeStyle as y, createBlock as i, createCommentVNode as l, createVNode as M } from "vue";
+import f from "../../_virtual/_plugin-vue_export-helper.js";
+function w(o, r, C, b, B, S) {
+  const m = n("slider-ticks"), p = n("slider-dots"), u = n("slider-marks"), t = n("slider-button"), v = n("slider-input");
+  return e(), k("div", a(o.wrapperAttrs, { class: o.cls }), [
+    d("div", {
       ref: "trackRef",
-      class: l(o.trackCls),
-      onClick: t[0] || (t[0] = (...h) => o.handleClick && o.handleClick(...h))
+      class: s(o.trackCls),
+      onClick: r[0] || (r[0] = (...h) => o.handleClick && o.handleClick(...h))
     }, [
-      s("div", {
-        class: l(o.className.element("bar")),
-        style: d(o.getBarStyle(o.computedValue))
+      d("div", {
+        class: s(o.className.element("bar")),
+        style: y(o.getBarStyle(o.computedValue))
       }, null, 6),
       o.showTicks ? (e(), i(m, {
         key: 0,
@@ -22,24 +20,23 @@ function f(o, t, w, C, b, B) {
         min: o.min,
         max: o.max,
         direction: o.direction
-      }, null, 8, ["value", "step", "min", "max", "direction"])) : a("", !0),
-      o.marks ? (e(), i(u, {
+      }, null, 8, ["value", "step", "min", "max", "direction"])) : l("", !0),
+      o.marks ? (e(), i(p, {
         key: 1,
         data: o.markList,
         min: o.min,
         max: o.max,
         direction: o.direction
-      }, null, 8, ["data", "min", "max", "direction"])) : a("", !0),
-      o.marks ? (e(), i(p, {
+      }, null, 8, ["data", "min", "max", "direction"])) : l("", !0),
+      o.marks ? (e(), i(u, {
         key: 2,
         data: o.markList,
         min: o.min,
         max: o.max,
         direction: o.direction
-      }, null, 8, ["data", "min", "max", "direction"])) : a("", !0),
-      o.range ? (e(), i(r, {
-        key: 3,
-        style: d(o.getBtnStyle(o.computedValue[0])),
+      }, null, 8, ["data", "min", "max", "direction"])) : l("", !0),
+      o.range ? (e(), i(t, a({ key: 3 }, o.controlAttrs, {
+        style: o.getBtnStyle(o.computedValue[0]),
         value: o.computedValue[0],
         direction: o.direction,
         disabled: o.mergedDisabled,
@@ -54,9 +51,12 @@ function f(o, t, w, C, b, B) {
         onKeydown: o.handleStartKeyDown,
         onFocus: o.handleFocus,
         onBlur: o.handleBlur
-      }, null, 8, ["style", "value", "direction", "disabled", "min", "max", "format-tooltip", "show-tooltip", "tooltip-position", "onMovestart", "onMoving", "onMoveend", "onKeydown", "onFocus", "onBlur"])) : a("", !0),
-      y(r, {
-        style: d(o.getBtnStyle(o.computedValue[1])),
+      }), null, 16, ["style", "value", "direction", "disabled", "min", "max", "format-tooltip", "show-tooltip", "tooltip-position", "onMovestart", "onMoving", "onMoveend", "onKeydown", "onFocus", "onBlur"])) : l("", !0),
+      M(t, a({
+        ...o.controlAttrs,
+        id: o.range && o.controlAttrs.id ? `${o.controlAttrs.id}-end` : o.controlAttrs.id
+      }, {
+        style: o.getBtnStyle(o.computedValue[1]),
         value: o.computedValue[1],
         direction: o.direction,
         disabled: o.mergedDisabled,
@@ -71,7 +71,7 @@ function f(o, t, w, C, b, B) {
         onKeydown: o.handleEndKeyDown,
         onFocus: o.handleFocus,
         onBlur: o.handleBlur
-      }, null, 8, ["style", "value", "direction", "disabled", "min", "max", "format-tooltip", "show-tooltip", "tooltip-position", "onMovestart", "onMoving", "onMoveend", "onKeydown", "onFocus", "onBlur"])
+      }), null, 16, ["style", "value", "direction", "disabled", "min", "max", "format-tooltip", "show-tooltip", "tooltip-position", "onMovestart", "onMoving", "onMoveend", "onKeydown", "onFocus", "onBlur"])
     ], 2),
     o.showInput ? (e(), i(v, {
       key: 0,
@@ -83,10 +83,10 @@ function f(o, t, w, C, b, B) {
       disabled: o.mergedDisabled,
       onStartChange: o.handleStartChange,
       onEndChange: o.handleEndChange
-    }, null, 8, ["model-value", "min", "max", "step", "range", "disabled", "onStartChange", "onEndChange"])) : a("", !0)
-  ], 2);
+    }, null, 8, ["model-value", "min", "max", "step", "range", "disabled", "onStartChange", "onEndChange"])) : l("", !0)
+  ], 16);
 }
-const F = /* @__PURE__ */ M(g, [["render", f]]);
+const F = /* @__PURE__ */ f(g, [["render", w]]);
 export {
   F as default
 };