import { ref as y, useTemplateRef as C, resolveComponent as s, resolveDirective as g, withDirectives as S, createElementBlock as B, openBlock as $, createVNode as n, mergeProps as d, withCtx as i, renderSlot as x, normalizeClass as h } from "vue";
import { _ as D } from "./install-BuMO14Rb.js";
const O = {
  __name: "wt-button-select",
  props: {
    /**
     * See context-menu component docs
     */
    options: {
      type: Array,
      required: !0
    },
    /**
     * @values 'primary', 'secondary'
     * @example <wt-button color="secondary"></wt-button>
     */
    color: {
      type: String,
      default: "primary"
    },
    disabled: {
      type: Boolean,
      default: !1
    }
  },
  emits: [
    /**
     * @event click
     */
    "click",
    /**
     * Click on option in context-menu
     *
     * @event click:option
     *
     * @property {object} option clicked option object
     * @property {index} index clicked option index in options list
     */
    "click:option"
  ],
  setup(e, { emit: u }) {
    const b = u, o = y(!1), a = C("buttonSelect"), f = ({ option: t, index: l }) => {
      b("click:option", t, l), o.value = !1;
    }, m = () => {
      o.value = !1;
    }, w = (t, l) => {
      o.value = !o.value, t(l, a.value);
    };
    return (t, l) => {
      const r = s("wt-button"), v = s("wt-icon"), p = s("wt-context-menu"), _ = g("clickaway");
      return S(($(), B("div", {
        ref_key: "buttonSelect",
        ref: a,
        class: "wt-button-select"
      }, [
        n(r, d(t.$attrs, {
          color: e.color,
          disabled: e.disabled,
          class: "wt-button-select__button"
        }, {
          onClick: l[0] || (l[0] = (c) => t.$emit("click", c))
        }), {
          default: i(() => [
            x(t.$slots, "default", {}, void 0, !0)
          ], void 0, !0),
          _: 3
        }, 16, ["color", "disabled"]),
        n(p, {
          disabled: e.disabled,
          options: e.options,
          visible: o.value,
          "tooltip-triggers": [],
          onClick: f
        }, {
          activator: i(({ toggle: c, show: q }) => [
            n(r, d(t.$attrs, {
              color: e.color,
              disabled: e.disabled,
              loading: !1,
              class: "wt-button-select__select-btn"
            }, {
              onClick: (k) => w(c, k)
            }), {
              default: i(() => [
                n(v, {
                  class: h([{ "wt-button-select__select-arrow--active": o.value }, "wt-button-select__select-arrow"]),
                  color: e.color === "primary" ? "on-primary" : "default",
                  disabled: e.disabled,
                  icon: "arrow-down"
                }, null, 8, ["class", "color", "disabled"])
              ], void 0, !0),
              _: 1
            }, 16, ["color", "disabled", "onClick"])
          ]),
          _: 1
        }, 8, ["disabled", "options", "visible"])
      ])), [
        [_, m]
      ]);
    };
  }
}, E = /* @__PURE__ */ D(O, [["__scopeId", "data-v-17b6dce6"]]);
export {
  E as default
};
