@aotearoan/neon 18.2.2 → 18.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/feedback/note/NeonNote.cjs.js +1 -1
- package/dist/components/feedback/note/NeonNote.cjs.js.map +1 -1
- package/dist/components/feedback/note/NeonNote.es.js +20 -10
- package/dist/components/feedback/note/NeonNote.es.js.map +1 -1
- package/dist/components/feedback/note/NeonNote.vue.cjs.js +1 -1
- package/dist/components/feedback/note/NeonNote.vue.cjs.js.map +1 -1
- package/dist/components/feedback/note/NeonNote.vue.es.js +42 -25
- package/dist/components/feedback/note/NeonNote.vue.es.js.map +1 -1
- package/dist/src/components/feedback/note/NeonNote.d.ts +19 -2
- package/package.json +1 -1
- package/src/sass/components/_note.scss +58 -14
- package/src/sass/global/_base-html.scss +0 -14
- package/src/sass/includes/_dependencies.scss +1 -1
- package/src/sass/variables.scss +25 -11
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const n=require("vue"),e=require("../../../common/enums/NeonFunctionalColor.cjs.js"),
|
|
1
|
+
"use strict";const n=require("vue"),e=require("../../../common/enums/NeonFunctionalColor.cjs.js"),r=require("../../presentation/icon/NeonIcon.vue.cjs.js"),l=require("../../user-input/button/NeonButton.vue.cjs.js"),i=require("../../layout/inline/NeonInline.vue.cjs.js"),s=require("../../layout/stack/NeonStack.vue.cjs.js"),a=n.defineComponent({name:"NeonNote",components:{NeonButton:l,NeonIcon:r,NeonInline:i,NeonStack:s},props:{title:{type:String},color:{type:String,default:e.NeonFunctionalColor.LowContrast},closable:{type:Boolean,default:!1},icon:{type:Boolean,default:!0},ariaLabelCloseNote:{type:String,default:"Close note"}},emits:["close-note"],setup(o,{emit:t,slots:c}){return{iconName:n.computed(()=>{if(o.icon)switch(o.color){case e.NeonFunctionalColor.Info:return"info-circle";case e.NeonFunctionalColor.Success:return"check-circle";case e.NeonFunctionalColor.Warn:return"exclamation-circle";case e.NeonFunctionalColor.Error:return"times-circle";default:return}}),slots:c,closeNote:()=>{t("close-note")}}}});module.exports=a;
|
|
2
2
|
//# sourceMappingURL=NeonNote.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NeonNote.cjs.js","sources":["../../../../src/components/feedback/note/NeonNote.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\n\n/**\n * NeonNote is a component for displaying important information to the user, such as - notes, hints or quotes.\n */\nexport default defineComponent({\n name: 'NeonNote',\n components: {\n NeonIcon,\n
|
|
1
|
+
{"version":3,"file":"NeonNote.cjs.js","sources":["../../../../src/components/feedback/note/NeonNote.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInline from '@/components/layout/inline/NeonInline.vue';\nimport NeonStack from '@/components/layout/stack/NeonStack.vue';\n\n/**\n * NeonNote is a component for displaying important information to the user, such as - notes, hints or quotes.\n */\nexport default defineComponent({\n name: 'NeonNote',\n components: {\n NeonButton,\n NeonIcon,\n NeonInline,\n NeonStack,\n },\n props: {\n /**\n * An optional title to be displayed above the note description (aka slot contents).\n */\n title: { type: String },\n /**\n * The color of the note. In the case of the colors info, success, warn and error an icon will also be displayed to\n * further enhance user comprehension.\n */\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n /**\n * Whether the note has a close button\n */\n closable: { type: Boolean, default: false },\n /**\n * Display the associated icon for info, success, warn and error colors.\n */\n icon: { type: Boolean, default: true },\n /**\n * Note close button aria label.\n */\n ariaLabelCloseNote: { type: String, default: 'Close note' },\n },\n emits: [\n /**\n * emitted when the user clicks the close button on the note\n * @type {void}\n */\n 'close-note',\n ],\n setup(props, { emit, slots }) {\n const iconName = computed(() => {\n if (props.icon) {\n switch (props.color) {\n case NeonFunctionalColor.Info:\n return 'info-circle';\n case NeonFunctionalColor.Success:\n return 'check-circle';\n case NeonFunctionalColor.Warn:\n return 'exclamation-circle';\n case NeonFunctionalColor.Error:\n return 'times-circle';\n default:\n return undefined;\n }\n }\n\n return undefined;\n });\n\n const closeNote = () => {\n emit('close-note');\n };\n\n return {\n iconName,\n slots,\n closeNote,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonIcon","NeonInline","NeonStack","NeonFunctionalColor","props","emit","slots","computed"],"mappings":"kUAUAA,EAAeC,kBAAgB,CAC7B,KAAM,WACN,WAAY,CACV,WAAAC,EACA,SAAAC,EACA,WAAAC,EACA,UAAAC,CACF,EACA,MAAO,CAIL,MAAO,CAAE,KAAM,MAAO,EAKtB,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,WAAY,EAI7F,SAAU,CAAE,KAAM,QAAS,QAAS,EAAM,EAI1C,KAAM,CAAE,KAAM,QAAS,QAAS,EAAK,EAIrC,mBAAoB,CAAE,KAAM,OAAQ,QAAS,YAAa,CAC5D,EACA,MAAO,CAKL,YACF,EACA,MAAMC,EAAO,CAAE,KAAAC,EAAM,MAAAC,GAAS,CAwBrB,MAAA,CACL,SAxBeC,EAAAA,SAAS,IAAM,CAC9B,GAAIH,EAAM,KACR,OAAQA,EAAM,MAAO,CACnB,KAAKD,EAAoB,oBAAA,KAChB,MAAA,cACT,KAAKA,EAAoB,oBAAA,QAChB,MAAA,eACT,KAAKA,EAAoB,oBAAA,KAChB,MAAA,qBACT,KAAKA,EAAoB,oBAAA,MAChB,MAAA,eACT,QACS,MACX,CAGK,CACR,EAQC,MAAAG,EACA,UAPgB,IAAM,CACtBD,EAAK,YAAY,CAAA,CAMjB,CAEJ,CACF,CAAC"}
|
|
@@ -1,16 +1,25 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as r, computed as c } from "vue";
|
|
2
2
|
import { NeonFunctionalColor as e } from "../../../common/enums/NeonFunctionalColor.es.js";
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
3
|
+
import i from "../../presentation/icon/NeonIcon.vue.es.js";
|
|
4
|
+
import l from "../../user-input/button/NeonButton.vue.es.js";
|
|
5
|
+
import a from "../../layout/inline/NeonInline.vue.es.js";
|
|
6
|
+
import s from "../../layout/stack/NeonStack.vue.es.js";
|
|
7
|
+
const S = r({
|
|
6
8
|
name: "NeonNote",
|
|
7
9
|
components: {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
+
NeonButton: l,
|
|
11
|
+
NeonIcon: i,
|
|
12
|
+
NeonInline: a,
|
|
13
|
+
NeonStack: s
|
|
10
14
|
},
|
|
11
15
|
props: {
|
|
12
16
|
/**
|
|
13
|
-
*
|
|
17
|
+
* An optional title to be displayed above the note description (aka slot contents).
|
|
18
|
+
*/
|
|
19
|
+
title: { type: String },
|
|
20
|
+
/**
|
|
21
|
+
* The color of the note. In the case of the colors info, success, warn and error an icon will also be displayed to
|
|
22
|
+
* further enhance user comprehension.
|
|
14
23
|
*/
|
|
15
24
|
color: { type: String, default: e.LowContrast },
|
|
16
25
|
/**
|
|
@@ -33,9 +42,9 @@ const p = n({
|
|
|
33
42
|
*/
|
|
34
43
|
"close-note"
|
|
35
44
|
],
|
|
36
|
-
setup(o, { emit: t }) {
|
|
45
|
+
setup(o, { emit: t, slots: n }) {
|
|
37
46
|
return {
|
|
38
|
-
iconName:
|
|
47
|
+
iconName: c(() => {
|
|
39
48
|
if (o.icon)
|
|
40
49
|
switch (o.color) {
|
|
41
50
|
case e.Info:
|
|
@@ -50,6 +59,7 @@ const p = n({
|
|
|
50
59
|
return;
|
|
51
60
|
}
|
|
52
61
|
}),
|
|
62
|
+
slots: n,
|
|
53
63
|
closeNote: () => {
|
|
54
64
|
t("close-note");
|
|
55
65
|
}
|
|
@@ -57,6 +67,6 @@ const p = n({
|
|
|
57
67
|
}
|
|
58
68
|
});
|
|
59
69
|
export {
|
|
60
|
-
|
|
70
|
+
S as default
|
|
61
71
|
};
|
|
62
72
|
//# sourceMappingURL=NeonNote.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NeonNote.es.js","sources":["../../../../src/components/feedback/note/NeonNote.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\n\n/**\n * NeonNote is a component for displaying important information to the user, such as - notes, hints or quotes.\n */\nexport default defineComponent({\n name: 'NeonNote',\n components: {\n NeonIcon,\n
|
|
1
|
+
{"version":3,"file":"NeonNote.es.js","sources":["../../../../src/components/feedback/note/NeonNote.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInline from '@/components/layout/inline/NeonInline.vue';\nimport NeonStack from '@/components/layout/stack/NeonStack.vue';\n\n/**\n * NeonNote is a component for displaying important information to the user, such as - notes, hints or quotes.\n */\nexport default defineComponent({\n name: 'NeonNote',\n components: {\n NeonButton,\n NeonIcon,\n NeonInline,\n NeonStack,\n },\n props: {\n /**\n * An optional title to be displayed above the note description (aka slot contents).\n */\n title: { type: String },\n /**\n * The color of the note. In the case of the colors info, success, warn and error an icon will also be displayed to\n * further enhance user comprehension.\n */\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n /**\n * Whether the note has a close button\n */\n closable: { type: Boolean, default: false },\n /**\n * Display the associated icon for info, success, warn and error colors.\n */\n icon: { type: Boolean, default: true },\n /**\n * Note close button aria label.\n */\n ariaLabelCloseNote: { type: String, default: 'Close note' },\n },\n emits: [\n /**\n * emitted when the user clicks the close button on the note\n * @type {void}\n */\n 'close-note',\n ],\n setup(props, { emit, slots }) {\n const iconName = computed(() => {\n if (props.icon) {\n switch (props.color) {\n case NeonFunctionalColor.Info:\n return 'info-circle';\n case NeonFunctionalColor.Success:\n return 'check-circle';\n case NeonFunctionalColor.Warn:\n return 'exclamation-circle';\n case NeonFunctionalColor.Error:\n return 'times-circle';\n default:\n return undefined;\n }\n }\n\n return undefined;\n });\n\n const closeNote = () => {\n emit('close-note');\n };\n\n return {\n iconName,\n slots,\n closeNote,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonIcon","NeonInline","NeonStack","NeonFunctionalColor","props","emit","slots","computed"],"mappings":";;;;;;AAUA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,EACF;AAAA,EACA,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO,EAAE,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKtB,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,YAAY;AAAA;AAAA;AAAA;AAAA,IAI7F,UAAU,EAAE,MAAM,SAAS,SAAS,GAAM;AAAA;AAAA;AAAA;AAAA,IAI1C,MAAM,EAAE,MAAM,SAAS,SAAS,GAAK;AAAA;AAAA;AAAA;AAAA,IAIrC,oBAAoB,EAAE,MAAM,QAAQ,SAAS,aAAa;AAAA,EAC5D;AAAA,EACA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EACF;AAAA,EACA,MAAMC,GAAO,EAAE,MAAAC,GAAM,OAAAC,KAAS;AAwBrB,WAAA;AAAA,MACL,UAxBeC,EAAS,MAAM;AAC9B,YAAIH,EAAM;AACR,kBAAQA,EAAM,OAAO;AAAA,YACnB,KAAKD,EAAoB;AAChB,qBAAA;AAAA,YACT,KAAKA,EAAoB;AAChB,qBAAA;AAAA,YACT,KAAKA,EAAoB;AAChB,qBAAA;AAAA,YACT,KAAKA,EAAoB;AAChB,qBAAA;AAAA,YACT;AACS;AAAA,UACX;AAAA,MAGK,CACR;AAAA,MAQC,OAAAG;AAAA,MACA,WAPgB,MAAM;AACtB,QAAAD,EAAK,YAAY;AAAA,MAAA;AAAA,IAMjB;AAAA,EAEJ;AACF,CAAC;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const
|
|
1
|
+
"use strict";const r=require("./NeonNote.cjs.js"),e=require("vue"),c=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),a={class:"neon-note__container"},i={key:1,class:"neon-note__title"};function p(o,_,m,d,N,k){const n=e.resolveComponent("neon-icon"),t=e.resolveComponent("neon-inline"),l=e.resolveComponent("neon-stack"),s=e.resolveComponent("neon-button");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([[`neon-note--${o.color}`,{"neon-note--with-title":o.title,"neon-note--with-title-only":o.title&&!o.slots.default}],"neon-note"]),role:"note"},[e.createElementVNode("div",a,[e.createVNode(l,{gap:"s"},{default:e.withCtx(()=>[e.createVNode(t,{gap:"s"},{default:e.withCtx(()=>[o.iconName?(e.openBlock(),e.createBlock(n,{key:0,color:o.color,name:o.iconName,class:"neon-note__icon"},null,8,["color","name"])):e.createCommentVNode("",!0),o.title?(e.openBlock(),e.createElementBlock("span",i,e.toDisplayString(o.title),1)):e.createCommentVNode("",!0)]),_:1}),e.renderSlot(o.$slots,"default")]),_:3})]),o.closable?(e.openBlock(),e.createBlock(s,{key:0,"aria-label":o.ariaLabelCloseNote,circular:!0,transparent:!0,"button-style":"text",class:"neon-note__close",icon:"times",size:"s",tabindex:"0",onClick:o.closeNote,onKeydown:[e.withKeys(o.closeNote,["enter"]),e.withKeys(e.withModifiers(o.closeNote,["stop"]),["space"])]},null,8,["aria-label","onClick","onKeydown"])):e.createCommentVNode("",!0)],2)}const u=c(r,[["render",p]]);module.exports=u;
|
|
2
2
|
//# sourceMappingURL=NeonNote.vue.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NeonNote.vue.cjs.js","sources":["../../../../src/components/feedback/note/NeonNote.vue"],"sourcesContent":["<template>\n <div
|
|
1
|
+
{"version":3,"file":"NeonNote.vue.cjs.js","sources":["../../../../src/components/feedback/note/NeonNote.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n `neon-note--${color}`,\n { 'neon-note--with-title': title, 'neon-note--with-title-only': title && !slots.default },\n ]\"\n class=\"neon-note\"\n role=\"note\"\n >\n <div class=\"neon-note__container\">\n <neon-stack gap=\"s\">\n <neon-inline gap=\"s\">\n <neon-icon v-if=\"iconName\" :color=\"color\" :name=\"iconName\" class=\"neon-note__icon\" />\n <span v-if=\"title\" class=\"neon-note__title\">{{ title }}</span>\n </neon-inline>\n <!-- @slot the contents of the note description -->\n <slot></slot>\n </neon-stack>\n </div>\n <neon-button\n v-if=\"closable\"\n :aria-label=\"ariaLabelCloseNote\"\n :circular=\"true\"\n :transparent=\"true\"\n button-style=\"text\"\n class=\"neon-note__close\"\n icon=\"times\"\n size=\"s\"\n tabindex=\"0\"\n @click=\"closeNote\"\n @keydown.enter=\"closeNote\"\n @keydown.space.stop=\"closeNote\"\n ></neon-button>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonNote.ts\" />\n"],"names":["_hoisted_2","_resolveComponent","_createElementBlock","_normalizeClass","_ctx","_hoisted_1","_component_neon_stack","_component_neon_inline","_openBlock","_createBlock","_component_neon_icon","_component_neon_button"],"mappings":"oKAa6BA,EAAwB,0KAoB7CC,EAAA,iBAAA,aAAA,WA/B0B,UAAA,EAAKC,EAAA,mBAAA,MAAA,CAAqC,MAAAC,EAAA,eAAA,CAAA,eAIvDC,EAAA,KAAA,GACjB,CAAI,wBAAOA,EAAA,MAAA,6BAAAA,EAAA,OAAA,CAAAA,EAAA,MAAA,OAAA,iBAEX,KAAA,oCAKkBC,EAAA,eAAAC,EAAA,CAAA,IAHD,GAAG,EAAI,uBACmE,eAA5DC,EAAA,CAAA,IAAA,GAAA,EAAA,uBAA4D,aAAzDC,YAAY,EAAAC,EAAA,YAAAC,EAAA,CAAG,MAAgB,MAAMN,EAAiB,6CACjE,EAAA,KAAA,EAAA,CAAA,QAAA,MAAA,CAAA,KAA6C,mBAAA,GAAA,EAAA,oHAGnD,EAAA,2CAID,gBACbI,YAAA,IAA8B,YAAAG,EAAA,CAC9B,IAAA,EACA,aAAiBP,EAAA,mBAClB,SAAA,GACA,YAAwB,GACxB,eAAY,OACZ,MAAQ,mBACR,KAAA,QACC,KAAA,IACA,SAAO,cAAiB"}
|
|
@@ -1,42 +1,59 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { resolveComponent as
|
|
3
|
-
import
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import u from "./NeonNote.es.js";
|
|
2
|
+
import { resolveComponent as o, openBlock as n, createElementBlock as l, normalizeClass as _, createElementVNode as f, createVNode as s, withCtx as a, createBlock as i, createCommentVNode as t, toDisplayString as N, renderSlot as k, withKeys as r, withModifiers as y } from "vue";
|
|
3
|
+
import b from "../../../_virtual/_plugin-vue_export-helper.es.js";
|
|
4
|
+
const h = { class: "neon-note__container" }, w = {
|
|
5
|
+
key: 1,
|
|
6
|
+
class: "neon-note__title"
|
|
7
|
+
};
|
|
8
|
+
function C(e, $, g, v, B, K) {
|
|
9
|
+
const c = o("neon-icon"), m = o("neon-inline"), p = o("neon-stack"), d = o("neon-button");
|
|
10
|
+
return n(), l("div", {
|
|
11
|
+
class: _([[
|
|
12
|
+
`neon-note--${e.color}`,
|
|
13
|
+
{ "neon-note--with-title": e.title, "neon-note--with-title-only": e.title && !e.slots.default }
|
|
14
|
+
], "neon-note"]),
|
|
9
15
|
role: "note"
|
|
10
16
|
}, [
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
f("div", h, [
|
|
18
|
+
s(p, { gap: "s" }, {
|
|
19
|
+
default: a(() => [
|
|
20
|
+
s(m, { gap: "s" }, {
|
|
21
|
+
default: a(() => [
|
|
22
|
+
e.iconName ? (n(), i(c, {
|
|
23
|
+
key: 0,
|
|
24
|
+
color: e.color,
|
|
25
|
+
name: e.iconName,
|
|
26
|
+
class: "neon-note__icon"
|
|
27
|
+
}, null, 8, ["color", "name"])) : t("", !0),
|
|
28
|
+
e.title ? (n(), l("span", w, N(e.title), 1)) : t("", !0)
|
|
29
|
+
]),
|
|
30
|
+
_: 1
|
|
31
|
+
}),
|
|
32
|
+
k(e.$slots, "default")
|
|
33
|
+
]),
|
|
34
|
+
_: 3
|
|
35
|
+
})
|
|
19
36
|
]),
|
|
20
|
-
|
|
37
|
+
e.closable ? (n(), i(d, {
|
|
21
38
|
key: 0,
|
|
22
|
-
"aria-label":
|
|
39
|
+
"aria-label": e.ariaLabelCloseNote,
|
|
23
40
|
circular: !0,
|
|
24
|
-
|
|
41
|
+
transparent: !0,
|
|
25
42
|
"button-style": "text",
|
|
26
43
|
class: "neon-note__close",
|
|
27
44
|
icon: "times",
|
|
28
45
|
size: "s",
|
|
29
46
|
tabindex: "0",
|
|
30
|
-
onClick:
|
|
47
|
+
onClick: e.closeNote,
|
|
31
48
|
onKeydown: [
|
|
32
|
-
r(
|
|
33
|
-
r(
|
|
49
|
+
r(e.closeNote, ["enter"]),
|
|
50
|
+
r(y(e.closeNote, ["stop"]), ["space"])
|
|
34
51
|
]
|
|
35
|
-
}, null, 8, ["aria-label", "
|
|
52
|
+
}, null, 8, ["aria-label", "onClick", "onKeydown"])) : t("", !0)
|
|
36
53
|
], 2);
|
|
37
54
|
}
|
|
38
|
-
const
|
|
55
|
+
const S = /* @__PURE__ */ b(u, [["render", C]]);
|
|
39
56
|
export {
|
|
40
|
-
|
|
57
|
+
S as default
|
|
41
58
|
};
|
|
42
59
|
//# sourceMappingURL=NeonNote.vue.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NeonNote.vue.es.js","sources":["../../../../src/components/feedback/note/NeonNote.vue"],"sourcesContent":["<template>\n <div
|
|
1
|
+
{"version":3,"file":"NeonNote.vue.es.js","sources":["../../../../src/components/feedback/note/NeonNote.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n `neon-note--${color}`,\n { 'neon-note--with-title': title, 'neon-note--with-title-only': title && !slots.default },\n ]\"\n class=\"neon-note\"\n role=\"note\"\n >\n <div class=\"neon-note__container\">\n <neon-stack gap=\"s\">\n <neon-inline gap=\"s\">\n <neon-icon v-if=\"iconName\" :color=\"color\" :name=\"iconName\" class=\"neon-note__icon\" />\n <span v-if=\"title\" class=\"neon-note__title\">{{ title }}</span>\n </neon-inline>\n <!-- @slot the contents of the note description -->\n <slot></slot>\n </neon-stack>\n </div>\n <neon-button\n v-if=\"closable\"\n :aria-label=\"ariaLabelCloseNote\"\n :circular=\"true\"\n :transparent=\"true\"\n button-style=\"text\"\n class=\"neon-note__close\"\n icon=\"times\"\n size=\"s\"\n tabindex=\"0\"\n @click=\"closeNote\"\n @keydown.enter=\"closeNote\"\n @keydown.space.stop=\"closeNote\"\n ></neon-button>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonNote.ts\" />\n"],"names":["_hoisted_2","_resolveComponent","_createElementBlock","_normalizeClass","_ctx","_hoisted_1","_component_neon_stack","_component_neon_inline","_openBlock","_createBlock","_component_neon_icon","_component_neon_button"],"mappings":";;;6CAa6BA,IAAwB;AAAA;;;;2EAoB7CC,EAAA,aAAA;WA/B0B,GAAKC,EAAA,OAAA;AAAA,IAAqC,OAAAC,EAAA,CAAA;AAAA,oBAIvDC,EAAA,KAAA;AAAA,MACjB,EAAI,yBAAOA,EAAA,OAAA,8BAAAA,EAAA,SAAA,CAAAA,EAAA,MAAA,QAAA;AAAA;IAEX,MAAA;AAAA;aAKkBC,GAAA;AAAA,QAAAC,GAAA,EAAA,KAHD,IAAG,GAAI;AAAA,yBACmE;AAAA,YAA5DC,GAAA,EAAA,KAAA,IAAA,GAAA;AAAA,6BAA4D;AAAA,4BAAzDC,EAAY,GAAAC,EAAAC,GAAA;AAAA,gBAAG;gBAAgB,OAAMN,EAAiB;AAAA;;cACjE,GAAA,MAAA,GAAA,CAAA,SAAA,MAAA,CAAA,OAA6C,IAAA,EAAA;AAAA;;YAGnD,GAAA;AAAA;;;;OAID;AAAA;kBACbI,EAAA,KAA8BG,GAAA;AAAA,MAC9B,KAAA;AAAA,MACA,cAAiBP,EAAA;AAAA,MAClB,UAAA;AAAA,MACA,aAAwB;AAAA,MACxB,gBAAY;AAAA,MACZ,OAAQ;AAAA,MACR,MAAA;AAAA,MACC,MAAA;AAAA,MACA,UAAO;AAAA,iBAAiB;AAAA;;;;;;;;"}
|
|
@@ -4,7 +4,14 @@ import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
|
|
|
4
4
|
*/
|
|
5
5
|
declare const _default: import("vue").DefineComponent<{
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
7
|
+
* An optional title to be displayed above the note description (aka slot contents).
|
|
8
|
+
*/
|
|
9
|
+
title: {
|
|
10
|
+
type: StringConstructor;
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* The color of the note. In the case of the colors info, success, warn and error an icon will also be displayed to
|
|
14
|
+
* further enhance user comprehension.
|
|
8
15
|
*/
|
|
9
16
|
color: {
|
|
10
17
|
type: () => NeonFunctionalColor;
|
|
@@ -33,10 +40,20 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
33
40
|
};
|
|
34
41
|
}, {
|
|
35
42
|
iconName: import("vue").ComputedRef<"info-circle" | "check-circle" | "exclamation-circle" | "times-circle" | undefined>;
|
|
43
|
+
slots: Readonly<{
|
|
44
|
+
[name: string]: import("vue").Slot<any> | undefined;
|
|
45
|
+
}>;
|
|
36
46
|
closeNote: () => void;
|
|
37
47
|
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close-note"[], "close-note", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
38
48
|
/**
|
|
39
|
-
*
|
|
49
|
+
* An optional title to be displayed above the note description (aka slot contents).
|
|
50
|
+
*/
|
|
51
|
+
title: {
|
|
52
|
+
type: StringConstructor;
|
|
53
|
+
};
|
|
54
|
+
/**
|
|
55
|
+
* The color of the note. In the case of the colors info, success, warn and error an icon will also be displayed to
|
|
56
|
+
* further enhance user comprehension.
|
|
40
57
|
*/
|
|
41
58
|
color: {
|
|
42
59
|
type: () => NeonFunctionalColor;
|
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": "18.2.
|
|
4
|
+
"version": "18.2.3",
|
|
5
5
|
"main": "./dist/neon.cjs.js",
|
|
6
6
|
"module": "./dist/neon.es.js",
|
|
7
7
|
"types": "./dist/src/neon.d.ts",
|
|
@@ -6,20 +6,48 @@
|
|
|
6
6
|
.neon-note {
|
|
7
7
|
display: flex;
|
|
8
8
|
flex-direction: row;
|
|
9
|
+
max-width: var(--neon-max-width-note);
|
|
9
10
|
width: 100%;
|
|
10
11
|
margin: 0;
|
|
11
12
|
border-radius: 0 var(--neon-border-radius) var(--neon-border-radius) 0;
|
|
12
13
|
|
|
13
14
|
color: var(--neon-color-note);
|
|
15
|
+
font-size: var(--neon-font-size-note-text);
|
|
16
|
+
font-weight: var(--neon-font-weight-note-text);
|
|
17
|
+
justify-content: space-between;
|
|
18
|
+
|
|
19
|
+
@include responsive.responsive(mobile-large) {
|
|
20
|
+
font-size: var(--neon-font-size-note-text-mobile);
|
|
21
|
+
}
|
|
14
22
|
|
|
15
|
-
|
|
16
|
-
|
|
23
|
+
.neon-inline {
|
|
24
|
+
--neon-gap-desktop-s: var(--neon-space-8);
|
|
25
|
+
--neon-gap-tablet-s: var(--neon-space-8);
|
|
26
|
+
--neon-gap-mobile-s: var(--neon-space-8);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&__title {
|
|
30
|
+
font-size: var(--neon-font-size-note-title);
|
|
31
|
+
font-weight: var(--neon-font-weight-note-title);
|
|
32
|
+
line-height: var(--neon-line-height-one);
|
|
33
|
+
|
|
34
|
+
@include responsive.responsive(mobile-large) {
|
|
35
|
+
font-size: var(--neon-font-size-note-title-mobile);
|
|
36
|
+
}
|
|
17
37
|
}
|
|
18
38
|
|
|
19
39
|
@each $color in palettes.$neon-functional-colors {
|
|
20
40
|
&--#{$color} {
|
|
21
41
|
background-color: var(--neon-background-color-note);
|
|
22
42
|
border-left: var(--neon-border-width-note) var(--neon-border-style) var(--neon-color-#{$color});
|
|
43
|
+
|
|
44
|
+
.neon-note__title {
|
|
45
|
+
@if ($color == low-contrast or $color == high-contrast or $color == neutral) {
|
|
46
|
+
color: var(--neon-color-text-strong);
|
|
47
|
+
} @else {
|
|
48
|
+
color: var(--neon-color-#{$color});
|
|
49
|
+
}
|
|
50
|
+
}
|
|
23
51
|
}
|
|
24
52
|
}
|
|
25
53
|
|
|
@@ -39,18 +67,15 @@
|
|
|
39
67
|
display: inline;
|
|
40
68
|
}
|
|
41
69
|
|
|
42
|
-
justify-content: space-between;
|
|
43
|
-
|
|
44
70
|
&__icon.neon-icon {
|
|
45
|
-
|
|
46
|
-
width: calc(1.5 * var(--neon-font-size-
|
|
47
|
-
|
|
48
|
-
height: calc(1.5 * var(--neon-font-size-
|
|
49
|
-
min-height: calc(1.5 * var(--neon-font-size-m));
|
|
71
|
+
width: calc(1.5 * var(--neon-font-size-s));
|
|
72
|
+
min-width: calc(1.5 * var(--neon-font-size-s));
|
|
73
|
+
height: calc(1.5 * var(--neon-font-size-s));
|
|
74
|
+
min-height: calc(1.5 * var(--neon-font-size-s));
|
|
50
75
|
}
|
|
51
76
|
|
|
52
77
|
&__container {
|
|
53
|
-
|
|
78
|
+
padding: var(--neon-space-12) var(--neon-space-16) var(--neon-space-12) var(--neon-space-20);
|
|
54
79
|
width: 100%;
|
|
55
80
|
justify-items: flex-start;
|
|
56
81
|
align-items: flex-start;
|
|
@@ -74,16 +99,35 @@
|
|
|
74
99
|
}
|
|
75
100
|
}
|
|
76
101
|
}
|
|
102
|
+
|
|
103
|
+
&--with-title-only {
|
|
104
|
+
.neon-note__close {
|
|
105
|
+
align-self: center;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
77
108
|
}
|
|
78
109
|
|
|
79
110
|
blockquote {
|
|
111
|
+
display: flex;
|
|
112
|
+
flex-direction: row;
|
|
113
|
+
width: 100%;
|
|
114
|
+
max-width: var(--neon-max-width-note);
|
|
115
|
+
margin: 0;
|
|
116
|
+
border-radius: 0 var(--neon-border-radius) var(--neon-border-radius) 0;
|
|
117
|
+
padding: var(--neon-space-12) var(--neon-space-16) var(--neon-space-12) var(--neon-space-20);
|
|
80
118
|
color: var(--neon-color-note);
|
|
119
|
+
background-color: var(--neon-background-color-note);
|
|
120
|
+
border-left: var(--neon-border-width-note) var(--neon-border-style) var(--neon-color-primary);
|
|
121
|
+
justify-content: space-between;
|
|
122
|
+
font-size: var(--neon-font-size-note-text);
|
|
123
|
+
font-weight: var(--neon-font-weight-note-text);
|
|
81
124
|
|
|
82
|
-
|
|
83
|
-
|
|
125
|
+
span {
|
|
126
|
+
display: inline;
|
|
84
127
|
}
|
|
85
128
|
|
|
86
|
-
|
|
87
|
-
|
|
129
|
+
@include responsive.responsive(mobile-large) {
|
|
130
|
+
font-size: var(--neon-font-size-note-text-mobile);
|
|
131
|
+
}
|
|
88
132
|
}
|
|
89
133
|
}
|
|
@@ -118,20 +118,6 @@
|
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
120
|
|
|
121
|
-
blockquote {
|
|
122
|
-
display: flex;
|
|
123
|
-
flex-direction: row;
|
|
124
|
-
width: 100%;
|
|
125
|
-
margin: 0;
|
|
126
|
-
border-radius: 0 var(--neon-border-radius) var(--neon-border-radius) 0;
|
|
127
|
-
|
|
128
|
-
span {
|
|
129
|
-
display: inline;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
@include layout.padding(0.85);
|
|
133
|
-
}
|
|
134
|
-
|
|
135
121
|
.neon-monospaced {
|
|
136
122
|
font-family: var(--neon-font-family-monospaced);
|
|
137
123
|
font-variant-ligatures: discretionary-ligatures;
|
package/src/sass/variables.scss
CHANGED
|
@@ -93,24 +93,27 @@
|
|
|
93
93
|
--neon-typography-margin-unit: var(--neon-space-8); // base typography bottom margin unit
|
|
94
94
|
|
|
95
95
|
|
|
96
|
-
--neon-font-size-xxs: calc(var(--neon-base-font-size) / (var(--neon-typography-scale) * var(--neon-typography-scale) * var(--neon-typography-scale)));
|
|
97
|
-
--neon-font-size-xs: calc(var(--neon-base-font-size) / (var(--neon-typography-scale) * var(--neon-typography-scale)));
|
|
98
|
-
--neon-font-size-s: calc(var(--neon-base-font-size) / var(--neon-typography-scale));
|
|
99
96
|
--neon-font-size-m: var(--neon-base-font-size);
|
|
100
|
-
--neon-font-size-
|
|
97
|
+
--neon-font-size-s: calc(var(--neon-font-size-m) / var(--neon-typography-scale));
|
|
98
|
+
--neon-font-size-xs: calc(var(--neon-font-size-s) / var(--neon-typography-scale));
|
|
99
|
+
--neon-font-size-xxs: calc(var(--neon-font-size-xs) / var(--neon-typography-scale));
|
|
100
|
+
|
|
101
|
+
--neon-font-size-l: calc(var(--neon-font-size-m) * var(--neon-typography-scale));
|
|
102
|
+
--neon-font-size-xl: calc(var(--neon-font-size-l) * var(--neon-typography-scale));
|
|
103
|
+
--neon-font-size-xxl: calc(var(--neon-font-size-xl) * var(--neon-typography-scale));
|
|
101
104
|
|
|
102
105
|
--neon-letter-spacing-s: 0.25rem;
|
|
103
106
|
--neon-letter-spacing-m: 0.5rem;
|
|
104
107
|
--neon-letter-spacing-l: 1rem;
|
|
105
108
|
|
|
106
109
|
--neon-h6-size: var(--neon-font-size-l);
|
|
107
|
-
--neon-h5-size:
|
|
108
|
-
--neon-h4-size:
|
|
109
|
-
--neon-h3-size: calc(var(--neon-
|
|
110
|
-
--neon-h2-size: calc(var(--neon-
|
|
111
|
-
--neon-h1-size: calc(var(--neon-
|
|
110
|
+
--neon-h5-size: var(--neon-font-size-xl);
|
|
111
|
+
--neon-h4-size: var(--neon-font-size-xxl);
|
|
112
|
+
--neon-h3-size: calc(var(--neon-font-size-xxl) * var(--neon-typography-scale));
|
|
113
|
+
--neon-h2-size: calc(var(--neon-font-size-xxl) * var(--neon-typography-scale) * var(--neon-typography-scale));
|
|
114
|
+
--neon-h1-size: calc(var(--neon-font-size-xxl) * var(--neon-typography-scale) * var(--neon-typography-scale) * var(--neon-typography-scale));
|
|
112
115
|
/* AKA branding font size, used for landing page & banners etc... */
|
|
113
|
-
--neon-h0-size: calc(var(--neon-
|
|
116
|
+
--neon-h0-size: calc(var(--neon-font-size-xxl) * var(--neon-typography-scale) * var(--neon-typography-scale) * var(--neon-typography-scale) * var(--neon-typography-scale) * var(--neon-typography-scale));
|
|
114
117
|
|
|
115
118
|
--neon-font-weight-lighter: 200;
|
|
116
119
|
--neon-font-weight-normal: 400;
|
|
@@ -131,7 +134,7 @@
|
|
|
131
134
|
--neon-letter-spacing-headings: 0;
|
|
132
135
|
|
|
133
136
|
--neon-line-height-headings-ratio: 1.2;
|
|
134
|
-
--neon-line-height-ratio: 1.
|
|
137
|
+
--neon-line-height-ratio: 1.4;
|
|
135
138
|
--neon-line-height-one: 1.125; // hack for line-height: 1 to prevent cropping of content below the baseline e.g. 'g'
|
|
136
139
|
|
|
137
140
|
--neon-system-font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
|
|
@@ -236,6 +239,17 @@
|
|
|
236
239
|
/* note */
|
|
237
240
|
--neon-border-width-note: 8rem;
|
|
238
241
|
|
|
242
|
+
--neon-font-size-note-title: var(--neon-font-size-xl);
|
|
243
|
+
--neon-font-size-note-title-mobile: var(--neon-font-size-xl);
|
|
244
|
+
|
|
245
|
+
--neon-font-size-note-text: var(--neon-font-size-s);
|
|
246
|
+
--neon-font-size-note-text-mobile: var(--neon-font-size-m);
|
|
247
|
+
|
|
248
|
+
--neon-font-weight-note-title: var(--neon-font-weight-bold);
|
|
249
|
+
--neon-font-weight-note-text: var(--neon-font-weight-semi-bold);
|
|
250
|
+
|
|
251
|
+
--neon-max-width-note: 100%;
|
|
252
|
+
|
|
239
253
|
/* outline */
|
|
240
254
|
--neon-border-width-outline: 1rem;
|
|
241
255
|
|