@rotki/ui-library 0.7.0 → 0.8.0

package/README.md

@@ -27,11 +27,11 @@ import '@fontsource/roboto/latin.css';
 To use the library you must install the library plugin:
 
 ```typescript
-import { RuiPlugin } from "@rotki/ui-library";
+import { createRui } from "@rotki/ui-library";
 
 ...
-
-app.use(RuiPlugin, options);
+const RuiPlugin = createRui(options);
+app.use(RuiPlugin);
 ```
 
 ### Using the components
@@ -72,11 +72,14 @@ switchThemeScheme(ThemeMode.dark);
 
 You need to specify which icons you want to enable, when installing the RuiPlugin.
 ```typescript
-import { Ri4kFill, Ri4kLine, RuiPlugin } from '@rotki/ui-library';
-
-app.use(RuiPlugin, {
-  icons: [Ri4kFill, Ri4kLine]
-});
+import { Ri4kFill, Ri4kLine, createRui } from '@rotki/ui-library';
+
+const RuiPlugin = createRui({
+  theme: {
+    icons: [Ri4kFill, Ri4kLine]
+  }
+})
+app.use(RuiPlugin);
 ```
 
 ```vue

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

@@ -26,6 +26,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: globalThis.PropType<RuiIcons>;
         default: undefined;
     };
+    closeable: {
+        type: globalThis.PropType<boolean>;
+        default: boolean;
+    };
     description: {
         type: globalThis.PropType<string>;
         default: string;
@@ -34,10 +38,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: globalThis.PropType<string>;
         default: string;
     };
-    closeable: {
-        type: globalThis.PropType<boolean>;
-        default: boolean;
-    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     action: () => void;
     close: () => void;
@@ -58,6 +58,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: globalThis.PropType<RuiIcons>;
         default: undefined;
     };
+    closeable: {
+        type: globalThis.PropType<boolean>;
+        default: boolean;
+    };
     description: {
         type: globalThis.PropType<string>;
         default: string;
@@ -66,10 +70,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: globalThis.PropType<string>;
         default: string;
     };
-    closeable: {
-        type: globalThis.PropType<boolean>;
-        default: boolean;
-    };
 }>> & {
     onClose?: (() => any) | undefined;
     onAction?: (() => any) | undefined;
@@ -78,9 +78,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     type: "primary" | "secondary" | "error" | "warning" | "info" | "success";
     title: string;
     icon: RuiIcons;
+    closeable: boolean;
     description: string;
     actionText: string;
-    closeable: boolean;
 }, {}>, {
     title?(_: {}): any;
     default?(_: {}): any;

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

@@ -1,11 +1,16 @@
 import { type ContextColorsType } from '../../consts/colors';
+import { type RuiIcons } from '~/src';
 export interface Props {
-    label?: string;
-    dismissible?: boolean;
+    tile?: boolean;
+    clickable?: boolean;
+    closeable?: boolean;
     disabled?: boolean;
     size?: 'sm' | 'md';
     variant?: 'filled' | 'outlined';
     color?: 'grey' | ContextColorsType;
+    closeIcon?: RuiIcons;
+    bgColor?: string;
+    textColor?: string;
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     variant: {
@@ -20,20 +25,36 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: globalThis.PropType<"sm" | "md">;
         default: string;
     };
-    label: {
+    disabled: {
+        type: globalThis.PropType<boolean>;
+        default: boolean;
+    };
+    textColor: {
         type: globalThis.PropType<string>;
-        default: string;
+        default: undefined;
     };
-    disabled: {
+    tile: {
+        type: globalThis.PropType<boolean>;
+    };
+    clickable: {
         type: globalThis.PropType<boolean>;
         default: boolean;
     };
-    dismissible: {
+    closeable: {
         type: globalThis.PropType<boolean>;
         default: boolean;
     };
+    closeIcon: {
+        type: globalThis.PropType<RuiIcons>;
+        default: string;
+    };
+    bgColor: {
+        type: globalThis.PropType<string>;
+        default: undefined;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    remove: () => void;
+    "click:close": () => void;
+    click: () => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<globalThis.ExtractPropTypes<{
     variant: {
         type: globalThis.PropType<"outlined" | "filled">;
@@ -47,27 +68,46 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: globalThis.PropType<"sm" | "md">;
         default: string;
     };
-    label: {
+    disabled: {
+        type: globalThis.PropType<boolean>;
+        default: boolean;
+    };
+    textColor: {
         type: globalThis.PropType<string>;
-        default: string;
+        default: undefined;
     };
-    disabled: {
+    tile: {
+        type: globalThis.PropType<boolean>;
+    };
+    clickable: {
         type: globalThis.PropType<boolean>;
         default: boolean;
     };
-    dismissible: {
+    closeable: {
         type: globalThis.PropType<boolean>;
         default: boolean;
     };
+    closeIcon: {
+        type: globalThis.PropType<RuiIcons>;
+        default: string;
+    };
+    bgColor: {
+        type: globalThis.PropType<string>;
+        default: undefined;
+    };
 }>> & {
-    onRemove?: (() => any) | undefined;
+    onClick?: (() => any) | undefined;
+    "onClick:close"?: (() => any) | undefined;
 }, {
     variant: "outlined" | "filled";
     color: "grey" | "primary" | "secondary" | "error" | "warning" | "info" | "success";
     size: "sm" | "md";
-    label: string;
     disabled: boolean;
-    dismissible: boolean;
+    textColor: string;
+    clickable: boolean;
+    closeable: boolean;
+    closeIcon: RuiIcons;
+    bgColor: string;
 }, {}>, {
     prepend?(_: {}): any;
     default?(_: {}): any;

package/dist/components/index.d.ts

@@ -20,6 +20,7 @@ import { type Props as RevealableTextFieldProps, default as RuiRevealableTextFie
 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 TableOptions as DataTableOptions, type Props as DataTableProps, type SortColumn as DataTableSortColumn, 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';
 import { type Props as CardProps, default as RuiCard } from '../components/cards/Card.vue';
 import { type Props as CardHeaderProps, default as RuiCardHeader } from '../components/cards/CardHeader.vue';
@@ -28,4 +29,4 @@ 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';
-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, 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, };
+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, };

package/dist/components/index.es.js

@@ -1,4 +1,4 @@
-import { A as p, a as l, R as m, B as d, b as T, k as b, l as n, C as g, c as C, D as x, j as S, t as c, F as A, I as B, _ as D, P as F, d as I, e as h, f as k, i as P, r as f, g as v, n as G, p as L, o as j, q, m as H, s as _, h as w, T as y } from "../index-Q2a5R3OH.js";
+import { A as p, a as l, R as m, B as d, b as T, m as b, n, C as g, d as x, D as C, l as S, v as A, F as B, I as D, _ as F, P as I, e as c, f as h, g as k, k as v, t as P, h as f, p as E, r as G, q as L, s as j, E as q, o as w, u as H, i as _, j as y } from "../index-2YbRDW3N.js";
 import "vue";
 import "@vueuse/shared";
 import "../index-W2poXQa4.js";
@@ -15,26 +15,27 @@ export {
   b as RuiCard,
   n as RuiCardHeader,
   g as RuiCheckbox,
-  C as RuiChip,
-  x as RuiDataTable,
+  x as RuiChip,
+  C as RuiDataTable,
   S as RuiDialog,
-  c as RuiDivider,
-  A as RuiFooterStepper,
-  B as RuiIcon,
-  D as RuiLogo,
-  F as RuiProgress,
-  I as RuiRadio,
+  A as RuiDivider,
+  B as RuiFooterStepper,
+  D as RuiIcon,
+  F as RuiLogo,
+  I as RuiProgress,
+  c as RuiRadio,
   h as RuiRadioGroup,
   k as RuiRevealableTextField,
-  P as RuiSimpleSelect,
-  f as RuiSkeletonLoader,
-  v as RuiStepper,
-  G as RuiTab,
-  L as RuiTabItem,
-  j as RuiTabItems,
-  q as RuiTablePagination,
-  H as RuiTabs,
-  _ as RuiTextArea,
-  w as RuiTextField,
+  v as RuiSimpleSelect,
+  P as RuiSkeletonLoader,
+  f as RuiStepper,
+  E as RuiTab,
+  G as RuiTabItem,
+  L as RuiTabItems,
+  j as RuiTablePagination,
+  q as RuiTableRowExpander,
+  w as RuiTabs,
+  H as RuiTextArea,
+  _ as RuiTextField,
   y as RuiTooltip
 };

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

@@ -43,7 +43,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
     placement: {
-        type: globalThis.PropType<"center" | "top" | "bottom">;
+        type: globalThis.PropType<"bottom" | "top" | "center">;
         default: string;
     };
     dot: {
@@ -88,7 +88,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
     placement: {
-        type: globalThis.PropType<"center" | "top" | "bottom">;
+        type: globalThis.PropType<"bottom" | "top" | "center">;
         default: string;
     };
     dot: {
@@ -111,7 +111,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     icon: RuiIcons | null;
     modelValue: boolean;
     left: boolean;
-    placement: "center" | "top" | "bottom";
+    placement: "bottom" | "top" | "center";
     dot: boolean;
     offsetX: string | number;
     offsetY: string | number;

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

@@ -113,7 +113,7 @@ export interface Props<T, K extends keyof T> {
      */
     columnAttr?: string;
     /**
-     * flag to show a more or less spaceous table
+     * flag to show a more or less spacious table
      */
     dense?: boolean;
     /**
@@ -126,7 +126,7 @@ export interface Props<T, K extends keyof T> {
     striped?: boolean;
     /**
      * flag to show loading state of the table
-     * triggers an indefinite progress at the bottom of the table header
+     * triggers indefinite progress at the bottom of the table header
      */
     loading?: boolean;
     /**
@@ -143,6 +143,24 @@ export interface Props<T, K extends keyof T> {
      */
     hideDefaultFooter?: boolean;
     rounded?: 'sm' | 'md' | 'lg';
+    /**
+     * model for expanded rows
+     */
+    expanded?: T[];
+    /**
+     * make expansion work like accordion
+     */
+    singleExpand?: boolean;
+    /**
+     * make expansion work like accordion
+     */
+    stickyHeader?: boolean;
+    stickyOffset?: number;
+    /**
+     * Affects how the items per page work across the app.
+     * When true, changing the items per page setting in one table will affect other tables.
+     */
+    globalItemsPerPage?: boolean;
 }
 declare const _default: <T extends object, IdType extends keyof T = keyof T>(__VLS_props: Props<T, IdType> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: Pick<{
     props: Props<T, IdType>;
@@ -154,7 +172,15 @@ declare const _default: <T extends object, IdType extends keyof T = keyof T>(__V
         column: TableColumn<T>;
         row: T;
         index: number;
+    }) => any>> & Partial<Record<string, (_: {
+        column: TableColumn<T>;
+        row: T;
+        index: number;
     }) => any>> & {
+        "expanded-item"?(_: {
+            row: T;
+            index: number;
+        }): any;
         "no-data"?(_: {}): any;
         "empty-description"?(_: {}): any;
         "body.append"?(_: {}): any;
@@ -162,6 +188,7 @@ declare const _default: <T extends object, IdType extends keyof T = keyof T>(__V
     };
     emit: {
         (e: 'update:model-value', value?: T[IdType][] | undefined): void;
+        (e: 'update:expanded', value: T[]): void;
         (e: 'update:pagination', value: TablePaginationData): void;
         (e: 'update:sort', value?: SortColumn<T> | SortColumn<T>[] | undefined): void;
         (e: 'update:options', value: TableOptions<T>): void;
@@ -176,7 +203,15 @@ declare const _default: <T extends object, IdType extends keyof T = keyof T>(__V
         column: TableColumn<T>;
         row: T;
         index: number;
+    }) => any>> & Partial<Record<string, (_: {
+        column: TableColumn<T>;
+        row: T;
+        index: number;
     }) => any>> & {
+        "expanded-item"?(_: {
+            row: T;
+            index: number;
+        }): any;
         "no-data"?(_: {}): any;
         "empty-description"?(_: {}): any;
         "body.append"?(_: {}): any;
@@ -184,6 +219,7 @@ declare const _default: <T extends object, IdType extends keyof T = keyof T>(__V
     };
     emit: {
         (e: 'update:model-value', value?: T[IdType][] | undefined): void;
+        (e: 'update:expanded', value: T[]): void;
         (e: 'update:pagination', value: TablePaginationData): void;
         (e: 'update:sort', value?: SortColumn<T> | SortColumn<T>[] | undefined): void;
         (e: 'update:options', value: TableOptions<T>): void;
@@ -201,7 +237,15 @@ declare const _default: <T extends object, IdType extends keyof T = keyof T>(__V
             column: TableColumn<T>;
             row: T;
             index: number;
+        }) => any>> & Partial<Record<string, (_: {
+            column: TableColumn<T>;
+            row: T;
+            index: number;
         }) => any>> & {
+            "expanded-item"?(_: {
+                row: T;
+                index: number;
+            }): any;
             "no-data"?(_: {}): any;
             "empty-description"?(_: {}): any;
             "body.append"?(_: {}): any;
@@ -209,6 +253,7 @@ declare const _default: <T extends object, IdType extends keyof T = keyof T>(__V
         };
         emit: {
             (e: 'update:model-value', value?: T[IdType][] | undefined): void;
+            (e: 'update:expanded', value: T[]): void;
             (e: 'update:pagination', value: TablePaginationData): void;
             (e: 'update:sort', value?: SortColumn<T> | SortColumn<T>[] | undefined): void;
             (e: 'update:options', value: TableOptions<T>): void;

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

@@ -0,0 +1,34 @@
+import { type RuiIcons } from '~/src';
+export interface Props {
+    expanded: boolean;
+    icon?: RuiIcons;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    icon: {
+        type: globalThis.PropType<RuiIcons>;
+        default: string;
+    };
+    expanded: {
+        type: globalThis.PropType<boolean>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<globalThis.ExtractPropTypes<{
+    icon: {
+        type: globalThis.PropType<RuiIcons>;
+        default: string;
+    };
+    expanded: {
+        type: globalThis.PropType<boolean>;
+        required: true;
+    };
+}>>, {
+    icon: RuiIcons;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

package/dist/composables/sticky-header.d.ts

@@ -0,0 +1,9 @@
+import { type Ref } from 'vue';
+/**
+ * Setup sticky table header
+ */
+export declare const useStickyTableHeader: (offsetTop?: Ref<number>) => {
+    stick: Ref<boolean>;
+    table: Ref<HTMLTableElement | null>;
+    tableScroller: Ref<HTMLElement | null>;
+};