@aotearoan/neon 28.3.0 → 28.4.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/dist/components/feedback/alert/NeonAlert.cjs.js +1 -1
- package/dist/components/feedback/alert/NeonAlert.cjs.js.map +1 -1
- package/dist/components/feedback/alert/NeonAlert.es.js +1 -1
- package/dist/components/feedback/alert/NeonAlert.es.js.map +1 -1
- package/dist/components/feedback/splash-loader/NeonSplashLoader.vue.cjs.js +1 -1
- package/dist/components/feedback/splash-loader/NeonSplashLoader.vue.cjs.js.map +1 -1
- package/dist/components/feedback/splash-loader/NeonSplashLoader.vue.es.js +15 -15
- package/dist/components/feedback/splash-loader/NeonSplashLoader.vue.es.js.map +1 -1
- package/dist/components/layout/card-list/NeonCardList.cjs.js +1 -1
- package/dist/components/layout/card-list/NeonCardList.cjs.js.map +1 -1
- package/dist/components/layout/card-list/NeonCardList.es.js +32 -26
- package/dist/components/layout/card-list/NeonCardList.es.js.map +1 -1
- package/dist/components/layout/card-list/NeonCardList.vue.cjs.js +1 -1
- package/dist/components/layout/card-list/NeonCardList.vue.cjs.js.map +1 -1
- package/dist/components/layout/card-list/NeonCardList.vue.es.js +57 -61
- package/dist/components/layout/card-list/NeonCardList.vue.es.js.map +1 -1
- package/dist/components/layout/list-layout/NeonListLayout.cjs.js +2 -0
- package/dist/components/layout/list-layout/NeonListLayout.cjs.js.map +1 -0
- package/dist/components/layout/list-layout/NeonListLayout.es.js +99 -0
- package/dist/components/layout/list-layout/NeonListLayout.es.js.map +1 -0
- package/dist/components/layout/list-layout/NeonListLayout.vue.cjs.js +2 -0
- package/dist/components/layout/list-layout/NeonListLayout.vue.cjs.js.map +1 -0
- package/dist/components/layout/list-layout/NeonListLayout.vue.es.js +58 -0
- package/dist/components/layout/list-layout/NeonListLayout.vue.es.js.map +1 -0
- package/dist/components/presentation/empty-state/NeonEmptyState.cjs.js +2 -0
- package/dist/components/presentation/empty-state/NeonEmptyState.cjs.js.map +1 -0
- package/dist/components/presentation/empty-state/NeonEmptyState.es.js +62 -0
- package/dist/components/presentation/empty-state/NeonEmptyState.es.js.map +1 -0
- package/dist/components/presentation/empty-state/NeonEmptyState.vue.cjs.js +2 -0
- package/dist/components/presentation/empty-state/NeonEmptyState.vue.cjs.js.map +1 -0
- package/dist/components/presentation/empty-state/NeonEmptyState.vue.es.js +54 -0
- package/dist/components/presentation/empty-state/NeonEmptyState.vue.es.js.map +1 -0
- package/dist/model/presentation/empty-state/NeonEmptyStateType.cjs.js +2 -0
- package/dist/model/presentation/empty-state/NeonEmptyStateType.cjs.js.map +1 -0
- package/dist/model/presentation/empty-state/NeonEmptyStateType.es.js +5 -0
- package/dist/model/presentation/empty-state/NeonEmptyStateType.es.js.map +1 -0
- package/dist/neon.cjs.js +1 -1
- package/dist/neon.es.js +229 -223
- package/dist/neon.es.js.map +1 -1
- package/dist/src/components/layout/card-list/NeonCardList.d.ts +128 -7
- package/dist/src/components/layout/drawer/NeonDrawer.d.ts +1 -1
- package/dist/src/components/layout/list-layout/NeonListLayout.d.ts +2764 -0
- package/dist/src/components/layout/list-layout/NeonListLayout.vue.d.ts +2 -0
- package/dist/src/components/presentation/empty-state/NeonEmptyState.d.ts +613 -0
- package/dist/src/components/presentation/empty-state/NeonEmptyState.vue.d.ts +2 -0
- package/dist/src/model/presentation/empty-state/NeonEmptyStateType.d.ts +9 -0
- package/dist/src/model/user-input/button/NeonButtonModel.d.ts +19 -0
- package/dist/src/neon.d.ts +4 -0
- package/package.json +1 -1
- package/src/sass/components/_card-list.scss +19 -0
- package/src/sass/components/_empty-state.scss +47 -0
- package/src/sass/components/_header.scss +2 -0
- package/src/sass/components/_list-layout.scss +37 -0
- package/src/sass/components/_page-container.scss +1 -0
- package/src/sass/components/components.scss +2 -0
- package/src/sass/core/_transitions.scss +15 -0
- package/src/sass/global/base-html.scss +0 -4
- package/src/sass/includes/_dependencies.scss +2 -0
- package/src/sass/theme.scss +8 -0
- package/src/sass/variables-global.scss +7 -0
- package/dist/components/feedback/alert/container/NeonDialogContainer.cjs2.js +0 -2
- package/dist/components/feedback/alert/container/NeonDialogContainer.cjs2.js.map +0 -1
- package/dist/components/feedback/alert/container/NeonDialogContainer.es2.js +0 -25
- package/dist/components/feedback/alert/container/NeonDialogContainer.es2.js.map +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import N from "./NeonCardList.es.js";
|
|
2
|
-
import { resolveComponent as
|
|
3
|
-
import
|
|
2
|
+
import { resolveComponent as l, openBlock as n, createElementBlock as a, renderSlot as d, createBlock as t, withCtx as r, toDisplayString as i, createCommentVNode as c, createVNode as C, Fragment as p, renderList as v, normalizeClass as u, createElementVNode as L, mergeProps as m } from "vue";
|
|
3
|
+
import S from "../../../_virtual/_plugin-vue_export-helper.es.js";
|
|
4
4
|
const V = { class: "neon-card-list" }, w = {
|
|
5
5
|
key: 0,
|
|
6
6
|
class: "neon-card-list__total"
|
|
@@ -8,82 +8,78 @@ const V = { class: "neon-card-list" }, w = {
|
|
|
8
8
|
key: 0,
|
|
9
9
|
class: "neon-card-list__results-end"
|
|
10
10
|
};
|
|
11
|
-
function O(e, _, F,
|
|
12
|
-
const
|
|
13
|
-
return
|
|
14
|
-
e
|
|
11
|
+
function O(e, _, F, E, T, U) {
|
|
12
|
+
const f = l("neon-inline"), g = l("neon-link"), b = l("neon-selectable-card"), k = l("neon-splash-loader"), y = l("neon-stack"), h = l("neon-button"), $ = l("neon-pagination");
|
|
13
|
+
return n(), a("div", V, [
|
|
14
|
+
d(e.$slots, "filters"),
|
|
15
|
+
e.slots.header || e.loadOnDemand ? (n(), t(f, {
|
|
15
16
|
key: 0,
|
|
16
17
|
class: "neon-card-list__header"
|
|
17
18
|
}, {
|
|
18
|
-
default:
|
|
19
|
-
|
|
20
|
-
e.loadOnDemand ? (
|
|
19
|
+
default: r(() => [
|
|
20
|
+
d(e.$slots, "header"),
|
|
21
|
+
e.loadOnDemand ? (n(), a("span", w, i(e.n(e.items.length)) + " " + i(e.ofLabel) + " " + i(e.n(e.total)), 1)) : c("", !0)
|
|
21
22
|
]),
|
|
22
23
|
_: 3
|
|
23
24
|
})) : c("", !0),
|
|
24
|
-
|
|
25
|
+
C(y, {
|
|
25
26
|
class: "neon-card-list__cards",
|
|
26
27
|
gap: "z"
|
|
27
28
|
}, {
|
|
28
|
-
default:
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
], 2))
|
|
69
|
-
], 64))), 256))
|
|
70
|
-
]),
|
|
71
|
-
_: 3
|
|
72
|
-
})
|
|
29
|
+
default: r(() => [
|
|
30
|
+
(n(!0), a(p, null, v(e.items, (o, s) => (n(), a(p, null, [
|
|
31
|
+
o.href && !o.disabled ? (n(), t(g, {
|
|
32
|
+
key: `${o.model.id ?? s}-link`,
|
|
33
|
+
class: u([e.color && `neon-card-list__link--${e.color}`, "neon-card-list__link"]),
|
|
34
|
+
href: o.href,
|
|
35
|
+
"no-style": "",
|
|
36
|
+
"outline-style": "background"
|
|
37
|
+
}, {
|
|
38
|
+
default: r(() => [
|
|
39
|
+
L("div", B, [
|
|
40
|
+
d(e.$slots, "card", m({ ref_for: !0 }, { model: o.model, index: s }))
|
|
41
|
+
])
|
|
42
|
+
]),
|
|
43
|
+
_: 2
|
|
44
|
+
}, 1032, ["class", "href"])) : e.selectable ? (n(), t(b, {
|
|
45
|
+
key: `${o.model.id ?? s}-selectable`,
|
|
46
|
+
class: u([{
|
|
47
|
+
"neon-card-list__card--disabled": o.disabled,
|
|
48
|
+
"neon-card-list__card--selected": o.selected
|
|
49
|
+
}, "neon-card-list__card neon-card-list__card--selectable"]),
|
|
50
|
+
disabled: o.disabled,
|
|
51
|
+
"model-value": !!o.selected,
|
|
52
|
+
"onUpdate:modelValue": (z) => e.emit("toggle-selected", o.model.id, z)
|
|
53
|
+
}, {
|
|
54
|
+
default: r(() => [
|
|
55
|
+
d(e.$slots, "card", m({ ref_for: !0 }, { model: o.model, index: s }))
|
|
56
|
+
]),
|
|
57
|
+
_: 2
|
|
58
|
+
}, 1032, ["class", "disabled", "model-value", "onUpdate:modelValue"])) : (n(), a("div", {
|
|
59
|
+
key: `${o.model.id ?? s}-link`,
|
|
60
|
+
class: u([{ "neon-card-list__card--disabled": o.disabled }, "neon-card-list__card"])
|
|
61
|
+
}, [
|
|
62
|
+
d(e.$slots, "card", m({ ref_for: !0 }, { model: o.model, index: s }))
|
|
63
|
+
], 2))
|
|
64
|
+
], 64))), 256)),
|
|
65
|
+
e.loading ? (n(), t(k, {
|
|
66
|
+
key: 0,
|
|
67
|
+
color: e.color
|
|
68
|
+
}, null, 8, ["color"])) : c("", !0)
|
|
73
69
|
]),
|
|
74
70
|
_: 3
|
|
75
71
|
}),
|
|
76
|
-
e.loadOnDemand ? (
|
|
77
|
-
e.items.length === e.total ? (
|
|
72
|
+
e.loadOnDemand ? (n(), a(p, { key: 1 }, [
|
|
73
|
+
e.items.length === e.total ? (n(), a("span", D, i(e.endOfResultsLabel), 1)) : (n(), t(h, {
|
|
78
74
|
key: 1,
|
|
79
75
|
"button-style": e.NeonButtonStyle.Text,
|
|
80
76
|
color: e.NeonFunctionalColor.Neutral,
|
|
81
77
|
label: e.showMoreLabel,
|
|
82
78
|
size: e.NeonSize.Small,
|
|
83
79
|
class: "neon-card-list__show-more",
|
|
84
|
-
onClick: _[0] || (_[0] = (
|
|
80
|
+
onClick: _[0] || (_[0] = (o) => e.emit("show-more", o))
|
|
85
81
|
}, null, 8, ["button-style", "color", "label", "size"]))
|
|
86
|
-
], 64)) : e.pagination ? (
|
|
82
|
+
], 64)) : e.pagination ? (n(), t($, {
|
|
87
83
|
key: 2,
|
|
88
84
|
color: e.color,
|
|
89
85
|
"display-first-and-last": e.pagination.displayFirstAndLast,
|
|
@@ -94,8 +90,8 @@ function O(e, _, F, T, E, U) {
|
|
|
94
90
|
}, null, 8, ["color", "display-first-and-last", "page", "page-size", "total", "url-template"])) : c("", !0)
|
|
95
91
|
]);
|
|
96
92
|
}
|
|
97
|
-
const
|
|
93
|
+
const R = /* @__PURE__ */ S(N, [["render", O]]);
|
|
98
94
|
export {
|
|
99
|
-
|
|
95
|
+
R as default
|
|
100
96
|
};
|
|
101
97
|
//# sourceMappingURL=NeonCardList.vue.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NeonCardList.vue.es.js","sources":["../../../../src/components/layout/card-list/NeonCardList.vue"],"sourcesContent":["<template>\n <div class=\"neon-card-list\">\n <neon-inline v-if=\"slots.header || loadOnDemand\" class=\"neon-card-list__header\">\n <!-- @slot slot for providing
|
|
1
|
+
{"version":3,"file":"NeonCardList.vue.es.js","sources":["../../../../src/components/layout/card-list/NeonCardList.vue"],"sourcesContent":["<template>\n <div class=\"neon-card-list\">\n <!-- @slot slot for providing a filter bar component -->\n <slot name=\"filters\"></slot>\n <neon-inline v-if=\"slots.header || loadOnDemand\" class=\"neon-card-list__header\">\n <!-- @slot slot for providing titles for the card list aligned next to the result count -->\n <slot name=\"header\"></slot>\n <span v-if=\"loadOnDemand\" class=\"neon-card-list__total\">{{ n(items.length) }} {{ ofLabel }} {{ n(total) }}</span>\n </neon-inline>\n <neon-stack class=\"neon-card-list__cards\" gap=\"z\">\n <template v-for=\"(item, index) in items\">\n <neon-link\n v-if=\"item.href && !item.disabled\"\n :key=\"`${item.model.id ?? index}-link`\"\n :class=\"color && `neon-card-list__link--${color}`\"\n :href=\"item.href\"\n class=\"neon-card-list__link\"\n no-style\n outline-style=\"background\"\n >\n <div class=\"neon-card-list__card\">\n <!-- @slot slot for rendering card contents, two parameters are available:\n @binding {T} model - the model item to be rendered\n @binding {number} index - the index of the item in the list -->\n <slot name=\"card\" v-bind=\"{ model: item.model, index: index }\"></slot>\n </div>\n </neon-link>\n <neon-selectable-card\n v-else-if=\"selectable\"\n :key=\"`${item.model.id ?? index}-selectable`\"\n :class=\"{\n 'neon-card-list__card--disabled': item.disabled,\n 'neon-card-list__card--selected': item.selected,\n }\"\n :disabled=\"item.disabled\"\n :model-value=\"!!item.selected\"\n class=\"neon-card-list__card neon-card-list__card--selectable\"\n @update:model-value=\"emit('toggle-selected', item.model.id, $event)\"\n >\n <!-- @slot slot for rendering card contents, two parameters are available:\n @binding {T} model - the model item to be rendered\n @binding {number} index - the index of the item in the list -->\n <slot name=\"card\" v-bind=\"{ model: item.model, index: index }\"></slot>\n </neon-selectable-card>\n <div\n v-else\n :key=\"`${item.model.id ?? index}-link`\"\n :class=\"{ 'neon-card-list__card--disabled': item.disabled }\"\n class=\"neon-card-list__card\"\n >\n <!-- @slot slot for rendering card contents, two parameters are available:\n @binding {T} model - the model item to be rendered\n @binding {number} index - the index of the item in the list -->\n <slot name=\"card\" v-bind=\"{ model: item.model, index: index }\"></slot>\n </div>\n </template>\n <neon-splash-loader v-if=\"loading\" :color=\"color\" />\n </neon-stack>\n <template v-if=\"loadOnDemand\">\n <span v-if=\"items.length === total\" class=\"neon-card-list__results-end\">{{ endOfResultsLabel }}</span>\n <neon-button\n v-else\n :button-style=\"NeonButtonStyle.Text\"\n :color=\"NeonFunctionalColor.Neutral\"\n :label=\"showMoreLabel\"\n :size=\"NeonSize.Small\"\n class=\"neon-card-list__show-more\"\n @click=\"emit('show-more', $event)\"\n />\n </template>\n <neon-pagination\n v-else-if=\"pagination\"\n :color=\"color\"\n :display-first-and-last=\"pagination.displayFirstAndLast\"\n :page=\"pagination.page\"\n :page-size=\"pagination.pageSize\"\n :total=\"pagination.total\"\n :url-template=\"pagination.urlTemplate\"\n />\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonCardList.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_3","_openBlock","_createElementBlock","_renderSlot","_ctx","_createBlock","_component_neon_inline","_hoisted_2","_toDisplayString","_createVNode","_component_neon_stack","_Fragment","_renderList","item","index","_component_neon_link","_normalizeClass","_createElementVNode","_mergeProps","_component_neon_selectable_card","$event","_component_neon_splash_loader","_hoisted_4","_component_neon_button","_cache","_component_neon_pagination"],"mappings":";;;AACO,MAAAA,IAAA,EAAA,OAAM,iBAAgB;;EAMG,OAAM;GAavBC,IAAA,EAAA,OAAM,uBAAsB;;EAuCD,OAAM;;;;AA1D9C,SAAAC,EAAA,GAAAC,EA8EM,OA9ENH,GA8EM;AAAA,IA5EJI,EAA4BC,EAAA,QAAA,SAAA;AAAA,IACTA,EAAA,MAAM,UAAUA,EAAA,qBAAnCC,EAIcC,GAAA;AAAA;MAJmC,OAAM;AAAA;iBAErD,MAA2B;AAAA,QAA3BH,EAA2BC,EAAA,QAAA,QAAA;AAAA,QACfA,EAAA,gBAAZH,KAAAC,EAAiH,QAAjHK,GAAiHC,EAAtDJ,EAAA,EAAEA,QAAM,MAAM,CAAA,IAAI,QAAIA,EAAA,OAAO,IAAG,MAACI,EAAGJ,EAAA,EAAEA,EAAA,KAAK,CAAA,GAAA,CAAA;;;;IAExGK,EAgDaC,GAAA;AAAA,MAhDD,OAAM;AAAA,MAAwB,KAAI;AAAA;iBAClC,MAA8B;AAAA,SAAxCT,EAAA,EAAA,GAAAC,EA6CWS,GAAA,MAAAC,EA7CuBR,EAAA,OAAK,CAArBS,GAAMC;UAEdD,EAAK,QAAI,CAAKA,EAAK,iBAD3BR,EAeYU,GAAA;AAAA,YAbT,QAAQF,EAAK,MAAM,MAAMC,CAAK;AAAA,YAC9B,OAAKE,EAAA,CAAEZ,EAAA,SAAK,yBAA6BA,EAAA,KAAK,IAEzC,sBAAsB,CAAA;AAAA,YAD3B,MAAMS,EAAK;AAAA,YAEZ,YAAA;AAAA,YACA,iBAAc;AAAA;uBAEd,MAKM;AAAA,cALNI,EAKM,OALNjB,GAKM;AAAA,gBADJG,EAAsEC,kBAAtEc,EAAsE,EAAA,SAAA,GAAA,GAAA,EAAA,OAAnCL,EAAK,cAAcC,EAAK,CAAA,CAAA;AAAA;;;yCAIlDV,EAAA,mBADbC,EAgBuBc,GAAA;AAAA,YAdpB,QAAQN,EAAK,MAAM,MAAMC,CAAK;AAAA,YAC9B,OAAKE,EAAA,CAAA;AAAA,cAAkD,kCAAAH,EAAK;AAAA,cAAwD,kCAAAA,EAAK;AAAA,eAMpH,uDAAuD,CAAA;AAAA,YAF5D,UAAUA,EAAK;AAAA,YACf,eAAW,CAAA,CAAIA,EAAK;AAAA,YAEpB,uBAAkB,CAAAO,MAAEhB,OAAI,mBAAoBS,EAAK,MAAM,IAAIO,CAAM;AAAA;uBAKlE,MAAsE;AAAA,cAAtEjB,EAAsEC,kBAAtEc,EAAsE,EAAA,SAAA,GAAA,GAAA,EAAA,OAAnCL,EAAK,cAAcC,EAAK,CAAA,CAAA;AAAA;;yFAE7DZ,EAUM,OAAA;AAAA,YARH,QAAQW,EAAK,MAAM,MAAMC,CAAK;AAAA,YAC9B,OAAKE,EAAA,CAAA,EAAA,kCAAsCH,EAAK,SAAQ,GACnD,sBAAsB,CAAA;AAAA;YAK5BV,EAAsEC,kBAAtEc,EAAsE,EAAA,SAAA,GAAA,GAAA,EAAA,OAAnCL,EAAK,cAAcC,EAAK,CAAA,CAAA;AAAA;;QAGrCV,EAAA,gBAA1BC,EAAoDgB,GAAA;AAAA;UAAhB,OAAOjB,EAAA;AAAA;;;;IAE7BA,EAAA,qBAAhBF,EAWWS,GAAA,EAAA,KAAA,EAAA,GAAA;AAAA,MAVGP,EAAA,MAAM,WAAWA,EAAA,cAA7BF,EAAsG,QAAtGoB,GAAsGd,EAA3BJ,EAAA,iBAAiB,GAAA,CAAA,WAC5FC,EAQEkB,GAAA;AAAA;QANC,gBAAcnB,EAAA,gBAAgB;AAAA,QAC9B,OAAOA,EAAA,oBAAoB;AAAA,QAC3B,OAAOA,EAAA;AAAA,QACP,MAAMA,EAAA,SAAS;AAAA,QAChB,OAAM;AAAA,QACL,SAAKoB,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAJ,MAAEhB,EAAA,KAAI,aAAcgB,CAAM;AAAA;cAIvBhB,EAAA,mBADbC,EAQEoB,GAAA;AAAA;MANC,OAAOrB,EAAA;AAAA,MACP,0BAAwBA,EAAA,WAAW;AAAA,MACnC,MAAMA,EAAA,WAAW;AAAA,MACjB,aAAWA,EAAA,WAAW;AAAA,MACtB,OAAOA,EAAA,WAAW;AAAA,MAClB,gBAAcA,EAAA,WAAW;AAAA;;;;"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const t=require("vue"),u=require("../card-list/NeonCardList.vue.cjs.js"),c=require("../../presentation/header/NeonHeader.vue.cjs.js"),d=require("../../../model/common/color/NeonFunctionalColor.cjs.js"),p=require("../../presentation/empty-state/NeonEmptyState.vue.cjs.js"),y=require("../../feedback/splash-loader/NeonSplashLoader.vue.cjs.js"),g=t.defineComponent({name:"NeonListLayout",components:{NeonSplashLoader:y,NeonEmptyState:p,NeonCardList:u,NeonHeader:c},props:{title:{type:String,required:!0},subtitle:{type:String},breadcrumbs:{type:Array,default:()=>[]},backButton:{type:Boolean,default:!0},backLabel:{type:String,default:"Back"},items:{type:Array,required:!0},loading:{type:Boolean},color:{type:String,default:()=>d.NeonFunctionalColor.Brand},selectable:{type:Boolean,default:!1},loadOnDemand:{type:Object},pagination:{type:Object}},emits:["show-more","toggle-selected"],setup(r,{emit:o,slots:n}){const e=t.ref(!0),a=()=>{o("show-more")},i=(s,l)=>{o("toggle-selected",s,l)};return t.watch(()=>r.items,()=>{e.value&&(e.value=!1)},{immediate:!0}),{initializing:e,slots:n,showMore:a,toggleSelected:i}}});module.exports=g;
|
|
2
|
+
//# sourceMappingURL=NeonListLayout.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NeonListLayout.cjs.js","sources":["../../../../src/components/layout/list-layout/NeonListLayout.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, ref, watch } from 'vue';\nimport type { NeonBreadcrumbLink } from '@/model/navigation/breadcrumbs/NeonBreadcrumbLink';\nimport NeonCardList from '@/components/layout/card-list/NeonCardList.vue';\nimport NeonHeader from '@/components/presentation/header/NeonHeader.vue';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport type { NeonLoadOnDemandModel } from '@/model/layout/card-list/NeonLoadOnDemandModel';\nimport type { NeonPaginationModel } from '@/model/navigation/pagination/NeonPaginationModel';\nimport type { NeonCardListModel } from '@/model/layout/card-list/NeonCardListModel';\nimport type { NeonIdentifiable } from '@/model/common/entity/NeonIdentifiable';\nimport type { NeonSelectable } from '@/model/common/entity/NeonSelectable';\nimport NeonEmptyState from '@/components/presentation/empty-state/NeonEmptyState.vue';\nimport NeonSplashLoader from '@/components/feedback/splash-loader/NeonSplashLoader.vue';\n\n/**\n * A page level layout component for displaying a list with a page header, filter bar, card list, pagination & an empty\n * state. Use this component directly inside the NeonPage <em>contents</em> slot.\n */\nexport default defineComponent({\n name: 'NeonListLayout',\n components: {\n NeonSplashLoader,\n NeonEmptyState,\n NeonCardList,\n NeonHeader,\n },\n props: {\n /**\n * The title of the header.\n */\n title: { type: String, required: true },\n /**\n * The subtitle of the header.\n */\n subtitle: { type: String },\n /**\n * Breadcrumbs to display above the header.\n */\n breadcrumbs: { type: Array as () => NeonBreadcrumbLink[], default: () => [] },\n /**\n * Whether to display a back button\n */\n backButton: { type: Boolean, default: true },\n /**\n * Override the label for the back button\n */\n backLabel: { type: String, default: 'Back' },\n /**\n * Items to display as cards. Each item should be a NeonCardListModel.\n */\n items: {\n type: Array as () => Array<NeonCardListModel<NeonIdentifiable | (NeonIdentifiable & NeonSelectable)>>,\n required: true,\n },\n /**\n * Loading state for pagination, set when loading a new page.\n */\n loading: { type: Boolean },\n /**\n * Specify a selection/loading/hover color for the cards.\n */\n color: { type: String as () => NeonFunctionalColor, default: () => NeonFunctionalColor.Brand },\n /**\n * Make cards selectable.\n */\n selectable: { type: Boolean, default: false },\n /**\n * Model for configuring the on demand loading layout.\n */\n loadOnDemand: { type: Object as () => NeonLoadOnDemandModel },\n /**\n * Model for configuring pagination, either pagination or loadOnDemand should be provided.\n */\n pagination: { type: Object as () => NeonPaginationModel },\n },\n emits: [\n /**\n * Emitted when the 'Show more' button is clicked in \"on demand\" mode.\n * @type {void}\n */\n 'show-more',\n /**\n * Emitted when in selectable mode and the selected state of a card is toggled.\n * @type {string, boolean} - the id of the card which is toggled & the new selected state.\n */\n 'toggle-selected',\n ],\n setup(props, { emit, slots }) {\n const initializing = ref<boolean>(true);\n const showMore = () => {\n emit('show-more');\n };\n\n const toggleSelected = (id: string, selected: boolean) => {\n emit('toggle-selected', id, selected);\n };\n\n watch(\n () => props.items,\n () => {\n if (initializing.value) {\n initializing.value = false;\n }\n },\n { immediate: true },\n );\n\n return {\n initializing,\n slots,\n showMore,\n toggleSelected,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonSplashLoader","NeonEmptyState","NeonCardList","NeonHeader","NeonFunctionalColor","props","emit","slots","initializing","ref","showMore","toggleSelected","id","selected","watch"],"mappings":"mWAiBAA,EAAeC,kBAAgB,CAC7B,KAAM,iBACN,WAAY,CACV,iBAAAC,EACA,eAAAC,EACA,aAAAC,EACA,WAAAC,CAAA,EAEF,MAAO,CAIL,MAAO,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIjC,SAAU,CAAE,KAAM,MAAA,EAIlB,YAAa,CAAE,KAAM,MAAqC,QAAS,IAAM,CAAA,CAAC,EAI1E,WAAY,CAAE,KAAM,QAAS,QAAS,EAAA,EAItC,UAAW,CAAE,KAAM,OAAQ,QAAS,MAAA,EAIpC,MAAO,CACL,KAAM,MACN,SAAU,EAAA,EAKZ,QAAS,CAAE,KAAM,OAAA,EAIjB,MAAO,CAAE,KAAM,OAAqC,QAAS,IAAMC,EAAAA,oBAAoB,KAAA,EAIvF,WAAY,CAAE,KAAM,QAAS,QAAS,EAAA,EAItC,aAAc,CAAE,KAAM,MAAA,EAItB,WAAY,CAAE,KAAM,MAAA,CAAoC,EAE1D,MAAO,CAKL,YAKA,iBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,EAAM,MAAAC,GAAS,CAC5B,MAAMC,EAAeC,EAAAA,IAAa,EAAI,EAChCC,EAAW,IAAM,CACrBJ,EAAK,WAAW,CAClB,EAEMK,EAAiB,CAACC,EAAYC,IAAsB,CACxDP,EAAK,kBAAmBM,EAAIC,CAAQ,CACtC,EAEAC,OAAAA,EAAAA,MACE,IAAMT,EAAM,MACZ,IAAM,CACAG,EAAa,QACfA,EAAa,MAAQ,GAEzB,EACA,CAAE,UAAW,EAAA,CAAK,EAGb,CACL,aAAAA,EACA,MAAAD,EACA,SAAAG,EACA,eAAAC,CAAA,CAEJ,CACF,CAAC"}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import { defineComponent as p, ref as m, watch as s } from "vue";
|
|
2
|
+
import u from "../card-list/NeonCardList.vue.es.js";
|
|
3
|
+
import d from "../../presentation/header/NeonHeader.vue.es.js";
|
|
4
|
+
import { NeonFunctionalColor as c } from "../../../model/common/color/NeonFunctionalColor.es.js";
|
|
5
|
+
import f from "../../presentation/empty-state/NeonEmptyState.vue.es.js";
|
|
6
|
+
import y from "../../feedback/splash-loader/NeonSplashLoader.vue.es.js";
|
|
7
|
+
const L = p({
|
|
8
|
+
name: "NeonListLayout",
|
|
9
|
+
components: {
|
|
10
|
+
NeonSplashLoader: y,
|
|
11
|
+
NeonEmptyState: f,
|
|
12
|
+
NeonCardList: u,
|
|
13
|
+
NeonHeader: d
|
|
14
|
+
},
|
|
15
|
+
props: {
|
|
16
|
+
/**
|
|
17
|
+
* The title of the header.
|
|
18
|
+
*/
|
|
19
|
+
title: { type: String, required: !0 },
|
|
20
|
+
/**
|
|
21
|
+
* The subtitle of the header.
|
|
22
|
+
*/
|
|
23
|
+
subtitle: { type: String },
|
|
24
|
+
/**
|
|
25
|
+
* Breadcrumbs to display above the header.
|
|
26
|
+
*/
|
|
27
|
+
breadcrumbs: { type: Array, default: () => [] },
|
|
28
|
+
/**
|
|
29
|
+
* Whether to display a back button
|
|
30
|
+
*/
|
|
31
|
+
backButton: { type: Boolean, default: !0 },
|
|
32
|
+
/**
|
|
33
|
+
* Override the label for the back button
|
|
34
|
+
*/
|
|
35
|
+
backLabel: { type: String, default: "Back" },
|
|
36
|
+
/**
|
|
37
|
+
* Items to display as cards. Each item should be a NeonCardListModel.
|
|
38
|
+
*/
|
|
39
|
+
items: {
|
|
40
|
+
type: Array,
|
|
41
|
+
required: !0
|
|
42
|
+
},
|
|
43
|
+
/**
|
|
44
|
+
* Loading state for pagination, set when loading a new page.
|
|
45
|
+
*/
|
|
46
|
+
loading: { type: Boolean },
|
|
47
|
+
/**
|
|
48
|
+
* Specify a selection/loading/hover color for the cards.
|
|
49
|
+
*/
|
|
50
|
+
color: { type: String, default: () => c.Brand },
|
|
51
|
+
/**
|
|
52
|
+
* Make cards selectable.
|
|
53
|
+
*/
|
|
54
|
+
selectable: { type: Boolean, default: !1 },
|
|
55
|
+
/**
|
|
56
|
+
* Model for configuring the on demand loading layout.
|
|
57
|
+
*/
|
|
58
|
+
loadOnDemand: { type: Object },
|
|
59
|
+
/**
|
|
60
|
+
* Model for configuring pagination, either pagination or loadOnDemand should be provided.
|
|
61
|
+
*/
|
|
62
|
+
pagination: { type: Object }
|
|
63
|
+
},
|
|
64
|
+
emits: [
|
|
65
|
+
/**
|
|
66
|
+
* Emitted when the 'Show more' button is clicked in "on demand" mode.
|
|
67
|
+
* @type {void}
|
|
68
|
+
*/
|
|
69
|
+
"show-more",
|
|
70
|
+
/**
|
|
71
|
+
* Emitted when in selectable mode and the selected state of a card is toggled.
|
|
72
|
+
* @type {string, boolean} - the id of the card which is toggled & the new selected state.
|
|
73
|
+
*/
|
|
74
|
+
"toggle-selected"
|
|
75
|
+
],
|
|
76
|
+
setup(o, { emit: t, slots: r }) {
|
|
77
|
+
const e = m(!0), a = () => {
|
|
78
|
+
t("show-more");
|
|
79
|
+
}, n = (i, l) => {
|
|
80
|
+
t("toggle-selected", i, l);
|
|
81
|
+
};
|
|
82
|
+
return s(
|
|
83
|
+
() => o.items,
|
|
84
|
+
() => {
|
|
85
|
+
e.value && (e.value = !1);
|
|
86
|
+
},
|
|
87
|
+
{ immediate: !0 }
|
|
88
|
+
), {
|
|
89
|
+
initializing: e,
|
|
90
|
+
slots: r,
|
|
91
|
+
showMore: a,
|
|
92
|
+
toggleSelected: n
|
|
93
|
+
};
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
export {
|
|
97
|
+
L as default
|
|
98
|
+
};
|
|
99
|
+
//# sourceMappingURL=NeonListLayout.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NeonListLayout.es.js","sources":["../../../../src/components/layout/list-layout/NeonListLayout.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, ref, watch } from 'vue';\nimport type { NeonBreadcrumbLink } from '@/model/navigation/breadcrumbs/NeonBreadcrumbLink';\nimport NeonCardList from '@/components/layout/card-list/NeonCardList.vue';\nimport NeonHeader from '@/components/presentation/header/NeonHeader.vue';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport type { NeonLoadOnDemandModel } from '@/model/layout/card-list/NeonLoadOnDemandModel';\nimport type { NeonPaginationModel } from '@/model/navigation/pagination/NeonPaginationModel';\nimport type { NeonCardListModel } from '@/model/layout/card-list/NeonCardListModel';\nimport type { NeonIdentifiable } from '@/model/common/entity/NeonIdentifiable';\nimport type { NeonSelectable } from '@/model/common/entity/NeonSelectable';\nimport NeonEmptyState from '@/components/presentation/empty-state/NeonEmptyState.vue';\nimport NeonSplashLoader from '@/components/feedback/splash-loader/NeonSplashLoader.vue';\n\n/**\n * A page level layout component for displaying a list with a page header, filter bar, card list, pagination & an empty\n * state. Use this component directly inside the NeonPage <em>contents</em> slot.\n */\nexport default defineComponent({\n name: 'NeonListLayout',\n components: {\n NeonSplashLoader,\n NeonEmptyState,\n NeonCardList,\n NeonHeader,\n },\n props: {\n /**\n * The title of the header.\n */\n title: { type: String, required: true },\n /**\n * The subtitle of the header.\n */\n subtitle: { type: String },\n /**\n * Breadcrumbs to display above the header.\n */\n breadcrumbs: { type: Array as () => NeonBreadcrumbLink[], default: () => [] },\n /**\n * Whether to display a back button\n */\n backButton: { type: Boolean, default: true },\n /**\n * Override the label for the back button\n */\n backLabel: { type: String, default: 'Back' },\n /**\n * Items to display as cards. Each item should be a NeonCardListModel.\n */\n items: {\n type: Array as () => Array<NeonCardListModel<NeonIdentifiable | (NeonIdentifiable & NeonSelectable)>>,\n required: true,\n },\n /**\n * Loading state for pagination, set when loading a new page.\n */\n loading: { type: Boolean },\n /**\n * Specify a selection/loading/hover color for the cards.\n */\n color: { type: String as () => NeonFunctionalColor, default: () => NeonFunctionalColor.Brand },\n /**\n * Make cards selectable.\n */\n selectable: { type: Boolean, default: false },\n /**\n * Model for configuring the on demand loading layout.\n */\n loadOnDemand: { type: Object as () => NeonLoadOnDemandModel },\n /**\n * Model for configuring pagination, either pagination or loadOnDemand should be provided.\n */\n pagination: { type: Object as () => NeonPaginationModel },\n },\n emits: [\n /**\n * Emitted when the 'Show more' button is clicked in \"on demand\" mode.\n * @type {void}\n */\n 'show-more',\n /**\n * Emitted when in selectable mode and the selected state of a card is toggled.\n * @type {string, boolean} - the id of the card which is toggled & the new selected state.\n */\n 'toggle-selected',\n ],\n setup(props, { emit, slots }) {\n const initializing = ref<boolean>(true);\n const showMore = () => {\n emit('show-more');\n };\n\n const toggleSelected = (id: string, selected: boolean) => {\n emit('toggle-selected', id, selected);\n };\n\n watch(\n () => props.items,\n () => {\n if (initializing.value) {\n initializing.value = false;\n }\n },\n { immediate: true },\n );\n\n return {\n initializing,\n slots,\n showMore,\n toggleSelected,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonSplashLoader","NeonEmptyState","NeonCardList","NeonHeader","NeonFunctionalColor","props","emit","slots","initializing","ref","showMore","toggleSelected","id","selected","watch"],"mappings":";;;;;;AAiBA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,kBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIjC,UAAU,EAAE,MAAM,OAAA;AAAA;AAAA;AAAA;AAAA,IAIlB,aAAa,EAAE,MAAM,OAAqC,SAAS,MAAM,CAAA,EAAC;AAAA;AAAA;AAAA;AAAA,IAI1E,YAAY,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAItC,WAAW,EAAE,MAAM,QAAQ,SAAS,OAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA,IAKZ,SAAS,EAAE,MAAM,QAAA;AAAA;AAAA;AAAA;AAAA,IAIjB,OAAO,EAAE,MAAM,QAAqC,SAAS,MAAMC,EAAoB,MAAA;AAAA;AAAA;AAAA;AAAA,IAIvF,YAAY,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAItC,cAAc,EAAE,MAAM,OAAA;AAAA;AAAA;AAAA;AAAA,IAItB,YAAY,EAAE,MAAM,OAAA;AAAA,EAAoC;AAAA,EAE1D,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,GAAM,OAAAC,KAAS;AAC5B,UAAMC,IAAeC,EAAa,EAAI,GAChCC,IAAW,MAAM;AACrB,MAAAJ,EAAK,WAAW;AAAA,IAClB,GAEMK,IAAiB,CAACC,GAAYC,MAAsB;AACxD,MAAAP,EAAK,mBAAmBM,GAAIC,CAAQ;AAAA,IACtC;AAEA,WAAAC;AAAA,MACE,MAAMT,EAAM;AAAA,MACZ,MAAM;AACJ,QAAIG,EAAa,UACfA,EAAa,QAAQ;AAAA,MAEzB;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK,GAGb;AAAA,MACL,cAAAA;AAAA,MACA,OAAAD;AAAA,MACA,UAAAG;AAAA,MACA,gBAAAC;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const s=require("./NeonListLayout.cjs.js"),o=require("vue"),a=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),i={class:"neon-list-layout"};function d(e,u,b,m,p,g){const t=o.resolveComponent("neon-header"),n=o.resolveComponent("neon-card-list");return o.openBlock(),o.createElementBlock("div",i,[!e.initializing&&e.items.length>0?(o.openBlock(),o.createBlock(t,{key:0,"back-button":e.backButton,"back-label":e.backLabel,breadcrumbs:e.breadcrumbs,subtitle:e.subtitle,title:e.title},o.createSlots({labels:o.withCtx(()=>[o.renderSlot(e.$slots,"labels")]),_:2},[e.items.length>0?{name:"actions",fn:o.withCtx(()=>[o.renderSlot(e.$slots,"actions")]),key:"0"}:void 0]),1032,["back-button","back-label","breadcrumbs","subtitle","title"])):o.createCommentVNode("",!0),o.renderSlot(e.$slots,"note"),e.items.length>0?(o.openBlock(),o.createBlock(n,{key:1,color:e.color,items:e.items,"load-on-demand":e.loadOnDemand,loading:e.loading,pagination:e.pagination,selectable:e.selectable,onShowMore:e.showMore,onToggleSelected:e.toggleSelected},{filters:o.withCtx(()=>[o.renderSlot(e.$slots,"filters")]),header:o.withCtx(()=>[o.renderSlot(e.$slots,"header")]),card:o.withCtx(({model:l,index:r})=>[o.renderSlot(e.$slots,"card",o.normalizeProps(o.guardReactiveProps({model:l,index:r})))]),_:3},8,["color","items","load-on-demand","loading","pagination","selectable","onShowMore","onToggleSelected"])):!e.initializing&&!e.loading&&e.slots.emptyState?o.renderSlot(e.$slots,"emptyState",{key:2}):o.createCommentVNode("",!0)])}const c=a(s,[["render",d]]);module.exports=c;
|
|
2
|
+
//# sourceMappingURL=NeonListLayout.vue.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NeonListLayout.vue.cjs.js","sources":["../../../../src/components/layout/list-layout/NeonListLayout.vue"],"sourcesContent":["<template>\n <div class=\"neon-list-layout\">\n <neon-header\n v-if=\"!initializing && items.length > 0\"\n :back-button=\"backButton\"\n :back-label=\"backLabel\"\n :breadcrumbs=\"breadcrumbs\"\n :subtitle=\"subtitle\"\n :title=\"title\"\n >\n <template #labels>\n <!-- @slot a slot for adding labels/info popovers next to the title -->\n <slot name=\"labels\"></slot>\n </template>\n <template v-if=\"items.length > 0\" #actions>\n <!-- @slot a slot for adding contextual action buttons to the header. The wrapper is provided, just add the\n buttons here in order to apply the correct spacings -->\n <slot name=\"actions\"></slot>\n </template>\n </neon-header>\n <!-- @slot the insert a note into the page -->\n <slot name=\"note\"></slot>\n <neon-card-list\n v-if=\"items.length > 0\"\n :color=\"color\"\n :items=\"items\"\n :load-on-demand=\"loadOnDemand\"\n :loading=\"loading\"\n :pagination=\"pagination\"\n :selectable=\"selectable\"\n @show-more=\"showMore\"\n @toggle-selected=\"toggleSelected\"\n >\n <template #filters>\n <!-- @slot the insert a filter bar above the list -->\n <slot name=\"filters\"></slot>\n </template>\n <template #header>\n <!-- @slot the list header -->\n <slot name=\"header\"></slot>\n </template>\n <template #card=\"{ model, index }\">\n <!-- @slot slot for rendering card contents, two parameters are available:\n @binding {T} model - the model item to be rendered\n @binding {number} index - the index of the item in the list -->\n <slot name=\"card\" v-bind=\"{ model, index }\"></slot>\n </template>\n </neon-card-list>\n <template v-else-if=\"!initializing && !loading && slots.emptyState\">\n <!-- @slot page empty state rendered when there are no list items -->\n <slot name=\"emptyState\"></slot>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonListLayout.ts\" />\n"],"names":["_hoisted_1","_openBlock","_createElementBlock","_ctx","_createBlock","_component_neon_header","_renderSlot","_component_neon_card_list","_withCtx","model","index","_normalizeProps","_guardReactiveProps"],"mappings":"yIACOA,EAAA,CAAA,MAAM,kBAAkB,2GAA7B,OAAAC,YAAA,EAAAC,qBAmDM,MAnDNF,EAmDM,EAjDKG,EAAA,cAAgBA,EAAA,MAAM,OAAM,iBADrCC,EAAAA,YAiBcC,EAAA,OAfX,cAAaF,EAAA,WACb,aAAYA,EAAA,UACZ,YAAaA,EAAA,YACb,SAAUA,EAAA,SACV,MAAOA,EAAA,sBAEG,iBAET,IAA2B,CAA3BG,aAA2BH,EAAA,OAAA,QAAA,UAEbA,EAAA,MAAM,OAAM,QAAO,uBAGjC,IAA4B,CAA5BG,aAA4BH,EAAA,OAAA,SAAA,uHAIhCG,aAAyBH,EAAA,OAAA,MAAA,EAEjBA,EAAA,MAAM,OAAM,iBADpBC,EAAAA,YAyBiBG,EAAA,OAvBd,MAAOJ,EAAA,MACP,MAAOA,EAAA,MACP,iBAAgBA,EAAA,aAChB,QAASA,EAAA,QACT,WAAYA,EAAA,WACZ,WAAYA,EAAA,WACZ,WAAWA,EAAA,SACX,iBAAiBA,EAAA,iBAEP,kBAET,IAA4B,CAA5BG,aAA4BH,EAAA,OAAA,SAAA,IAEnB,iBAET,IAA2B,CAA3BG,aAA2BH,EAAA,OAAA,QAAA,IAElB,KAAIK,EAAAA,QAIb,CAAmD,CAJlC,MAAAC,EAAO,MAAAC,CAAK,IAAA,CAI7BJ,aAAmDH,EAAA,OAAA,OAAAQ,EAAAA,eAAAC,EAAAA,mBAAA,CAAvB,MAAAH,EAAO,MAAAC,CAAK,CAAA,CAAA,CAAA,oHAGtB,CAAAP,EAAA,cAAY,CAAKA,EAAA,SAAWA,EAAA,MAAM,WAEtDG,EAAAA,WAA+BH,EAAA,OAAA,aAAA,CAAA,IAAA,CAAA,CAAA"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import b from "./NeonListLayout.es.js";
|
|
2
|
+
import { resolveComponent as l, openBlock as t, createElementBlock as p, createBlock as a, createSlots as c, withCtx as n, renderSlot as o, createCommentVNode as s, normalizeProps as g, guardReactiveProps as u } from "vue";
|
|
3
|
+
import h from "../../../_virtual/_plugin-vue_export-helper.es.js";
|
|
4
|
+
const k = { class: "neon-list-layout" };
|
|
5
|
+
function f(e, $, S, y, w, B) {
|
|
6
|
+
const i = l("neon-header"), r = l("neon-card-list");
|
|
7
|
+
return t(), p("div", k, [
|
|
8
|
+
!e.initializing && e.items.length > 0 ? (t(), a(i, {
|
|
9
|
+
key: 0,
|
|
10
|
+
"back-button": e.backButton,
|
|
11
|
+
"back-label": e.backLabel,
|
|
12
|
+
breadcrumbs: e.breadcrumbs,
|
|
13
|
+
subtitle: e.subtitle,
|
|
14
|
+
title: e.title
|
|
15
|
+
}, c({
|
|
16
|
+
labels: n(() => [
|
|
17
|
+
o(e.$slots, "labels")
|
|
18
|
+
]),
|
|
19
|
+
_: 2
|
|
20
|
+
}, [
|
|
21
|
+
e.items.length > 0 ? {
|
|
22
|
+
name: "actions",
|
|
23
|
+
fn: n(() => [
|
|
24
|
+
o(e.$slots, "actions")
|
|
25
|
+
]),
|
|
26
|
+
key: "0"
|
|
27
|
+
} : void 0
|
|
28
|
+
]), 1032, ["back-button", "back-label", "breadcrumbs", "subtitle", "title"])) : s("", !0),
|
|
29
|
+
o(e.$slots, "note"),
|
|
30
|
+
e.items.length > 0 ? (t(), a(r, {
|
|
31
|
+
key: 1,
|
|
32
|
+
color: e.color,
|
|
33
|
+
items: e.items,
|
|
34
|
+
"load-on-demand": e.loadOnDemand,
|
|
35
|
+
loading: e.loading,
|
|
36
|
+
pagination: e.pagination,
|
|
37
|
+
selectable: e.selectable,
|
|
38
|
+
onShowMore: e.showMore,
|
|
39
|
+
onToggleSelected: e.toggleSelected
|
|
40
|
+
}, {
|
|
41
|
+
filters: n(() => [
|
|
42
|
+
o(e.$slots, "filters")
|
|
43
|
+
]),
|
|
44
|
+
header: n(() => [
|
|
45
|
+
o(e.$slots, "header")
|
|
46
|
+
]),
|
|
47
|
+
card: n(({ model: d, index: m }) => [
|
|
48
|
+
o(e.$slots, "card", g(u({ model: d, index: m })))
|
|
49
|
+
]),
|
|
50
|
+
_: 3
|
|
51
|
+
}, 8, ["color", "items", "load-on-demand", "loading", "pagination", "selectable", "onShowMore", "onToggleSelected"])) : !e.initializing && !e.loading && e.slots.emptyState ? o(e.$slots, "emptyState", { key: 2 }) : s("", !0)
|
|
52
|
+
]);
|
|
53
|
+
}
|
|
54
|
+
const L = /* @__PURE__ */ h(b, [["render", f]]);
|
|
55
|
+
export {
|
|
56
|
+
L as default
|
|
57
|
+
};
|
|
58
|
+
//# sourceMappingURL=NeonListLayout.vue.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NeonListLayout.vue.es.js","sources":["../../../../src/components/layout/list-layout/NeonListLayout.vue"],"sourcesContent":["<template>\n <div class=\"neon-list-layout\">\n <neon-header\n v-if=\"!initializing && items.length > 0\"\n :back-button=\"backButton\"\n :back-label=\"backLabel\"\n :breadcrumbs=\"breadcrumbs\"\n :subtitle=\"subtitle\"\n :title=\"title\"\n >\n <template #labels>\n <!-- @slot a slot for adding labels/info popovers next to the title -->\n <slot name=\"labels\"></slot>\n </template>\n <template v-if=\"items.length > 0\" #actions>\n <!-- @slot a slot for adding contextual action buttons to the header. The wrapper is provided, just add the\n buttons here in order to apply the correct spacings -->\n <slot name=\"actions\"></slot>\n </template>\n </neon-header>\n <!-- @slot the insert a note into the page -->\n <slot name=\"note\"></slot>\n <neon-card-list\n v-if=\"items.length > 0\"\n :color=\"color\"\n :items=\"items\"\n :load-on-demand=\"loadOnDemand\"\n :loading=\"loading\"\n :pagination=\"pagination\"\n :selectable=\"selectable\"\n @show-more=\"showMore\"\n @toggle-selected=\"toggleSelected\"\n >\n <template #filters>\n <!-- @slot the insert a filter bar above the list -->\n <slot name=\"filters\"></slot>\n </template>\n <template #header>\n <!-- @slot the list header -->\n <slot name=\"header\"></slot>\n </template>\n <template #card=\"{ model, index }\">\n <!-- @slot slot for rendering card contents, two parameters are available:\n @binding {T} model - the model item to be rendered\n @binding {number} index - the index of the item in the list -->\n <slot name=\"card\" v-bind=\"{ model, index }\"></slot>\n </template>\n </neon-card-list>\n <template v-else-if=\"!initializing && !loading && slots.emptyState\">\n <!-- @slot page empty state rendered when there are no list items -->\n <slot name=\"emptyState\"></slot>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonListLayout.ts\" />\n"],"names":["_hoisted_1","_openBlock","_createElementBlock","_ctx","_createBlock","_component_neon_header","_renderSlot","_component_neon_card_list","_withCtx","model","index","_normalizeProps","_guardReactiveProps"],"mappings":";;;AACO,MAAAA,IAAA,EAAA,OAAM,mBAAkB;;;AAA7B,SAAAC,EAAA,GAAAC,EAmDM,OAnDNF,GAmDM;AAAA,KAjDKG,EAAA,gBAAgBA,EAAA,MAAM,SAAM,UADrCC,EAiBcC,GAAA;AAAA;MAfX,eAAaF,EAAA;AAAA,MACb,cAAYA,EAAA;AAAA,MACZ,aAAaA,EAAA;AAAA,MACb,UAAUA,EAAA;AAAA,MACV,OAAOA,EAAA;AAAA;MAEG,UAET,MAA2B;AAAA,QAA3BG,EAA2BH,EAAA,QAAA,QAAA;AAAA;;;MAEbA,EAAA,MAAM,SAAM;cAAO;AAAA,cAGjC,MAA4B;AAAA,UAA5BG,EAA4BH,EAAA,QAAA,SAAA;AAAA;;;;IAIhCG,EAAyBH,EAAA,QAAA,MAAA;AAAA,IAEjBA,EAAA,MAAM,SAAM,UADpBC,EAyBiBG,GAAA;AAAA;MAvBd,OAAOJ,EAAA;AAAA,MACP,OAAOA,EAAA;AAAA,MACP,kBAAgBA,EAAA;AAAA,MAChB,SAASA,EAAA;AAAA,MACT,YAAYA,EAAA;AAAA,MACZ,YAAYA,EAAA;AAAA,MACZ,YAAWA,EAAA;AAAA,MACX,kBAAiBA,EAAA;AAAA;MAEP,WAET,MAA4B;AAAA,QAA5BG,EAA4BH,EAAA,QAAA,SAAA;AAAA;MAEnB,UAET,MAA2B;AAAA,QAA3BG,EAA2BH,EAAA,QAAA,QAAA;AAAA;MAElB,MAAIK,EAIb,CAAmD,EAJlC,OAAAC,GAAO,OAAAC,EAAK,MAAA;AAAA,QAI7BJ,EAAmDH,EAAA,QAAA,QAAAQ,EAAAC,EAAA,EAAvB,OAAAH,GAAO,OAAAC,EAAK,CAAA,CAAA,CAAA;AAAA;;4HAGtB,CAAAP,EAAA,gBAAY,CAAKA,EAAA,WAAWA,EAAA,MAAM,aAEtDG,EAA+BH,EAAA,QAAA,cAAA,EAAA,KAAA,EAAA,CAAA;;;;"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const n=require("vue"),o=require("../../user-input/button/NeonButton.vue.cjs.js"),e=require("../../../model/common/color/NeonFunctionalColor.cjs.js"),r=require("../icon/NeonIcon.vue.cjs.js"),i=require("../../layout/inline/NeonInline.vue.cjs.js"),u=require("../../layout/stack/NeonStack.vue.cjs.js"),c=require("../../../model/user-input/button/NeonButtonStyle.cjs.js"),p=require("../../../model/presentation/empty-state/NeonEmptyStateType.cjs.js"),a=n.defineComponent({name:"NeonEmptyState",components:{NeonButton:o,NeonIcon:r,NeonInline:i,NeonStack:u},props:{image:{type:String},type:{type:String,default:()=>p.NeonEmptyStateType.EmptyState},imageColor:{type:String,default:()=>e.NeonFunctionalColor.Brand},title:{type:String,required:!0},subtitle:{type:String},ctas:{type:Array,default:()=>[]}},emits:["cta-click"],setup:(s,{emit:t})=>({emit:t,NeonButtonStyle:c.NeonButtonStyle,NeonFunctionalColor:e.NeonFunctionalColor})});module.exports=a;
|
|
2
|
+
//# sourceMappingURL=NeonEmptyState.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NeonEmptyState.cjs.js","sources":["../../../../src/components/presentation/empty-state/NeonEmptyState.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport type { NeonButtonModel } from '@/model/user-input/button/NeonButtonModel';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonInline from '@/components/layout/inline/NeonInline.vue';\nimport NeonStack from '@/components/layout/stack/NeonStack.vue';\nimport { NeonButtonStyle } from '@/model/user-input/button/NeonButtonStyle';\nimport { NeonEmptyStateType } from '@/model/presentation/empty-state/NeonEmptyStateType';\n\n/**\n * NeonEmptyState is a component for displaying an empty state message with an image and optional call-to-action buttons.\n * It can also be used to render error pages.\n */\nexport default defineComponent({\n name: 'NeonEmptyState',\n components: {\n NeonButton,\n NeonIcon,\n NeonInline,\n NeonStack,\n },\n props: {\n /**\n * The image to display in the empty state. This is an icon name used by the NeonIcon component, typically an\n * svg illustration.\n */\n image: { type: String },\n /**\n * The type of empty state to render, either an empty state or an error.\n */\n type: { type: String as () => NeonEmptyStateType, default: () => NeonEmptyStateType.EmptyState },\n /**\n * The accent color of the image. This is a functional color from the NeonFunctionalColor enum.\n */\n imageColor: { type: String as () => NeonFunctionalColor, default: () => NeonFunctionalColor.Brand },\n /**\n * The title of the empty state component.\n */\n title: { type: String, required: true },\n /**\n * A subtitle of the empty state component.\n */\n subtitle: { type: String },\n /**\n * A list of CTA buttons to display in the empty state. These are\n * NeonButtonModel objects.\n */\n ctas: { type: Array as () => Array<NeonButtonModel>, default: () => [] },\n },\n emits: [\n /**\n * Emitted when a CTA button is clicked. The index of the button in the ctas array is passed as the first argument.\n * @type {number} The index of the button clicked. This corresponds to the index of the button in the ctas property\n * array.\n */\n 'cta-click',\n ],\n setup: (_props, { emit }) => {\n return {\n emit,\n NeonButtonStyle,\n NeonFunctionalColor,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonIcon","NeonInline","NeonStack","NeonEmptyStateType","NeonFunctionalColor","_props","emit","NeonButtonStyle"],"mappings":"4cAcAA,EAAeC,kBAAgB,CAC7B,KAAM,iBACN,WAAY,CACV,WAAAC,EACA,SAAAC,EACA,WAAAC,EACA,UAAAC,CAAA,EAEF,MAAO,CAKL,MAAO,CAAE,KAAM,MAAA,EAIf,KAAM,CAAE,KAAM,OAAoC,QAAS,IAAMC,EAAAA,mBAAmB,UAAA,EAIpF,WAAY,CAAE,KAAM,OAAqC,QAAS,IAAMC,EAAAA,oBAAoB,KAAA,EAI5F,MAAO,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIjC,SAAU,CAAE,KAAM,MAAA,EAKlB,KAAM,CAAE,KAAM,MAAuC,QAAS,IAAM,CAAA,CAAC,CAAE,EAEzE,MAAO,CAML,WAAA,EAEF,MAAO,CAACC,EAAQ,CAAE,KAAAC,MACT,CACL,KAAAA,EAAA,gBACAC,EAAAA,gBAAA,oBACAH,EAAAA,mBAAA,EAGN,CAAC"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { defineComponent as o } from "vue";
|
|
2
|
+
import r from "../../user-input/button/NeonButton.vue.es.js";
|
|
3
|
+
import { NeonFunctionalColor as t } from "../../../model/common/color/NeonFunctionalColor.es.js";
|
|
4
|
+
import n from "../icon/NeonIcon.vue.es.js";
|
|
5
|
+
import p from "../../layout/inline/NeonInline.vue.es.js";
|
|
6
|
+
import m from "../../layout/stack/NeonStack.vue.es.js";
|
|
7
|
+
import { NeonButtonStyle as i } from "../../../model/user-input/button/NeonButtonStyle.es.js";
|
|
8
|
+
import { NeonEmptyStateType as a } from "../../../model/presentation/empty-state/NeonEmptyStateType.es.js";
|
|
9
|
+
const g = o({
|
|
10
|
+
name: "NeonEmptyState",
|
|
11
|
+
components: {
|
|
12
|
+
NeonButton: r,
|
|
13
|
+
NeonIcon: n,
|
|
14
|
+
NeonInline: p,
|
|
15
|
+
NeonStack: m
|
|
16
|
+
},
|
|
17
|
+
props: {
|
|
18
|
+
/**
|
|
19
|
+
* The image to display in the empty state. This is an icon name used by the NeonIcon component, typically an
|
|
20
|
+
* svg illustration.
|
|
21
|
+
*/
|
|
22
|
+
image: { type: String },
|
|
23
|
+
/**
|
|
24
|
+
* The type of empty state to render, either an empty state or an error.
|
|
25
|
+
*/
|
|
26
|
+
type: { type: String, default: () => a.EmptyState },
|
|
27
|
+
/**
|
|
28
|
+
* The accent color of the image. This is a functional color from the NeonFunctionalColor enum.
|
|
29
|
+
*/
|
|
30
|
+
imageColor: { type: String, default: () => t.Brand },
|
|
31
|
+
/**
|
|
32
|
+
* The title of the empty state component.
|
|
33
|
+
*/
|
|
34
|
+
title: { type: String, required: !0 },
|
|
35
|
+
/**
|
|
36
|
+
* A subtitle of the empty state component.
|
|
37
|
+
*/
|
|
38
|
+
subtitle: { type: String },
|
|
39
|
+
/**
|
|
40
|
+
* A list of CTA buttons to display in the empty state. These are
|
|
41
|
+
* NeonButtonModel objects.
|
|
42
|
+
*/
|
|
43
|
+
ctas: { type: Array, default: () => [] }
|
|
44
|
+
},
|
|
45
|
+
emits: [
|
|
46
|
+
/**
|
|
47
|
+
* Emitted when a CTA button is clicked. The index of the button in the ctas array is passed as the first argument.
|
|
48
|
+
* @type {number} The index of the button clicked. This corresponds to the index of the button in the ctas property
|
|
49
|
+
* array.
|
|
50
|
+
*/
|
|
51
|
+
"cta-click"
|
|
52
|
+
],
|
|
53
|
+
setup: (f, { emit: e }) => ({
|
|
54
|
+
emit: e,
|
|
55
|
+
NeonButtonStyle: i,
|
|
56
|
+
NeonFunctionalColor: t
|
|
57
|
+
})
|
|
58
|
+
});
|
|
59
|
+
export {
|
|
60
|
+
g as default
|
|
61
|
+
};
|
|
62
|
+
//# sourceMappingURL=NeonEmptyState.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NeonEmptyState.es.js","sources":["../../../../src/components/presentation/empty-state/NeonEmptyState.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport type { NeonButtonModel } from '@/model/user-input/button/NeonButtonModel';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonInline from '@/components/layout/inline/NeonInline.vue';\nimport NeonStack from '@/components/layout/stack/NeonStack.vue';\nimport { NeonButtonStyle } from '@/model/user-input/button/NeonButtonStyle';\nimport { NeonEmptyStateType } from '@/model/presentation/empty-state/NeonEmptyStateType';\n\n/**\n * NeonEmptyState is a component for displaying an empty state message with an image and optional call-to-action buttons.\n * It can also be used to render error pages.\n */\nexport default defineComponent({\n name: 'NeonEmptyState',\n components: {\n NeonButton,\n NeonIcon,\n NeonInline,\n NeonStack,\n },\n props: {\n /**\n * The image to display in the empty state. This is an icon name used by the NeonIcon component, typically an\n * svg illustration.\n */\n image: { type: String },\n /**\n * The type of empty state to render, either an empty state or an error.\n */\n type: { type: String as () => NeonEmptyStateType, default: () => NeonEmptyStateType.EmptyState },\n /**\n * The accent color of the image. This is a functional color from the NeonFunctionalColor enum.\n */\n imageColor: { type: String as () => NeonFunctionalColor, default: () => NeonFunctionalColor.Brand },\n /**\n * The title of the empty state component.\n */\n title: { type: String, required: true },\n /**\n * A subtitle of the empty state component.\n */\n subtitle: { type: String },\n /**\n * A list of CTA buttons to display in the empty state. These are\n * NeonButtonModel objects.\n */\n ctas: { type: Array as () => Array<NeonButtonModel>, default: () => [] },\n },\n emits: [\n /**\n * Emitted when a CTA button is clicked. The index of the button in the ctas array is passed as the first argument.\n * @type {number} The index of the button clicked. This corresponds to the index of the button in the ctas property\n * array.\n */\n 'cta-click',\n ],\n setup: (_props, { emit }) => {\n return {\n emit,\n NeonButtonStyle,\n NeonFunctionalColor,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonIcon","NeonInline","NeonStack","NeonEmptyStateType","NeonFunctionalColor","_props","emit","NeonButtonStyle"],"mappings":";;;;;;;;AAcA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,OAAO,EAAE,MAAM,OAAA;AAAA;AAAA;AAAA;AAAA,IAIf,MAAM,EAAE,MAAM,QAAoC,SAAS,MAAMC,EAAmB,WAAA;AAAA;AAAA;AAAA;AAAA,IAIpF,YAAY,EAAE,MAAM,QAAqC,SAAS,MAAMC,EAAoB,MAAA;AAAA;AAAA;AAAA;AAAA,IAI5F,OAAO,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIjC,UAAU,EAAE,MAAM,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKlB,MAAM,EAAE,MAAM,OAAuC,SAAS,MAAM,CAAA,EAAC;AAAA,EAAE;AAAA,EAEzE,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA,EAAA;AAAA,EAEF,OAAO,CAACC,GAAQ,EAAE,MAAAC,SACT;AAAA,IACL,MAAAA;AAAA,IACA,iBAAAC;AAAA,IACA,qBAAAH;AAAA,EAAA;AAGN,CAAC;"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const c=require("./NeonEmptyState.cjs.js"),e=require("vue"),i=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),p={class:"neon-empty-state__title"},m={key:1,class:"neon-h3 neon-empty-state__subtitle"},u={class:"neon-empty-state__description"};function _(o,d,k,h,C,b){const l=e.resolveComponent("neon-icon"),s=e.resolveComponent("neon-button"),r=e.resolveComponent("neon-inline"),a=e.resolveComponent("neon-stack");return e.openBlock(),e.createBlock(a,{class:e.normalizeClass([`neon-empty-state--${o.type}`,"neon-empty-state"]),gap:"l"},{default:e.withCtx(()=>[o.image?(e.openBlock(),e.createBlock(l,{key:0,color:o.imageColor,name:o.image,class:"neon-empty-state__illustration"},null,8,["color","name"])):e.createCommentVNode("",!0),e.createElementVNode("h1",p,e.toDisplayString(o.title),1),o.subtitle?(e.openBlock(),e.createElementBlock("h2",m,e.toDisplayString(o.subtitle),1)):e.createCommentVNode("",!0),e.createElementVNode("div",u,[e.renderSlot(o.$slots,"description")]),o.ctas.length>0?(e.openBlock(),e.createBlock(r,{key:2,class:"neon-empty-state__ctas",gap:"m"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.ctas,(n,t)=>(e.openBlock(),e.createBlock(s,{key:n.label||n.icon,"button-style":n.style||(t===o.ctas.length-1?o.NeonButtonStyle.Solid:o.NeonButtonStyle.Outline),color:n.color||(t===o.ctas.length-1?o.NeonFunctionalColor.Primary:o.NeonFunctionalColor.HighContrast),disabled:!!n.disabled,href:n.href,icon:n.icon,label:n.label,class:"neon-empty-state__cta",onClick:g=>!n.href&&o.emit("cta-click",t)},null,8,["button-style","color","disabled","href","icon","label","onClick"]))),128))]),_:1})):e.createCommentVNode("",!0)]),_:3},8,["class"])}const y=i(c,[["render",_]]);module.exports=y;
|
|
2
|
+
//# sourceMappingURL=NeonEmptyState.vue.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NeonEmptyState.vue.cjs.js","sources":["../../../../src/components/presentation/empty-state/NeonEmptyState.vue"],"sourcesContent":["<template>\n <neon-stack :class=\"`neon-empty-state--${type}`\" class=\"neon-empty-state\" gap=\"l\">\n <neon-icon v-if=\"image\" :color=\"imageColor\" :name=\"image\" class=\"neon-empty-state__illustration\" />\n <h1 class=\"neon-empty-state__title\">{{ title }}</h1>\n <h2 v-if=\"subtitle\" class=\"neon-h3 neon-empty-state__subtitle\">{{ subtitle }}</h2>\n <div class=\"neon-empty-state__description\">\n <!-- @slot description rendered between the empty state title & any CTAs -->\n <slot name=\"description\"></slot>\n </div>\n <neon-inline v-if=\"ctas.length > 0\" class=\"neon-empty-state__ctas\" gap=\"m\">\n <neon-button\n v-for=\"(cta, index) in ctas\"\n :key=\"cta.label || cta.icon\"\n :button-style=\"cta.style || (index === ctas.length - 1 ? NeonButtonStyle.Solid : NeonButtonStyle.Outline)\"\n :color=\"\n cta.color || (index === ctas.length - 1 ? NeonFunctionalColor.Primary : NeonFunctionalColor.HighContrast)\n \"\n :disabled=\"!!cta.disabled\"\n :href=\"cta.href\"\n :icon=\"cta.icon\"\n :label=\"cta.label\"\n class=\"neon-empty-state__cta\"\n @click=\"!cta.href && emit('cta-click', index)\"\n />\n </neon-inline>\n </neon-stack>\n</template>\n\n<script lang=\"ts\" src=\"./NeonEmptyState.ts\" />\n"],"names":["_hoisted_1","_hoisted_3","_createBlock","_component_neon_stack","_normalizeClass","_ctx","_component_neon_icon","_createElementVNode","_toDisplayString","_createElementBlock","_hoisted_2","_renderSlot","_component_neon_inline","_openBlock","_Fragment","_renderList","cta","index","_component_neon_button"],"mappings":"yIAGQA,EAAA,CAAA,MAAM,yBAAyB,WACf,MAAM,sCACrBC,EAAA,CAAA,MAAM,+BAA+B,kMAJ5CC,EAAAA,YAwBaC,EAAA,CAxBA,MAAKC,EAAAA,eAAA,CAAA,qBAAuBC,EAAA,IAAI,GAAU,kBAAkB,CAAA,EAAC,IAAI,wBAC5E,IAAmG,CAAlFA,EAAA,qBAAjBH,EAAAA,YAAmGI,EAAA,OAA1E,MAAOD,EAAA,WAAa,KAAMA,EAAA,MAAO,MAAM,wFAChEE,EAAAA,mBAAoD,KAApDP,EAAoDQ,EAAAA,gBAAbH,EAAA,KAAK,EAAA,CAAA,EAClCA,EAAA,wBAAVI,EAAAA,mBAAkF,KAAlFC,EAAkFF,EAAAA,gBAAhBH,EAAA,QAAQ,EAAA,CAAA,+BAC1EE,EAAAA,mBAGM,MAHNN,EAGM,CADJU,aAAgCN,EAAA,OAAA,aAAA,IAEfA,EAAA,KAAK,OAAM,iBAA9BH,EAAAA,YAecU,EAAA,OAfsB,MAAM,yBAAyB,IAAI,wBAEnE,IAA4B,EAD9BC,EAAAA,UAAA,EAAA,EAAAJ,EAAAA,mBAaEK,WAAA,KAAAC,EAAAA,WAZuBV,EAAA,KAAI,CAAnBW,EAAKC,mBADff,EAAAA,YAaEgB,EAAA,CAXC,IAAKF,EAAI,OAASA,EAAI,KACtB,eAAcA,EAAI,QAAUC,IAAUZ,EAAA,KAAK,SAAaA,EAAA,gBAAgB,MAAQA,EAAA,gBAAgB,SAChG,MAAkBW,EAAI,QAAUC,IAAUZ,EAAA,KAAK,OAAM,EAAOA,sBAAoB,QAAUA,EAAA,oBAAoB,cAG9G,SAAQ,CAAA,CAAIW,EAAI,SAChB,KAAMA,EAAI,KACV,KAAMA,EAAI,KACV,MAAOA,EAAI,MACZ,MAAM,wBACL,YAAQA,EAAI,MAAQX,EAAA,iBAAkBY,CAAK"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import y from "./NeonEmptyState.es.js";
|
|
2
|
+
import { resolveComponent as t, openBlock as o, createBlock as l, normalizeClass as h, withCtx as r, createCommentVNode as a, createElementVNode as i, toDisplayString as c, createElementBlock as m, renderSlot as b, Fragment as f, renderList as k } from "vue";
|
|
3
|
+
import g from "../../../_virtual/_plugin-vue_export-helper.es.js";
|
|
4
|
+
const C = { class: "neon-empty-state__title" }, N = {
|
|
5
|
+
key: 1,
|
|
6
|
+
class: "neon-h3 neon-empty-state__subtitle"
|
|
7
|
+
}, $ = { class: "neon-empty-state__description" };
|
|
8
|
+
function S(e, B, v, E, F, V) {
|
|
9
|
+
const p = t("neon-icon"), u = t("neon-button"), _ = t("neon-inline"), d = t("neon-stack");
|
|
10
|
+
return o(), l(d, {
|
|
11
|
+
class: h([`neon-empty-state--${e.type}`, "neon-empty-state"]),
|
|
12
|
+
gap: "l"
|
|
13
|
+
}, {
|
|
14
|
+
default: r(() => [
|
|
15
|
+
e.image ? (o(), l(p, {
|
|
16
|
+
key: 0,
|
|
17
|
+
color: e.imageColor,
|
|
18
|
+
name: e.image,
|
|
19
|
+
class: "neon-empty-state__illustration"
|
|
20
|
+
}, null, 8, ["color", "name"])) : a("", !0),
|
|
21
|
+
i("h1", C, c(e.title), 1),
|
|
22
|
+
e.subtitle ? (o(), m("h2", N, c(e.subtitle), 1)) : a("", !0),
|
|
23
|
+
i("div", $, [
|
|
24
|
+
b(e.$slots, "description")
|
|
25
|
+
]),
|
|
26
|
+
e.ctas.length > 0 ? (o(), l(_, {
|
|
27
|
+
key: 2,
|
|
28
|
+
class: "neon-empty-state__ctas",
|
|
29
|
+
gap: "m"
|
|
30
|
+
}, {
|
|
31
|
+
default: r(() => [
|
|
32
|
+
(o(!0), m(f, null, k(e.ctas, (n, s) => (o(), l(u, {
|
|
33
|
+
key: n.label || n.icon,
|
|
34
|
+
"button-style": n.style || (s === e.ctas.length - 1 ? e.NeonButtonStyle.Solid : e.NeonButtonStyle.Outline),
|
|
35
|
+
color: n.color || (s === e.ctas.length - 1 ? e.NeonFunctionalColor.Primary : e.NeonFunctionalColor.HighContrast),
|
|
36
|
+
disabled: !!n.disabled,
|
|
37
|
+
href: n.href,
|
|
38
|
+
icon: n.icon,
|
|
39
|
+
label: n.label,
|
|
40
|
+
class: "neon-empty-state__cta",
|
|
41
|
+
onClick: (w) => !n.href && e.emit("cta-click", s)
|
|
42
|
+
}, null, 8, ["button-style", "color", "disabled", "href", "icon", "label", "onClick"]))), 128))
|
|
43
|
+
]),
|
|
44
|
+
_: 1
|
|
45
|
+
})) : a("", !0)
|
|
46
|
+
]),
|
|
47
|
+
_: 3
|
|
48
|
+
}, 8, ["class"]);
|
|
49
|
+
}
|
|
50
|
+
const L = /* @__PURE__ */ g(y, [["render", S]]);
|
|
51
|
+
export {
|
|
52
|
+
L as default
|
|
53
|
+
};
|
|
54
|
+
//# sourceMappingURL=NeonEmptyState.vue.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NeonEmptyState.vue.es.js","sources":["../../../../src/components/presentation/empty-state/NeonEmptyState.vue"],"sourcesContent":["<template>\n <neon-stack :class=\"`neon-empty-state--${type}`\" class=\"neon-empty-state\" gap=\"l\">\n <neon-icon v-if=\"image\" :color=\"imageColor\" :name=\"image\" class=\"neon-empty-state__illustration\" />\n <h1 class=\"neon-empty-state__title\">{{ title }}</h1>\n <h2 v-if=\"subtitle\" class=\"neon-h3 neon-empty-state__subtitle\">{{ subtitle }}</h2>\n <div class=\"neon-empty-state__description\">\n <!-- @slot description rendered between the empty state title & any CTAs -->\n <slot name=\"description\"></slot>\n </div>\n <neon-inline v-if=\"ctas.length > 0\" class=\"neon-empty-state__ctas\" gap=\"m\">\n <neon-button\n v-for=\"(cta, index) in ctas\"\n :key=\"cta.label || cta.icon\"\n :button-style=\"cta.style || (index === ctas.length - 1 ? NeonButtonStyle.Solid : NeonButtonStyle.Outline)\"\n :color=\"\n cta.color || (index === ctas.length - 1 ? NeonFunctionalColor.Primary : NeonFunctionalColor.HighContrast)\n \"\n :disabled=\"!!cta.disabled\"\n :href=\"cta.href\"\n :icon=\"cta.icon\"\n :label=\"cta.label\"\n class=\"neon-empty-state__cta\"\n @click=\"!cta.href && emit('cta-click', index)\"\n />\n </neon-inline>\n </neon-stack>\n</template>\n\n<script lang=\"ts\" src=\"./NeonEmptyState.ts\" />\n"],"names":["_hoisted_1","_hoisted_3","_createBlock","_component_neon_stack","_normalizeClass","_ctx","_component_neon_icon","_createElementVNode","_toDisplayString","_createElementBlock","_hoisted_2","_renderSlot","_component_neon_inline","_openBlock","_Fragment","_renderList","cta","index","_component_neon_button"],"mappings":";;;AAGQ,MAAAA,IAAA,EAAA,OAAM,0BAAyB;;EACf,OAAM;GACrBC,IAAA,EAAA,OAAM,gCAA+B;;;cAJ5CC,EAwBaC,GAAA;AAAA,IAxBA,OAAKC,EAAA,CAAA,qBAAuBC,EAAA,IAAI,IAAU,kBAAkB,CAAA;AAAA,IAAC,KAAI;AAAA;eAC5E,MAAmG;AAAA,MAAlFA,EAAA,cAAjBH,EAAmGI,GAAA;AAAA;QAA1E,OAAOD,EAAA;AAAA,QAAa,MAAMA,EAAA;AAAA,QAAO,OAAM;AAAA;MAChEE,EAAoD,MAApDP,GAAoDQ,EAAbH,EAAA,KAAK,GAAA,CAAA;AAAA,MAClCA,EAAA,iBAAVI,EAAkF,MAAlFC,GAAkFF,EAAhBH,EAAA,QAAQ,GAAA,CAAA;MAC1EE,EAGM,OAHNN,GAGM;AAAA,QADJU,EAAgCN,EAAA,QAAA,aAAA;AAAA;MAEfA,EAAA,KAAK,SAAM,UAA9BH,EAecU,GAAA;AAAA;QAfsB,OAAM;AAAA,QAAyB,KAAI;AAAA;mBAEnE,MAA4B;AAAA,WAD9BC,EAAA,EAAA,GAAAJ,EAaEK,GAAA,MAAAC,EAZuBV,EAAA,MAAI,CAAnBW,GAAKC,YADff,EAaEgB,GAAA;AAAA,YAXC,KAAKF,EAAI,SAASA,EAAI;AAAA,YACtB,gBAAcA,EAAI,UAAUC,MAAUZ,EAAA,KAAK,aAAaA,EAAA,gBAAgB,QAAQA,EAAA,gBAAgB;AAAA,YAChG,OAAkBW,EAAI,UAAUC,MAAUZ,EAAA,KAAK,SAAM,IAAOA,sBAAoB,UAAUA,EAAA,oBAAoB;AAAA,YAG9G,UAAQ,CAAA,CAAIW,EAAI;AAAA,YAChB,MAAMA,EAAI;AAAA,YACV,MAAMA,EAAI;AAAA,YACV,OAAOA,EAAI;AAAA,YACZ,OAAM;AAAA,YACL,iBAAQA,EAAI,QAAQX,EAAA,kBAAkBY,CAAK;AAAA;;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NeonEmptyStateType.cjs.js","sources":["../../../../src/model/presentation/empty-state/NeonEmptyStateType.ts"],"sourcesContent":["/**\n * Describes the different layout types for the <a href=\"/presentation/empty-state\">NeonEmptyState</a> component.\n */\nexport enum NeonEmptyStateType {\n /** Standard empty state layout. */\n EmptyState = 'empty-state',\n /** Error state layout. */\n Error = 'error',\n}\n"],"names":["NeonEmptyStateType"],"mappings":"gFAGO,IAAKA,GAAAA,IAEVA,EAAA,WAAa,cAEbA,EAAA,MAAQ,QAJEA,IAAAA,GAAA,CAAA,CAAA"}
|