@rotki/ui-library 0.10.0 → 0.11.0

package/README.md

@@ -6,7 +6,7 @@ A Vue component library and design system for rotki
 
 ### Installing the library
 
-You can start using the library after installing it from npm along with the roboto font: 
+You can start using the library after installing it from npm along with the roboto font:
 
 ```bash
 pnpm install -D --save-exact @rotki/ui-library @fontsource/roboto
@@ -45,7 +45,9 @@ import { RuiButton } from '@rotki/ui-library';
 
 <template>
   <div>
-    <RuiButton outlined>This is button</RuiButton>
+    <RuiButton outlined>
+      This is button
+    </RuiButton>
   </div>
 </template>
 ```
@@ -71,6 +73,7 @@ switchThemeScheme(ThemeMode.dark);
 ### Using the icons
 
 You need to specify which icons you want to enable, when installing the RuiPlugin.
+
 ```typescript
 import { Ri4kFill, Ri4kLine, createRui } from '@rotki/ui-library';
 
@@ -96,6 +99,7 @@ import { RuiIcon } from '@rotki/ui-library';
 ```
 
 ### Use @rotki/ui-library tailwindcss theme
+
 You can extend @rotki/ui-library tailwind theme configuration by adding these to your tailwind config. It will provide you the classes for the colors, typography, and shadow.
 
 ```javascript
@@ -118,33 +122,40 @@ pnpm install --frozen-lockfile
 ```
 
 ### Compiles and minifies for production
+
 The following command when executed from the project root will build the `@rotki/ui-library` bundle.
 This command will create the bundle for both Vue version >=3.4.3.
+
 ```
 pnpm run build:prod
 ```
 
 If you want to build for specific version, you can run:
+
 ```
 pnpm run build
 ```
 
 ### Lint check
+
 ```
 pnpm run lint
 ```
 
 ### Lints and fixes files
+
 ```
 pnpm run lint:fix
 ```
 
 ### Type check
+
 ```
 pnpm run typecheck
 ```
 
 ### Storybook
+
 In order to run the storybook, you can run:
 
 ```
@@ -152,6 +163,7 @@ pnpm run storybook
 ```
 
 ### Testing: Unit
+
 In order to test the components, you can run:
 
 ```
@@ -159,6 +171,7 @@ pnpm run test
 ```
 
 ### Testing: end-to-end
+
 In order to test the components in use in a vue 3 project, you can run:
 
 ```
@@ -173,6 +186,7 @@ pnpm run coverage:preview
 ```
 
 ### Locally testing the library
+
 After you build the bundle, in the `package.json` on your main project, you can add this to the dependencies:
 
 ```json
@@ -184,7 +198,9 @@ After you build the bundle, in the `package.json` on your main project, you can
 When the dependency installed on the main project, it will run the `prepare` script.
 
 ### Generating the library icons
+
 We use remix-icons. You need to run this script to scrap the svgs data from remix-icons. (This script runs automatically on `prepare`. Run this in case the icons aren't generated properly)
+
 ```
 pnpm run generate:icons
 ```
@@ -192,4 +208,3 @@ pnpm run generate:icons
 ## License
 
 [AGPL-3.0](./LICENSE) License &copy; 2023- [Rotki Solutions GmbH](https://github.com/rotki)
-

package/dist/components/alerts/Alert.vue.d.ts

@@ -1,5 +1,5 @@
-import { type ContextColorsType } from '../../consts/colors';
-import { type RuiIcons } from '~/src';
+import type { ContextColorsType } from '../../consts/colors';
+import type { RuiIcons } from '~/src';
 export interface Props {
     title?: string;
     description?: string;

package/dist/components/buttons/button/Button.vue.d.ts

@@ -1,4 +1,4 @@
-import { type ContextColorsType } from '../../../consts/colors';
+import type { ContextColorsType } from '../../../consts/colors';
 export interface Props<T = undefined> {
     disabled?: boolean;
     loading?: boolean;

package/dist/components/buttons/button-group/ButtonGroup.vue.d.ts

@@ -1,4 +1,4 @@
-import { type ContextColorsType } from '../../../consts/colors';
+import type { ContextColorsType } from '../../../consts/colors';
 export interface Props<T = undefined> {
     vertical?: boolean;
     color?: ContextColorsType;

package/dist/components/chips/Chip.vue.d.ts

@@ -1,5 +1,5 @@
-import { type ContextColorsType } from '../../consts/colors';
-import { type RuiIcons } from '~/src';
+import type { ContextColorsType } from '../../consts/colors';
+import type { RuiIcons } from '~/src';
 export interface Props {
     tile?: boolean;
     clickable?: boolean;

package/dist/components/forms/auto-complete/AutoComplete.vue.d.ts

@@ -1,4 +1,4 @@
-import { type ContextColorsType } from '../../../consts/colors';
+import type { ContextColorsType } from '../../../consts/colors';
 export type Option = Record<string, any>;
 export type ModelValue = Option | Option[] | null;
 export interface Props {

package/dist/components/forms/checkbox/Checkbox.vue.d.ts

@@ -1,4 +1,4 @@
-import { type ContextColorsType } from '../../../consts/colors';
+import type { ContextColorsType } from '../../../consts/colors';
 export interface Props {
     modelValue?: boolean;
     indeterminate?: boolean;

package/dist/components/forms/radio-button/radio/Radio.vue.d.ts

@@ -1,4 +1,4 @@
-import { type ContextColorsType } from '../../../../consts/colors';
+import type { ContextColorsType } from '../../../../consts/colors';
 export interface RadioProps {
     value: string;
     modelValue?: string;

package/dist/components/forms/radio-button/radio-group/RadioGroup.vue.d.ts

@@ -1,4 +1,4 @@
-import { type ContextColorsType } from '~/src';
+import type { ContextColorsType } from '~/src';
 export interface Props {
     modelValue?: string;
     inline?: boolean;

package/dist/components/forms/text-area/TextArea.vue.d.ts

@@ -1,5 +1,5 @@
-import { type ContextColorsType } from '../../../consts/colors';
-import { type RuiIcons } from '~/src';
+import type { ContextColorsType } from '../../../consts/colors';
+import type { RuiIcons } from '~/src';
 export interface Props {
     value?: string;
     label?: string;

package/dist/components/forms/text-field/TextField.vue.d.ts

@@ -1,5 +1,5 @@
-import { type ContextColorsType } from '../../../consts/colors';
-import { type RuiIcons } from '~/src';
+import type { ContextColorsType } from '../../../consts/colors';
+import type { RuiIcons } from '~/src';
 export interface TextFieldProps {
     modelValue?: string;
     label?: string;

package/dist/components/icons/Icon.vue.d.ts

@@ -1,5 +1,5 @@
-import { type ContextColorsType } from '../../consts/colors';
-import { type RuiIcons } from '~/src';
+import type { ContextColorsType } from '../../consts/colors';
+import type { RuiIcons } from '~/src';
 export interface Props {
     name: RuiIcons;
     size?: number | string;

package/dist/components/index.d.ts

@@ -15,11 +15,10 @@ import { type Props as DialogProps, default as RuiDialog } from '../components/o
 import { type Props as FooterStepperProps, default as RuiFooterStepper } from '../components/steppers/FooterStepper.vue';
 import { type Props as ProgressProps, default as RuiProgress } from '../components/progress/Progress.vue';
 import { type Props as RadioGroupProps, default as RuiRadioGroup } from '../components/forms/radio-button/radio-group/RadioGroup.vue';
-import { type RadioProps as RadioProps, default as RuiRadio } from '../components/forms/radio-button/radio/Radio.vue';
+import { type RadioProps, default as RuiRadio } from '../components/forms/radio-button/radio/Radio.vue';
 import { type Props as RevealableTextFieldProps, default as RuiRevealableTextField } from '../components/forms/revealable-text-field/RevealableTextField.vue';
 import { type Props as LogoProps, default as RuiLogo } from '../components/logos/Logo.vue';
 import { default as RuiSimpleSelect, type Props as SimpleSelectProps } from '../components/forms/select/SimpleSelect.vue';
-import { type TableColumn as DataTableColumn, type GroupKeys as DataTableGroupKeys, type SortColumn as DataTableSortColumn, type TableSortData as DataTableSortData } from '../components/tables/TableHead.vue';
 import { type TableOptions as DataTableOptions, type Props as DataTableProps, default as RuiDataTable } from '../components/tables/DataTable.vue';
 import { type Props as ExpandButtonProps, default as RuiTableRowExpander } from '../components/tables/ExpandButton.vue';
 import { default as RuiTablePagination, type TablePaginationData, type Props as TablePaginationProps } from '../components/tables/TablePagination.vue';
@@ -30,4 +29,5 @@ import { default as RuiTab, type Props as TabProps } from '../components/tabs/ta
 import { default as RuiTabItems, type Props as TabItemsProps } from '../components/tabs/tab-items/TabItems.vue';
 import { default as RuiTabItem, type Props as TabItemProps } from '../components/tabs/tab-item/TabItem.vue';
 import { default as RuiSkeletonLoader, type Props as SkeletonLoaderProps } from '../components/loaders/Skeleton.vue';
+import type { TableColumn as DataTableColumn, GroupKeys as DataTableGroupKeys, SortColumn as DataTableSortColumn, TableSortData as DataTableSortData } from '../components/tables/TableHead.vue';
 export { RuiAlert, RuiAutoComplete, RuiBadge, RuiButton, RuiButtonGroup, RuiCheckbox, RuiChip, RuiFooterStepper, RuiIcon, RuiLogo, RuiProgress, RuiRadio, RuiRadioGroup, RuiRevealableTextField, RuiStepper, RuiTextField, RuiTooltip, RuiDataTable, RuiSimpleSelect, RuiDialog, RuiCard, RuiCardHeader, RuiTabs, RuiTab, RuiTabItems, RuiTabItem, RuiTablePagination, RuiSkeletonLoader, RuiTextArea, RuiDivider, RuiTableRowExpander, AutoCompleteProps, ChipProps, TooltipProps, SimpleSelectProps, DataTableProps, DataTableColumn, DataTableSortColumn, DataTableOptions, TablePaginationData, DialogProps, ButtonProps, ButtonGroupProps, CardProps, CardHeaderProps, BadgeProps, AlertProps, CheckboxProps, ProgressProps, RadioGroupProps, RadioProps, LogoProps, StepperProps, TextFieldProps, IconProps, FooterStepperProps, TabsProps, TabProps, TabItemsProps, TabItemProps, TablePaginationProps, RevealableTextFieldProps, SkeletonLoaderProps, DividerProps, TextAreaProps, ExpandButtonProps, DataTableSortData, DataTableGroupKeys, };

package/dist/components/index.es.js

@@ -1,7 +1,7 @@
-import { A as m, a as d, B as T, b, d as n, m as g, n as x, C, e as S, D as A, l as B, v as D, F, I, _ as c, P as h, R as k, f as v, g as P, k as f, t as E, h as G, p as L, r as j, q, s as w, E as H, o as _, u as y, i as z, j as J } from "../index-2kT4UFtO.js";
+import { A as m, a as d, B as T, b, d as n, m as g, n as x, C, e as S, D as A, l as B, v as D, F, I, _ as c, P as h, R as k, f as v, g as P, k as f, t as E, h as G, p as L, r as j, q, s as w, E as H, o as _, u as y, i as z, j as J } from "../index-H4RSbryN.js";
 import "vue";
 import "@vueuse/shared";
-import "../theme-V5yenaDk.js";
+import "../theme-DT8UjYf9.js";
 import "../icons/icons_1.es.js";
 import "../icons/icons_2.es.js";
 import "../icons/icons_5.es.js";

package/dist/components/overlays/badge/Badge.vue.d.ts

@@ -1,5 +1,5 @@
-import { type ContextColorsType } from '../../../consts/colors';
-import { type RuiIcons } from '~/src';
+import type { ContextColorsType } from '../../../consts/colors';
+import type { RuiIcons } from '~/src';
 export interface Props {
     text?: string | null;
     icon?: RuiIcons | null;

package/dist/components/progress/Progress.vue.d.ts

@@ -1,4 +1,4 @@
-import { type ContextColorsType } from '../../consts/colors';
+import type { ContextColorsType } from '../../consts/colors';
 export interface Props {
     /**
      * in percentage value, required when variant === determinate or buffer

package/dist/components/tables/DataTable.vue.d.ts

@@ -4,10 +4,12 @@ export interface TableOptions<T> {
     pagination?: TablePaginationData;
     sort?: SortColumn<T> | SortColumn<T>[];
 }
-export type GroupedTableRow<T> = T & Partial<{
-    groupVal: string;
+export interface GroupHeader<T> {
+    __header__: true;
+    identifier: string;
     group: Partial<T>;
-}>;
+}
+export type GroupedTableRow<T> = T | GroupHeader<T>;
 export interface Props<T, K extends keyof T> {
     /**
      * list of items for each row
@@ -133,48 +135,37 @@ declare const _default: <T extends object, IdType extends keyof T = keyof T>(__V
     props: Props<T, IdType>;
     expose(exposed: {}): void;
     attrs: any;
-    slots: Partial<Record<string, (_: {
-        column: TableColumn<T>;
-    }) => any>> & Partial<Record<string, (_: {
-        column: TableColumn<T>;
-    }) => any>> & Partial<Record<string, (_: {
+    slots: Partial<Record<`header.${string}`, (props: {
         column: TableColumn<T>;
-        row: GroupedTableRow<T>;
-        index: number;
-    }) => any>> & Partial<Record<string, (_: {
+    }) => any> & Record<`item.${string}`, (props: {
         column: TableColumn<T>;
+        row: T;
         index: number;
-        row: GroupedTableRow<T>;
-    }) => any>> & {
-        "body.prepend"?(_: {
+    }) => any> & {
+        'body.prepend': (props: {
             colspan: number;
-        }): any;
-        "group.header"?(_: {
+        }) => any;
+        'body.append': (props: {
             colspan: number;
-            row: GroupedTableRow<T>;
-            group: Partial<T> | undefined;
-            groupKey: string;
-            groupValue: string | undefined;
+        }) => any;
+        'group.header': (props: {
+            colspan: number;
+            header: GroupHeader<T>;
             isOpen: boolean;
             toggle: () => void;
-        }): any;
-        "group.header.content"?(_: {
-            row: GroupedTableRow<T>;
-            group: Partial<T> | undefined;
+        }) => any;
+        'group.header.content': (props: {
+            header: GroupHeader<T>;
             groupKey: string;
-            groupValue: string | undefined;
-        }): any;
-        "expanded-item"?(_: {
-            row: GroupedTableRow<T>;
+        }) => any;
+        'expanded-item': (props: {
+            row: T;
             index: number;
-        }): any;
-        "no-data"?(_: {}): any;
-        "empty-description"?(_: {}): any;
-        "body.append"?(_: {
-            colspan: number;
-        }): any;
-        tfoot?(_: {}): any;
-    };
+        }) => any;
+        'no-data': () => any;
+        'empty-description': () => any;
+        tfoot: () => any;
+    }>;
     emit: {
         (e: 'update:model-value', value?: T[IdType][] | undefined): void;
         (e: 'update:expanded', value: T[]): void;
@@ -189,48 +180,37 @@ declare const _default: <T extends object, IdType extends keyof T = keyof T>(__V
     props: Props<T, IdType>;
     expose(exposed: {}): void;
     attrs: any;
-    slots: Partial<Record<string, (_: {
-        column: TableColumn<T>;
-    }) => any>> & Partial<Record<string, (_: {
+    slots: Partial<Record<`header.${string}`, (props: {
         column: TableColumn<T>;
-    }) => any>> & Partial<Record<string, (_: {
-        column: TableColumn<T>;
-        row: GroupedTableRow<T>;
-        index: number;
-    }) => any>> & Partial<Record<string, (_: {
+    }) => any> & Record<`item.${string}`, (props: {
         column: TableColumn<T>;
+        row: T;
         index: number;
-        row: GroupedTableRow<T>;
-    }) => any>> & {
-        "body.prepend"?(_: {
+    }) => any> & {
+        'body.prepend': (props: {
             colspan: number;
-        }): any;
-        "group.header"?(_: {
+        }) => any;
+        'body.append': (props: {
             colspan: number;
-            row: GroupedTableRow<T>;
-            group: Partial<T> | undefined;
-            groupKey: string;
-            groupValue: string | undefined;
+        }) => any;
+        'group.header': (props: {
+            colspan: number;
+            header: GroupHeader<T>;
             isOpen: boolean;
             toggle: () => void;
-        }): any;
-        "group.header.content"?(_: {
-            row: GroupedTableRow<T>;
-            group: Partial<T> | undefined;
+        }) => any;
+        'group.header.content': (props: {
+            header: GroupHeader<T>;
             groupKey: string;
-            groupValue: string | undefined;
-        }): any;
-        "expanded-item"?(_: {
-            row: GroupedTableRow<T>;
+        }) => any;
+        'expanded-item': (props: {
+            row: T;
             index: number;
-        }): any;
-        "no-data"?(_: {}): any;
-        "empty-description"?(_: {}): any;
-        "body.append"?(_: {
-            colspan: number;
-        }): any;
-        tfoot?(_: {}): any;
-    };
+        }) => any;
+        'no-data': () => any;
+        'empty-description': () => any;
+        tfoot: () => any;
+    }>;
     emit: {
         (e: 'update:model-value', value?: T[IdType][] | undefined): void;
         (e: 'update:expanded', value: T[]): void;
@@ -248,48 +228,37 @@ declare const _default: <T extends object, IdType extends keyof T = keyof T>(__V
         props: Props<T, IdType>;
         expose(exposed: {}): void;
         attrs: any;
-        slots: Partial<Record<string, (_: {
-            column: TableColumn<T>;
-        }) => any>> & Partial<Record<string, (_: {
+        slots: Partial<Record<`header.${string}`, (props: {
             column: TableColumn<T>;
-        }) => any>> & Partial<Record<string, (_: {
+        }) => any> & Record<`item.${string}`, (props: {
             column: TableColumn<T>;
-            row: GroupedTableRow<T>;
+            row: T;
             index: number;
-        }) => any>> & Partial<Record<string, (_: {
-            column: TableColumn<T>;
-            index: number;
-            row: GroupedTableRow<T>;
-        }) => any>> & {
-            "body.prepend"?(_: {
+        }) => any> & {
+            'body.prepend': (props: {
                 colspan: number;
-            }): any;
-            "group.header"?(_: {
+            }) => any;
+            'body.append': (props: {
                 colspan: number;
-                row: GroupedTableRow<T>;
-                group: Partial<T> | undefined;
-                groupKey: string;
-                groupValue: string | undefined;
+            }) => any;
+            'group.header': (props: {
+                colspan: number;
+                header: GroupHeader<T>;
                 isOpen: boolean;
                 toggle: () => void;
-            }): any;
-            "group.header.content"?(_: {
-                row: GroupedTableRow<T>;
-                group: Partial<T> | undefined;
+            }) => any;
+            'group.header.content': (props: {
+                header: GroupHeader<T>;
                 groupKey: string;
-                groupValue: string | undefined;
-            }): any;
-            "expanded-item"?(_: {
-                row: GroupedTableRow<T>;
+            }) => any;
+            'expanded-item': (props: {
+                row: T;
                 index: number;
-            }): any;
-            "no-data"?(_: {}): any;
-            "empty-description"?(_: {}): any;
-            "body.append"?(_: {
-                colspan: number;
-            }): any;
-            tfoot?(_: {}): any;
-        };
+            }) => any;
+            'no-data': () => any;
+            'empty-description': () => any;
+            tfoot: () => any;
+        }>;
         emit: {
             (e: 'update:model-value', value?: T[IdType][] | undefined): void;
             (e: 'update:expanded', value: T[]): void;

package/dist/components/tables/ExpandButton.vue.d.ts

@@ -1,4 +1,4 @@
-import { type RuiIcons } from '~/src';
+import type { RuiIcons } from '~/src';
 export interface Props {
     expanded: boolean;
     icon?: RuiIcons;

package/dist/components/tables/TableHead.vue.d.ts

@@ -3,7 +3,7 @@
  * The column name must be a key of the passed data object type.
  * @template T - The type of the data in the column.
  */
-export type TableRowKey<T> = keyof T;
+export type TableRowKey<T> = keyof T extends string ? keyof T : never;
 export interface BaseTableColumn<T> {
     key: TableRowKey<T> | string;
     sortable?: boolean;
@@ -11,6 +11,8 @@ export interface BaseTableColumn<T> {
     align?: 'start' | 'center' | 'end';
     class?: string;
     cellClass?: string;
+    colspan?: string | number;
+    rowspan?: string | number;
     [key: string]: any;
 }
 /**
@@ -73,7 +75,7 @@ declare const _default: <T extends object, K extends keyof T = keyof T>(__VLS_pr
     emit: {
         (e: 'select:all', value: boolean): void;
         (e: 'sort', value: {
-            key: keyof T;
+            key: TableRowKey<T>;
             direction?: "desc" | "asc" | undefined;
         }): void;
     };
@@ -87,7 +89,7 @@ declare const _default: <T extends object, K extends keyof T = keyof T>(__VLS_pr
     emit: {
         (e: 'select:all', value: boolean): void;
         (e: 'sort', value: {
-            key: keyof T;
+            key: TableRowKey<T>;
             direction?: "desc" | "asc" | undefined;
         }): void;
     };
@@ -104,7 +106,7 @@ declare const _default: <T extends object, K extends keyof T = keyof T>(__VLS_pr
         emit: {
             (e: 'select:all', value: boolean): void;
             (e: 'sort', value: {
-                key: keyof T;
+                key: TableRowKey<T>;
                 direction?: "desc" | "asc" | undefined;
             }): void;
         };

package/dist/components/tabs/tab/Tab.vue.d.ts

@@ -1,4 +1,4 @@
-import { type ContextColorsType } from '../../../consts/colors';
+import type { ContextColorsType } from '../../../consts/colors';
 export interface Props {
     color?: ContextColorsType;
     disabled?: boolean;

package/dist/components/tabs/tabs/Tabs.vue.d.ts

@@ -1,4 +1,4 @@
-import { type ContextColorsType } from '../../../consts/colors';
+import type { ContextColorsType } from '../../../consts/colors';
 export interface Props {
     color?: ContextColorsType;
     vertical?: boolean;

package/dist/composables/breakpoint.d.ts

@@ -1 +1 @@
-export declare const useBreakpoint: () => any;
+export declare function useBreakpoint(): any;

package/dist/composables/defaults/table.d.ts

@@ -1,10 +1,10 @@
-import { type InjectionKey, type Ref } from 'vue';
-import { type MaybeRef } from '@vueuse/shared';
+import type { InjectionKey, Ref } from 'vue';
+import type { MaybeRef } from '@vueuse/shared';
 export interface TableOptions {
     itemsPerPage: Ref<number>;
     globalItemsPerPage: MaybeRef<boolean>;
     limits: MaybeRef<number[]>;
 }
 export declare const TableSymbol: InjectionKey<TableOptions>;
-export declare const createTableDefaults: (options?: Partial<TableOptions>) => TableOptions;
-export declare const useTable: () => TableOptions;
+export declare function createTableDefaults(options?: Partial<TableOptions>): TableOptions;
+export declare function useTable(): TableOptions;

package/dist/composables/icons.d.ts

@@ -1,4 +1,4 @@
-import { type GeneratedIcon } from '../types/icons';
+import type { GeneratedIcon } from '../types/icons';
 export declare const useIcons: () => {
     registeredIcons: globalThis.Ref<Record<string, string>>;
     registerIcons: (iconsToAdd: GeneratedIcon[]) => void;