@gits-id/dropdown/dist/dropdown.mjs

GITS Dropdown Component

import { defineComponent as f, computed as p, resolveComponent as w, useAttrs as g, openBlock as o, createBlock as a, unref as n, withCtx as l, createElementBlock as h, resolveDynamicComponent as C, mergeProps as c, renderSlot as d, normalizeClass as i, createTextVNode as v, toDisplayString as y, createElementVNode as k, createVNode as r, Transition as B, Fragment as I, renderList as D, normalizeProps as S, guardReactiveProps as P } from "vue";
import { MenuItem as $, Menu as T, MenuButton as x, MenuItems as V } from "@headlessui/vue";
import M, { Icon as b } from "@gits-id/icon";
const N = {
  key: 0,
  class: "dropdown-divider"
}, L = /* @__PURE__ */ f({
  __name: "DropdownItem",
  props: {
    text: null,
    to: null,
    href: null,
    icon: null,
    iconSize: { default: "sm" },
    iconClass: { default: "" },
    newTab: { type: Boolean },
    divider: { type: Boolean },
    nuxt: { type: Boolean }
  },
  setup(e) {
    const t = e, u = p(() => t.nuxt ? w("NuxtLink") : t.href ? "a" : t.to ? w("RouterLink") : "button"), s = p(() => ({
      to: t.to ?? void 0,
      href: t.href ?? void 0,
      target: t.href && t.newTab ? "_blank" : void 0,
      rel: t.href && t.newTab ? "noopener" : void 0,
      ...g()
    }));
    return (m, E) => (o(), a(n($), null, {
      default: l(({ active: z }) => [
        e.divider ? (o(), h("div", N)) : (o(), a(C(n(u)), c({
          key: 1,
          class: [
            "group dropdown-item",
            {
              "dropdown-item--active": z
            }
          ]
        }, n(s)), {
          default: l(() => [
            d(m.$slots, "icon", {}, () => [
              typeof e.icon == "string" ? (o(), a(n(M), {
                key: 0,
                name: e.icon,
                size: e.iconSize,
                class: i([e.iconClass, "dropdown-item-icon"])
              }, null, 8, ["name", "size", "class"])) : (o(), a(C(e.icon), {
                key: 1,
                class: i([e.iconClass, "dropdown-item-icon"])
              }, null, 8, ["class"]))
            ]),
            d(m.$slots, "default", {}, () => [
              v(y(e.text), 1)
            ])
          ]),
          _: 2
        }, 1040, ["class"]))
      ]),
      _: 3
    }));
  }
});
const F = f({
  __name: "Dropdown",
  props: {
    modelValue: { type: Boolean, default: !1 },
    btnProps: { default: () => ({
      variant: "secondary"
    }) },
    label: { default: "Options" },
    right: { type: Boolean, default: !1 },
    items: { default: () => [] },
    top: { type: Boolean, default: !1 },
    topClass: { default: "bottom-10" },
    bottomClass: { default: "top-6" },
    panelClass: { default: "" },
    buttonWrapperClass: { default: "" },
    rightClass: { default: "right-0" },
    leftClass: { default: "left-0" },
    transition: { default: "fade-scale" },
    icon: { default: "ri:arrow-down-s-line" },
    iconSize: { default: "sm" },
    iconClass: { default: "" },
    prefixIcon: { default: "" },
    prefixIconSize: { default: "sm" },
    prefixIconClass: null
  },
  setup(e) {
    return (t, u) => (o(), a(n(T), {
      as: "div",
      class: "dropdown"
    }, {
      default: l(() => [
        k("div", {
          class: i(["dropdown-button-wrapper", e.buttonWrapperClass])
        }, [
          d(t.$slots, "activator", {
            btnProps: e.btnProps,
            label: e.label
          }, () => [
            r(n(x), c({
              as: "button",
              class: "dropdown-button-activator"
            }, e.btnProps), {
              default: l(() => [
                r(n(b), {
                  name: e.prefixIcon,
                  size: e.prefixIconSize,
                  class: i([e.prefixIconClass, "dropdown-button-icon"]),
                  "aria-hidden": "true"
                }, null, 8, ["name", "size", "class"]),
                v(" " + y(e.label) + " ", 1),
                r(n(b), {
                  name: e.icon,
                  size: e.iconSize,
                  class: i([e.iconClass, "dropdown-button-icon"]),
                  "aria-hidden": "true"
                }, null, 8, ["name", "size", "class"])
              ]),
              _: 1
            }, 16)
          ])
        ], 2),
        r(B, { name: e.transition }, {
          default: l(() => [
            r(n(V), {
              class: i(["dropdown-panel", [
                e.right ? e.rightClass : e.leftClass,
                e.top ? e.topClass : e.bottomClass,
                e.panelClass
              ]])
            }, {
              default: l(() => [
                d(t.$slots, "default", {}, () => [
                  (o(!0), h(I, null, D(e.items, (s) => (o(), a(L, c({
                    key: s.text
                  }, s), null, 16))), 128))
                ])
              ]),
              _: 3
            }, 8, ["class"])
          ]),
          _: 3
        }, 8, ["name"])
      ]),
      _: 3
    }));
  }
}), O = /* @__PURE__ */ f({
  __name: "DropdownButton",
  setup(e) {
    return (t, u) => (o(), a(n(x), null, {
      default: l((s) => [
        d(t.$slots, "default", S(P(s)))
      ]),
      _: 3
    }));
  }
});
export {
  F as Dropdown,
  O as DropdownButton,
  L as DropdownItem,
  F as default
};