@aotearoan/neon 23.3.1 → 24.1.0
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.
- package/README.md +5 -0
- package/dist/components/navigation/tree-menu/NeonTreeMenu.cjs.js +1 -1
- package/dist/components/navigation/tree-menu/NeonTreeMenu.cjs.js.map +1 -1
- package/dist/components/navigation/tree-menu/NeonTreeMenu.es.js +57 -24
- package/dist/components/navigation/tree-menu/NeonTreeMenu.es.js.map +1 -1
- package/dist/components/navigation/tree-menu/NeonTreeMenu.vue.cjs.js +1 -1
- package/dist/components/navigation/tree-menu/NeonTreeMenu.vue.cjs.js.map +1 -1
- package/dist/components/navigation/tree-menu/NeonTreeMenu.vue.es.js +70 -55
- package/dist/components/navigation/tree-menu/NeonTreeMenu.vue.es.js.map +1 -1
- package/dist/components/presentation/expansion-panel/NeonExpansionPanel.cjs.js +1 -1
- package/dist/components/presentation/expansion-panel/NeonExpansionPanel.cjs.js.map +1 -1
- package/dist/components/presentation/expansion-panel/NeonExpansionPanel.es.js +21 -16
- package/dist/components/presentation/expansion-panel/NeonExpansionPanel.es.js.map +1 -1
- package/dist/components/presentation/expansion-panel/NeonExpansionPanel.vue.cjs.js +1 -1
- package/dist/components/presentation/expansion-panel/NeonExpansionPanel.vue.cjs.js.map +1 -1
- package/dist/components/presentation/expansion-panel/NeonExpansionPanel.vue.es.js +27 -25
- package/dist/components/presentation/expansion-panel/NeonExpansionPanel.vue.es.js.map +1 -1
- package/dist/src/common/models/NeonTreeMenuItemModel.d.ts +16 -0
- package/dist/src/common/models/NeonTreeMenuSectionModel.d.ts +5 -3
- package/dist/src/common/models/NeonTreeMenuSubMenuModel.d.ts +9 -0
- package/dist/src/components/navigation/tree-menu/NeonTreeMenu.d.ts +96 -9
- package/dist/src/components/presentation/expansion-panel/NeonExpansionPanel.d.ts +24 -4
- package/dist/src/neon.d.ts +2 -1
- package/package.json +3 -2
- package/src/sass/components/_banner.scss +6 -0
- package/src/sass/components/_button.scss +1 -1
- package/src/sass/components/_drop-zone.scss +9 -0
- package/src/sass/components/_expansion-panel.scss +14 -0
- package/src/sass/components/_footer.scss +29 -0
- package/src/sass/components/_page-container.scss +9 -0
- package/src/sass/components/_page.scss +6 -21
- package/src/sass/components/_tree-menu.scss +101 -73
- package/src/sass/core/_colors.scss +85 -0
- package/src/sass/core/_elements.scss +57 -0
- package/src/sass/core/_transitions.scss +13 -0
- package/src/sass/{global → core}/_typography.scss +21 -8
- package/src/sass/core/core-neon.scss +29 -0
- package/src/sass/global/base-html.scss +43 -0
- package/src/sass/theme.scss +11 -6
- package/src/sass/variables.scss +51 -9
- package/dist/src/common/models/NeonTreeMenuLinkModel.d.ts +0 -13
- package/src/sass/global/_base-html.scss +0 -213
- package/src/sass/global/_layout.scss +0 -42
- package/src/sass/global/global.scss +0 -4
- /package/src/sass/{global → core}/_table.scss +0 -0
package/README.md
CHANGED
|
@@ -62,3 +62,8 @@ default:
|
|
|
62
62
|
For more information on dynamically changing the mode
|
|
63
63
|
see [Dark mode](https://aotearoan.github.io/neon/design/theming#dark-mode).
|
|
64
64
|
|
|
65
|
+
### Building and using the library locally
|
|
66
|
+
|
|
67
|
+
1. build the project (`npm build`),
|
|
68
|
+
2. run `npm pack` to create a tarball of the project
|
|
69
|
+
3. install from the tarball with `npm i -S /$PATH-TO-THIS-PROJECT/aotearoan-neon-21.2.8.tgz`
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const
|
|
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("../../../common/enums/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;
|
|
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 '@/common/models/NeonTreeMenuSectionModel';\nimport NeonLink from '../link/NeonLink.vue';\nimport { useRoute } from 'vue-router';\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 NeonLink,\n },\n props: {\n /**\n * The tree model defining the menu.\n */\n
|
|
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 '@/common/models/NeonTreeMenuSectionModel';\nimport NeonIcon from '../../presentation/icon/NeonIcon.vue';\nimport NeonLink from '../link/NeonLink.vue';\nimport { useRoute } from 'vue-router';\nimport { NeonFunctionalColor } from '@/common/enums/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":"4NAYAA,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,16 +1,29 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
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";
|
|
4
|
+
import { useRoute as y } from "vue-router";
|
|
5
|
+
import { NeonFunctionalColor as V } from "../../../common/enums/NeonFunctionalColor.es.js";
|
|
6
|
+
const M = i({
|
|
5
7
|
name: "NeonTreeMenu",
|
|
6
8
|
components: {
|
|
7
|
-
|
|
9
|
+
NeonIcon: x,
|
|
10
|
+
NeonLink: k
|
|
8
11
|
},
|
|
9
12
|
props: {
|
|
13
|
+
/**
|
|
14
|
+
* Id for the tree menu. This is used specifically to namespace the menu icons so that icon paths are unique. A
|
|
15
|
+
* typical scenario is the tree menu is used in a side nav and also a drawer which means icon ids will be duplicated
|
|
16
|
+
* unless they're namespaced.
|
|
17
|
+
*/
|
|
18
|
+
id: { type: String, required: !0 },
|
|
10
19
|
/**
|
|
11
20
|
* The tree model defining the menu.
|
|
12
21
|
*/
|
|
13
|
-
|
|
22
|
+
modelValue: { type: Array, required: !0 },
|
|
23
|
+
/**
|
|
24
|
+
* The menu highlight color (excludes low-contrast and neutral).
|
|
25
|
+
*/
|
|
26
|
+
color: { type: String, default: V.Brand },
|
|
14
27
|
/**
|
|
15
28
|
* Expand all nodes in the tree, this is useful for providing filtering (e.g. the Neon showcase side navigation menu).
|
|
16
29
|
*/
|
|
@@ -18,31 +31,51 @@ const y = p({
|
|
|
18
31
|
},
|
|
19
32
|
emits: [
|
|
20
33
|
/**
|
|
21
|
-
* Emitted when the user
|
|
22
|
-
* @type {
|
|
34
|
+
* Emitted when the user toggles expansion of a section or item
|
|
35
|
+
* @type {Array<NeonTreeMenuSectionModel>} the updated model with the section or item expanded/collapsed.
|
|
23
36
|
*/
|
|
24
|
-
"
|
|
37
|
+
"update:modelValue"
|
|
25
38
|
],
|
|
26
|
-
setup(
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
},
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
39
|
+
setup(a, { emit: l }) {
|
|
40
|
+
const p = y(), d = f(null), u = (n) => {
|
|
41
|
+
const t = n.target;
|
|
42
|
+
t.parentElement && t.parentElement.click();
|
|
43
|
+
}, m = (n) => {
|
|
44
|
+
const t = a.modelValue.map((e) => {
|
|
45
|
+
var o;
|
|
46
|
+
return {
|
|
47
|
+
...e,
|
|
48
|
+
children: (o = e.children) == null ? void 0 : o.map((r) => ({ ...r })),
|
|
49
|
+
expanded: e.key === n ? !e.expanded : e.expanded
|
|
50
|
+
};
|
|
51
|
+
});
|
|
52
|
+
l("update:modelValue", t);
|
|
53
|
+
}, c = (n) => {
|
|
54
|
+
const t = a.modelValue.map((e) => {
|
|
55
|
+
var o;
|
|
56
|
+
return {
|
|
57
|
+
...e,
|
|
58
|
+
children: (o = e.children) == null ? void 0 : o.map((r) => ({
|
|
59
|
+
...r,
|
|
60
|
+
expanded: r.key === n ? !r.expanded : r.expanded
|
|
61
|
+
}))
|
|
62
|
+
};
|
|
63
|
+
});
|
|
64
|
+
l("update:modelValue", t);
|
|
65
|
+
};
|
|
66
|
+
return s(
|
|
67
|
+
() => p.path,
|
|
68
|
+
(n) => d.value = n,
|
|
36
69
|
{ immediate: !0 }
|
|
37
70
|
), {
|
|
38
|
-
url:
|
|
39
|
-
click:
|
|
40
|
-
|
|
41
|
-
|
|
71
|
+
url: d,
|
|
72
|
+
click: u,
|
|
73
|
+
onSectionClick: m,
|
|
74
|
+
onItemClick: c
|
|
42
75
|
};
|
|
43
76
|
}
|
|
44
77
|
});
|
|
45
78
|
export {
|
|
46
|
-
|
|
79
|
+
M as default
|
|
47
80
|
};
|
|
48
81
|
//# sourceMappingURL=NeonTreeMenu.es.js.map
|
|
@@ -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 '@/common/models/NeonTreeMenuSectionModel';\nimport NeonLink from '../link/NeonLink.vue';\nimport { useRoute } from 'vue-router';\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 NeonLink,\n },\n props: {\n /**\n * The tree model defining the menu.\n */\n
|
|
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 '@/common/models/NeonTreeMenuSectionModel';\nimport NeonIcon from '../../presentation/icon/NeonIcon.vue';\nimport NeonLink from '../link/NeonLink.vue';\nimport { useRoute } from 'vue-router';\nimport { NeonFunctionalColor } from '@/common/enums/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,2 +1,2 @@
|
|
|
1
|
-
"use strict";const
|
|
1
|
+
"use strict";const u=require("./NeonTreeMenu.cjs.js"),e=require("vue"),d=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),m=["id"],c={class:"no-style"},k=["tabindex","onKeydown"],p={class:"no-style neon-tree-menu__items"},_=["onKeydown"];function y(t,r,b,f,B,C){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",c,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.modelValue,n=>(e.openBlock(),e.createElementBlock("li",{key:n.key,class:e.normalizeClass([{"neon-tree-menu__section--expanded":n.expanded||t.expandAll,"neon-tree-menu__section--disabled":n.disabled},"neon-tree-menu__section"])},[e.createVNode(i,{href:n.href,"no-style":!n.href,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,k),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","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,_)]),_: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},"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,m)):e.createCommentVNode("",!0)}const h=d(u,[["render",y]]);module.exports=h;
|
|
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
|
|
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': section.expanded || expandAll,\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 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=\"{ 'neon-tree-menu__sub-menu--expanded': expandAll || link.expanded }\"\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","_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,6BAwCZC,EAAA,CAAA,MAAM,gCAAgC,2HA7CxCC,EAAA,0BADRC,EAAAA,mBA+FM,MAAA,OA7FH,GAAID,EAAA,GACJ,MAAKE,EAAAA,eAAA,CAAA,CAAA,mBAAsBF,EAAA,KAAK,GAAA,CAAA,6BAAoCA,EAAA,SAAS,GACxE,gBAAgB,CAAA,IAEtBG,EAAAA,mBAwFK,KAxFLL,EAwFK,kBAvFHG,EAAAA,mBAsFKG,EAAAA,SAAA,KAAAC,EAAAA,WArFeL,EAAA,WAAXM,kBADTL,EAAAA,mBAsFK,KAAA,CApFF,IAAKK,EAAQ,IACb,MAAKJ,EAAAA,eAAA,CAAA,qCAAmDI,EAAQ,UAAYN,EAAA,UAA0D,oCAAAM,EAAQ,UAIzI,yBAAyB,CAAA,IAE/BC,EAAAA,YA6BYC,EAAA,CA5BT,KAAMF,EAAQ,KACd,WAAQ,CAAGA,EAAQ,KACpB,MAAM,+BACN,gBAAc,OACd,SAAS,KACR,QAAKG,GAAA,CAAGH,EAAQ,UAAYN,EAAA,eAAeM,EAAQ,GAAG,sBAEvD,IAKE,CAJMA,EAAQ,oBADhBI,EAAAA,YAKEC,EAAA,OAHC,GAAIX,EAAA,GAAE,IAASM,EAAQ,IACvB,KAAMA,EAAQ,KACf,MAAM,wFAERH,EAAAA,mBASO,OAAA,CARJ,SAAUG,EAAQ,SAAQ,GAAA,EAC3B,MAAM,sFACN,KAAK,OACJ,UAAO,CAAsBM,EAAAA,SAAAC,EAAAA,cAAAJ,GAAA,CAAAH,EAAQ,UAAYN,iBAAeM,EAAQ,GAAG,EAAA,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,EAC5DM,WAAAH,GAAAH,EAAQ,MAAQN,EAAA,MAAMS,CAAM,EAAA,CAAA,OAAA,CAAA,EAC5BG,WAAAH,GAAAH,EAAQ,MAAQN,EAAA,MAAMS,CAAM,EAAA,CAAA,OAAA,CAAA,EAEzC,EAAAK,EAAAA,gBAAAR,EAAQ,KAAK,EAAA,GAAAS,CAAA,EAGVT,EAAQ,UAAYA,EAAQ,SAAS,SAAM,iBADnDI,EAAAA,YAIEC,EAAA,OAFA,MAAM,8CACN,KAAK,0FAGTR,EAAAA,mBA8CK,KA9CLJ,EA8CK,EA7CHiB,YAAA,EAAA,EAAAf,EAAAA,mBA4CKG,EAAAA,SAAA,KAAAC,EAAAA,WA5CcC,EAAQ,SAAhBW,kBAAXhB,EAAAA,mBA4CK,KAAA,CA5CiC,IAAKgB,EAAK,IAAK,MAAM,yBACzDV,EAAAA,YAiBYC,EAAA,CAhBT,KAAMS,EAAK,KACX,WAAU,GACX,MAAM,4BACN,gBAAc,OACd,SAAS,KACR,QAAKR,GAAET,EAAA,YAAYiB,EAAK,GAAG,sBAE5B,IAQO,CARPd,EAAAA,mBAQO,OAAA,CAPL,MAAM,gFACN,KAAK,OACL,SAAS,IACR,UAAO,CAAQe,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAN,EAAAA,SAAAH,GAAAT,EAAA,MAAMS,CAAM,EAAA,CAAA,OAAA,CAAA,iCACJT,EAAA,YAAYiB,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,iBAD3ChB,EAAAA,mBAwBK,KAAA,OAtBF,8DAA+CD,EAAA,WAAaiB,EAAK,QAAQ,EACpE,mCAAmC,CAAA,KAEzCD,YAAA,EAAA,EAAAf,EAAAA,mBAkBKG,EAAAA,SAAA,KAAAC,EAAAA,WAlBiBY,EAAK,QAAhBG,kBAAXnB,EAAAA,mBAkBK,KAAA,CAlBgC,IAAKmB,EAAQ,KAAM,MAAM,kCAC5Db,EAAAA,YAgBYC,EAAA,CAfT,KAAMY,EAAQ,KACf,MAAM,yDACN,WAAA,GACA,gBAAc,OACd,SAAS,yBAET,IAQO,CARPjB,EAAAA,mBAQO,OAAA,CAPL,MAAM,kGACN,KAAK,OACL,SAAS,IACR,UAAO,CAAgBe,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAN,EAAAA,SAAAC,EAAAA,cAAAJ,GAAAT,EAAA,MAAMS,CAAM,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,GACZS,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAN,EAAAA,SAAAC,EAAAA,cAAAJ,GAAAT,EAAA,MAAMS,CAAM,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,GAEjC,EAAAK,kBAAAM,EAAQ,KAAK,EAAA,EAAA"}
|
|
@@ -1,104 +1,119 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { resolveComponent as C, openBlock as
|
|
3
|
-
import
|
|
4
|
-
const
|
|
5
|
-
function
|
|
6
|
-
const
|
|
7
|
-
return
|
|
1
|
+
import $ from "./NeonTreeMenu.es.js";
|
|
2
|
+
import { resolveComponent as C, openBlock as o, createElementBlock as t, normalizeClass as k, createElementVNode as a, Fragment as c, renderList as p, createVNode as y, withCtx as b, createBlock as v, createCommentVNode as u, withKeys as i, withModifiers as d, toDisplayString as f } from "vue";
|
|
3
|
+
import w from "../../../_virtual/_plugin-vue_export-helper.es.js";
|
|
4
|
+
const x = ["id"], K = { class: "no-style" }, g = ["tabindex", "onKeydown"], V = { class: "no-style neon-tree-menu__items" }, N = ["onKeydown"];
|
|
5
|
+
function A(n, s, B, M, S, E) {
|
|
6
|
+
const h = C("neon-icon"), m = C("neon-link");
|
|
7
|
+
return n.modelValue ? (o(), t("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
11
|
}, [
|
|
11
|
-
|
|
12
|
-
(
|
|
13
|
-
key:
|
|
14
|
-
class:
|
|
15
|
-
"neon-tree-menu__section--expanded":
|
|
16
|
-
"neon-tree-menu__section--disabled":
|
|
12
|
+
a("ul", K, [
|
|
13
|
+
(o(!0), t(c, null, p(n.modelValue, (e) => (o(), t("li", {
|
|
14
|
+
key: e.key,
|
|
15
|
+
class: k([{
|
|
16
|
+
"neon-tree-menu__section--expanded": e.expanded || n.expandAll,
|
|
17
|
+
"neon-tree-menu__section--disabled": e.disabled
|
|
17
18
|
}, "neon-tree-menu__section"])
|
|
18
19
|
}, [
|
|
19
|
-
y(
|
|
20
|
-
href:
|
|
21
|
-
"no-style": !
|
|
20
|
+
y(m, {
|
|
21
|
+
href: e.href,
|
|
22
|
+
"no-style": !e.href,
|
|
22
23
|
class: "neon-tree-menu__section-link",
|
|
23
24
|
"outline-style": "none",
|
|
24
25
|
tabindex: "-1",
|
|
25
|
-
onClick: (
|
|
26
|
+
onClick: (l) => !e.disabled && n.onSectionClick(e.key)
|
|
26
27
|
}, {
|
|
27
|
-
default:
|
|
28
|
-
|
|
28
|
+
default: b(() => [
|
|
29
|
+
e.icon ? (o(), v(h, {
|
|
30
|
+
key: 0,
|
|
31
|
+
id: n.id + "_" + e.key,
|
|
32
|
+
name: e.icon,
|
|
33
|
+
class: "neon-tree-menu__section-link-icon"
|
|
34
|
+
}, null, 8, ["id", "name"])) : u("", !0),
|
|
35
|
+
a("span", {
|
|
36
|
+
tabindex: e.disabled ? -1 : 0,
|
|
29
37
|
class: "neon-tree-menu__section-link-label neon-tree-menu__section-link-label--outline-text",
|
|
30
38
|
role: "link",
|
|
31
|
-
tabindex: "0",
|
|
32
39
|
onKeydown: [
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
40
|
+
i(d((l) => !e.disabled && n.onSectionClick(e.key), ["stop", "prevent"]), ["space"]),
|
|
41
|
+
i((l) => e.href && n.click(l), ["enter"]),
|
|
42
|
+
i((l) => e.href && n.click(l), ["space"])
|
|
36
43
|
]
|
|
37
|
-
},
|
|
44
|
+
}, f(e.label), 41, g),
|
|
45
|
+
e.children && e.children.length !== 0 ? (o(), v(h, {
|
|
46
|
+
key: 1,
|
|
47
|
+
class: "neon-tree-menu__section-link-expansion-icon",
|
|
48
|
+
name: "chevron-right"
|
|
49
|
+
})) : u("", !0)
|
|
38
50
|
]),
|
|
39
51
|
_: 2
|
|
40
52
|
}, 1032, ["href", "no-style", "onClick"]),
|
|
41
|
-
|
|
42
|
-
(
|
|
43
|
-
key:
|
|
44
|
-
class: "neon-tree-
|
|
53
|
+
a("ul", V, [
|
|
54
|
+
(o(!0), t(c, null, p(e.children, (l) => (o(), t("li", {
|
|
55
|
+
key: l.key,
|
|
56
|
+
class: "neon-tree-menu__item"
|
|
45
57
|
}, [
|
|
46
|
-
y(
|
|
47
|
-
href:
|
|
58
|
+
y(m, {
|
|
59
|
+
href: l.href,
|
|
48
60
|
"no-style": !0,
|
|
49
|
-
class: "neon-tree-
|
|
61
|
+
class: "neon-tree-menu__item-link",
|
|
50
62
|
"outline-style": "none",
|
|
51
63
|
tabindex: "-1",
|
|
52
|
-
onClick: (r) =>
|
|
64
|
+
onClick: (r) => n.onItemClick(l.key)
|
|
53
65
|
}, {
|
|
54
|
-
default:
|
|
55
|
-
|
|
56
|
-
class: "neon-tree-
|
|
66
|
+
default: b(() => [
|
|
67
|
+
a("span", {
|
|
68
|
+
class: "neon-tree-menu__item-link-label neon-tree-menu__item-link-label--outline-text",
|
|
57
69
|
role: "link",
|
|
58
70
|
tabindex: "0",
|
|
59
71
|
onKeydown: [
|
|
60
|
-
|
|
61
|
-
|
|
72
|
+
s[0] || (s[0] = i((r) => n.click(r), ["enter"])),
|
|
73
|
+
i(d((r) => n.onItemClick(l.key), ["prevent"]), ["space"])
|
|
62
74
|
]
|
|
63
|
-
},
|
|
75
|
+
}, f(l.label), 41, N)
|
|
64
76
|
]),
|
|
65
77
|
_: 2
|
|
66
78
|
}, 1032, ["href", "onClick"]),
|
|
67
|
-
|
|
79
|
+
l.subMenu && l.subMenu.length > 0 ? (o(), t("ul", {
|
|
68
80
|
key: 0,
|
|
69
|
-
class:
|
|
81
|
+
class: k([{ "neon-tree-menu__sub-menu--expanded": n.expandAll || l.expanded }, "no-style neon-tree-menu__sub-menu"])
|
|
70
82
|
}, [
|
|
71
|
-
(
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
83
|
+
(o(!0), t(c, null, p(l.subMenu, (r) => (o(), t("li", {
|
|
84
|
+
key: r.href,
|
|
85
|
+
class: "neon-tree-menu__sub-menu-item"
|
|
86
|
+
}, [
|
|
87
|
+
y(m, {
|
|
88
|
+
href: r.href,
|
|
89
|
+
class: "neon-link--no-style neon-tree-menu__sub-menu-item-link",
|
|
75
90
|
"no-style": "",
|
|
76
91
|
"outline-style": "none",
|
|
77
92
|
tabindex: "-1"
|
|
78
93
|
}, {
|
|
79
|
-
default:
|
|
80
|
-
|
|
81
|
-
class: "neon-tree-
|
|
94
|
+
default: b(() => [
|
|
95
|
+
a("span", {
|
|
96
|
+
class: "neon-tree-menu__sub-menu-item-link-label neon-tree-menu__sub-menu-item-link-label--outline-text",
|
|
82
97
|
role: "link",
|
|
83
98
|
tabindex: "0",
|
|
84
99
|
onKeydown: [
|
|
85
|
-
|
|
86
|
-
|
|
100
|
+
s[1] || (s[1] = i(d((_) => n.click(_), ["prevent"]), ["space"])),
|
|
101
|
+
s[2] || (s[2] = i(d((_) => n.click(_), ["prevent"]), ["enter"]))
|
|
87
102
|
]
|
|
88
|
-
},
|
|
103
|
+
}, f(r.label), 33)
|
|
89
104
|
]),
|
|
90
105
|
_: 2
|
|
91
106
|
}, 1032, ["href"])
|
|
92
107
|
]))), 128))
|
|
93
|
-
], 2)) :
|
|
108
|
+
], 2)) : u("", !0)
|
|
94
109
|
]))), 128))
|
|
95
110
|
])
|
|
96
111
|
], 2))), 128))
|
|
97
112
|
])
|
|
98
|
-
],
|
|
113
|
+
], 10, x)) : u("", !0);
|
|
99
114
|
}
|
|
100
|
-
const
|
|
115
|
+
const F = /* @__PURE__ */ w($, [["render", A]]);
|
|
101
116
|
export {
|
|
102
|
-
|
|
117
|
+
F as default
|
|
103
118
|
};
|
|
104
119
|
//# sourceMappingURL=NeonTreeMenu.vue.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NeonTreeMenu.vue.es.js","sources":["../../../../src/components/navigation/tree-menu/NeonTreeMenu.vue"],"sourcesContent":["<template>\n <nav
|
|
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': section.expanded || expandAll,\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 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=\"{ 'neon-tree-menu__sub-menu--expanded': expandAll || link.expanded }\"\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","_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,2 +1,2 @@
|
|
|
1
|
-
"use strict";const t=require("
|
|
1
|
+
"use strict";const t=require("../../../common/enums/NeonFunctionalColor.cjs.js"),i=require("../../../common/enums/NeonHorizontalPosition.cjs.js"),l=require("../../../common/enums/NeonSize.cjs.js"),a=require("../../../common/enums/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;
|
|
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 {
|
|
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 '@/common/enums/NeonFunctionalColor';\nimport { NeonHorizontalPosition } from '@/common/enums/NeonHorizontalPosition';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonVerticalPosition } from '@/common/enums/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":"oYAcAA,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,14 +1,15 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { NeonSize as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
|
|
1
|
+
import { NeonFunctionalColor as n } from "../../../common/enums/NeonFunctionalColor.es.js";
|
|
2
|
+
import { NeonHorizontalPosition as l } from "../../../common/enums/NeonHorizontalPosition.es.js";
|
|
3
|
+
import { NeonSize as i } from "../../../common/enums/NeonSize.es.js";
|
|
4
|
+
import { NeonVerticalPosition as a } from "../../../common/enums/NeonVerticalPosition.es.js";
|
|
5
|
+
import r from "../expansion-indicator/NeonExpansionIndicator.vue.es.js";
|
|
6
|
+
import d from "../icon/NeonIcon.vue.es.js";
|
|
7
|
+
import { defineComponent as p } from "vue";
|
|
8
|
+
const S = p({
|
|
8
9
|
name: "NeonExpansionPanel",
|
|
9
10
|
components: {
|
|
10
|
-
NeonExpansionIndicator:
|
|
11
|
-
NeonIcon:
|
|
11
|
+
NeonExpansionIndicator: r,
|
|
12
|
+
NeonIcon: d
|
|
12
13
|
},
|
|
13
14
|
props: {
|
|
14
15
|
/**
|
|
@@ -18,7 +19,7 @@ const g = t({
|
|
|
18
19
|
/**
|
|
19
20
|
* The label of the expansion button
|
|
20
21
|
*/
|
|
21
|
-
label: { type: String
|
|
22
|
+
label: { type: String },
|
|
22
23
|
/**
|
|
23
24
|
* Provide an id to support aria-controls. The id will be placed on the expansion panel content wrapper and the
|
|
24
25
|
* aria-controls on the header (triggering the expansion).
|
|
@@ -31,15 +32,19 @@ const g = t({
|
|
|
31
32
|
/**
|
|
32
33
|
* The position of the expansion button. This can be located above the content to expand or below it.
|
|
33
34
|
*/
|
|
34
|
-
position: { type: String, default:
|
|
35
|
+
position: { type: String, default: a.Top },
|
|
36
|
+
/**
|
|
37
|
+
* The position of the expansion button. This can be located above the content to expand or below it.
|
|
38
|
+
*/
|
|
39
|
+
indicatorPosition: { type: String, default: l.Right },
|
|
35
40
|
/**
|
|
36
41
|
* The size of the expansion panel button.
|
|
37
42
|
*/
|
|
38
|
-
size: { type: String, default:
|
|
43
|
+
size: { type: String, default: i.Medium },
|
|
39
44
|
/**
|
|
40
45
|
* The color of the expansion panel button.
|
|
41
46
|
*/
|
|
42
|
-
color: { type: String, default:
|
|
47
|
+
color: { type: String, default: n.Neutral },
|
|
43
48
|
/**
|
|
44
49
|
* Whether the label and expansion indicator should be flush with the width of the container.
|
|
45
50
|
*/
|
|
@@ -56,8 +61,8 @@ const g = t({
|
|
|
56
61
|
*/
|
|
57
62
|
"update:modelValue"
|
|
58
63
|
],
|
|
59
|
-
setup(e, { emit: o }) {
|
|
60
|
-
return {
|
|
64
|
+
setup(e, { emit: o, slots: t }) {
|
|
65
|
+
return !e.label && !t.header && console.error("A label or a header slot most be provided to the NeonExpansionPanel component"), {
|
|
61
66
|
toggleExpanded: () => {
|
|
62
67
|
e.disabled || o("update:modelValue", !e.modelValue);
|
|
63
68
|
}
|
|
@@ -65,6 +70,6 @@ const g = t({
|
|
|
65
70
|
}
|
|
66
71
|
});
|
|
67
72
|
export {
|
|
68
|
-
|
|
73
|
+
S as default
|
|
69
74
|
};
|
|
70
75
|
//# sourceMappingURL=NeonExpansionPanel.es.js.map
|