@aotearoan/neon/dist/components/presentation/dropdown/NeonDropdown.es.js

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

import { defineComponent as p, ref as u, onMounted as v, onUnmounted as w, watch as y } from "vue";
import { NeonDropdownPlacement as g } from "../../../common/enums/NeonDropdownPlacement.es.js";
import { NeonDropdownPlacementUtils as S } from "../../../common/utils/NeonDropdownPlacementUtils.es.js";
import { NeonClosableUtils as C } from "../../../common/utils/NeonClosableUtils.es.js";
import { NeonSize as b } from "../../../common/enums/NeonSize.es.js";
import { NeonFunctionalColor as B } from "../../../common/enums/NeonFunctionalColor.es.js";
import { NeonDropdownStyle as N } from "../../../common/enums/NeonDropdownStyle.es.js";
import L from "../badge/NeonBadge.vue.es.js";
import V from "../../user-input/button/NeonButton.vue.es.js";
import E from "../expansion-indicator/NeonExpansionIndicator.vue.es.js";
const h = p({
  name: "NeonDropdown",
  components: {
    NeonBadge: L,
    NeonButton: V,
    NeonExpansionIndicator: E
  },
  props: {
    /**
     * Id for the dropdown button.
     */
    id: { type: String },
    /**
     * Whether the dropdown is currently open.
     */
    modelValue: { type: Boolean, required: !0 },
    /**
     * The label for the dropdown button.
     */
    label: { type: String, default: null },
    /**
     * URL of image to display if the button style is a square or circular badge.
     */
    image: { type: String, default: null },
    /**
     * Badge image ALT text.
     */
    imageAlt: { type: String, default: null },
    /**
     * An icon to display on the dropdown button. This will be to the left of any label, but can also be used on its own.
     */
    icon: { type: String, default: null },
    /**
     * Show the dropdown button's indicator (chevron).
     */
    indicator: { type: Boolean, default: !0 },
    /**
     * Disable the dropdown button
     */
    disabled: { type: Boolean, default: !1 },
    /**
     * The size of the dropdown button - Small, Medium or Large.
     */
    size: { type: String, default: b.Medium },
    /**
     * The color of the dropdown button
     */
    color: { type: String, default: B.LowContrast },
    /**
     * The alternate color of the dropdown button (for gradient buttons).
     */
    alternateColor: { type: String, default: null },
    /**
     * The style of the dropdown button
     */
    dropdownStyle: { type: String, default: N.SolidButton },
    /**
     * Placement of the dropdown contents.
     */
    placement: { type: String, default: g.BottomLeft },
    /**
     * Restrict placement to within this container.
     */
    placementContainer: { type: Object, default: null },
    /**
     * Instead of opening on click (default), open on hover.
     */
    openOnHover: { type: Boolean, default: !1 }
  },
  emits: [
    /**
     * Emitted when the dropdown button is toggled.
     * @type {boolean} the open state of the dropdown.
     */
    "update:modelValue",
    /**
     * Emitted on initialisation.
     * @type {NeonDropdownPlacement} the placement of the dropdown.
     */
    "dropdown-placement",
    /**
     * Emitted when the dropdown button is blurred.
     * @type {void}
     */
    "blur",
    /**
     * Emitted when the dropdown button is focussed.
     * @type {void}
     */
    "focus",
    /**
     * emitted on initialisation
     * @type {HTMLElement} the reference to the HTMLElement for the dropdown menu button.
     */
    "button-ref"
  ],
  setup(e, { emit: n }) {
    const a = u(null), o = u(null), l = u(e.placement), r = u(null), d = () => {
      n("update:modelValue", !1);
    }, m = () => {
      e.modelValue && d();
    }, t = () => {
      if (e.modelValue && a.value && o.value) {
        const i = l.value;
        l.value = S.calculatePlacement(
          a.value,
          o.value,
          e.placement,
          e.placementContainer
        ), i !== l.value && n("dropdown-placement", l.value);
      }
    }, c = () => {
      !e.disabled && !e.openOnHover && (n("update:modelValue", !e.modelValue), setTimeout(t));
    }, s = () => {
      n("blur");
    }, f = () => {
      n("focus");
    };
    return v(() => {
      !e.openOnHover && o.value && (r.value = new C(o.value, m)), window.addEventListener("resize", t, { passive: !0 }), window.addEventListener("scroll", t, { passive: !0 }), e.placementContainer && e.placementContainer.addEventListener("scroll", t, { passive: !0 });
    }), w(() => {
      e.openOnHover || r.value && r.value.destroy(), window.removeEventListener("resize", t), window.removeEventListener("scroll", t), e.placementContainer && e.placementContainer.removeEventListener("scroll", t);
    }), y(
      () => a.value,
      (i) => n("button-ref", i),
      { immediate: !0 }
    ), {
      dropdownButton: a,
      dropdownContent: o,
      dropdownPlacement: l,
      closableUtils: r,
      onClose: d,
      close: m,
      toggleOpen: c,
      onBlur: s,
      onFocus: f
    };
  }
});
export {
  h as default
};
//# sourceMappingURL=NeonDropdown.es.js.map