@aotearoan/neon 10.0.0 → 10.0.2
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/dist/components/navigation/tree-menu/NeonTreeMenu.cjs.js +1 -1
- package/dist/components/navigation/tree-menu/NeonTreeMenu.es.js +4 -3
- package/dist/components/navigation/tree-menu/NeonTreeMenu.es.js.map +1 -1
- package/dist/components/navigation/tree-menu/{NeonTreeMenu.ts_vue_type_script_src_ad293a40_lang.cjs.js → NeonTreeMenu.ts_vue_type_script_src_179b5200_lang.cjs.js} +1 -1
- package/dist/components/navigation/tree-menu/{NeonTreeMenu.ts_vue_type_script_src_ad293a40_lang.cjs.js.map → NeonTreeMenu.ts_vue_type_script_src_179b5200_lang.cjs.js.map} +1 -1
- package/dist/components/navigation/tree-menu/{NeonTreeMenu.ts_vue_type_script_src_ad293a40_lang.es.js → NeonTreeMenu.ts_vue_type_script_src_179b5200_lang.es.js} +1 -1
- package/dist/components/navigation/tree-menu/{NeonTreeMenu.ts_vue_type_script_src_ad293a40_lang.es.js.map → NeonTreeMenu.ts_vue_type_script_src_179b5200_lang.es.js.map} +1 -1
- package/package.json +1 -1
- package/src/sass/components/_button.scss +4 -2
- package/src/sass/components/_input.scss +32 -5
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var i=require("./NeonTreeMenu.
|
|
1
|
+
"use strict";var i=require("./NeonTreeMenu.ts_vue_type_script_src_179b5200_lang.cjs.js"),e=require("vue"),u=require("../../../_virtual/plugin-vue_export-helper.cjs.js");const d={class:"no-style"},c=["onKeydown"],p={class:"no-style neon-tree-menu__links"};function m(n,t,_,y,h,b){const s=e.resolveComponent("neon-link");return n.model?(e.openBlock(),e.createElementBlock("nav",{key:0,class:e.normalizeClass([{"neon-tree-menu--expand-all":n.expandAll},"neon-tree-menu"])},[e.createElementVNode("ul",d,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.model,o=>(e.openBlock(),e.createElementBlock("li",{key:o.key,class:e.normalizeClass([{"neon-tree-menu__section--expanded":o.expanded||n.expandAll,"neon-tree-menu__section--disabled":o.disabled},"neon-tree-menu__section"])},[e.createVNode(s,{"no-style":!0,class:"neon-tree-menu__section-link","outline-style":"none",tabindex:"-1",onClick:l=>!o.disabled&&n.onClick(o.key)},{default:e.withCtx(()=>[e.createElementVNode("span",{class:"neon-tree-menu__section-link-label neon-tree-menu__section-link-label--outline-text",role:"link",tabindex:"0",onKeydown:e.withKeys(e.withModifiers(l=>!o.disabled&&n.onClick(o.key),["stop","prevent"]),["space"])},e.toDisplayString(o.label),41,c)]),_:2},1032,["onClick"]),e.createElementVNode("ul",p,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.children,l=>(e.openBlock(),e.createElementBlock("li",{key:l.key,class:"neon-tree-menu__link-item"},[e.createVNode(s,{href:l.href,"no-style":!0,class:"neon-tree-menu__link","outline-style":"none",tabindex:"-1",onClick:r=>n.onClick(l.key)},{default:e.withCtx(()=>[e.createElementVNode("span",{class:"neon-tree-menu__link-label neon-tree-menu__link-label--outline-text",role:"link",tabindex:"0",onKeydown:[t[0]||(t[0]=e.withKeys(r=>n.click(r),["enter"])),t[1]||(t[1]=e.withKeys(r=>n.click(r),["space"]))],onKeypress:t[2]||(t[2]=e.withKeys(e.withModifiers(()=>{},["prevent"]),["space"]))},e.toDisplayString(l.label),33)]),_:2},1032,["href","onClick"]),l.anchors&&l.anchors.length>0?(e.openBlock(),e.createElementBlock("ul",{key:0,class:e.normalizeClass([{"neon-tree-menu__anchors--expanded":n.expandAll||n.url===l.href},"no-style neon-tree-menu__anchors"])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.anchors,r=>(e.openBlock(),e.createElementBlock("li",{key:r},[e.createVNode(s,{href:`${l.href}#${n.fragment(r)}`,class:"neon-link--no-style neon-tree-menu__anchor","outline-style":"none",tabindex:"-1"},{default:e.withCtx(()=>[e.createElementVNode("span",{class:"neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text",role:"link",tabindex:"0",onKeydown:[t[3]||(t[3]=e.withKeys(a=>n.click(a),["space"])),t[4]||(t[4]=e.withKeys(a=>n.click(a),["enter"]))],onKeypress:t[5]||(t[5]=e.withKeys(e.withModifiers(()=>{},["prevent"]),["space"]))},e.toDisplayString(r),33)]),_:2},1032,["href"])]))),128))],2)):e.createCommentVNode("",!0)]))),128))])],2))),128))])],2)):e.createCommentVNode("",!0)}var k=u(i,[["render",m]]);module.exports=k;
|
|
2
2
|
//# sourceMappingURL=NeonTreeMenu.cjs.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import _sfc_main from "./NeonTreeMenu.
|
|
1
|
+
import _sfc_main from "./NeonTreeMenu.ts_vue_type_script_src_179b5200_lang.es.js";
|
|
2
2
|
import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, createVNode, withCtx, withKeys, withModifiers, toDisplayString, createCommentVNode } from "vue";
|
|
3
3
|
import _export_sfc from "../../../_virtual/plugin-vue_export-helper.es.js";
|
|
4
4
|
const _hoisted_1 = { class: "no-style" };
|
|
@@ -47,7 +47,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
47
47
|
"no-style": true,
|
|
48
48
|
class: "neon-tree-menu__link",
|
|
49
49
|
"outline-style": "none",
|
|
50
|
-
tabindex: "-1"
|
|
50
|
+
tabindex: "-1",
|
|
51
|
+
onClick: ($event) => _ctx.onClick(link.key)
|
|
51
52
|
}, {
|
|
52
53
|
default: withCtx(() => [
|
|
53
54
|
createElementVNode("span", {
|
|
@@ -63,7 +64,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
63
64
|
}, toDisplayString(link.label), 33)
|
|
64
65
|
]),
|
|
65
66
|
_: 2
|
|
66
|
-
}, 1032, ["href"]),
|
|
67
|
+
}, 1032, ["href", "onClick"]),
|
|
67
68
|
link.anchors && link.anchors.length > 0 ? (openBlock(), createElementBlock("ul", {
|
|
68
69
|
key: 0,
|
|
69
70
|
class: normalizeClass([{ "neon-tree-menu__anchors--expanded": _ctx.expandAll || _ctx.url === link.href }, "no-style neon-tree-menu__anchors"])
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NeonTreeMenu.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"NeonTreeMenu.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use strict";var t=require("vue"),i=require("../link/NeonLink.cjs.js"),l=require("vue-router"),p=t.defineComponent({name:"NeonTreeMenu",components:{NeonLink:i},props:{model:{type:Array,required:!0},expandAll:{type:Boolean,default:!1}},emits:["click"],setup(m,{emit:o}){const u=l.useRoute(),n=t.ref(null),c=e=>{const r=e.target;r!=null&&r.parentElement&&r.parentElement.click()},s=e=>{o("click",e)},a=e=>e.toLowerCase().replace(/\s/g,"-");return t.watch(()=>u.path,e=>n.value=e,{immediate:!0}),{url:n,click:c,onClick:s,fragment:a}}});module.exports=p;
|
|
2
|
-
//# sourceMappingURL=NeonTreeMenu.
|
|
2
|
+
//# sourceMappingURL=NeonTreeMenu.ts_vue_type_script_src_179b5200_lang.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NeonTreeMenu.
|
|
1
|
+
{"version":3,"file":"NeonTreeMenu.ts_vue_type_script_src_179b5200_lang.cjs.js","sources":["../../../../src/components/navigation/tree-menu/NeonTreeMenu.ts?vue&type=script&src=179b5200&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 model: { type: Array as () => Array<NeonTreeMenuSectionModel>, required: true },\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 clicks on a menu item\n * @type {string} the key of the clicked on menu item.\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 onClick = (key: string) => {\n emit('click', key);\n };\n\n const fragment = (anchor: string) => {\n return anchor.toLowerCase().replace(/\\s/g, '-');\n };\n\n watch(\n () => route.path,\n (value) => (url.value = value),\n { immediate: true },\n );\n\n return {\n url,\n click,\n onClick,\n fragment,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonLink","props","emit","route","useRoute","url","ref","click","$event","target","onClick","key","fragment","anchor","watch","value"],"mappings":"+FAUAA,EAAeC,kBAAgB,CAC7B,KAAM,eACN,WAAY,CACV,SAAAC,CACF,EACA,MAAO,CAIL,MAAO,CAAE,KAAM,MAAgD,SAAU,EAAK,EAI9E,UAAW,CAAE,KAAM,QAAS,QAAS,EAAM,CAC7C,EACA,MAAO,CAKL,OACF,EACA,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAQC,EAAAA,WACRC,EAAMC,MAAmB,IAAI,EAE7BC,EAASC,GAA0B,CACvC,MAAMC,EAASD,EAAO,OAClBC,GAAA,MAAAA,EAAQ,eACVA,EAAO,cAAc,OACvB,EAGIC,EAAWC,GAAgB,CAC/BT,EAAK,QAASS,CAAG,CAAA,EAGbC,EAAYC,GACTA,EAAO,YAAc,EAAA,QAAQ,MAAO,GAAG,EAGhDC,OAAAA,EAAA,MACE,IAAMX,EAAM,KACXY,GAAWV,EAAI,MAAQU,EACxB,CAAE,UAAW,EAAK,CAAA,EAGb,CACL,IAAAV,EACA,MAAAE,EACA,QAAAG,EACA,SAAAE,CAAA,CAEJ,CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NeonTreeMenu.
|
|
1
|
+
{"version":3,"file":"NeonTreeMenu.ts_vue_type_script_src_179b5200_lang.es.js","sources":["../../../../src/components/navigation/tree-menu/NeonTreeMenu.ts?vue&type=script&src=179b5200&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 model: { type: Array as () => Array<NeonTreeMenuSectionModel>, required: true },\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 clicks on a menu item\n * @type {string} the key of the clicked on menu item.\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 onClick = (key: string) => {\n emit('click', key);\n };\n\n const fragment = (anchor: string) => {\n return anchor.toLowerCase().replace(/\\s/g, '-');\n };\n\n watch(\n () => route.path,\n (value) => (url.value = value),\n { immediate: true },\n );\n\n return {\n url,\n click,\n onClick,\n fragment,\n };\n },\n});\n"],"names":[],"mappings":";;;AAUA,IAAA,YAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IAIL,OAAO,EAAE,MAAM,OAAgD,UAAU,KAAK;AAAA,IAI9E,WAAW,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,EAC7C;AAAA,EACA,OAAO;AAAA,IAKL;AAAA,EACF;AAAA,EACA,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,QAAQ;AACR,UAAA,MAAM,IAAmB,IAAI;AAE7B,UAAA,QAAQ,CAAC,WAA0B;AACvC,YAAM,SAAS,OAAO;AACtB,UAAI,iCAAQ,eAAe;AACzB,eAAO,cAAc;MACvB;AAAA,IAAA;AAGI,UAAA,UAAU,CAAC,QAAgB;AAC/B,WAAK,SAAS,GAAG;AAAA,IAAA;AAGb,UAAA,WAAW,CAAC,WAAmB;AACnC,aAAO,OAAO,YAAc,EAAA,QAAQ,OAAO,GAAG;AAAA,IAAA;AAGhD;AAAA,MACE,MAAM,MAAM;AAAA,MACZ,CAAC,UAAW,IAAI,QAAQ;AAAA,MACxB,EAAE,WAAW,KAAK;AAAA,IAAA;AAGb,WAAA;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;;"}
|
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": "10.0.
|
|
4
|
+
"version": "10.0.2",
|
|
5
5
|
"main": "./dist/neon.cjs.js",
|
|
6
6
|
"module": "./dist/neon.es.js",
|
|
7
7
|
"types": "./dist/src/neon.d.ts",
|
|
@@ -166,8 +166,8 @@
|
|
|
166
166
|
}
|
|
167
167
|
|
|
168
168
|
.neon-icon {
|
|
169
|
-
width: var(--neon-
|
|
170
|
-
height: var(--neon-
|
|
169
|
+
width: var(--neon-h4-size);
|
|
170
|
+
height: var(--neon-h4-size);
|
|
171
171
|
}
|
|
172
172
|
}
|
|
173
173
|
}
|
|
@@ -176,6 +176,7 @@
|
|
|
176
176
|
.neon-button {
|
|
177
177
|
margin-left: 0;
|
|
178
178
|
margin-right: 0;
|
|
179
|
+
cursor: pointer;
|
|
179
180
|
|
|
180
181
|
&--s {
|
|
181
182
|
@include button-small;
|
|
@@ -337,6 +338,7 @@
|
|
|
337
338
|
&:not(.neon-button--text-transparent) {
|
|
338
339
|
background: var(--neon-color-disabled-background);
|
|
339
340
|
}
|
|
341
|
+
|
|
340
342
|
color: var(--neon-color-disabled-text);
|
|
341
343
|
}
|
|
342
344
|
}
|
|
@@ -17,10 +17,33 @@
|
|
|
17
17
|
&.neon-input--with-icon {
|
|
18
18
|
.neon-icon {
|
|
19
19
|
position: absolute;
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
|
|
21
|
+
@if ($size == 's') {
|
|
22
|
+
width: calc(var(--neon-size-#{$size}) - 2.5 * var(--neon-base-space));
|
|
23
|
+
height: calc(var(--neon-size-#{$size}) - 2.5 * var(--neon-base-space));
|
|
24
|
+
top: calc(1.25 * var(--neon-base-space));
|
|
25
|
+
right: calc(1.25 * var(--neon-base-space));
|
|
26
|
+
|
|
27
|
+
padding: calc(0.5 * var(--neon-base-space));
|
|
28
|
+
&.neon-icon--name-close {
|
|
29
|
+
padding: var(--neon-base-space);
|
|
30
|
+
}
|
|
31
|
+
} @else {
|
|
32
|
+
width: calc(var(--neon-size-#{$size}) - 3 * var(--neon-base-space));
|
|
33
|
+
height: calc(var(--neon-size-#{$size}) - 3 * var(--neon-base-space));
|
|
34
|
+
top: calc(1.5 * var(--neon-base-space));
|
|
35
|
+
right: calc(1.5 * var(--neon-base-space));
|
|
36
|
+
|
|
37
|
+
padding: calc(1 * var(--neon-base-space));
|
|
38
|
+
|
|
39
|
+
&.neon-icon--name-close {
|
|
40
|
+
@if ($size == 'l') {
|
|
41
|
+
padding: calc(2.75 * var(--neon-base-space));
|
|
42
|
+
} @else {
|
|
43
|
+
padding: calc(1.75 * var(--neon-base-space));
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
24
47
|
cursor: default;
|
|
25
48
|
border-radius: 50%;
|
|
26
49
|
|
|
@@ -35,7 +58,11 @@
|
|
|
35
58
|
cursor: pointer;
|
|
36
59
|
|
|
37
60
|
&:active {
|
|
38
|
-
|
|
61
|
+
@if ($size == 's') {
|
|
62
|
+
top: calc(1.5 * var(--neon-base-space));
|
|
63
|
+
} @else {
|
|
64
|
+
top: calc(1.75 * var(--neon-base-space));
|
|
65
|
+
}
|
|
39
66
|
}
|
|
40
67
|
}
|
|
41
68
|
}
|