@aotearoan/neon 28.6.0 → 28.7.0

package/dist/components/layout/card-list/NeonCardList.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const n=require("vue"),N=require("../../user-input/button/NeonButton.vue.cjs.js"),m=require("../inline/NeonInline.vue.cjs.js"),g=require("../../navigation/link/NeonLink.vue.cjs.js"),S=require("../../navigation/pagination/NeonPagination.vue.cjs.js"),b=require("../../../model/user-input/button/NeonButtonStyle.cjs.js"),f=require("../../../model/common/size/NeonSize.cjs.js"),q=require("../../../model/common/color/NeonFunctionalColor.cjs.js"),r=require("../../../utils/common/number/NeonNumberUtils.cjs.js"),y=require("./selectable-card/NeonSelectableCard.vue.cjs.js"),p=require("../../feedback/splash-loader/NeonSplashLoader.vue.cjs.js"),C=require("../../feedback/loading-state-card/NeonLoadingStateCard.vue.cjs.js"),L=require("../../../model/common/state/NeonState.cjs.js"),h=require("../../../model/layout/card-list/NeonCardListStyle.cjs.js"),O=n.defineComponent({name:"NeonCardList",components:{NeonSelectableCard:y,NeonPagination:S,NeonButton:N,NeonInline:m,NeonLink:g,NeonLoadingStateCard:C,NeonSplashLoader:p},props:{items:{type:Array,required:!0},color:{type:String,default:null},listStyle:{type:String,default:()=>h.NeonCardListStyle.List},selectable:{type:Boolean,default:!1},loadOnDemand:{type:Object},pagination:{type:Object},loading:{type:Boolean}},emits:["page-change","show-more","toggle-selected"],setup(e,{emit:l,slots:i}){const a=n.ref(void 0),u=n.computed(()=>{if(!e.pagination&&e.loadOnDemand)return(e.loadOnDemand.resultCountLabel??"Showing {count} of {total}").replace("{count}",r.NeonNumberUtils.formatNumber(e.items.length)).replace("{total}",r.NeonNumberUtils.formatNumber(e.loadOnDemand.total))}),c=n.computed(()=>{var t;if(!e.pagination)return((t=e.loadOnDemand)==null?void 0:t.showMoreLabel)??"Load more"}),s=n.computed(()=>{var t,o;return((t=e.loadOnDemand)==null?void 0:t.total)??((o=e.pagination)==null?void 0:o.total)??0}),d=t=>{var o;(o=a.value)!=null&&o.scrollTo&&a.value.scrollTo({top:0,left:0,behavior:"instant"}),l("page-change",t)};return{emit:l,n:r.NeonNumberUtils.formatNumber,NeonButtonStyle:b.NeonButtonStyle,NeonFunctionalColor:q.NeonFunctionalColor,NeonSize:f.NeonSize,showMoreLabel:c,resultCountLabel:u,total:s,slots:i,cards:a,onPageChange:d,NeonState:L.NeonState}}});module.exports=O;
+"use strict";const n=require("vue"),b=require("../../user-input/button/NeonButton.vue.cjs.js"),f=require("../inline/NeonInline.vue.cjs.js"),S=require("../../navigation/link/NeonLink.vue.cjs.js"),q=require("../../navigation/pagination/NeonPagination.vue.cjs.js"),y=require("../../../model/user-input/button/NeonButtonStyle.cjs.js"),C=require("../../../model/common/size/NeonSize.cjs.js"),p=require("../../../model/common/color/NeonFunctionalColor.cjs.js"),l=require("../../../utils/common/number/NeonNumberUtils.cjs.js"),v=require("./selectable-card/NeonSelectableCard.vue.cjs.js"),L=require("../../feedback/splash-loader/NeonSplashLoader.vue.cjs.js"),D=require("../../feedback/loading-state-card/NeonLoadingStateCard.vue.cjs.js"),h=require("../../../model/common/state/NeonState.cjs.js"),O=require("../../../model/layout/card-list/NeonCardListStyle.cjs.js"),_=require("../../../utils/common/array/NeonArrayUtils.cjs.js"),B=require("./draggable-card/NeonDraggableCard.vue.cjs.js"),U=n.defineComponent({name:"NeonCardList",components:{NeonSelectableCard:v,NeonPagination:q,NeonButton:b,NeonInline:f,NeonLink:S,NeonDraggableCard:B,NeonLoadingStateCard:D,NeonSplashLoader:L},props:{items:{type:Array,required:!0},color:{type:String,default:null},listStyle:{type:String,default:()=>O.NeonCardListStyle.List},sortable:{type:Boolean,default:!1},selectable:{type:Boolean,default:!1},loadOnDemand:{type:Object},pagination:{type:Object},loading:{type:Boolean}},emits:["page-change","show-more","toggle-selected","sort"],setup(e,{emit:a,slots:u}){const r=n.ref(void 0),i=n.ref(void 0),s=n.computed(()=>{if(!e.pagination&&e.loadOnDemand)return(e.loadOnDemand.resultCountLabel??"Showing {count} of {total}").replace("{count}",l.NeonNumberUtils.formatNumber(e.items.length)).replace("{total}",l.NeonNumberUtils.formatNumber(e.loadOnDemand.total))}),c=n.computed(()=>{if(!e.pagination&&e.loadOnDemand)return e.loadOnDemand.showMoreLabel??"Load more"}),d=n.computed(()=>{var t,o;return((t=e.loadOnDemand)==null?void 0:t.total)??((o=e.pagination)==null?void 0:o.total)??0}),N=t=>{var o;(o=r.value)!=null&&o.scrollTo&&r.value.scrollTo({top:0,left:0,behavior:"instant"}),a("page-change",t)},m=t=>{i.value=t},g=(t,o)=>{a("sort",_.moveItem(e.items,t,o))};return{emit:a,n:l.NeonNumberUtils.formatNumber,NeonButtonStyle:y.NeonButtonStyle,NeonFunctionalColor:p.NeonFunctionalColor,NeonSize:C.NeonSize,showMoreLabel:c,resultCountLabel:s,total:d,slots:u,cards:r,onPageChange:N,NeonState:h.NeonState,onDrag:m,onDrop:g,dragIndex:i}}});module.exports=U;
 //# sourceMappingURL=NeonCardList.cjs.js.map

package/dist/components/layout/card-list/NeonCardList.cjs.js.map

@@ -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, ref } 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 { 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';\nimport NeonSplashLoader from '@/components/feedback/splash-loader/NeonSplashLoader.vue';\nimport NeonLoadingStateCard from '@/components/feedback/loading-state-card/NeonLoadingStateCard.vue';\nimport { NeonState } from '@/model/common/state/NeonState';\nimport { NeonCardListStyle } from '@/model/layout/card-list/NeonCardListStyle';\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 (Showing x of y) and a <em>Load 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    NeonLoadingStateCard,\n    NeonSplashLoader,\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 & pagination accent color for the cards.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Specify the card list layout, either a 'List' of cards with 100% width or a responsive 'Grid' of cards.\n     */\n    listStyle: { type: String as () => NeonCardListStyle, default: () => NeonCardListStyle.List },\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     * Show loading state when loading new items.\n     */\n    loading: { type: Boolean },\n  },\n  emits: [\n    /**\n     * Emitted when pagination is enabled and the user clicks on a page link (useful for paginated lists which are not\n     * the main focus of the page, i.e. should not be deep linked).\n     *\n     * @type {number} The new page number.\n     */\n    'page-change',\n    /**\n     * Emitted when the 'Load 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 cards = ref<HTMLDivElement | undefined>(undefined);\n\n    const resultCountLabel = computed(() => {\n      if (!props.pagination && props.loadOnDemand) {\n        const template = props.loadOnDemand.resultCountLabel ?? 'Showing {count} of {total}';\n        return template\n          .replace('{count}', NeonNumberUtils.formatNumber(props.items.length))\n          .replace('{total}', NeonNumberUtils.formatNumber(props.loadOnDemand.total));\n      }\n\n      return undefined;\n    });\n\n    const showMoreLabel = computed(() => {\n      if (!props.pagination) {\n        return props.loadOnDemand?.showMoreLabel ?? 'Load more';\n      }\n\n      return undefined;\n    });\n\n    const total = computed(() => props.loadOnDemand?.total ?? props.pagination?.total ?? 0);\n\n    const onPageChange = (newPage: number) => {\n      if (cards.value?.scrollTo) {\n        cards.value.scrollTo({\n          top: 0,\n          left: 0,\n          behavior: 'instant' as ScrollBehavior,\n        });\n      }\n\n      emit('page-change', newPage);\n    };\n\n    return {\n      emit,\n      n: NeonNumberUtils.formatNumber,\n      NeonButtonStyle,\n      NeonFunctionalColor,\n      NeonSize,\n      showMoreLabel,\n      resultCountLabel,\n      total,\n      slots,\n      cards,\n      onPageChange,\n      NeonState,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSelectableCard","NeonPagination","NeonButton","NeonInline","NeonLink","NeonLoadingStateCard","NeonSplashLoader","NeonCardListStyle","props","emit","slots","cards","ref","resultCountLabel","computed","NeonNumberUtils","showMoreLabel","_a","total","_b","onPageChange","newPage","NeonButtonStyle","NeonFunctionalColor","NeonSize","NeonState"],"mappings":"01BA2BAA,EAAeC,kBAAgB,CAC7B,KAAM,eACN,WAAY,CACV,mBAAAC,EACA,eAAAC,EACA,WAAAC,EACA,WAAAC,EACA,SAAAC,EACA,qBAAAC,EACA,iBAAAC,CAAA,EAEF,MAAO,CAIL,MAAO,CACL,KAAM,MACN,SAAU,EAAA,EAKZ,MAAO,CAAE,KAAM,OAAqC,QAAS,IAAA,EAI7D,UAAW,CAAE,KAAM,OAAmC,QAAS,IAAMC,EAAAA,kBAAkB,IAAA,EAIvF,WAAY,CAAE,KAAM,QAAS,QAAS,EAAA,EAItC,aAAc,CAAE,KAAM,MAAA,EAItB,WAAY,CAAE,KAAM,MAAA,EAIpB,QAAS,CAAE,KAAM,OAAA,CAAQ,EAE3B,MAAO,CAOL,cAKA,YAKA,iBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,EAAM,MAAAC,GAAS,CAC5B,MAAMC,EAAQC,EAAAA,IAAgC,MAAS,EAEjDC,EAAmBC,EAAAA,SAAS,IAAM,CACtC,GAAI,CAACN,EAAM,YAAcA,EAAM,aAE7B,OADiBA,EAAM,aAAa,kBAAoB,8BAErD,QAAQ,UAAWO,EAAAA,gBAAgB,aAAaP,EAAM,MAAM,MAAM,CAAC,EACnE,QAAQ,UAAWO,EAAAA,gBAAgB,aAAaP,EAAM,aAAa,KAAK,CAAC,CAIhF,CAAC,EAEKQ,EAAgBF,EAAAA,SAAS,IAAM,OACnC,GAAI,CAACN,EAAM,WACT,QAAOS,EAAAT,EAAM,eAAN,YAAAS,EAAoB,gBAAiB,WAIhD,CAAC,EAEKC,EAAQJ,WAAS,IAAA,SAAM,QAAAG,EAAAT,EAAM,eAAN,YAAAS,EAAoB,UAASE,EAAAX,EAAM,aAAN,YAAAW,EAAkB,QAAS,EAAC,EAEhFC,EAAgBC,GAAoB,QACpCJ,EAAAN,EAAM,QAAN,MAAAM,EAAa,UACfN,EAAM,MAAM,SAAS,CACnB,IAAK,EACL,KAAM,EACN,SAAU,SAAA,CACX,EAGHF,EAAK,cAAeY,CAAO,CAC7B,EAEA,MAAO,CACL,KAAAZ,EACA,EAAGM,EAAAA,gBAAgB,aAAA,gBACnBO,EAAAA,gBAAA,oBACAC,EAAAA,oBAAA,SACAC,EAAAA,SACA,cAAAR,EACA,iBAAAH,EACA,MAAAK,EACA,MAAAR,EACA,MAAAC,EACA,aAAAS,EAAA,UACAK,EAAAA,SAAA,CAEJ,CACF,CAAC"}
+{"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, ref } 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 { 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';\nimport NeonSplashLoader from '@/components/feedback/splash-loader/NeonSplashLoader.vue';\nimport NeonLoadingStateCard from '@/components/feedback/loading-state-card/NeonLoadingStateCard.vue';\nimport { NeonState } from '@/model/common/state/NeonState';\nimport { NeonCardListStyle } from '@/model/layout/card-list/NeonCardListStyle';\nimport { moveItem } from '@/utils/common/array/NeonArrayUtils';\nimport NeonDraggableCard from '@/components/layout/card-list/draggable-card/NeonDraggableCard.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 (Showing x of y) and a <em>Load 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    NeonDraggableCard,\n    NeonLoadingStateCard,\n    NeonSplashLoader,\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 & pagination accent color for the cards.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Specify the card list layout, either a 'List' of cards with 100% width or a responsive 'Grid' of cards.\n     */\n    listStyle: { type: String as () => NeonCardListStyle, default: () => NeonCardListStyle.List },\n    /**\n     * Make cards sortable, i.e. draggable. This will add a drag handle to the card, and when there is a change in the\n     * sort order, this triggers a 'sort' event with the new order.\n     *\n     * NOTE: Sorting is modal, i.e. if cards are sortable then the cards cannot act as links at the same time. Use a\n     * toggle switch to enable/disable sorting.\n     */\n    sortable: { type: Boolean, default: false },\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     * Show loading state when loading new items.\n     */\n    loading: { type: Boolean },\n  },\n  emits: [\n    /**\n     * Emitted when pagination is enabled and the user clicks on a page link (useful for paginated lists which are not\n     * the main focus of the page, i.e. should not be deep linked).\n     *\n     * @type {number} The new page number.\n     */\n    'page-change',\n    /**\n     * Emitted when the 'Load 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     * Emitted when the sort order of cards changes.\n     * @type {Array<NeonCardListModel<T>>} - the new order of the items.\n     */\n    'sort',\n  ],\n  setup(props, { emit, slots }) {\n    const cards = ref<HTMLDivElement | undefined>(undefined);\n    const dragIndex = ref<number | undefined>(undefined);\n\n    const resultCountLabel = computed(() => {\n      if (!props.pagination && props.loadOnDemand) {\n        const template = props.loadOnDemand.resultCountLabel ?? 'Showing {count} of {total}';\n        return template\n          .replace('{count}', NeonNumberUtils.formatNumber(props.items.length))\n          .replace('{total}', NeonNumberUtils.formatNumber(props.loadOnDemand.total));\n      }\n\n      return undefined;\n    });\n\n    const showMoreLabel = computed(() => {\n      if (!props.pagination && props.loadOnDemand) {\n        return props.loadOnDemand.showMoreLabel ?? 'Load more';\n      }\n\n      return undefined;\n    });\n\n    const total = computed(() => props.loadOnDemand?.total ?? props.pagination?.total ?? 0);\n\n    const onPageChange = (newPage: number) => {\n      if (cards.value?.scrollTo) {\n        cards.value.scrollTo({\n          top: 0,\n          left: 0,\n          behavior: 'instant' as ScrollBehavior,\n        });\n      }\n\n      emit('page-change', newPage);\n    };\n\n    const onDrag = (index?: number) => {\n      dragIndex.value = index;\n    };\n\n    const onDrop = (startIndex: number, endIndex: number) => {\n      emit('sort', moveItem(props.items, startIndex, endIndex));\n    };\n\n    return {\n      emit,\n      n: NeonNumberUtils.formatNumber,\n      NeonButtonStyle,\n      NeonFunctionalColor,\n      NeonSize,\n      showMoreLabel,\n      resultCountLabel,\n      total,\n      slots,\n      cards,\n      onPageChange,\n      NeonState,\n      onDrag,\n      onDrop,\n      dragIndex,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSelectableCard","NeonPagination","NeonButton","NeonInline","NeonLink","NeonDraggableCard","NeonLoadingStateCard","NeonSplashLoader","NeonCardListStyle","props","emit","slots","cards","ref","dragIndex","resultCountLabel","computed","NeonNumberUtils","showMoreLabel","total","_a","_b","onPageChange","newPage","onDrag","index","onDrop","startIndex","endIndex","moveItem","NeonButtonStyle","NeonFunctionalColor","NeonSize","NeonState"],"mappings":"o9BA6BAA,EAAeC,kBAAgB,CAC7B,KAAM,eACN,WAAY,CACV,mBAAAC,EACA,eAAAC,EACA,WAAAC,EACA,WAAAC,EACA,SAAAC,EAAA,kBACAC,EACA,qBAAAC,EACA,iBAAAC,CAAA,EAEF,MAAO,CAIL,MAAO,CACL,KAAM,MACN,SAAU,EAAA,EAKZ,MAAO,CAAE,KAAM,OAAqC,QAAS,IAAA,EAI7D,UAAW,CAAE,KAAM,OAAmC,QAAS,IAAMC,EAAAA,kBAAkB,IAAA,EAQvF,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,WAAY,CAAE,KAAM,QAAS,QAAS,EAAA,EAItC,aAAc,CAAE,KAAM,MAAA,EAItB,WAAY,CAAE,KAAM,MAAA,EAIpB,QAAS,CAAE,KAAM,OAAA,CAAQ,EAE3B,MAAO,CAOL,cAKA,YAKA,kBAKA,MAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,EAAM,MAAAC,GAAS,CAC5B,MAAMC,EAAQC,EAAAA,IAAgC,MAAS,EACjDC,EAAYD,EAAAA,IAAwB,MAAS,EAE7CE,EAAmBC,EAAAA,SAAS,IAAM,CACtC,GAAI,CAACP,EAAM,YAAcA,EAAM,aAE7B,OADiBA,EAAM,aAAa,kBAAoB,8BAErD,QAAQ,UAAWQ,EAAAA,gBAAgB,aAAaR,EAAM,MAAM,MAAM,CAAC,EACnE,QAAQ,UAAWQ,EAAAA,gBAAgB,aAAaR,EAAM,aAAa,KAAK,CAAC,CAIhF,CAAC,EAEKS,EAAgBF,EAAAA,SAAS,IAAM,CACnC,GAAI,CAACP,EAAM,YAAcA,EAAM,aAC7B,OAAOA,EAAM,aAAa,eAAiB,WAI/C,CAAC,EAEKU,EAAQH,WAAS,IAAA,SAAM,QAAAI,EAAAX,EAAM,eAAN,YAAAW,EAAoB,UAASC,EAAAZ,EAAM,aAAN,YAAAY,EAAkB,QAAS,EAAC,EAEhFC,EAAgBC,GAAoB,QACpCH,EAAAR,EAAM,QAAN,MAAAQ,EAAa,UACfR,EAAM,MAAM,SAAS,CACnB,IAAK,EACL,KAAM,EACN,SAAU,SAAA,CACX,EAGHF,EAAK,cAAea,CAAO,CAC7B,EAEMC,EAAUC,GAAmB,CACjCX,EAAU,MAAQW,CACpB,EAEMC,EAAS,CAACC,EAAoBC,IAAqB,CACvDlB,EAAK,OAAQmB,WAASpB,EAAM,MAAOkB,EAAYC,CAAQ,CAAC,CAC1D,EAEA,MAAO,CACL,KAAAlB,EACA,EAAGO,EAAAA,gBAAgB,aAAA,gBACnBa,EAAAA,gBAAA,oBACAC,EAAAA,oBAAA,SACAC,EAAAA,SACA,cAAAd,EACA,iBAAAH,EACA,MAAAI,EACA,MAAAR,EACA,MAAAC,EACA,aAAAU,EAAA,UACAW,EAAAA,UACA,OAAAT,EACA,OAAAE,EACA,UAAAZ,CAAA,CAEJ,CACF,CAAC"}

package/dist/components/layout/card-list/NeonCardList.es.js

@@ -1,27 +1,30 @@
-import { defineComponent as c, ref as s, computed as a } from "vue";
-import p from "../../user-input/button/NeonButton.vue.es.js";
-import g from "../inline/NeonInline.vue.es.js";
-import N from "../../navigation/link/NeonLink.vue.es.js";
-import b from "../../navigation/pagination/NeonPagination.vue.es.js";
-import { NeonButtonStyle as y } from "../../../model/user-input/button/NeonButtonStyle.es.js";
-import { NeonSize as L } from "../../../model/common/size/NeonSize.es.js";
-import { NeonFunctionalColor as S } from "../../../model/common/color/NeonFunctionalColor.es.js";
-import { NeonNumberUtils as r } from "../../../utils/common/number/NeonNumberUtils.es.js";
-import h from "./selectable-card/NeonSelectableCard.vue.es.js";
-import C from "../../feedback/splash-loader/NeonSplashLoader.vue.es.js";
-import O from "../../feedback/loading-state-card/NeonLoadingStateCard.vue.es.js";
-import { NeonState as v } from "../../../model/common/state/NeonState.es.js";
-import { NeonCardListStyle as D } from "../../../model/layout/card-list/NeonCardListStyle.es.js";
-const U = c({
+import { defineComponent as N, ref as i, computed as r } from "vue";
+import b from "../../user-input/button/NeonButton.vue.es.js";
+import y from "../inline/NeonInline.vue.es.js";
+import L from "../../navigation/link/NeonLink.vue.es.js";
+import S from "../../navigation/pagination/NeonPagination.vue.es.js";
+import { NeonButtonStyle as h } from "../../../model/user-input/button/NeonButtonStyle.es.js";
+import { NeonSize as C } from "../../../model/common/size/NeonSize.es.js";
+import { NeonFunctionalColor as D } from "../../../model/common/color/NeonFunctionalColor.es.js";
+import { NeonNumberUtils as l } from "../../../utils/common/number/NeonNumberUtils.es.js";
+import v from "./selectable-card/NeonSelectableCard.vue.es.js";
+import O from "../../feedback/splash-loader/NeonSplashLoader.vue.es.js";
+import B from "../../feedback/loading-state-card/NeonLoadingStateCard.vue.es.js";
+import { NeonState as w } from "../../../model/common/state/NeonState.es.js";
+import { NeonCardListStyle as _ } from "../../../model/layout/card-list/NeonCardListStyle.es.js";
+import { moveItem as I } from "../../../utils/common/array/NeonArrayUtils.es.js";
+import j from "./draggable-card/NeonDraggableCard.vue.es.js";
+const Q = N({
   name: "NeonCardList",
   components: {
-    NeonSelectableCard: h,
-    NeonPagination: b,
-    NeonButton: p,
-    NeonInline: g,
-    NeonLink: N,
-    NeonLoadingStateCard: O,
-    NeonSplashLoader: C
+    NeonSelectableCard: v,
+    NeonPagination: S,
+    NeonButton: b,
+    NeonInline: y,
+    NeonLink: L,
+    NeonDraggableCard: j,
+    NeonLoadingStateCard: B,
+    NeonSplashLoader: O
   },
   props: {
     /**
@@ -38,7 +41,15 @@ const U = c({
     /**
      * Specify the card list layout, either a 'List' of cards with 100% width or a responsive 'Grid' of cards.
      */
-    listStyle: { type: String, default: () => D.List },
+    listStyle: { type: String, default: () => _.List },
+    /**
+     * Make cards sortable, i.e. draggable. This will add a drag handle to the card, and when there is a change in the
+     * sort order, this triggers a 'sort' event with the new order.
+     *
+     * NOTE: Sorting is modal, i.e. if cards are sortable then the cards cannot act as links at the same time. Use a
+     * toggle switch to enable/disable sorting.
+     */
+    sortable: { type: Boolean, default: !1 },
     /**
      * Make cards selectable.
      */
@@ -73,44 +84,55 @@ const U = c({
      * Emitted when in selectable mode and the selected state of a card is toggled.
      * @type {string, boolean} - the id of the card which is toggled & the new selected state.
      */
-    "toggle-selected"
+    "toggle-selected",
+    /**
+     * Emitted when the sort order of cards changes.
+     * @type {Array<NeonCardListModel<T>>} - the new order of the items.
+     */
+    "sort"
   ],
-  setup(o, { emit: l, slots: m }) {
-    const n = s(void 0), i = a(() => {
+  setup(o, { emit: n, slots: d }) {
+    const a = i(void 0), m = i(void 0), f = r(() => {
+      if (!o.pagination && o.loadOnDemand)
+        return (o.loadOnDemand.resultCountLabel ?? "Showing {count} of {total}").replace("{count}", l.formatNumber(o.items.length)).replace("{total}", l.formatNumber(o.loadOnDemand.total));
+    }), s = r(() => {
       if (!o.pagination && o.loadOnDemand)
-        return (o.loadOnDemand.resultCountLabel ?? "Showing {count} of {total}").replace("{count}", r.formatNumber(o.items.length)).replace("{total}", r.formatNumber(o.loadOnDemand.total));
-    }), d = a(() => {
-      var e;
-      if (!o.pagination)
-        return ((e = o.loadOnDemand) == null ? void 0 : e.showMoreLabel) ?? "Load more";
-    }), f = a(() => {
+        return o.loadOnDemand.showMoreLabel ?? "Load more";
+    }), u = r(() => {
       var e, t;
       return ((e = o.loadOnDemand) == null ? void 0 : e.total) ?? ((t = o.pagination) == null ? void 0 : t.total) ?? 0;
-    }), u = (e) => {
+    }), c = (e) => {
       var t;
-      (t = n.value) != null && t.scrollTo && n.value.scrollTo({
+      (t = a.value) != null && t.scrollTo && a.value.scrollTo({
         top: 0,
         left: 0,
         behavior: "instant"
-      }), l("page-change", e);
+      }), n("page-change", e);
+    }, p = (e) => {
+      m.value = e;
+    }, g = (e, t) => {
+      n("sort", I(o.items, e, t));
     };
     return {
-      emit: l,
-      n: r.formatNumber,
-      NeonButtonStyle: y,
-      NeonFunctionalColor: S,
-      NeonSize: L,
-      showMoreLabel: d,
-      resultCountLabel: i,
-      total: f,
-      slots: m,
-      cards: n,
-      onPageChange: u,
-      NeonState: v
+      emit: n,
+      n: l.formatNumber,
+      NeonButtonStyle: h,
+      NeonFunctionalColor: D,
+      NeonSize: C,
+      showMoreLabel: s,
+      resultCountLabel: f,
+      total: u,
+      slots: d,
+      cards: a,
+      onPageChange: c,
+      NeonState: w,
+      onDrag: p,
+      onDrop: g,
+      dragIndex: m
     };
   }
 });
 export {
-  U as default
+  Q as default
 };
 //# sourceMappingURL=NeonCardList.es.js.map

package/dist/components/layout/card-list/NeonCardList.es.js.map

@@ -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, ref } 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 { 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';\nimport NeonSplashLoader from '@/components/feedback/splash-loader/NeonSplashLoader.vue';\nimport NeonLoadingStateCard from '@/components/feedback/loading-state-card/NeonLoadingStateCard.vue';\nimport { NeonState } from '@/model/common/state/NeonState';\nimport { NeonCardListStyle } from '@/model/layout/card-list/NeonCardListStyle';\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 (Showing x of y) and a <em>Load 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    NeonLoadingStateCard,\n    NeonSplashLoader,\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 & pagination accent color for the cards.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Specify the card list layout, either a 'List' of cards with 100% width or a responsive 'Grid' of cards.\n     */\n    listStyle: { type: String as () => NeonCardListStyle, default: () => NeonCardListStyle.List },\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     * Show loading state when loading new items.\n     */\n    loading: { type: Boolean },\n  },\n  emits: [\n    /**\n     * Emitted when pagination is enabled and the user clicks on a page link (useful for paginated lists which are not\n     * the main focus of the page, i.e. should not be deep linked).\n     *\n     * @type {number} The new page number.\n     */\n    'page-change',\n    /**\n     * Emitted when the 'Load 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 cards = ref<HTMLDivElement | undefined>(undefined);\n\n    const resultCountLabel = computed(() => {\n      if (!props.pagination && props.loadOnDemand) {\n        const template = props.loadOnDemand.resultCountLabel ?? 'Showing {count} of {total}';\n        return template\n          .replace('{count}', NeonNumberUtils.formatNumber(props.items.length))\n          .replace('{total}', NeonNumberUtils.formatNumber(props.loadOnDemand.total));\n      }\n\n      return undefined;\n    });\n\n    const showMoreLabel = computed(() => {\n      if (!props.pagination) {\n        return props.loadOnDemand?.showMoreLabel ?? 'Load more';\n      }\n\n      return undefined;\n    });\n\n    const total = computed(() => props.loadOnDemand?.total ?? props.pagination?.total ?? 0);\n\n    const onPageChange = (newPage: number) => {\n      if (cards.value?.scrollTo) {\n        cards.value.scrollTo({\n          top: 0,\n          left: 0,\n          behavior: 'instant' as ScrollBehavior,\n        });\n      }\n\n      emit('page-change', newPage);\n    };\n\n    return {\n      emit,\n      n: NeonNumberUtils.formatNumber,\n      NeonButtonStyle,\n      NeonFunctionalColor,\n      NeonSize,\n      showMoreLabel,\n      resultCountLabel,\n      total,\n      slots,\n      cards,\n      onPageChange,\n      NeonState,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSelectableCard","NeonPagination","NeonButton","NeonInline","NeonLink","NeonLoadingStateCard","NeonSplashLoader","NeonCardListStyle","props","emit","slots","cards","ref","resultCountLabel","computed","NeonNumberUtils","showMoreLabel","_a","total","_b","onPageChange","newPage","NeonButtonStyle","NeonFunctionalColor","NeonSize","NeonState"],"mappings":";;;;;;;;;;;;;;AA2BA,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,sBAAAC;AAAA,IACA,kBAAAC;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,WAAW,EAAE,MAAM,QAAmC,SAAS,MAAMC,EAAkB,KAAA;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;AAAA;AAAA;AAAA,IAIpB,SAAS,EAAE,MAAM,QAAA;AAAA,EAAQ;AAAA,EAE3B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,GAAM,OAAAC,KAAS;AAC5B,UAAMC,IAAQC,EAAgC,MAAS,GAEjDC,IAAmBC,EAAS,MAAM;AACtC,UAAI,CAACN,EAAM,cAAcA,EAAM;AAE7B,gBADiBA,EAAM,aAAa,oBAAoB,8BAErD,QAAQ,WAAWO,EAAgB,aAAaP,EAAM,MAAM,MAAM,CAAC,EACnE,QAAQ,WAAWO,EAAgB,aAAaP,EAAM,aAAa,KAAK,CAAC;AAAA,IAIhF,CAAC,GAEKQ,IAAgBF,EAAS,MAAM;;AACnC,UAAI,CAACN,EAAM;AACT,iBAAOS,IAAAT,EAAM,iBAAN,gBAAAS,EAAoB,kBAAiB;AAAA,IAIhD,CAAC,GAEKC,IAAQJ,EAAS,MAAA;;AAAM,eAAAG,IAAAT,EAAM,iBAAN,gBAAAS,EAAoB,YAASE,IAAAX,EAAM,eAAN,gBAAAW,EAAkB,UAAS;AAAA,KAAC,GAEhFC,IAAe,CAACC,MAAoB;;AACxC,OAAIJ,IAAAN,EAAM,UAAN,QAAAM,EAAa,YACfN,EAAM,MAAM,SAAS;AAAA,QACnB,KAAK;AAAA,QACL,MAAM;AAAA,QACN,UAAU;AAAA,MAAA,CACX,GAGHF,EAAK,eAAeY,CAAO;AAAA,IAC7B;AAEA,WAAO;AAAA,MACL,MAAAZ;AAAA,MACA,GAAGM,EAAgB;AAAA,MACnB,iBAAAO;AAAA,MACA,qBAAAC;AAAA,MACA,UAAAC;AAAA,MACA,eAAAR;AAAA,MACA,kBAAAH;AAAA,MACA,OAAAK;AAAA,MACA,OAAAR;AAAA,MACA,OAAAC;AAAA,MACA,cAAAS;AAAA,MACA,WAAAK;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}
+{"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, ref } 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 { 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';\nimport NeonSplashLoader from '@/components/feedback/splash-loader/NeonSplashLoader.vue';\nimport NeonLoadingStateCard from '@/components/feedback/loading-state-card/NeonLoadingStateCard.vue';\nimport { NeonState } from '@/model/common/state/NeonState';\nimport { NeonCardListStyle } from '@/model/layout/card-list/NeonCardListStyle';\nimport { moveItem } from '@/utils/common/array/NeonArrayUtils';\nimport NeonDraggableCard from '@/components/layout/card-list/draggable-card/NeonDraggableCard.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 (Showing x of y) and a <em>Load 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    NeonDraggableCard,\n    NeonLoadingStateCard,\n    NeonSplashLoader,\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 & pagination accent color for the cards.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Specify the card list layout, either a 'List' of cards with 100% width or a responsive 'Grid' of cards.\n     */\n    listStyle: { type: String as () => NeonCardListStyle, default: () => NeonCardListStyle.List },\n    /**\n     * Make cards sortable, i.e. draggable. This will add a drag handle to the card, and when there is a change in the\n     * sort order, this triggers a 'sort' event with the new order.\n     *\n     * NOTE: Sorting is modal, i.e. if cards are sortable then the cards cannot act as links at the same time. Use a\n     * toggle switch to enable/disable sorting.\n     */\n    sortable: { type: Boolean, default: false },\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     * Show loading state when loading new items.\n     */\n    loading: { type: Boolean },\n  },\n  emits: [\n    /**\n     * Emitted when pagination is enabled and the user clicks on a page link (useful for paginated lists which are not\n     * the main focus of the page, i.e. should not be deep linked).\n     *\n     * @type {number} The new page number.\n     */\n    'page-change',\n    /**\n     * Emitted when the 'Load 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     * Emitted when the sort order of cards changes.\n     * @type {Array<NeonCardListModel<T>>} - the new order of the items.\n     */\n    'sort',\n  ],\n  setup(props, { emit, slots }) {\n    const cards = ref<HTMLDivElement | undefined>(undefined);\n    const dragIndex = ref<number | undefined>(undefined);\n\n    const resultCountLabel = computed(() => {\n      if (!props.pagination && props.loadOnDemand) {\n        const template = props.loadOnDemand.resultCountLabel ?? 'Showing {count} of {total}';\n        return template\n          .replace('{count}', NeonNumberUtils.formatNumber(props.items.length))\n          .replace('{total}', NeonNumberUtils.formatNumber(props.loadOnDemand.total));\n      }\n\n      return undefined;\n    });\n\n    const showMoreLabel = computed(() => {\n      if (!props.pagination && props.loadOnDemand) {\n        return props.loadOnDemand.showMoreLabel ?? 'Load more';\n      }\n\n      return undefined;\n    });\n\n    const total = computed(() => props.loadOnDemand?.total ?? props.pagination?.total ?? 0);\n\n    const onPageChange = (newPage: number) => {\n      if (cards.value?.scrollTo) {\n        cards.value.scrollTo({\n          top: 0,\n          left: 0,\n          behavior: 'instant' as ScrollBehavior,\n        });\n      }\n\n      emit('page-change', newPage);\n    };\n\n    const onDrag = (index?: number) => {\n      dragIndex.value = index;\n    };\n\n    const onDrop = (startIndex: number, endIndex: number) => {\n      emit('sort', moveItem(props.items, startIndex, endIndex));\n    };\n\n    return {\n      emit,\n      n: NeonNumberUtils.formatNumber,\n      NeonButtonStyle,\n      NeonFunctionalColor,\n      NeonSize,\n      showMoreLabel,\n      resultCountLabel,\n      total,\n      slots,\n      cards,\n      onPageChange,\n      NeonState,\n      onDrag,\n      onDrop,\n      dragIndex,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSelectableCard","NeonPagination","NeonButton","NeonInline","NeonLink","NeonDraggableCard","NeonLoadingStateCard","NeonSplashLoader","NeonCardListStyle","props","emit","slots","cards","ref","dragIndex","resultCountLabel","computed","NeonNumberUtils","showMoreLabel","total","_a","_b","onPageChange","newPage","onDrag","index","onDrop","startIndex","endIndex","moveItem","NeonButtonStyle","NeonFunctionalColor","NeonSize","NeonState"],"mappings":"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"}

package/dist/components/layout/card-list/NeonCardList.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const m=require("./NeonCardList.cjs.js"),e=require("vue"),u=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),k={ref:"cards",class:"neon-card-list__cards"},g={class:"neon-card-list__card"},_={key:0,class:"neon-card-list__result-count-label"};function C(o,t,f,y,b,h){const r=e.resolveComponent("neon-inline"),a=e.resolveComponent("neon-loading-state-card"),s=e.resolveComponent("neon-link"),d=e.resolveComponent("neon-selectable-card"),i=e.resolveComponent("neon-button"),c=e.resolveComponent("neon-pagination");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([`neon-card-list--${o.listStyle}`,"neon-card-list"])},[e.renderSlot(o.$slots,"filters"),o.slots.header?(e.openBlock(),e.createBlock(r,{key:0,class:"neon-card-list__header"},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"header")]),_:3})):e.createCommentVNode("",!0),e.createElementVNode("div",k,[(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,[o.pagination&&o.loading?e.renderSlot(o.$slots,"loadingStateCard",{key:0},()=>[e.createVNode(a)]):(e.openBlock(),e.createBlock(e.Transition,{key:1,mode:"out-in",name:"neon-fade-transition"},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"card",e.mergeProps({ref_for:!0},{model:n.model,index:l}))]),_:2},1024))])]),_:2},1032,["class","href"])):o.selectable?(e.openBlock(),e.createBlock(d,{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("toggle-selected",n.model.id,p)},{default:e.withCtx(()=>[o.pagination&&o.loading?e.renderSlot(o.$slots,"loadingStateCard",{key:0},()=>[e.createVNode(a)]):(e.openBlock(),e.createBlock(e.Transition,{key:1,mode:"out-in",name:"neon-fade-transition"},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"card",e.mergeProps({ref_for:!0},{model:n.model,index:l}))]),_:2},1024))]),_:2},1032,["class","disabled","model-value","onUpdate:modelValue"])):(e.openBlock(),e.createElementBlock("div",{key:`${n.model.id??l}-card`,class:e.normalizeClass([{"neon-card-list__card--disabled":n.disabled},"neon-card-list__card"])},[o.pagination&&o.loading?e.renderSlot(o.$slots,"loadingStateCard",{key:0},()=>[e.createVNode(a)]):(e.openBlock(),e.createBlock(e.Transition,{key:1,mode:"out-in",name:"neon-fade-transition"},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"card",e.mergeProps({ref_for:!0},{model:n.model,index:l}))]),_:2},1024))],2))],64))),256))],512),o.loadOnDemand?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[o.resultCountLabel?(e.openBlock(),e.createElementBlock("span",_,e.toDisplayString(o.resultCountLabel),1)):e.createCommentVNode("",!0),o.items.length<o.total?(e.openBlock(),e.createBlock(i,{key:1,label:o.showMoreLabel,size:o.NeonSize.Large,state:o.loading?o.NeonState.Loading:o.NeonState.Ready,class:"neon-card-list__show-more",onClick:t[0]||(t[0]=n=>o.emit("show-more",n))},null,8,["label","size","state"])):e.createCommentVNode("",!0)],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,onPageChange:o.onPageChange},null,8,["color","display-first-and-last","page","page-size","total","url-template","onPageChange"])):e.createCommentVNode("",!0)],2)}const B=u(m,[["render",C]]);module.exports=B;
+"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__card"},C={key:0,class:"neon-card-list__result-count-label"};function _(o,r,B,f,h,y){const t=e.resolveComponent("neon-inline"),l=e.resolveComponent("neon-loading-state-card"),s=e.resolveComponent("neon-draggable-card"),d=e.resolveComponent("neon-link"),i=e.resolveComponent("neon-selectable-card"),c=e.resolveComponent("neon-button"),p=e.resolveComponent("neon-pagination");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([`neon-card-list--${o.listStyle}`,"neon-card-list"])},[e.renderSlot(o.$slots,"filters"),o.slots.header?(e.openBlock(),e.createBlock(t,{key:0,class:"neon-card-list__header"},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"header")]),_:3})):e.createCommentVNode("",!0),e.createVNode(e.TransitionGroup,{ref:"cards",class:"neon-card-list__cards",tag:"div"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.items,(n,a)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[!n.disabled&&(o.sortable||n.href)?(e.openBlock(),e.createBlock(d,{key:`${n.model.id??a}-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.createVNode(s,{color:o.color,"drag-index":o.dragIndex,draggable:o.sortable&&o.items.length>1,index:a,item:n,onDrop:o.onDrop,onOnDrag:o.onDrag},{default:e.withCtx(()=>[e.createElementVNode("div",k,[o.pagination&&o.loading?e.renderSlot(o.$slots,"loadingStateCard",{key:0},()=>[e.createVNode(l)]):(e.openBlock(),e.createBlock(e.Transition,{key:1,mode:"out-in",name:"neon-fade-transition"},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"card",e.mergeProps({ref_for:!0},{model:n.model,index:a}))]),_:2},1024))])]),_:2},1032,["color","drag-index","draggable","index","item","onDrop","onOnDrag"])]),_:2},1032,["class","href"])):o.selectable?(e.openBlock(),e.createBlock(i,{key:`${n.model.id??a}-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":g=>o.emit("toggle-selected",n.model.id,g)},{default:e.withCtx(()=>[o.pagination&&o.loading?e.renderSlot(o.$slots,"loadingStateCard",{key:0},()=>[e.createVNode(l)]):(e.openBlock(),e.createBlock(e.Transition,{key:1,mode:"out-in",name:"neon-fade-transition"},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"card",e.mergeProps({ref_for:!0},{model:n.model,index:a}))]),_:2},1024))]),_:2},1032,["class","disabled","model-value","onUpdate:modelValue"])):(e.openBlock(),e.createElementBlock("div",{key:`${n.model.id??a}-card`,class:e.normalizeClass([{"neon-card-list__card--disabled":n.disabled},"neon-card-list__card"])},[o.pagination&&o.loading?e.renderSlot(o.$slots,"loadingStateCard",{key:0},()=>[e.createVNode(l)]):(e.openBlock(),e.createBlock(e.Transition,{key:1,mode:"out-in",name:"neon-fade-transition"},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"card",e.mergeProps({ref_for:!0},{model:n.model,index:a}))]),_:2},1024))],2))],64))),256))]),_:3},512),o.loadOnDemand?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[o.resultCountLabel?(e.openBlock(),e.createElementBlock("span",C,e.toDisplayString(o.resultCountLabel),1)):e.createCommentVNode("",!0),o.items.length<o.total?(e.openBlock(),e.createBlock(c,{key:1,label:o.showMoreLabel,size:o.NeonSize.Large,state:o.loading?o.NeonState.Loading:o.NeonState.Ready,class:"neon-card-list__show-more",onClick:r[0]||(r[0]=n=>o.emit("show-more",n))},null,8,["label","size","state"])):e.createCommentVNode("",!0)],64)):o.pagination?(e.openBlock(),e.createBlock(p,{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,onPageChange:o.onPageChange},null,8,["color","display-first-and-last","page","page-size","total","url-template","onPageChange"])):e.createCommentVNode("",!0)],2)}const b=u(m,[["render",_]]);module.exports=b;
 //# sourceMappingURL=NeonCardList.vue.cjs.js.map

package/dist/components/layout/card-list/NeonCardList.vue.cjs.js.map

@@ -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--${listStyle}`\" 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\" class=\"neon-card-list__header\">\n      <!-- @slot slot for providing titles for the card list -->\n      <slot name=\"header\"></slot>\n    </neon-inline>\n    <div ref=\"cards\" class=\"neon-card-list__cards\">\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 override the default loading state card -->\n            <slot v-if=\"pagination && loading\" name=\"loadingStateCard\">\n              <neon-loading-state-card />\n            </slot>\n            <template v-else>\n              <transition mode=\"out-in\" name=\"neon-fade-transition\">\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              </transition>\n            </template>\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 override the default loading state card -->\n          <slot v-if=\"pagination && loading\" name=\"loadingStateCard\">\n            <neon-loading-state-card />\n          </slot>\n          <template v-else>\n            <transition mode=\"out-in\" name=\"neon-fade-transition\">\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            </transition>\n          </template>\n        </neon-selectable-card>\n        <div\n          v-else\n          :key=\"`${item.model.id ?? index}-card`\"\n          :class=\"{ 'neon-card-list__card--disabled': item.disabled }\"\n          class=\"neon-card-list__card\"\n        >\n          <!-- @slot override the default loading state card -->\n          <slot v-if=\"pagination && loading\" name=\"loadingStateCard\">\n            <neon-loading-state-card />\n          </slot>\n          <template v-else>\n            <transition mode=\"out-in\" name=\"neon-fade-transition\">\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            </transition>\n          </template>\n        </div>\n      </template>\n    </div>\n    <template v-if=\"loadOnDemand\">\n      <span v-if=\"resultCountLabel\" class=\"neon-card-list__result-count-label\">{{ resultCountLabel }}</span>\n      <neon-button\n        v-if=\"items.length < total\"\n        :label=\"showMoreLabel\"\n        :size=\"NeonSize.Large\"\n        :state=\"loading ? NeonState.Loading : NeonState.Ready\"\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      @page-change=\"onPageChange\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonCardList.ts\"></script>\n"],"names":["_hoisted_2","_createElementBlock","_normalizeClass","_ctx","_renderSlot","_createBlock","_component_neon_inline","_createElementVNode","_hoisted_1","_openBlock","_Fragment","_renderList","item","index","_component_neon_link","_createVNode","_component_neon_loading_state_card","_Transition","_mergeProps","_component_neon_selectable_card","$event","_hoisted_3","_toDisplayString","_component_neon_button","_cache","_component_neon_pagination"],"mappings":"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"}
+{"version":3,"file":"NeonCardList.vue.cjs.js","sources":["../../../../src/components/layout/card-list/NeonCardList.vue"],"sourcesContent":["<template>\n  <div :class=\"`neon-card-list--${listStyle}`\" 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\" class=\"neon-card-list__header\">\n      <!-- @slot slot for providing titles for the card list -->\n      <slot name=\"header\"></slot>\n    </neon-inline>\n    <transition-group ref=\"cards\" class=\"neon-card-list__cards\" tag=\"div\">\n      <template v-for=\"(item, index) in items\">\n        <neon-link\n          v-if=\"!item.disabled && (sortable || item.href)\"\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          <neon-draggable-card\n            :color=\"color\"\n            :drag-index=\"dragIndex\"\n            :draggable=\"sortable && items.length > 1\"\n            :index=\"index\"\n            :item=\"item\"\n            @drop=\"onDrop\"\n            @on-drag=\"onDrag\"\n          >\n            <div class=\"neon-card-list__card\">\n              <!-- @slot override the default loading state card -->\n              <slot v-if=\"pagination && loading\" name=\"loadingStateCard\">\n                <neon-loading-state-card />\n              </slot>\n              <template v-else>\n                <transition mode=\"out-in\" name=\"neon-fade-transition\">\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                </transition>\n              </template>\n            </div>\n          </neon-draggable-card>\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 override the default loading state card -->\n          <slot v-if=\"pagination && loading\" name=\"loadingStateCard\">\n            <neon-loading-state-card />\n          </slot>\n          <template v-else>\n            <transition mode=\"out-in\" name=\"neon-fade-transition\">\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            </transition>\n          </template>\n        </neon-selectable-card>\n        <div\n          v-else\n          :key=\"`${item.model.id ?? index}-card`\"\n          :class=\"{ 'neon-card-list__card--disabled': item.disabled }\"\n          class=\"neon-card-list__card\"\n        >\n          <!-- @slot override the default loading state card -->\n          <slot v-if=\"pagination && loading\" name=\"loadingStateCard\">\n            <neon-loading-state-card />\n          </slot>\n          <template v-else>\n            <transition mode=\"out-in\" name=\"neon-fade-transition\">\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            </transition>\n          </template>\n        </div>\n      </template>\n    </transition-group>\n    <template v-if=\"loadOnDemand\">\n      <span v-if=\"resultCountLabel\" class=\"neon-card-list__result-count-label\">{{ resultCountLabel }}</span>\n      <neon-button\n        v-if=\"items.length < total\"\n        :label=\"showMoreLabel\"\n        :size=\"NeonSize.Large\"\n        :state=\"loading ? NeonState.Loading : NeonState.Ready\"\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      @page-change=\"onPageChange\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonCardList.ts\"></script>\n"],"names":["_hoisted_1","_createElementBlock","_normalizeClass","_ctx","_renderSlot","_createBlock","_component_neon_inline","_createVNode","_TransitionGroup","_openBlock","_Fragment","_renderList","item","index","_component_neon_link","_component_neon_draggable_card","_createElementVNode","_component_neon_loading_state_card","_Transition","_mergeProps","_component_neon_selectable_card","$event","_hoisted_2","_toDisplayString","_component_neon_button","_cache","_component_neon_pagination"],"mappings":"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"}

package/dist/components/layout/card-list/NeonCardList.vue.es.js

@@ -1,108 +1,125 @@
-import L from "./NeonCardList.es.js";
-import { resolveComponent as d, openBlock as o, createElementBlock as t, normalizeClass as i, renderSlot as a, createBlock as l, withCtx as r, createCommentVNode as c, createElementVNode as k, Fragment as u, renderList as v, createVNode as g, Transition as m, mergeProps as f, toDisplayString as z } from "vue";
-import N from "../../../_virtual/_plugin-vue_export-helper.es.js";
-const V = {
-  ref: "cards",
-  class: "neon-card-list__cards"
-}, w = { class: "neon-card-list__card" }, P = {
+import D from "./NeonCardList.es.js";
+import { resolveComponent as r, openBlock as o, createElementBlock as t, normalizeClass as g, renderSlot as a, createBlock as l, withCtx as d, createCommentVNode as p, createVNode as i, TransitionGroup as L, Fragment as u, renderList as v, createElementVNode as z, Transition as m, mergeProps as f, toDisplayString as N } from "vue";
+import V from "../../../_virtual/_plugin-vue_export-helper.es.js";
+const w = { class: "neon-card-list__card" }, P = {
   key: 0,
   class: "neon-card-list__result-count-label"
 };
-function B(e, _, D, E, F, T) {
-  const b = d("neon-inline"), p = d("neon-loading-state-card"), y = d("neon-link"), h = d("neon-selectable-card"), $ = d("neon-button"), C = d("neon-pagination");
+function B(e, b, O, T, E, F) {
+  const _ = r("neon-inline"), c = r("neon-loading-state-card"), k = r("neon-draggable-card"), y = r("neon-link"), h = r("neon-selectable-card"), $ = r("neon-button"), C = r("neon-pagination");
   return o(), t("div", {
-    class: i([`neon-card-list--${e.listStyle}`, "neon-card-list"])
+    class: g([`neon-card-list--${e.listStyle}`, "neon-card-list"])
   }, [
     a(e.$slots, "filters"),
-    e.slots.header ? (o(), l(b, {
+    e.slots.header ? (o(), l(_, {
       key: 0,
       class: "neon-card-list__header"
     }, {
-      default: r(() => [
+      default: d(() => [
         a(e.$slots, "header")
       ]),
       _: 3
-    })) : c("", !0),
-    k("div", V, [
-      (o(!0), t(u, null, v(e.items, (n, s) => (o(), t(u, null, [
-        n.href && !n.disabled ? (o(), l(y, {
-          key: `${n.model.id ?? s}-link`,
-          class: i([e.color && `neon-card-list__link--${e.color}`, "neon-card-list__link"]),
-          href: n.href,
-          "no-style": "",
-          "outline-style": "background"
-        }, {
-          default: r(() => [
-            k("div", w, [
+    })) : p("", !0),
+    i(L, {
+      ref: "cards",
+      class: "neon-card-list__cards",
+      tag: "div"
+    }, {
+      default: d(() => [
+        (o(!0), t(u, null, v(e.items, (n, s) => (o(), t(u, null, [
+          !n.disabled && (e.sortable || n.href) ? (o(), l(y, {
+            key: `${n.model.id ?? s}-link`,
+            class: g([e.color && `neon-card-list__link--${e.color}`, "neon-card-list__link"]),
+            href: n.href,
+            "no-style": "",
+            "outline-style": "background"
+          }, {
+            default: d(() => [
+              i(k, {
+                color: e.color,
+                "drag-index": e.dragIndex,
+                draggable: e.sortable && e.items.length > 1,
+                index: s,
+                item: n,
+                onDrop: e.onDrop,
+                onOnDrag: e.onDrag
+              }, {
+                default: d(() => [
+                  z("div", w, [
+                    e.pagination && e.loading ? a(e.$slots, "loadingStateCard", { key: 0 }, () => [
+                      i(c)
+                    ]) : (o(), l(m, {
+                      key: 1,
+                      mode: "out-in",
+                      name: "neon-fade-transition"
+                    }, {
+                      default: d(() => [
+                        a(e.$slots, "card", f({ ref_for: !0 }, { model: n.model, index: s }))
+                      ]),
+                      _: 2
+                    }, 1024))
+                  ])
+                ]),
+                _: 2
+              }, 1032, ["color", "drag-index", "draggable", "index", "item", "onDrop", "onOnDrag"])
+            ]),
+            _: 2
+          }, 1032, ["class", "href"])) : e.selectable ? (o(), l(h, {
+            key: `${n.model.id ?? s}-selectable`,
+            class: g([{
+              "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": (S) => e.emit("toggle-selected", n.model.id, S)
+          }, {
+            default: d(() => [
               e.pagination && e.loading ? a(e.$slots, "loadingStateCard", { key: 0 }, () => [
-                g(p)
+                i(c)
               ]) : (o(), l(m, {
                 key: 1,
                 mode: "out-in",
                 name: "neon-fade-transition"
               }, {
-                default: r(() => [
+                default: d(() => [
                   a(e.$slots, "card", f({ ref_for: !0 }, { model: n.model, index: s }))
                 ]),
                 _: 2
               }, 1024))
-            ])
-          ]),
-          _: 2
-        }, 1032, ["class", "href"])) : e.selectable ? (o(), l(h, {
-          key: `${n.model.id ?? s}-selectable`,
-          class: i([{
-            "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": (S) => e.emit("toggle-selected", n.model.id, S)
-        }, {
-          default: r(() => [
+            ]),
+            _: 2
+          }, 1032, ["class", "disabled", "model-value", "onUpdate:modelValue"])) : (o(), t("div", {
+            key: `${n.model.id ?? s}-card`,
+            class: g([{ "neon-card-list__card--disabled": n.disabled }, "neon-card-list__card"])
+          }, [
             e.pagination && e.loading ? a(e.$slots, "loadingStateCard", { key: 0 }, () => [
-              g(p)
+              i(c)
             ]) : (o(), l(m, {
               key: 1,
               mode: "out-in",
               name: "neon-fade-transition"
             }, {
-              default: r(() => [
+              default: d(() => [
                 a(e.$slots, "card", f({ ref_for: !0 }, { model: n.model, index: s }))
               ]),
               _: 2
             }, 1024))
-          ]),
-          _: 2
-        }, 1032, ["class", "disabled", "model-value", "onUpdate:modelValue"])) : (o(), t("div", {
-          key: `${n.model.id ?? s}-card`,
-          class: i([{ "neon-card-list__card--disabled": n.disabled }, "neon-card-list__card"])
-        }, [
-          e.pagination && e.loading ? a(e.$slots, "loadingStateCard", { key: 0 }, () => [
-            g(p)
-          ]) : (o(), l(m, {
-            key: 1,
-            mode: "out-in",
-            name: "neon-fade-transition"
-          }, {
-            default: r(() => [
-              a(e.$slots, "card", f({ ref_for: !0 }, { model: n.model, index: s }))
-            ]),
-            _: 2
-          }, 1024))
-        ], 2))
-      ], 64))), 256))
-    ], 512),
+          ], 2))
+        ], 64))), 256))
+      ]),
+      _: 3
+    }, 512),
     e.loadOnDemand ? (o(), t(u, { key: 1 }, [
-      e.resultCountLabel ? (o(), t("span", P, z(e.resultCountLabel), 1)) : c("", !0),
+      e.resultCountLabel ? (o(), t("span", P, N(e.resultCountLabel), 1)) : p("", !0),
       e.items.length < e.total ? (o(), l($, {
         key: 1,
         label: e.showMoreLabel,
         size: e.NeonSize.Large,
         state: e.loading ? e.NeonState.Loading : e.NeonState.Ready,
         class: "neon-card-list__show-more",
-        onClick: _[0] || (_[0] = (n) => e.emit("show-more", n))
-      }, null, 8, ["label", "size", "state"])) : c("", !0)
+        onClick: b[0] || (b[0] = (n) => e.emit("show-more", n))
+      }, null, 8, ["label", "size", "state"])) : p("", !0)
     ], 64)) : e.pagination ? (o(), l(C, {
       key: 2,
       color: e.color,
@@ -112,11 +129,11 @@ function B(e, _, D, E, F, T) {
       total: e.pagination.total,
       "url-template": e.pagination.urlTemplate,
       onPageChange: e.onPageChange
-    }, null, 8, ["color", "display-first-and-last", "page", "page-size", "total", "url-template", "onPageChange"])) : c("", !0)
+    }, null, 8, ["color", "display-first-and-last", "page", "page-size", "total", "url-template", "onPageChange"])) : p("", !0)
   ], 2);
 }
-const O = /* @__PURE__ */ N(L, [["render", B]]);
+const I = /* @__PURE__ */ V(D, [["render", B]]);
 export {
-  O as default
+  I as default
 };
 //# sourceMappingURL=NeonCardList.vue.es.js.map

package/dist/components/layout/card-list/NeonCardList.vue.es.js.map

@@ -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--${listStyle}`\" 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\" class=\"neon-card-list__header\">\n      <!-- @slot slot for providing titles for the card list -->\n      <slot name=\"header\"></slot>\n    </neon-inline>\n    <div ref=\"cards\" class=\"neon-card-list__cards\">\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 override the default loading state card -->\n            <slot v-if=\"pagination && loading\" name=\"loadingStateCard\">\n              <neon-loading-state-card />\n            </slot>\n            <template v-else>\n              <transition mode=\"out-in\" name=\"neon-fade-transition\">\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              </transition>\n            </template>\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 override the default loading state card -->\n          <slot v-if=\"pagination && loading\" name=\"loadingStateCard\">\n            <neon-loading-state-card />\n          </slot>\n          <template v-else>\n            <transition mode=\"out-in\" name=\"neon-fade-transition\">\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            </transition>\n          </template>\n        </neon-selectable-card>\n        <div\n          v-else\n          :key=\"`${item.model.id ?? index}-card`\"\n          :class=\"{ 'neon-card-list__card--disabled': item.disabled }\"\n          class=\"neon-card-list__card\"\n        >\n          <!-- @slot override the default loading state card -->\n          <slot v-if=\"pagination && loading\" name=\"loadingStateCard\">\n            <neon-loading-state-card />\n          </slot>\n          <template v-else>\n            <transition mode=\"out-in\" name=\"neon-fade-transition\">\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            </transition>\n          </template>\n        </div>\n      </template>\n    </div>\n    <template v-if=\"loadOnDemand\">\n      <span v-if=\"resultCountLabel\" class=\"neon-card-list__result-count-label\">{{ resultCountLabel }}</span>\n      <neon-button\n        v-if=\"items.length < total\"\n        :label=\"showMoreLabel\"\n        :size=\"NeonSize.Large\"\n        :state=\"loading ? NeonState.Loading : NeonState.Ready\"\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      @page-change=\"onPageChange\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonCardList.ts\"></script>\n"],"names":["_hoisted_2","_createElementBlock","_normalizeClass","_ctx","_renderSlot","_createBlock","_component_neon_inline","_createElementVNode","_hoisted_1","_openBlock","_Fragment","_renderList","item","index","_component_neon_link","_createVNode","_component_neon_loading_state_card","_Transition","_mergeProps","_component_neon_selectable_card","$event","_hoisted_3","_toDisplayString","_component_neon_button","_cache","_component_neon_pagination"],"mappings":"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"}
+{"version":3,"file":"NeonCardList.vue.es.js","sources":["../../../../src/components/layout/card-list/NeonCardList.vue"],"sourcesContent":["<template>\n  <div :class=\"`neon-card-list--${listStyle}`\" 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\" class=\"neon-card-list__header\">\n      <!-- @slot slot for providing titles for the card list -->\n      <slot name=\"header\"></slot>\n    </neon-inline>\n    <transition-group ref=\"cards\" class=\"neon-card-list__cards\" tag=\"div\">\n      <template v-for=\"(item, index) in items\">\n        <neon-link\n          v-if=\"!item.disabled && (sortable || item.href)\"\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          <neon-draggable-card\n            :color=\"color\"\n            :drag-index=\"dragIndex\"\n            :draggable=\"sortable && items.length > 1\"\n            :index=\"index\"\n            :item=\"item\"\n            @drop=\"onDrop\"\n            @on-drag=\"onDrag\"\n          >\n            <div class=\"neon-card-list__card\">\n              <!-- @slot override the default loading state card -->\n              <slot v-if=\"pagination && loading\" name=\"loadingStateCard\">\n                <neon-loading-state-card />\n              </slot>\n              <template v-else>\n                <transition mode=\"out-in\" name=\"neon-fade-transition\">\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                </transition>\n              </template>\n            </div>\n          </neon-draggable-card>\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 override the default loading state card -->\n          <slot v-if=\"pagination && loading\" name=\"loadingStateCard\">\n            <neon-loading-state-card />\n          </slot>\n          <template v-else>\n            <transition mode=\"out-in\" name=\"neon-fade-transition\">\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            </transition>\n          </template>\n        </neon-selectable-card>\n        <div\n          v-else\n          :key=\"`${item.model.id ?? index}-card`\"\n          :class=\"{ 'neon-card-list__card--disabled': item.disabled }\"\n          class=\"neon-card-list__card\"\n        >\n          <!-- @slot override the default loading state card -->\n          <slot v-if=\"pagination && loading\" name=\"loadingStateCard\">\n            <neon-loading-state-card />\n          </slot>\n          <template v-else>\n            <transition mode=\"out-in\" name=\"neon-fade-transition\">\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            </transition>\n          </template>\n        </div>\n      </template>\n    </transition-group>\n    <template v-if=\"loadOnDemand\">\n      <span v-if=\"resultCountLabel\" class=\"neon-card-list__result-count-label\">{{ resultCountLabel }}</span>\n      <neon-button\n        v-if=\"items.length < total\"\n        :label=\"showMoreLabel\"\n        :size=\"NeonSize.Large\"\n        :state=\"loading ? NeonState.Loading : NeonState.Ready\"\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      @page-change=\"onPageChange\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonCardList.ts\"></script>\n"],"names":["_hoisted_1","_createElementBlock","_normalizeClass","_ctx","_renderSlot","_createBlock","_component_neon_inline","_createVNode","_TransitionGroup","_openBlock","_Fragment","_renderList","item","index","_component_neon_link","_component_neon_draggable_card","_createElementVNode","_component_neon_loading_state_card","_Transition","_mergeProps","_component_neon_selectable_card","$event","_hoisted_2","_toDisplayString","_component_neon_button","_cache","_component_neon_pagination"],"mappings":"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"}

package/dist/components/layout/card-list/draggable-card/NeonDraggableCard.vue.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("vue"),m=require("../../../presentation/icon/NeonIcon.vue.cjs.js"),p=require("../../inline/NeonInline.vue.cjs.js"),b=require("../../../../model/common/color/NeonFunctionalColor.cjs.js"),D=e.defineComponent({__name:"NeonDraggableCard",props:{draggable:{type:Boolean},color:{},dragIndex:{},index:{}},emits:["drop","on-drag"],setup(o,{emit:l}){const n=o,t=l,d=e.ref(null),r=e.ref(!1),c=a=>{a.dataTransfer&&(a.dataTransfer.effectAllowed="move"),t("on-drag",n.index)},g=()=>{r.value=!1,t("on-drag",void 0)},s=a=>{a.preventDefault(),r.value=!1,t("drop",n.dragIndex,n.index)},u=a=>{a.preventDefault(),r.value=!0},i=a=>{a.preventDefault(),r.value=!1},f=e.computed(()=>r.value&&n.dragIndex!==void 0),v=e.computed(()=>n.dragIndex!==void 0);return(a,x)=>(e.openBlock(),e.createBlock(p,{ref_key:"draggableItem",ref:d,class:e.normalizeClass([[{"neon-draggable-card--active":f.value,"neon-draggable-card--drag-in-progress":v.value},`neon-draggable-card--${o.color}`],"neon-draggable-card"]),draggable:o.draggable,onDragend:g,onDragleave:i,onDragover:u,onDragstart:c,onDrop:s},{default:e.withCtx(()=>[e.createVNode(e.Transition,{mode:"out-in",name:"neon-drag-handle-transition"},{default:e.withCtx(()=>[o.draggable?(e.openBlock(),e.createBlock(m,{key:0,color:e.unref(b.NeonFunctionalColor).LowContrast,class:"neon-draggable-card__handle-icon",name:"drag-handle"},null,8,["color"])):e.createCommentVNode("",!0)]),_:1}),e.renderSlot(a.$slots,"default")]),_:3},8,["class","draggable"]))}});module.exports=D;
+//# sourceMappingURL=NeonDraggableCard.vue.cjs.js.map