@aotearoan/neon 28.5.0 → 28.7.0

package/dist/src/components/layout/card-list/NeonCardList.d.ts

@@ -7,10 +7,12 @@ import type { NeonLoadOnDemandModel } from '@/model/layout/card-list/NeonLoadOnD
 import type { NeonPaginationModel } from '@/model/navigation/pagination/NeonPaginationModel';
 import type { NeonIdentifiable } from '@/model/common/entity/NeonIdentifiable';
 import type { NeonSelectable } from '@/model/common/entity/NeonSelectable';
+import { NeonState } from '@/model/common/state/NeonState';
+import { NeonCardListStyle } from '@/model/layout/card-list/NeonCardListStyle';
 /**
  * TODO: consider refactoring since it's no longer just a layout component when selectable.
  * Represent lists of objects as cards. This is intended to be a more responsive replacement for tables. This component
- * 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.
+ * 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.
  * There is also a slot for adding filtering or other content above the list. A slot is provided with card model & index
  * parameters for customising how to display the model for each card.
  */
@@ -29,6 +31,24 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: () => NeonFunctionalColor;
         default: null;
     };
+    /**
+     * Specify the card list layout, either a 'List' of cards with 100% width or a responsive 'Grid' of cards.
+     */
+    listStyle: {
+        type: () => NeonCardListStyle;
+        default: () => NeonCardListStyle;
+    };
+    /**
+     * 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: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Make cards selectable.
      */
@@ -49,27 +69,30 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: () => NeonPaginationModel;
     };
     /**
-     * Show splash loader when loading new items.
+     * Show loading state when loading new items.
      */
     loading: {
         type: BooleanConstructor;
     };
 }>, {
-    emit: (event: "page-change" | "show-more" | "toggle-selected", ...args: any[]) => void;
+    emit: (event: "sort" | "page-change" | "show-more" | "toggle-selected", ...args: any[]) => void;
     n: typeof NeonNumberUtils.formatNumber;
     NeonButtonStyle: typeof NeonButtonStyle;
     NeonFunctionalColor: typeof NeonFunctionalColor;
     NeonSize: typeof NeonSize;
-    ofLabel: import("vue").ComputedRef<string | undefined>;
     showMoreLabel: import("vue").ComputedRef<string | undefined>;
-    endOfResultsLabel: import("vue").ComputedRef<string | undefined>;
+    resultCountLabel: import("vue").ComputedRef<string | undefined>;
     total: import("vue").ComputedRef<number>;
     slots: Readonly<{
         [name: string]: import("vue").Slot<any> | undefined;
     }>;
     cards: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
     onPageChange: (newPage: number) => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("page-change" | "show-more" | "toggle-selected")[], "page-change" | "show-more" | "toggle-selected", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    NeonState: typeof NeonState;
+    onDrag: (index?: number) => void;
+    onDrop: (startIndex: number, endIndex: number) => void;
+    dragIndex: import("vue").Ref<number | undefined, number | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("sort" | "page-change" | "show-more" | "toggle-selected")[], "sort" | "page-change" | "show-more" | "toggle-selected", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Items to display as cards. Each item should be a NeonCardListModel.
      */
@@ -84,6 +107,24 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: () => NeonFunctionalColor;
         default: null;
     };
+    /**
+     * Specify the card list layout, either a 'List' of cards with 100% width or a responsive 'Grid' of cards.
+     */
+    listStyle: {
+        type: () => NeonCardListStyle;
+        default: () => NeonCardListStyle;
+    };
+    /**
+     * 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: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Make cards selectable.
      */
@@ -104,18 +145,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: () => NeonPaginationModel;
     };
     /**
-     * Show splash loader when loading new items.
+     * Show loading state when loading new items.
      */
     loading: {
         type: BooleanConstructor;
     };
 }>> & Readonly<{
     "onPage-change"?: ((...args: any[]) => any) | undefined;
+    onSort?: ((...args: any[]) => any) | undefined;
     "onShow-more"?: ((...args: any[]) => any) | undefined;
     "onToggle-selected"?: ((...args: any[]) => any) | undefined;
 }>, {
     color: NeonFunctionalColor;
     loading: boolean;
+    listStyle: NeonCardListStyle;
+    sortable: boolean;
     selectable: boolean;
 }, {}, {
     NeonSelectableCard: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -377,7 +421,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         hidePagination: import("vue").ComputedRef<boolean>;
         previousPage: import("vue").ComputedRef<number>;
         disabledPrevious: import("vue").ComputedRef<boolean>;
-        nextPage: import("vue").ComputedRef<number>;
+        nextPage: import("vue").ComputedRef<number>; /**
+         * 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.
+         */
         disabledNext: import("vue").ComputedRef<boolean>;
         showFirstPageWithEllipsis: import("vue").ComputedRef<boolean>;
         showLastPageWithEllipsis: import("vue").ComputedRef<boolean>;
@@ -437,9 +484,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
             alternateColor: {
-                type: () => NeonFunctionalColor; /**
-                 * Items to display as cards. Each item should be a NeonCardListModel.
-                 */
+                type: () => NeonFunctionalColor;
                 default: null;
             };
             icon: {
@@ -455,19 +500,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             buttonStyle: {
                 type: () => NeonButtonStyle;
-                default: NeonButtonStyle; /**
-                 * Model for configuring the on-demand loading layout.
-                 */
-            }; /**
-             * Model for configuring the on-demand loading layout.
-             */
+                default: NeonButtonStyle;
+            };
             buttonType: {
                 type: () => import("../../../neon").NeonButtonType;
                 default: import("../../../neon").NeonButtonType;
             };
             state: {
-                type: () => import("../../../neon").NeonState;
-                default: import("../../../neon").NeonState;
+                type: () => NeonState;
+                default: NeonState;
             };
             disabled: {
                 type: BooleanConstructor;
@@ -482,6 +523,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
             circular: {
+                /**
+                 * Model for configuring the on-demand loading layout.
+                 */
                 type: BooleanConstructor;
                 default: null;
             };
@@ -542,9 +586,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
             alternateColor: {
-                type: () => NeonFunctionalColor; /**
-                 * Items to display as cards. Each item should be a NeonCardListModel.
-                 */
+                type: () => NeonFunctionalColor;
                 default: null;
             };
             icon: {
@@ -560,19 +602,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             buttonStyle: {
                 type: () => NeonButtonStyle;
-                default: NeonButtonStyle; /**
-                 * Model for configuring the on-demand loading layout.
-                 */
-            }; /**
-             * Model for configuring the on-demand loading layout.
-             */
+                default: NeonButtonStyle;
+            };
             buttonType: {
                 type: () => import("../../../neon").NeonButtonType;
                 default: import("../../../neon").NeonButtonType;
             };
             state: {
-                type: () => import("../../../neon").NeonState;
-                default: import("../../../neon").NeonState;
+                type: () => NeonState;
+                default: NeonState;
             };
             disabled: {
                 type: BooleanConstructor;
@@ -587,6 +625,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
             circular: {
+                /**
+                 * Model for configuring the on-demand loading layout.
+                 */
                 type: BooleanConstructor;
                 default: null;
             };
@@ -617,7 +658,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             iconPosition: import("../../../neon").NeonHorizontalPosition;
             buttonStyle: NeonButtonStyle;
             buttonType: import("../../../neon").NeonButtonType;
-            state: import("../../../neon").NeonState;
+            state: NeonState;
             transparent: boolean;
             circular: boolean;
             fullWidth: boolean;
@@ -741,9 +782,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     [x: string]: unknown;
                 }>;
                 activeRoute: import("vue").ComputedRef<boolean | "" | undefined>;
-                exactRoute: import("vue").ComputedRef<boolean | "" | undefined>; /**
-                 * Model for configuring the on-demand loading layout.
-                 */
+                exactRoute: import("vue").ComputedRef<boolean | "" | undefined>;
                 onClick: () => void;
                 onSpace: () => Promise<void>;
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -902,9 +941,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: boolean;
         };
         alternateColor: {
-            type: () => NeonFunctionalColor; /**
-             * Items to display as cards. Each item should be a NeonCardListModel.
-             */
+            type: () => NeonFunctionalColor;
             default: null;
         };
         icon: {
@@ -920,19 +957,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         buttonStyle: {
             type: () => NeonButtonStyle;
-            default: NeonButtonStyle; /**
-             * Model for configuring the on-demand loading layout.
-             */
-        }; /**
-         * Model for configuring the on-demand loading layout.
-         */
+            default: NeonButtonStyle;
+        };
         buttonType: {
             type: () => import("../../../neon").NeonButtonType;
             default: import("../../../neon").NeonButtonType;
         };
         state: {
-            type: () => import("../../../neon").NeonState;
-            default: import("../../../neon").NeonState;
+            type: () => NeonState;
+            default: NeonState;
         };
         disabled: {
             type: BooleanConstructor;
@@ -947,6 +980,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: boolean;
         };
         circular: {
+            /**
+             * Model for configuring the on-demand loading layout.
+             */
             type: BooleanConstructor;
             default: null;
         };
@@ -1007,9 +1043,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: boolean;
         };
         alternateColor: {
-            type: () => NeonFunctionalColor; /**
-             * Items to display as cards. Each item should be a NeonCardListModel.
-             */
+            type: () => NeonFunctionalColor;
             default: null;
         };
         icon: {
@@ -1025,19 +1059,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         buttonStyle: {
             type: () => NeonButtonStyle;
-            default: NeonButtonStyle; /**
-             * Model for configuring the on-demand loading layout.
-             */
-        }; /**
-         * Model for configuring the on-demand loading layout.
-         */
+            default: NeonButtonStyle;
+        };
         buttonType: {
             type: () => import("../../../neon").NeonButtonType;
             default: import("../../../neon").NeonButtonType;
         };
         state: {
-            type: () => import("../../../neon").NeonState;
-            default: import("../../../neon").NeonState;
+            type: () => NeonState;
+            default: NeonState;
         };
         disabled: {
             type: BooleanConstructor;
@@ -1052,6 +1082,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: boolean;
         };
         circular: {
+            /**
+             * Model for configuring the on-demand loading layout.
+             */
             type: BooleanConstructor;
             default: null;
         };
@@ -1082,7 +1115,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         iconPosition: import("../../../neon").NeonHorizontalPosition;
         buttonStyle: NeonButtonStyle;
         buttonType: import("../../../neon").NeonButtonType;
-        state: import("../../../neon").NeonState;
+        state: NeonState;
         transparent: boolean;
         circular: boolean;
         fullWidth: boolean;
@@ -1206,9 +1239,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 [x: string]: unknown;
             }>;
             activeRoute: import("vue").ComputedRef<boolean | "" | undefined>;
-            exactRoute: import("vue").ComputedRef<boolean | "" | undefined>; /**
-             * Model for configuring the on-demand loading layout.
-             */
+            exactRoute: import("vue").ComputedRef<boolean | "" | undefined>;
             onClick: () => void;
             onSpace: () => Promise<void>;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -1334,9 +1365,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             [x: string]: unknown;
         }>;
         activeRoute: import("vue").ComputedRef<boolean | "" | undefined>;
-        exactRoute: import("vue").ComputedRef<boolean | "" | undefined>; /**
-         * Model for configuring the on-demand loading layout.
-         */
+        exactRoute: import("vue").ComputedRef<boolean | "" | undefined>;
         onClick: () => void;
         onSpace: () => Promise<void>;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -1418,6 +1447,83 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             disabled: boolean;
         }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    NeonDraggableCard: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+            draggable: {
+                type: import("vue").PropType<boolean>;
+                required: true;
+            };
+            color: {
+                type: import("vue").PropType<NeonFunctionalColor>;
+            };
+            dragIndex: {
+                type: import("vue").PropType<number>;
+            };
+            index: {
+                type: import("vue").PropType<number>;
+                required: true;
+            };
+        }>> & Readonly<{
+            onDrop?: ((...args: any[]) => any) | undefined;
+            "onOn-drag"?: ((...args: any[]) => any) | undefined;
+        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            drop: (...args: any[]) => void;
+            "on-drag": (...args: any[]) => void;
+        }, import("vue").PublicProps, {}, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("vue").ExtractPropTypes<{
+            draggable: {
+                type: import("vue").PropType<boolean>;
+                required: true;
+            };
+            color: {
+                type: import("vue").PropType<NeonFunctionalColor>;
+            };
+            dragIndex: {
+                type: import("vue").PropType<number>;
+            };
+            index: {
+                type: import("vue").PropType<number>;
+                required: true;
+            };
+        }>> & Readonly<{
+            onDrop?: ((...args: any[]) => any) | undefined;
+            "onOn-drag"?: ((...args: any[]) => any) | undefined;
+        }>, {}, {}, {}, {}, {}>;
+        __isFragment?: undefined;
+        __isTeleport?: undefined;
+        __isSuspense?: undefined;
+    } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+        draggable: {
+            type: import("vue").PropType<boolean>;
+            required: true;
+        };
+        color: {
+            type: import("vue").PropType<NeonFunctionalColor>;
+        };
+        dragIndex: {
+            type: import("vue").PropType<number>;
+        };
+        index: {
+            type: import("vue").PropType<number>;
+            required: true;
+        };
+    }>> & Readonly<{
+        onDrop?: ((...args: any[]) => any) | undefined;
+        "onOn-drag"?: ((...args: any[]) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        drop: (...args: any[]) => void;
+        "on-drag": (...args: any[]) => void;
+    }, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            default?(_: {}): any;
+        };
+    });
     NeonLoadingStateCard: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
         NeonInline: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
             gap: {

package/dist/src/components/layout/card-list/draggable-card/NeonDraggableCard.vue.d.ts

@@ -0,0 +1,59 @@
+import { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Whether the card is draggable.
+     */
+    draggable: boolean;
+    /**
+     * The color used for the card hover states.
+     */
+    color?: NeonFunctionalColor | undefined;
+    /**
+     * The index of the card currently being dragged.
+     */
+    dragIndex?: number | undefined;
+    /**
+     * The index of this card.
+     */
+    index: number;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    drop: (...args: any[]) => void;
+    "on-drag": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Whether the card is draggable.
+     */
+    draggable: boolean;
+    /**
+     * The color used for the card hover states.
+     */
+    color?: NeonFunctionalColor | undefined;
+    /**
+     * The index of the card currently being dragged.
+     */
+    dragIndex?: number | undefined;
+    /**
+     * The index of this card.
+     */
+    index: number;
+}>>> & Readonly<{
+    onDrop?: ((...args: any[]) => any) | undefined;
+    "onOn-drag"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};