npm - @aotearoan/neon - Versions diffs - 21.0.2 → 21.0.3 - Mend

@aotearoan/neon 21.0.2 → 21.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

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

@@ -1,2 +1,2 @@
-"use strict";const n=require("vue"),q=require("../../../common/enums/NeonSize.cjs.js"),D=require("../../../common/enums/NeonFunctionalColor.cjs.js"),S=require("../../presentation/dropdown/NeonDropdown.vue.cjs.js"),s=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),P=require("../../../common/utils/NeonScrollUtils.cjs.js"),B=require("../../presentation/icon/NeonIcon.vue.cjs.js"),C=require("../link/NeonLink.vue.cjs.js"),I=n.defineComponent({name:"NeonDropdownMenu",components:{NeonDropdown:S,NeonIcon:B,NeonLink:C},props:{model:{type:Array,required:!0},size:{type:String,default:q.NeonSize.Medium},color:{type:String,default:D.NeonFunctionalColor.LowContrast},disabled:{type:Boolean,default:!1},openOnHover:{type:Boolean,default:!1}},emits:["click","button-ref"],setup(t,{emit:d}){const h=n.useAttrs(),f=n.ref(null),m=n.ref(null),v=n.ref([]),r=n.ref(!1),c=n.ref(null),l=n.ref(-1),y=e=>{c.value=e,l.value=t.model.findIndex(o=>o.key===e)},g=e=>{m.value=e},p=()=>{switch(m.value){case s.NeonDropdownPlacement.TopLeft:case s.NeonDropdownPlacement.TopRight:case s.NeonDropdownPlacement.LeftBottom:case s.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))},u=(e,o)=>{const a=l.value+e;a>=0&&a<=t.model.length-1&&(l.value=a,c.value=t.model[l.value].key,o.preventDefault(),setTimeout(N))},i=e=>{if(!t.disabled&&r.value)switch(e.code){case"ArrowUp":case"ArrowDown":{const o=p()?-1:1;e.code==="ArrowUp"?u(-1*o,e):u(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)},b=()=>{t.openOnHover&&(r.value=!1)};return n.onMounted(()=>{document.addEventListener("keydown",i)}),n.onUnmounted(()=>{document.removeEventListener("keydown",i)}),n.watch(()=>r.value,e=>{e&&(c.value=t.model[0].key,l.value=0)}),{dropdown:f,items:v,open:r,highlightedKey:c,highlightedIndex:l,attrs:h,emit:d,changeHighlighted:y,keyboardHandler:i,onBlur:b,onFocus:k,clickItem:w,navigateBy:u,onPlacement:g}}});module.exports=I;
+"use strict";const n=require("vue"),b=require("../../../common/enums/NeonSize.cjs.js"),q=require("../../../common/enums/NeonFunctionalColor.cjs.js"),S=require("../../presentation/dropdown/NeonDropdown.vue.cjs.js"),c=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),P=require("../../../common/utils/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;
 //# sourceMappingURL=NeonDropdownMenu.cjs.js.map

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

	@@ -1 +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 '@/common/models/NeonDropdownMenuItem';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/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 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 emitted on initialisation\n * @type {HTMLElement} the reference to the HTMLElement for the dropdown menu button.\n /\n 'button-ref',\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","props","emit","attrs","useAttrs","dropdown","ref","dropdownPlacement","items","open","highlightedKey","highlightedIndex","changeHighlighted","key","item","onPlacement","placement","isReverse","~~NeonDropdownPlacement","~~onNavigate","element","_b","_a","NeonScrollUtils","navigateBy","offset","$event","newIndex","keyboardHandler","reverseOffset","clickItem","anchor","onFocus","onBlur","onMounted","onUnmounted","watch"],"mappings":"kbAgBAA,EAAeC,kBAAgB,CAC7B,KAAM,mBACN,WAAY,CACV,aAAAC,EACA,SAAAC,EACA,SAAAC,CAAA,EAEF,MAAO,CAIL,MAAO,CAAE,KAAM,MAA4C,SAAU,EAAA,EAIrE,KAAM,CAAE,KAAM,OAA0B,QAASC,EAAAA,SAAS,MAAA,EAI1D,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,WAAA,EAIjF,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,YAAa,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE/C,MAAO,CAKL,~~QAKA~~,~~YAAA,~~EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAQC,EAAAA,SAAA,EACRC,EAAWC,EAAAA,IAA8C,IAAI,EAC7DC,EAAoBD,EAAAA,IAAkC,IAAI,EAC1DE,EAAQF,EAAAA,IAA0B,EAAE,EACpCG,EAAOH,EAAAA,IAAI,EAAK,EAChBI,EAAiBJ,EAAAA,IAAmB,IAAI,EACxCK,EAAmBL,EAAAA,IAAI,EAAE,EAEzBM,EAAqBC,GAAgB,CACzCH,EAAe,MAAQG,EACvBF,EAAiB,MAAQV,EAAM,MAAM,UAAWa,GAASA,EAAK,MAAQD,CAAG,CAC3E,EAEME,EAAeC,GAAqC,CACxDT,EAAkB,MAAQS,CAC5B,EAEMC,EAAY,IAAM,CACtB,OAAQV,EAAkB,MAAA,CACxB,~~KAAKW~~,EAAAA,sBAAsB,QAC3B,KAAKA,EAAAA,sBAAsB,SAC3B,KAAKA,EAAAA,sBAAsB,WAC3B,KAAKA,EAAAA,sBAAsB,YACzB,MAAO,EAAA,CAGX,MAAO,EACT,~~EAEMC~~,EAAa,IAAM,SACvB,MAAMC,GAA8BC,GAAAC,~~EAAAjB~~,EAAS,QAAT,~~YAAAiB~~,EAAgB,kBAAhB,YAAAD,EAAiC,cACnE,0CAGED,IACFA,EAAQ,MAAA,EACRG,EAAAA,gBAAgB,eAAeH,CAAO,EAE1C,EAEMI,EAAa,CAACC,EAAgBC,IAA0B,CAC5D,MAAMC,~~EAAWhB~~,EAAiB,~~MAAQc~~,EACtCE,GAAY,GAAKA,~~GAAY1B~~,EAAM,MAAM,OAAS,IACpDU,EAAiB,~~MAAQgB~~,~~EACzBjB~~,EAAe,MAAQT,EAAM,MAAMU,EAAiB,KAAK,EAAE,~~IAC3De~~,EAAO,eAAA,EACP,WAAWP,CAAU,EAEzB,EAEMS,EAAmBF,GAA0B,CACjD,GAAI,~~CAACzB~~,EAAM,UACLQ,EAAK,MACP,~~OAAQiB~~,EAAO,KAAA,CACb,IAAK,UACL,IAAK,YACH,CACE,MAAMG,~~EAAgBZ~~,IAAc,GAAK,~~EACrCS~~,EAAO,OAAS,UAClBF,EAAW,GAAKK,EAAeH,CAAM,EAErCF,EAAW,EAAIK,EAAeH,CAAM,CAExC,CACA,MACF,IAAK,QACL,IAAK,~~QACCzB~~,EAAM,MAAMU,EAAiB,KAAK,GAAK,CAACV,EAAM,MAAMU,EAAiB,KAAK,EAAE,~~WAC9EmB~~,~~EAAU7B~~,EAAM,MAAMU,EAAiB,KAAK,CAAC,~~EAC7Ce~~,EAAO,eAAA,GAET,MACF,IAAK,MACC,CAACA,EAAO,SAAW,CAACA,EAAO,SAAW,CAACA,EAAO,~~SAChDjB~~,EAAK,MAAQ,IAEf,MACF,IAAK,SACHA,EAAK,MAAQ,GACb,KAAA,CAIV,~~EAEMqB~~,~~EAAahB~~,GAA+B,OAChD,GAAI,CAACA,EAAK,SAAU,CAClB,GAAIA,EAAK,KAAM,CACb,~~MAAMiB~~,GAAST,~~EAAAd~~,EAAM,MAAMG,EAAiB,KAAK,IAAlC,~~YAAAW~~,EAAqC,kBACpDS,GAAUA,EAAO,MAAA,CACnB,~~MACE7B~~,EAAK,QAASY,CAAI,EAEpBL,EAAK,MAAQ,EACf,CACF,~~EAEMuB~~,EAAU,IAAM,~~CAChB/B~~,EAAM,cACRQ,EAAK,MAAQ,GAEjB,~~EAEMwB~~,EAAS,IAAM,~~CACfhC~~,EAAM,cACRQ,EAAK,MAAQ,GAEjB,~~EAEAyB~~,OAAAA,EAAAA,UAAU,IAAM,CACd,SAAS,iBAAiB,UAAWN,CAAe,CACtD,CAAC,EAEDO,EAAAA,YAAY,IAAM,CAChB,SAAS,oBAAoB,UAAWP,CAAe,CACzD,CAAC,EAEDQ,EAAAA,MACE,~~IAAM3B~~,EAAK,MACVA,GAAkB,CACbA,IACFC,EAAe,MAAQT,EAAM,MAAM,CAAC,EAAE,IACtCU,EAAiB,MAAQ,EAE7B,CAAA,EAGK,CACL,SAAAN,EACA,MAAAG,EACA,KAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,MAAAR,EACA,KAAAD,EACA,kBAAAU,EACA,~~gBAAAgB~~,EACA,OAAAK,EACA,QAAAD,EACA,UAAAF,EACA,WAAAN,EACA,~~YAAAT~~,CAAA,CAEJ,CACF,CAAC"}
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 '@/common/models/NeonDropdownMenuItem';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/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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"}

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

@@ -1,8 +1,8 @@
-import { defineComponent as B, useAttrs as D, ref as r, onMounted as I, onUnmounted as L, watch as S } from "vue";
+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 "../../../common/enums/NeonSize.es.js";
 import { NeonFunctionalColor as C } from "../../../common/enums/NeonFunctionalColor.es.js";
 import E from "../../presentation/dropdown/NeonDropdown.vue.es.js";
-import { NeonDropdownPlacement as s } from "../../../common/enums/NeonDropdownPlacement.es.js";
+import { NeonDropdownPlacement as c } from "../../../common/enums/NeonDropdownPlacement.es.js";
 import { NeonScrollUtils as H } from "../../../common/utils/NeonScrollUtils.es.js";
 import x from "../../presentation/icon/NeonIcon.vue.es.js";
 import K from "../link/NeonLink.vue.es.js";
@@ -30,6 +30,10 @@ const z = B({
      * Whether the dropdown button is disabled or not.
      */
     disabled: { type: Boolean, default: !1 },
+    /**
+     * Placement of the dropdown contents.
+     */
+    placement: { type: String, default: c.BottomLeft },
     /**
      * Instead of opening on click (default), open on hover.
      */
@@ -40,24 +44,19 @@ const z = B({
      * emitted when the user clicks on a menu item.
      * @type {NeonDropdownMenuItem} the menu item the user clicked on.
      */
-    "click",
-    /**
-     * emitted on initialisation
-     * @type {HTMLElement} the reference to the HTMLElement for the dropdown menu button.
-     */
-    "button-ref"
+    "click"
   ],
-  setup(n, { emit: u }) {
-    const p = D(), f = r(null), m = r(null), v = r([]), a = r(!1), c = r(null), t = r(-1), w = (e) => {
-      c.value = e, t.value = n.model.findIndex((o) => o.key === e);
+  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);
     }, y = (e) => {
       m.value = e;
     }, g = () => {
       switch (m.value) {
-        case s.TopLeft:
-        case s.TopRight:
-        case s.LeftBottom:
-        case s.RightBottom:
+        case c.TopLeft:
+        case c.TopRight:
+        case c.LeftBottom:
+        case c.RightBottom:
           return !0;
       }
       return !1;
@@ -68,10 +67,10 @@ const z = B({
       );
       e && (e.focus(), H.scrollIntoView(e));
     }, i = (e, o) => {
-      const l = t.value + e;
-      l >= 0 && l <= n.model.length - 1 && (t.value = l, c.value = n.model[t.value].key, o.preventDefault(), setTimeout(k));
+      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));
     }, d = (e) => {
-      if (!n.disabled && a.value)
+      if (!t.disabled && a.value)
         switch (e.code) {
           case "ArrowUp":
           case "ArrowDown":
@@ -82,7 +81,7 @@ const z = B({
             break;
           case "Enter":
           case "Space":
-            n.model[t.value] && !n.model[t.value].disabled && (h(n.model[t.value]), e.preventDefault());
+            t.model[n.value] && !t.model[n.value].disabled && (p(t.model[n.value]), e.preventDefault());
             break;
           case "Tab":
             !e.ctrlKey && !e.metaKey && !e.altKey && (a.value = !1);
@@ -91,43 +90,43 @@ const z = B({
             a.value = !1;
             break;
         }
-    }, h = (e) => {
+    }, p = (e) => {
       var o;
       if (!e.disabled) {
         if (e.href) {
-          const l = (o = v.value[t.value]) == null ? void 0 : o.firstElementChild;
+          const l = (o = v.value[n.value]) == null ? void 0 : o.firstElementChild;
           l && l.click();
         } else
           u("click", e);
         a.value = !1;
       }
     }, b = () => {
-      n.openOnHover && (a.value = !0);
+      t.openOnHover && (a.value = !0);
     }, N = () => {
-      n.openOnHover && (a.value = !1);
+      t.openOnHover && (a.value = !1);
     };
-    return I(() => {
+    return S(() => {
       document.addEventListener("keydown", d);
-    }), L(() => {
+    }), D(() => {
       document.removeEventListener("keydown", d);
-    }), S(
+    }), I(
       () => a.value,
       (e) => {
-        e && (c.value = n.model[0].key, t.value = 0);
+        e && (s.value = t.model[0].key, n.value = 0);
       }
     ), {
       dropdown: f,
       items: v,
       open: a,
-      highlightedKey: c,
-      highlightedIndex: t,
-      attrs: p,
+      highlightedKey: s,
+      highlightedIndex: n,
+      attrs: h,
       emit: u,
       changeHighlighted: w,
       keyboardHandler: d,
       onBlur: N,
       onFocus: b,
-      clickItem: h,
+      clickItem: p,
       navigateBy: i,
       onPlacement: y
     };

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

	@@ -1 +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 '@/common/models/NeonDropdownMenuItem';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/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 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 emitted on initialisation\n * @type {HTMLElement} the reference to the HTMLElement for the dropdown menu button.\n /\n 'button-ref',\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","props","emit","attrs","useAttrs","dropdown","ref","dropdownPlacement","items","open","highlightedKey","highlightedIndex","changeHighlighted","key","item","onPlacement","placement","isReverse","NeonDropdownPlacement","onNavigate","element","_b","_a","NeonScrollUtils","navigateBy","offset","$event","newIndex","keyboardHandler","reverseOffset","clickItem","anchor","onFocus","onBlur","onMounted","onUnmounted","watch"],"mappings":"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"}
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 '@/common/models/NeonDropdownMenuItem';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/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":";;;;;;;;AAgBA,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,IAAA;AAAA,EAEJ;AACF,CAAC;"}

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

@@ -1,2 +1,2 @@
-"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"},u=["onMouseover"],c={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,f){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,size:n.size},n.attrs,{onBlur:l[1]||(l[1]=o=>n.onBlur()),onButton:l[2]||(l[2]=o=>n.emit("button-ref",o)),onFocus:l[3]||(l[3]=o=>n.onFocus()),"onUpdate:modelValue":l[4]||(l[4]=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--${n.size}`],"neon-dropdown-menu__item"]),tabindex:"0",onMouseover:t=>n.changeHighlighted(o.key)},[o.isGroup?(e.openBlock(),e.createElementBlock("div",c,[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,u))),128))])]),_:1},16,["modelValue","class","color","disabled","openOnHover","size","onDropdownPlacement"])}const B=i(a,[["render",b]]);module.exports=B;
+"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;
 //# sourceMappingURL=NeonDropdownMenu.vue.cjs.js.map

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

	@@ -1 +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 :size=\"size\"\n class=\"neon-dropdown-menu\"\n v-bind=\"attrs\"\n @blur=\"onBlur()\"\n @~~button=\"emit('button-ref', $event)\"\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,~~GAK9B~~,oBAAoB,~~EAJzB~~,MAAOA,EAAA,MACP,SAAUA,EAAA,SACV,YAAaA,EAAA,YACb,KAAMA,EAAA,MAECA,EAAA,MAAK,CACZ,sBAAMA,EAAA,OAAM,GACZ,~~SAAME~~,EAAA,~~CAAA,IAAAA,EAAA,CAAA,EAAAD,GAAED,EAAA,KAAI,aAAeC,CAAM,GACjC,uBAAOD,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"}
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"}

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

@@ -1,34 +1,34 @@
 import w from "./NeonDropdownMenu.es.js";
-import { resolveComponent as i, openBlock as d, createBlock as r, mergeProps as b, withCtx as u, createElementVNode as l, createElementBlock as s, Fragment as f, renderList as k, normalizeClass as y, createCommentVNode as t, toDisplayString as p } from "vue";
-import g from "../../../_virtual/_plugin-vue_export-helper.es.js";
-const h = {
+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 = {
   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, o, H, P, F, M) {
+function D(n, d, H, P, F, M) {
   const a = i("neon-icon"), m = i("neon-link"), _ = i("neon-dropdown");
-  return d(), r(_, b({
+  return o(), l(_, b({
     ref: "dropdown",
     modelValue: n.open,
-    "onUpdate:modelValue": o[0] || (o[0] = (e) => n.open = e),
+    "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: o[1] || (o[1] = (e) => n.onBlur()),
-    onButton: o[2] || (o[2] = (e) => n.emit("button-ref", e)),
-    onFocus: o[3] || (o[3] = (e) => n.onFocus()),
-    "onUpdate:modelValue": o[4] || (o[4] = (e) => n.open = e),
+    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
   }), {
     default: u(() => [
-      l("ul", h, [
-        (d(!0), s(f, null, k(n.model, (e) => (d(), s("li", {
+      r("ul", g, [
+        (o(!0), s(f, null, k(n.model, (e) => (o(), s("li", {
           key: e.key,
           ref_for: !0,
           ref: "items",
@@ -45,15 +45,15 @@ function D(n, o, H, P, F, M) {
           tabindex: "0",
           onMouseover: (c) => n.changeHighlighted(e.key)
         }, [
-          e.isGroup ? (d(), s("div", $, [
-            e.icon ? (d(), r(a, {
+          e.isGroup ? (o(), s("div", $, [
+            e.icon ? (o(), l(a, {
               key: 0,
               disabled: e.disabled,
               name: e.icon,
               class: "neon-dropdown-menu__item-icon"
             }, null, 8, ["disabled", "name"])) : t("", !0),
-            l("span", B, p(e.label), 1)
-          ])) : e.href && !e.disabled ? (d(), r(m, {
+            r("span", B, p(e.label), 1)
+          ])) : e.href && !e.disabled ? (o(), l(m, {
             key: 1,
             href: e.href,
             "no-style": !0,
@@ -61,36 +61,36 @@ function D(n, o, H, P, F, M) {
             role: "menuitem"
           }, {
             default: u(() => [
-              e.icon ? (d(), r(a, {
+              e.icon ? (o(), l(a, {
                 key: 0,
                 disabled: e.disabled,
                 name: e.icon,
                 class: "neon-dropdown-menu__item-icon"
               }, null, 8, ["disabled", "name"])) : t("", !0),
-              l("span", C, p(e.label), 1)
+              r("span", C, p(e.label), 1)
             ]),
             _: 2
-          }, 1032, ["href"])) : (d(), s("div", {
+          }, 1032, ["href"])) : (o(), s("div", {
             key: 2,
             class: "neon-dropdown-menu__item-container",
             role: "menuitem",
             onClick: (c) => n.clickItem(e)
           }, [
-            e.icon ? (d(), r(a, {
+            e.icon ? (o(), l(a, {
               key: 0,
               disabled: e.disabled,
               name: e.icon,
               class: "neon-dropdown-menu__item-icon"
             }, null, 8, ["disabled", "name"])) : t("", !0),
-            l("span", z, p(e.label), 1)
+            r("span", z, p(e.label), 1)
           ], 8, V))
         ], 42, v))), 128))
       ])
     ]),
     _: 1
-  }, 16, ["modelValue", "class", "color", "disabled", "openOnHover", "size", "onDropdownPlacement"]);
+  }, 16, ["modelValue", "class", "color", "disabled", "openOnHover", "placement", "size", "onDropdownPlacement"]);
 }
-const G = /* @__PURE__ */ g(w, [["render", D]]);
+const G = /* @__PURE__ */ h(w, [["render", D]]);
 export {
   G as default
 };

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

	@@ -1 +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 :size=\"size\"\n class=\"neon-dropdown-menu\"\n v-bind=\"attrs\"\n @blur=\"onBlur()\"\n @~~button=\"emit('button-ref', $event)\"\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,~~IAK9B~~,oBAAoB;AAAA,~~IAJzB~~,OAAOA,EAAA;AAAA,IACP,UAAUA,EAAA;AAAA,IACV,aAAaA,EAAA;AAAA,IACb,MAAMA,EAAA;AAAA,KAECA,EAAA,OAAK;AAAA,IACZ,+BAAMA,EAAA,OAAM;AAAA,IACZ,~~UAAME~~,EAAA,~~CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAD,MAAED,EAAA,KAAI,cAAeC,CAAM;AAAA,IACjC,gCAAOD,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;;;;;;;;"}
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;;;;;;;;"}

package/dist/components/navigation/menu/NeonMenu.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";const r=require("vue"),x=require("../link/NeonLink.vue.cjs.js"),E=require("../dropdown-menu/NeonDropdownMenu.vue.cjs.js"),W=require("../../../common/enums/NeonFunctionalColor.cjs.js"),z=require("../../../common/enums/NeonSize.cjs.js"),C=require("../../presentation/icon/NeonIcon.vue.cjs.js"),L=require("vue-router"),F=r.defineComponent({name:"NeonMenu",components:{NeonDropdownMenu:E,NeonLink:x,NeonIcon:C},props:{menu:{type:Array,required:!0},color:{type:String,default:W.NeonFunctionalColor.Brand},size:{type:String,default:z.NeonSize.Large},priorityMenuEnabled:{type:Boolean,default:!0}},emits:["click"],setup(a,{emit:w}){const d=L.useRoute(),f=r.ref(null),v=r.ref(null),o=r.ref(null),u=r.ref([]),y=r.ref([]),l=r.ref([]),h=n=>{const t=window.getComputedStyle(n),e=parseFloat(t.marginLeft||"0")+parseFloat(t.marginRight||"0");return Math.ceil(n.offsetWidth+e)},M=(n,t)=>({key:n,element:t,width:h(t)}),k=()=>{const n=a.menu.map((t,e)=>v.value&&M(t.key,v.value[e])||null);u.value=n.filter(t=>t!==null)},b=n=>n&&(d==null?void 0:d.path.indexOf(n))>=0,q=n=>{w("click",n)},N=(n,t,e)=>{if(e.map(i=>i.width).reduce((i,s)=>i?i+s:0)<=n-t)return e.map(i=>i.key);let m=n-t,c=[];for(let i=0;i<e.length;i=i+1){const s=e[i];if(m<s.width){i===1&&(c=c.filter(S=>S!==e[0].key));break}m=m-s.width,c.push(s.key)}return c},p=async()=>{await r.nextTick();const n=f.value&&h(f.value)||0,t=o.value&&h(o.value)||0;l.value=N(n,t,u.value),y.value=a.menu.filter(e=>l.value.indexOf(e.key)<0).flatMap(e=>[{...e,isGroup:e.children&&e.children.length>0},...(e.children||[]).map(g=>({...g,grouped:!0}))]),u.value.forEach(e=>{e.element.hidden=l.value.indexOf(e.key)<0}),o.value&&(o.value.hidden=u.value.length===l.value.length)};return r.onMounted(async()=>{a.priorityMenuEnabled&&(await r.nextTick(),k(),await p(),window.addEventListener("resize",p))}),r.onUnmounted(()=>{a.priorityMenuEnabled&&window.removeEventListener("resize",p)}),{menuWrapper:f,menuItem:v,menuItems:u,responsiveButton:o,responsiveMenuItems:y,visible:l,onClick:q,routeMatches:b}}});module.exports=F;
+"use strict";const o=require("vue"),E=require("../link/NeonLink.vue.cjs.js"),S=require("../dropdown-menu/NeonDropdownMenu.vue.cjs.js"),x=require("../../../common/enums/NeonFunctionalColor.cjs.js"),C=require("../../../common/enums/NeonSize.cjs.js"),W=require("../../presentation/icon/NeonIcon.vue.cjs.js"),z=require("vue-router"),L=o.defineComponent({name:"NeonMenu",components:{NeonDropdownMenu:S,NeonLink:E,NeonIcon:W},props:{menu:{type:Array,required:!0},color:{type:String,default:x.NeonFunctionalColor.Brand},size:{type:String,default:C.NeonSize.Large},priorityMenuEnabled:{type:Boolean,default:!0}},emits:["click"],setup(c,{emit:g}){const f=z.useRoute(),d=o.ref(null),m=o.ref(null),s=o.ref([]),y=o.ref([]),l=o.ref([]),p=n=>{const e=window.getComputedStyle(n),r=parseFloat(e.marginLeft||"0")+parseFloat(e.marginRight||"0");return Math.ceil(n.offsetWidth+r)},w=(n,e)=>({key:n,element:e,width:p(e)}),M=()=>{const n=c.menu.map((e,r)=>m.value&&w(e.key,m.value[r])||null);s.value=n.filter(e=>e!==null)},k=n=>n&&(f==null?void 0:f.path.indexOf(n))>=0,b=n=>{g("click",n)},N=(n,e,r)=>{if(r.map(i=>i.width).reduce((i,a)=>i?i+a:0)<=n-e)return r.map(i=>i.key);let t=n-e,u=[];for(let i=0;i<r.length;i=i+1){const a=r[i];if(t<a.width){i===1&&(u=u.filter(q=>q!==r[0].key));break}t=t-a.width,u.push(a.key)}return u},v=async()=>{var h;await o.nextTick();const n=d.value&&p(d.value)||0,e=(h=d.value)==null?void 0:h.getElementsByClassName("neon-menu__responsive-menu")[0],r=e&&p(e)||0;l.value=N(n,r,s.value),y.value=c.menu.filter(t=>l.value.indexOf(t.key)<0).flatMap(t=>[{...t,isGroup:t.children&&t.children.length>0},...(t.children||[]).map(u=>({...u,grouped:!0}))]),s.value.forEach(t=>{t.element.hidden=l.value.indexOf(t.key)<0}),e&&(e.hidden=s.value.length===l.value.length)};return o.onMounted(async()=>{c.priorityMenuEnabled&&(await o.nextTick(),M(),await v(),window.addEventListener("resize",v))}),o.onUnmounted(()=>{c.priorityMenuEnabled&&window.removeEventListener("resize",v)}),{menuWrapper:d,menuItem:m,menuItems:s,responsiveMenuItems:y,visible:l,onClick:b,routeMatches:k}}});module.exports=L;
 //# sourceMappingURL=NeonMenu.cjs.js.map

package/dist/components/navigation/menu/NeonMenu.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NeonMenu.cjs.js","sources":["../../../../src/components/navigation/menu/NeonMenu.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, nextTick, onMounted, onUnmounted, ref } from 'vue';\nimport type { NeonMenuModel } from '@/common/models/NeonMenuModel';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonDropdownMenu from '@/components/navigation/dropdown-menu/NeonDropdownMenu.vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport type { NeonPriorityMenuItem } from './NeonPriorityMenuItem';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { useRoute } from 'vue-router';\n\n/*\n <p>\n * <strong>NeonMenu</strong> is a responsive aware menu that progressively collapses options into the mobile menu as\n * the screen size gets smaller. This is a more flexible option than moving directly to a hamburger menu at tablet and\n * below. It is a best effort approach to keep displaying the most important menu items for as long as possible,\n * giving the user a better experience.\n * </p>\n /\nexport default defineComponent({\n name: 'NeonMenu',\n components: {\n NeonDropdownMenu,\n NeonLink,\n NeonIcon,\n },\n props: {\n /\n The menu configuration. This can have two levels, i.e. a top level horizontal menu and, if required, a dropdown\n * menu containing the second level. The highlighted 'active' menu is determined by the current Vue route.\n /\n menu: { type: Array as () => Array<NeonMenuModel>, required: true },\n /\n The menu highlight color (excludes low-contrast and neutral).\n /\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Brand },\n /\n The menu size.\n /\n size: { type: String as () => NeonSize, default: NeonSize.Large },\n /\n Whether to enable the priority menu which automatically calculates the available screen space and displays\n * as many of the menu items as possible, moving the remaining items into the overflow menu.\n /\n priorityMenuEnabled: { type: Boolean, default: true },\n },\n emits: [\n /\n Emitted when a user clicks on a menu item.\n * @type {string} the key of the menu item clicked.\n */\n 'click',\n ],\n setup(props, { emit }) {\n const route = useRoute();\n const menuWrapper = ref<HTMLElement \| null>(null);\n const menuItem = ref<Array<HTMLElement> \| null>(null);\n ~~const responsiveButton = ref<HTMLElement \| null>(null);\n~~\n const menuItems = ref<Array<NeonPriorityMenuItem>>([]);\n const responsiveMenuItems = ref<Array<NeonMenuModel>>([]);\n const visible = ref<Array<string>>([]);\n\n const getWidth = (el: HTMLElement) => {\n const styles = window.getComputedStyle(el);\n const margin = parseFloat(styles.marginLeft \|\| '0') + parseFloat(styles.marginRight \|\| '0');\n return Math.ceil(el.offsetWidth + margin);\n };\n\n const toPriorityMenuItem = (key: string, element: HTMLElement): NeonPriorityMenuItem => {\n return {\n key,\n element,\n width: getWidth(element),\n };\n };\n\n const initMenuItems = () => {\n const results = props.menu.map(\n (item, index) => (menuItem.value && toPriorityMenuItem(item.key, menuItem.value[index])) \|\| null,\n );\n menuItems.value = results.filter((item) => item !== null) as NeonPriorityMenuItem[];\n };\n\n const routeMatches = (path?: string) => {\n return path && route?.path.indexOf(path) >= 0;\n };\n\n const onClick = (key: string) => {\n emit('click', key);\n };\n\n const determineVisibleMenuItems = (\n menuWidth: number,\n responsiveMenuWidth: number,\n menuItems: NeonPriorityMenuItem[],\n ) => {\n const itemWidthSum = menuItems.map((item) => item.width).reduce((acc: number, width) => (acc ? acc + width : 0));\n\n // no responsive menu\n if (itemWidthSum <= menuWidth - responsiveMenuWidth) {\n return menuItems.map((menuItem) => menuItem.key);\n }\n\n // with responsive menu\n let availableWidth = menuWidth - responsiveMenuWidth;\n let visible: string[] = [];\n\n for (let i = 0; i < menuItems.length; i = i + 1) {\n const menuItem = menuItems[i];\n if (availableWidth < menuItem.width) {\n // if the second menu item should be hidden, also hide the first one to improve how it looks\n if (i === 1) {\n visible = visible.filter((key) => key !== menuItems[0].key);\n }\n break;\n }\n\n availableWidth = availableWidth - menuItem.width;\n visible.push(menuItem.key);\n }\n\n return visible;\n };\n\n const refreshVisibleMenu = async () => {\n await nextTick();\n const menuWidth = (menuWrapper.value && getWidth(menuWrapper.value)) \|\| 0;\n const ~~responsiveMenuWidth~~ = ~~(responsiveButton~~.value && getWidth(~~responsiveButton.value~~)) \|\| 0;\n visible.value = determineVisibleMenuItems(menuWidth, responsiveMenuWidth, menuItems.value);\n\n responsiveMenuItems.value = props.menu\n .filter((item) => visible.value.indexOf(item.key) < 0)\n .flatMap((item) => [\n { ...item, isGroup: item.children && item.children.length > 0 },\n ...(item.children \|\| []).map((item) => ({ ...item, grouped: true })),\n ]);\n\n menuItems.value.forEach((item) => {\n item.element.hidden = visible.value.indexOf(item.key) < 0;\n });\n\n if (~~responsiveButton.value~~) {\n ~~responsiveButton~~.~~value.~~hidden = menuItems.value.length === visible.value.length;\n }\n };\n\n onMounted(async () => {\n if (props.priorityMenuEnabled) {\n await nextTick();\n initMenuItems();\n await refreshVisibleMenu();\n window.addEventListener('resize', refreshVisibleMenu);\n }\n });\n\n onUnmounted(() => {\n if (props.priorityMenuEnabled) {\n window.removeEventListener('resize', refreshVisibleMenu);\n }\n });\n\n return {\n menuWrapper,\n menuItem,\n menuItems,\n ~~responsiveButton,\n~~ responsiveMenuItems,\n visible,\n onClick,\n routeMatches,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonDropdownMenu","NeonLink","NeonIcon","NeonFunctionalColor","NeonSize","props","emit","route","useRoute","menuWrapper","ref","menuItem","~~responsiveButton","~~menuItems","responsiveMenuItems","visible","getWidth","el","styles","margin","toPriorityMenuItem","key","element","initMenuItems","results","item","index","routeMatches","path","onClick","determineVisibleMenuItems","menuWidth","responsiveMenuWidth","acc","width","availableWidth","refreshVisibleMenu","nextTick","onMounted","onUnmounted"],"mappings":"yUAkBAA,EAAeC,kBAAgB,CAC7B,KAAM,WACN,WAAY,CACV,iBAAAC,EACA,SAAAC,EACA,SAAAC,CAAA,EAEF,MAAO,CAKL,KAAM,CAAE,KAAM,MAAqC,SAAU,EAAA,EAI7D,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,KAAA,EAIjF,KAAM,CAAE,KAAM,OAA0B,QAASC,EAAAA,SAAS,KAAA,EAK1D,oBAAqB,CAAE,KAAM,QAAS,QAAS,EAAA,CAAK,EAEtD,MAAO,CAKL,OAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAQC,EAAAA,SAAA,EACRC,EAAcC,EAAAA,IAAwB,IAAI,EAC1CC,EAAWD,EAAAA,IAA+B,IAAI,~~EAC9CE~~,~~EAAmBF~~,EAAAA,~~IAAwB,IAAI,EAE/CG,EAAYH,EAAAA,~~IAAiC,EAAE,EAC/CI,~~EAAsBJ~~,EAAAA,IAA0B,EAAE,~~EAClDK~~,~~EAAUL~~,EAAAA,IAAmB,EAAE,EAE/BM,EAAYC,GAAoB,CACpC,MAAMC,EAAS,OAAO,iBAAiBD,CAAE,EACnCE,EAAS,WAAWD,EAAO,YAAc,GAAG,EAAI,WAAWA,EAAO,aAAe,GAAG,EAC1F,OAAO,KAAK,KAAKD,EAAG,YAAcE,CAAM,CAC1C,EAEMC,EAAqB,CAACC,EAAaC,KAChC,CACL,IAAAD,EACA,QAAAC,EACA,MAAON,EAASM,CAAO,CAAA,GAIrBC,EAAgB,IAAM,CAC1B,MAAMC,~~EAAUnB~~,EAAM,KAAK,IACzB,~~CAACoB~~,EAAMC,~~IAAWf~~,EAAS,~~OAASS~~,EAAmBK,EAAK,~~IAAKd~~,EAAS,~~MAAMe~~,CAAK,CAAC,GAAM,IAAA,EAE9Fb,EAAU,MAAQW,EAAQ,OAAQC,GAASA,IAAS,IAAI,CAC1D,EAEME,EAAgBC,GACbA,~~IAAQrB~~,GAAA,YAAAA,EAAO,KAAK,~~QAAQqB~~,KAAS,EAGxCC,EAAWR,GAAgB,CAC/Bf,EAAK,~~QAASe~~,CAAG,CACnB,EAEMS,EAA4B,CAChCC,EACAC,EACAnB,IACG,CAIH,GAHqBA,EAAU,IAAKY,GAASA,EAAK,KAAK,EAAE,OAAO,CAACQ,EAAaC,IAAWD,EAAMA,EAAMC,EAAQ,CAAE,GAG3FH,EAAYC,EAC9B,OAAOnB,EAAU,~~IAAKF~~,GAAaA,EAAS,GAAG,EAIjD,~~IAAIwB~~,EAAiBJ,EAAYC,EAC7BjB,EAAoB,CAAA,EAExB,QAAS,EAAI,EAAG,EAAIF,EAAU,OAAQ,EAAI,EAAI,EAAG,CAC/C,~~MAAMF~~,~~EAAWE~~,EAAU,CAAC,EAC5B,GAAIsB,~~EAAiBxB~~,EAAS,MAAO,CAE/B,IAAM,~~IACRI~~,EAAUA,EAAQ,OAAQM,GAAQA,IAAQR,EAAU,CAAC,EAAE,GAAG,GAE5D,KACF,CAEAsB,EAAiBA,~~EAAiBxB~~,EAAS,~~MAC3CI~~,EAAQ,~~KAAKJ~~,EAAS,GAAG,CAC3B,CAEA,~~OAAOI~~,CACT,EAEMqB,EAAqB,SAAY,~~CACrC~~,MAAMC,WAAA,EACN,MAAMN,~~EAAatB~~,EAAY,~~OAASO~~,~~EAASP~~,EAAY,KAAK,GAAM,~~EAClEuB~~,~~EAAuBpB~~,~~EAAiB~~,~~OAASI~~,~~EAASJ~~,~~EAAiB~~,~~KAAK~~,GAAM,~~EAC5FG~~,EAAQ,MAAQe,EAA0BC,EAAWC,EAAqBnB,EAAU,KAAK,EAEzFC,EAAoB,~~MAAQT~~,EAAM,KAC/B,~~OAAQoB~~,GAASV,EAAQ,MAAM,QAAQU,EAAK,GAAG,EAAI,CAAC,EACpD,QAASA,GAAS,CACjB,CAAE,GAAGA,EAAM,QAASA,EAAK,UAAYA,EAAK,SAAS,OAAS,CAAA,EAC5D,IAAIA,EAAK,UAAY,CAAA,GAAI,IAAKA,IAAU,CAAE,GAAGA,EAAM,QAAS,IAAO,CAAA,CACpE,EAEHZ,EAAU,MAAM,QAASY,GAAS,CAChCA,EAAK,QAAQ,OAASV,EAAQ,MAAM,QAAQU,EAAK,GAAG,EAAI,CAC1D,CAAC,~~EAEGb~~,~~EAAiB~~,~~QACnBA~~,~~EAAiB~~,~~MAAM,OAASC,~~EAAU,MAAM,SAAWE,EAAQ,MAAM,~~OAE7E~~,~~EAEAuB~~,OAAAA,EAAAA,UAAU,SAAY,~~CAChBjC~~,EAAM,sBACR,~~MAAMgC~~,WAAA,EACNd,EAAA,EACA,MAAMa,EAAA,EACN,OAAO,iBAAiB,SAAUA,CAAkB,EAExD,CAAC,~~EAEDG~~,EAAAA,YAAY,IAAM,~~CACZlC~~,EAAM,qBACR,OAAO,oBAAoB,~~SAAU+B~~,CAAkB,CAE3D,CAAC,EAEM,CACL,~~YAAA3B~~,EACA,SAAAE,EACA,~~UAAAE~~,EACA,~~iBAAAD~~,EACA,~~oBAAAE,EACA,~~QAAAC,EACA,QAAAc,EACA,aAAAF,CAAA,CAEJ,CACF,CAAC"}
1	+ {"version":3,"file":"NeonMenu.cjs.js","sources":["../../../../src/components/navigation/menu/NeonMenu.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, nextTick, onMounted, onUnmounted, ref } from 'vue';\nimport type { NeonMenuModel } from '@/common/models/NeonMenuModel';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonDropdownMenu from '@/components/navigation/dropdown-menu/NeonDropdownMenu.vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport type { NeonPriorityMenuItem } from './NeonPriorityMenuItem';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { useRoute } from 'vue-router';\n\n/*\n <p>\n * <strong>NeonMenu</strong> is a responsive aware menu that progressively collapses options into the mobile menu as\n * the screen size gets smaller. This is a more flexible option than moving directly to a hamburger menu at tablet and\n * below. It is a best effort approach to keep displaying the most important menu items for as long as possible,\n * giving the user a better experience.\n * </p>\n /\nexport default defineComponent({\n name: 'NeonMenu',\n components: {\n NeonDropdownMenu,\n NeonLink,\n NeonIcon,\n },\n props: {\n /\n The menu configuration. This can have two levels, i.e. a top level horizontal menu and, if required, a dropdown\n * menu containing the second level. The highlighted 'active' menu is determined by the current Vue route.\n /\n menu: { type: Array as () => Array<NeonMenuModel>, required: true },\n /\n The menu highlight color (excludes low-contrast and neutral).\n /\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Brand },\n /\n The menu size.\n /\n size: { type: String as () => NeonSize, default: NeonSize.Large },\n /\n Whether to enable the priority menu which automatically calculates the available screen space and displays\n * as many of the menu items as possible, moving the remaining items into the overflow menu.\n /\n priorityMenuEnabled: { type: Boolean, default: true },\n },\n emits: [\n /\n Emitted when a user clicks on a menu item.\n * @type {string} the key of the menu item clicked.\n */\n 'click',\n ],\n setup(props, { emit }) {\n const route = useRoute();\n const menuWrapper = ref<HTMLElement \| null>(null);\n const menuItem = ref<Array<HTMLElement> \| null>(null);\n\n const menuItems = ref<Array<NeonPriorityMenuItem>>([]);\n const responsiveMenuItems = ref<Array<NeonMenuModel>>([]);\n const visible = ref<Array<string>>([]);\n\n const getWidth = (el: HTMLElement) => {\n const styles = window.getComputedStyle(el);\n const margin = parseFloat(styles.marginLeft \|\| '0') + parseFloat(styles.marginRight \|\| '0');\n return Math.ceil(el.offsetWidth + margin);\n };\n\n const toPriorityMenuItem = (key: string, element: HTMLElement): NeonPriorityMenuItem => {\n return {\n key,\n element,\n width: getWidth(element),\n };\n };\n\n const initMenuItems = () => {\n const results = props.menu.map(\n (item, index) => (menuItem.value && toPriorityMenuItem(item.key, menuItem.value[index])) \|\| null,\n );\n menuItems.value = results.filter((item) => item !== null) as NeonPriorityMenuItem[];\n };\n\n const routeMatches = (path?: string) => {\n return path && route?.path.indexOf(path) >= 0;\n };\n\n const onClick = (key: string) => {\n emit('click', key);\n };\n\n const determineVisibleMenuItems = (\n menuWidth: number,\n responsiveMenuWidth: number,\n menuItems: NeonPriorityMenuItem[],\n ) => {\n const itemWidthSum = menuItems.map((item) => item.width).reduce((acc: number, width) => (acc ? acc + width : 0));\n\n // no responsive menu\n if (itemWidthSum <= menuWidth - responsiveMenuWidth) {\n return menuItems.map((menuItem) => menuItem.key);\n }\n\n // with responsive menu\n let availableWidth = menuWidth - responsiveMenuWidth;\n let visible: string[] = [];\n\n for (let i = 0; i < menuItems.length; i = i + 1) {\n const menuItem = menuItems[i];\n if (availableWidth < menuItem.width) {\n // if the second menu item should be hidden, also hide the first one to improve how it looks\n if (i === 1) {\n visible = visible.filter((key) => key !== menuItems[0].key);\n }\n break;\n }\n\n availableWidth = availableWidth - menuItem.width;\n visible.push(menuItem.key);\n }\n\n return visible;\n };\n\n const refreshVisibleMenu = async () => {\n await nextTick();\n const menuWidth = (menuWrapper.value && getWidth(menuWrapper.value)) \|\| 0;\n const responsiveDropdown = menuWrapper.value?.getElementsByClassName(\n 'neon-menu__responsive-menu',\n )[0] as HTMLElement;\n const responsiveMenuWidth = (responsiveDropdown && getWidth(responsiveDropdown)) \|\| 0;\n visible.value = determineVisibleMenuItems(menuWidth, responsiveMenuWidth, menuItems.value);\n\n responsiveMenuItems.value = props.menu\n .filter((item) => visible.value.indexOf(item.key) < 0)\n .flatMap((item) => [\n { ...item, isGroup: item.children && item.children.length > 0 },\n ...(item.children \|\| []).map((item) => ({ ...item, grouped: true })),\n ]);\n\n menuItems.value.forEach((item) => {\n item.element.hidden = visible.value.indexOf(item.key) < 0;\n });\n\n if (responsiveDropdown) {\n responsiveDropdown.hidden = menuItems.value.length === visible.value.length;\n }\n };\n\n onMounted(async () => {\n if (props.priorityMenuEnabled) {\n await nextTick();\n initMenuItems();\n await refreshVisibleMenu();\n window.addEventListener('resize', refreshVisibleMenu);\n }\n });\n\n onUnmounted(() => {\n if (props.priorityMenuEnabled) {\n window.removeEventListener('resize', refreshVisibleMenu);\n }\n });\n\n return {\n menuWrapper,\n menuItem,\n menuItems,\n responsiveMenuItems,\n visible,\n onClick,\n routeMatches,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonDropdownMenu","NeonLink","NeonIcon","NeonFunctionalColor","NeonSize","props","emit","route","useRoute","menuWrapper","ref","menuItem","menuItems","responsiveMenuItems","visible","getWidth","el","styles","margin","toPriorityMenuItem","key","element","initMenuItems","results","item","index","routeMatches","path","onClick","determineVisibleMenuItems","menuWidth","responsiveMenuWidth","acc","width","availableWidth","refreshVisibleMenu","nextTick","responsiveDropdown","_a","onMounted","onUnmounted"],"mappings":"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"}