@aotearoan/neon 28.0.1 → 28.0.2

package/dist/components/navigation/dropdown-menu/NeonDropdownMenu.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const n=require("vue"),b=require("../../../model/common/size/NeonSize.cjs.js"),q=require("../../../model/common/color/NeonFunctionalColor.cjs.js"),S=require("../../presentation/dropdown/NeonDropdown.vue.cjs.js"),c=require("../../../model/presentation/dropdown/NeonDropdownPlacement.cjs.js"),P=require("../../../utils/common/dom/NeonScrollUtils.cjs.js"),B=require("../../presentation/icon/NeonIcon.vue.cjs.js"),L=require("../link/NeonLink.vue.cjs.js"),C=n.defineComponent({name:"NeonDropdownMenu",components:{NeonDropdown:S,NeonIcon:B,NeonLink:L},props:{model:{type:Array,required:!0},size:{type:String,default:b.NeonSize.Medium},color:{type:String,default:q.NeonFunctionalColor.LowContrast},disabled:{type:Boolean,default:!1},placement:{type:String,default:c.NeonDropdownPlacement.BottomLeft},openOnHover:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:d}){const h=n.useAttrs(),f=n.ref(null),m=n.ref(null),v=n.ref([]),r=n.ref(!1),s=n.ref(null),l=n.ref(-1),p=e=>{s.value=e,l.value=t.model.findIndex(o=>o.key===e)},y=e=>{m.value=e},g=()=>{switch(m.value){case c.NeonDropdownPlacement.TopLeft:case c.NeonDropdownPlacement.TopRight:case c.NeonDropdownPlacement.LeftBottom:case c.NeonDropdownPlacement.RightBottom:return!0}return!1},N=()=>{var o,a;const e=(a=(o=f.value)==null?void 0:o.dropdownContent)==null?void 0:a.querySelector(".neon-dropdown-menu__item--highlighted");e&&(e.focus(),P.NeonScrollUtils.scrollIntoView(e))},i=(e,o)=>{const a=l.value+e;a>=0&&a<=t.model.length-1&&(l.value=a,s.value=t.model[l.value].key,o.preventDefault(),setTimeout(N))},u=e=>{if(!t.disabled&&r.value)switch(e.code){case"ArrowUp":case"ArrowDown":{const o=g()?-1:1;e.code==="ArrowUp"?i(-1*o,e):i(1*o,e)}break;case"Enter":case"Space":t.model[l.value]&&!t.model[l.value].disabled&&(w(t.model[l.value]),e.preventDefault());break;case"Tab":!e.ctrlKey&&!e.metaKey&&!e.altKey&&(r.value=!1);break;case"Escape":r.value=!1;break}},w=e=>{var o;if(!e.disabled){if(e.href){const a=(o=v.value[l.value])==null?void 0:o.firstElementChild;a&&a.click()}else d("click",e);r.value=!1}},k=()=>{t.openOnHover&&(r.value=!0)},D=()=>{t.openOnHover&&(r.value=!1)};return n.onMounted(()=>{document.addEventListener("keydown",u)}),n.onUnmounted(()=>{document.removeEventListener("keydown",u)}),n.watch(()=>r.value,e=>{e&&(s.value=t.model[0].key,l.value=0)}),{dropdown:f,items:v,open:r,highlightedKey:s,highlightedIndex:l,attrs:h,emit:d,changeHighlighted:p,keyboardHandler:u,onBlur:D,onFocus:k,clickItem:w,navigateBy:i,onPlacement:y}}});module.exports=C;
+"use strict";const n=require("vue"),D=require("../../../model/common/size/NeonSize.cjs.js"),P=require("../../../model/common/color/NeonFunctionalColor.cjs.js"),b=require("../../presentation/dropdown/NeonDropdown.vue.cjs.js"),c=require("../../../model/presentation/dropdown/NeonDropdownPlacement.cjs.js"),S=require("../../../utils/common/dom/NeonScrollUtils.cjs.js"),H=require("../../presentation/icon/NeonIcon.vue.cjs.js"),B=require("../link/NeonLink.vue.cjs.js"),L=require("../../../model/common/position/NeonHorizontalPosition.cjs.js"),z=n.defineComponent({name:"NeonDropdownMenu",components:{NeonDropdown:b,NeonIcon:H,NeonLink:B},props:{model:{type:Array,required:!0},size:{type:String,default:D.NeonSize.Medium},color:{type:String,default:P.NeonFunctionalColor.LowContrast},disabled:{type:Boolean,default:!1},placement:{type:String,default:c.NeonDropdownPlacement.BottomLeft},openOnHover:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:d}){const h=n.useAttrs(),f=n.ref(null),m=n.ref(null),v=n.ref([]),r=n.ref(!1),s=n.ref(null),l=n.ref(-1),N=e=>{s.value=e,l.value=t.model.findIndex(o=>o.key===e)},p=e=>{m.value=e},y=()=>{switch(m.value){case c.NeonDropdownPlacement.TopLeft:case c.NeonDropdownPlacement.TopRight:case c.NeonDropdownPlacement.LeftBottom:case c.NeonDropdownPlacement.RightBottom:return!0}return!1},g=()=>{var o,a;const e=(a=(o=f.value)==null?void 0:o.dropdownContent)==null?void 0:a.querySelector(".neon-dropdown-menu__item--highlighted");e&&(e.focus(),S.NeonScrollUtils.scrollIntoView(e))},i=(e,o)=>{const a=l.value+e;a>=0&&a<=t.model.length-1&&(l.value=a,s.value=t.model[l.value].key,o.preventDefault(),setTimeout(g))},u=e=>{if(!t.disabled&&r.value)switch(e.code){case"ArrowUp":case"ArrowDown":{const o=y()?-1:1;e.code==="ArrowUp"?i(-1*o,e):i(1*o,e)}break;case"Enter":case"Space":t.model[l.value]&&!t.model[l.value].disabled&&(w(t.model[l.value]),e.preventDefault());break;case"Tab":!e.ctrlKey&&!e.metaKey&&!e.altKey&&(r.value=!1);break;case"Escape":r.value=!1;break}},w=e=>{var o;if(!e.disabled){if(e.href){const a=(o=v.value[l.value])==null?void 0:o.firstElementChild;a&&a.click()}else d("click",e);r.value=!1}},k=()=>{t.openOnHover&&(r.value=!0)},q=()=>{t.openOnHover&&(r.value=!1)};return n.onMounted(()=>{document.addEventListener("keydown",u)}),n.onUnmounted(()=>{document.removeEventListener("keydown",u)}),n.watch(()=>r.value,e=>{e&&(s.value=t.model[0].key,l.value=0)}),{dropdown:f,items:v,open:r,highlightedKey:s,highlightedIndex:l,attrs:h,emit:d,changeHighlighted:N,keyboardHandler:u,onBlur:q,onFocus:k,clickItem:w,navigateBy:i,onPlacement:p,NeonHorizontalPosition:L.NeonHorizontalPosition}}});module.exports=z;
 //# sourceMappingURL=NeonDropdownMenu.cjs.js.map

package/dist/components/navigation/dropdown-menu/NeonDropdownMenu.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonDropdownMenu.cjs.js","sources":["../../../../src/components/navigation/dropdown-menu/NeonDropdownMenu.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport type { NeonDropdownMenuItem } from '@/model/presentation/dropdown/NeonDropdownMenuItem';\nimport { NeonSize } from '@/model/common/size/NeonSize';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport { NeonDropdownPlacement } from '@/model/presentation/dropdown/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/utils/common/dom/NeonScrollUtils';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\n\n/**\n * <p>A dropdown menu consisting of a button to open the menu and a list of menu items. Clicking on a menu item will\n * result in navigating to the provided URL or notifying the parent component via the @click event.</p>\n * <p><strong>Note:</strong> As well as the options described below, pass through attributes supported by\n * <a href=\"/presentation/dropdown\">NeonDropdown</a> to change the style of the dropdown button.</p>\n */\nexport default defineComponent({\n  name: 'NeonDropdownMenu',\n  components: {\n    NeonDropdown,\n    NeonIcon,\n    NeonLink,\n  },\n  props: {\n    /**\n     * A list of menu items to render in the dropdown menu.\n     */\n    model: { type: Array as () => Array<NeonDropdownMenuItem>, required: true },\n    /**\n     * The size of the dropdown - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The dropdown color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Whether the dropdown button is disabled or not.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n    /**\n     * Instead of opening on click (default), open on hover.\n     */\n    openOnHover: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * emitted when the user clicks on a menu item.\n     * @type {NeonDropdownMenuItem} the menu item the user clicked on.\n     */\n    'click',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const dropdown = ref<InstanceType<typeof NeonDropdown> | null>(null);\n    const dropdownPlacement = ref<NeonDropdownPlacement | null>(null);\n    const items = ref<Array<HTMLLIElement>>([]);\n    const open = ref(false);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = props.model.findIndex((item) => item.key === key);\n    };\n\n    const onPlacement = (placement: NeonDropdownPlacement) => {\n      dropdownPlacement.value = placement;\n    };\n\n    const isReverse = () => {\n      switch (dropdownPlacement.value) {\n        case NeonDropdownPlacement.TopLeft:\n        case NeonDropdownPlacement.TopRight:\n        case NeonDropdownPlacement.LeftBottom:\n        case NeonDropdownPlacement.RightBottom:\n          return true;\n      }\n\n      return false;\n    };\n\n    const onNavigate = () => {\n      const element: HTMLElement | null = dropdown.value?.dropdownContent?.querySelector(\n        '.neon-dropdown-menu__item--highlighted',\n      ) as HTMLElement;\n\n      if (element) {\n        element.focus();\n        NeonScrollUtils.scrollIntoView(element);\n      }\n    };\n\n    const navigateBy = (offset: number, $event: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= props.model.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = props.model[highlightedIndex.value].key;\n        $event.preventDefault();\n        setTimeout(onNavigate);\n      }\n    };\n\n    const keyboardHandler = ($event: KeyboardEvent) => {\n      if (!props.disabled) {\n        if (open.value) {\n          switch ($event.code) {\n            case 'ArrowUp':\n            case 'ArrowDown':\n              {\n                const reverseOffset = isReverse() ? -1 : 1;\n                if ($event.code === 'ArrowUp') {\n                  navigateBy(-1 * reverseOffset, $event);\n                } else {\n                  navigateBy(1 * reverseOffset, $event);\n                }\n              }\n              break;\n            case 'Enter':\n            case 'Space':\n              if (props.model[highlightedIndex.value] && !props.model[highlightedIndex.value].disabled) {\n                clickItem(props.model[highlightedIndex.value]);\n                $event.preventDefault();\n              }\n              break;\n            case 'Tab':\n              if (!$event.ctrlKey && !$event.metaKey && !$event.altKey) {\n                open.value = false;\n              }\n              break;\n            case 'Escape':\n              open.value = false;\n              break;\n          }\n        }\n      }\n    };\n\n    const clickItem = (item: NeonDropdownMenuItem) => {\n      if (!item.disabled) {\n        if (item.href) {\n          const anchor = items.value[highlightedIndex.value]?.firstElementChild as HTMLAnchorElement;\n          anchor && anchor.click();\n        } else {\n          emit('click', item);\n        }\n        open.value = false;\n      }\n    };\n\n    const onFocus = () => {\n      if (props.openOnHover) {\n        open.value = true;\n      }\n    };\n\n    const onBlur = () => {\n      if (props.openOnHover) {\n        open.value = false;\n      }\n    };\n\n    onMounted(() => {\n      document.addEventListener('keydown', keyboardHandler);\n    });\n\n    onUnmounted(() => {\n      document.removeEventListener('keydown', keyboardHandler);\n    });\n\n    watch(\n      () => open.value,\n      (open: boolean) => {\n        if (open) {\n          highlightedKey.value = props.model[0].key;\n          highlightedIndex.value = 0;\n        }\n      },\n    );\n\n    return {\n      dropdown,\n      items,\n      open,\n      highlightedKey,\n      highlightedIndex,\n      attrs,\n      emit,\n      changeHighlighted,\n      keyboardHandler,\n      onBlur,\n      onFocus,\n      clickItem,\n      navigateBy,\n      onPlacement,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonDropdown","NeonIcon","NeonLink","NeonSize","NeonFunctionalColor","NeonDropdownPlacement","props","emit","attrs","useAttrs","dropdown","ref","dropdownPlacement","items","open","highlightedKey","highlightedIndex","changeHighlighted","key","item","onPlacement","placement","isReverse","onNavigate","element","_b","_a","NeonScrollUtils","navigateBy","offset","$event","newIndex","keyboardHandler","reverseOffset","clickItem","anchor","onFocus","onBlur","onMounted","onUnmounted","watch"],"mappings":"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"}
+{"version":3,"file":"NeonDropdownMenu.cjs.js","sources":["../../../../src/components/navigation/dropdown-menu/NeonDropdownMenu.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport type { NeonDropdownMenuItem } from '@/model/presentation/dropdown/NeonDropdownMenuItem';\nimport { NeonSize } from '@/model/common/size/NeonSize';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport { NeonDropdownPlacement } from '@/model/presentation/dropdown/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/utils/common/dom/NeonScrollUtils';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport { NeonHorizontalPosition } from '@/model/common/position/NeonHorizontalPosition';\n\n/**\n * <p>A dropdown menu consisting of a button to open the menu and a list of menu items. Clicking on a menu item will\n * result in navigating to the provided URL or notifying the parent component via the @click event.</p>\n * <p><strong>Note:</strong> As well as the options described below, pass through attributes supported by\n * <a href=\"/presentation/dropdown\">NeonDropdown</a> to change the style of the dropdown button.</p>\n */\nexport default defineComponent({\n  name: 'NeonDropdownMenu',\n  components: {\n    NeonDropdown,\n    NeonIcon,\n    NeonLink,\n  },\n  props: {\n    /**\n     * A list of menu items to render in the dropdown menu.\n     */\n    model: { type: Array as () => Array<NeonDropdownMenuItem>, required: true },\n    /**\n     * The size of the dropdown - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The dropdown color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Whether the dropdown button is disabled or not.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n    /**\n     * Instead of opening on click (default), open on hover.\n     */\n    openOnHover: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * emitted when the user clicks on a menu item.\n     * @type {NeonDropdownMenuItem} the menu item the user clicked on.\n     */\n    'click',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const dropdown = ref<InstanceType<typeof NeonDropdown> | null>(null);\n    const dropdownPlacement = ref<NeonDropdownPlacement | null>(null);\n    const items = ref<Array<HTMLLIElement>>([]);\n    const open = ref(false);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = props.model.findIndex((item) => item.key === key);\n    };\n\n    const onPlacement = (placement: NeonDropdownPlacement) => {\n      dropdownPlacement.value = placement;\n    };\n\n    const isReverse = () => {\n      switch (dropdownPlacement.value) {\n        case NeonDropdownPlacement.TopLeft:\n        case NeonDropdownPlacement.TopRight:\n        case NeonDropdownPlacement.LeftBottom:\n        case NeonDropdownPlacement.RightBottom:\n          return true;\n      }\n\n      return false;\n    };\n\n    const onNavigate = () => {\n      const element: HTMLElement | null = dropdown.value?.dropdownContent?.querySelector(\n        '.neon-dropdown-menu__item--highlighted',\n      ) as HTMLElement;\n\n      if (element) {\n        element.focus();\n        NeonScrollUtils.scrollIntoView(element);\n      }\n    };\n\n    const navigateBy = (offset: number, $event: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= props.model.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = props.model[highlightedIndex.value].key;\n        $event.preventDefault();\n        setTimeout(onNavigate);\n      }\n    };\n\n    const keyboardHandler = ($event: KeyboardEvent) => {\n      if (!props.disabled) {\n        if (open.value) {\n          switch ($event.code) {\n            case 'ArrowUp':\n            case 'ArrowDown':\n              {\n                const reverseOffset = isReverse() ? -1 : 1;\n                if ($event.code === 'ArrowUp') {\n                  navigateBy(-1 * reverseOffset, $event);\n                } else {\n                  navigateBy(1 * reverseOffset, $event);\n                }\n              }\n              break;\n            case 'Enter':\n            case 'Space':\n              if (props.model[highlightedIndex.value] && !props.model[highlightedIndex.value].disabled) {\n                clickItem(props.model[highlightedIndex.value]);\n                $event.preventDefault();\n              }\n              break;\n            case 'Tab':\n              if (!$event.ctrlKey && !$event.metaKey && !$event.altKey) {\n                open.value = false;\n              }\n              break;\n            case 'Escape':\n              open.value = false;\n              break;\n          }\n        }\n      }\n    };\n\n    const clickItem = (item: NeonDropdownMenuItem) => {\n      if (!item.disabled) {\n        if (item.href) {\n          const anchor = items.value[highlightedIndex.value]?.firstElementChild as HTMLAnchorElement;\n          anchor && anchor.click();\n        } else {\n          emit('click', item);\n        }\n        open.value = false;\n      }\n    };\n\n    const onFocus = () => {\n      if (props.openOnHover) {\n        open.value = true;\n      }\n    };\n\n    const onBlur = () => {\n      if (props.openOnHover) {\n        open.value = false;\n      }\n    };\n\n    onMounted(() => {\n      document.addEventListener('keydown', keyboardHandler);\n    });\n\n    onUnmounted(() => {\n      document.removeEventListener('keydown', keyboardHandler);\n    });\n\n    watch(\n      () => open.value,\n      (open: boolean) => {\n        if (open) {\n          highlightedKey.value = props.model[0].key;\n          highlightedIndex.value = 0;\n        }\n      },\n    );\n\n    return {\n      dropdown,\n      items,\n      open,\n      highlightedKey,\n      highlightedIndex,\n      attrs,\n      emit,\n      changeHighlighted,\n      keyboardHandler,\n      onBlur,\n      onFocus,\n      clickItem,\n      navigateBy,\n      onPlacement,\n      NeonHorizontalPosition,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonDropdown","NeonIcon","NeonLink","NeonSize","NeonFunctionalColor","NeonDropdownPlacement","props","emit","attrs","useAttrs","dropdown","ref","dropdownPlacement","items","open","highlightedKey","highlightedIndex","changeHighlighted","key","item","onPlacement","placement","isReverse","onNavigate","element","_b","_a","NeonScrollUtils","navigateBy","offset","$event","newIndex","keyboardHandler","reverseOffset","clickItem","anchor","onFocus","onBlur","onMounted","onUnmounted","watch","NeonHorizontalPosition"],"mappings":"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"}

package/dist/components/navigation/dropdown-menu/NeonDropdownMenu.es.js

@@ -1,15 +1,16 @@
-import { defineComponent as B, useAttrs as L, ref as r, onMounted as S, onUnmounted as D, watch as I } from "vue";
-import { NeonSize as A } from "../../../model/common/size/NeonSize.es.js";
-import { NeonFunctionalColor as C } from "../../../model/common/color/NeonFunctionalColor.es.js";
-import E from "../../presentation/dropdown/NeonDropdown.vue.es.js";
-import { NeonDropdownPlacement as c } from "../../../model/presentation/dropdown/NeonDropdownPlacement.es.js";
-import { NeonScrollUtils as H } from "../../../utils/common/dom/NeonScrollUtils.es.js";
+import { defineComponent as B, useAttrs as L, ref as r, onMounted as S, onUnmounted as D, watch as H } from "vue";
+import { NeonSize as I } from "../../../model/common/size/NeonSize.es.js";
+import { NeonFunctionalColor as A } from "../../../model/common/color/NeonFunctionalColor.es.js";
+import C from "../../presentation/dropdown/NeonDropdown.vue.es.js";
+import { NeonDropdownPlacement as i } from "../../../model/presentation/dropdown/NeonDropdownPlacement.es.js";
+import { NeonScrollUtils as E } from "../../../utils/common/dom/NeonScrollUtils.es.js";
 import x from "../../presentation/icon/NeonIcon.vue.es.js";
 import K from "../link/NeonLink.vue.es.js";
-const z = B({
+import { NeonHorizontalPosition as O } from "../../../model/common/position/NeonHorizontalPosition.es.js";
+const V = B({
   name: "NeonDropdownMenu",
   components: {
-    NeonDropdown: E,
+    NeonDropdown: C,
     NeonIcon: x,
     NeonLink: K
   },
@@ -21,11 +22,11 @@ const z = B({
     /**
      * The size of the dropdown - Small, Medium or Large.
      */
-    size: { type: String, default: A.Medium },
+    size: { type: String, default: I.Medium },
     /**
      * The dropdown color.
      */
-    color: { type: String, default: C.LowContrast },
+    color: { type: String, default: A.LowContrast },
     /**
      * Whether the dropdown button is disabled or not.
      */
@@ -33,7 +34,7 @@ const z = B({
     /**
      * Placement of the dropdown contents.
      */
-    placement: { type: String, default: c.BottomLeft },
+    placement: { type: String, default: i.BottomLeft },
     /**
      * Instead of opening on click (default), open on hover.
      */
@@ -47,16 +48,16 @@ const z = B({
     "click"
   ],
   setup(t, { emit: u }) {
-    const h = L(), f = r(null), m = r(null), v = r([]), a = r(!1), s = r(null), n = r(-1), w = (e) => {
-      s.value = e, n.value = t.model.findIndex((o) => o.key === e);
+    const h = L(), f = r(null), m = r(null), v = r([]), a = r(!1), c = r(null), n = r(-1), w = (e) => {
+      c.value = e, n.value = t.model.findIndex((o) => o.key === e);
     }, y = (e) => {
       m.value = e;
     }, g = () => {
       switch (m.value) {
-        case c.TopLeft:
-        case c.TopRight:
-        case c.LeftBottom:
-        case c.RightBottom:
+        case i.TopLeft:
+        case i.TopRight:
+        case i.LeftBottom:
+        case i.RightBottom:
           return !0;
       }
       return !1;
@@ -65,10 +66,10 @@ const z = B({
       const e = (l = (o = f.value) == null ? void 0 : o.dropdownContent) == null ? void 0 : l.querySelector(
         ".neon-dropdown-menu__item--highlighted"
       );
-      e && (e.focus(), H.scrollIntoView(e));
-    }, i = (e, o) => {
+      e && (e.focus(), E.scrollIntoView(e));
+    }, s = (e, o) => {
       const l = n.value + e;
-      l >= 0 && l <= t.model.length - 1 && (n.value = l, s.value = t.model[n.value].key, o.preventDefault(), setTimeout(k));
+      l >= 0 && l <= t.model.length - 1 && (n.value = l, c.value = t.model[n.value].key, o.preventDefault(), setTimeout(k));
     }, d = (e) => {
       if (!t.disabled && a.value)
         switch (e.code) {
@@ -76,7 +77,7 @@ const z = B({
           case "ArrowDown":
             {
               const o = g() ? -1 : 1;
-              e.code === "ArrowUp" ? i(-1 * o, e) : i(1 * o, e);
+              e.code === "ArrowUp" ? s(-1 * o, e) : s(1 * o, e);
             }
             break;
           case "Enter":
@@ -109,16 +110,16 @@ const z = B({
       document.addEventListener("keydown", d);
     }), D(() => {
       document.removeEventListener("keydown", d);
-    }), I(
+    }), H(
       () => a.value,
       (e) => {
-        e && (s.value = t.model[0].key, n.value = 0);
+        e && (c.value = t.model[0].key, n.value = 0);
       }
     ), {
       dropdown: f,
       items: v,
       open: a,
-      highlightedKey: s,
+      highlightedKey: c,
       highlightedIndex: n,
       attrs: h,
       emit: u,
@@ -127,12 +128,13 @@ const z = B({
       onBlur: N,
       onFocus: b,
       clickItem: p,
-      navigateBy: i,
-      onPlacement: y
+      navigateBy: s,
+      onPlacement: y,
+      NeonHorizontalPosition: O
     };
   }
 });
 export {
-  z as default
+  V as default
 };
 //# sourceMappingURL=NeonDropdownMenu.es.js.map

package/dist/components/navigation/dropdown-menu/NeonDropdownMenu.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonDropdownMenu.es.js","sources":["../../../../src/components/navigation/dropdown-menu/NeonDropdownMenu.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport type { NeonDropdownMenuItem } from '@/model/presentation/dropdown/NeonDropdownMenuItem';\nimport { NeonSize } from '@/model/common/size/NeonSize';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport { NeonDropdownPlacement } from '@/model/presentation/dropdown/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/utils/common/dom/NeonScrollUtils';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\n\n/**\n * <p>A dropdown menu consisting of a button to open the menu and a list of menu items. Clicking on a menu item will\n * result in navigating to the provided URL or notifying the parent component via the @click event.</p>\n * <p><strong>Note:</strong> As well as the options described below, pass through attributes supported by\n * <a href=\"/presentation/dropdown\">NeonDropdown</a> to change the style of the dropdown button.</p>\n */\nexport default defineComponent({\n  name: 'NeonDropdownMenu',\n  components: {\n    NeonDropdown,\n    NeonIcon,\n    NeonLink,\n  },\n  props: {\n    /**\n     * A list of menu items to render in the dropdown menu.\n     */\n    model: { type: Array as () => Array<NeonDropdownMenuItem>, required: true },\n    /**\n     * The size of the dropdown - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The dropdown color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Whether the dropdown button is disabled or not.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n    /**\n     * Instead of opening on click (default), open on hover.\n     */\n    openOnHover: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * emitted when the user clicks on a menu item.\n     * @type {NeonDropdownMenuItem} the menu item the user clicked on.\n     */\n    'click',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const dropdown = ref<InstanceType<typeof NeonDropdown> | null>(null);\n    const dropdownPlacement = ref<NeonDropdownPlacement | null>(null);\n    const items = ref<Array<HTMLLIElement>>([]);\n    const open = ref(false);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = props.model.findIndex((item) => item.key === key);\n    };\n\n    const onPlacement = (placement: NeonDropdownPlacement) => {\n      dropdownPlacement.value = placement;\n    };\n\n    const isReverse = () => {\n      switch (dropdownPlacement.value) {\n        case NeonDropdownPlacement.TopLeft:\n        case NeonDropdownPlacement.TopRight:\n        case NeonDropdownPlacement.LeftBottom:\n        case NeonDropdownPlacement.RightBottom:\n          return true;\n      }\n\n      return false;\n    };\n\n    const onNavigate = () => {\n      const element: HTMLElement | null = dropdown.value?.dropdownContent?.querySelector(\n        '.neon-dropdown-menu__item--highlighted',\n      ) as HTMLElement;\n\n      if (element) {\n        element.focus();\n        NeonScrollUtils.scrollIntoView(element);\n      }\n    };\n\n    const navigateBy = (offset: number, $event: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= props.model.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = props.model[highlightedIndex.value].key;\n        $event.preventDefault();\n        setTimeout(onNavigate);\n      }\n    };\n\n    const keyboardHandler = ($event: KeyboardEvent) => {\n      if (!props.disabled) {\n        if (open.value) {\n          switch ($event.code) {\n            case 'ArrowUp':\n            case 'ArrowDown':\n              {\n                const reverseOffset = isReverse() ? -1 : 1;\n                if ($event.code === 'ArrowUp') {\n                  navigateBy(-1 * reverseOffset, $event);\n                } else {\n                  navigateBy(1 * reverseOffset, $event);\n                }\n              }\n              break;\n            case 'Enter':\n            case 'Space':\n              if (props.model[highlightedIndex.value] && !props.model[highlightedIndex.value].disabled) {\n                clickItem(props.model[highlightedIndex.value]);\n                $event.preventDefault();\n              }\n              break;\n            case 'Tab':\n              if (!$event.ctrlKey && !$event.metaKey && !$event.altKey) {\n                open.value = false;\n              }\n              break;\n            case 'Escape':\n              open.value = false;\n              break;\n          }\n        }\n      }\n    };\n\n    const clickItem = (item: NeonDropdownMenuItem) => {\n      if (!item.disabled) {\n        if (item.href) {\n          const anchor = items.value[highlightedIndex.value]?.firstElementChild as HTMLAnchorElement;\n          anchor && anchor.click();\n        } else {\n          emit('click', item);\n        }\n        open.value = false;\n      }\n    };\n\n    const onFocus = () => {\n      if (props.openOnHover) {\n        open.value = true;\n      }\n    };\n\n    const onBlur = () => {\n      if (props.openOnHover) {\n        open.value = false;\n      }\n    };\n\n    onMounted(() => {\n      document.addEventListener('keydown', keyboardHandler);\n    });\n\n    onUnmounted(() => {\n      document.removeEventListener('keydown', keyboardHandler);\n    });\n\n    watch(\n      () => open.value,\n      (open: boolean) => {\n        if (open) {\n          highlightedKey.value = props.model[0].key;\n          highlightedIndex.value = 0;\n        }\n      },\n    );\n\n    return {\n      dropdown,\n      items,\n      open,\n      highlightedKey,\n      highlightedIndex,\n      attrs,\n      emit,\n      changeHighlighted,\n      keyboardHandler,\n      onBlur,\n      onFocus,\n      clickItem,\n      navigateBy,\n      onPlacement,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonDropdown","NeonIcon","NeonLink","NeonSize","NeonFunctionalColor","NeonDropdownPlacement","props","emit","attrs","useAttrs","dropdown","ref","dropdownPlacement","items","open","highlightedKey","highlightedIndex","changeHighlighted","key","item","onPlacement","placement","isReverse","onNavigate","element","_b","_a","NeonScrollUtils","navigateBy","offset","$event","newIndex","keyboardHandler","reverseOffset","clickItem","anchor","onFocus","onBlur","onMounted","onUnmounted","watch"],"mappings":"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"}
+{"version":3,"file":"NeonDropdownMenu.es.js","sources":["../../../../src/components/navigation/dropdown-menu/NeonDropdownMenu.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport type { NeonDropdownMenuItem } from '@/model/presentation/dropdown/NeonDropdownMenuItem';\nimport { NeonSize } from '@/model/common/size/NeonSize';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport { NeonDropdownPlacement } from '@/model/presentation/dropdown/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/utils/common/dom/NeonScrollUtils';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport { NeonHorizontalPosition } from '@/model/common/position/NeonHorizontalPosition';\n\n/**\n * <p>A dropdown menu consisting of a button to open the menu and a list of menu items. Clicking on a menu item will\n * result in navigating to the provided URL or notifying the parent component via the @click event.</p>\n * <p><strong>Note:</strong> As well as the options described below, pass through attributes supported by\n * <a href=\"/presentation/dropdown\">NeonDropdown</a> to change the style of the dropdown button.</p>\n */\nexport default defineComponent({\n  name: 'NeonDropdownMenu',\n  components: {\n    NeonDropdown,\n    NeonIcon,\n    NeonLink,\n  },\n  props: {\n    /**\n     * A list of menu items to render in the dropdown menu.\n     */\n    model: { type: Array as () => Array<NeonDropdownMenuItem>, required: true },\n    /**\n     * The size of the dropdown - Small, Medium or Large.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The dropdown color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Whether the dropdown button is disabled or not.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Placement of the dropdown contents.\n     */\n    placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n    /**\n     * Instead of opening on click (default), open on hover.\n     */\n    openOnHover: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * emitted when the user clicks on a menu item.\n     * @type {NeonDropdownMenuItem} the menu item the user clicked on.\n     */\n    'click',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const dropdown = ref<InstanceType<typeof NeonDropdown> | null>(null);\n    const dropdownPlacement = ref<NeonDropdownPlacement | null>(null);\n    const items = ref<Array<HTMLLIElement>>([]);\n    const open = ref(false);\n    const highlightedKey = ref<string | null>(null);\n    const highlightedIndex = ref(-1);\n\n    const changeHighlighted = (key: string) => {\n      highlightedKey.value = key;\n      highlightedIndex.value = props.model.findIndex((item) => item.key === key);\n    };\n\n    const onPlacement = (placement: NeonDropdownPlacement) => {\n      dropdownPlacement.value = placement;\n    };\n\n    const isReverse = () => {\n      switch (dropdownPlacement.value) {\n        case NeonDropdownPlacement.TopLeft:\n        case NeonDropdownPlacement.TopRight:\n        case NeonDropdownPlacement.LeftBottom:\n        case NeonDropdownPlacement.RightBottom:\n          return true;\n      }\n\n      return false;\n    };\n\n    const onNavigate = () => {\n      const element: HTMLElement | null = dropdown.value?.dropdownContent?.querySelector(\n        '.neon-dropdown-menu__item--highlighted',\n      ) as HTMLElement;\n\n      if (element) {\n        element.focus();\n        NeonScrollUtils.scrollIntoView(element);\n      }\n    };\n\n    const navigateBy = (offset: number, $event: KeyboardEvent) => {\n      const newIndex = highlightedIndex.value + offset;\n      if (newIndex >= 0 && newIndex <= props.model.length - 1) {\n        highlightedIndex.value = newIndex;\n        highlightedKey.value = props.model[highlightedIndex.value].key;\n        $event.preventDefault();\n        setTimeout(onNavigate);\n      }\n    };\n\n    const keyboardHandler = ($event: KeyboardEvent) => {\n      if (!props.disabled) {\n        if (open.value) {\n          switch ($event.code) {\n            case 'ArrowUp':\n            case 'ArrowDown':\n              {\n                const reverseOffset = isReverse() ? -1 : 1;\n                if ($event.code === 'ArrowUp') {\n                  navigateBy(-1 * reverseOffset, $event);\n                } else {\n                  navigateBy(1 * reverseOffset, $event);\n                }\n              }\n              break;\n            case 'Enter':\n            case 'Space':\n              if (props.model[highlightedIndex.value] && !props.model[highlightedIndex.value].disabled) {\n                clickItem(props.model[highlightedIndex.value]);\n                $event.preventDefault();\n              }\n              break;\n            case 'Tab':\n              if (!$event.ctrlKey && !$event.metaKey && !$event.altKey) {\n                open.value = false;\n              }\n              break;\n            case 'Escape':\n              open.value = false;\n              break;\n          }\n        }\n      }\n    };\n\n    const clickItem = (item: NeonDropdownMenuItem) => {\n      if (!item.disabled) {\n        if (item.href) {\n          const anchor = items.value[highlightedIndex.value]?.firstElementChild as HTMLAnchorElement;\n          anchor && anchor.click();\n        } else {\n          emit('click', item);\n        }\n        open.value = false;\n      }\n    };\n\n    const onFocus = () => {\n      if (props.openOnHover) {\n        open.value = true;\n      }\n    };\n\n    const onBlur = () => {\n      if (props.openOnHover) {\n        open.value = false;\n      }\n    };\n\n    onMounted(() => {\n      document.addEventListener('keydown', keyboardHandler);\n    });\n\n    onUnmounted(() => {\n      document.removeEventListener('keydown', keyboardHandler);\n    });\n\n    watch(\n      () => open.value,\n      (open: boolean) => {\n        if (open) {\n          highlightedKey.value = props.model[0].key;\n          highlightedIndex.value = 0;\n        }\n      },\n    );\n\n    return {\n      dropdown,\n      items,\n      open,\n      highlightedKey,\n      highlightedIndex,\n      attrs,\n      emit,\n      changeHighlighted,\n      keyboardHandler,\n      onBlur,\n      onFocus,\n      clickItem,\n      navigateBy,\n      onPlacement,\n      NeonHorizontalPosition,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonDropdown","NeonIcon","NeonLink","NeonSize","NeonFunctionalColor","NeonDropdownPlacement","props","emit","attrs","useAttrs","dropdown","ref","dropdownPlacement","items","open","highlightedKey","highlightedIndex","changeHighlighted","key","item","onPlacement","placement","isReverse","onNavigate","element","_b","_a","NeonScrollUtils","navigateBy","offset","$event","newIndex","keyboardHandler","reverseOffset","clickItem","anchor","onFocus","onBlur","onMounted","onUnmounted","watch","NeonHorizontalPosition"],"mappings":";;;;;;;;;AAiBA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO,EAAE,MAAM,OAA4C,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIrE,MAAM,EAAE,MAAM,QAA0B,SAASC,EAAS,OAAA;AAAA;AAAA;AAAA;AAAA,IAI1D,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,YAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,WAAW,EAAE,MAAM,QAAuC,SAASC,EAAsB,WAAA;AAAA;AAAA;AAAA;AAAA,IAIzF,aAAa,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAE/C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAQC,EAAA,GACRC,IAAWC,EAA8C,IAAI,GAC7DC,IAAoBD,EAAkC,IAAI,GAC1DE,IAAQF,EAA0B,EAAE,GACpCG,IAAOH,EAAI,EAAK,GAChBI,IAAiBJ,EAAmB,IAAI,GACxCK,IAAmBL,EAAI,EAAE,GAEzBM,IAAoB,CAACC,MAAgB;AACzC,MAAAH,EAAe,QAAQG,GACvBF,EAAiB,QAAQV,EAAM,MAAM,UAAU,CAACa,MAASA,EAAK,QAAQD,CAAG;AAAA,IAC3E,GAEME,IAAc,CAACC,MAAqC;AACxD,MAAAT,EAAkB,QAAQS;AAAA,IAC5B,GAEMC,IAAY,MAAM;AACtB,cAAQV,EAAkB,OAAA;AAAA,QACxB,KAAKP,EAAsB;AAAA,QAC3B,KAAKA,EAAsB;AAAA,QAC3B,KAAKA,EAAsB;AAAA,QAC3B,KAAKA,EAAsB;AACzB,iBAAO;AAAA,MAAA;AAGX,aAAO;AAAA,IACT,GAEMkB,IAAa,MAAM;;AACvB,YAAMC,KAA8BC,KAAAC,IAAAhB,EAAS,UAAT,gBAAAgB,EAAgB,oBAAhB,gBAAAD,EAAiC;AAAA,QACnE;AAAA;AAGF,MAAID,MACFA,EAAQ,MAAA,GACRG,EAAgB,eAAeH,CAAO;AAAA,IAE1C,GAEMI,IAAa,CAACC,GAAgBC,MAA0B;AAC5D,YAAMC,IAAWf,EAAiB,QAAQa;AAC1C,MAAIE,KAAY,KAAKA,KAAYzB,EAAM,MAAM,SAAS,MACpDU,EAAiB,QAAQe,GACzBhB,EAAe,QAAQT,EAAM,MAAMU,EAAiB,KAAK,EAAE,KAC3Dc,EAAO,eAAA,GACP,WAAWP,CAAU;AAAA,IAEzB,GAEMS,IAAkB,CAACF,MAA0B;AACjD,UAAI,CAACxB,EAAM,YACLQ,EAAK;AACP,gBAAQgB,EAAO,MAAA;AAAA,UACb,KAAK;AAAA,UACL,KAAK;AACH;AACE,oBAAMG,IAAgBX,MAAc,KAAK;AACzC,cAAIQ,EAAO,SAAS,YAClBF,EAAW,KAAKK,GAAeH,CAAM,IAErCF,EAAW,IAAIK,GAAeH,CAAM;AAAA,YAExC;AACA;AAAA,UACF,KAAK;AAAA,UACL,KAAK;AACH,YAAIxB,EAAM,MAAMU,EAAiB,KAAK,KAAK,CAACV,EAAM,MAAMU,EAAiB,KAAK,EAAE,aAC9EkB,EAAU5B,EAAM,MAAMU,EAAiB,KAAK,CAAC,GAC7Cc,EAAO,eAAA;AAET;AAAA,UACF,KAAK;AACH,YAAI,CAACA,EAAO,WAAW,CAACA,EAAO,WAAW,CAACA,EAAO,WAChDhB,EAAK,QAAQ;AAEf;AAAA,UACF,KAAK;AACH,YAAAA,EAAK,QAAQ;AACb;AAAA,QAAA;AAAA,IAIV,GAEMoB,IAAY,CAACf,MAA+B;;AAChD,UAAI,CAACA,EAAK,UAAU;AAClB,YAAIA,EAAK,MAAM;AACb,gBAAMgB,KAAST,IAAAb,EAAM,MAAMG,EAAiB,KAAK,MAAlC,gBAAAU,EAAqC;AACpD,UAAAS,KAAUA,EAAO,MAAA;AAAA,QACnB;AACE,UAAA5B,EAAK,SAASY,CAAI;AAEpB,QAAAL,EAAK,QAAQ;AAAA,MACf;AAAA,IACF,GAEMsB,IAAU,MAAM;AACpB,MAAI9B,EAAM,gBACRQ,EAAK,QAAQ;AAAA,IAEjB,GAEMuB,IAAS,MAAM;AACnB,MAAI/B,EAAM,gBACRQ,EAAK,QAAQ;AAAA,IAEjB;AAEA,WAAAwB,EAAU,MAAM;AACd,eAAS,iBAAiB,WAAWN,CAAe;AAAA,IACtD,CAAC,GAEDO,EAAY,MAAM;AAChB,eAAS,oBAAoB,WAAWP,CAAe;AAAA,IACzD,CAAC,GAEDQ;AAAA,MACE,MAAM1B,EAAK;AAAA,MACX,CAACA,MAAkB;AACjB,QAAIA,MACFC,EAAe,QAAQT,EAAM,MAAM,CAAC,EAAE,KACtCU,EAAiB,QAAQ;AAAA,MAE7B;AAAA,IAAA,GAGK;AAAA,MACL,UAAAN;AAAA,MACA,OAAAG;AAAA,MACA,MAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,OAAAR;AAAA,MACA,MAAAD;AAAA,MACA,mBAAAU;AAAA,MACA,iBAAAe;AAAA,MACA,QAAAK;AAAA,MACA,SAAAD;AAAA,MACA,WAAAF;AAAA,MACA,YAAAN;AAAA,MACA,aAAAR;AAAA,MACA,wBAAAqB;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}

package/dist/components/navigation/dropdown-menu/NeonDropdownMenu.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const a=require("./NeonDropdownMenu.cjs.js"),e=require("vue"),p=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),i={class:"no-style neon-dropdown-menu__items",role:"menu"},c=["onMouseover"],u={key:0,class:"neon-dropdown-menu__item-container"},m={class:"neon-dropdown-menu__item-label"},_={class:"neon-dropdown-menu__item-label"},k=["onClick"],w={class:"neon-dropdown-menu__item-label"};function b(n,l,y,g,v,h){const r=e.resolveComponent("neon-icon"),d=e.resolveComponent("neon-link"),s=e.resolveComponent("neon-dropdown");return e.openBlock(),e.createBlock(s,e.mergeProps({ref:"dropdown",modelValue:n.open,"onUpdate:modelValue":l[0]||(l[0]=o=>n.open=o),class:[`neon-dropdown-menu--${n.color}`,"neon-dropdown-menu"],color:n.color,disabled:n.disabled,openOnHover:n.openOnHover,placement:n.placement,size:n.size},n.attrs,{onBlur:l[1]||(l[1]=o=>n.onBlur()),onFocus:l[2]||(l[2]=o=>n.onFocus()),"onUpdate:modelValue":l[3]||(l[3]=o=>n.open=o),onDropdownPlacement:n.onPlacement}),{default:e.withCtx(()=>[e.createElementVNode("ul",i,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.model,o=>(e.openBlock(),e.createElementBlock("li",{key:o.key,ref_for:!0,ref:"items",class:e.normalizeClass([[{"neon-dropdown-menu__item--disabled":o.disabled,"neon-dropdown-menu__item--separator-before":o.separatorBefore,"neon-dropdown-menu__item--group-title":o.isGroup,"neon-dropdown-menu__item--grouped":o.grouped,"neon-dropdown-menu__item--highlighted":o.key===n.highlightedKey},`neon-dropdown-menu__item--${n.size}`],"neon-dropdown-menu__item"]),tabindex:"0",onMouseover:t=>n.changeHighlighted(o.key)},[o.isGroup?(e.openBlock(),e.createElementBlock("div",u,[o.icon?(e.openBlock(),e.createBlock(r,{key:0,disabled:o.disabled,name:o.icon,class:"neon-dropdown-menu__item-icon"},null,8,["disabled","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",m,e.toDisplayString(o.label),1)])):o.href&&!o.disabled?(e.openBlock(),e.createBlock(d,{key:1,href:o.href,"no-style":!0,"outline-style":"none",role:"menuitem"},{default:e.withCtx(()=>[o.icon?(e.openBlock(),e.createBlock(r,{key:0,disabled:o.disabled,name:o.icon,class:"neon-dropdown-menu__item-icon"},null,8,["disabled","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",_,e.toDisplayString(o.label),1)]),_:2},1032,["href"])):(e.openBlock(),e.createElementBlock("div",{key:2,class:"neon-dropdown-menu__item-container",role:"menuitem",onClick:t=>n.clickItem(o)},[o.icon?(e.openBlock(),e.createBlock(r,{key:0,disabled:o.disabled,name:o.icon,class:"neon-dropdown-menu__item-icon"},null,8,["disabled","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",w,e.toDisplayString(o.label),1)],8,k))],42,c))),128))])]),_:1},16,["modelValue","class","color","disabled","openOnHover","placement","size","onDropdownPlacement"])}const B=p(a,[["render",b]]);module.exports=B;
+"use strict";const a=require("./NeonDropdownMenu.cjs.js"),e=require("vue"),i=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),p={class:"no-style neon-dropdown-menu__items",role:"menu"},c=["onMouseover"],u={key:0,class:"neon-dropdown-menu__item-container"},m={class:"neon-dropdown-menu__item-label"},_={class:"neon-dropdown-menu__item-label"},k=["onClick"],w={class:"neon-dropdown-menu__item-label"};function b(n,l,g,y,h,v){const r=e.resolveComponent("neon-icon"),d=e.resolveComponent("neon-link"),s=e.resolveComponent("neon-dropdown");return e.openBlock(),e.createBlock(s,e.mergeProps({ref:"dropdown",modelValue:n.open,"onUpdate:modelValue":l[0]||(l[0]=o=>n.open=o),class:[`neon-dropdown-menu--${n.color}`,"neon-dropdown-menu"],color:n.color,disabled:n.disabled,openOnHover:n.openOnHover,placement:n.placement,size:n.size},n.attrs,{onBlur:l[1]||(l[1]=o=>n.onBlur()),onFocus:l[2]||(l[2]=o=>n.onFocus()),"onUpdate:modelValue":l[3]||(l[3]=o=>n.open=o),onDropdownPlacement:n.onPlacement}),{default:e.withCtx(()=>[e.createElementVNode("ul",p,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.model,o=>(e.openBlock(),e.createElementBlock("li",{key:o.key,ref_for:!0,ref:"items",class:e.normalizeClass([[{"neon-dropdown-menu__item--disabled":o.disabled,"neon-dropdown-menu__item--separator-before":o.separatorBefore,"neon-dropdown-menu__item--group-title":o.isGroup,"neon-dropdown-menu__item--grouped":o.grouped,"neon-dropdown-menu__item--highlighted":o.key===n.highlightedKey,"neon-dropdown-menu__item--icon-right":o.icon&&o.iconPosition===n.NeonHorizontalPosition.Right},`neon-dropdown-menu__item--${n.size}`],"neon-dropdown-menu__item"]),tabindex:"0",onMouseover:t=>n.changeHighlighted(o.key)},[o.isGroup?(e.openBlock(),e.createElementBlock("div",u,[o.icon?(e.openBlock(),e.createBlock(r,{key:0,disabled:o.disabled,name:o.icon,class:"neon-dropdown-menu__item-icon"},null,8,["disabled","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",m,e.toDisplayString(o.label),1)])):o.href&&!o.disabled?(e.openBlock(),e.createBlock(d,{key:1,href:o.href,"no-style":!0,"outline-style":"none",role:"menuitem"},{default:e.withCtx(()=>[o.icon?(e.openBlock(),e.createBlock(r,{key:0,disabled:o.disabled,name:o.icon,class:"neon-dropdown-menu__item-icon"},null,8,["disabled","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",_,e.toDisplayString(o.label),1)]),_:2},1032,["href"])):(e.openBlock(),e.createElementBlock("div",{key:2,class:"neon-dropdown-menu__item-container",role:"menuitem",onClick:t=>n.clickItem(o)},[o.icon?(e.openBlock(),e.createBlock(r,{key:0,disabled:o.disabled,name:o.icon,class:"neon-dropdown-menu__item-icon"},null,8,["disabled","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",w,e.toDisplayString(o.label),1)],8,k))],42,c))),128))])]),_:1},16,["modelValue","class","color","disabled","openOnHover","placement","size","onDropdownPlacement"])}const B=i(a,[["render",b]]);module.exports=B;
 //# sourceMappingURL=NeonDropdownMenu.vue.cjs.js.map

package/dist/components/navigation/dropdown-menu/NeonDropdownMenu.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonDropdownMenu.vue.cjs.js","sources":["../../../../src/components/navigation/dropdown-menu/NeonDropdownMenu.vue"],"sourcesContent":["<template>\n  <neon-dropdown\n    ref=\"dropdown\"\n    v-model=\"open\"\n    :class=\"`neon-dropdown-menu--${color}`\"\n    :color=\"color\"\n    :disabled=\"disabled\"\n    :openOnHover=\"openOnHover\"\n    :placement=\"placement\"\n    :size=\"size\"\n    class=\"neon-dropdown-menu\"\n    v-bind=\"attrs\"\n    @blur=\"onBlur()\"\n    @focus=\"onFocus()\"\n    @update:modelValue=\"open = $event\"\n    @dropdown-placement=\"onPlacement\"\n  >\n    <ul class=\"no-style neon-dropdown-menu__items\" role=\"menu\">\n      <li\n        v-for=\"item in model\"\n        :key=\"item.key\"\n        ref=\"items\"\n        :class=\"[\n          {\n            'neon-dropdown-menu__item--disabled': item.disabled,\n            'neon-dropdown-menu__item--separator-before': item.separatorBefore,\n            'neon-dropdown-menu__item--group-title': item.isGroup,\n            'neon-dropdown-menu__item--grouped': item.grouped,\n            'neon-dropdown-menu__item--highlighted': item.key === highlightedKey,\n          },\n          `neon-dropdown-menu__item--${size}`,\n        ]\"\n        class=\"neon-dropdown-menu__item\"\n        tabindex=\"0\"\n        @mouseover=\"changeHighlighted(item.key)\"\n      >\n        <div v-if=\"item.isGroup\" class=\"neon-dropdown-menu__item-container\">\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </div>\n        <neon-link\n          v-else-if=\"item.href && !item.disabled\"\n          :href=\"item.href\"\n          :no-style=\"true\"\n          outline-style=\"none\"\n          role=\"menuitem\"\n        >\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </neon-link>\n        <div v-else class=\"neon-dropdown-menu__item-container\" role=\"menuitem\" @click=\"clickItem(item)\">\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </div>\n      </li>\n    </ul>\n  </neon-dropdown>\n</template>\n\n<script lang=\"ts\" src=\"./NeonDropdownMenu.ts\"></script>\n"],"names":["_hoisted_4","_hoisted_5","_hoisted_7","_openBlock","_createBlock","_component_neon_dropdown","_mergeProps","_ctx","$event","_cache","_createElementVNode","_hoisted_1","_createElementBlock","_Fragment","_renderList","item","_normalizeClass","_hoisted_3","_component_neon_icon","_toDisplayString","_component_neon_link"],"mappings":"8IAiBQ,MAAM,qCAAqC,KAAK,mCAmBvB,MAAM,sCAOvBA,EAAA,CAAA,MAAM,gCAAgC,EAetCC,EAAA,CAAA,MAAM,gCAAgC,gBAStCC,EAAA,CAAA,MAAM,gCAAgC,0IAlEpD,OAAAC,YAAA,EAAAC,cAsEgBC,EAtEhBC,EAAAA,WAsEgB,CArEd,IAAI,sBACKC,EAAA,0CAAAA,EAAA,KAAIC,GACZ,MAAK,CAAA,uBAAyBD,EAAA,KAAK,GAM9B,oBAAoB,EALzB,MAAOA,EAAA,MACP,SAAUA,EAAA,SACV,YAAaA,EAAA,YACb,UAAWA,EAAA,UACX,KAAMA,EAAA,MAECA,EAAA,MAAK,CACZ,sBAAMA,EAAA,OAAM,GACZ,uBAAOA,EAAA,QAAO,GACd,sBAAiBE,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAD,GAAED,EAAA,KAAOC,GAC1B,oBAAoBD,EAAA,iCAErB,IAqDK,CArDLG,EAAAA,mBAqDK,KArDLC,EAqDK,kBApDHC,EAAAA,mBAmDKC,EAAAA,SAAA,KAAAC,EAAAA,WAlDYP,EAAA,MAARQ,kBADTH,EAAAA,mBAmDK,KAAA,CAjDF,IAAKG,EAAK,eACX,IAAI,QACH,MAAKC,EAAAA,eAAA,CAAA,EAAkE,qCAAAD,EAAK,SAAoE,6CAAAA,EAAK,gBAAsE,wCAAAA,EAAK,QAA0D,oCAAAA,EAAK,gDAA8DA,EAAK,MAAQR,EAAA,6CAAoEA,EAAA,IAAI,IAU7a,0BAA0B,CAAA,EAChC,SAAS,IACR,YAASC,GAAED,EAAA,kBAAkBQ,EAAK,GAAG,IAE3BA,EAAK,SAAhBZ,EAAAA,YAAAS,EAAAA,mBAQM,MARNK,EAQM,CANIF,EAAK,oBADbX,EAAAA,YAKEc,EAAA,OAHC,SAAUH,EAAK,SACf,KAAMA,EAAK,KACZ,MAAM,0FAERL,EAAAA,mBAAoE,OAApEV,EAAoEmB,EAAAA,gBAApBJ,EAAK,KAAK,EAAA,CAAA,KAG/CA,EAAK,MAAI,CAAKA,EAAK,wBADhCX,EAAAA,YAcYgB,EAAA,OAZT,KAAML,EAAK,KACX,WAAU,GACX,gBAAc,OACd,KAAK,+BAEL,IAKE,CAJMA,EAAK,oBADbX,EAAAA,YAKEc,EAAA,OAHC,SAAUH,EAAK,SACf,KAAMA,EAAK,KACZ,MAAM,0FAERL,EAAAA,mBAAoE,OAApET,EAAoEkB,EAAAA,gBAApBJ,EAAK,KAAK,EAAA,CAAA,wCAE5DH,EAAAA,mBAQM,MAAA,OARM,MAAM,qCAAqC,KAAK,WAAY,QAAKJ,GAAED,EAAA,UAAUQ,CAAI,IAEnFA,EAAK,oBADbX,EAAAA,YAKEc,EAAA,OAHC,SAAUH,EAAK,SACf,KAAMA,EAAK,KACZ,MAAM,0FAERL,EAAAA,mBAAoE,OAApER,EAAoEiB,EAAAA,gBAApBJ,EAAK,KAAK,EAAA,CAAA"}
+{"version":3,"file":"NeonDropdownMenu.vue.cjs.js","sources":["../../../../src/components/navigation/dropdown-menu/NeonDropdownMenu.vue"],"sourcesContent":["<template>\n  <neon-dropdown\n    ref=\"dropdown\"\n    v-model=\"open\"\n    :class=\"`neon-dropdown-menu--${color}`\"\n    :color=\"color\"\n    :disabled=\"disabled\"\n    :openOnHover=\"openOnHover\"\n    :placement=\"placement\"\n    :size=\"size\"\n    class=\"neon-dropdown-menu\"\n    v-bind=\"attrs\"\n    @blur=\"onBlur()\"\n    @focus=\"onFocus()\"\n    @update:modelValue=\"open = $event\"\n    @dropdown-placement=\"onPlacement\"\n  >\n    <ul class=\"no-style neon-dropdown-menu__items\" role=\"menu\">\n      <li\n        v-for=\"item in model\"\n        :key=\"item.key\"\n        ref=\"items\"\n        :class=\"[\n          {\n            'neon-dropdown-menu__item--disabled': item.disabled,\n            'neon-dropdown-menu__item--separator-before': item.separatorBefore,\n            'neon-dropdown-menu__item--group-title': item.isGroup,\n            'neon-dropdown-menu__item--grouped': item.grouped,\n            'neon-dropdown-menu__item--highlighted': item.key === highlightedKey,\n            'neon-dropdown-menu__item--icon-right': item.icon && item.iconPosition === NeonHorizontalPosition.Right,\n          },\n          `neon-dropdown-menu__item--${size}`,\n        ]\"\n        class=\"neon-dropdown-menu__item\"\n        tabindex=\"0\"\n        @mouseover=\"changeHighlighted(item.key)\"\n      >\n        <div v-if=\"item.isGroup\" class=\"neon-dropdown-menu__item-container\">\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </div>\n        <neon-link\n          v-else-if=\"item.href && !item.disabled\"\n          :href=\"item.href\"\n          :no-style=\"true\"\n          outline-style=\"none\"\n          role=\"menuitem\"\n        >\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </neon-link>\n        <div v-else class=\"neon-dropdown-menu__item-container\" role=\"menuitem\" @click=\"clickItem(item)\">\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </div>\n      </li>\n    </ul>\n  </neon-dropdown>\n</template>\n\n<script lang=\"ts\" src=\"./NeonDropdownMenu.ts\"></script>\n"],"names":["_hoisted_4","_hoisted_5","_hoisted_7","_openBlock","_createBlock","_component_neon_dropdown","_mergeProps","_ctx","$event","_cache","_createElementVNode","_hoisted_1","_createElementBlock","_Fragment","_renderList","item","_normalizeClass","_hoisted_3","_component_neon_icon","_toDisplayString","_component_neon_link"],"mappings":"8IAiBQ,MAAM,qCAAqC,KAAK,mCAoBvB,MAAM,sCAOvBA,EAAA,CAAA,MAAM,gCAAgC,EAetCC,EAAA,CAAA,MAAM,gCAAgC,gBAStCC,EAAA,CAAA,MAAM,gCAAgC,0IAnEpD,OAAAC,YAAA,EAAAC,cAuEgBC,EAvEhBC,EAAAA,WAuEgB,CAtEd,IAAI,sBACKC,EAAA,0CAAAA,EAAA,KAAIC,GACZ,MAAK,CAAA,uBAAyBD,EAAA,KAAK,GAM9B,oBAAoB,EALzB,MAAOA,EAAA,MACP,SAAUA,EAAA,SACV,YAAaA,EAAA,YACb,UAAWA,EAAA,UACX,KAAMA,EAAA,MAECA,EAAA,MAAK,CACZ,sBAAMA,EAAA,OAAM,GACZ,uBAAOA,EAAA,QAAO,GACd,sBAAiBE,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAD,GAAED,EAAA,KAAOC,GAC1B,oBAAoBD,EAAA,iCAErB,IAsDK,CAtDLG,EAAAA,mBAsDK,KAtDLC,EAsDK,kBArDHC,EAAAA,mBAoDKC,EAAAA,SAAA,KAAAC,EAAAA,WAnDYP,EAAA,MAARQ,kBADTH,EAAAA,mBAoDK,KAAA,CAlDF,IAAKG,EAAK,eACX,IAAI,QACH,MAAKC,EAAAA,eAAA,CAAA,EAAkE,qCAAAD,EAAK,SAAoE,6CAAAA,EAAK,gBAAsE,wCAAAA,EAAK,QAA0D,oCAAAA,EAAK,gDAA8DA,EAAK,MAAQR,EAAA,sDAAoEQ,EAAK,MAAQA,EAAK,eAAiBR,EAAA,uBAAuB,oCAA2DA,EAAA,IAAI,IAWliB,0BAA0B,CAAA,EAChC,SAAS,IACR,YAASC,GAAED,EAAA,kBAAkBQ,EAAK,GAAG,IAE3BA,EAAK,SAAhBZ,EAAAA,YAAAS,EAAAA,mBAQM,MARNK,EAQM,CANIF,EAAK,oBADbX,EAAAA,YAKEc,EAAA,OAHC,SAAUH,EAAK,SACf,KAAMA,EAAK,KACZ,MAAM,0FAERL,EAAAA,mBAAoE,OAApEV,EAAoEmB,EAAAA,gBAApBJ,EAAK,KAAK,EAAA,CAAA,KAG/CA,EAAK,MAAI,CAAKA,EAAK,wBADhCX,EAAAA,YAcYgB,EAAA,OAZT,KAAML,EAAK,KACX,WAAU,GACX,gBAAc,OACd,KAAK,+BAEL,IAKE,CAJMA,EAAK,oBADbX,EAAAA,YAKEc,EAAA,OAHC,SAAUH,EAAK,SACf,KAAMA,EAAK,KACZ,MAAM,0FAERL,EAAAA,mBAAoE,OAApET,EAAoEkB,EAAAA,gBAApBJ,EAAK,KAAK,EAAA,CAAA,wCAE5DH,EAAAA,mBAQM,MAAA,OARM,MAAM,qCAAqC,KAAK,WAAY,QAAKJ,GAAED,EAAA,UAAUQ,CAAI,IAEnFA,EAAK,oBADbX,EAAAA,YAKEc,EAAA,OAHC,SAAUH,EAAK,SACf,KAAMA,EAAK,KACZ,MAAM,0FAERL,EAAAA,mBAAoE,OAApER,EAAoEiB,EAAAA,gBAApBJ,EAAK,KAAK,EAAA,CAAA"}

package/dist/components/navigation/dropdown-menu/NeonDropdownMenu.vue.es.js

@@ -1,96 +1,97 @@
 import w from "./NeonDropdownMenu.es.js";
-import { resolveComponent as i, openBlock as o, createBlock as l, mergeProps as b, withCtx as u, createElementVNode as r, createElementBlock as s, Fragment as f, renderList as k, normalizeClass as y, createCommentVNode as t, toDisplayString as p } from "vue";
-import h from "../../../_virtual/_plugin-vue_export-helper.es.js";
-const g = {
+import { resolveComponent as a, openBlock as o, createBlock as l, mergeProps as b, withCtx as u, createElementVNode as r, createElementBlock as s, Fragment as f, renderList as k, normalizeClass as h, createCommentVNode as t, toDisplayString as p } from "vue";
+import g from "../../../_virtual/_plugin-vue_export-helper.es.js";
+const y = {
   class: "no-style neon-dropdown-menu__items",
   role: "menu"
 }, v = ["onMouseover"], $ = {
   key: 0,
   class: "neon-dropdown-menu__item-container"
-}, B = { class: "neon-dropdown-menu__item-label" }, C = { class: "neon-dropdown-menu__item-label" }, V = ["onClick"], z = { class: "neon-dropdown-menu__item-label" };
-function D(n, d, H, P, F, M) {
-  const a = i("neon-icon"), m = i("neon-link"), _ = i("neon-dropdown");
+}, z = { class: "neon-dropdown-menu__item-label" }, B = { class: "neon-dropdown-menu__item-label" }, C = ["onClick"], P = { class: "neon-dropdown-menu__item-label" };
+function V(e, d, H, D, N, F) {
+  const i = a("neon-icon"), m = a("neon-link"), _ = a("neon-dropdown");
   return o(), l(_, b({
     ref: "dropdown",
-    modelValue: n.open,
-    "onUpdate:modelValue": d[0] || (d[0] = (e) => n.open = e),
-    class: [`neon-dropdown-menu--${n.color}`, "neon-dropdown-menu"],
-    color: n.color,
-    disabled: n.disabled,
-    openOnHover: n.openOnHover,
-    placement: n.placement,
-    size: n.size
-  }, n.attrs, {
-    onBlur: d[1] || (d[1] = (e) => n.onBlur()),
-    onFocus: d[2] || (d[2] = (e) => n.onFocus()),
-    "onUpdate:modelValue": d[3] || (d[3] = (e) => n.open = e),
-    onDropdownPlacement: n.onPlacement
+    modelValue: e.open,
+    "onUpdate:modelValue": d[0] || (d[0] = (n) => e.open = n),
+    class: [`neon-dropdown-menu--${e.color}`, "neon-dropdown-menu"],
+    color: e.color,
+    disabled: e.disabled,
+    openOnHover: e.openOnHover,
+    placement: e.placement,
+    size: e.size
+  }, e.attrs, {
+    onBlur: d[1] || (d[1] = (n) => e.onBlur()),
+    onFocus: d[2] || (d[2] = (n) => e.onFocus()),
+    "onUpdate:modelValue": d[3] || (d[3] = (n) => e.open = n),
+    onDropdownPlacement: e.onPlacement
   }), {
     default: u(() => [
-      r("ul", g, [
-        (o(!0), s(f, null, k(n.model, (e) => (o(), s("li", {
-          key: e.key,
+      r("ul", y, [
+        (o(!0), s(f, null, k(e.model, (n) => (o(), s("li", {
+          key: n.key,
           ref_for: !0,
           ref: "items",
-          class: y([[
+          class: h([[
             {
-              "neon-dropdown-menu__item--disabled": e.disabled,
-              "neon-dropdown-menu__item--separator-before": e.separatorBefore,
-              "neon-dropdown-menu__item--group-title": e.isGroup,
-              "neon-dropdown-menu__item--grouped": e.grouped,
-              "neon-dropdown-menu__item--highlighted": e.key === n.highlightedKey
+              "neon-dropdown-menu__item--disabled": n.disabled,
+              "neon-dropdown-menu__item--separator-before": n.separatorBefore,
+              "neon-dropdown-menu__item--group-title": n.isGroup,
+              "neon-dropdown-menu__item--grouped": n.grouped,
+              "neon-dropdown-menu__item--highlighted": n.key === e.highlightedKey,
+              "neon-dropdown-menu__item--icon-right": n.icon && n.iconPosition === e.NeonHorizontalPosition.Right
             },
-            `neon-dropdown-menu__item--${n.size}`
+            `neon-dropdown-menu__item--${e.size}`
           ], "neon-dropdown-menu__item"]),
           tabindex: "0",
-          onMouseover: (c) => n.changeHighlighted(e.key)
+          onMouseover: (c) => e.changeHighlighted(n.key)
         }, [
-          e.isGroup ? (o(), s("div", $, [
-            e.icon ? (o(), l(a, {
+          n.isGroup ? (o(), s("div", $, [
+            n.icon ? (o(), l(i, {
               key: 0,
-              disabled: e.disabled,
-              name: e.icon,
+              disabled: n.disabled,
+              name: n.icon,
               class: "neon-dropdown-menu__item-icon"
             }, null, 8, ["disabled", "name"])) : t("", !0),
-            r("span", B, p(e.label), 1)
-          ])) : e.href && !e.disabled ? (o(), l(m, {
+            r("span", z, p(n.label), 1)
+          ])) : n.href && !n.disabled ? (o(), l(m, {
             key: 1,
-            href: e.href,
+            href: n.href,
             "no-style": !0,
             "outline-style": "none",
             role: "menuitem"
           }, {
             default: u(() => [
-              e.icon ? (o(), l(a, {
+              n.icon ? (o(), l(i, {
                 key: 0,
-                disabled: e.disabled,
-                name: e.icon,
+                disabled: n.disabled,
+                name: n.icon,
                 class: "neon-dropdown-menu__item-icon"
               }, null, 8, ["disabled", "name"])) : t("", !0),
-              r("span", C, p(e.label), 1)
+              r("span", B, p(n.label), 1)
             ]),
             _: 2
           }, 1032, ["href"])) : (o(), s("div", {
             key: 2,
             class: "neon-dropdown-menu__item-container",
             role: "menuitem",
-            onClick: (c) => n.clickItem(e)
+            onClick: (c) => e.clickItem(n)
           }, [
-            e.icon ? (o(), l(a, {
+            n.icon ? (o(), l(i, {
               key: 0,
-              disabled: e.disabled,
-              name: e.icon,
+              disabled: n.disabled,
+              name: n.icon,
               class: "neon-dropdown-menu__item-icon"
             }, null, 8, ["disabled", "name"])) : t("", !0),
-            r("span", z, p(e.label), 1)
-          ], 8, V))
+            r("span", P, p(n.label), 1)
+          ], 8, C))
         ], 42, v))), 128))
       ])
     ]),
     _: 1
   }, 16, ["modelValue", "class", "color", "disabled", "openOnHover", "placement", "size", "onDropdownPlacement"]);
 }
-const G = /* @__PURE__ */ h(w, [["render", D]]);
+const G = /* @__PURE__ */ g(w, [["render", V]]);
 export {
   G as default
 };

package/dist/components/navigation/dropdown-menu/NeonDropdownMenu.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonDropdownMenu.vue.es.js","sources":["../../../../src/components/navigation/dropdown-menu/NeonDropdownMenu.vue"],"sourcesContent":["<template>\n  <neon-dropdown\n    ref=\"dropdown\"\n    v-model=\"open\"\n    :class=\"`neon-dropdown-menu--${color}`\"\n    :color=\"color\"\n    :disabled=\"disabled\"\n    :openOnHover=\"openOnHover\"\n    :placement=\"placement\"\n    :size=\"size\"\n    class=\"neon-dropdown-menu\"\n    v-bind=\"attrs\"\n    @blur=\"onBlur()\"\n    @focus=\"onFocus()\"\n    @update:modelValue=\"open = $event\"\n    @dropdown-placement=\"onPlacement\"\n  >\n    <ul class=\"no-style neon-dropdown-menu__items\" role=\"menu\">\n      <li\n        v-for=\"item in model\"\n        :key=\"item.key\"\n        ref=\"items\"\n        :class=\"[\n          {\n            'neon-dropdown-menu__item--disabled': item.disabled,\n            'neon-dropdown-menu__item--separator-before': item.separatorBefore,\n            'neon-dropdown-menu__item--group-title': item.isGroup,\n            'neon-dropdown-menu__item--grouped': item.grouped,\n            'neon-dropdown-menu__item--highlighted': item.key === highlightedKey,\n          },\n          `neon-dropdown-menu__item--${size}`,\n        ]\"\n        class=\"neon-dropdown-menu__item\"\n        tabindex=\"0\"\n        @mouseover=\"changeHighlighted(item.key)\"\n      >\n        <div v-if=\"item.isGroup\" class=\"neon-dropdown-menu__item-container\">\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </div>\n        <neon-link\n          v-else-if=\"item.href && !item.disabled\"\n          :href=\"item.href\"\n          :no-style=\"true\"\n          outline-style=\"none\"\n          role=\"menuitem\"\n        >\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </neon-link>\n        <div v-else class=\"neon-dropdown-menu__item-container\" role=\"menuitem\" @click=\"clickItem(item)\">\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </div>\n      </li>\n    </ul>\n  </neon-dropdown>\n</template>\n\n<script lang=\"ts\" src=\"./NeonDropdownMenu.ts\"></script>\n"],"names":["_hoisted_4","_hoisted_5","_hoisted_7","_openBlock","_createBlock","_component_neon_dropdown","_mergeProps","_ctx","$event","_cache","_createElementVNode","_hoisted_1","_createElementBlock","_Fragment","_renderList","item","_normalizeClass","_hoisted_3","_component_neon_icon","_toDisplayString","_component_neon_link"],"mappings":";;;;EAiBQ,OAAM;AAAA,EAAqC,MAAK;;;EAmBvB,OAAM;GAOvBA,IAAA,EAAA,OAAM,iCAAgC,GAetCC,IAAA,EAAA,OAAM,iCAAgC,oBAStCC,IAAA,EAAA,OAAM,iCAAgC;;;AAlEpD,SAAAC,EAAA,GAAAC,EAsEgBC,GAtEhBC,EAsEgB;AAAA,IArEd,KAAI;AAAA,gBACKC,EAAA;AAAA,kDAAAA,EAAA,OAAIC;AAAA,IACZ,OAAK,CAAA,uBAAyBD,EAAA,KAAK,IAM9B,oBAAoB;AAAA,IALzB,OAAOA,EAAA;AAAA,IACP,UAAUA,EAAA;AAAA,IACV,aAAaA,EAAA;AAAA,IACb,WAAWA,EAAA;AAAA,IACX,MAAMA,EAAA;AAAA,KAECA,EAAA,OAAK;AAAA,IACZ,+BAAMA,EAAA,OAAM;AAAA,IACZ,gCAAOA,EAAA,QAAO;AAAA,IACd,uBAAiBE,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAD,MAAED,EAAA,OAAOC;AAAA,IAC1B,qBAAoBD,EAAA;AAAA;eAErB,MAqDK;AAAA,MArDLG,EAqDK,MArDLC,GAqDK;AAAA,gBApDHC,EAmDKC,GAAA,MAAAC,EAlDYP,EAAA,OAAK,CAAbQ,YADTH,EAmDK,MAAA;AAAA,UAjDF,KAAKG,EAAK;AAAA;UACX,KAAI;AAAA,UACH,OAAKC,EAAA,CAAA;AAAA;cAAkE,sCAAAD,EAAK;AAAA,cAAoE,8CAAAA,EAAK;AAAA,cAAsE,yCAAAA,EAAK;AAAA,cAA0D,qCAAAA,EAAK;AAAA,uDAA8DA,EAAK,QAAQR,EAAA;AAAA;yCAAoEA,EAAA,IAAI;AAAA,aAU7a,0BAA0B,CAAA;AAAA,UAChC,UAAS;AAAA,UACR,aAAS,CAAAC,MAAED,EAAA,kBAAkBQ,EAAK,GAAG;AAAA;UAE3BA,EAAK,WAAhBZ,KAAAS,EAQM,OARNK,GAQM;AAAA,YANIF,EAAK,aADbX,EAKEc,GAAA;AAAA;cAHC,UAAUH,EAAK;AAAA,cACf,MAAMA,EAAK;AAAA,cACZ,OAAM;AAAA;YAERL,EAAoE,QAApEV,GAAoEmB,EAApBJ,EAAK,KAAK,GAAA,CAAA;AAAA,gBAG/CA,EAAK,QAAI,CAAKA,EAAK,iBADhCX,EAcYgB,GAAA;AAAA;YAZT,MAAML,EAAK;AAAA,YACX,YAAU;AAAA,YACX,iBAAc;AAAA,YACd,MAAK;AAAA;uBAEL,MAKE;AAAA,cAJMA,EAAK,aADbX,EAKEc,GAAA;AAAA;gBAHC,UAAUH,EAAK;AAAA,gBACf,MAAMA,EAAK;AAAA,gBACZ,OAAM;AAAA;cAERL,EAAoE,QAApET,GAAoEkB,EAApBJ,EAAK,KAAK,GAAA,CAAA;AAAA;;sCAE5DH,EAQM,OAAA;AAAA;YARM,OAAM;AAAA,YAAqC,MAAK;AAAA,YAAY,SAAK,CAAAJ,MAAED,EAAA,UAAUQ,CAAI;AAAA;YAEnFA,EAAK,aADbX,EAKEc,GAAA;AAAA;cAHC,UAAUH,EAAK;AAAA,cACf,MAAMA,EAAK;AAAA,cACZ,OAAM;AAAA;YAERL,EAAoE,QAApER,GAAoEiB,EAApBJ,EAAK,KAAK,GAAA,CAAA;AAAA;;;;;;;;"}
+{"version":3,"file":"NeonDropdownMenu.vue.es.js","sources":["../../../../src/components/navigation/dropdown-menu/NeonDropdownMenu.vue"],"sourcesContent":["<template>\n  <neon-dropdown\n    ref=\"dropdown\"\n    v-model=\"open\"\n    :class=\"`neon-dropdown-menu--${color}`\"\n    :color=\"color\"\n    :disabled=\"disabled\"\n    :openOnHover=\"openOnHover\"\n    :placement=\"placement\"\n    :size=\"size\"\n    class=\"neon-dropdown-menu\"\n    v-bind=\"attrs\"\n    @blur=\"onBlur()\"\n    @focus=\"onFocus()\"\n    @update:modelValue=\"open = $event\"\n    @dropdown-placement=\"onPlacement\"\n  >\n    <ul class=\"no-style neon-dropdown-menu__items\" role=\"menu\">\n      <li\n        v-for=\"item in model\"\n        :key=\"item.key\"\n        ref=\"items\"\n        :class=\"[\n          {\n            'neon-dropdown-menu__item--disabled': item.disabled,\n            'neon-dropdown-menu__item--separator-before': item.separatorBefore,\n            'neon-dropdown-menu__item--group-title': item.isGroup,\n            'neon-dropdown-menu__item--grouped': item.grouped,\n            'neon-dropdown-menu__item--highlighted': item.key === highlightedKey,\n            'neon-dropdown-menu__item--icon-right': item.icon && item.iconPosition === NeonHorizontalPosition.Right,\n          },\n          `neon-dropdown-menu__item--${size}`,\n        ]\"\n        class=\"neon-dropdown-menu__item\"\n        tabindex=\"0\"\n        @mouseover=\"changeHighlighted(item.key)\"\n      >\n        <div v-if=\"item.isGroup\" class=\"neon-dropdown-menu__item-container\">\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </div>\n        <neon-link\n          v-else-if=\"item.href && !item.disabled\"\n          :href=\"item.href\"\n          :no-style=\"true\"\n          outline-style=\"none\"\n          role=\"menuitem\"\n        >\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </neon-link>\n        <div v-else class=\"neon-dropdown-menu__item-container\" role=\"menuitem\" @click=\"clickItem(item)\">\n          <neon-icon\n            v-if=\"item.icon\"\n            :disabled=\"item.disabled\"\n            :name=\"item.icon\"\n            class=\"neon-dropdown-menu__item-icon\"\n          />\n          <span class=\"neon-dropdown-menu__item-label\">{{ item.label }}</span>\n        </div>\n      </li>\n    </ul>\n  </neon-dropdown>\n</template>\n\n<script lang=\"ts\" src=\"./NeonDropdownMenu.ts\"></script>\n"],"names":["_hoisted_4","_hoisted_5","_hoisted_7","_openBlock","_createBlock","_component_neon_dropdown","_mergeProps","_ctx","$event","_cache","_createElementVNode","_hoisted_1","_createElementBlock","_Fragment","_renderList","item","_normalizeClass","_hoisted_3","_component_neon_icon","_toDisplayString","_component_neon_link"],"mappings":";;;;EAiBQ,OAAM;AAAA,EAAqC,MAAK;;;EAoBvB,OAAM;GAOvBA,IAAA,EAAA,OAAM,iCAAgC,GAetCC,IAAA,EAAA,OAAM,iCAAgC,oBAStCC,IAAA,EAAA,OAAM,iCAAgC;;;AAnEpD,SAAAC,EAAA,GAAAC,EAuEgBC,GAvEhBC,EAuEgB;AAAA,IAtEd,KAAI;AAAA,gBACKC,EAAA;AAAA,kDAAAA,EAAA,OAAIC;AAAA,IACZ,OAAK,CAAA,uBAAyBD,EAAA,KAAK,IAM9B,oBAAoB;AAAA,IALzB,OAAOA,EAAA;AAAA,IACP,UAAUA,EAAA;AAAA,IACV,aAAaA,EAAA;AAAA,IACb,WAAWA,EAAA;AAAA,IACX,MAAMA,EAAA;AAAA,KAECA,EAAA,OAAK;AAAA,IACZ,+BAAMA,EAAA,OAAM;AAAA,IACZ,gCAAOA,EAAA,QAAO;AAAA,IACd,uBAAiBE,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAD,MAAED,EAAA,OAAOC;AAAA,IAC1B,qBAAoBD,EAAA;AAAA;eAErB,MAsDK;AAAA,MAtDLG,EAsDK,MAtDLC,GAsDK;AAAA,gBArDHC,EAoDKC,GAAA,MAAAC,EAnDYP,EAAA,OAAK,CAAbQ,YADTH,EAoDK,MAAA;AAAA,UAlDF,KAAKG,EAAK;AAAA;UACX,KAAI;AAAA,UACH,OAAKC,EAAA,CAAA;AAAA;cAAkE,sCAAAD,EAAK;AAAA,cAAoE,8CAAAA,EAAK;AAAA,cAAsE,yCAAAA,EAAK;AAAA,cAA0D,qCAAAA,EAAK;AAAA,uDAA8DA,EAAK,QAAQR,EAAA;AAAA,sDAAoEQ,EAAK,QAAQA,EAAK,iBAAiBR,EAAA,uBAAuB;AAAA;yCAA2DA,EAAA,IAAI;AAAA,aAWliB,0BAA0B,CAAA;AAAA,UAChC,UAAS;AAAA,UACR,aAAS,CAAAC,MAAED,EAAA,kBAAkBQ,EAAK,GAAG;AAAA;UAE3BA,EAAK,WAAhBZ,KAAAS,EAQM,OARNK,GAQM;AAAA,YANIF,EAAK,aADbX,EAKEc,GAAA;AAAA;cAHC,UAAUH,EAAK;AAAA,cACf,MAAMA,EAAK;AAAA,cACZ,OAAM;AAAA;YAERL,EAAoE,QAApEV,GAAoEmB,EAApBJ,EAAK,KAAK,GAAA,CAAA;AAAA,gBAG/CA,EAAK,QAAI,CAAKA,EAAK,iBADhCX,EAcYgB,GAAA;AAAA;YAZT,MAAML,EAAK;AAAA,YACX,YAAU;AAAA,YACX,iBAAc;AAAA,YACd,MAAK;AAAA;uBAEL,MAKE;AAAA,cAJMA,EAAK,aADbX,EAKEc,GAAA;AAAA;gBAHC,UAAUH,EAAK;AAAA,gBACf,MAAMA,EAAK;AAAA,gBACZ,OAAM;AAAA;cAERL,EAAoE,QAApET,GAAoEkB,EAApBJ,EAAK,KAAK,GAAA,CAAA;AAAA;;sCAE5DH,EAQM,OAAA;AAAA;YARM,OAAM;AAAA,YAAqC,MAAK;AAAA,YAAY,SAAK,CAAAJ,MAAED,EAAA,UAAUQ,CAAI;AAAA;YAEnFA,EAAK,aADbX,EAKEc,GAAA;AAAA;cAHC,UAAUH,EAAK;AAAA,cACf,MAAMA,EAAK;AAAA,cACZ,OAAM;AAAA;YAERL,EAAoE,QAApER,GAAoEiB,EAApBJ,EAAK,KAAK,GAAA,CAAA;AAAA;;;;;;;;"}