@aotearoan/neon 26.0.2 → 26.0.4

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 (36) hide show
  1. package/dist/components/layout/page-container/NeonPageContainer.vue.cjs.js +1 -1
  2. package/dist/components/layout/page-container/NeonPageContainer.vue.cjs.js.map +1 -1
  3. package/dist/components/layout/page-container/NeonPageContainer.vue.es.js +16 -11
  4. package/dist/components/layout/page-container/NeonPageContainer.vue.es.js.map +1 -1
  5. package/dist/components/navigation/tree-menu/NeonTreeMenu.cjs.js +1 -1
  6. package/dist/components/navigation/tree-menu/NeonTreeMenu.cjs.js.map +1 -1
  7. package/dist/components/navigation/tree-menu/NeonTreeMenu.es.js +17 -10
  8. package/dist/components/navigation/tree-menu/NeonTreeMenu.es.js.map +1 -1
  9. package/dist/components/navigation/tree-menu/NeonTreeMenu.vue.cjs.js +1 -1
  10. package/dist/components/navigation/tree-menu/NeonTreeMenu.vue.cjs.js.map +1 -1
  11. package/dist/components/navigation/tree-menu/NeonTreeMenu.vue.es.js +53 -46
  12. package/dist/components/navigation/tree-menu/NeonTreeMenu.vue.es.js.map +1 -1
  13. package/dist/components/presentation/expansion-panel/NeonExpansionPanel.cjs.js +1 -1
  14. package/dist/components/presentation/expansion-panel/NeonExpansionPanel.cjs.js.map +1 -1
  15. package/dist/components/presentation/expansion-panel/NeonExpansionPanel.es.js +5 -1
  16. package/dist/components/presentation/expansion-panel/NeonExpansionPanel.es.js.map +1 -1
  17. package/dist/components/presentation/expansion-panel/NeonExpansionPanel.vue.cjs.js +1 -1
  18. package/dist/components/presentation/expansion-panel/NeonExpansionPanel.vue.cjs.js.map +1 -1
  19. package/dist/components/presentation/expansion-panel/NeonExpansionPanel.vue.es.js +4 -3
  20. package/dist/components/presentation/expansion-panel/NeonExpansionPanel.vue.es.js.map +1 -1
  21. package/dist/src/components/navigation/tree-menu/NeonTreeMenu.d.ts +3 -1
  22. package/dist/src/components/presentation/expansion-panel/NeonExpansionPanel.d.ts +15 -0
  23. package/package.json +1 -1
  24. package/src/sass/components/_button.scss +3 -0
  25. package/src/sass/components/_card-list.scss +11 -2
  26. package/src/sass/components/_expansion-panel.scss +23 -19
  27. package/src/sass/components/_field.scss +1 -0
  28. package/src/sass/components/_input.scss +4 -0
  29. package/src/sass/components/_page-container.scss +17 -3
  30. package/src/sass/components/_side-nav.scss +2 -0
  31. package/src/sass/components/_tabs.scss +19 -10
  32. package/src/sass/components/_tree-menu.scss +2 -2
  33. package/src/sass/core/_elements.scss +1 -1
  34. package/src/sass/variables-dark.scss +5 -0
  35. package/src/sass/variables-global.scss +5 -5
  36. package/src/sass/variables-light.scss +5 -0
@@ -1,2 +1,2 @@
1
- "use strict";const t=require("./NeonPageContainer.cjs.js"),e=require("vue"),o=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r={key:0,class:"neon-page-container__title"};function s(n,i,c,l,p,u){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([{"neon-page-container--hide-nav":n.hideNav,"neon-page-container--with-sticky-buttons":n.stickyButtons},"neon-page-container"])},[n.title?(e.openBlock(),e.createElementBlock("h1",r,e.toDisplayString(n.title),1)):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default")],2)}const a=o(t,[["render",s]]);module.exports=a;
1
+ "use strict";const t=require("./NeonPageContainer.cjs.js"),e=require("vue"),o=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r={class:"neon-page-container__header"},s={key:0,class:"neon-page-container__title"};function a(n,c,l,p,d,u){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([{"neon-page-container--hide-nav":n.hideNav,"neon-page-container--with-sticky-buttons":n.stickyButtons},"neon-page-container"])},[e.createElementVNode("div",r,[e.renderSlot(n.$slots,"header",{},()=>[n.title?(e.openBlock(),e.createElementBlock("h1",s,e.toDisplayString(n.title),1)):e.createCommentVNode("",!0)]),e.renderSlot(n.$slots,"actions")]),e.renderSlot(n.$slots,"default")],2)}const i=o(t,[["render",a]]);module.exports=i;
2
2
  //# sourceMappingURL=NeonPageContainer.vue.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"NeonPageContainer.vue.cjs.js","sources":["../../../../src/components/layout/page-container/NeonPageContainer.vue"],"sourcesContent":["<template>\n <div\n :class=\"{\n 'neon-page-container--hide-nav': hideNav,\n 'neon-page-container--with-sticky-buttons': stickyButtons,\n }\"\n class=\"neon-page-container\"\n >\n <h1 v-if=\"title\" class=\"neon-page-container__title\">{{ title }}</h1>\n <!-- @slot the page contents -->\n <slot name=\"default\"></slot>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonPageContainer.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_hoisted_1","_toDisplayString","_renderSlot"],"mappings":"qJAQqB,MAAM,2EAPzBA,EAAAA,mBAUM,MAAA,CATH,MAAKC,EAAAA,eAAA,CAAA,iCAA2CC,EAAA,mDAA2DA,EAAA,eAItG,qBAAqB,CAAA,IAEjBA,EAAA,qBAAVF,EAAAA,mBAAoE,KAApEG,EAAoEC,EAAAA,gBAAbF,EAAA,KAAK,EAAA,CAAA,+BAE5DG,aAA4BH,EAAA,OAAA,SAAA"}
1
+ {"version":3,"file":"NeonPageContainer.vue.cjs.js","sources":["../../../../src/components/layout/page-container/NeonPageContainer.vue"],"sourcesContent":["<template>\n <div\n :class=\"{\n 'neon-page-container--hide-nav': hideNav,\n 'neon-page-container--with-sticky-buttons': stickyButtons,\n }\"\n class=\"neon-page-container\"\n >\n <div class=\"neon-page-container__header\">\n <!-- @slot header - override default title for richer content -->\n <slot name=\"header\">\n <h1 v-if=\"title\" class=\"neon-page-container__title\">{{ title }}</h1>\n </slot>\n <!-- @slot header actions -->\n <slot name=\"actions\"></slot>\n </div>\n <!-- @slot the page contents -->\n <slot name=\"default\"></slot>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonPageContainer.ts\" />\n"],"names":["_hoisted_1","_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_renderSlot","_hoisted_2","_toDisplayString"],"mappings":"4IAQSA,EAAA,CAAA,MAAM,6BAA6B,WAGnB,MAAM,2EAV7BC,EAAAA,mBAiBM,MAAA,CAhBH,MAAKC,EAAAA,eAAA,CAAA,iCAA2CC,EAAA,mDAA2DA,EAAA,eAItG,qBAAqB,CAAA,IAE3BC,EAAAA,mBAOM,MAPNJ,EAOM,CALJK,EAAAA,WAEOF,qBAFP,IAEO,CADKA,EAAA,qBAAVF,EAAAA,mBAAoE,KAApEK,EAAoEC,EAAAA,gBAAbJ,EAAA,KAAK,EAAA,CAAA,iCAG9DE,aAA4BF,EAAA,OAAA,SAAA,IAG9BE,aAA4BF,EAAA,OAAA,SAAA"}
@@ -1,23 +1,28 @@
1
- import o from "./NeonPageContainer.es.js";
2
- import { openBlock as t, createElementBlock as n, normalizeClass as r, toDisplayString as a, createCommentVNode as i, renderSlot as s } from "vue";
3
- import c from "../../../_virtual/_plugin-vue_export-helper.es.js";
4
- const l = {
1
+ import a from "./NeonPageContainer.es.js";
2
+ import { openBlock as o, createElementBlock as t, normalizeClass as s, createElementVNode as r, renderSlot as n, toDisplayString as i, createCommentVNode as c } from "vue";
3
+ import l from "../../../_virtual/_plugin-vue_export-helper.es.js";
4
+ const d = { class: "neon-page-container__header" }, p = {
5
5
  key: 0,
6
6
  class: "neon-page-container__title"
7
7
  };
8
- function p(e, d, m, f, u, _) {
9
- return t(), n("div", {
10
- class: r([{
8
+ function m(e, f, h, _, u, g) {
9
+ return o(), t("div", {
10
+ class: s([{
11
11
  "neon-page-container--hide-nav": e.hideNav,
12
12
  "neon-page-container--with-sticky-buttons": e.stickyButtons
13
13
  }, "neon-page-container"])
14
14
  }, [
15
- e.title ? (t(), n("h1", l, a(e.title), 1)) : i("", !0),
16
- s(e.$slots, "default")
15
+ r("div", d, [
16
+ n(e.$slots, "header", {}, () => [
17
+ e.title ? (o(), t("h1", p, i(e.title), 1)) : c("", !0)
18
+ ]),
19
+ n(e.$slots, "actions")
20
+ ]),
21
+ n(e.$slots, "default")
17
22
  ], 2);
18
23
  }
19
- const $ = /* @__PURE__ */ c(o, [["render", p]]);
24
+ const y = /* @__PURE__ */ l(a, [["render", m]]);
20
25
  export {
21
- $ as default
26
+ y as default
22
27
  };
23
28
  //# sourceMappingURL=NeonPageContainer.vue.es.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"NeonPageContainer.vue.es.js","sources":["../../../../src/components/layout/page-container/NeonPageContainer.vue"],"sourcesContent":["<template>\n <div\n :class=\"{\n 'neon-page-container--hide-nav': hideNav,\n 'neon-page-container--with-sticky-buttons': stickyButtons,\n }\"\n class=\"neon-page-container\"\n >\n <h1 v-if=\"title\" class=\"neon-page-container__title\">{{ title }}</h1>\n <!-- @slot the page contents -->\n <slot name=\"default\"></slot>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonPageContainer.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_hoisted_1","_toDisplayString","_renderSlot"],"mappings":";;;;;EAQqB,OAAM;;;cAPzBA,EAUM,OAAA;AAAA,IATH,OAAKC,EAAA,CAAA;AAAA,uCAA2CC,EAAA;AAAA,kDAA2DA,EAAA;AAAA,OAItG,qBAAqB,CAAA;AAAA;IAEjBA,EAAA,cAAVF,EAAoE,MAApEG,GAAoEC,EAAbF,EAAA,KAAK,GAAA,CAAA;IAE5DG,EAA4BH,EAAA,QAAA,SAAA;AAAA;;;"}
1
+ {"version":3,"file":"NeonPageContainer.vue.es.js","sources":["../../../../src/components/layout/page-container/NeonPageContainer.vue"],"sourcesContent":["<template>\n <div\n :class=\"{\n 'neon-page-container--hide-nav': hideNav,\n 'neon-page-container--with-sticky-buttons': stickyButtons,\n }\"\n class=\"neon-page-container\"\n >\n <div class=\"neon-page-container__header\">\n <!-- @slot header - override default title for richer content -->\n <slot name=\"header\">\n <h1 v-if=\"title\" class=\"neon-page-container__title\">{{ title }}</h1>\n </slot>\n <!-- @slot header actions -->\n <slot name=\"actions\"></slot>\n </div>\n <!-- @slot the page contents -->\n <slot name=\"default\"></slot>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonPageContainer.ts\" />\n"],"names":["_hoisted_1","_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_renderSlot","_hoisted_2","_toDisplayString"],"mappings":";;;AAQS,MAAAA,IAAA,EAAA,OAAM,8BAA6B;;EAGnB,OAAM;;;cAV7BC,EAiBM,OAAA;AAAA,IAhBH,OAAKC,EAAA,CAAA;AAAA,uCAA2CC,EAAA;AAAA,kDAA2DA,EAAA;AAAA,OAItG,qBAAqB,CAAA;AAAA;IAE3BC,EAOM,OAPNJ,GAOM;AAAA,MALJK,EAEOF,wBAFP,MAEO;AAAA,QADKA,EAAA,cAAVF,EAAoE,MAApEK,GAAoEC,EAAbJ,EAAA,KAAK,GAAA,CAAA;;MAG9DE,EAA4BF,EAAA,QAAA,SAAA;AAAA;IAG9BE,EAA4BF,EAAA,QAAA,SAAA;AAAA;;;"}
@@ -1,2 +1,2 @@
1
- "use strict";const u=require("vue"),s=require("../../presentation/icon/NeonIcon.vue.cjs.js"),x=require("../link/NeonLink.vue.cjs.js"),f=require("vue-router"),k=require("../../../model/common/color/NeonFunctionalColor.cjs.js"),q=u.defineComponent({name:"NeonTreeMenu",components:{NeonIcon:s,NeonLink:x},props:{id:{type:String,required:!0},modelValue:{type:Array,required:!0},color:{type:String,default:k.NeonFunctionalColor.Brand},expandAll:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(a,{emit:l}){const c=f.useRoute(),d=u.ref(null),p=n=>{const t=n.target;t.parentElement&&t.parentElement.click()},i=n=>{const t=a.modelValue.map(e=>{var o;return{...e,children:(o=e.children)==null?void 0:o.map(r=>({...r})),expanded:e.key===n?!e.expanded:e.expanded}});l("update:modelValue",t)},m=n=>{const t=a.modelValue.map(e=>{var o;return{...e,children:(o=e.children)==null?void 0:o.map(r=>({...r,expanded:r.key===n?!r.expanded:r.expanded}))}});l("update:modelValue",t)};return u.watch(()=>c.path,n=>d.value=n,{immediate:!0}),{url:d,click:p,onSectionClick:i,onItemClick:m}}});module.exports=q;
1
+ "use strict";const a=require("vue"),s=require("../../presentation/icon/NeonIcon.vue.cjs.js"),k=require("../link/NeonLink.vue.cjs.js"),x=require("vue-router"),f=require("../../../model/common/color/NeonFunctionalColor.cjs.js"),q=a.defineComponent({name:"NeonTreeMenu",components:{NeonIcon:s,NeonLink:k},props:{id:{type:String,required:!0},modelValue:{type:Array,required:!0},color:{type:String,default:f.NeonFunctionalColor.Brand},expandAll:{type:Boolean,default:!1}},emits:["update:modelValue","click"],setup(l,{emit:u}){const c=x.useRoute(),d=a.ref(null),p=n=>{const t=n.target;t.parentElement&&t.parentElement.click()},i=n=>{const t=l.modelValue.map(e=>{var o;return{...e,children:(o=e.children)==null?void 0:o.map(r=>({...r})),expanded:e.key===n?!e.expanded:e.expanded}});u("update:modelValue",t)},m=n=>{const t=l.modelValue.map(e=>{var o;return{...e,children:(o=e.children)==null?void 0:o.map(r=>({...r,expanded:r.key===n?!r.expanded:r.expanded}))}});u("update:modelValue",t)};return a.watch(()=>c.path,n=>d.value=n,{immediate:!0}),{url:d,emit:u,click:p,onSectionClick:i,onItemClick:m}}});module.exports=q;
2
2
  //# sourceMappingURL=NeonTreeMenu.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"NeonTreeMenu.cjs.js","sources":["../../../../src/components/navigation/tree-menu/NeonTreeMenu.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, ref, watch } from 'vue';\nimport type { NeonTreeMenuSectionModel } from '@/model/navigation/tree-menu/NeonTreeMenuSectionModel';\nimport NeonIcon from '../../presentation/icon/NeonIcon.vue';\nimport NeonLink from '../link/NeonLink.vue';\nimport { useRoute } from 'vue-router';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\n\n/**\n * Three level tree menu. This is useful for displaying a hierarchical navigation in NeonSideNav.The top level of the\n * menu is expandable on click but will not navigate to a page. The second level is links to pages and the third level\n * is the fragments on that page.\n */\nexport default defineComponent({\n name: 'NeonTreeMenu',\n components: {\n NeonIcon,\n NeonLink,\n },\n props: {\n /**\n * Id for the tree menu. This is used specifically to namespace the menu icons so that icon paths are unique. A\n * typical scenario is the tree menu is used in a side nav and also a drawer which means icon ids will be duplicated\n * unless they're namespaced.\n */\n id: { type: String, required: true },\n /**\n * The tree model defining the menu.\n */\n modelValue: { type: Array as () => Array<NeonTreeMenuSectionModel>, 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 * Expand all nodes in the tree, this is useful for providing filtering (e.g. the Neon showcase side navigation menu).\n */\n expandAll: { type: Boolean, default: false },\n },\n emits: [\n /**\n * Emitted when the user toggles expansion of a section or item\n * @type {Array<NeonTreeMenuSectionModel>} the updated model with the section or item expanded/collapsed.\n */\n 'update:modelValue',\n ],\n setup(props, { emit }) {\n const route = useRoute();\n const url = ref<string | null>(null);\n\n const click = ($event: KeyboardEvent) => {\n const target = $event.target as HTMLSpanElement;\n if (target.parentElement) {\n target.parentElement.click();\n }\n };\n\n const onSectionClick = (key: string) => {\n const newModel = props.modelValue.map((section) => {\n return {\n ...section,\n children: section.children?.map((child) => ({ ...child })),\n expanded: section.key === key ? !section.expanded : section.expanded,\n };\n });\n\n emit('update:modelValue', newModel);\n };\n\n const onItemClick = (key: string) => {\n const newModel = props.modelValue.map((section) => {\n return {\n ...section,\n children: section.children?.map((child) => {\n return {\n ...child,\n expanded: child.key === key ? !child.expanded : child.expanded,\n };\n }),\n };\n });\n\n emit('update:modelValue', newModel);\n };\n\n watch(\n () => route.path,\n (value) => (url.value = value),\n { immediate: true },\n );\n\n return {\n url,\n click,\n onSectionClick,\n onItemClick,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonLink","NeonFunctionalColor","props","emit","route","useRoute","url","ref","click","$event","target","onSectionClick","key","newModel","section","_a","child","onItemClick","watch","value"],"mappings":"kOAYAA,EAAeC,kBAAgB,CAC7B,KAAM,eACN,WAAY,CACV,SAAAC,EACA,SAAAC,CAAA,EAEF,MAAO,CAML,GAAI,CAAE,KAAM,OAAQ,SAAU,EAAA,EAI9B,WAAY,CAAE,KAAM,MAAgD,SAAU,EAAA,EAI9E,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,KAAA,EAIjF,UAAW,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE7C,MAAO,CAKL,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAQC,EAAAA,SAAA,EACRC,EAAMC,EAAAA,IAAmB,IAAI,EAE7BC,EAASC,GAA0B,CACvC,MAAMC,EAASD,EAAO,OAClBC,EAAO,eACTA,EAAO,cAAc,MAAA,CAEzB,EAEMC,EAAkBC,GAAgB,CACtC,MAAMC,EAAWX,EAAM,WAAW,IAAKY,GAAY,OACjD,MAAO,CACL,GAAGA,EACH,UAAUC,EAAAD,EAAQ,WAAR,YAAAC,EAAkB,IAAKC,IAAW,CAAE,GAAGA,CAAA,IACjD,SAAUF,EAAQ,MAAQF,EAAM,CAACE,EAAQ,SAAWA,EAAQ,QAAA,CAEhE,CAAC,EAEDX,EAAK,oBAAqBU,CAAQ,CACpC,EAEMI,EAAeL,GAAgB,CACnC,MAAMC,EAAWX,EAAM,WAAW,IAAKY,GAAY,OACjD,MAAO,CACL,GAAGA,EACH,UAAUC,EAAAD,EAAQ,WAAR,YAAAC,EAAkB,IAAKC,IACxB,CACL,GAAGA,EACH,SAAUA,EAAM,MAAQJ,EAAM,CAACI,EAAM,SAAWA,EAAM,QAAA,GAEzD,CAEL,CAAC,EAEDb,EAAK,oBAAqBU,CAAQ,CACpC,EAEAK,OAAAA,EAAAA,MACE,IAAMd,EAAM,KACXe,GAAWb,EAAI,MAAQa,EACxB,CAAE,UAAW,EAAA,CAAK,EAGb,CACL,IAAAb,EACA,MAAAE,EACA,eAAAG,EACA,YAAAM,CAAA,CAEJ,CACF,CAAC"}
1
+ {"version":3,"file":"NeonTreeMenu.cjs.js","sources":["../../../../src/components/navigation/tree-menu/NeonTreeMenu.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, ref, watch } from 'vue';\nimport type { NeonTreeMenuSectionModel } from '@/model/navigation/tree-menu/NeonTreeMenuSectionModel';\nimport NeonIcon from '../../presentation/icon/NeonIcon.vue';\nimport NeonLink from '../link/NeonLink.vue';\nimport { useRoute } from 'vue-router';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\n\n/**\n * Three level tree menu. This is useful for displaying a hierarchical navigation in NeonSideNav.The top level of the\n * menu is expandable on click but will not navigate to a page. The second level is links to pages and the third level\n * is the fragments on that page.\n */\nexport default defineComponent({\n name: 'NeonTreeMenu',\n components: {\n NeonIcon,\n NeonLink,\n },\n props: {\n /**\n * Id for the tree menu. This is used specifically to namespace the menu icons so that icon paths are unique. A\n * typical scenario is the tree menu is used in a side nav and also a drawer which means icon ids will be duplicated\n * unless they're namespaced.\n */\n id: { type: String, required: true },\n /**\n * The tree model defining the menu.\n */\n modelValue: { type: Array as () => Array<NeonTreeMenuSectionModel>, 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 * Expand all nodes in the tree, this is useful for providing filtering (e.g. the Neon showcase side navigation menu).\n */\n expandAll: { type: Boolean, default: false },\n },\n emits: [\n /**\n * Emitted when the user toggles expansion of a section or item\n * @type {Array<NeonTreeMenuSectionModel>} the updated model with the section or item expanded/collapsed.\n */\n 'update:modelValue',\n /**\n * Emitted when the user clicks on a link to navigate to another page. This is useful to e.g. close a side-nav\n * drawer containing the menu when there is a navigation event.\n * @type {string} the link the user clicked on.\n */\n 'click',\n ],\n setup(props, { emit }) {\n const route = useRoute();\n const url = ref<string | null>(null);\n\n const click = ($event: KeyboardEvent) => {\n const target = $event.target as HTMLSpanElement;\n if (target.parentElement) {\n target.parentElement.click();\n }\n };\n\n const onSectionClick = (key: string) => {\n const newModel = props.modelValue.map((section) => {\n return {\n ...section,\n children: section.children?.map((child) => ({ ...child })),\n expanded: section.key === key ? !section.expanded : section.expanded,\n };\n });\n\n emit('update:modelValue', newModel);\n };\n\n const onItemClick = (key: string) => {\n const newModel = props.modelValue.map((section) => {\n return {\n ...section,\n children: section.children?.map((child) => {\n return {\n ...child,\n expanded: child.key === key ? !child.expanded : child.expanded,\n };\n }),\n };\n });\n\n emit('update:modelValue', newModel);\n };\n\n watch(\n () => route.path,\n (value) => (url.value = value),\n { immediate: true },\n );\n\n return {\n url,\n emit,\n click,\n onSectionClick,\n onItemClick,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonLink","NeonFunctionalColor","props","emit","route","useRoute","url","ref","click","$event","target","onSectionClick","key","newModel","section","_a","child","onItemClick","watch","value"],"mappings":"kOAYAA,EAAeC,kBAAgB,CAC7B,KAAM,eACN,WAAY,CACV,SAAAC,EACA,SAAAC,CAAA,EAEF,MAAO,CAML,GAAI,CAAE,KAAM,OAAQ,SAAU,EAAA,EAI9B,WAAY,CAAE,KAAM,MAAgD,SAAU,EAAA,EAI9E,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,KAAA,EAIjF,UAAW,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE7C,MAAO,CAKL,oBAMA,OAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAQC,EAAAA,SAAA,EACRC,EAAMC,EAAAA,IAAmB,IAAI,EAE7BC,EAASC,GAA0B,CACvC,MAAMC,EAASD,EAAO,OAClBC,EAAO,eACTA,EAAO,cAAc,MAAA,CAEzB,EAEMC,EAAkBC,GAAgB,CACtC,MAAMC,EAAWX,EAAM,WAAW,IAAKY,GAAY,OACjD,MAAO,CACL,GAAGA,EACH,UAAUC,EAAAD,EAAQ,WAAR,YAAAC,EAAkB,IAAKC,IAAW,CAAE,GAAGA,CAAA,IACjD,SAAUF,EAAQ,MAAQF,EAAM,CAACE,EAAQ,SAAWA,EAAQ,QAAA,CAEhE,CAAC,EAEDX,EAAK,oBAAqBU,CAAQ,CACpC,EAEMI,EAAeL,GAAgB,CACnC,MAAMC,EAAWX,EAAM,WAAW,IAAKY,GAAY,OACjD,MAAO,CACL,GAAGA,EACH,UAAUC,EAAAD,EAAQ,WAAR,YAAAC,EAAkB,IAAKC,IACxB,CACL,GAAGA,EACH,SAAUA,EAAM,MAAQJ,EAAM,CAACI,EAAM,SAAWA,EAAM,QAAA,GAEzD,CAEL,CAAC,EAEDb,EAAK,oBAAqBU,CAAQ,CACpC,EAEAK,OAAAA,EAAAA,MACE,IAAMd,EAAM,KACXe,GAAWb,EAAI,MAAQa,EACxB,CAAE,UAAW,EAAA,CAAK,EAGb,CACL,IAAAb,EACA,KAAAH,EACA,MAAAK,EACA,eAAAG,EACA,YAAAM,CAAA,CAEJ,CACF,CAAC"}
@@ -1,13 +1,13 @@
1
1
  import { defineComponent as i, ref as f, watch as s } from "vue";
2
- import x from "../../presentation/icon/NeonIcon.vue.es.js";
3
- import k from "../link/NeonLink.vue.es.js";
2
+ import k from "../../presentation/icon/NeonIcon.vue.es.js";
3
+ import x from "../link/NeonLink.vue.es.js";
4
4
  import { useRoute as y } from "vue-router";
5
5
  import { NeonFunctionalColor as V } from "../../../model/common/color/NeonFunctionalColor.es.js";
6
6
  const M = i({
7
7
  name: "NeonTreeMenu",
8
8
  components: {
9
- NeonIcon: x,
10
- NeonLink: k
9
+ NeonIcon: k,
10
+ NeonLink: x
11
11
  },
12
12
  props: {
13
13
  /**
@@ -34,14 +34,20 @@ const M = i({
34
34
  * Emitted when the user toggles expansion of a section or item
35
35
  * @type {Array<NeonTreeMenuSectionModel>} the updated model with the section or item expanded/collapsed.
36
36
  */
37
- "update:modelValue"
37
+ "update:modelValue",
38
+ /**
39
+ * Emitted when the user clicks on a link to navigate to another page. This is useful to e.g. close a side-nav
40
+ * drawer containing the menu when there is a navigation event.
41
+ * @type {string} the link the user clicked on.
42
+ */
43
+ "click"
38
44
  ],
39
- setup(a, { emit: l }) {
45
+ setup(l, { emit: a }) {
40
46
  const p = y(), d = f(null), u = (n) => {
41
47
  const t = n.target;
42
48
  t.parentElement && t.parentElement.click();
43
49
  }, m = (n) => {
44
- const t = a.modelValue.map((e) => {
50
+ const t = l.modelValue.map((e) => {
45
51
  var o;
46
52
  return {
47
53
  ...e,
@@ -49,9 +55,9 @@ const M = i({
49
55
  expanded: e.key === n ? !e.expanded : e.expanded
50
56
  };
51
57
  });
52
- l("update:modelValue", t);
58
+ a("update:modelValue", t);
53
59
  }, c = (n) => {
54
- const t = a.modelValue.map((e) => {
60
+ const t = l.modelValue.map((e) => {
55
61
  var o;
56
62
  return {
57
63
  ...e,
@@ -61,7 +67,7 @@ const M = i({
61
67
  }))
62
68
  };
63
69
  });
64
- l("update:modelValue", t);
70
+ a("update:modelValue", t);
65
71
  };
66
72
  return s(
67
73
  () => p.path,
@@ -69,6 +75,7 @@ const M = i({
69
75
  { immediate: !0 }
70
76
  ), {
71
77
  url: d,
78
+ emit: a,
72
79
  click: u,
73
80
  onSectionClick: m,
74
81
  onItemClick: c
@@ -1 +1 @@
1
- {"version":3,"file":"NeonTreeMenu.es.js","sources":["../../../../src/components/navigation/tree-menu/NeonTreeMenu.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, ref, watch } from 'vue';\nimport type { NeonTreeMenuSectionModel } from '@/model/navigation/tree-menu/NeonTreeMenuSectionModel';\nimport NeonIcon from '../../presentation/icon/NeonIcon.vue';\nimport NeonLink from '../link/NeonLink.vue';\nimport { useRoute } from 'vue-router';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\n\n/**\n * Three level tree menu. This is useful for displaying a hierarchical navigation in NeonSideNav.The top level of the\n * menu is expandable on click but will not navigate to a page. The second level is links to pages and the third level\n * is the fragments on that page.\n */\nexport default defineComponent({\n name: 'NeonTreeMenu',\n components: {\n NeonIcon,\n NeonLink,\n },\n props: {\n /**\n * Id for the tree menu. This is used specifically to namespace the menu icons so that icon paths are unique. A\n * typical scenario is the tree menu is used in a side nav and also a drawer which means icon ids will be duplicated\n * unless they're namespaced.\n */\n id: { type: String, required: true },\n /**\n * The tree model defining the menu.\n */\n modelValue: { type: Array as () => Array<NeonTreeMenuSectionModel>, 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 * Expand all nodes in the tree, this is useful for providing filtering (e.g. the Neon showcase side navigation menu).\n */\n expandAll: { type: Boolean, default: false },\n },\n emits: [\n /**\n * Emitted when the user toggles expansion of a section or item\n * @type {Array<NeonTreeMenuSectionModel>} the updated model with the section or item expanded/collapsed.\n */\n 'update:modelValue',\n ],\n setup(props, { emit }) {\n const route = useRoute();\n const url = ref<string | null>(null);\n\n const click = ($event: KeyboardEvent) => {\n const target = $event.target as HTMLSpanElement;\n if (target.parentElement) {\n target.parentElement.click();\n }\n };\n\n const onSectionClick = (key: string) => {\n const newModel = props.modelValue.map((section) => {\n return {\n ...section,\n children: section.children?.map((child) => ({ ...child })),\n expanded: section.key === key ? !section.expanded : section.expanded,\n };\n });\n\n emit('update:modelValue', newModel);\n };\n\n const onItemClick = (key: string) => {\n const newModel = props.modelValue.map((section) => {\n return {\n ...section,\n children: section.children?.map((child) => {\n return {\n ...child,\n expanded: child.key === key ? !child.expanded : child.expanded,\n };\n }),\n };\n });\n\n emit('update:modelValue', newModel);\n };\n\n watch(\n () => route.path,\n (value) => (url.value = value),\n { immediate: true },\n );\n\n return {\n url,\n click,\n onSectionClick,\n onItemClick,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonLink","NeonFunctionalColor","props","emit","route","useRoute","url","ref","click","$event","target","onSectionClick","key","newModel","section","_a","child","onItemClick","watch","value"],"mappings":";;;;;AAYA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC;AAAA,IACA,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML,IAAI,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAI9B,YAAY,EAAE,MAAM,OAAgD,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAI9E,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,MAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,WAAW,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAE7C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAQC,EAAA,GACRC,IAAMC,EAAmB,IAAI,GAE7BC,IAAQ,CAACC,MAA0B;AACvC,YAAMC,IAASD,EAAO;AACtB,MAAIC,EAAO,iBACTA,EAAO,cAAc,MAAA;AAAA,IAEzB,GAEMC,IAAiB,CAACC,MAAgB;AACtC,YAAMC,IAAWX,EAAM,WAAW,IAAI,CAACY,MAAY;;AACjD,eAAO;AAAA,UACL,GAAGA;AAAA,UACH,WAAUC,IAAAD,EAAQ,aAAR,gBAAAC,EAAkB,IAAI,CAACC,OAAW,EAAE,GAAGA,EAAA;AAAA,UACjD,UAAUF,EAAQ,QAAQF,IAAM,CAACE,EAAQ,WAAWA,EAAQ;AAAA,QAAA;AAAA,MAEhE,CAAC;AAED,MAAAX,EAAK,qBAAqBU,CAAQ;AAAA,IACpC,GAEMI,IAAc,CAACL,MAAgB;AACnC,YAAMC,IAAWX,EAAM,WAAW,IAAI,CAACY,MAAY;;AACjD,eAAO;AAAA,UACL,GAAGA;AAAA,UACH,WAAUC,IAAAD,EAAQ,aAAR,gBAAAC,EAAkB,IAAI,CAACC,OACxB;AAAA,YACL,GAAGA;AAAA,YACH,UAAUA,EAAM,QAAQJ,IAAM,CAACI,EAAM,WAAWA,EAAM;AAAA,UAAA;AAAA,QAEzD;AAAA,MAEL,CAAC;AAED,MAAAb,EAAK,qBAAqBU,CAAQ;AAAA,IACpC;AAEA,WAAAK;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,CAACe,MAAWb,EAAI,QAAQa;AAAA,MACxB,EAAE,WAAW,GAAA;AAAA,IAAK,GAGb;AAAA,MACL,KAAAb;AAAA,MACA,OAAAE;AAAA,MACA,gBAAAG;AAAA,MACA,aAAAM;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}
1
+ {"version":3,"file":"NeonTreeMenu.es.js","sources":["../../../../src/components/navigation/tree-menu/NeonTreeMenu.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, ref, watch } from 'vue';\nimport type { NeonTreeMenuSectionModel } from '@/model/navigation/tree-menu/NeonTreeMenuSectionModel';\nimport NeonIcon from '../../presentation/icon/NeonIcon.vue';\nimport NeonLink from '../link/NeonLink.vue';\nimport { useRoute } from 'vue-router';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\n\n/**\n * Three level tree menu. This is useful for displaying a hierarchical navigation in NeonSideNav.The top level of the\n * menu is expandable on click but will not navigate to a page. The second level is links to pages and the third level\n * is the fragments on that page.\n */\nexport default defineComponent({\n name: 'NeonTreeMenu',\n components: {\n NeonIcon,\n NeonLink,\n },\n props: {\n /**\n * Id for the tree menu. This is used specifically to namespace the menu icons so that icon paths are unique. A\n * typical scenario is the tree menu is used in a side nav and also a drawer which means icon ids will be duplicated\n * unless they're namespaced.\n */\n id: { type: String, required: true },\n /**\n * The tree model defining the menu.\n */\n modelValue: { type: Array as () => Array<NeonTreeMenuSectionModel>, 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 * Expand all nodes in the tree, this is useful for providing filtering (e.g. the Neon showcase side navigation menu).\n */\n expandAll: { type: Boolean, default: false },\n },\n emits: [\n /**\n * Emitted when the user toggles expansion of a section or item\n * @type {Array<NeonTreeMenuSectionModel>} the updated model with the section or item expanded/collapsed.\n */\n 'update:modelValue',\n /**\n * Emitted when the user clicks on a link to navigate to another page. This is useful to e.g. close a side-nav\n * drawer containing the menu when there is a navigation event.\n * @type {string} the link the user clicked on.\n */\n 'click',\n ],\n setup(props, { emit }) {\n const route = useRoute();\n const url = ref<string | null>(null);\n\n const click = ($event: KeyboardEvent) => {\n const target = $event.target as HTMLSpanElement;\n if (target.parentElement) {\n target.parentElement.click();\n }\n };\n\n const onSectionClick = (key: string) => {\n const newModel = props.modelValue.map((section) => {\n return {\n ...section,\n children: section.children?.map((child) => ({ ...child })),\n expanded: section.key === key ? !section.expanded : section.expanded,\n };\n });\n\n emit('update:modelValue', newModel);\n };\n\n const onItemClick = (key: string) => {\n const newModel = props.modelValue.map((section) => {\n return {\n ...section,\n children: section.children?.map((child) => {\n return {\n ...child,\n expanded: child.key === key ? !child.expanded : child.expanded,\n };\n }),\n };\n });\n\n emit('update:modelValue', newModel);\n };\n\n watch(\n () => route.path,\n (value) => (url.value = value),\n { immediate: true },\n );\n\n return {\n url,\n emit,\n click,\n onSectionClick,\n onItemClick,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonLink","NeonFunctionalColor","props","emit","route","useRoute","url","ref","click","$event","target","onSectionClick","key","newModel","section","_a","child","onItemClick","watch","value"],"mappings":";;;;;AAYA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC;AAAA,IACA,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML,IAAI,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAI9B,YAAY,EAAE,MAAM,OAAgD,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAI9E,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,MAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,WAAW,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAE7C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAQC,EAAA,GACRC,IAAMC,EAAmB,IAAI,GAE7BC,IAAQ,CAACC,MAA0B;AACvC,YAAMC,IAASD,EAAO;AACtB,MAAIC,EAAO,iBACTA,EAAO,cAAc,MAAA;AAAA,IAEzB,GAEMC,IAAiB,CAACC,MAAgB;AACtC,YAAMC,IAAWX,EAAM,WAAW,IAAI,CAACY,MAAY;;AACjD,eAAO;AAAA,UACL,GAAGA;AAAA,UACH,WAAUC,IAAAD,EAAQ,aAAR,gBAAAC,EAAkB,IAAI,CAACC,OAAW,EAAE,GAAGA,EAAA;AAAA,UACjD,UAAUF,EAAQ,QAAQF,IAAM,CAACE,EAAQ,WAAWA,EAAQ;AAAA,QAAA;AAAA,MAEhE,CAAC;AAED,MAAAX,EAAK,qBAAqBU,CAAQ;AAAA,IACpC,GAEMI,IAAc,CAACL,MAAgB;AACnC,YAAMC,IAAWX,EAAM,WAAW,IAAI,CAACY,MAAY;;AACjD,eAAO;AAAA,UACL,GAAGA;AAAA,UACH,WAAUC,IAAAD,EAAQ,aAAR,gBAAAC,EAAkB,IAAI,CAACC,OACxB;AAAA,YACL,GAAGA;AAAA,YACH,UAAUA,EAAM,QAAQJ,IAAM,CAACI,EAAM,WAAWA,EAAM;AAAA,UAAA;AAAA,QAEzD;AAAA,MAEL,CAAC;AAED,MAAAb,EAAK,qBAAqBU,CAAQ;AAAA,IACpC;AAEA,WAAAK;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,CAACe,MAAWb,EAAI,QAAQa;AAAA,MACxB,EAAE,WAAW,GAAA;AAAA,IAAK,GAGb;AAAA,MACL,KAAAb;AAAA,MACA,MAAAH;AAAA,MACA,OAAAK;AAAA,MACA,gBAAAG;AAAA,MACA,aAAAM;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}
@@ -1,2 +1,2 @@
1
- "use strict";const d=require("./NeonTreeMenu.cjs.js"),e=require("vue"),m=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),c=["id"],k={class:"no-style"},_=["tabindex","onKeydown"],p={class:"no-style neon-tree-menu__items"},y=["onKeydown"];function h(t,r,f,B,C,w){const a=e.resolveComponent("neon-icon"),i=e.resolveComponent("neon-link");return t.modelValue?(e.openBlock(),e.createElementBlock("nav",{key:0,id:t.id,class:e.normalizeClass([[`neon-tree-menu--${t.color}`,{"neon-tree-menu--expand-all":t.expandAll}],"neon-tree-menu"])},[e.createElementVNode("ul",k,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.modelValue,n=>{var u;return e.openBlock(),e.createElementBlock("li",{key:n.key,class:e.normalizeClass([{"neon-tree-menu__section--expanded":(n.expanded||t.expandAll)&&n.children&&((u=n.children)==null?void 0:u.length)!==0,"neon-tree-menu__section--disabled":n.disabled},"neon-tree-menu__section"])},[e.createVNode(i,{href:n.href,"no-style":!n.href,target:n.external?"_blank":void 0,class:"neon-tree-menu__section-link","outline-style":"none",tabindex:"-1",onClick:l=>!n.disabled&&t.onSectionClick(n.key)},{default:e.withCtx(()=>[n.icon?(e.openBlock(),e.createBlock(a,{key:0,id:t.id+"_"+n.key,name:n.icon,class:"neon-tree-menu__section-link-icon"},null,8,["id","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",{tabindex:n.disabled?-1:0,class:"neon-tree-menu__section-link-label neon-tree-menu__section-link-label--outline-text",role:"link",onKeydown:[e.withKeys(e.withModifiers(l=>!n.disabled&&t.onSectionClick(n.key),["stop","prevent"]),["space"]),e.withKeys(l=>n.href&&t.click(l),["enter"]),e.withKeys(l=>n.href&&t.click(l),["space"])]},e.toDisplayString(n.label),41,_),n.children&&n.children.length!==0?(e.openBlock(),e.createBlock(a,{key:1,class:"neon-tree-menu__section-link-expansion-icon",name:"chevron-right"})):e.createCommentVNode("",!0)]),_:2},1032,["href","no-style","target","onClick"]),e.createElementVNode("ul",p,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.children,l=>(e.openBlock(),e.createElementBlock("li",{key:l.key,class:"neon-tree-menu__item"},[e.createVNode(i,{href:l.href,"no-style":!0,class:"neon-tree-menu__item-link","outline-style":"none",tabindex:"-1",onClick:o=>t.onItemClick(l.key)},{default:e.withCtx(()=>[e.createElementVNode("span",{class:"neon-tree-menu__item-link-label neon-tree-menu__item-link-label--outline-text",role:"link",tabindex:"0",onKeydown:[r[0]||(r[0]=e.withKeys(o=>t.click(o),["enter"])),e.withKeys(e.withModifiers(o=>t.onItemClick(l.key),["prevent"]),["space"])]},e.toDisplayString(l.label),41,y)]),_:2},1032,["href","onClick"]),l.subMenu&&l.subMenu.length>0?(e.openBlock(),e.createElementBlock("ul",{key:0,class:e.normalizeClass([{"neon-tree-menu__sub-menu--expanded":(t.expandAll||l.expanded)&&l.subMenu&&l.subMenu.length!==0},"no-style neon-tree-menu__sub-menu"])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.subMenu,o=>(e.openBlock(),e.createElementBlock("li",{key:o.href,class:"neon-tree-menu__sub-menu-item"},[e.createVNode(i,{href:o.href,class:"neon-link--no-style neon-tree-menu__sub-menu-item-link","no-style":"","outline-style":"none",tabindex:"-1"},{default:e.withCtx(()=>[e.createElementVNode("span",{class:"neon-tree-menu__sub-menu-item-link-label neon-tree-menu__sub-menu-item-link-label--outline-text",role:"link",tabindex:"0",onKeydown:[r[1]||(r[1]=e.withKeys(e.withModifiers(s=>t.click(s),["prevent"]),["space"])),r[2]||(r[2]=e.withKeys(e.withModifiers(s=>t.click(s),["prevent"]),["enter"]))]},e.toDisplayString(o.label),33)]),_:2},1032,["href"])]))),128))],2)):e.createCommentVNode("",!0)]))),128))])],2)}),128))])],10,c)):e.createCommentVNode("",!0)}const b=m(d,[["render",h]]);module.exports=b;
1
+ "use strict";const d=require("./NeonTreeMenu.cjs.js"),e=require("vue"),m=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),c=["id"],k={class:"no-style"},p=["tabindex","onKeydown"],_={class:"no-style neon-tree-menu__items"},h=["onKeydown"];function y(t,i,f,C,B,w){const a=e.resolveComponent("neon-icon"),s=e.resolveComponent("neon-link");return t.modelValue?(e.openBlock(),e.createElementBlock("nav",{key:0,id:t.id,class:e.normalizeClass([[`neon-tree-menu--${t.color}`,{"neon-tree-menu--expand-all":t.expandAll}],"neon-tree-menu"])},[e.createElementVNode("ul",k,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.modelValue,n=>{var u;return e.openBlock(),e.createElementBlock("li",{key:n.key,class:e.normalizeClass([{"neon-tree-menu__section--expanded":(n.expanded||t.expandAll)&&n.children&&((u=n.children)==null?void 0:u.length)!==0,"neon-tree-menu__section--disabled":n.disabled},"neon-tree-menu__section"])},[e.createVNode(s,{href:n.href,"no-style":!n.href,target:n.external?"_blank":void 0,class:"neon-tree-menu__section-link","outline-style":"none",tabindex:"-1",onClick:l=>{var o;return!n.disabled&&((((o=n.children)==null?void 0:o.length)||0)>0?t.onSectionClick(n.key):t.emit("click",n.href))}},{default:e.withCtx(()=>[n.icon?(e.openBlock(),e.createBlock(a,{key:0,id:t.id+"_"+n.key,name:n.icon,class:"neon-tree-menu__section-link-icon"},null,8,["id","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",{tabindex:n.disabled?-1:0,class:"neon-tree-menu__section-link-label neon-tree-menu__section-link-label--outline-text",role:"link",onKeydown:[e.withKeys(e.withModifiers(l=>!n.disabled&&t.onSectionClick(n.key),["stop","prevent"]),["space"]),e.withKeys(l=>n.href&&t.click(l),["enter"]),e.withKeys(l=>n.href&&t.click(l),["space"])]},e.toDisplayString(n.label),41,p),n.children&&n.children.length!==0?(e.openBlock(),e.createBlock(a,{key:1,class:"neon-tree-menu__section-link-expansion-icon",name:"chevron-right"})):e.createCommentVNode("",!0)]),_:2},1032,["href","no-style","target","onClick"]),e.createElementVNode("ul",_,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.children,l=>(e.openBlock(),e.createElementBlock("li",{key:l.key,class:"neon-tree-menu__item"},[e.createVNode(s,{href:l.href,"no-style":!0,class:"neon-tree-menu__item-link","outline-style":"none",tabindex:"-1",onClick:o=>{var r;return(((r=l.subMenu)==null?void 0:r.length)||0)>0?t.onItemClick(l.key):t.emit("click",l.href)}},{default:e.withCtx(()=>[e.createElementVNode("span",{class:"neon-tree-menu__item-link-label neon-tree-menu__item-link-label--outline-text",role:"link",tabindex:"0",onKeydown:[i[0]||(i[0]=e.withKeys(o=>t.click(o),["enter"])),e.withKeys(e.withModifiers(o=>t.onItemClick(l.key),["prevent"]),["space"])]},e.toDisplayString(l.label),41,h)]),_:2},1032,["href","onClick"]),l.subMenu&&l.subMenu.length>0?(e.openBlock(),e.createElementBlock("ul",{key:0,class:e.normalizeClass([{"neon-tree-menu__sub-menu--expanded":(t.expandAll||l.expanded)&&l.subMenu&&l.subMenu.length!==0},"no-style neon-tree-menu__sub-menu"])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.subMenu,o=>(e.openBlock(),e.createElementBlock("li",{key:o.href,class:"neon-tree-menu__sub-menu-item"},[e.createVNode(s,{href:o.href,class:"neon-link--no-style neon-tree-menu__sub-menu-item-link","no-style":"","outline-style":"none",tabindex:"-1",onClick:r=>t.emit("click",o.href)},{default:e.withCtx(()=>[e.createElementVNode("span",{class:"neon-tree-menu__sub-menu-item-link-label neon-tree-menu__sub-menu-item-link-label--outline-text",role:"link",tabindex:"0",onKeydown:[i[1]||(i[1]=e.withKeys(e.withModifiers(r=>t.click(r),["prevent"]),["space"])),i[2]||(i[2]=e.withKeys(e.withModifiers(r=>t.click(r),["prevent"]),["enter"]))]},e.toDisplayString(o.label),33)]),_:2},1032,["href","onClick"])]))),128))],2)):e.createCommentVNode("",!0)]))),128))])],2)}),128))])],10,c)):e.createCommentVNode("",!0)}const b=m(d,[["render",y]]);module.exports=b;
2
2
  //# sourceMappingURL=NeonTreeMenu.vue.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"NeonTreeMenu.vue.cjs.js","sources":["../../../../src/components/navigation/tree-menu/NeonTreeMenu.vue"],"sourcesContent":["<template>\n <nav\n v-if=\"modelValue\"\n :id=\"id\"\n :class=\"[`neon-tree-menu--${color}`, { 'neon-tree-menu--expand-all': expandAll }]\"\n class=\"neon-tree-menu\"\n >\n <ul class=\"no-style\">\n <li\n v-for=\"section in modelValue\"\n :key=\"section.key\"\n :class=\"{\n 'neon-tree-menu__section--expanded':\n (section.expanded || expandAll) && section.children && section.children?.length !== 0,\n 'neon-tree-menu__section--disabled': section.disabled,\n }\"\n class=\"neon-tree-menu__section\"\n >\n <neon-link\n :href=\"section.href\"\n :no-style=\"!section.href\"\n :target=\"section.external ? '_blank' : undefined\"\n class=\"neon-tree-menu__section-link\"\n outline-style=\"none\"\n tabindex=\"-1\"\n @click=\"!section.disabled && onSectionClick(section.key)\"\n >\n <neon-icon\n v-if=\"section.icon\"\n :id=\"id + '_' + section.key\"\n :name=\"section.icon\"\n class=\"neon-tree-menu__section-link-icon\"\n />\n <span\n :tabindex=\"section.disabled ? -1 : 0\"\n class=\"neon-tree-menu__section-link-label neon-tree-menu__section-link-label--outline-text\"\n role=\"link\"\n @keydown.space.stop.prevent=\"!section.disabled && onSectionClick(section.key)\"\n @keydown.enter=\"section.href && click($event)\"\n @keydown.space=\"section.href && click($event)\"\n >\n {{ section.label }}\n </span>\n <neon-icon\n v-if=\"section.children && section.children.length !== 0\"\n class=\"neon-tree-menu__section-link-expansion-icon\"\n name=\"chevron-right\"\n />\n </neon-link>\n <ul class=\"no-style neon-tree-menu__items\">\n <li v-for=\"link in section.children\" :key=\"link.key\" class=\"neon-tree-menu__item\">\n <neon-link\n :href=\"link.href\"\n :no-style=\"true\"\n class=\"neon-tree-menu__item-link\"\n outline-style=\"none\"\n tabindex=\"-1\"\n @click=\"onItemClick(link.key)\"\n >\n <span\n class=\"neon-tree-menu__item-link-label neon-tree-menu__item-link-label--outline-text\"\n role=\"link\"\n tabindex=\"0\"\n @keydown.enter=\"click($event)\"\n @keydown.space.prevent=\"onItemClick(link.key)\"\n >\n {{ link.label }}\n </span>\n </neon-link>\n <ul\n v-if=\"link.subMenu && link.subMenu.length > 0\"\n :class=\"{\n 'neon-tree-menu__sub-menu--expanded':\n (expandAll || link.expanded) && link.subMenu && link.subMenu.length !== 0,\n }\"\n class=\"no-style neon-tree-menu__sub-menu\"\n >\n <li v-for=\"subMenu in link.subMenu\" :key=\"subMenu.href\" class=\"neon-tree-menu__sub-menu-item\">\n <neon-link\n :href=\"subMenu.href\"\n class=\"neon-link--no-style neon-tree-menu__sub-menu-item-link\"\n no-style\n outline-style=\"none\"\n tabindex=\"-1\"\n >\n <span\n class=\"neon-tree-menu__sub-menu-item-link-label neon-tree-menu__sub-menu-item-link-label--outline-text\"\n role=\"link\"\n tabindex=\"0\"\n @keydown.space.prevent=\"click($event)\"\n @keydown.enter.prevent=\"click($event)\"\n >\n {{ subMenu.label }}\n </span>\n </neon-link>\n </li>\n </ul>\n </li>\n </ul>\n </li>\n </ul>\n </nav>\n</template>\n\n<script lang=\"ts\" src=\"./NeonTreeMenu.ts\"></script>\n"],"names":["_hoisted_2","_hoisted_4","_ctx","_createElementBlock","_normalizeClass","_createElementVNode","_Fragment","_renderList","section","_a","_createVNode","_component_neon_link","$event","_createBlock","_component_neon_icon","_withKeys","_withModifiers","_toDisplayString","_hoisted_3","_openBlock","link","_cache","_hoisted_5","subMenu"],"mappings":"gJAOQA,EAAA,CAAA,MAAM,UAAU,6BA0CZC,EAAA,CAAA,MAAM,gCAAgC,2HA/CxCC,EAAA,0BADRC,EAAAA,mBAoGM,MAAA,OAlGH,GAAID,EAAA,GACJ,MAAKE,EAAAA,eAAA,CAAA,CAAA,mBAAsBF,EAAA,KAAK,GAAA,CAAA,6BAAoCA,EAAA,SAAS,GACxE,gBAAgB,CAAA,IAEtBG,EAAAA,mBA6FK,KA7FLL,EA6FK,kBA5FHG,EAAAA,mBA2FKG,EAAAA,SAAA,KAAAC,EAAAA,WA1FeL,EAAA,WAAXM,GAAO,4BADhBL,EAAAA,mBA2FK,KAAA,CAzFF,IAAKK,EAAQ,IACb,MAAKJ,EAAAA,eAAA,CAAA,sCAAgEI,EAAQ,UAAYN,EAAA,YAAcM,EAAQ,YAAYC,EAAAD,EAAQ,WAAR,YAAAC,EAAkB,UAAM,EAAuD,oCAAAD,EAAQ,UAK7M,yBAAyB,CAAA,IAE/BE,EAAAA,YA8BYC,EAAA,CA7BT,KAAMH,EAAQ,KACd,WAAQ,CAAGA,EAAQ,KACnB,OAAQA,EAAQ,kBAAsB,OACvC,MAAM,+BACN,gBAAc,OACd,SAAS,KACR,QAAKI,GAAA,CAAGJ,EAAQ,UAAYN,EAAA,eAAeM,EAAQ,GAAG,sBAEvD,IAKE,CAJMA,EAAQ,oBADhBK,EAAAA,YAKEC,EAAA,OAHC,GAAIZ,EAAA,GAAE,IAASM,EAAQ,IACvB,KAAMA,EAAQ,KACf,MAAM,wFAERH,EAAAA,mBASO,OAAA,CARJ,SAAUG,EAAQ,SAAQ,GAAA,EAC3B,MAAM,sFACN,KAAK,OACJ,UAAO,CAAsBO,EAAAA,SAAAC,EAAAA,cAAAJ,GAAA,CAAAJ,EAAQ,UAAYN,iBAAeM,EAAQ,GAAG,EAAA,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,EAC5DO,WAAAH,GAAAJ,EAAQ,MAAQN,EAAA,MAAMU,CAAM,EAAA,CAAA,OAAA,CAAA,EAC5BG,WAAAH,GAAAJ,EAAQ,MAAQN,EAAA,MAAMU,CAAM,EAAA,CAAA,OAAA,CAAA,EAEzC,EAAAK,EAAAA,gBAAAT,EAAQ,KAAK,EAAA,GAAAU,CAAA,EAGVV,EAAQ,UAAYA,EAAQ,SAAS,SAAM,iBADnDK,EAAAA,YAIEC,EAAA,OAFA,MAAM,8CACN,KAAK,mGAGTT,EAAAA,mBAiDK,KAjDLJ,EAiDK,EAhDHkB,YAAA,EAAA,EAAAhB,EAAAA,mBA+CKG,EAAAA,SAAA,KAAAC,EAAAA,WA/CcC,EAAQ,SAAhBY,kBAAXjB,EAAAA,mBA+CK,KAAA,CA/CiC,IAAKiB,EAAK,IAAK,MAAM,yBACzDV,EAAAA,YAiBYC,EAAA,CAhBT,KAAMS,EAAK,KACX,WAAU,GACX,MAAM,4BACN,gBAAc,OACd,SAAS,KACR,QAAKR,GAAEV,EAAA,YAAYkB,EAAK,GAAG,sBAE5B,IAQO,CARPf,EAAAA,mBAQO,OAAA,CAPL,MAAM,gFACN,KAAK,OACL,SAAS,IACR,UAAO,CAAQgB,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAN,EAAAA,SAAAH,GAAAV,EAAA,MAAMU,CAAM,EAAA,CAAA,OAAA,CAAA,iCACJV,EAAA,YAAYkB,EAAK,GAAG,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,EAEzC,EAAAH,EAAAA,gBAAAG,EAAK,KAAK,EAAA,GAAAE,CAAA,kCAITF,EAAK,SAAWA,EAAK,QAAQ,OAAM,iBAD3CjB,EAAAA,mBA2BK,KAAA,OAzBF,MAAKC,EAAAA,eAAA,CAAA,uCAA6EF,EAAA,WAAakB,EAAK,WAAaA,EAAK,SAAWA,EAAK,QAAQ,SAAM,GAI/I,mCAAmC,CAAA,KAEzCD,YAAA,EAAA,EAAAhB,EAAAA,mBAkBKG,EAAAA,SAAA,KAAAC,EAAAA,WAlBiBa,EAAK,QAAhBG,kBAAXpB,EAAAA,mBAkBK,KAAA,CAlBgC,IAAKoB,EAAQ,KAAM,MAAM,kCAC5Db,EAAAA,YAgBYC,EAAA,CAfT,KAAMY,EAAQ,KACf,MAAM,yDACN,WAAA,GACA,gBAAc,OACd,SAAS,yBAET,IAQO,CARPlB,EAAAA,mBAQO,OAAA,CAPL,MAAM,kGACN,KAAK,OACL,SAAS,IACR,UAAO,CAAgBgB,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAN,EAAAA,SAAAC,EAAAA,cAAAJ,GAAAV,EAAA,MAAMU,CAAM,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,GACZS,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAN,EAAAA,SAAAC,EAAAA,cAAAJ,GAAAV,EAAA,MAAMU,CAAM,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,GAEjC,EAAAK,kBAAAM,EAAQ,KAAK,EAAA,EAAA"}
1
+ {"version":3,"file":"NeonTreeMenu.vue.cjs.js","sources":["../../../../src/components/navigation/tree-menu/NeonTreeMenu.vue"],"sourcesContent":["<template>\n <nav\n v-if=\"modelValue\"\n :id=\"id\"\n :class=\"[`neon-tree-menu--${color}`, { 'neon-tree-menu--expand-all': expandAll }]\"\n class=\"neon-tree-menu\"\n >\n <ul class=\"no-style\">\n <li\n v-for=\"section in modelValue\"\n :key=\"section.key\"\n :class=\"{\n 'neon-tree-menu__section--expanded':\n (section.expanded || expandAll) && section.children && section.children?.length !== 0,\n 'neon-tree-menu__section--disabled': section.disabled,\n }\"\n class=\"neon-tree-menu__section\"\n >\n <neon-link\n :href=\"section.href\"\n :no-style=\"!section.href\"\n :target=\"section.external ? '_blank' : undefined\"\n class=\"neon-tree-menu__section-link\"\n outline-style=\"none\"\n tabindex=\"-1\"\n @click=\"\n !section.disabled &&\n ((section.children?.length || 0) > 0 ? onSectionClick(section.key) : emit('click', section.href))\n \"\n >\n <neon-icon\n v-if=\"section.icon\"\n :id=\"id + '_' + section.key\"\n :name=\"section.icon\"\n class=\"neon-tree-menu__section-link-icon\"\n />\n <span\n :tabindex=\"section.disabled ? -1 : 0\"\n class=\"neon-tree-menu__section-link-label neon-tree-menu__section-link-label--outline-text\"\n role=\"link\"\n @keydown.space.stop.prevent=\"!section.disabled && onSectionClick(section.key)\"\n @keydown.enter=\"section.href && click($event)\"\n @keydown.space=\"section.href && click($event)\"\n >\n {{ section.label }}\n </span>\n <neon-icon\n v-if=\"section.children && section.children.length !== 0\"\n class=\"neon-tree-menu__section-link-expansion-icon\"\n name=\"chevron-right\"\n />\n </neon-link>\n <ul class=\"no-style neon-tree-menu__items\">\n <li v-for=\"link in section.children\" :key=\"link.key\" class=\"neon-tree-menu__item\">\n <neon-link\n :href=\"link.href\"\n :no-style=\"true\"\n class=\"neon-tree-menu__item-link\"\n outline-style=\"none\"\n tabindex=\"-1\"\n @click=\"(link.subMenu?.length || 0) > 0 ? onItemClick(link.key) : emit('click', link.href)\"\n >\n <span\n class=\"neon-tree-menu__item-link-label neon-tree-menu__item-link-label--outline-text\"\n role=\"link\"\n tabindex=\"0\"\n @keydown.enter=\"click($event)\"\n @keydown.space.prevent=\"onItemClick(link.key)\"\n >\n {{ link.label }}\n </span>\n </neon-link>\n <ul\n v-if=\"link.subMenu && link.subMenu.length > 0\"\n :class=\"{\n 'neon-tree-menu__sub-menu--expanded':\n (expandAll || link.expanded) && link.subMenu && link.subMenu.length !== 0,\n }\"\n class=\"no-style neon-tree-menu__sub-menu\"\n >\n <li v-for=\"subMenu in link.subMenu\" :key=\"subMenu.href\" class=\"neon-tree-menu__sub-menu-item\">\n <neon-link\n :href=\"subMenu.href\"\n class=\"neon-link--no-style neon-tree-menu__sub-menu-item-link\"\n no-style\n outline-style=\"none\"\n tabindex=\"-1\"\n @click=\"emit('click', subMenu.href)\"\n >\n <span\n class=\"neon-tree-menu__sub-menu-item-link-label neon-tree-menu__sub-menu-item-link-label--outline-text\"\n role=\"link\"\n tabindex=\"0\"\n @keydown.space.prevent=\"click($event)\"\n @keydown.enter.prevent=\"click($event)\"\n >\n {{ subMenu.label }}\n </span>\n </neon-link>\n </li>\n </ul>\n </li>\n </ul>\n </li>\n </ul>\n </nav>\n</template>\n\n<script lang=\"ts\" src=\"./NeonTreeMenu.ts\"></script>\n"],"names":["_hoisted_2","_hoisted_4","_ctx","_createElementBlock","_normalizeClass","_createElementVNode","_Fragment","_renderList","section","_a","_createVNode","_component_neon_link","$event","_createBlock","_component_neon_icon","_withKeys","_withModifiers","_toDisplayString","_hoisted_3","_openBlock","link","_cache","_hoisted_5","subMenu"],"mappings":"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"}
@@ -1,122 +1,129 @@
1
1
  import $ from "./NeonTreeMenu.es.js";
2
- import { resolveComponent as v, openBlock as t, createElementBlock as o, normalizeClass as k, createElementVNode as a, Fragment as c, renderList as p, createVNode as y, withCtx as b, createBlock as g, createCommentVNode as u, withKeys as i, withModifiers as d, toDisplayString as h } from "vue";
2
+ import { resolveComponent as v, openBlock as o, createElementBlock as r, normalizeClass as _, createElementVNode as u, Fragment as c, renderList as p, createVNode as h, withCtx as y, createBlock as g, createCommentVNode as d, withKeys as s, withModifiers as m, toDisplayString as b } from "vue";
3
3
  import w from "../../../_virtual/_plugin-vue_export-helper.es.js";
4
- const x = ["id"], K = { class: "no-style" }, M = ["tabindex", "onKeydown"], V = { class: "no-style neon-tree-menu__items" }, N = ["onKeydown"];
5
- function A(n, s, B, S, E, I) {
6
- const f = v("neon-icon"), m = v("neon-link");
7
- return n.modelValue ? (t(), o("nav", {
4
+ const K = ["id"], M = { class: "no-style" }, V = ["tabindex", "onKeydown"], x = { class: "no-style neon-tree-menu__items" }, N = ["onKeydown"];
5
+ function A(n, a, B, S, E, I) {
6
+ const f = v("neon-icon"), k = v("neon-link");
7
+ return n.modelValue ? (o(), r("nav", {
8
8
  key: 0,
9
9
  id: n.id,
10
- class: k([[`neon-tree-menu--${n.color}`, { "neon-tree-menu--expand-all": n.expandAll }], "neon-tree-menu"])
10
+ class: _([[`neon-tree-menu--${n.color}`, { "neon-tree-menu--expand-all": n.expandAll }], "neon-tree-menu"])
11
11
  }, [
12
- a("ul", K, [
13
- (t(!0), o(c, null, p(n.modelValue, (e) => {
12
+ u("ul", M, [
13
+ (o(!0), r(c, null, p(n.modelValue, (e) => {
14
14
  var C;
15
- return t(), o("li", {
15
+ return o(), r("li", {
16
16
  key: e.key,
17
- class: k([{
17
+ class: _([{
18
18
  "neon-tree-menu__section--expanded": (e.expanded || n.expandAll) && e.children && ((C = e.children) == null ? void 0 : C.length) !== 0,
19
19
  "neon-tree-menu__section--disabled": e.disabled
20
20
  }, "neon-tree-menu__section"])
21
21
  }, [
22
- y(m, {
22
+ h(k, {
23
23
  href: e.href,
24
24
  "no-style": !e.href,
25
25
  target: e.external ? "_blank" : void 0,
26
26
  class: "neon-tree-menu__section-link",
27
27
  "outline-style": "none",
28
28
  tabindex: "-1",
29
- onClick: (l) => !e.disabled && n.onSectionClick(e.key)
29
+ onClick: (l) => {
30
+ var t;
31
+ return !e.disabled && ((((t = e.children) == null ? void 0 : t.length) || 0) > 0 ? n.onSectionClick(e.key) : n.emit("click", e.href));
32
+ }
30
33
  }, {
31
- default: b(() => [
32
- e.icon ? (t(), g(f, {
34
+ default: y(() => [
35
+ e.icon ? (o(), g(f, {
33
36
  key: 0,
34
37
  id: n.id + "_" + e.key,
35
38
  name: e.icon,
36
39
  class: "neon-tree-menu__section-link-icon"
37
- }, null, 8, ["id", "name"])) : u("", !0),
38
- a("span", {
40
+ }, null, 8, ["id", "name"])) : d("", !0),
41
+ u("span", {
39
42
  tabindex: e.disabled ? -1 : 0,
40
43
  class: "neon-tree-menu__section-link-label neon-tree-menu__section-link-label--outline-text",
41
44
  role: "link",
42
45
  onKeydown: [
43
- i(d((l) => !e.disabled && n.onSectionClick(e.key), ["stop", "prevent"]), ["space"]),
44
- i((l) => e.href && n.click(l), ["enter"]),
45
- i((l) => e.href && n.click(l), ["space"])
46
+ s(m((l) => !e.disabled && n.onSectionClick(e.key), ["stop", "prevent"]), ["space"]),
47
+ s((l) => e.href && n.click(l), ["enter"]),
48
+ s((l) => e.href && n.click(l), ["space"])
46
49
  ]
47
- }, h(e.label), 41, M),
48
- e.children && e.children.length !== 0 ? (t(), g(f, {
50
+ }, b(e.label), 41, V),
51
+ e.children && e.children.length !== 0 ? (o(), g(f, {
49
52
  key: 1,
50
53
  class: "neon-tree-menu__section-link-expansion-icon",
51
54
  name: "chevron-right"
52
- })) : u("", !0)
55
+ })) : d("", !0)
53
56
  ]),
54
57
  _: 2
55
58
  }, 1032, ["href", "no-style", "target", "onClick"]),
56
- a("ul", V, [
57
- (t(!0), o(c, null, p(e.children, (l) => (t(), o("li", {
59
+ u("ul", x, [
60
+ (o(!0), r(c, null, p(e.children, (l) => (o(), r("li", {
58
61
  key: l.key,
59
62
  class: "neon-tree-menu__item"
60
63
  }, [
61
- y(m, {
64
+ h(k, {
62
65
  href: l.href,
63
66
  "no-style": !0,
64
67
  class: "neon-tree-menu__item-link",
65
68
  "outline-style": "none",
66
69
  tabindex: "-1",
67
- onClick: (r) => n.onItemClick(l.key)
70
+ onClick: (t) => {
71
+ var i;
72
+ return (((i = l.subMenu) == null ? void 0 : i.length) || 0) > 0 ? n.onItemClick(l.key) : n.emit("click", l.href);
73
+ }
68
74
  }, {
69
- default: b(() => [
70
- a("span", {
75
+ default: y(() => [
76
+ u("span", {
71
77
  class: "neon-tree-menu__item-link-label neon-tree-menu__item-link-label--outline-text",
72
78
  role: "link",
73
79
  tabindex: "0",
74
80
  onKeydown: [
75
- s[0] || (s[0] = i((r) => n.click(r), ["enter"])),
76
- i(d((r) => n.onItemClick(l.key), ["prevent"]), ["space"])
81
+ a[0] || (a[0] = s((t) => n.click(t), ["enter"])),
82
+ s(m((t) => n.onItemClick(l.key), ["prevent"]), ["space"])
77
83
  ]
78
- }, h(l.label), 41, N)
84
+ }, b(l.label), 41, N)
79
85
  ]),
80
86
  _: 2
81
87
  }, 1032, ["href", "onClick"]),
82
- l.subMenu && l.subMenu.length > 0 ? (t(), o("ul", {
88
+ l.subMenu && l.subMenu.length > 0 ? (o(), r("ul", {
83
89
  key: 0,
84
- class: k([{
90
+ class: _([{
85
91
  "neon-tree-menu__sub-menu--expanded": (n.expandAll || l.expanded) && l.subMenu && l.subMenu.length !== 0
86
92
  }, "no-style neon-tree-menu__sub-menu"])
87
93
  }, [
88
- (t(!0), o(c, null, p(l.subMenu, (r) => (t(), o("li", {
89
- key: r.href,
94
+ (o(!0), r(c, null, p(l.subMenu, (t) => (o(), r("li", {
95
+ key: t.href,
90
96
  class: "neon-tree-menu__sub-menu-item"
91
97
  }, [
92
- y(m, {
93
- href: r.href,
98
+ h(k, {
99
+ href: t.href,
94
100
  class: "neon-link--no-style neon-tree-menu__sub-menu-item-link",
95
101
  "no-style": "",
96
102
  "outline-style": "none",
97
- tabindex: "-1"
103
+ tabindex: "-1",
104
+ onClick: (i) => n.emit("click", t.href)
98
105
  }, {
99
- default: b(() => [
100
- a("span", {
106
+ default: y(() => [
107
+ u("span", {
101
108
  class: "neon-tree-menu__sub-menu-item-link-label neon-tree-menu__sub-menu-item-link-label--outline-text",
102
109
  role: "link",
103
110
  tabindex: "0",
104
111
  onKeydown: [
105
- s[1] || (s[1] = i(d((_) => n.click(_), ["prevent"]), ["space"])),
106
- s[2] || (s[2] = i(d((_) => n.click(_), ["prevent"]), ["enter"]))
112
+ a[1] || (a[1] = s(m((i) => n.click(i), ["prevent"]), ["space"])),
113
+ a[2] || (a[2] = s(m((i) => n.click(i), ["prevent"]), ["enter"]))
107
114
  ]
108
- }, h(r.label), 33)
115
+ }, b(t.label), 33)
109
116
  ]),
110
117
  _: 2
111
- }, 1032, ["href"])
118
+ }, 1032, ["href", "onClick"])
112
119
  ]))), 128))
113
- ], 2)) : u("", !0)
120
+ ], 2)) : d("", !0)
114
121
  ]))), 128))
115
122
  ])
116
123
  ], 2);
117
124
  }), 128))
118
125
  ])
119
- ], 10, x)) : u("", !0);
126
+ ], 10, K)) : d("", !0);
120
127
  }
121
128
  const L = /* @__PURE__ */ w($, [["render", A]]);
122
129
  export {
@@ -1 +1 @@
1
- {"version":3,"file":"NeonTreeMenu.vue.es.js","sources":["../../../../src/components/navigation/tree-menu/NeonTreeMenu.vue"],"sourcesContent":["<template>\n <nav\n v-if=\"modelValue\"\n :id=\"id\"\n :class=\"[`neon-tree-menu--${color}`, { 'neon-tree-menu--expand-all': expandAll }]\"\n class=\"neon-tree-menu\"\n >\n <ul class=\"no-style\">\n <li\n v-for=\"section in modelValue\"\n :key=\"section.key\"\n :class=\"{\n 'neon-tree-menu__section--expanded':\n (section.expanded || expandAll) && section.children && section.children?.length !== 0,\n 'neon-tree-menu__section--disabled': section.disabled,\n }\"\n class=\"neon-tree-menu__section\"\n >\n <neon-link\n :href=\"section.href\"\n :no-style=\"!section.href\"\n :target=\"section.external ? '_blank' : undefined\"\n class=\"neon-tree-menu__section-link\"\n outline-style=\"none\"\n tabindex=\"-1\"\n @click=\"!section.disabled && onSectionClick(section.key)\"\n >\n <neon-icon\n v-if=\"section.icon\"\n :id=\"id + '_' + section.key\"\n :name=\"section.icon\"\n class=\"neon-tree-menu__section-link-icon\"\n />\n <span\n :tabindex=\"section.disabled ? -1 : 0\"\n class=\"neon-tree-menu__section-link-label neon-tree-menu__section-link-label--outline-text\"\n role=\"link\"\n @keydown.space.stop.prevent=\"!section.disabled && onSectionClick(section.key)\"\n @keydown.enter=\"section.href && click($event)\"\n @keydown.space=\"section.href && click($event)\"\n >\n {{ section.label }}\n </span>\n <neon-icon\n v-if=\"section.children && section.children.length !== 0\"\n class=\"neon-tree-menu__section-link-expansion-icon\"\n name=\"chevron-right\"\n />\n </neon-link>\n <ul class=\"no-style neon-tree-menu__items\">\n <li v-for=\"link in section.children\" :key=\"link.key\" class=\"neon-tree-menu__item\">\n <neon-link\n :href=\"link.href\"\n :no-style=\"true\"\n class=\"neon-tree-menu__item-link\"\n outline-style=\"none\"\n tabindex=\"-1\"\n @click=\"onItemClick(link.key)\"\n >\n <span\n class=\"neon-tree-menu__item-link-label neon-tree-menu__item-link-label--outline-text\"\n role=\"link\"\n tabindex=\"0\"\n @keydown.enter=\"click($event)\"\n @keydown.space.prevent=\"onItemClick(link.key)\"\n >\n {{ link.label }}\n </span>\n </neon-link>\n <ul\n v-if=\"link.subMenu && link.subMenu.length > 0\"\n :class=\"{\n 'neon-tree-menu__sub-menu--expanded':\n (expandAll || link.expanded) && link.subMenu && link.subMenu.length !== 0,\n }\"\n class=\"no-style neon-tree-menu__sub-menu\"\n >\n <li v-for=\"subMenu in link.subMenu\" :key=\"subMenu.href\" class=\"neon-tree-menu__sub-menu-item\">\n <neon-link\n :href=\"subMenu.href\"\n class=\"neon-link--no-style neon-tree-menu__sub-menu-item-link\"\n no-style\n outline-style=\"none\"\n tabindex=\"-1\"\n >\n <span\n class=\"neon-tree-menu__sub-menu-item-link-label neon-tree-menu__sub-menu-item-link-label--outline-text\"\n role=\"link\"\n tabindex=\"0\"\n @keydown.space.prevent=\"click($event)\"\n @keydown.enter.prevent=\"click($event)\"\n >\n {{ subMenu.label }}\n </span>\n </neon-link>\n </li>\n </ul>\n </li>\n </ul>\n </li>\n </ul>\n </nav>\n</template>\n\n<script lang=\"ts\" src=\"./NeonTreeMenu.ts\"></script>\n"],"names":["_hoisted_2","_hoisted_4","_ctx","_createElementBlock","_normalizeClass","_createElementVNode","_Fragment","_renderList","section","_a","_createVNode","_component_neon_link","$event","_createBlock","_component_neon_icon","_withKeys","_withModifiers","_toDisplayString","_hoisted_3","_openBlock","link","_cache","_hoisted_5","subMenu"],"mappings":"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"}
1
+ {"version":3,"file":"NeonTreeMenu.vue.es.js","sources":["../../../../src/components/navigation/tree-menu/NeonTreeMenu.vue"],"sourcesContent":["<template>\n <nav\n v-if=\"modelValue\"\n :id=\"id\"\n :class=\"[`neon-tree-menu--${color}`, { 'neon-tree-menu--expand-all': expandAll }]\"\n class=\"neon-tree-menu\"\n >\n <ul class=\"no-style\">\n <li\n v-for=\"section in modelValue\"\n :key=\"section.key\"\n :class=\"{\n 'neon-tree-menu__section--expanded':\n (section.expanded || expandAll) && section.children && section.children?.length !== 0,\n 'neon-tree-menu__section--disabled': section.disabled,\n }\"\n class=\"neon-tree-menu__section\"\n >\n <neon-link\n :href=\"section.href\"\n :no-style=\"!section.href\"\n :target=\"section.external ? '_blank' : undefined\"\n class=\"neon-tree-menu__section-link\"\n outline-style=\"none\"\n tabindex=\"-1\"\n @click=\"\n !section.disabled &&\n ((section.children?.length || 0) > 0 ? onSectionClick(section.key) : emit('click', section.href))\n \"\n >\n <neon-icon\n v-if=\"section.icon\"\n :id=\"id + '_' + section.key\"\n :name=\"section.icon\"\n class=\"neon-tree-menu__section-link-icon\"\n />\n <span\n :tabindex=\"section.disabled ? -1 : 0\"\n class=\"neon-tree-menu__section-link-label neon-tree-menu__section-link-label--outline-text\"\n role=\"link\"\n @keydown.space.stop.prevent=\"!section.disabled && onSectionClick(section.key)\"\n @keydown.enter=\"section.href && click($event)\"\n @keydown.space=\"section.href && click($event)\"\n >\n {{ section.label }}\n </span>\n <neon-icon\n v-if=\"section.children && section.children.length !== 0\"\n class=\"neon-tree-menu__section-link-expansion-icon\"\n name=\"chevron-right\"\n />\n </neon-link>\n <ul class=\"no-style neon-tree-menu__items\">\n <li v-for=\"link in section.children\" :key=\"link.key\" class=\"neon-tree-menu__item\">\n <neon-link\n :href=\"link.href\"\n :no-style=\"true\"\n class=\"neon-tree-menu__item-link\"\n outline-style=\"none\"\n tabindex=\"-1\"\n @click=\"(link.subMenu?.length || 0) > 0 ? onItemClick(link.key) : emit('click', link.href)\"\n >\n <span\n class=\"neon-tree-menu__item-link-label neon-tree-menu__item-link-label--outline-text\"\n role=\"link\"\n tabindex=\"0\"\n @keydown.enter=\"click($event)\"\n @keydown.space.prevent=\"onItemClick(link.key)\"\n >\n {{ link.label }}\n </span>\n </neon-link>\n <ul\n v-if=\"link.subMenu && link.subMenu.length > 0\"\n :class=\"{\n 'neon-tree-menu__sub-menu--expanded':\n (expandAll || link.expanded) && link.subMenu && link.subMenu.length !== 0,\n }\"\n class=\"no-style neon-tree-menu__sub-menu\"\n >\n <li v-for=\"subMenu in link.subMenu\" :key=\"subMenu.href\" class=\"neon-tree-menu__sub-menu-item\">\n <neon-link\n :href=\"subMenu.href\"\n class=\"neon-link--no-style neon-tree-menu__sub-menu-item-link\"\n no-style\n outline-style=\"none\"\n tabindex=\"-1\"\n @click=\"emit('click', subMenu.href)\"\n >\n <span\n class=\"neon-tree-menu__sub-menu-item-link-label neon-tree-menu__sub-menu-item-link-label--outline-text\"\n role=\"link\"\n tabindex=\"0\"\n @keydown.space.prevent=\"click($event)\"\n @keydown.enter.prevent=\"click($event)\"\n >\n {{ subMenu.label }}\n </span>\n </neon-link>\n </li>\n </ul>\n </li>\n </ul>\n </li>\n </ul>\n </nav>\n</template>\n\n<script lang=\"ts\" src=\"./NeonTreeMenu.ts\"></script>\n"],"names":["_hoisted_2","_hoisted_4","_ctx","_createElementBlock","_normalizeClass","_createElementVNode","_Fragment","_renderList","section","_a","_createVNode","_component_neon_link","$event","_createBlock","_component_neon_icon","_withKeys","_withModifiers","_toDisplayString","_hoisted_3","_openBlock","link","_cache","_hoisted_5","subMenu"],"mappings":";;;kBAOQA,IAAA,EAAA,OAAM,WAAU,kCA6CZC,IAAA,EAAA,OAAM,iCAAgC;;;SAlDxCC,EAAA,mBADRC,EAwGM,OAAA;AAAA;IAtGH,IAAID,EAAA;AAAA,IACJ,OAAKE,EAAA,CAAA,CAAA,mBAAsBF,EAAA,KAAK,IAAA,EAAA,8BAAoCA,EAAA,UAAS,IACxE,gBAAgB,CAAA;AAAA;IAEtBG,EAiGK,MAjGLL,GAiGK;AAAA,cAhGHG,EA+FKG,GAAA,MAAAC,EA9FeL,EAAA,YAAU,CAArBM,MAAO;;oBADhBL,EA+FK,MAAA;AAAA,UA7FF,KAAKK,EAAQ;AAAA,UACb,OAAKJ,EAAA,CAAA;AAAA,kDAAgEI,EAAQ,YAAYN,EAAA,cAAcM,EAAQ,cAAYC,IAAAD,EAAQ,aAAR,gBAAAC,EAAkB,YAAM;AAAA,YAAuD,qCAAAD,EAAQ;AAAA,aAK7M,yBAAyB,CAAA;AAAA;UAE/BE,EAiCYC,GAAA;AAAA,YAhCT,MAAMH,EAAQ;AAAA,YACd,YAAQ,CAAGA,EAAQ;AAAA,YACnB,QAAQA,EAAQ,sBAAsB;AAAA,YACvC,OAAM;AAAA,YACN,iBAAc;AAAA,YACd,UAAS;AAAA,YACR,SAAK,CAAAI,MAAA;;AAAgB,sBAAAJ,EAAQ,gBAA4BC,IAAAD,EAAQ,aAAR,gBAAAC,EAAkB,oBAAmBP,EAAA,eAAeM,EAAQ,GAAG,IAAIN,EAAA,KAAI,SAAUM,EAAQ,IAAI;AAAA;AAAA;uBAKvJ,MAKE;AAAA,cAJMA,EAAQ,aADhBK,EAKEC,GAAA;AAAA;gBAHC,IAAIZ,EAAA,KAAE,MAASM,EAAQ;AAAA,gBACvB,MAAMA,EAAQ;AAAA,gBACf,OAAM;AAAA;cAERH,EASO,QAAA;AAAA,gBARJ,UAAUG,EAAQ,WAAQ,KAAA;AAAA,gBAC3B,OAAM;AAAA,gBACN,MAAK;AAAA,gBACJ,WAAO;AAAA,kBAAsBO,EAAAC,EAAA,CAAAJ,MAAA,CAAAJ,EAAQ,YAAYN,iBAAeM,EAAQ,GAAG,GAAA,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA,kBAC5DO,EAAA,CAAAH,MAAAJ,EAAQ,QAAQN,EAAA,MAAMU,CAAM,GAAA,CAAA,OAAA,CAAA;AAAA,kBAC5BG,EAAA,CAAAH,MAAAJ,EAAQ,QAAQN,EAAA,MAAMU,CAAM,GAAA,CAAA,OAAA,CAAA;AAAA;cAEzC,GAAAK,EAAAT,EAAQ,KAAK,GAAA,IAAAU,CAAA;AAAA,cAGVV,EAAQ,YAAYA,EAAQ,SAAS,WAAM,UADnDK,EAIEC,GAAA;AAAA;gBAFA,OAAM;AAAA,gBACN,MAAK;AAAA;;;;UAGTT,EAkDK,MAlDLJ,GAkDK;AAAA,aAjDHkB,EAAA,EAAA,GAAAhB,EAgDKG,GAAA,MAAAC,EAhDcC,EAAQ,WAAhBY,YAAXjB,EAgDK,MAAA;AAAA,cAhDiC,KAAKiB,EAAK;AAAA,cAAK,OAAM;AAAA;cACzDV,EAiBYC,GAAA;AAAA,gBAhBT,MAAMS,EAAK;AAAA,gBACX,YAAU;AAAA,gBACX,OAAM;AAAA,gBACN,iBAAc;AAAA,gBACd,UAAS;AAAA,gBACR;;AAAQ,4BAAAX,IAAAW,EAAK,YAAL,gBAAAX,EAAc,WAAM,KAAA,IAAaP,EAAA,YAAYkB,EAAK,GAAG,IAAIlB,OAAI,SAAUkB,EAAK,IAAI;AAAA;AAAA;2BAEzF,MAQO;AAAA,kBARPf,EAQO,QAAA;AAAA,oBAPL,OAAM;AAAA,oBACN,MAAK;AAAA,oBACL,UAAS;AAAA,oBACR,WAAO;AAAA,sBAAQgB,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAN,EAAA,CAAAH,MAAAV,EAAA,MAAMU,CAAM,GAAA,CAAA,OAAA,CAAA;AAAA,iCACJV,EAAA,YAAYkB,EAAK,GAAG,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;kBAEzC,GAAAH,EAAAG,EAAK,KAAK,GAAA,IAAAE,CAAA;AAAA;;;cAITF,EAAK,WAAWA,EAAK,QAAQ,SAAM,UAD3CjB,EA4BK,MAAA;AAAA;gBA1BF,OAAKC,EAAA,CAAA;AAAA,yDAA6EF,EAAA,aAAakB,EAAK,aAAaA,EAAK,WAAWA,EAAK,QAAQ,WAAM;AAAA,mBAI/I,mCAAmC,CAAA;AAAA;iBAEzCD,EAAA,EAAA,GAAAhB,EAmBKG,GAAA,MAAAC,EAnBiBa,EAAK,UAAhBG,YAAXpB,EAmBK,MAAA;AAAA,kBAnBgC,KAAKoB,EAAQ;AAAA,kBAAM,OAAM;AAAA;kBAC5Db,EAiBYC,GAAA;AAAA,oBAhBT,MAAMY,EAAQ;AAAA,oBACf,OAAM;AAAA,oBACN,YAAA;AAAA,oBACA,iBAAc;AAAA,oBACd,UAAS;AAAA,oBACR,SAAK,CAAAX,MAAEV,EAAA,KAAI,SAAUqB,EAAQ,IAAI;AAAA;+BAElC,MAQO;AAAA,sBARPlB,EAQO,QAAA;AAAA,wBAPL,OAAM;AAAA,wBACN,MAAK;AAAA,wBACL,UAAS;AAAA,wBACR,WAAO;AAAA,0BAAgBgB,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAN,EAAAC,EAAA,CAAAJ,MAAAV,EAAA,MAAMU,CAAM,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA,0BACZS,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAN,EAAAC,EAAA,CAAAJ,MAAAV,EAAA,MAAMU,CAAM,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;sBAEjC,GAAAK,EAAAM,EAAQ,KAAK,GAAA,EAAA;AAAA;;;;;;;;;;;;;"}
@@ -1,2 +1,2 @@
1
- "use strict";const t=require("../../../model/common/color/NeonFunctionalColor.cjs.js"),i=require("../../../model/common/position/NeonHorizontalPosition.cjs.js"),l=require("../../../model/common/size/NeonSize.cjs.js"),a=require("../../../model/common/position/NeonVerticalPosition.cjs.js"),r=require("../expansion-indicator/NeonExpansionIndicator.vue.cjs.js"),u=require("../icon/NeonIcon.vue.cjs.js"),d=require("vue"),s=d.defineComponent({name:"NeonExpansionPanel",components:{NeonExpansionIndicator:r,NeonIcon:u},props:{modelValue:{type:Boolean,required:!0},label:{type:String},id:{type:String,default:null},icon:{type:String,default:null},position:{type:String,default:a.NeonVerticalPosition.Top},indicatorPosition:{type:String,default:i.NeonHorizontalPosition.Right},size:{type:String,default:l.NeonSize.Medium},color:{type:String,default:t.NeonFunctionalColor.Neutral},fullWidth:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(e,{emit:o,slots:n}){return!e.label&&!n.header&&console.error("A label or a header slot most be provided to the NeonExpansionPanel component"),{toggleExpanded:()=>{e.disabled||o("update:modelValue",!e.modelValue)}}}});module.exports=s;
1
+ "use strict";const t=require("../../../model/common/color/NeonFunctionalColor.cjs.js"),i=require("../../../model/common/position/NeonHorizontalPosition.cjs.js"),l=require("../../../model/common/size/NeonSize.cjs.js"),a=require("../../../model/common/position/NeonVerticalPosition.cjs.js"),r=require("../expansion-indicator/NeonExpansionIndicator.vue.cjs.js"),d=require("../icon/NeonIcon.vue.cjs.js"),u=require("vue"),s=u.defineComponent({name:"NeonExpansionPanel",components:{NeonExpansionIndicator:r,NeonIcon:d},props:{modelValue:{type:Boolean,required:!0},label:{type:String},id:{type:String,default:null},icon:{type:String,default:null},position:{type:String,default:a.NeonVerticalPosition.Top},indicatorPosition:{type:String,default:i.NeonHorizontalPosition.Right},size:{type:String,default:l.NeonSize.Medium},color:{type:String,default:t.NeonFunctionalColor.Neutral},fullWidth:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},indent:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(e,{emit:o,slots:n}){return!e.label&&!n.header&&console.error("A label or a header slot most be provided to the NeonExpansionPanel component"),{toggleExpanded:()=>{e.disabled||o("update:modelValue",!e.modelValue)}}}});module.exports=s;
2
2
  //# sourceMappingURL=NeonExpansionPanel.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"NeonExpansionPanel.cjs.js","sources":["../../../../src/components/presentation/expansion-panel/NeonExpansionPanel.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport { NeonHorizontalPosition } from '@/model/common/position/NeonHorizontalPosition';\nimport { NeonSize } from '@/model/common/size/NeonSize';\nimport { NeonVerticalPosition } from '@/model/common/position/NeonVerticalPosition';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { defineComponent } from 'vue';\n\n/**\n * <p>Expansion panels are used to show and hide content that may be less important or too large to display on screen\n * all the time. They can also be used to expand lists of items, e.g. <em>Show more</em>. The expansion panel consists\n * of a button which, when clicked, toggles the open/closed state of the expansion panel and a slot for the content to\n * display on expansion.</p>\n */\nexport default defineComponent({\n name: 'NeonExpansionPanel',\n components: {\n NeonExpansionIndicator,\n NeonIcon,\n },\n props: {\n /**\n * A boolean indicating whether the expansion panel is expanded.\n */\n modelValue: { type: Boolean, required: true },\n /**\n * The label of the expansion button\n */\n label: { type: String },\n /**\n * Provide an id to support aria-controls. The id will be placed on the expansion panel content wrapper and the\n * aria-controls on the header (triggering the expansion).\n */\n id: { type: String, default: null },\n /**\n * An icon to display to the left of the label\n */\n icon: { type: String, default: null },\n /**\n * The position of the expansion button. This can be located above the content to expand or below it.\n */\n position: { type: String as () => NeonVerticalPosition, default: NeonVerticalPosition.Top },\n /**\n * The position of the expansion button. This can be located above the content to expand or below it.\n */\n indicatorPosition: { type: String as () => NeonHorizontalPosition, default: NeonHorizontalPosition.Right },\n /**\n * The size of the expansion panel button.\n */\n size: { type: String as () => NeonSize, default: NeonSize.Medium },\n /**\n * The color of the expansion panel button.\n */\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Neutral },\n /**\n * Whether the label and expansion indicator should be flush with the width of the container.\n */\n fullWidth: { type: Boolean, default: false },\n /**\n * The disabled state of the expansion panel\n */\n disabled: { type: Boolean, default: false },\n },\n emits: [\n /**\n * Emitted when the expansion panel button is clicked.\n * @type {boolean} The new open state of the expansion panel.\n */\n 'update:modelValue',\n ],\n setup(props, { emit, slots }) {\n // not sure how to test this, open to idea. Tried seeing if the console.warn was called but doesn't seem to trigger\n if (!props.label && !slots.header) {\n console.error(`A label or a header slot most be provided to the NeonExpansionPanel component`);\n }\n\n const toggleExpanded = () => {\n if (!props.disabled) {\n emit('update:modelValue', !props.modelValue);\n }\n };\n\n return {\n toggleExpanded,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonExpansionIndicator","NeonIcon","NeonVerticalPosition","NeonHorizontalPosition","NeonSize","NeonFunctionalColor","props","emit","slots"],"mappings":"iaAcAA,EAAeC,kBAAgB,CAC7B,KAAM,qBACN,WAAY,CACV,uBAAAC,EACA,SAAAC,CAAA,EAEF,MAAO,CAIL,WAAY,CAAE,KAAM,QAAS,SAAU,EAAA,EAIvC,MAAO,CAAE,KAAM,MAAA,EAKf,GAAI,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI7B,KAAM,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI/B,SAAU,CAAE,KAAM,OAAsC,QAASC,EAAAA,qBAAqB,GAAA,EAItF,kBAAmB,CAAE,KAAM,OAAwC,QAASC,EAAAA,uBAAuB,KAAA,EAInG,KAAM,CAAE,KAAM,OAA0B,QAASC,EAAAA,SAAS,MAAA,EAI1D,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,OAAA,EAIjF,UAAW,CAAE,KAAM,QAAS,QAAS,EAAA,EAIrC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE5C,MAAO,CAKL,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,EAAM,MAAAC,GAAS,CAE5B,MAAI,CAACF,EAAM,OAAS,CAACE,EAAM,QACzB,QAAQ,MAAM,+EAA+E,EASxF,CACL,eAPqB,IAAM,CACtBF,EAAM,UACTC,EAAK,oBAAqB,CAACD,EAAM,UAAU,CAE/C,CAGE,CAEJ,CACF,CAAC"}
1
+ {"version":3,"file":"NeonExpansionPanel.cjs.js","sources":["../../../../src/components/presentation/expansion-panel/NeonExpansionPanel.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport { NeonHorizontalPosition } from '@/model/common/position/NeonHorizontalPosition';\nimport { NeonSize } from '@/model/common/size/NeonSize';\nimport { NeonVerticalPosition } from '@/model/common/position/NeonVerticalPosition';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { defineComponent } from 'vue';\n\n/**\n * <p>Expansion panels are used to show and hide content that may be less important or too large to display on screen\n * all the time. They can also be used to expand lists of items, e.g. <em>Show more</em>. The expansion panel consists\n * of a button which, when clicked, toggles the open/closed state of the expansion panel and a slot for the content to\n * display on expansion.</p>\n */\nexport default defineComponent({\n name: 'NeonExpansionPanel',\n components: {\n NeonExpansionIndicator,\n NeonIcon,\n },\n props: {\n /**\n * A boolean indicating whether the expansion panel is expanded.\n */\n modelValue: { type: Boolean, required: true },\n /**\n * The label of the expansion button\n */\n label: { type: String },\n /**\n * Provide an id to support aria-controls. The id will be placed on the expansion panel content wrapper and the\n * aria-controls on the header (triggering the expansion).\n */\n id: { type: String, default: null },\n /**\n * An icon to display to the left of the label\n */\n icon: { type: String, default: null },\n /**\n * The position of the expansion button. This can be located above the content to expand or below it.\n */\n position: { type: String as () => NeonVerticalPosition, default: NeonVerticalPosition.Top },\n /**\n * The position of the expansion button. This can be located above the content to expand or below it.\n */\n indicatorPosition: { type: String as () => NeonHorizontalPosition, default: NeonHorizontalPosition.Right },\n /**\n * The size of the expansion panel button.\n */\n size: { type: String as () => NeonSize, default: NeonSize.Medium },\n /**\n * The color of the expansion panel button.\n */\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Neutral },\n /**\n * Whether the label and expansion indicator should be flush with the width of the container.\n */\n fullWidth: { type: Boolean, default: false },\n /**\n * The disabled state of the expansion panel\n */\n disabled: { type: Boolean, default: false },\n /**\n * Indent the expansion panel content\n */\n indent: { type: Boolean, default: false },\n },\n emits: [\n /**\n * Emitted when the expansion panel button is clicked.\n * @type {boolean} The new open state of the expansion panel.\n */\n 'update:modelValue',\n ],\n setup(props, { emit, slots }) {\n // not sure how to test this, open to idea. Tried seeing if the console.warn was called but doesn't seem to trigger\n if (!props.label && !slots.header) {\n console.error(`A label or a header slot most be provided to the NeonExpansionPanel component`);\n }\n\n const toggleExpanded = () => {\n if (!props.disabled) {\n emit('update:modelValue', !props.modelValue);\n }\n };\n\n return {\n toggleExpanded,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonExpansionIndicator","NeonIcon","NeonVerticalPosition","NeonHorizontalPosition","NeonSize","NeonFunctionalColor","props","emit","slots"],"mappings":"iaAcAA,EAAeC,kBAAgB,CAC7B,KAAM,qBACN,WAAY,CACV,uBAAAC,EACA,SAAAC,CAAA,EAEF,MAAO,CAIL,WAAY,CAAE,KAAM,QAAS,SAAU,EAAA,EAIvC,MAAO,CAAE,KAAM,MAAA,EAKf,GAAI,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI7B,KAAM,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI/B,SAAU,CAAE,KAAM,OAAsC,QAASC,EAAAA,qBAAqB,GAAA,EAItF,kBAAmB,CAAE,KAAM,OAAwC,QAASC,EAAAA,uBAAuB,KAAA,EAInG,KAAM,CAAE,KAAM,OAA0B,QAASC,EAAAA,SAAS,MAAA,EAI1D,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,OAAA,EAIjF,UAAW,CAAE,KAAM,QAAS,QAAS,EAAA,EAIrC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,OAAQ,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE1C,MAAO,CAKL,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,EAAM,MAAAC,GAAS,CAE5B,MAAI,CAACF,EAAM,OAAS,CAACE,EAAM,QACzB,QAAQ,MAAM,+EAA+E,EASxF,CACL,eAPqB,IAAM,CACtBF,EAAM,UACTC,EAAK,oBAAqB,CAACD,EAAM,UAAU,CAE/C,CAGE,CAEJ,CACF,CAAC"}
@@ -52,7 +52,11 @@ const S = p({
52
52
  /**
53
53
  * The disabled state of the expansion panel
54
54
  */
55
- disabled: { type: Boolean, default: !1 }
55
+ disabled: { type: Boolean, default: !1 },
56
+ /**
57
+ * Indent the expansion panel content
58
+ */
59
+ indent: { type: Boolean, default: !1 }
56
60
  },
57
61
  emits: [
58
62
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"NeonExpansionPanel.es.js","sources":["../../../../src/components/presentation/expansion-panel/NeonExpansionPanel.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport { NeonHorizontalPosition } from '@/model/common/position/NeonHorizontalPosition';\nimport { NeonSize } from '@/model/common/size/NeonSize';\nimport { NeonVerticalPosition } from '@/model/common/position/NeonVerticalPosition';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { defineComponent } from 'vue';\n\n/**\n * <p>Expansion panels are used to show and hide content that may be less important or too large to display on screen\n * all the time. They can also be used to expand lists of items, e.g. <em>Show more</em>. The expansion panel consists\n * of a button which, when clicked, toggles the open/closed state of the expansion panel and a slot for the content to\n * display on expansion.</p>\n */\nexport default defineComponent({\n name: 'NeonExpansionPanel',\n components: {\n NeonExpansionIndicator,\n NeonIcon,\n },\n props: {\n /**\n * A boolean indicating whether the expansion panel is expanded.\n */\n modelValue: { type: Boolean, required: true },\n /**\n * The label of the expansion button\n */\n label: { type: String },\n /**\n * Provide an id to support aria-controls. The id will be placed on the expansion panel content wrapper and the\n * aria-controls on the header (triggering the expansion).\n */\n id: { type: String, default: null },\n /**\n * An icon to display to the left of the label\n */\n icon: { type: String, default: null },\n /**\n * The position of the expansion button. This can be located above the content to expand or below it.\n */\n position: { type: String as () => NeonVerticalPosition, default: NeonVerticalPosition.Top },\n /**\n * The position of the expansion button. This can be located above the content to expand or below it.\n */\n indicatorPosition: { type: String as () => NeonHorizontalPosition, default: NeonHorizontalPosition.Right },\n /**\n * The size of the expansion panel button.\n */\n size: { type: String as () => NeonSize, default: NeonSize.Medium },\n /**\n * The color of the expansion panel button.\n */\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Neutral },\n /**\n * Whether the label and expansion indicator should be flush with the width of the container.\n */\n fullWidth: { type: Boolean, default: false },\n /**\n * The disabled state of the expansion panel\n */\n disabled: { type: Boolean, default: false },\n },\n emits: [\n /**\n * Emitted when the expansion panel button is clicked.\n * @type {boolean} The new open state of the expansion panel.\n */\n 'update:modelValue',\n ],\n setup(props, { emit, slots }) {\n // not sure how to test this, open to idea. Tried seeing if the console.warn was called but doesn't seem to trigger\n if (!props.label && !slots.header) {\n console.error(`A label or a header slot most be provided to the NeonExpansionPanel component`);\n }\n\n const toggleExpanded = () => {\n if (!props.disabled) {\n emit('update:modelValue', !props.modelValue);\n }\n };\n\n return {\n toggleExpanded,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonExpansionIndicator","NeonIcon","NeonVerticalPosition","NeonHorizontalPosition","NeonSize","NeonFunctionalColor","props","emit","slots"],"mappings":";;;;;;;AAcA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,wBAAAC;AAAA,IACA,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,YAAY,EAAE,MAAM,SAAS,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIvC,OAAO,EAAE,MAAM,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKf,IAAI,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI7B,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI/B,UAAU,EAAE,MAAM,QAAsC,SAASC,EAAqB,IAAA;AAAA;AAAA;AAAA;AAAA,IAItF,mBAAmB,EAAE,MAAM,QAAwC,SAASC,EAAuB,MAAA;AAAA;AAAA;AAAA;AAAA,IAInG,MAAM,EAAE,MAAM,QAA0B,SAASC,EAAS,OAAA;AAAA;AAAA;AAAA;AAAA,IAI1D,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,QAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,WAAW,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIrC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAE5C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,GAAM,OAAAC,KAAS;AAE5B,WAAI,CAACF,EAAM,SAAS,CAACE,EAAM,UACzB,QAAQ,MAAM,+EAA+E,GASxF;AAAA,MACL,gBAPqB,MAAM;AAC3B,QAAKF,EAAM,YACTC,EAAK,qBAAqB,CAACD,EAAM,UAAU;AAAA,MAE/C;AAAA,IAGE;AAAA,EAEJ;AACF,CAAC;"}
1
+ {"version":3,"file":"NeonExpansionPanel.es.js","sources":["../../../../src/components/presentation/expansion-panel/NeonExpansionPanel.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport { NeonHorizontalPosition } from '@/model/common/position/NeonHorizontalPosition';\nimport { NeonSize } from '@/model/common/size/NeonSize';\nimport { NeonVerticalPosition } from '@/model/common/position/NeonVerticalPosition';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { defineComponent } from 'vue';\n\n/**\n * <p>Expansion panels are used to show and hide content that may be less important or too large to display on screen\n * all the time. They can also be used to expand lists of items, e.g. <em>Show more</em>. The expansion panel consists\n * of a button which, when clicked, toggles the open/closed state of the expansion panel and a slot for the content to\n * display on expansion.</p>\n */\nexport default defineComponent({\n name: 'NeonExpansionPanel',\n components: {\n NeonExpansionIndicator,\n NeonIcon,\n },\n props: {\n /**\n * A boolean indicating whether the expansion panel is expanded.\n */\n modelValue: { type: Boolean, required: true },\n /**\n * The label of the expansion button\n */\n label: { type: String },\n /**\n * Provide an id to support aria-controls. The id will be placed on the expansion panel content wrapper and the\n * aria-controls on the header (triggering the expansion).\n */\n id: { type: String, default: null },\n /**\n * An icon to display to the left of the label\n */\n icon: { type: String, default: null },\n /**\n * The position of the expansion button. This can be located above the content to expand or below it.\n */\n position: { type: String as () => NeonVerticalPosition, default: NeonVerticalPosition.Top },\n /**\n * The position of the expansion button. This can be located above the content to expand or below it.\n */\n indicatorPosition: { type: String as () => NeonHorizontalPosition, default: NeonHorizontalPosition.Right },\n /**\n * The size of the expansion panel button.\n */\n size: { type: String as () => NeonSize, default: NeonSize.Medium },\n /**\n * The color of the expansion panel button.\n */\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Neutral },\n /**\n * Whether the label and expansion indicator should be flush with the width of the container.\n */\n fullWidth: { type: Boolean, default: false },\n /**\n * The disabled state of the expansion panel\n */\n disabled: { type: Boolean, default: false },\n /**\n * Indent the expansion panel content\n */\n indent: { type: Boolean, default: false },\n },\n emits: [\n /**\n * Emitted when the expansion panel button is clicked.\n * @type {boolean} The new open state of the expansion panel.\n */\n 'update:modelValue',\n ],\n setup(props, { emit, slots }) {\n // not sure how to test this, open to idea. Tried seeing if the console.warn was called but doesn't seem to trigger\n if (!props.label && !slots.header) {\n console.error(`A label or a header slot most be provided to the NeonExpansionPanel component`);\n }\n\n const toggleExpanded = () => {\n if (!props.disabled) {\n emit('update:modelValue', !props.modelValue);\n }\n };\n\n return {\n toggleExpanded,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonExpansionIndicator","NeonIcon","NeonVerticalPosition","NeonHorizontalPosition","NeonSize","NeonFunctionalColor","props","emit","slots"],"mappings":";;;;;;;AAcA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,wBAAAC;AAAA,IACA,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,YAAY,EAAE,MAAM,SAAS,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIvC,OAAO,EAAE,MAAM,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKf,IAAI,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI7B,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI/B,UAAU,EAAE,MAAM,QAAsC,SAASC,EAAqB,IAAA;AAAA;AAAA;AAAA;AAAA,IAItF,mBAAmB,EAAE,MAAM,QAAwC,SAASC,EAAuB,MAAA;AAAA;AAAA;AAAA;AAAA,IAInG,MAAM,EAAE,MAAM,QAA0B,SAASC,EAAS,OAAA;AAAA;AAAA;AAAA;AAAA,IAI1D,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,QAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,WAAW,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIrC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,QAAQ,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAE1C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,GAAM,OAAAC,KAAS;AAE5B,WAAI,CAACF,EAAM,SAAS,CAACE,EAAM,UACzB,QAAQ,MAAM,+EAA+E,GASxF;AAAA,MACL,gBAPqB,MAAM;AAC3B,QAAKF,EAAM,YACTC,EAAK,qBAAqB,CAACD,EAAM,UAAU;AAAA,MAE/C;AAAA,IAGE;AAAA,EAEJ;AACF,CAAC;"}
@@ -1,2 +1,2 @@
1
- "use strict";const d=require("./NeonExpansionPanel.cjs.js"),n=require("vue"),s=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r=["aria-disabled","aria-expanded"],p=["aria-controls"],t={class:"neon-expansion-panel__label"},u=["id"];function m(e,o,b,g,E,V){const l=n.resolveComponent("neon-icon"),i=n.resolveComponent("neon-expansion-indicator");return n.openBlock(),n.createElementBlock("div",{"aria-disabled":e.disabled,"aria-expanded":e.modelValue,class:n.normalizeClass([[{"neon-expansion-panel--expanded":e.modelValue,"neon-expansion-panel--full-width":e.fullWidth,"neon-expansion-panel--disabled":e.disabled},`neon-expansion-panel--${e.position}`,`neon-expansion-panel--${e.size}`,`neon-expansion-panel--${e.color}`],"neon-expansion-panel"])},[n.createElementVNode("div",{"aria-controls":e.id,class:n.normalizeClass([[`neon-expansion-panel__header--${e.indicatorPosition}`],"neon-expansion-panel__header"]),tabindex:"-1",onClick:o[2]||(o[2]=(...a)=>e.toggleExpanded&&e.toggleExpanded(...a))},[n.createElementVNode("div",{class:"neon-expansion-panel__label-container neon-expansion-panel__label-container--outline-text",tabindex:"0",onKeydown:[o[0]||(o[0]=n.withKeys((...a)=>e.toggleExpanded&&e.toggleExpanded(...a),["enter"])),o[1]||(o[1]=n.withKeys(n.withModifiers((...a)=>e.toggleExpanded&&e.toggleExpanded(...a),["prevent"]),["space"]))]},[n.renderSlot(e.$slots,"header",{expanded:e.modelValue},()=>[e.icon?(n.openBlock(),n.createBlock(l,{key:0,color:e.color,disabled:e.disabled,name:e.icon},null,8,["color","disabled","name"])):n.createCommentVNode("",!0),n.createElementVNode("span",t,n.toDisplayString(e.label),1)])],32),n.createVNode(i,{color:e.color,disabled:e.disabled,expanded:e.modelValue},null,8,["color","disabled","expanded"])],10,p),n.withDirectives(n.createElementVNode("div",{id:e.id,class:"neon-expansion-panel__content"},[n.renderSlot(e.$slots,"default")],8,u),[[n.vShow,e.modelValue]])],10,r)}const c=s(d,[["render",m]]);module.exports=c;
1
+ "use strict";const d=require("./NeonExpansionPanel.cjs.js"),n=require("vue"),s=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),p=["aria-disabled","aria-expanded"],r=["aria-controls"],t={class:"neon-expansion-panel__label"},u=["id"];function m(e,o,c,g,E,V){const l=n.resolveComponent("neon-icon"),i=n.resolveComponent("neon-expansion-indicator");return n.openBlock(),n.createElementBlock("div",{"aria-disabled":e.disabled,"aria-expanded":e.modelValue,class:n.normalizeClass([[{"neon-expansion-panel--expanded":e.modelValue,"neon-expansion-panel--full-width":e.fullWidth,"neon-expansion-panel--indented":e.indent,"neon-expansion-panel--disabled":e.disabled},`neon-expansion-panel--${e.position}`,`neon-expansion-panel--${e.size}`,`neon-expansion-panel--${e.color}`],"neon-expansion-panel"])},[n.createElementVNode("div",{"aria-controls":e.id,class:n.normalizeClass([[`neon-expansion-panel__header--${e.indicatorPosition}`],"neon-expansion-panel__header"]),tabindex:"-1",onClick:o[2]||(o[2]=(...a)=>e.toggleExpanded&&e.toggleExpanded(...a))},[n.createElementVNode("div",{class:"neon-expansion-panel__label-container neon-expansion-panel__label-container--outline-text",tabindex:"0",onKeydown:[o[0]||(o[0]=n.withKeys((...a)=>e.toggleExpanded&&e.toggleExpanded(...a),["enter"])),o[1]||(o[1]=n.withKeys(n.withModifiers((...a)=>e.toggleExpanded&&e.toggleExpanded(...a),["prevent"]),["space"]))]},[n.renderSlot(e.$slots,"header",{expanded:e.modelValue},()=>[e.icon?(n.openBlock(),n.createBlock(l,{key:0,color:e.color,disabled:e.disabled,name:e.icon},null,8,["color","disabled","name"])):n.createCommentVNode("",!0),n.createElementVNode("span",t,n.toDisplayString(e.label),1)])],32),n.createVNode(i,{color:e.color,disabled:e.disabled,expanded:e.modelValue},null,8,["color","disabled","expanded"])],10,r),n.withDirectives(n.createElementVNode("div",{id:e.id,class:"neon-expansion-panel__content"},[n.renderSlot(e.$slots,"default")],8,u),[[n.vShow,e.modelValue]])],10,p)}const b=s(d,[["render",m]]);module.exports=b;
2
2
  //# sourceMappingURL=NeonExpansionPanel.vue.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"NeonExpansionPanel.vue.cjs.js","sources":["../../../../src/components/presentation/expansion-panel/NeonExpansionPanel.vue"],"sourcesContent":["<template>\n <div\n :aria-disabled=\"disabled\"\n :aria-expanded=\"modelValue\"\n :class=\"[\n {\n 'neon-expansion-panel--expanded': modelValue,\n 'neon-expansion-panel--full-width': fullWidth,\n 'neon-expansion-panel--disabled': disabled,\n },\n `neon-expansion-panel--${position}`,\n `neon-expansion-panel--${size}`,\n `neon-expansion-panel--${color}`,\n ]\"\n class=\"neon-expansion-panel\"\n >\n <div\n :aria-controls=\"id\"\n :class=\"[`neon-expansion-panel__header--${indicatorPosition}`]\"\n class=\"neon-expansion-panel__header\"\n tabindex=\"-1\"\n @click=\"toggleExpanded\"\n >\n <div\n class=\"neon-expansion-panel__label-container neon-expansion-panel__label-container--outline-text\"\n tabindex=\"0\"\n @keydown.enter=\"toggleExpanded\"\n @keydown.space.prevent=\"toggleExpanded\"\n >\n <slot :expanded=\"modelValue\" name=\"header\">\n <neon-icon v-if=\"icon\" :color=\"color\" :disabled=\"disabled\" :name=\"icon\" />\n <span class=\"neon-expansion-panel__label\">{{ label }}</span>\n </slot>\n </div>\n <neon-expansion-indicator :color=\"color\" :disabled=\"disabled\" :expanded=\"modelValue\" />\n </div>\n <div v-show=\"modelValue\" :id=\"id\" class=\"neon-expansion-panel__content\">\n <!-- @slot The expansion panel contents -->\n <slot></slot>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonExpansionPanel.ts\" />\n"],"names":["_hoisted_3","_createElementBlock","_ctx","_normalizeClass","_createElementVNode","args","_renderSlot","_createBlock","_component_neon_icon","_toDisplayString","_createVNode","_component_neon_expansion_indicator"],"mappings":"qMA+BgBA,EAAA,CAAA,MAAM,6BAA6B,iJA9BjDC,EAAAA,mBAuCM,MAAA,CAtCH,gBAAeC,EAAA,SACf,gBAAeA,EAAA,WACf,MAAKC,EAAAA,eAAA,CAAA,mCAAsDD,EAAA,8CAAwDA,EAAA,2CAAqDA,EAAA,mCAAkDA,EAAA,QAAQ,4BAAmCA,EAAA,IAAI,4BAAmCA,EAAA,KAAK,IAU5S,sBAAsB,CAAA,IAE5BE,EAAAA,mBAmBM,MAAA,CAlBH,gBAAeF,EAAA,GACf,MAAKC,EAAAA,eAAA,CAAA,CAAA,iCAAoCD,EAAA,iBAAiB,EAAA,EACrD,8BAA8B,CAAA,EACpC,SAAS,KACR,4BAAOA,EAAA,gBAAAA,EAAA,eAAA,GAAAG,CAAA,KAERD,EAAAA,mBAUM,MAAA,CATJ,MAAM,4FACN,SAAS,IACR,UAAO,gCAAQF,EAAA,gBAAAA,EAAA,eAAA,GAAAG,CAAA,EAAc,CAAA,OAAA,CAAA,kDACNH,EAAA,gBAAAA,EAAA,eAAA,GAAAG,CAAA,EAAc,CAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,MAEtCC,aAGOJ,EAAA,OAAA,SAAA,CAHA,SAAUA,EAAA,UAAU,EAA3B,IAGO,CAFYA,EAAA,oBAAjBK,EAAAA,YAA0EC,EAAA,OAAlD,MAAON,EAAA,MAAQ,SAAUA,EAAA,SAAW,KAAMA,EAAA,uEAClEE,EAAAA,mBAA4D,OAA5DJ,EAA4DS,EAAAA,gBAAfP,EAAA,KAAK,EAAA,CAAA,SAGtDQ,EAAAA,YAAuFC,EAAA,CAA5D,MAAOT,EAAA,MAAQ,SAAUA,EAAA,SAAW,SAAUA,EAAA,4EAE3EE,EAAAA,mBAGM,MAAA,CAHoB,GAAIF,EAAA,GAAI,MAAM,kCAEtCI,aAAaJ,EAAA,OAAA,SAAA,kBAFFA,EAAA,UAAU"}
1
+ {"version":3,"file":"NeonExpansionPanel.vue.cjs.js","sources":["../../../../src/components/presentation/expansion-panel/NeonExpansionPanel.vue"],"sourcesContent":["<template>\n <div\n :aria-disabled=\"disabled\"\n :aria-expanded=\"modelValue\"\n :class=\"[\n {\n 'neon-expansion-panel--expanded': modelValue,\n 'neon-expansion-panel--full-width': fullWidth,\n 'neon-expansion-panel--indented': indent,\n 'neon-expansion-panel--disabled': disabled,\n },\n `neon-expansion-panel--${position}`,\n `neon-expansion-panel--${size}`,\n `neon-expansion-panel--${color}`,\n ]\"\n class=\"neon-expansion-panel\"\n >\n <div\n :aria-controls=\"id\"\n :class=\"[`neon-expansion-panel__header--${indicatorPosition}`]\"\n class=\"neon-expansion-panel__header\"\n tabindex=\"-1\"\n @click=\"toggleExpanded\"\n >\n <div\n class=\"neon-expansion-panel__label-container neon-expansion-panel__label-container--outline-text\"\n tabindex=\"0\"\n @keydown.enter=\"toggleExpanded\"\n @keydown.space.prevent=\"toggleExpanded\"\n >\n <slot :expanded=\"modelValue\" name=\"header\">\n <neon-icon v-if=\"icon\" :color=\"color\" :disabled=\"disabled\" :name=\"icon\" />\n <span class=\"neon-expansion-panel__label\">{{ label }}</span>\n </slot>\n </div>\n <neon-expansion-indicator :color=\"color\" :disabled=\"disabled\" :expanded=\"modelValue\" />\n </div>\n <div v-show=\"modelValue\" :id=\"id\" class=\"neon-expansion-panel__content\">\n <!-- @slot The expansion panel contents -->\n <slot></slot>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonExpansionPanel.ts\" />\n"],"names":["_hoisted_3","_createElementBlock","_ctx","_normalizeClass","_createElementVNode","args","_renderSlot","_createBlock","_component_neon_icon","_toDisplayString","_createVNode","_component_neon_expansion_indicator"],"mappings":"qMAgCgBA,EAAA,CAAA,MAAM,6BAA6B,iJA/BjDC,EAAAA,mBAwCM,MAAA,CAvCH,gBAAeC,EAAA,SACf,gBAAeA,EAAA,WACf,MAAKC,EAAAA,eAAA,CAAA,mCAAsDD,EAAA,8CAAwDA,EAAA,2CAAqDA,EAAA,wCAAkDA,EAAA,mCAAkDA,EAAA,QAAQ,4BAAmCA,EAAA,IAAI,4BAAmCA,EAAA,KAAK,IAW9V,sBAAsB,CAAA,IAE5BE,EAAAA,mBAmBM,MAAA,CAlBH,gBAAeF,EAAA,GACf,MAAKC,EAAAA,eAAA,CAAA,CAAA,iCAAoCD,EAAA,iBAAiB,EAAA,EACrD,8BAA8B,CAAA,EACpC,SAAS,KACR,4BAAOA,EAAA,gBAAAA,EAAA,eAAA,GAAAG,CAAA,KAERD,EAAAA,mBAUM,MAAA,CATJ,MAAM,4FACN,SAAS,IACR,UAAO,gCAAQF,EAAA,gBAAAA,EAAA,eAAA,GAAAG,CAAA,EAAc,CAAA,OAAA,CAAA,kDACNH,EAAA,gBAAAA,EAAA,eAAA,GAAAG,CAAA,EAAc,CAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,MAEtCC,aAGOJ,EAAA,OAAA,SAAA,CAHA,SAAUA,EAAA,UAAU,EAA3B,IAGO,CAFYA,EAAA,oBAAjBK,EAAAA,YAA0EC,EAAA,OAAlD,MAAON,EAAA,MAAQ,SAAUA,EAAA,SAAW,KAAMA,EAAA,uEAClEE,EAAAA,mBAA4D,OAA5DJ,EAA4DS,EAAAA,gBAAfP,EAAA,KAAK,EAAA,CAAA,SAGtDQ,EAAAA,YAAuFC,EAAA,CAA5D,MAAOT,EAAA,MAAQ,SAAUA,EAAA,SAAW,SAAUA,EAAA,4EAE3EE,EAAAA,mBAGM,MAAA,CAHoB,GAAIF,EAAA,GAAI,MAAM,kCAEtCI,aAAaJ,EAAA,OAAA,SAAA,kBAFFA,EAAA,UAAU"}
@@ -1,5 +1,5 @@
1
1
  import m from "./NeonExpansionPanel.es.js";
2
- import { resolveComponent as l, openBlock as d, createElementBlock as b, normalizeClass as i, createElementVNode as a, withKeys as s, withModifiers as u, renderSlot as p, createBlock as g, createCommentVNode as f, toDisplayString as c, createVNode as $, withDirectives as E, vShow as h } from "vue";
2
+ import { resolveComponent as l, openBlock as d, createElementBlock as b, normalizeClass as i, createElementVNode as a, withKeys as s, withModifiers as u, renderSlot as p, createBlock as g, createCommentVNode as f, toDisplayString as $, createVNode as c, withDirectives as E, vShow as h } from "vue";
3
3
  import v from "../../../_virtual/_plugin-vue_export-helper.es.js";
4
4
  const V = ["aria-disabled", "aria-expanded"], w = ["aria-controls"], k = { class: "neon-expansion-panel__label" }, x = ["id"];
5
5
  function y(e, n, C, N, B, S) {
@@ -11,6 +11,7 @@ function y(e, n, C, N, B, S) {
11
11
  {
12
12
  "neon-expansion-panel--expanded": e.modelValue,
13
13
  "neon-expansion-panel--full-width": e.fullWidth,
14
+ "neon-expansion-panel--indented": e.indent,
14
15
  "neon-expansion-panel--disabled": e.disabled
15
16
  },
16
17
  `neon-expansion-panel--${e.position}`,
@@ -39,10 +40,10 @@ function y(e, n, C, N, B, S) {
39
40
  disabled: e.disabled,
40
41
  name: e.icon
41
42
  }, null, 8, ["color", "disabled", "name"])) : f("", !0),
42
- a("span", k, c(e.label), 1)
43
+ a("span", k, $(e.label), 1)
43
44
  ])
44
45
  ], 32),
45
- $(t, {
46
+ c(t, {
46
47
  color: e.color,
47
48
  disabled: e.disabled,
48
49
  expanded: e.modelValue
@@ -1 +1 @@
1
- {"version":3,"file":"NeonExpansionPanel.vue.es.js","sources":["../../../../src/components/presentation/expansion-panel/NeonExpansionPanel.vue"],"sourcesContent":["<template>\n <div\n :aria-disabled=\"disabled\"\n :aria-expanded=\"modelValue\"\n :class=\"[\n {\n 'neon-expansion-panel--expanded': modelValue,\n 'neon-expansion-panel--full-width': fullWidth,\n 'neon-expansion-panel--disabled': disabled,\n },\n `neon-expansion-panel--${position}`,\n `neon-expansion-panel--${size}`,\n `neon-expansion-panel--${color}`,\n ]\"\n class=\"neon-expansion-panel\"\n >\n <div\n :aria-controls=\"id\"\n :class=\"[`neon-expansion-panel__header--${indicatorPosition}`]\"\n class=\"neon-expansion-panel__header\"\n tabindex=\"-1\"\n @click=\"toggleExpanded\"\n >\n <div\n class=\"neon-expansion-panel__label-container neon-expansion-panel__label-container--outline-text\"\n tabindex=\"0\"\n @keydown.enter=\"toggleExpanded\"\n @keydown.space.prevent=\"toggleExpanded\"\n >\n <slot :expanded=\"modelValue\" name=\"header\">\n <neon-icon v-if=\"icon\" :color=\"color\" :disabled=\"disabled\" :name=\"icon\" />\n <span class=\"neon-expansion-panel__label\">{{ label }}</span>\n </slot>\n </div>\n <neon-expansion-indicator :color=\"color\" :disabled=\"disabled\" :expanded=\"modelValue\" />\n </div>\n <div v-show=\"modelValue\" :id=\"id\" class=\"neon-expansion-panel__content\">\n <!-- @slot The expansion panel contents -->\n <slot></slot>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonExpansionPanel.ts\" />\n"],"names":["_hoisted_3","_createElementBlock","_ctx","_normalizeClass","_createElementVNode","args","_renderSlot","_createBlock","_component_neon_icon","_toDisplayString","_createVNode","_component_neon_expansion_indicator"],"mappings":";;;qEA+BgBA,IAAA,EAAA,OAAM,8BAA6B;;;cA9BjDC,EAuCM,OAAA;AAAA,IAtCH,iBAAeC,EAAA;AAAA,IACf,iBAAeA,EAAA;AAAA,IACf,OAAKC,EAAA,CAAA;AAAA;0CAAsDD,EAAA;AAAA,4CAAwDA,EAAA;AAAA,0CAAqDA,EAAA;AAAA;+BAAkDA,EAAA,QAAQ;AAAA,+BAAmCA,EAAA,IAAI;AAAA,+BAAmCA,EAAA,KAAK;AAAA,OAU5S,sBAAsB,CAAA;AAAA;IAE5BE,EAmBM,OAAA;AAAA,MAlBH,iBAAeF,EAAA;AAAA,MACf,OAAKC,EAAA,CAAA,CAAA,iCAAoCD,EAAA,iBAAiB,EAAA,GACrD,8BAA8B,CAAA;AAAA,MACpC,UAAS;AAAA,MACR,mCAAOA,EAAA,kBAAAA,EAAA,eAAA,GAAAG,CAAA;AAAA;MAERD,EAUM,OAAA;AAAA,QATJ,OAAM;AAAA,QACN,UAAS;AAAA,QACR,WAAO;AAAA,sCAAQF,EAAA,kBAAAA,EAAA,eAAA,GAAAG,CAAA,GAAc,CAAA,OAAA,CAAA;AAAA,wCACNH,EAAA,kBAAAA,EAAA,eAAA,GAAAG,CAAA,GAAc,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;;QAEtCC,EAGOJ,EAAA,QAAA,UAAA,EAHA,UAAUA,EAAA,WAAU,GAA3B,MAGO;AAAA,UAFYA,EAAA,aAAjBK,EAA0EC,GAAA;AAAA;YAAlD,OAAON,EAAA;AAAA,YAAQ,UAAUA,EAAA;AAAA,YAAW,MAAMA,EAAA;AAAA;UAClEE,EAA4D,QAA5DJ,GAA4DS,EAAfP,EAAA,KAAK,GAAA,CAAA;AAAA;;MAGtDQ,EAAuFC,GAAA;AAAA,QAA5D,OAAOT,EAAA;AAAA,QAAQ,UAAUA,EAAA;AAAA,QAAW,UAAUA,EAAA;AAAA;;MAE3EE,EAGM,OAAA;AAAA,MAHoB,IAAIF,EAAA;AAAA,MAAI,OAAM;AAAA;MAEtCI,EAAaJ,EAAA,QAAA,SAAA;AAAA;UAFFA,EAAA,UAAU;AAAA;;;;"}
1
+ {"version":3,"file":"NeonExpansionPanel.vue.es.js","sources":["../../../../src/components/presentation/expansion-panel/NeonExpansionPanel.vue"],"sourcesContent":["<template>\n <div\n :aria-disabled=\"disabled\"\n :aria-expanded=\"modelValue\"\n :class=\"[\n {\n 'neon-expansion-panel--expanded': modelValue,\n 'neon-expansion-panel--full-width': fullWidth,\n 'neon-expansion-panel--indented': indent,\n 'neon-expansion-panel--disabled': disabled,\n },\n `neon-expansion-panel--${position}`,\n `neon-expansion-panel--${size}`,\n `neon-expansion-panel--${color}`,\n ]\"\n class=\"neon-expansion-panel\"\n >\n <div\n :aria-controls=\"id\"\n :class=\"[`neon-expansion-panel__header--${indicatorPosition}`]\"\n class=\"neon-expansion-panel__header\"\n tabindex=\"-1\"\n @click=\"toggleExpanded\"\n >\n <div\n class=\"neon-expansion-panel__label-container neon-expansion-panel__label-container--outline-text\"\n tabindex=\"0\"\n @keydown.enter=\"toggleExpanded\"\n @keydown.space.prevent=\"toggleExpanded\"\n >\n <slot :expanded=\"modelValue\" name=\"header\">\n <neon-icon v-if=\"icon\" :color=\"color\" :disabled=\"disabled\" :name=\"icon\" />\n <span class=\"neon-expansion-panel__label\">{{ label }}</span>\n </slot>\n </div>\n <neon-expansion-indicator :color=\"color\" :disabled=\"disabled\" :expanded=\"modelValue\" />\n </div>\n <div v-show=\"modelValue\" :id=\"id\" class=\"neon-expansion-panel__content\">\n <!-- @slot The expansion panel contents -->\n <slot></slot>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonExpansionPanel.ts\" />\n"],"names":["_hoisted_3","_createElementBlock","_ctx","_normalizeClass","_createElementVNode","args","_renderSlot","_createBlock","_component_neon_icon","_toDisplayString","_createVNode","_component_neon_expansion_indicator"],"mappings":";;;qEAgCgBA,IAAA,EAAA,OAAM,8BAA6B;;;cA/BjDC,EAwCM,OAAA;AAAA,IAvCH,iBAAeC,EAAA;AAAA,IACf,iBAAeA,EAAA;AAAA,IACf,OAAKC,EAAA,CAAA;AAAA;0CAAsDD,EAAA;AAAA,4CAAwDA,EAAA;AAAA,0CAAqDA,EAAA;AAAA,0CAAkDA,EAAA;AAAA;+BAAkDA,EAAA,QAAQ;AAAA,+BAAmCA,EAAA,IAAI;AAAA,+BAAmCA,EAAA,KAAK;AAAA,OAW9V,sBAAsB,CAAA;AAAA;IAE5BE,EAmBM,OAAA;AAAA,MAlBH,iBAAeF,EAAA;AAAA,MACf,OAAKC,EAAA,CAAA,CAAA,iCAAoCD,EAAA,iBAAiB,EAAA,GACrD,8BAA8B,CAAA;AAAA,MACpC,UAAS;AAAA,MACR,mCAAOA,EAAA,kBAAAA,EAAA,eAAA,GAAAG,CAAA;AAAA;MAERD,EAUM,OAAA;AAAA,QATJ,OAAM;AAAA,QACN,UAAS;AAAA,QACR,WAAO;AAAA,sCAAQF,EAAA,kBAAAA,EAAA,eAAA,GAAAG,CAAA,GAAc,CAAA,OAAA,CAAA;AAAA,wCACNH,EAAA,kBAAAA,EAAA,eAAA,GAAAG,CAAA,GAAc,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;;QAEtCC,EAGOJ,EAAA,QAAA,UAAA,EAHA,UAAUA,EAAA,WAAU,GAA3B,MAGO;AAAA,UAFYA,EAAA,aAAjBK,EAA0EC,GAAA;AAAA;YAAlD,OAAON,EAAA;AAAA,YAAQ,UAAUA,EAAA;AAAA,YAAW,MAAMA,EAAA;AAAA;UAClEE,EAA4D,QAA5DJ,GAA4DS,EAAfP,EAAA,KAAK,GAAA,CAAA;AAAA;;MAGtDQ,EAAuFC,GAAA;AAAA,QAA5D,OAAOT,EAAA;AAAA,QAAQ,UAAUA,EAAA;AAAA,QAAW,UAAUA,EAAA;AAAA;;MAE3EE,EAGM,OAAA;AAAA,MAHoB,IAAIF,EAAA;AAAA,MAAI,OAAM;AAAA;MAEtCI,EAAaJ,EAAA,QAAA,SAAA;AAAA;UAFFA,EAAA,UAAU;AAAA;;;;"}
@@ -38,10 +38,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
38
38
  };
39
39
  }>, {
40
40
  url: import("vue").Ref<string | null, string | null>;
41
+ emit: (event: "click" | "update:modelValue", ...args: any[]) => void;
41
42
  click: ($event: KeyboardEvent) => void;
42
43
  onSectionClick: (key: string) => void;
43
44
  onItemClick: (key: string) => void;
44
- }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
45
+ }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "update:modelValue")[], "click" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
45
46
  /**
46
47
  * Id for the tree menu. This is used specifically to namespace the menu icons so that icon paths are unique. A
47
48
  * typical scenario is the tree menu is used in a side nav and also a drawer which means icon ids will be duplicated
@@ -73,6 +74,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
73
74
  default: boolean;
74
75
  };
75
76
  }>> & Readonly<{
77
+ onClick?: ((...args: any[]) => any) | undefined;
76
78
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
77
79
  }>, {
78
80
  color: NeonFunctionalColor;
@@ -79,6 +79,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
79
79
  type: BooleanConstructor;
80
80
  default: boolean;
81
81
  };
82
+ /**
83
+ * Indent the expansion panel content
84
+ */
85
+ indent: {
86
+ type: BooleanConstructor;
87
+ default: boolean;
88
+ };
82
89
  }>, {
83
90
  toggleExpanded: () => void;
84
91
  }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -152,6 +159,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
152
159
  type: BooleanConstructor;
153
160
  default: boolean;
154
161
  };
162
+ /**
163
+ * Indent the expansion panel content
164
+ */
165
+ indent: {
166
+ type: BooleanConstructor;
167
+ default: boolean;
168
+ };
155
169
  }>> & Readonly<{
156
170
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
157
171
  }>, {
@@ -163,6 +177,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
163
177
  fullWidth: boolean;
164
178
  position: NeonVerticalPosition;
165
179
  indicatorPosition: NeonHorizontalPosition;
180
+ indent: boolean;
166
181
  }, {}, {
167
182
  NeonExpansionIndicator: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
168
183
  expanded: {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@aotearoan/neon",
3
3
  "description": "Neon is a lightweight design library of Vue 3 components with minimal dependencies.",
4
- "version": "26.0.2",
4
+ "version": "26.0.4",
5
5
  "main": "./dist/neon.cjs.js",
6
6
  "module": "./dist/neon.es.js",
7
7
  "types": "./dist/src/neon.d.ts",
@@ -32,6 +32,7 @@
32
32
  }
33
33
 
34
34
  @mixin solid-button($color) {
35
+ transition: all ease-in-out var(--neon-animation-speed-fast);
35
36
  background: linear-gradient(var(--neon-background-solid-button-light-#{$color}), var(--neon-background-solid-button-dark-#{$color}));
36
37
 
37
38
  &:hover:not(:disabled) {
@@ -48,6 +49,7 @@
48
49
  }
49
50
 
50
51
  @mixin outline-button($color) {
52
+ transition: all ease-in-out var(--neon-animation-speed-fast);
51
53
  border: var(--neon-border-width-outline-button) var(--neon-border-style) var(--neon-border-color-outline-button-inactive-#{$color});
52
54
  &:not(.neon-button--disabled) {
53
55
  color: var(--neon-background-outline-button-active-#{$color});
@@ -79,6 +81,7 @@
79
81
  }
80
82
 
81
83
  @mixin text-button($color) {
84
+ transition: all ease-in-out var(--neon-animation-speed-fast);
82
85
  color: var(--neon-color-#{$color});
83
86
 
84
87
  &:not(.neon-button--text-transparent) {
@@ -1,4 +1,5 @@
1
1
  @use '../includes/palettes';
2
+ @use '../includes/responsive';
2
3
 
3
4
  @mixin card-list {
4
5
  .neon-card-list {
@@ -33,9 +34,12 @@
33
34
  margin-left: auto;
34
35
  }
35
36
 
37
+ &__cards {
38
+ border-top: var(--neon-border);
39
+ }
40
+
36
41
  &__card {
37
- padding-top: var(--neon-space-32);
38
- padding-bottom: var(--neon-space-16);
42
+ padding: var(--neon-space-16);
39
43
  user-select: none;
40
44
  width: 100%;
41
45
  border: none;
@@ -44,6 +48,11 @@
44
48
  &--disabled {
45
49
  cursor: not-allowed;
46
50
  }
51
+
52
+ @include responsive.responsive(mobile-large) {
53
+ padding-left: 0;
54
+ padding-right: 0;
55
+ }
47
56
  }
48
57
 
49
58
  .neon-card-list__link {
@@ -8,15 +8,9 @@
8
8
  flex: 1 0 auto;
9
9
  max-height: fit-content;
10
10
 
11
- @each $color in palettes.$neon-functional-colors {
12
- &--#{$color}:not(.neon-expansion-panel--disabled) {
13
- $expansion-panel-rgb: var(--neon-rgb-#{$color});
14
-
15
- .neon-expansion-panel__label-container {
16
- color: rgb($expansion-panel-rgb);
17
- @include outline.focus-text-outline($expansion-panel-rgb);
18
- }
19
- }
11
+ .neon-expansion-panel__label-container {
12
+ color: var(--neon-color-text-primary);
13
+ @include outline.focus-text-outline(var(--neon-rgb-text-primary));
20
14
  }
21
15
 
22
16
  &__header {
@@ -28,7 +22,7 @@
28
22
  align-items: center;
29
23
  cursor: pointer;
30
24
  letter-spacing: var(--neon-letter-spacing-s);
31
- font-weight: var(--neon-font-weight-extra-light);
25
+ font-weight: var(--neon-font-weight-semi-bold);
32
26
  @include layout.padding-horizontal(0.75, 0.75);
33
27
  padding-top: 0;
34
28
  padding-bottom: 0;
@@ -118,18 +112,18 @@
118
112
 
119
113
  &--l {
120
114
  &:not(.neon-expansion-panel--expanded) {
121
- height: var(--neon-size-l);
122
- max-height: var(--neon-size-l);
115
+ height: 60rem;
116
+ max-height: 60rem;
123
117
  }
124
118
 
125
119
  .neon-expansion-panel__header {
126
- height: var(--neon-size-l);
127
- max-height: var(--neon-size-l);
128
- font-size: var(--neon-font-size-l);
120
+ height: 60rem;
121
+ max-height: 60rem;
122
+ font-size: var(--neon-font-size-xl);
129
123
 
130
124
  .neon-icon {
131
- width: var(--neon-font-size-l);
132
- height: var(--neon-font-size-l);
125
+ width: var(--neon-font-size-xl);
126
+ height: var(--neon-font-size-xl);
133
127
  }
134
128
  }
135
129
  }
@@ -137,12 +131,16 @@
137
131
  &--disabled {
138
132
  .neon-expansion-panel__header {
139
133
  cursor: not-allowed;
140
- color: var(--neon-color-disabled-text);
134
+ color: var(--neon-color-primary);
141
135
  }
142
136
  }
143
137
 
144
138
  &--top {
145
- border-bottom: var(--neon-border-width-expansion-panel) var(--neon-border-style) var(--neon-border-color);
139
+ border-top: var(--neon-border-width-expansion-panel) var(--neon-border-style) var(--neon-border-color);
140
+
141
+ &:last-of-type {
142
+ border-bottom: var(--neon-border-width-expansion-panel) var(--neon-border-style) var(--neon-border-color);
143
+ }
146
144
  }
147
145
 
148
146
  &--bottom {
@@ -161,6 +159,12 @@
161
159
  }
162
160
  }
163
161
 
162
+ &--indented {
163
+ .neon-expansion-panel__content {
164
+ padding-left: var(--neon-space-40);
165
+ }
166
+ }
167
+
164
168
  .neon-expansion-indicator {
165
169
  margin-right: -2rem;
166
170
  }
@@ -43,6 +43,7 @@
43
43
  text-transform: none;
44
44
  letter-spacing: initial;
45
45
  font-weight: var(--neon-font-weight-normal);
46
+ max-width: var(--neon-max-paragraph-width);
46
47
  }
47
48
  }
48
49
  }
@@ -150,6 +150,10 @@
150
150
  &:-webkit-autofill {
151
151
  -webkit-box-shadow: 0 0 0 50rem var(--neon-background-color-autofill) inset;
152
152
  -webkit-text-fill-color: var(--neon-color-autofill);
153
+
154
+ &::selection {
155
+ -webkit-text-fill-color: var(--neon-color-selection);
156
+ }
153
157
  }
154
158
 
155
159
  &-counter {
@@ -6,6 +6,8 @@
6
6
  .neon-page-container {
7
7
  padding-bottom: calc(var(--neon-space-20) + var(--neon-height-mobile-menu) + var(--neon-border-width));
8
8
  gap: var(--neon-gutter);
9
+ width: 100%;
10
+ max-width: calc(100% - 2 * var(--neon-gutter));
9
11
 
10
12
  &.neon-page-container--with-sticky-buttons {
11
13
  padding-bottom: calc(
@@ -14,9 +16,15 @@
14
16
  );
15
17
  }
16
18
 
17
- h1,
18
- .neon-page-container__title {
19
- padding-top: calc(1.5 * var(--neon-gutter));
19
+ &__header {
20
+ display: flex;
21
+ flex-direction: row;
22
+ align-items: center;
23
+ justify-content: space-between;
24
+ padding-top: calc(1.25 * var(--neon-gutter));
25
+ }
26
+
27
+ h1 {
20
28
  margin-bottom: 0;
21
29
  }
22
30
 
@@ -34,6 +42,12 @@
34
42
  }
35
43
  }
36
44
 
45
+ @include responsive.responsive(tablet) {
46
+ .neon-page-container {
47
+ max-width: 100%;
48
+ }
49
+ }
50
+
37
51
  @include responsive.responsive(mobile-large) {
38
52
  .neon-page-container {
39
53
  min-height: 100%;
@@ -45,6 +45,8 @@
45
45
  }
46
46
 
47
47
  .neon-page--with-top-nav .neon-side-nav {
48
+ top: var(--neon-top-nav-height);
49
+
48
50
  @include responsive.responsive(larger-than-tablet) {
49
51
  @include layout.min-height(100, 'var(--neon-top-nav-height-desktop)');
50
52
  @include layout.height(100, 'var(--neon-top-nav-height-desktop)');
@@ -12,15 +12,24 @@
12
12
 
13
13
  .neon-tabs__menu-item {
14
14
  &.neon-tabs__menu-item {
15
- .neon-tabs__menu-item-container:before {
16
- background-color: $tab-selected-color;
15
+ .neon-tabs__menu-item-container {
16
+ @include svg.color-with-svg($tab-selected-color);
17
+ transition: all ease-in-out var(--neon-animation-speed-fast);
18
+
19
+ &:before {
20
+ background-color: $tab-selected-color;
21
+ }
17
22
  }
18
23
  }
19
24
 
20
25
  &:hover,
21
26
  &:active {
22
- .neon-tabs__menu-item-container:before {
23
- background-color: $tab-hover-color;
27
+ .neon-tabs__menu-item-container {
28
+ @include svg.color-with-svg($tab-hover-color);
29
+
30
+ &:before {
31
+ background-color: $tab-hover-color;
32
+ }
24
33
  }
25
34
  }
26
35
 
@@ -56,7 +65,7 @@
56
65
  user-select: none;
57
66
  cursor: pointer;
58
67
  transition: color ease-in-out var(--neon-animation-speed-fast);
59
- @include svg.color-with-svg(var(--neon-color-low-contrast));
68
+ @include svg.color-with-svg(var(--neon-color-tab));
60
69
 
61
70
  font-weight: var(--neon-font-weight-tabs);
62
71
 
@@ -74,15 +83,15 @@
74
83
  outline: none;
75
84
  height: 100%;
76
85
  align-items: center;
77
- color: var(--neon-color-text-primary);
86
+ color: var(--neon-color-tab);
78
87
 
79
88
  .neon-svg--stroke {
80
- stroke: var(--neon-color-text-primary);
89
+ stroke: var(--neon-color-tab);
81
90
  transition: stroke ease-in-out var(--neon-animation-speed-fast);
82
91
  }
83
92
 
84
93
  .neon-svg--fill {
85
- fill: var(--neon-color-text-primary);
94
+ fill: var(--neon-color-tab);
86
95
  transition: fill ease-in-out var(--neon-animation-speed-fast);
87
96
  }
88
97
 
@@ -140,8 +149,8 @@
140
149
  .neon-tabs__menu-items--full-width-mobile {
141
150
  @include responsive.responsive(mobile-large) {
142
151
  margin: 0 calc(-1 * var(--neon-gutter-mobile));
143
- max-width: calc(100% + 2 * var(--neon-gutter-mobile));
144
- width: calc(100% + 2 * var(--neon-gutter-mobile));
152
+ max-width: 100vw;
153
+ width: 100vw;
145
154
  }
146
155
  }
147
156
 
@@ -21,7 +21,7 @@
21
21
  outline: none;
22
22
  }
23
23
 
24
- &.neon-link--exact-active > span {
24
+ &.neon-link--active > span {
25
25
  font-weight: var(--neon-font-weight-tree-menu-selected);
26
26
  }
27
27
  }
@@ -121,7 +121,7 @@
121
121
  .neon-tree-menu__section .neon-tree-menu__section-link,
122
122
  .neon-tree-menu__item .neon-tree-menu__item-link,
123
123
  .neon-tree-menu__sub-menu-item .neon-tree-menu__sub-menu-item-link {
124
- &.neon-link--exact-active {
124
+ &.neon-link--active {
125
125
  @include svg.color-with-svg(var(--neon-color-#{$color}));
126
126
  }
127
127
 
@@ -33,7 +33,7 @@
33
33
  margin: 0;
34
34
 
35
35
  &:before {
36
- color: var(--neon-color-low-contrast);
36
+ color: var(--neon-color-high-contrast);
37
37
  }
38
38
  }
39
39
 
@@ -1015,6 +1015,11 @@
1015
1015
  * Border color of the underline beneath the tabs.
1016
1016
  */
1017
1017
  --neon-border-color-tabs-underline: var(--neon-border-color);
1018
+ /**
1019
+ * @component NeonTabs
1020
+ * unselected tab text color.
1021
+ */
1022
+ --neon-color-tab: var(--neon-color-text-tertiary);
1018
1023
  /**
1019
1024
  * @component NeonTabs
1020
1025
  * low-contrast tab selected color.
@@ -323,11 +323,11 @@
323
323
  --neon-font-weight-bold: 700;
324
324
 
325
325
  /** The H6 font weight */
326
- --neon-h6-weight: var(--neon-font-weight-medium);
326
+ --neon-h6-weight: var(--neon-font-weight-semi-bold);
327
327
  /** The H5 font weight */
328
- --neon-h5-weight: var(--neon-font-weight-medium);
328
+ --neon-h5-weight: var(--neon-font-weight-semi-bold);
329
329
  /** The H4 font weight */
330
- --neon-h4-weight: var(--neon-font-weight-medium);
330
+ --neon-h4-weight: var(--neon-font-weight-semi-bold);
331
331
  /** The H3 font weight */
332
332
  --neon-h3-weight: var(--neon-font-weight-semi-bold);
333
333
  /** The H2 font weight */
@@ -853,13 +853,13 @@
853
853
  * @component NeonTabs
854
854
  * Font weight of the tabs
855
855
  */
856
- --neon-font-weight-tabs: var(--neon-font-weight-normal);
856
+ --neon-font-weight-tabs: var(--neon-font-weight-semi-bold);
857
857
  /**
858
858
  * @component NeonTabs
859
859
  * Font weight of a tab when selected. NOTE: This causes reflow of the text if it is different to the default font
860
860
  * weight.
861
861
  */
862
- --neon-font-weight-tabs-selected: var(--neon-font-weight-bold);
862
+ --neon-font-weight-tabs-selected: var(--neon-font-weight-semi-bold);
863
863
  /**
864
864
  * @component NeonTabs
865
865
  * Opacity of a tab when focussed style is applied.
@@ -1015,6 +1015,11 @@
1015
1015
  * Border color of the underline beneath the tabs.
1016
1016
  */
1017
1017
  --neon-border-color-tabs-underline: var(--neon-border-color);
1018
+ /**
1019
+ * @component NeonTabs
1020
+ * unselected tab text color.
1021
+ */
1022
+ --neon-color-tab: var(--neon-color-text-tertiary);
1018
1023
  /**
1019
1024
  * @component NeonTabs
1020
1025
  * low-contrast tab selected color.