@rebilly/revel 6.31.4 → 6.32.0

package/CHANGELOG.md

@@ -1 +1,6 @@
-## [6.31.4](https://github.com/Rebilly/rebilly/compare/revel-v6.31.3...revel-v6.31.4) (2024-09-09)
+## [6.32.0](https://github.com/Rebilly/rebilly/compare/revel-v6.31.5...revel-v6.32.0) (2024-09-11)
+
+
+### Features
+
+* **revel:** Update `RGrid` component ([#7420](https://github.com/Rebilly/rebilly/issues/7420)) ([bc10b5a](https://github.com/Rebilly/rebilly/commit/bc10b5a3294031d869a6c9343251c408e5f35f0f))

package/dist/components/index.d.ts

@@ -8,6 +8,7 @@ export { default as RCheckbox } from './r-checkbox/r-checkbox.vue';
 export { default as RDateInput } from './r-date-input/r-date-input.vue';
 export { default as RFileUpload } from './r-file-upload/r-file-upload.vue';
 export { default as RGrid } from './r-grid/r-grid.vue';
+export { default as RGridCell } from './r-grid/r-grid-cell.vue';
 export { default as RIcon } from './r-icon/r-icon.vue';
 export { default as RImg } from './r-img/r-img.vue';
 export { default as RInput } from './r-input/r-input.vue';

package/dist/components/r-grid/r-grid-cell.vue.d.ts

@@ -0,0 +1,68 @@
+import type { GridSize, Distribution } from './types';
+interface Props {
+    /**
+     * Number of columns the cell will fill (1 to 12)
+     */
+    span?: GridSize;
+    /**
+     * Justify items in the cell
+     */
+    justifySelf?: Nullable<Distribution>;
+    /**
+     * Align items in the cell
+     */
+    alignSelf?: Nullable<Distribution>;
+    /**
+     * Move to the next row
+     */
+    wrap?: boolean;
+    /**
+     * Move the cell to the right. E.g "1, 5"
+     */
+    offset?: Nullable<Offset>;
+}
+type Offset = `${GridSize}, ${GridSize}`;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+    span: string;
+    justifySelf: null;
+    alignSelf: null;
+    wrap: boolean;
+    offset: null;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+    span: string;
+    justifySelf: null;
+    alignSelf: null;
+    wrap: boolean;
+    offset: null;
+}>>>, {
+    span: GridSize;
+    offset: Nullable<"1, 1" | "1, 2" | "1, 3" | "1, 4" | "1, 5" | "1, 6" | "1, 7" | "1, 8" | "1, 9" | "1, 10" | "1, 11" | "1, 12" | "2, 1" | "2, 2" | "2, 3" | "2, 4" | "2, 5" | "2, 6" | "2, 7" | "2, 8" | "2, 9" | "2, 10" | "2, 11" | "2, 12" | "3, 1" | "3, 2" | "3, 3" | "3, 4" | "3, 5" | "3, 6" | "3, 7" | "3, 8" | "3, 9" | "3, 10" | "3, 11" | "3, 12" | "4, 1" | "4, 2" | "4, 3" | "4, 4" | "4, 5" | "4, 6" | "4, 7" | "4, 8" | "4, 9" | "4, 10" | "4, 11" | "4, 12" | "5, 1" | "5, 2" | "5, 3" | "5, 4" | "5, 5" | "5, 6" | "5, 7" | "5, 8" | "5, 9" | "5, 10" | "5, 11" | "5, 12" | "6, 1" | "6, 2" | "6, 3" | "6, 4" | "6, 5" | "6, 6" | "6, 7" | "6, 8" | "6, 9" | "6, 10" | "6, 11" | "6, 12" | "7, 1" | "7, 2" | "7, 3" | "7, 4" | "7, 5" | "7, 6" | "7, 7" | "7, 8" | "7, 9" | "7, 10" | "7, 11" | "7, 12" | "8, 1" | "8, 2" | "8, 3" | "8, 4" | "8, 5" | "8, 6" | "8, 7" | "8, 8" | "8, 9" | "8, 10" | "8, 11" | "8, 12" | "9, 1" | "9, 2" | "9, 3" | "9, 4" | "9, 5" | "9, 6" | "9, 7" | "9, 8" | "9, 9" | "9, 10" | "9, 11" | "9, 12" | "10, 1" | "10, 2" | "10, 3" | "10, 4" | "10, 5" | "10, 6" | "10, 7" | "10, 8" | "10, 9" | "10, 10" | "10, 11" | "10, 12" | "11, 1" | "11, 2" | "11, 3" | "11, 4" | "11, 5" | "11, 6" | "11, 7" | "11, 8" | "11, 9" | "11, 10" | "11, 11" | "11, 12" | "12, 1" | "12, 2" | "12, 3" | "12, 4" | "12, 5" | "12, 6" | "12, 7" | "12, 8" | "12, 9" | "12, 10" | "12, 11" | "12, 12">;
+    justifySelf: Nullable<Distribution>;
+    alignSelf: Nullable<Distribution>;
+    wrap: boolean;
+}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<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;
+    };
+};

package/dist/components/r-grid/r-grid.vue.d.ts

@@ -1,223 +1,81 @@
-import type { PropType } from 'vue';
-import type { GridColumn } from './columnTypes/types';
-interface Column extends GridColumn {
-    [key: string]: unknown;
-    name: string;
-    renderOptions?: Record<string, unknown>;
-    class?: Record<string, boolean>;
-    style?: Record<string, unknown>;
-    highlight?: boolean;
-    header?: (column: unknown) => string;
-    label?: string;
-}
-declare const _default: import("vue").DefineComponent<{
+import type { GridSize, Gap, Distribution, ContentDistribution } from './types';
+export interface Props {
     /**
-     * Specify the columns
+     * Number of grid columns (1 to 12)
      */
-    columns: {
-        type: PropType<{
-            columns: Column[];
-        }>;
-        required: true;
-    };
+    columns?: GridSize;
     /**
-     * Specify if the grid has frozen (fixed) left column
+     * Gap between grid columns (1 to 12)
      */
-    hasFrozenColumn: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    gap?: Gap;
     /**
-     * Defines the property, which changes will trigger the fetching of data
+     * Justify items in the grid
      */
-    watcher: {
-        type: (BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
-        default: null;
-    };
+    justifyItems?: Nullable<Distribution>;
     /**
-     * Returns some data to be rendered by the default scoped slot
+     * Align items in the grid
      */
-    provider: {
-        type: PropType<() => object[] | object[] | Promise<object[]>>;
-        required: true;
-    };
+    alignItems?: Nullable<Distribution>;
     /**
-     * Defines if the loading state is fullscreen
+     * Justify content in the grid
      */
-    isLoaderFullscreen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, unknown, {
-    data: never[];
-}, {
-    computedColumns(): Column[];
-}, {
-    getColorFromIndex: (value: string | number, baseRGB?: string) => {
-        color: string;
-        backgroundColor: string;
-    } | undefined;
-    getComponent({ renderAs }: Column): import("vue").DefineComponent<{
-        value: {
-            type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
-            required: true;
-        };
-        row: {
-            type: ObjectConstructor;
-            required: true;
-        };
-        column: {
-            type: PropType<import("./columnTypes/types").BadgeColumn>;
-            required: true;
-        };
-    }, unknown, unknown, {}, {
-        getBadgeType(value: string): string;
-    }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-        value: {
-            type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
-            required: true;
-        };
-        row: {
-            type: ObjectConstructor;
-            required: true;
-        };
-        column: {
-            type: PropType<import("./columnTypes/types").BadgeColumn>;
-            required: true;
-        };
-    }>>, {}> | import("vue").DefineComponent<{
-        column: {
-            type: PropType<import("./columnTypes/types").ButtonColumn>;
-            required: true;
-        };
-        row: {
-            type: ObjectConstructor;
-            required: true;
-        };
-        value: {
-            type: StringConstructor;
-            default: null;
-        };
-    }, unknown, unknown, {
-        buttons(): import("./columnTypes/types").ButtonOptions[];
-    }, {
-        buttonOptions(button: import("./columnTypes/types").ButtonOptions): import("./columnTypes/button.vue").ButtonColumnRenderOptions;
-    }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-        column: {
-            type: PropType<import("./columnTypes/types").ButtonColumn>;
-            required: true;
-        };
-        row: {
-            type: ObjectConstructor;
-            required: true;
-        };
-        value: {
-            type: StringConstructor;
-            default: null;
-        };
-    }>>, {
-        value: string;
-    }> | import("vue").DefineComponent<{
-        column: {
-            type: PropType<GridColumn>;
-            required: true;
-        };
-        value: {
-            type: StringConstructor;
-            required: true;
-        };
-    }, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-        column: {
-            type: PropType<GridColumn>;
-            required: true;
-        };
-        value: {
-            type: StringConstructor;
-            required: true;
-        };
-    }>>, {}> | import("vue").DefineComponent<{
-        column: {
-            type: PropType<import("./columnTypes/types").DateColumn>;
-            required: true;
-        };
-        value: {
-            type: StringConstructor;
-            required: true;
-        };
-    }, unknown, unknown, {
-        displayValue(): string;
-        title(): string;
-    }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-        column: {
-            type: PropType<import("./columnTypes/types").DateColumn>;
-            required: true;
-        };
-        value: {
-            type: StringConstructor;
-            required: true;
-        };
-    }>>, {}> | import("vue").DefineComponent<{
-        value: {
-            type: PropType<string | number>;
-            required: true;
-        };
-        column: {
-            type: PropType<import("./columnTypes/types").NumericColumn>;
-            required: true;
-        };
-    }, unknown, unknown, {
-        displayValue(): string | number | null;
-    }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-        value: {
-            type: PropType<string | number>;
-            required: true;
-        };
-        column: {
-            type: PropType<import("./columnTypes/types").NumericColumn>;
-            required: true;
-        };
-    }>>, {}>;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    jutifyContent?: Nullable<ContentDistribution>;
     /**
-     * Specify the columns
+     * Align content in the grid
      */
-    columns: {
-        type: PropType<{
-            columns: Column[];
-        }>;
-        required: true;
-    };
+    alignContent?: Nullable<ContentDistribution>;
     /**
-     * Specify if the grid has frozen (fixed) left column
+     * Prevents grid to stack on smaller screens
      */
-    hasFrozenColumn: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Defines the property, which changes will trigger the fetching of data
-     */
-    watcher: {
-        type: (BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
-        default: null;
+    unstackable?: boolean;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+    columns: string;
+    gap: string;
+    justifyItems: null;
+    alignItems: null;
+    jutifyContent: null;
+    alignContent: null;
+    unstackable: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+    columns: string;
+    gap: string;
+    justifyItems: null;
+    alignItems: null;
+    jutifyContent: null;
+    alignContent: null;
+    unstackable: boolean;
+}>>>, {
+    columns: GridSize;
+    gap: Gap;
+    justifyItems: Nullable<Distribution>;
+    alignItems: Nullable<Distribution>;
+    jutifyContent: Nullable<ContentDistribution>;
+    alignContent: Nullable<ContentDistribution>;
+    unstackable: boolean;
+}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
     };
-    /**
-     * Returns some data to be rendered by the default scoped slot
-     */
-    provider: {
-        type: PropType<() => object[] | object[] | Promise<object[]>>;
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<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;
     };
-    /**
-     * Defines if the loading state is fullscreen
-     */
-    isLoaderFullscreen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>>, {
-    isLoaderFullscreen: boolean;
-    watcher: string | number | boolean | Record<string, any>;
-    hasFrozenColumn: boolean;
-}>;
-export default _default;
+};

package/dist/components/r-grid/types.d.ts

@@ -0,0 +1,4 @@
+export type GridSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+export type Distribution = 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+export type ContentDistribution = Distribution | 'space-between' | 'space-around' | 'space-evenly';
+export type Gap = '0' | GridSize;

package/dist/components/r-input/r-input.vue.d.ts

@@ -83,8 +83,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     inputEvents: Record<string, unknown>;
     rightIcon: Nullable<"fingerprint" | "dashboard" | "lists" | "automation" | "customers" | "orders" | "transactions" | "guides" | "settings" | "alerts" | "stream" | "search" | "filter" | "collapse-segments" | "resize-columns" | "segments" | "lock" | "caret-up" | "caret-down" | "caret-down-s" | "caret-left" | "caret-right" | "arrow-up" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up-l" | "arrow-down-l" | "arrow-left-l" | "arrow-right-l" | "close" | "close-s" | "logout" | "actions" | "circle" | "eye" | "eye-closed" | "burger" | "help" | "info" | "dash-l" | "company" | "website" | "email" | "external-link" | "trash" | "bank" | "map-marker" | "credit-card" | "checkout" | "check-s" | "custom-fields" | "calendar" | "columns" | "blocklists" | "webhooks" | "sticky-note" | "clip" | "loading" | "product" | "api-key" | "coupon" | "average" | "payments" | "tag" | "clone" | "copy" | "edit" | "edit-s" | "stop" | "unlock" | "event" | "invoices" | "rules" | "users" | "sharp" | "at" | "file" | "download" | "export" | "data-exports" | "shipping" | "plus" | "drag" | "reset" | "drag-move" | "world" | "integrations" | "id" | "phone" | "batch" | "merge" | "placeholders" | "caret-double-left" | "caret-double-right" | "heart" | "checkbox-checkmark" | "radio-checkmark" | "star" | "star-empty" | "report-match" | "emulate" | "billing-portal" | "app-store" | "kyc" | "cake" | "briefcase" | "tag-untag" | "risk-score" | "list" | "notifications" | "one-column" | "rebilly-logo" | "two-columns" | "meter" | "reports" | "allowlists" | "collapse-layout" | "rebilly-icon" | "sun" | "moon" | "upload" | "camera">;
     name: string;
-    rows: string | number;
-    numeric: boolean;
     helpText: Nullable<string>;
     multiline: boolean;
     submitOnEnter: boolean;
@@ -96,6 +94,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     leftLabel: Nullable<string>;
     rightLabel: Nullable<string>;
     password: boolean;
+    numeric: boolean;
+    rows: string | number;
     autoFocus: boolean;
     autoHighlight: boolean;
     autoHighlightOnFocus: boolean;

package/dist/components/r-modal/r-modal.vue.d.ts

@@ -62,9 +62,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     size: Nullable<ModalSize>;
     scroll: boolean;
     show: boolean;
-    duration: number;
     cancelLabel: string;
     scrollContent: boolean;
+    duration: number;
 }>, {
     "header-actions"?(_: {}): any;
     contents?(_: {}): any;

package/dist/components/r-popper/r-popper.vue.d.ts

@@ -121,8 +121,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     autoHide: boolean;
     position: "bottomEnd" | "bottomStart" | "topStart" | "topEnd";
     offset: number;
-    state: Nullable<boolean>;
     duration: number;
+    state: Nullable<boolean>;
     escToHide: boolean;
     globalAutoHide: boolean;
     closeFunction: Nullable<() => unknown>;