@aotearoan/neon 26.1.0 → 27.0.1
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/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 +54 -40
- 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 +68 -45
- package/dist/components/layout/card-list/NeonCardList.vue.es.js.map +1 -1
- package/dist/components/layout/card-list/selectable-card/NeonSelectableCard.cjs.js +2 -0
- package/dist/components/layout/card-list/selectable-card/NeonSelectableCard.cjs.js.map +1 -0
- package/dist/components/{user-input → layout/card-list}/selectable-card/NeonSelectableCard.es.js +12 -17
- package/dist/components/layout/card-list/selectable-card/NeonSelectableCard.es.js.map +1 -0
- package/dist/components/layout/card-list/selectable-card/NeonSelectableCard.vue.cjs.js +2 -0
- package/dist/components/layout/card-list/selectable-card/NeonSelectableCard.vue.cjs.js.map +1 -0
- package/dist/components/{user-input → layout/card-list}/selectable-card/NeonSelectableCard.vue.es.js +12 -13
- package/dist/components/layout/card-list/selectable-card/NeonSelectableCard.vue.es.js.map +1 -0
- package/dist/components/presentation/expansion-panel/NeonExpansionPanel.cjs.js +1 -1
- package/dist/components/presentation/expansion-panel/NeonExpansionPanel.cjs.js.map +1 -1
- package/dist/components/presentation/expansion-panel/NeonExpansionPanel.es.js +5 -4
- package/dist/components/presentation/expansion-panel/NeonExpansionPanel.es.js.map +1 -1
- package/dist/components/presentation/expansion-panel/NeonExpansionPanel.vue.cjs.js +1 -1
- package/dist/components/presentation/expansion-panel/NeonExpansionPanel.vue.cjs.js.map +1 -1
- package/dist/components/presentation/expansion-panel/NeonExpansionPanel.vue.es.js +7 -6
- package/dist/components/presentation/expansion-panel/NeonExpansionPanel.vue.es.js.map +1 -1
- package/dist/neon.cjs.js +1 -1
- package/dist/neon.es.js +1 -1
- package/dist/src/components/layout/card-list/NeonCardList.d.ts +280 -47
- package/dist/src/components/{user-input → layout/card-list}/selectable-card/NeonSelectableCard.d.ts +33 -66
- package/dist/src/components/presentation/expansion-panel/NeonExpansionPanel.d.ts +3 -0
- package/dist/src/model/common/entity/NeonSelectable.d.ts +9 -0
- package/dist/src/model/layout/card-list/NeonCardListModel.d.ts +2 -1
- package/dist/src/neon.d.ts +2 -1
- package/dist/utils/common/date/NeonDateUtils.cjs.js +1 -1
- package/dist/utils/common/date/NeonDateUtils.cjs.js.map +1 -1
- package/dist/utils/common/date/NeonDateUtils.es.js +55 -52
- package/dist/utils/common/date/NeonDateUtils.es.js.map +1 -1
- package/package.json +1 -1
- package/src/sass/components/_card-list.scss +15 -3
- package/src/sass/components/_expansion-panel.scss +13 -3
- package/src/sass/components/_modal.scss +6 -3
- package/src/sass/components/_selectable-card.scss +7 -21
- package/src/sass/components/_swiper.scss +1 -1
- package/src/sass/includes/_dependencies.scss +1 -1
- package/src/sass/variables-dark.scss +0 -13
- package/src/sass/variables-global.scss +0 -7
- package/src/sass/variables-light.scss +0 -13
- package/dist/components/user-input/selectable-card/NeonSelectableCard.cjs.js +0 -2
- package/dist/components/user-input/selectable-card/NeonSelectableCard.cjs.js.map +0 -1
- package/dist/components/user-input/selectable-card/NeonSelectableCard.es.js.map +0 -1
- package/dist/components/user-input/selectable-card/NeonSelectableCard.vue.cjs.js +0 -2
- package/dist/components/user-input/selectable-card/NeonSelectableCard.vue.cjs.js.map +0 -1
- package/dist/components/user-input/selectable-card/NeonSelectableCard.vue.es.js.map +0 -1
- /package/dist/src/components/{user-input → layout/card-list}/selectable-card/NeonSelectableCard.vue.d.ts +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const o=require("vue"),
|
|
1
|
+
"use strict";const o=require("vue"),s=require("../../user-input/button/NeonButton.vue.cjs.js"),d=require("../inline/NeonInline.vue.cjs.js"),m=require("../../navigation/link/NeonLink.vue.cjs.js"),N=require("../../navigation/pagination/NeonPagination.vue.cjs.js"),f=require("../stack/NeonStack.vue.cjs.js"),b=require("../../../model/user-input/button/NeonButtonStyle.cjs.js"),q=require("../../../model/common/size/NeonSize.cjs.js"),S=require("../../../model/common/color/NeonFunctionalColor.cjs.js"),O=require("../../../utils/common/number/NeonNumberUtils.cjs.js"),g=require("./selectable-card/NeonSelectableCard.vue.cjs.js"),y=o.defineComponent({name:"NeonCardList",components:{NeonSelectableCard:g,NeonPagination:N,NeonButton:s,NeonInline:d,NeonLink:m,NeonStack:f},props:{items:{type:Array,required:!0},color:{type:String,default:null},selectable:{type:Boolean,default:!1},loadOnDemand:{type:Object},pagination:{type:Object}},emits:["show-more","toggleSelected"],setup(e,{emit:r,slots:a}){const i=o.computed(()=>{if(!e.pagination&&e.loadOnDemand)return e.loadOnDemand.ofLabel??"of"}),l=o.computed(()=>{var n;if(!e.pagination)return((n=e.loadOnDemand)==null?void 0:n.showMoreLabel)??"Show more"}),u=o.computed(()=>{var n;if(!e.pagination)return((n=e.loadOnDemand)==null?void 0:n.endOfResultsLabel)??"End of results"}),c=o.computed(()=>{var n,t;return((n=e.loadOnDemand)==null?void 0:n.total)??((t=e.pagination)==null?void 0:t.total)??0});return{emit:r,n:O.NeonNumberUtils.formatNumber,NeonButtonStyle:b.NeonButtonStyle,NeonFunctionalColor:S.NeonFunctionalColor,NeonSize:q.NeonSize,ofLabel:i,showMoreLabel:l,endOfResultsLabel:u,total:c,slots:a}}});module.exports=y;
|
|
2
2
|
//# sourceMappingURL=NeonCardList.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NeonCardList.cjs.js","sources":["../../../../src/components/layout/card-list/NeonCardList.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInline from '@/components/layout/inline/NeonInline.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonPagination from '@/components/navigation/pagination/NeonPagination.vue';\nimport NeonStack from '@/components/layout/stack/NeonStack.vue';\nimport { NeonButtonStyle } from '@/model/user-input/button/NeonButtonStyle';\nimport { NeonSize } from '@/model/common/size/NeonSize';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport type { NeonCardListModel } from '@/model/layout/card-list/NeonCardListModel';\nimport { NeonNumberUtils } from '@/utils/common/number/NeonNumberUtils';\nimport type { NeonLoadOnDemandModel } from '@/model/layout/card-list/NeonLoadOnDemandModel';\nimport type { NeonPaginationModel } from '@/model/navigation/pagination/NeonPaginationModel';\nimport type { NeonIdentifiable } from '@/model/common/entity/NeonIdentifiable';\n\n/**\n * Represent lists of objects as cards. This is intended to be a more responsive replacement for tables. This component\n * will display a list of items as cards with a count (x of y) and a <em>Show more</em> button to load more results.\n * There is also a slot for adding filtering or other content above the list. A slot is provided with card model & index\n * parameters for customising how to display the model for each card.\n */\nexport default defineComponent({\n name: 'NeonCardList',\n components: {\n NeonPagination,\n NeonButton,\n NeonInline,\n NeonLink,\n NeonStack,\n },\n props: {\n /**\n * Items to display as cards. Each item should be a NeonCardListModel.\n */\n items: {
|
|
1
|
+
{"version":3,"file":"NeonCardList.cjs.js","sources":["../../../../src/components/layout/card-list/NeonCardList.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInline from '@/components/layout/inline/NeonInline.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonPagination from '@/components/navigation/pagination/NeonPagination.vue';\nimport NeonStack from '@/components/layout/stack/NeonStack.vue';\nimport { NeonButtonStyle } from '@/model/user-input/button/NeonButtonStyle';\nimport { NeonSize } from '@/model/common/size/NeonSize';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport type { NeonCardListModel } from '@/model/layout/card-list/NeonCardListModel';\nimport { NeonNumberUtils } from '@/utils/common/number/NeonNumberUtils';\nimport type { NeonLoadOnDemandModel } from '@/model/layout/card-list/NeonLoadOnDemandModel';\nimport type { NeonPaginationModel } from '@/model/navigation/pagination/NeonPaginationModel';\nimport type { NeonIdentifiable } from '@/model/common/entity/NeonIdentifiable';\nimport type { NeonSelectable } from '@/model/common/entity/NeonSelectable';\nimport NeonSelectableCard from './selectable-card/NeonSelectableCard.vue';\n\n/**\n * TODO: consider refactoring since it's no longer just a layout component when selectable.\n * Represent lists of objects as cards. This is intended to be a more responsive replacement for tables. This component\n * will display a list of items as cards with a count (x of y) and a <em>Show more</em> button to load more results.\n * There is also a slot for adding filtering or other content above the list. A slot is provided with card model & index\n * parameters for customising how to display the model for each card.\n */\nexport default defineComponent({\n name: 'NeonCardList',\n components: {\n NeonSelectableCard,\n NeonPagination,\n NeonButton,\n NeonInline,\n NeonLink,\n NeonStack,\n },\n props: {\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 * Specify a selection/hover color for the cards.\n */\n color: { type: String as () => NeonFunctionalColor, default: null },\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 'toggleSelected',\n ],\n setup(props, { emit, slots }) {\n const ofLabel = computed(() => {\n if (!props.pagination && props.loadOnDemand) {\n return props.loadOnDemand.ofLabel ?? 'of';\n }\n\n return undefined;\n });\n\n const showMoreLabel = computed(() => {\n if (!props.pagination) {\n return props.loadOnDemand?.showMoreLabel ?? 'Show more';\n }\n\n return undefined;\n });\n\n const endOfResultsLabel = computed(() => {\n if (!props.pagination) {\n return props.loadOnDemand?.endOfResultsLabel ?? 'End of results';\n }\n\n return undefined;\n });\n\n const total = computed(() => props.loadOnDemand?.total ?? props.pagination?.total ?? 0);\n\n return {\n emit,\n n: NeonNumberUtils.formatNumber,\n NeonButtonStyle,\n NeonFunctionalColor,\n NeonSize,\n ofLabel,\n showMoreLabel,\n endOfResultsLabel,\n total,\n slots,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonSelectableCard","NeonPagination","NeonButton","NeonInline","NeonLink","NeonStack","props","emit","slots","ofLabel","computed","showMoreLabel","_a","endOfResultsLabel","total","_b","NeonNumberUtils","NeonButtonStyle","NeonFunctionalColor","NeonSize"],"mappings":"gnBAwBAA,EAAeC,kBAAgB,CAC7B,KAAM,eACN,WAAY,CACV,mBAAAC,EACA,eAAAC,EACA,WAAAC,EACA,WAAAC,EACA,SAAAC,EACA,UAAAC,CAAA,EAEF,MAAO,CAIL,MAAO,CACL,KAAM,MACN,SAAU,EAAA,EAKZ,MAAO,CAAE,KAAM,OAAqC,QAAS,IAAA,EAI7D,WAAY,CAAE,KAAM,QAAS,QAAS,EAAA,EAItC,aAAc,CAAE,KAAM,MAAA,EAItB,WAAY,CAAE,KAAM,MAAA,CAAoC,EAE1D,MAAO,CAKL,YAKA,gBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,EAAM,MAAAC,GAAS,CAC5B,MAAMC,EAAUC,EAAAA,SAAS,IAAM,CAC7B,GAAI,CAACJ,EAAM,YAAcA,EAAM,aAC7B,OAAOA,EAAM,aAAa,SAAW,IAIzC,CAAC,EAEKK,EAAgBD,EAAAA,SAAS,IAAM,OACnC,GAAI,CAACJ,EAAM,WACT,QAAOM,EAAAN,EAAM,eAAN,YAAAM,EAAoB,gBAAiB,WAIhD,CAAC,EAEKC,EAAoBH,EAAAA,SAAS,IAAM,OACvC,GAAI,CAACJ,EAAM,WACT,QAAOM,EAAAN,EAAM,eAAN,YAAAM,EAAoB,oBAAqB,gBAIpD,CAAC,EAEKE,EAAQJ,WAAS,IAAA,SAAM,QAAAE,EAAAN,EAAM,eAAN,YAAAM,EAAoB,UAASG,EAAAT,EAAM,aAAN,YAAAS,EAAkB,QAAS,EAAC,EAEtF,MAAO,CACL,KAAAR,EACA,EAAGS,EAAAA,gBAAgB,aAAA,gBACnBC,EAAAA,gBAAA,oBACAC,EAAAA,oBAAA,SACAC,EAAAA,SACA,QAAAV,EACA,cAAAE,EACA,kBAAAE,EACA,MAAAC,EACA,MAAAN,CAAA,CAEJ,CACF,CAAC"}
|
|
@@ -1,33 +1,42 @@
|
|
|
1
1
|
import { defineComponent as f, computed as t } from "vue";
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import { NeonButtonStyle as
|
|
8
|
-
import { NeonSize as
|
|
9
|
-
import { NeonFunctionalColor as
|
|
2
|
+
import u from "../../user-input/button/NeonButton.vue.es.js";
|
|
3
|
+
import s from "../inline/NeonInline.vue.es.js";
|
|
4
|
+
import c from "../../navigation/link/NeonLink.vue.es.js";
|
|
5
|
+
import N from "../../navigation/pagination/NeonPagination.vue.es.js";
|
|
6
|
+
import b from "../stack/NeonStack.vue.es.js";
|
|
7
|
+
import { NeonButtonStyle as p } from "../../../model/user-input/button/NeonButtonStyle.es.js";
|
|
8
|
+
import { NeonSize as O } from "../../../model/common/size/NeonSize.es.js";
|
|
9
|
+
import { NeonFunctionalColor as g } from "../../../model/common/color/NeonFunctionalColor.es.js";
|
|
10
10
|
import { NeonNumberUtils as L } from "../../../utils/common/number/NeonNumberUtils.es.js";
|
|
11
|
-
|
|
11
|
+
import y from "./selectable-card/NeonSelectableCard.vue.es.js";
|
|
12
|
+
const _ = f({
|
|
12
13
|
name: "NeonCardList",
|
|
13
14
|
components: {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
NeonSelectableCard: y,
|
|
16
|
+
NeonPagination: N,
|
|
17
|
+
NeonButton: u,
|
|
18
|
+
NeonInline: s,
|
|
19
|
+
NeonLink: c,
|
|
20
|
+
NeonStack: b
|
|
19
21
|
},
|
|
20
22
|
props: {
|
|
21
23
|
/**
|
|
22
24
|
* Items to display as cards. Each item should be a NeonCardListModel.
|
|
23
25
|
*/
|
|
24
|
-
items: {
|
|
26
|
+
items: {
|
|
27
|
+
type: Array,
|
|
28
|
+
required: !0
|
|
29
|
+
},
|
|
25
30
|
/**
|
|
26
|
-
* Specify a hover color for the cards.
|
|
31
|
+
* Specify a selection/hover color for the cards.
|
|
27
32
|
*/
|
|
28
33
|
color: { type: String, default: null },
|
|
29
34
|
/**
|
|
30
|
-
*
|
|
35
|
+
* Make cards selectable.
|
|
36
|
+
*/
|
|
37
|
+
selectable: { type: Boolean, default: !1 },
|
|
38
|
+
/**
|
|
39
|
+
* Model for configuring the on-demand loading layout.
|
|
31
40
|
*/
|
|
32
41
|
loadOnDemand: { type: Object },
|
|
33
42
|
/**
|
|
@@ -40,39 +49,44 @@ const B = f({
|
|
|
40
49
|
* Emitted when the 'Show more' button is clicked in "on demand" mode.
|
|
41
50
|
* @type {void}
|
|
42
51
|
*/
|
|
43
|
-
"show-more"
|
|
52
|
+
"show-more",
|
|
53
|
+
/**
|
|
54
|
+
* Emitted when in selectable mode and the selected state of a card is toggled.
|
|
55
|
+
* @type {string, boolean} - the id of the card which is toggled & the new selected state.
|
|
56
|
+
*/
|
|
57
|
+
"toggleSelected"
|
|
44
58
|
],
|
|
45
|
-
setup(
|
|
46
|
-
const
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
return ((o = n.loadOnDemand) == null ? void 0 : o.ofLabel) ?? "of";
|
|
50
|
-
}), i = t(() => {
|
|
51
|
-
var o;
|
|
52
|
-
if (!n.pagination)
|
|
53
|
-
return ((o = n.loadOnDemand) == null ? void 0 : o.showMoreLabel) ?? "Show more";
|
|
59
|
+
setup(e, { emit: a, slots: r }) {
|
|
60
|
+
const i = t(() => {
|
|
61
|
+
if (!e.pagination && e.loadOnDemand)
|
|
62
|
+
return e.loadOnDemand.ofLabel ?? "of";
|
|
54
63
|
}), m = t(() => {
|
|
55
64
|
var o;
|
|
56
|
-
if (!
|
|
57
|
-
return ((o =
|
|
65
|
+
if (!e.pagination)
|
|
66
|
+
return ((o = e.loadOnDemand) == null ? void 0 : o.showMoreLabel) ?? "Show more";
|
|
58
67
|
}), l = t(() => {
|
|
59
|
-
var o
|
|
60
|
-
|
|
68
|
+
var o;
|
|
69
|
+
if (!e.pagination)
|
|
70
|
+
return ((o = e.loadOnDemand) == null ? void 0 : o.endOfResultsLabel) ?? "End of results";
|
|
71
|
+
}), d = t(() => {
|
|
72
|
+
var o, n;
|
|
73
|
+
return ((o = e.loadOnDemand) == null ? void 0 : o.total) ?? ((n = e.pagination) == null ? void 0 : n.total) ?? 0;
|
|
61
74
|
});
|
|
62
75
|
return {
|
|
63
|
-
emit:
|
|
76
|
+
emit: a,
|
|
64
77
|
n: L.formatNumber,
|
|
65
|
-
NeonButtonStyle:
|
|
66
|
-
NeonFunctionalColor:
|
|
67
|
-
NeonSize:
|
|
68
|
-
ofLabel:
|
|
69
|
-
showMoreLabel:
|
|
70
|
-
endOfResultsLabel:
|
|
71
|
-
total:
|
|
78
|
+
NeonButtonStyle: p,
|
|
79
|
+
NeonFunctionalColor: g,
|
|
80
|
+
NeonSize: O,
|
|
81
|
+
ofLabel: i,
|
|
82
|
+
showMoreLabel: m,
|
|
83
|
+
endOfResultsLabel: l,
|
|
84
|
+
total: d,
|
|
85
|
+
slots: r
|
|
72
86
|
};
|
|
73
87
|
}
|
|
74
88
|
});
|
|
75
89
|
export {
|
|
76
|
-
|
|
90
|
+
_ as default
|
|
77
91
|
};
|
|
78
92
|
//# sourceMappingURL=NeonCardList.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NeonCardList.es.js","sources":["../../../../src/components/layout/card-list/NeonCardList.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInline from '@/components/layout/inline/NeonInline.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonPagination from '@/components/navigation/pagination/NeonPagination.vue';\nimport NeonStack from '@/components/layout/stack/NeonStack.vue';\nimport { NeonButtonStyle } from '@/model/user-input/button/NeonButtonStyle';\nimport { NeonSize } from '@/model/common/size/NeonSize';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport type { NeonCardListModel } from '@/model/layout/card-list/NeonCardListModel';\nimport { NeonNumberUtils } from '@/utils/common/number/NeonNumberUtils';\nimport type { NeonLoadOnDemandModel } from '@/model/layout/card-list/NeonLoadOnDemandModel';\nimport type { NeonPaginationModel } from '@/model/navigation/pagination/NeonPaginationModel';\nimport type { NeonIdentifiable } from '@/model/common/entity/NeonIdentifiable';\n\n/**\n * Represent lists of objects as cards. This is intended to be a more responsive replacement for tables. This component\n * will display a list of items as cards with a count (x of y) and a <em>Show more</em> button to load more results.\n * There is also a slot for adding filtering or other content above the list. A slot is provided with card model & index\n * parameters for customising how to display the model for each card.\n */\nexport default defineComponent({\n name: 'NeonCardList',\n components: {\n NeonPagination,\n NeonButton,\n NeonInline,\n NeonLink,\n NeonStack,\n },\n props: {\n /**\n * Items to display as cards. Each item should be a NeonCardListModel.\n */\n items: {
|
|
1
|
+
{"version":3,"file":"NeonCardList.es.js","sources":["../../../../src/components/layout/card-list/NeonCardList.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInline from '@/components/layout/inline/NeonInline.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonPagination from '@/components/navigation/pagination/NeonPagination.vue';\nimport NeonStack from '@/components/layout/stack/NeonStack.vue';\nimport { NeonButtonStyle } from '@/model/user-input/button/NeonButtonStyle';\nimport { NeonSize } from '@/model/common/size/NeonSize';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport type { NeonCardListModel } from '@/model/layout/card-list/NeonCardListModel';\nimport { NeonNumberUtils } from '@/utils/common/number/NeonNumberUtils';\nimport type { NeonLoadOnDemandModel } from '@/model/layout/card-list/NeonLoadOnDemandModel';\nimport type { NeonPaginationModel } from '@/model/navigation/pagination/NeonPaginationModel';\nimport type { NeonIdentifiable } from '@/model/common/entity/NeonIdentifiable';\nimport type { NeonSelectable } from '@/model/common/entity/NeonSelectable';\nimport NeonSelectableCard from './selectable-card/NeonSelectableCard.vue';\n\n/**\n * TODO: consider refactoring since it's no longer just a layout component when selectable.\n * Represent lists of objects as cards. This is intended to be a more responsive replacement for tables. This component\n * will display a list of items as cards with a count (x of y) and a <em>Show more</em> button to load more results.\n * There is also a slot for adding filtering or other content above the list. A slot is provided with card model & index\n * parameters for customising how to display the model for each card.\n */\nexport default defineComponent({\n name: 'NeonCardList',\n components: {\n NeonSelectableCard,\n NeonPagination,\n NeonButton,\n NeonInline,\n NeonLink,\n NeonStack,\n },\n props: {\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 * Specify a selection/hover color for the cards.\n */\n color: { type: String as () => NeonFunctionalColor, default: null },\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 'toggleSelected',\n ],\n setup(props, { emit, slots }) {\n const ofLabel = computed(() => {\n if (!props.pagination && props.loadOnDemand) {\n return props.loadOnDemand.ofLabel ?? 'of';\n }\n\n return undefined;\n });\n\n const showMoreLabel = computed(() => {\n if (!props.pagination) {\n return props.loadOnDemand?.showMoreLabel ?? 'Show more';\n }\n\n return undefined;\n });\n\n const endOfResultsLabel = computed(() => {\n if (!props.pagination) {\n return props.loadOnDemand?.endOfResultsLabel ?? 'End of results';\n }\n\n return undefined;\n });\n\n const total = computed(() => props.loadOnDemand?.total ?? props.pagination?.total ?? 0);\n\n return {\n emit,\n n: NeonNumberUtils.formatNumber,\n NeonButtonStyle,\n NeonFunctionalColor,\n NeonSize,\n ofLabel,\n showMoreLabel,\n endOfResultsLabel,\n total,\n slots,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonSelectableCard","NeonPagination","NeonButton","NeonInline","NeonLink","NeonStack","props","emit","slots","ofLabel","computed","showMoreLabel","_a","endOfResultsLabel","total","_b","NeonNumberUtils","NeonButtonStyle","NeonFunctionalColor","NeonSize"],"mappings":";;;;;;;;;;;AAwBA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,oBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA,IAKZ,OAAO,EAAE,MAAM,QAAqC,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI7D,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,IAAUC,EAAS,MAAM;AAC7B,UAAI,CAACJ,EAAM,cAAcA,EAAM;AAC7B,eAAOA,EAAM,aAAa,WAAW;AAAA,IAIzC,CAAC,GAEKK,IAAgBD,EAAS,MAAM;;AACnC,UAAI,CAACJ,EAAM;AACT,iBAAOM,IAAAN,EAAM,iBAAN,gBAAAM,EAAoB,kBAAiB;AAAA,IAIhD,CAAC,GAEKC,IAAoBH,EAAS,MAAM;;AACvC,UAAI,CAACJ,EAAM;AACT,iBAAOM,IAAAN,EAAM,iBAAN,gBAAAM,EAAoB,sBAAqB;AAAA,IAIpD,CAAC,GAEKE,IAAQJ,EAAS,MAAA;;AAAM,eAAAE,IAAAN,EAAM,iBAAN,gBAAAM,EAAoB,YAASG,IAAAT,EAAM,eAAN,gBAAAS,EAAkB,UAAS;AAAA,KAAC;AAEtF,WAAO;AAAA,MACL,MAAAR;AAAA,MACA,GAAGS,EAAgB;AAAA,MACnB,iBAAAC;AAAA,MACA,qBAAAC;AAAA,MACA,UAAAC;AAAA,MACA,SAAAV;AAAA,MACA,eAAAE;AAAA,MACA,mBAAAE;AAAA,MACA,OAAAC;AAAA,MACA,OAAAN;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const
|
|
1
|
+
"use strict";const m=require("./NeonCardList.cjs.js"),e=require("vue"),u=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),k={class:"neon-card-list"},_={key:0,class:"neon-card-list__total"},g={class:"neon-card-list__card"},B={key:0,class:"neon-card-list__results-end"};function b(o,a,y,C,h,v){const t=e.resolveComponent("neon-inline"),s=e.resolveComponent("neon-link"),r=e.resolveComponent("neon-selectable-card"),d=e.resolveComponent("neon-stack"),i=e.resolveComponent("neon-button"),c=e.resolveComponent("neon-pagination");return e.openBlock(),e.createElementBlock("div",k,[o.slots.header||o.loadOnDemand?(e.openBlock(),e.createBlock(t,{key:0,class:"neon-card-list__header"},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"header"),o.loadOnDemand?(e.openBlock(),e.createElementBlock("span",_,e.toDisplayString(o.n(o.items.length))+" "+e.toDisplayString(o.ofLabel)+" "+e.toDisplayString(o.n(o.total)),1)):e.createCommentVNode("",!0)]),_:3})):e.createCommentVNode("",!0),e.createVNode(d,{class:"neon-card-list__cards",gap:"z"},{default:e.withCtx(()=>[e.createVNode(e.TransitionGroup,{mode:"out-in",name:"neon-fade-transition",tag:"div"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.items,(n,l)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[n.href&&!n.disabled?(e.openBlock(),e.createBlock(s,{key:`${n.model.id??l}-link`,class:e.normalizeClass([o.color&&`neon-card-list__link--${o.color}`,"neon-card-list__link"]),href:n.href,"no-style":"","outline-style":"background"},{default:e.withCtx(()=>[e.createElementVNode("div",g,[e.renderSlot(o.$slots,"card",e.mergeProps({ref_for:!0},{model:n.model,index:l}))])]),_:2},1032,["class","href"])):o.selectable?(e.openBlock(),e.createBlock(r,{key:`${n.model.id??l}-selectable`,class:e.normalizeClass([{"neon-card-list__card--disabled":n.disabled,"neon-card-list__card--selected":n.selected},"neon-card-list__card neon-card-list__card--selectable"]),disabled:n.disabled,"model-value":!!n.selected,"onUpdate:modelValue":p=>o.emit("toggleSelected",n.model.id,p)},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"card",e.mergeProps({ref_for:!0},{model:n.model,index:l}))]),_:2},1032,["class","disabled","model-value","onUpdate:modelValue"])):(e.openBlock(),e.createElementBlock("div",{key:`${n.model.id??l}-link`,class:e.normalizeClass([{"neon-card-list__card--disabled":n.disabled},"neon-card-list__card"])},[e.renderSlot(o.$slots,"card",e.mergeProps({ref_for:!0},{model:n.model,index:l}))],2))],64))),256))]),_:3})]),_:3}),o.loadOnDemand?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[o.items.length===o.total?(e.openBlock(),e.createElementBlock("span",B,e.toDisplayString(o.endOfResultsLabel),1)):(e.openBlock(),e.createBlock(i,{key:1,"button-style":o.NeonButtonStyle.Text,color:o.NeonFunctionalColor.Neutral,label:o.showMoreLabel,size:o.NeonSize.Small,class:"neon-card-list__show-more",onClick:a[0]||(a[0]=n=>o.emit("show-more",n))},null,8,["button-style","color","label","size"]))],64)):o.pagination?(e.openBlock(),e.createBlock(c,{key:2,color:o.color,"display-first-and-last":o.pagination.displayFirstAndLast,page:o.pagination.page,"page-size":o.pagination.pageSize,total:o.pagination.total,"url-template":o.pagination.urlTemplate},null,8,["color","display-first-and-last","page","page-size","total","url-template"])):e.createCommentVNode("",!0)])}const f=u(m,[["render",b]]);module.exports=f;
|
|
2
2
|
//# sourceMappingURL=NeonCardList.vue.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NeonCardList.vue.cjs.js","sources":["../../../../src/components/layout/card-list/NeonCardList.vue"],"sourcesContent":["<template>\n <div class=\"neon-card-list\">\n <neon-inline
|
|
1
|
+
{"version":3,"file":"NeonCardList.vue.cjs.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 filters or 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 <transition-group mode=\"out-in\" name=\"neon-fade-transition\" tag=\"div\">\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('toggleSelected', 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 </transition-group>\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","_ctx","_createBlock","_component_neon_inline","_renderSlot","_hoisted_2","_toDisplayString","_createVNode","_component_neon_stack","_TransitionGroup","_Fragment","_renderList","item","index","_component_neon_link","_normalizeClass","_createElementVNode","_mergeProps","_component_neon_selectable_card","$event","_hoisted_4","_component_neon_button","_cache","_component_neon_pagination"],"mappings":"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"}
|
|
@@ -1,78 +1,101 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { resolveComponent as
|
|
3
|
-
import
|
|
4
|
-
const
|
|
1
|
+
import N from "./NeonCardList.es.js";
|
|
2
|
+
import { resolveComponent as s, openBlock as o, createElementBlock as l, createBlock as t, withCtx as d, renderSlot as r, toDisplayString as i, createCommentVNode as c, createVNode as f, TransitionGroup as v, Fragment as p, renderList as C, normalizeClass as u, createElementVNode as S, mergeProps as m } from "vue";
|
|
3
|
+
import L from "../../../_virtual/_plugin-vue_export-helper.es.js";
|
|
4
|
+
const V = { class: "neon-card-list" }, w = {
|
|
5
5
|
key: 0,
|
|
6
6
|
class: "neon-card-list__total"
|
|
7
|
-
},
|
|
7
|
+
}, B = { class: "neon-card-list__card" }, D = {
|
|
8
8
|
key: 0,
|
|
9
9
|
class: "neon-card-list__results-end"
|
|
10
10
|
};
|
|
11
|
-
function
|
|
12
|
-
const g =
|
|
13
|
-
return o(), l("div",
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
function O(e, _, F, T, E, U) {
|
|
12
|
+
const g = s("neon-inline"), b = s("neon-link"), k = s("neon-selectable-card"), y = s("neon-stack"), h = s("neon-button"), $ = s("neon-pagination");
|
|
13
|
+
return o(), l("div", V, [
|
|
14
|
+
e.slots.header || e.loadOnDemand ? (o(), t(g, {
|
|
15
|
+
key: 0,
|
|
16
16
|
class: "neon-card-list__header"
|
|
17
17
|
}, {
|
|
18
|
-
default:
|
|
19
|
-
|
|
20
|
-
e.loadOnDemand ? (o(), l("span",
|
|
18
|
+
default: d(() => [
|
|
19
|
+
r(e.$slots, "header"),
|
|
20
|
+
e.loadOnDemand ? (o(), l("span", w, i(e.n(e.items.length)) + " " + i(e.ofLabel) + " " + i(e.n(e.total)), 1)) : c("", !0)
|
|
21
21
|
]),
|
|
22
22
|
_: 3
|
|
23
|
-
}),
|
|
24
|
-
|
|
23
|
+
})) : c("", !0),
|
|
24
|
+
f(y, {
|
|
25
25
|
class: "neon-card-list__cards",
|
|
26
26
|
gap: "z"
|
|
27
27
|
}, {
|
|
28
|
-
default:
|
|
29
|
-
(
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
28
|
+
default: d(() => [
|
|
29
|
+
f(v, {
|
|
30
|
+
mode: "out-in",
|
|
31
|
+
name: "neon-fade-transition",
|
|
32
|
+
tag: "div"
|
|
33
|
+
}, {
|
|
34
|
+
default: d(() => [
|
|
35
|
+
(o(!0), l(p, null, C(e.items, (n, a) => (o(), l(p, null, [
|
|
36
|
+
n.href && !n.disabled ? (o(), t(b, {
|
|
37
|
+
key: `${n.model.id ?? a}-link`,
|
|
38
|
+
class: u([e.color && `neon-card-list__link--${e.color}`, "neon-card-list__link"]),
|
|
39
|
+
href: n.href,
|
|
40
|
+
"no-style": "",
|
|
41
|
+
"outline-style": "background"
|
|
42
|
+
}, {
|
|
43
|
+
default: d(() => [
|
|
44
|
+
S("div", B, [
|
|
45
|
+
r(e.$slots, "card", m({ ref_for: !0 }, { model: n.model, index: a }))
|
|
46
|
+
])
|
|
47
|
+
]),
|
|
48
|
+
_: 2
|
|
49
|
+
}, 1032, ["class", "href"])) : e.selectable ? (o(), t(k, {
|
|
50
|
+
key: `${n.model.id ?? a}-selectable`,
|
|
51
|
+
class: u([{
|
|
52
|
+
"neon-card-list__card--disabled": n.disabled,
|
|
53
|
+
"neon-card-list__card--selected": n.selected
|
|
54
|
+
}, "neon-card-list__card neon-card-list__card--selectable"]),
|
|
55
|
+
disabled: n.disabled,
|
|
56
|
+
"model-value": !!n.selected,
|
|
57
|
+
"onUpdate:modelValue": (z) => e.emit("toggleSelected", n.model.id, z)
|
|
58
|
+
}, {
|
|
59
|
+
default: d(() => [
|
|
60
|
+
r(e.$slots, "card", m({ ref_for: !0 }, { model: n.model, index: a }))
|
|
61
|
+
]),
|
|
62
|
+
_: 2
|
|
63
|
+
}, 1032, ["class", "disabled", "model-value", "onUpdate:modelValue"])) : (o(), l("div", {
|
|
64
|
+
key: `${n.model.id ?? a}-link`,
|
|
65
|
+
class: u([{ "neon-card-list__card--disabled": n.disabled }, "neon-card-list__card"])
|
|
66
|
+
}, [
|
|
67
|
+
r(e.$slots, "card", m({ ref_for: !0 }, { model: n.model, index: a }))
|
|
68
|
+
], 2))
|
|
69
|
+
], 64))), 256))
|
|
70
|
+
]),
|
|
71
|
+
_: 3
|
|
72
|
+
})
|
|
50
73
|
]),
|
|
51
74
|
_: 3
|
|
52
75
|
}),
|
|
53
|
-
e.loadOnDemand ? (o(), l(
|
|
54
|
-
e.items.length === e.total ? (o(), l("span",
|
|
76
|
+
e.loadOnDemand ? (o(), l(p, { key: 1 }, [
|
|
77
|
+
e.items.length === e.total ? (o(), l("span", D, i(e.endOfResultsLabel), 1)) : (o(), t(h, {
|
|
55
78
|
key: 1,
|
|
56
79
|
"button-style": e.NeonButtonStyle.Text,
|
|
57
80
|
color: e.NeonFunctionalColor.Neutral,
|
|
58
81
|
label: e.showMoreLabel,
|
|
59
82
|
size: e.NeonSize.Small,
|
|
60
83
|
class: "neon-card-list__show-more",
|
|
61
|
-
onClick:
|
|
84
|
+
onClick: _[0] || (_[0] = (n) => e.emit("show-more", n))
|
|
62
85
|
}, null, 8, ["button-style", "color", "label", "size"]))
|
|
63
|
-
], 64)) : e.pagination ? (o(),
|
|
64
|
-
key:
|
|
86
|
+
], 64)) : e.pagination ? (o(), t($, {
|
|
87
|
+
key: 2,
|
|
65
88
|
color: e.color,
|
|
66
89
|
"display-first-and-last": e.pagination.displayFirstAndLast,
|
|
67
90
|
page: e.pagination.page,
|
|
68
91
|
"page-size": e.pagination.pageSize,
|
|
69
92
|
total: e.pagination.total,
|
|
70
93
|
"url-template": e.pagination.urlTemplate
|
|
71
|
-
}, null, 8, ["color", "display-first-and-last", "page", "page-size", "total", "url-template"])) :
|
|
94
|
+
}, null, 8, ["color", "display-first-and-last", "page", "page-size", "total", "url-template"])) : c("", !0)
|
|
72
95
|
]);
|
|
73
96
|
}
|
|
74
|
-
const
|
|
97
|
+
const P = /* @__PURE__ */ L(N, [["render", O]]);
|
|
75
98
|
export {
|
|
76
|
-
|
|
99
|
+
P as default
|
|
77
100
|
};
|
|
78
101
|
//# 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
|
|
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 filters or 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 <transition-group mode=\"out-in\" name=\"neon-fade-transition\" tag=\"div\">\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('toggleSelected', 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 </transition-group>\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","_ctx","_createBlock","_component_neon_inline","_renderSlot","_hoisted_2","_toDisplayString","_createVNode","_component_neon_stack","_TransitionGroup","_Fragment","_renderList","item","index","_component_neon_link","_normalizeClass","_createElementVNode","_mergeProps","_component_neon_selectable_card","$event","_hoisted_4","_component_neon_button","_cache","_component_neon_pagination"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const o=require("vue"),t=require("../../../../model/common/color/NeonFunctionalColor.cjs.js"),r=require("../../card/NeonCard.vue.cjs.js"),a=require("../../card/header/NeonCardHeader.vue.cjs.js"),s=require("../../../user-input/switch/NeonSwitch.vue.cjs.js"),i=require("../../../../model/common/responsive/NeonResponsive.cjs.js"),l=o.defineComponent({name:"NeonSelectableCard",components:{NeonCard:r,NeonCardHeader:a,NeonSwitch:s},props:{modelValue:{type:Boolean,required:!0},color:{type:String,default:t.NeonFunctionalColor.Brand},disabled:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(e,{emit:n}){return{active:o.ref(!1),clicked:()=>{e.disabled||n("update:modelValue",!e.modelValue)},NeonResponsive:i.NeonResponsive}}});module.exports=l;
|
|
2
|
+
//# sourceMappingURL=NeonSelectableCard.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NeonSelectableCard.cjs.js","sources":["../../../../../src/components/layout/card-list/selectable-card/NeonSelectableCard.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, ref } from 'vue';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport NeonCard from '@/components/layout/card/NeonCard.vue';\nimport NeonCardHeader from '@/components/layout/card/header/NeonCardHeader.vue';\nimport NeonSwitch from '@/components/user-input/switch/NeonSwitch.vue';\nimport { NeonResponsive } from '@/model/common/responsive/NeonResponsive';\n\n/**\n * <p>\n * INTERNAL USE ONLY: <strong>NeonSelectableCard</strong> is a horizontal card that is selectable by clicking on it.\n * NOTE: do not use this component directly, prefer to use the <a href=\"/layout/card-list\">NeonCardList</a> setting\n * selectable=true. NeonCardList uses NeonSelectableCard internally.\n * </p>\n */\nexport default defineComponent({\n name: 'NeonSelectableCard',\n components: {\n NeonCard,\n NeonCardHeader,\n NeonSwitch,\n },\n props: {\n /**\n * The selected state of the card\n */\n modelValue: { type: Boolean, required: true },\n /**\n * The selection color. This will be used for the checkbox as well as borders & the background color\n */\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Brand },\n /**\n * The disabled state of the card.\n */\n disabled: { type: Boolean, default: false },\n },\n emits: [\n /**\n * Emitted when the user clicks on the card, toggling the selection state.\n * @type {boolean} the current selection state of the card.\n */\n 'update:modelValue',\n ],\n setup(props, { emit }) {\n const active = ref<boolean>(false);\n const clicked = () => {\n if (!props.disabled) {\n emit('update:modelValue', !props.modelValue);\n }\n };\n\n return {\n active,\n clicked,\n NeonResponsive,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonCard","NeonCardHeader","NeonSwitch","NeonFunctionalColor","props","emit","ref","NeonResponsive"],"mappings":"qVAcAA,EAAeC,kBAAgB,CAC7B,KAAM,qBACN,WAAY,CACV,SAAAC,EACA,eAAAC,EACA,WAAAC,CAAA,EAEF,MAAO,CAIL,WAAY,CAAE,KAAM,QAAS,SAAU,EAAA,EAIvC,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,KAAA,EAIjF,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE5C,MAAO,CAKL,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CAQrB,MAAO,CACL,OARaC,EAAAA,IAAa,EAAK,EAS/B,QARc,IAAM,CACfF,EAAM,UACTC,EAAK,oBAAqB,CAACD,EAAM,UAAU,CAE/C,EAIE,eACAG,EAAAA,cAAA,CAEJ,CACF,CAAC"}
|
package/dist/components/{user-input → layout/card-list}/selectable-card/NeonSelectableCard.es.js
RENAMED
|
@@ -1,30 +1,25 @@
|
|
|
1
|
-
import { defineComponent as t, ref as
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import n from "../../
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import { NeonResponsive as d } from "../../../model/common/responsive/NeonResponsive.es.js";
|
|
1
|
+
import { defineComponent as t, ref as a } from "vue";
|
|
2
|
+
import { NeonFunctionalColor as r } from "../../../../model/common/color/NeonFunctionalColor.es.js";
|
|
3
|
+
import l from "../../card/NeonCard.vue.es.js";
|
|
4
|
+
import n from "../../card/header/NeonCardHeader.vue.es.js";
|
|
5
|
+
import d from "../../../user-input/switch/NeonSwitch.vue.es.js";
|
|
6
|
+
import { NeonResponsive as i } from "../../../../model/common/responsive/NeonResponsive.es.js";
|
|
8
7
|
const V = t({
|
|
9
8
|
name: "NeonSelectableCard",
|
|
10
9
|
components: {
|
|
11
|
-
NeonCard:
|
|
12
|
-
NeonCardHeader:
|
|
13
|
-
NeonSwitch:
|
|
10
|
+
NeonCard: l,
|
|
11
|
+
NeonCardHeader: n,
|
|
12
|
+
NeonSwitch: d
|
|
14
13
|
},
|
|
15
14
|
props: {
|
|
16
15
|
/**
|
|
17
16
|
* The selected state of the card
|
|
18
17
|
*/
|
|
19
18
|
modelValue: { type: Boolean, required: !0 },
|
|
20
|
-
/**
|
|
21
|
-
* The size of the card.
|
|
22
|
-
*/
|
|
23
|
-
size: { type: String, default: a.Small },
|
|
24
19
|
/**
|
|
25
20
|
* The selection color. This will be used for the checkbox as well as borders & the background color
|
|
26
21
|
*/
|
|
27
|
-
color: { type: String, default:
|
|
22
|
+
color: { type: String, default: r.Brand },
|
|
28
23
|
/**
|
|
29
24
|
* The disabled state of the card.
|
|
30
25
|
*/
|
|
@@ -39,11 +34,11 @@ const V = t({
|
|
|
39
34
|
],
|
|
40
35
|
setup(e, { emit: o }) {
|
|
41
36
|
return {
|
|
42
|
-
active:
|
|
37
|
+
active: a(!1),
|
|
43
38
|
clicked: () => {
|
|
44
39
|
e.disabled || o("update:modelValue", !e.modelValue);
|
|
45
40
|
},
|
|
46
|
-
NeonResponsive:
|
|
41
|
+
NeonResponsive: i
|
|
47
42
|
};
|
|
48
43
|
}
|
|
49
44
|
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NeonSelectableCard.es.js","sources":["../../../../../src/components/layout/card-list/selectable-card/NeonSelectableCard.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, ref } from 'vue';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport NeonCard from '@/components/layout/card/NeonCard.vue';\nimport NeonCardHeader from '@/components/layout/card/header/NeonCardHeader.vue';\nimport NeonSwitch from '@/components/user-input/switch/NeonSwitch.vue';\nimport { NeonResponsive } from '@/model/common/responsive/NeonResponsive';\n\n/**\n * <p>\n * INTERNAL USE ONLY: <strong>NeonSelectableCard</strong> is a horizontal card that is selectable by clicking on it.\n * NOTE: do not use this component directly, prefer to use the <a href=\"/layout/card-list\">NeonCardList</a> setting\n * selectable=true. NeonCardList uses NeonSelectableCard internally.\n * </p>\n */\nexport default defineComponent({\n name: 'NeonSelectableCard',\n components: {\n NeonCard,\n NeonCardHeader,\n NeonSwitch,\n },\n props: {\n /**\n * The selected state of the card\n */\n modelValue: { type: Boolean, required: true },\n /**\n * The selection color. This will be used for the checkbox as well as borders & the background color\n */\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Brand },\n /**\n * The disabled state of the card.\n */\n disabled: { type: Boolean, default: false },\n },\n emits: [\n /**\n * Emitted when the user clicks on the card, toggling the selection state.\n * @type {boolean} the current selection state of the card.\n */\n 'update:modelValue',\n ],\n setup(props, { emit }) {\n const active = ref<boolean>(false);\n const clicked = () => {\n if (!props.disabled) {\n emit('update:modelValue', !props.modelValue);\n }\n };\n\n return {\n active,\n clicked,\n NeonResponsive,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonCard","NeonCardHeader","NeonSwitch","NeonFunctionalColor","props","emit","ref","NeonResponsive"],"mappings":";;;;;;AAcA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,YAAY,EAAE,MAAM,SAAS,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIvC,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,MAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAE5C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AAQrB,WAAO;AAAA,MACL,QARaC,EAAa,EAAK;AAAA,MAS/B,SARc,MAAM;AACpB,QAAKF,EAAM,YACTC,EAAK,qBAAqB,CAACD,EAAM,UAAU;AAAA,MAE/C;AAAA,MAKE,gBAAAG;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const d=require("./NeonSelectableCard.cjs.js"),e=require("vue"),a=require("../../../../_virtual/_plugin-vue_export-helper.cjs.js");function i(o,n,p,u,b,v){const t=e.resolveComponent("neon-switch"),r=e.resolveComponent("neon-card-header"),s=e.resolveComponent("neon-card");return e.openBlock(),e.createBlock(s,{class:e.normalizeClass([[`neon-selectable-card--${o.color}`,{"neon-selectable-card--selected":o.modelValue},{"neon-selectable-card--disabled":o.disabled}],"neon-selectable-card"]),"horizontal-borders":!1,"no-break":!0,tabindex:o.disabled?-1:0,orientation:"horizontal",size:"s",onClick:n[1]||(n[1]=l=>o.clicked()),onKeydown:[n[2]||(n[2]=e.withKeys(e.withModifiers(l=>o.clicked(),["stop","prevent"]),["enter"])),n[3]||(n[3]=e.withKeys(e.withModifiers(l=>o.clicked(),["stop","prevent"]),["space"]))]},{default:e.withCtx(()=>[e.createVNode(r,null,{default:e.withCtx(()=>[e.createVNode(t,{color:o.color,disabled:o.disabled,"model-value":o.modelValue,class:"neon-selectable-card__checkbox","switch-style":"checkbox","onUpdate:modelValue":n[0]||(n[0]=l=>o.clicked())},null,8,["color","disabled","model-value"])]),_:1}),e.renderSlot(o.$slots,"default")]),_:3},8,["class","tabindex"])}const c=a(d,[["render",i]]);module.exports=c;
|
|
2
|
+
//# sourceMappingURL=NeonSelectableCard.vue.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NeonSelectableCard.vue.cjs.js","sources":["../../../../../src/components/layout/card-list/selectable-card/NeonSelectableCard.vue"],"sourcesContent":["<template>\n <neon-card\n :class=\"[\n `neon-selectable-card--${color}`,\n { 'neon-selectable-card--selected': modelValue },\n { 'neon-selectable-card--disabled': disabled },\n ]\"\n :horizontal-borders=\"false\"\n :no-break=\"true\"\n :tabindex=\"disabled ? -1 : 0\"\n class=\"neon-selectable-card\"\n orientation=\"horizontal\"\n size=\"s\"\n @click=\"clicked()\"\n @keydown.enter.stop.prevent=\"clicked()\"\n @keydown.space.stop.prevent=\"clicked()\"\n >\n <neon-card-header>\n <neon-switch\n :color=\"color\"\n :disabled=\"disabled\"\n :model-value=\"modelValue\"\n class=\"neon-selectable-card__checkbox\"\n switch-style=\"checkbox\"\n @update:modelValue=\"clicked()\"\n />\n </neon-card-header>\n <!-- @slot the card sections to add to the card after the checkbox -->\n <slot name=\"default\"></slot>\n </neon-card>\n</template>\n\n<script lang=\"ts\" src=\"./NeonSelectableCard.ts\" />\n"],"names":["_createBlock","_component_neon_card","_normalizeClass","_ctx","_createVNode","_component_neon_card_header","_component_neon_switch","_renderSlot"],"mappings":"kTACEA,EAAAA,YA4BYC,EAAA,CA3BT,MAAKC,EAAAA,eAAA,CAAA,0BAAmCC,EAAA,KAAK,qCAA8CA,EAAA,UAAU,oCAA8CA,EAAA,QAAQ,GAQtJ,sBAAsB,CAAA,EAH3B,qBAAoB,GACpB,WAAU,GACV,SAAUA,EAAA,SAAQ,GAAA,EAEnB,YAAY,aACZ,KAAK,IACJ,uBAAOA,EAAA,QAAO,GACd,UAAO,2CAAqBA,EAAA,QAAO,EAAA,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,6CACPA,EAAA,QAAO,EAAA,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,wBAEpC,IASmB,CATnBC,EAAAA,YASmBC,EAAA,KAAA,mBARjB,IAOE,CAPFD,EAAAA,YAOEE,EAAA,CANC,MAAOH,EAAA,MACP,SAAUA,EAAA,SACV,cAAaA,EAAA,WACd,MAAM,iCACN,eAAa,WACZ,qCAAmBA,EAAA,+DAIxBI,aAA4BJ,EAAA,OAAA,SAAA"}
|