@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 w, ref as i, computed as y, onMounted as g, onUnmounted as S } from "vue";
import { NeonDropdownPlacement as C } from "../../../model/presentation/dropdown/NeonDropdownPlacement.es.js";
import { NeonDropdownPlacementUtils as B } from "../../../utils/presentation/dropdown/NeonDropdownPlacementUtils.es.js";
import { NeonClosableUtils as b } from "../../../utils/common/closable/NeonClosableUtils.es.js";
import { NeonSize as N } from "../../../model/common/size/NeonSize.es.js";
import { NeonFunctionalColor as L } from "../../../model/common/color/NeonFunctionalColor.es.js";
import { NeonDropdownStyle as V } from "../../../model/presentation/dropdown/NeonDropdownStyle.es.js";
import E from "../badge/NeonBadge.vue.es.js";
import O from "../../user-input/button/NeonButton.vue.es.js";
import P from "../expansion-indicator/NeonExpansionIndicator.vue.es.js";
const q = w({
  name: "NeonDropdown",
  components: {
    NeonBadge: E,
    NeonButton: O,
    NeonExpansionIndicator: P
  },
  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 },
    /**
     * aria label of the button icon
     */
    iconAriaLabel: { type: String },
    /**
     * 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: N.Medium },
    /**
     * The color of the dropdown button
     */
    color: { type: String, default: L.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: V.SolidButton },
    /**
     * Placement of the dropdown contents.
     */
    placement: { type: String, default: C.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"
  ],
  setup(e, { emit: o, expose: c }) {
    const u = i(null), n = i(null), l = i(e.placement), a = i(null), d = () => {
      o("update:modelValue", !1);
    }, m = () => {
      e.modelValue && d();
    }, t = () => {
      if (e.modelValue && u.value && n.value) {
        const r = l.value;
        l.value = B.calculatePlacement(
          u.value,
          n.value,
          e.placement,
          e.placementContainer
        ), r !== l.value && o("dropdown-placement", l.value);
      }
    }, s = () => {
      !e.disabled && !e.openOnHover && (o("update:modelValue", !e.modelValue), setTimeout(t));
    }, f = y(() => {
      var r;
      return ((r = e.dropdownStyle) == null ? void 0 : r.indexOf("badge")) === -1;
    }), p = () => {
      o("blur");
    }, v = () => {
      o("focus");
    };
    return g(() => {
      !e.openOnHover && n.value && (a.value = new b(n.value, m)), window.addEventListener("resize", t, { passive: !0 }), window.addEventListener("scroll", t, { passive: !0 }), e.placementContainer && e.placementContainer.addEventListener("scroll", t, { passive: !0 });
    }), S(() => {
      e.openOnHover || a.value && a.value.destroy(), window.removeEventListener("resize", t), window.removeEventListener("scroll", t), e.placementContainer && e.placementContainer.removeEventListener("scroll", t);
    }), c({ dropdownContent: n }), {
      dropdownButton: u,
      dropdownContent: n,
      dropdownPlacement: l,
      closableUtils: a,
      isButtonStyle: f,
      onClose: d,
      close: m,
      toggleOpen: s,
      onBlur: p,
      onFocus: v
    };
  }
});
export {
  q as default
};
//# sourceMappingURL=NeonDropdown.es.js.map