hisonvue 1.0.0

package/dist/HDropdown-Bs7AfefJ.mjs

@@ -0,0 +1,393 @@
+import { defineComponent as de, ref as o, computed as d, onMounted as ve, onBeforeUnmount as ce, watch as i, unref as J, nextTick as ge, createElementBlock as $, openBlock as B, normalizeStyle as L, normalizeClass as U, createElementVNode as h, withKeys as Q, withModifiers as Z, renderSlot as me, toDisplayString as _, createCommentVNode as fe, Fragment as ye, renderList as be } from "vue";
+import { T as pe, w as m, D as he, x as Se, E as we, y as z, g as Ce, u as Ae, e as Ne, t as Ie, b as ee, h as S, r as Te, c as Ee, d as Oe } from "./index-DUh7pai4.mjs";
+import { a as De, r as ke } from "./setButtonCssEvent-dBs1GcAh.mjs";
+import { _ as Me } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const Ve = {
+  /**
+   * Unique identifier for the dropdown instance.
+   * - Retrieve methods via `hison.component.getDropdown(id)`
+   * - ⚠️ Duplicate `id` will throw at mount time
+   */
+  id: { type: String, required: !1 },
+  /**
+   * Custom class applied to the dropdown (string / array / object).
+   * - Works with responsive classes like `hison-col-*`, `hison-size-*`, etc.
+   */
+  class: {
+    type: [String, Array, Object],
+    required: !1
+  },
+  /**
+   * Inline styles for the root container (`.hison-dropdown`).
+   */
+  style: {
+    type: [String, Object, Array],
+    required: !1
+  },
+  /**
+   * Inline styles for the toggle area (`.hison-dropdown-toggle`).
+   */
+  toggleStyle: {
+    type: [String, Object, Array],
+    required: !1
+  },
+  /**
+   * Inline styles for the menu container (`.hison-dropdown-menu`).
+   * Merged on top of internal computed styles (e.g., maxHeight, overflow).
+   */
+  menuStyle: {
+    type: [String, Object, Array],
+    required: !1
+  },
+  /**
+   * Inline styles applied to each option item (`.hison-dropdown-item`).
+   */
+  itemStyle: {
+    type: [String, Object, Array],
+    required: !1
+  },
+  /**
+   * Visibility flag
+   */
+  visible: { type: Boolean, default: !0 },
+  /**
+   * Edit mode of the dropdown.
+   * - 'editable' | 'disable' | 'readonly'
+   */
+  editMode: {
+    type: String,
+    default: z.editable,
+    validator: (l) => we.includes(l)
+  },
+  /**
+   * Placeholder text shown when no value selected
+   */
+  placeholder: { type: String, default: "" },
+  /**
+   * Trigger type to open menu
+   * - 'click': click/tap to toggle
+   * - 'hover': mouseenter/mouseleave
+   */
+  trigger: {
+    type: String,
+    default: Se.click,
+    validator: (l) => he.includes(l)
+  },
+  /**
+   * Model: { value, options }
+   * - value: selected value
+   * - options: array of { label, value, disabled? }
+   * - Supports v-model
+   */
+  modelValue: { type: Object, required: !0 },
+  /**
+   * Max menu height in px (scrolls when overflown)
+   */
+  maxHeight: {
+    type: Number,
+    default: 240,
+    validator: (l) => Number.isFinite(l) && l >= 0
+  },
+  /**
+   * Close menu when selecting an option
+   */
+  closeOnSelect: { type: Boolean, default: !0 },
+  /**
+   * Text alignment for toggle and menu.
+   * - 'left' | 'center' | 'right'
+   * - Applies to both the toggle and the menu container.
+   */
+  textAlign: {
+    type: String,
+    default: m.left,
+    validator: (l) => pe.includes(l)
+  },
+  /**
+   * Animate menu open/close & caret rotation.
+   */
+  animate: { type: Boolean, default: !0 },
+  /**
+   * Animation duration in ms.
+   * Applied via CSS var `--hdd-duration`.
+   */
+  duration: {
+    type: Number,
+    default: 500,
+    validator: (l) => Number.isFinite(l) && l >= 0
+  },
+  /**
+   * CSS timing function (e.g., 'ease', 'linear', 'ease-in-out', 'cubic-bezier(...)').
+   * Applied via CSS var `--hdd-easing`.
+   */
+  easing: { type: String, default: "ease" },
+  /**
+   * Controls keyboard focus order of the element.
+   * - `0` enables natural tab navigation, positive numbers set custom order.
+   * - `null` or `''` removes tabindex (not focusable).
+   */
+  tabIndex: {
+    type: [Number, String],
+    default: null,
+    validator: (l) => l === null || l === "" || !isNaN(+l) && isFinite(+l)
+  }
+}, Le = de({
+  name: "HDropdown",
+  props: Ve,
+  inheritAttrs: !1,
+  emits: ["mounted", "responsive-change", "open", "close", "toggle-click", "item-click", "change", "update:modelValue"],
+  setup(l, { emit: t }) {
+    var X, Y;
+    const c = l.id || Ce(), R = `hdropdown:${c}`, s = o(null), w = o(null), a = Ae(), u = o(!1), v = o(((X = l.modelValue) == null ? void 0 : X.options) ?? []), r = o(((Y = l.modelValue) == null ? void 0 : Y.value) ?? null), y = o(!!l.visible), b = o(l.editMode), C = d(() => b.value === z.disable), A = d(() => b.value === z.readonly), F = o(l.placeholder || ""), N = o(l.trigger), I = o(l.textAlign ?? m.left), le = d(() => ({ textAlign: I.value })), T = o(l.animate ?? !0), E = o(l.duration ?? 500), O = o(l.easing ?? "ease"), D = o(
+      l.tabIndex !== null && l.tabIndex !== "" ? Number(l.tabIndex) : null
+    ), ne = d(() => ({
+      "--hdd-duration": `${E.value}ms`,
+      "--hdd-easing": O.value
+    })), te = d(() => y.value ? "" : "hison-display-none"), ae = d(() => C.value ? "hison-disable" : ""), oe = d(() => A.value ? "hison-readonly" : ""), H = o([]), j = () => {
+      H.value = Ne(Ie(l.class) || "", a.value), ee(H.value, "size", S.componentStyle.size), ee(H.value, "color", "primary");
+    }, G = d(() => {
+      const e = v.value.find((n) => n.value === r.value);
+      return (e == null ? void 0 : e.label) ?? "";
+    }), k = o(l.maxHeight ?? 240), ie = d(() => ({
+      maxHeight: `${k.value}px`,
+      overflowY: "auto"
+    })), M = o(l.closeOnSelect ?? !0), se = d(() => {
+      const e = v.value.findIndex((n) => n.value === r.value);
+      return e >= 0 ? `opt-${e}` : void 0;
+    }), K = (e) => {
+      if (!u.value) return;
+      const n = e.target, f = !!s.value && !!n && s.value.contains(n), p = !!w.value && !!n && w.value.contains(n);
+      !f && !p && V();
+    }, q = (e) => {
+      C.value || A.value || !y.value || u.value || (u.value = !0, t("open", e ?? null, g.value));
+    }, V = (e) => {
+      var p;
+      if (!u.value) return;
+      const n = document.activeElement, f = w.value;
+      f && n && f.contains(n) && ((p = s.value) == null || p.focus()), u.value = !1, t("close", e ?? null, g.value);
+    }, x = (e) => u.value ? V(e) : q(e), ue = (e) => {
+      N.value === "click" && (C.value || A.value || (t("toggle-click", e, g.value), x(e)));
+    }, re = (e, n) => {
+      if (e.disabled || C.value || A.value) return;
+      n && t("item-click", n, g.value, e);
+      const f = r.value;
+      if (e.value !== f) {
+        r.value = e.value;
+        const p = { value: r.value, options: J(v) };
+        t("update:modelValue", p), t("change", f, r.value, g.value);
+      }
+      M.value && V(n);
+    }, g = o(null), P = () => {
+      S.component.dropdownList[c] && S.component.dropdownList[c].isHisonvueComponent && console.warn(`[Hisonvue] The dropdown ID is at risk of being duplicated. ${c}`), Te(R, () => {
+        W(), ge(P);
+      }), s.value && De(s.value), j(), g.value = {
+        isHisonvueComponent: !0,
+        getId: () => c,
+        getType: () => "dropdown",
+        isVisible: () => y.value,
+        setVisible: (e) => {
+          y.value = e;
+        },
+        getEditMode: () => b.value,
+        setEditMode: (e) => {
+          b.value = e;
+        },
+        isOpen: () => u.value,
+        open: q,
+        close: V,
+        toggle: x,
+        getValue: () => r.value,
+        setValue: (e) => {
+          r.value = e;
+        },
+        getText: () => G.value,
+        getOptions: () => J(v),
+        setOptions: (e) => {
+          v.value = Array.isArray(e) ? e : [];
+        },
+        setTriggerType: (e) => {
+          N.value = e;
+        },
+        getMaxHeight: () => k.value,
+        setMaxHeight: (e) => {
+          const n = Number(e);
+          !Number.isFinite(n) || n < 0 || (k.value = n);
+        },
+        isCloseOnSelect: () => M.value,
+        setCloseOnSelect: (e) => {
+          M.value = !!e;
+        },
+        getTextAlign: () => I.value,
+        setTextAlign: (e) => {
+          (e === m.left || e === m.center || e === m.right) && (I.value = e);
+        },
+        getAnimate: () => T.value,
+        setAnimate: (e) => {
+          T.value = !!e;
+        },
+        getDuration: () => E.value,
+        setDuration: (e) => {
+          const n = Number(e);
+          Number.isFinite(n) && n >= 0 && (E.value = n);
+        },
+        getEasing: () => O.value,
+        setEasing: (e) => {
+          typeof e == "string" && (O.value = e);
+        },
+        getTabIndex: () => D.value,
+        setTabIndex: (e) => {
+          D.value = e != null ? Number(e) : null;
+        },
+        focus: () => {
+          var e;
+          (e = s.value) == null || e.focus();
+        },
+        reload: () => Ee(R)
+      }, S.component.dropdownList[c] = g.value, document.addEventListener("mousedown", K), t("mounted", g.value);
+    }, W = () => {
+      var e;
+      Oe(R);
+      try {
+        document.removeEventListener("mousedown", K);
+      } catch {
+      }
+      s.value && ke(s.value), (e = S.component) != null && e.dropdownList && delete S.component.dropdownList[c];
+    };
+    return ve(P), ce(W), i(() => l.modelValue, (e) => {
+      !e || typeof e != "object" || (Array.isArray(e.options) && (v.value = e.options), r.value = e.value);
+    }, { deep: !0 }), i(a, (e) => {
+      j(), t("responsive-change", e);
+    }), i(() => l.visible, (e) => {
+      !!e !== y.value && (y.value = !!e);
+    }), i(() => l.editMode, (e) => {
+      e && e !== b.value && (b.value = e);
+    }), i(() => l.placeholder, (e) => {
+      const n = e ?? "";
+      n !== F.value && (F.value = n);
+    }), i(() => l.trigger, (e) => {
+      e && e !== N.value && (N.value = e);
+    }), i(() => l.textAlign, (e) => {
+      (e === m.left || e === m.center || e === m.right) && e !== I.value && (I.value = e);
+    }), i(() => l.animate, (e) => {
+      const n = !!e;
+      n !== T.value && (T.value = n);
+    }), i(() => l.duration, (e) => {
+      const n = Number(e);
+      Number.isFinite(n) && n >= 0 && n !== E.value && (E.value = n);
+    }), i(() => l.easing, (e) => {
+      const n = typeof e == "string" ? e : "ease";
+      n !== O.value && (O.value = n);
+    }), i(() => l.tabIndex, (e) => {
+      const n = e === null || e === "" ? null : Number(e);
+      n !== D.value && (D.value = n);
+    }), i(() => l.maxHeight, (e) => {
+      const n = Number(e);
+      Number.isFinite(n) && n >= 0 && n !== k.value && (k.value = n);
+    }), i(() => l.closeOnSelect, (e) => {
+      const n = !!e;
+      n !== M.value && (M.value = n);
+    }), i(() => l.class, () => {
+      j();
+    }), {
+      toggleRef: s,
+      menuRef: w,
+      props: l,
+      isDisabled: C,
+      isReadonly: A,
+      visibleClass: te,
+      disableClass: ae,
+      readonlyClass: oe,
+      responsiveClassList: H,
+      isOpen: u,
+      trigger: N,
+      selectedValue: r,
+      selectedLabel: G,
+      placeholder: F,
+      activeDescId: se,
+      menuInlineStyle: ie,
+      options: v,
+      animate: T,
+      rootInlineStyle: ne,
+      tabIndex: D,
+      onToggleClick: ue,
+      onSelect: re,
+      textAlignStyle: le,
+      open: q,
+      close: V,
+      toggle: x
+    };
+  }
+}), Re = ["aria-expanded", "aria-disabled", "tabindex"], He = { class: "hison-dropdown-label" }, $e = ["aria-activedescendant", "inert"], Be = { class: "hison-dropdown-panel" }, Fe = ["aria-selected", "onClick"], je = {
+  key: 0,
+  class: "hison-dropdown-empty"
+};
+function qe(l, t, c, R, s, w) {
+  return B(), $("div", {
+    class: U([
+      "hison-dropdown",
+      ...l.responsiveClassList,
+      l.visibleClass,
+      l.disableClass,
+      l.readonlyClass,
+      l.isOpen ? "hison-open" : "",
+      l.animate ? "" : "hison-no-anim"
+    ]),
+    style: L([l.rootInlineStyle, l.props.style]),
+    onMouseenter: t[3] || (t[3] = (a) => l.trigger === "hover" ? l.open(a) : null),
+    onMouseleave: t[4] || (t[4] = (a) => l.trigger === "hover" ? l.close(a) : null)
+  }, [
+    h("div", {
+      ref: "toggleRef",
+      class: U(["hison-dropdown-toggle", [
+        l.isDisabled ? "hison-disable" : "",
+        l.isReadonly ? "hison-readonly" : ""
+      ]]),
+      "aria-expanded": l.isOpen,
+      role: "combobox",
+      "aria-disabled": l.isDisabled || l.isReadonly ? "true" : "false",
+      tabindex: l.tabIndex ?? void 0,
+      style: L([l.textAlignStyle, l.props.toggleStyle]),
+      onClick: t[0] || (t[0] = (a) => l.onToggleClick(a)),
+      onKeydown: [
+        t[1] || (t[1] = Q(Z((a) => l.onToggleClick(a), ["prevent"]), ["enter"])),
+        t[2] || (t[2] = Q(Z((a) => l.onToggleClick(a), ["prevent"]), ["space"]))
+      ]
+    }, [
+      h("span", He, _(l.selectedLabel || l.placeholder), 1),
+      me(l.$slots, "caret", {}, () => [
+        t[5] || (t[5] = h("span", { class: "hison-dropdown-caret" }, "▾", -1))
+      ])
+    ], 46, Re),
+    h("div", {
+      ref: "menuRef",
+      class: "hison-dropdown-menu",
+      style: L([l.textAlignStyle, l.props.menuStyle]),
+      role: "listbox",
+      "aria-activedescendant": l.activeDescId,
+      inert: !l.isOpen || void 0
+    }, [
+      h("div", Be, [
+        h("div", {
+          class: "hison-dropdown-panel-inner",
+          style: L(l.menuInlineStyle)
+        }, [
+          (B(!0), $(ye, null, be(l.options, (a, u) => (B(), $("div", {
+            key: `opt-${u}`,
+            class: U(["hison-dropdown-item", [
+              a.disabled ? "hison-disable" : "",
+              a.value === l.selectedValue ? "hison-selected" : ""
+            ]]),
+            style: L(l.props.itemStyle),
+            role: "option",
+            "aria-selected": a.value === l.selectedValue ? "true" : "false",
+            onClick: (v) => l.onSelect(a, v)
+          }, _(a.label), 15, Fe))), 128)),
+          l.options.length === 0 ? (B(), $("div", je, "No options")) : fe("", !0)
+        ], 4)
+      ])
+    ], 12, $e)
+  ], 38);
+}
+const Ke = /* @__PURE__ */ Me(Le, [["render", qe]]);
+export {
+  Ke as default
+};

package/dist/HDropdown-D4RAGmjE.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("vue"),o=require("./index-BmKMHsSZ.js"),j=require("./setButtonCssEvent-B9WTs2X7.js"),Q=require("./_plugin-vue_export-helper-BHFhmbuH.js"),Z={id:{type:String,required:!1},class:{type:[String,Array,Object],required:!1},style:{type:[String,Object,Array],required:!1},toggleStyle:{type:[String,Object,Array],required:!1},menuStyle:{type:[String,Object,Array],required:!1},itemStyle:{type:[String,Object,Array],required:!1},visible:{type:Boolean,default:!0},editMode:{type:String,default:o.EditMode.editable,validator:t=>o.EDIT_MODE_VALUES.includes(t)},placeholder:{type:String,default:""},trigger:{type:String,default:o.DropdownTrigger.click,validator:t=>o.DROPDOWN_TRIGGER_VALUES.includes(t)},modelValue:{type:Object,required:!0},maxHeight:{type:Number,default:240,validator:t=>Number.isFinite(t)&&t>=0},closeOnSelect:{type:Boolean,default:!0},textAlign:{type:String,default:o.TextAlign.left,validator:t=>o.TEXT_ALIGN_VALUES.includes(t)},animate:{type:Boolean,default:!0},duration:{type:Number,default:500,validator:t=>Number.isFinite(t)&&t>=0},easing:{type:String,default:"ease"},tabIndex:{type:[Number,String],default:null,validator:t=>t===null||t===""||!isNaN(+t)&&isFinite(+t)}},_=l.defineComponent({name:"HDropdown",props:Z,inheritAttrs:!1,emits:["mounted","responsive-change","open","close","toggle-click","item-click","change","update:modelValue"],setup(t,{emit:a}){var $,z;const c=t.id||o.getUUID(),I=`hdropdown:${c}`,s=l.ref(null),p=l.ref(null),i=o.useDevice(),u=l.ref(!1),d=l.ref((($=t.modelValue)==null?void 0:$.options)??[]),r=l.ref(((z=t.modelValue)==null?void 0:z.value)??null),m=l.ref(!!t.visible),f=l.ref(t.editMode),b=l.computed(()=>f.value===o.EditMode.disable),h=l.computed(()=>f.value===o.EditMode.readonly),M=l.ref(t.placeholder||""),S=l.ref(t.trigger),w=l.ref(t.textAlign??o.TextAlign.left),F=l.computed(()=>({textAlign:w.value})),C=l.ref(t.animate??!0),A=l.ref(t.duration??500),E=l.ref(t.easing??"ease"),T=l.ref(t.tabIndex!==null&&t.tabIndex!==""?Number(t.tabIndex):null),U=l.computed(()=>({"--hdd-duration":`${A.value}ms`,"--hdd-easing":E.value})),G=l.computed(()=>m.value?"":"hison-display-none"),K=l.computed(()=>b.value?"hison-disable":""),P=l.computed(()=>h.value?"hison-readonly":""),O=l.ref([]),D=()=>{O.value=o.extractResponsiveClasses(o.toClassString(t.class)||"",i.value),o.addComponentNameToClass(O.value,"size",o.hisonCloser.componentStyle.size),o.addComponentNameToClass(O.value,"color","primary")},H=l.computed(()=>{const e=d.value.find(n=>n.value===r.value);return(e==null?void 0:e.label)??""}),N=l.ref(t.maxHeight??240),W=l.computed(()=>({maxHeight:`${N.value}px`,overflowY:"auto"})),k=l.ref(t.closeOnSelect??!0),X=l.computed(()=>{const e=d.value.findIndex(n=>n.value===r.value);return e>=0?`opt-${e}`:void 0}),R=e=>{if(!u.value)return;const n=e.target,g=!!s.value&&!!n&&s.value.contains(n),y=!!p.value&&!!n&&p.value.contains(n);!g&&!y&&V()},L=e=>{b.value||h.value||!m.value||u.value||(u.value=!0,a("open",e??null,v.value))},V=e=>{var y;if(!u.value)return;const n=document.activeElement,g=p.value;g&&n&&g.contains(n)&&((y=s.value)==null||y.focus()),u.value=!1,a("close",e??null,v.value)},B=e=>u.value?V(e):L(e),Y=e=>{S.value==="click"&&(b.value||h.value||(a("toggle-click",e,v.value),B(e)))},J=(e,n)=>{if(e.disabled||b.value||h.value)return;n&&a("item-click",n,v.value,e);const g=r.value;if(e.value!==g){r.value=e.value;const y={value:r.value,options:l.unref(d)};a("update:modelValue",y),a("change",g,r.value,v.value)}k.value&&V(n)},v=l.ref(null),x=()=>{o.hisonCloser.component.dropdownList[c]&&o.hisonCloser.component.dropdownList[c].isHisonvueComponent&&console.warn(`[Hisonvue] The dropdown ID is at risk of being duplicated. ${c}`),o.registerReloadable(I,()=>{q(),l.nextTick(x)}),s.value&&j.addButtonCssEvent(s.value),D(),v.value={isHisonvueComponent:!0,getId:()=>c,getType:()=>"dropdown",isVisible:()=>m.value,setVisible:e=>{m.value=e},getEditMode:()=>f.value,setEditMode:e=>{f.value=e},isOpen:()=>u.value,open:L,close:V,toggle:B,getValue:()=>r.value,setValue:e=>{r.value=e},getText:()=>H.value,getOptions:()=>l.unref(d),setOptions:e=>{d.value=Array.isArray(e)?e:[]},setTriggerType:e=>{S.value=e},getMaxHeight:()=>N.value,setMaxHeight:e=>{const n=Number(e);!Number.isFinite(n)||n<0||(N.value=n)},isCloseOnSelect:()=>k.value,setCloseOnSelect:e=>{k.value=!!e},getTextAlign:()=>w.value,setTextAlign:e=>{(e===o.TextAlign.left||e===o.TextAlign.center||e===o.TextAlign.right)&&(w.value=e)},getAnimate:()=>C.value,setAnimate:e=>{C.value=!!e},getDuration:()=>A.value,setDuration:e=>{const n=Number(e);Number.isFinite(n)&&n>=0&&(A.value=n)},getEasing:()=>E.value,setEasing:e=>{typeof e=="string"&&(E.value=e)},getTabIndex:()=>T.value,setTabIndex:e=>{T.value=e!=null?Number(e):null},focus:()=>{var e;(e=s.value)==null||e.focus()},reload:()=>o.reloadHisonComponent(I)},o.hisonCloser.component.dropdownList[c]=v.value,document.addEventListener("mousedown",R),a("mounted",v.value)},q=()=>{var e;o.unregisterReloadable(I);try{document.removeEventListener("mousedown",R)}catch{}s.value&&j.removeButtonCssEvent(s.value),(e=o.hisonCloser.component)!=null&&e.dropdownList&&delete o.hisonCloser.component.dropdownList[c]};return l.onMounted(x),l.onBeforeUnmount(q),l.watch(()=>t.modelValue,e=>{!e||typeof e!="object"||(Array.isArray(e.options)&&(d.value=e.options),r.value=e.value)},{deep:!0}),l.watch(i,e=>{D(),a("responsive-change",e)}),l.watch(()=>t.visible,e=>{!!e!==m.value&&(m.value=!!e)}),l.watch(()=>t.editMode,e=>{e&&e!==f.value&&(f.value=e)}),l.watch(()=>t.placeholder,e=>{const n=e??"";n!==M.value&&(M.value=n)}),l.watch(()=>t.trigger,e=>{e&&e!==S.value&&(S.value=e)}),l.watch(()=>t.textAlign,e=>{(e===o.TextAlign.left||e===o.TextAlign.center||e===o.TextAlign.right)&&e!==w.value&&(w.value=e)}),l.watch(()=>t.animate,e=>{const n=!!e;n!==C.value&&(C.value=n)}),l.watch(()=>t.duration,e=>{const n=Number(e);Number.isFinite(n)&&n>=0&&n!==A.value&&(A.value=n)}),l.watch(()=>t.easing,e=>{const n=typeof e=="string"?e:"ease";n!==E.value&&(E.value=n)}),l.watch(()=>t.tabIndex,e=>{const n=e===null||e===""?null:Number(e);n!==T.value&&(T.value=n)}),l.watch(()=>t.maxHeight,e=>{const n=Number(e);Number.isFinite(n)&&n>=0&&n!==N.value&&(N.value=n)}),l.watch(()=>t.closeOnSelect,e=>{const n=!!e;n!==k.value&&(k.value=n)}),l.watch(()=>t.class,()=>{D()}),{toggleRef:s,menuRef:p,props:t,isDisabled:b,isReadonly:h,visibleClass:G,disableClass:K,readonlyClass:P,responsiveClassList:O,isOpen:u,trigger:S,selectedValue:r,selectedLabel:H,placeholder:M,activeDescId:X,menuInlineStyle:W,options:d,animate:C,rootInlineStyle:U,tabIndex:T,onToggleClick:Y,onSelect:J,textAlignStyle:F,open:L,close:V,toggle:B}}}),ee=["aria-expanded","aria-disabled","tabindex"],te={class:"hison-dropdown-label"},le=["aria-activedescendant","inert"],ne={class:"hison-dropdown-panel"},oe=["aria-selected","onClick"],ae={key:0,class:"hison-dropdown-empty"};function ie(t,a,c,I,s,p){return l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass(["hison-dropdown",...t.responsiveClassList,t.visibleClass,t.disableClass,t.readonlyClass,t.isOpen?"hison-open":"",t.animate?"":"hison-no-anim"]),style:l.normalizeStyle([t.rootInlineStyle,t.props.style]),onMouseenter:a[3]||(a[3]=i=>t.trigger==="hover"?t.open(i):null),onMouseleave:a[4]||(a[4]=i=>t.trigger==="hover"?t.close(i):null)},[l.createElementVNode("div",{ref:"toggleRef",class:l.normalizeClass(["hison-dropdown-toggle",[t.isDisabled?"hison-disable":"",t.isReadonly?"hison-readonly":""]]),"aria-expanded":t.isOpen,role:"combobox","aria-disabled":t.isDisabled||t.isReadonly?"true":"false",tabindex:t.tabIndex??void 0,style:l.normalizeStyle([t.textAlignStyle,t.props.toggleStyle]),onClick:a[0]||(a[0]=i=>t.onToggleClick(i)),onKeydown:[a[1]||(a[1]=l.withKeys(l.withModifiers(i=>t.onToggleClick(i),["prevent"]),["enter"])),a[2]||(a[2]=l.withKeys(l.withModifiers(i=>t.onToggleClick(i),["prevent"]),["space"]))]},[l.createElementVNode("span",te,l.toDisplayString(t.selectedLabel||t.placeholder),1),l.renderSlot(t.$slots,"caret",{},()=>[a[5]||(a[5]=l.createElementVNode("span",{class:"hison-dropdown-caret"},"▾",-1))])],46,ee),l.createElementVNode("div",{ref:"menuRef",class:"hison-dropdown-menu",style:l.normalizeStyle([t.textAlignStyle,t.props.menuStyle]),role:"listbox","aria-activedescendant":t.activeDescId,inert:!t.isOpen||void 0},[l.createElementVNode("div",ne,[l.createElementVNode("div",{class:"hison-dropdown-panel-inner",style:l.normalizeStyle(t.menuInlineStyle)},[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(t.options,(i,u)=>(l.openBlock(),l.createElementBlock("div",{key:`opt-${u}`,class:l.normalizeClass(["hison-dropdown-item",[i.disabled?"hison-disable":"",i.value===t.selectedValue?"hison-selected":""]]),style:l.normalizeStyle(t.props.itemStyle),role:"option","aria-selected":i.value===t.selectedValue?"true":"false",onClick:d=>t.onSelect(i,d)},l.toDisplayString(i.label),15,oe))),128)),t.options.length===0?(l.openBlock(),l.createElementBlock("div",ae,"No options")):l.createCommentVNode("",!0)],4)])],12,le)],38)}const se=Q._export_sfc(_,[["render",ie]]);exports.default=se;