Introduce defaults for the DataTable

.eslintrc-auto-import.json

@@ -300,6 +300,9 @@
     "watchThrottled": true,
     "watchTriggerable": true,
     "watchWithFilter": true,
-    "whenever": true
+    "whenever": true,
+    "TableSymbol": true,
+    "createTableDefaults": true,
+    "useTable": true
   }
 }

.storybook/app.ts

@@ -1,12 +1,16 @@
 import { createApp } from 'vue';
-import { RuiPlugin } from '../src';
+import { createRui } from '../src';
 import * as Icons from '../src/all-icons';
 
+const RuiPlugin = createRui({
+  theme: {
+    icons: Object.values(Icons),
+  }
+})
+
 const app = createApp({ template: '<div />' });
 app
-  .use(RuiPlugin, {
-    icons: Object.values(Icons),
-  })
+  .use(RuiPlugin)
   .mount(null);
 
 export const vueInstance = app;

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

example/src/main.ts

@@ -26,39 +26,42 @@ import {
   RiMoonLine,
   RiStarFill,
   RiSunLine,
-  RuiPlugin,
+  createRui,
 } from '@rotki/ui-library';
 import App from '@/App.vue';
 import router from '@/router';
 
 const app = createApp(App);
+const RuiPlugin = createRui({
+  theme: {
+    icons: [
+      RiMoonLine,
+      RiStarFill,
+      RiSunLine,
+      RiMacbookLine,
+      RiArrowLeftLine,
+      RiArrowRightLine,
+      RiAddFill,
+      RiAlertLine,
+      RiAlignCenter,
+      RiAlignLeft,
+      RiAlignRight,
+      RiAlignJustify,
+      RiCheckboxCircleLine,
+      RiCloseFill,
+      RiInformationLine,
+      RiErrorWarningLine,
+      RiArrowLeftSLine,
+      RiArrowRightSLine,
+      RiArrowUpSLine,
+      RiArrowDownSLine,
+      RiArrowDownCircleLine,
+    ],
+  },
+});
 
 app.use(createPinia());
 app.use(router);
-app.use(RuiPlugin, {
-  icons: [
-    RiMoonLine,
-    RiStarFill,
-    RiSunLine,
-    RiMacbookLine,
-    RiArrowLeftLine,
-    RiArrowRightLine,
-    RiAddFill,
-    RiAlertLine,
-    RiAlignCenter,
-    RiAlignLeft,
-    RiAlignRight,
-    RiAlignJustify,
-    RiCheckboxCircleLine,
-    RiCloseFill,
-    RiInformationLine,
-    RiErrorWarningLine,
-    RiArrowLeftSLine,
-    RiArrowRightSLine,
-    RiArrowUpSLine,
-    RiArrowDownSLine,
-    RiArrowDownCircleLine,
-  ],
-});
+app.use(RuiPlugin);
 
 app.mount('#app');

src/components/tables/DataTable.spec.ts

@@ -1,6 +1,9 @@
+/* eslint-disable max-lines */
 import { describe, expect, it } from 'vitest';
 import { type ComponentMountingOptions, mount } from '@vue/test-utils';
 import DataTable, { type TableColumn } from '@/components/tables/DataTable.vue';
+import TablePagination from '@/components/tables/TablePagination.vue';
+import { RuiSimpleSelect } from '~/src';
 
 type User = {
   id: number;
@@ -11,7 +14,15 @@ type User = {
 
 const createWrapper = (
   options?: ComponentMountingOptions<typeof DataTable<User>>,
-) => mount(DataTable<User>, options);
+) =>
+  mount(DataTable<User>, {
+    ...options,
+    global: {
+      provide: {
+        [TableSymbol.valueOf()]: createTableDefaults(),
+      },
+    },
+  });
 
 describe('DataTable', () => {
   const data: User[] = [
@@ -298,4 +309,154 @@ describe('DataTable', () => {
 
     expect(wrapper.find('thead[data-id=head-clone]').exists()).toBeFalsy();
   });
+
+  describe('global settings', () => {
+    it('should follow global settings', async () => {
+      const itemsPerPage = ref(25);
+      const wrapperComponent = {
+        template:
+          "<div><DataTable :rows='[]' row-attr='id'/><DataTable :rows='[]' row-attr='id'/></div>",
+      };
+
+      const wrapper = mount(wrapperComponent, {
+        global: {
+          components: {
+            DataTable,
+          },
+          provide: {
+            [TableSymbol.valueOf()]: createTableDefaults({
+              itemsPerPage,
+              globalItemsPerPage: true,
+            }),
+          },
+        },
+      });
+
+      await nextTick();
+
+      const paginationInstances = wrapper.findAllComponents(TablePagination);
+      expect(paginationInstances).toHaveLength(2);
+
+      paginationInstances.forEach((instance) => {
+        expect(instance.vm.modelValue).toMatchObject(
+          expect.objectContaining({ limit: 25 }),
+        );
+      });
+
+      const select = paginationInstances[0].findComponent(RuiSimpleSelect);
+      select.vm.$emit('update:model-value', 10);
+
+      await nextTick();
+
+      paginationInstances.forEach((instance) => {
+        expect(instance.vm.modelValue).toMatchObject(
+          expect.objectContaining({ limit: 10 }),
+        );
+      });
+
+      expect(get(itemsPerPage)).toBe(10);
+    });
+
+    it('should respect local setting override', async () => {
+      const itemsPerPage = ref(25);
+      const wrapperComponent = {
+        template:
+          "<div><DataTable :rows='[]' row-attr='id'/><DataTable :globalItemsPerPage='false' :rows='[]' row-attr='id'/></div>",
+      };
+
+      const wrapper = mount(wrapperComponent, {
+        global: {
+          components: {
+            DataTable,
+          },
+          provide: {
+            [TableSymbol.valueOf()]: createTableDefaults({
+              itemsPerPage,
+              globalItemsPerPage: true,
+            }),
+          },
+        },
+      });
+
+      await nextTick();
+
+      const paginate = wrapper.findAllComponents(TablePagination);
+      expect(paginate).toHaveLength(2);
+
+      expect(paginate[0].vm.modelValue).toMatchObject(
+        expect.objectContaining({ limit: 25 }),
+      );
+      expect(paginate[1].vm.modelValue).toMatchObject(
+        expect.objectContaining({ limit: 10 }),
+      );
+
+      const globalSelect = paginate[0].findComponent(RuiSimpleSelect);
+      const localSelect = paginate[1].findComponent(RuiSimpleSelect);
+      globalSelect.vm.$emit('update:model-value', 10);
+      localSelect.vm.$emit('update:model-value', 25);
+
+      await nextTick();
+
+      expect(paginate[0].vm.modelValue).toMatchObject(
+        expect.objectContaining({ limit: 10 }),
+      );
+
+      expect(paginate[1].vm.modelValue).toMatchObject(
+        expect.objectContaining({ limit: 25 }),
+      );
+
+      expect(get(itemsPerPage)).toBe(10);
+    });
+
+    it('should follow single global setting', async () => {
+      const itemsPerPage = ref(25);
+      const wrapperComponent = {
+        template:
+          "<div><DataTable :rows='[]' row-attr='id'/><DataTable :globalItemsPerPage='true' :rows='[]' row-attr='id'/></div>",
+      };
+
+      const wrapper = mount(wrapperComponent, {
+        global: {
+          components: {
+            DataTable,
+          },
+          provide: {
+            [TableSymbol.valueOf()]: createTableDefaults({
+              itemsPerPage,
+            }),
+          },
+        },
+      });
+
+      await nextTick();
+
+      const paginate = wrapper.findAllComponents(TablePagination);
+      expect(paginate).toHaveLength(2);
+
+      expect(paginate[0].vm.modelValue).toMatchObject(
+        expect.objectContaining({ limit: 10 }),
+      );
+
+      expect(paginate[1].vm.modelValue).toMatchObject(
+        expect.objectContaining({ limit: 25 }),
+      );
+
+      const globalSelect = paginate[0].findComponent(RuiSimpleSelect);
+      const localSelect = paginate[1].findComponent(RuiSimpleSelect);
+      globalSelect.vm.$emit('update:model-value', 25);
+      localSelect.vm.$emit('update:model-value', 10);
+
+      await nextTick();
+
+      expect(paginate[0].vm.modelValue).toMatchObject(
+        expect.objectContaining({ limit: 25 }),
+      );
+
+      expect(paginate[1].vm.modelValue).toMatchObject(
+        expect.objectContaining({ limit: 10 }),
+      );
+
+      expect(get(itemsPerPage)).toBe(10);
+    });
+  });
 });

src/components/tables/DataTable.vue

@@ -183,6 +183,11 @@ export interface Props<T, K extends keyof T> {
    */
   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;
 }
 
 defineOptions({
@@ -210,6 +215,7 @@ const props = withDefaults(defineProps<Props<T, IdType>>(), {
   singleExpand: false,
   stickyHeader: false,
   stickyOffset: 0,
+  globalItemsPerPage: undefined,
 });
 
 const emit = defineEmits<{
@@ -224,6 +230,14 @@ const css = useCssModule();
 const { stickyOffset } = toRefs(props);
 const { stick, table, tableScroller } = useStickyTableHeader(stickyOffset);
 
+const tableDefaults = useTable();
+const globalItemsPerPageSettings = computed(() => {
+  if (props.globalItemsPerPage !== undefined) {
+    return props.globalItemsPerPage;
+  }
+  return get(tableDefaults.globalItemsPerPage);
+});
+
 const getKeys = <T extends object>(t: T) =>
   Object.keys(t) as SortableColumnName<T>[];
 
@@ -275,6 +289,25 @@ watchImmediate(pagination, (pagination) => {
   set(internalPaginationState, pagination);
 });
 
+/**
+ * Keeps the global items per page in sync with the internal state.
+ */
+watch(internalPaginationState, (pagination) => {
+  if (pagination?.limit && get(globalItemsPerPageSettings)) {
+    set(tableDefaults.itemsPerPage, pagination.limit);
+  }
+});
+
+watch(tableDefaults.itemsPerPage, (itemsPerPage) => {
+  if (!get(globalItemsPerPageSettings)) {
+    return;
+  }
+  set(paginationData, {
+    ...get(paginationData),
+    limit: itemsPerPage,
+  });
+});
+
 /**
  * Pagination is different for search
  * since search is only used for internal filtering
@@ -633,6 +666,17 @@ watch(search, () => {
   }
 });
 
+onMounted(() => {
+  if (!get(globalItemsPerPageSettings)) {
+    return;
+  }
+
+  set(paginationData, {
+    ...get(paginationData),
+    limit: get(tableDefaults.itemsPerPage),
+  });
+});
+
 const slots = useSlots();
 </script>