vue-form-kit/dist/Standard.da16ea9a.js

  

import { S as k } from "./SelectMixin.6cad61ab.js";
import { resolveDirective as m, withDirectives as f, openBlock as n, createElementBlock as r, normalizeClass as i, withKeys as p, withModifiers as a, createElementVNode as l, renderSlot as t, normalizeProps as d, mergeProps as u, guardReactiveProps as g, createCommentVNode as v, Fragment as h, renderList as b } from "vue";
import { _ as L } from "./_plugin-vue_export-helper.9d74fd37.js";
const S = {
  name: "StandardSelect",
  mixins: [
    k
  ]
}, C = ["tabindex"], M = ["data-value"], $ = ["innerHTML"], y = ["innerHTML"], _ = /* @__PURE__ */ l("path", {
  fill: "currentColor",
  d: `M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17
          0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7
          4.7-12.3 0-17z`,
  class: ""
}, null, -1), H = [
  _
], O = ["dusk", "onClick"], T = ["innerHTML"], B = {
  key: 0,
  class: "x-selector__option-selected"
}, z = /* @__PURE__ */ l("svg", {
  viewBox: "0 0 512 512",
  class: "w-4"
}, [
  /* @__PURE__ */ l("path", {
    fill: "currentColor",
    d: `M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284
              28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971
              0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z`,
    class: ""
  })
], -1);
function D(e, o, I, P, A, E) {
  var c;
  const w = m("click-outside");
  return f((n(), r("div", {
    class: i(["x-selector", [{ disabled: e.disabled }, e.suffix ? `x-selector--${e.suffix}` : ""]]),
    tabindex: e.tabindex,
    onKeydown: [
      o[1] || (o[1] = p(a((...s) => e.toggleSelector && e.toggleSelector(...s), ["prevent"]), ["space"])),
      o[2] || (o[2] = p(a((...s) => e.onArrowDownClick && e.onArrowDownClick(...s), ["prevent"]), ["arrow-down"]))
    ],
    onBlur: o[3] || (o[3] = (...s) => e.closeSelector && e.closeSelector(...s))
  }, [
    l("div", {
      class: i(["x-selector__input", [{ active: e.isOpen }, e.inputClasses]]),
      onClick: o[0] || (o[0] = (...s) => e.toggleSelector && e.toggleSelector(...s))
    }, [
      l("div", {
        class: "x-selector__label",
        "data-value": (c = e.selected) == null ? void 0 : c.value
      }, [
        e.selectedLabel ? t(e.$slots, "selectedLabel", d(u({ key: 0 }, { selectedLabel: e.selectedLabel })), () => [
          l("span", {
            class: "whitespace-nowrap",
            innerHTML: e.selectedLabel
          }, null, 8, $)
        ]) : t(e.$slots, "placeholder", d(u({ key: 1 }, { label: e.label })), () => [
          l("span", {
            class: "x-selector__placeholder whitespace-no-wrap",
            innerHTML: e.label
          }, null, 8, y)
        ])
      ], 8, M),
      t(e.$slots, "option-check-icon", d(g({ isOpen: e.isOpen, dropIcon: e.dropIcon })), () => [
        e.dropIcon ? (n(), r("svg", {
          key: 0,
          class: i(["x-selector__drop-icon origin-center w-4", { "transform rotate-180": e.isOpen }]),
          xmlns: "http://www.w3.org/2000/svg",
          viewBox: "0 0 448 512"
        }, H, 2)) : v("", !0)
      ])
    ], 2),
    l("div", {
      class: i(["x-selector__list", [{ hidden: !e.isOpen }, e.listClasses]])
    }, [
      (n(!0), r(h, null, b(e.options, (s) => (n(), r("div", {
        key: s.value,
        class: "x-selector__option",
        dusk: "x-selector__option-" + s.value,
        onClick: a((K) => e.onSelect(s), ["prevent"])
      }, [
        l("div", {
          class: "x-selector__option-value",
          innerHTML: s.label
        }, null, 8, T),
        e.selected && s && s.value === e.selected.value ? (n(), r("div", B, [
          t(e.$slots, "option-check-icon", {}, () => [
            z
          ])
        ])) : v("", !0)
      ], 8, O))), 128))
    ], 2)
  ], 42, C)), [
    [w, e.onClickOutside]
  ]);
}
const R = /* @__PURE__ */ L(S, [["render", D]]);
export {
  R as default
};