feat(DataTable): add items per page global settings

Author: kelsos

.eslintrc-auto-import.json

@@ -334,6 +334,9 @@
     "ExtractDefaultPropTypes": true,
     "ExtractPropTypes": true,
     "ExtractPublicPropTypes": true,
-    "useClipboardItems": true
+    "useClipboardItems": true,
+    "TableSymbol": true,
+    "createTableDefaults": true,
+    "useTable": true
   }
 }

README.md

@@ -27,10 +27,11 @@ import '@fontsource/roboto/latin.css';
 To use the library you must install the library plugin:
 
 ```typescript
-import { RuiPlugin } from "@rotki/ui-library-compat";
+import { createRui } from "@rotki/ui-library-compat";
 
 ...
-Vue.use(RuiPlugin, options);
+const RuiPlugin = createRui(options)
+Vue.use(RuiPlugin);
 ```
 
 ### Using the components
@@ -71,11 +72,15 @@ 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-compat';
-
-Vue.use(RuiPlugin, {
-  icons: [Ri4kFill, Ri4kLine]
-});
+import { Ri4kFill, Ri4kLine, RuiPlugin, createRui } from '@rotki/ui-library-compat';
+a
+const RuiPlugin = createRui({
+  theme: {
+    icons: [Ri4kFill, Ri4kLine]
+  }
+})
+
+Vue.use(RuiPlugin);
 ```
 
 ```vue

example/src/main.ts

@@ -2,7 +2,12 @@ import '@/assets/main.css';
 import '@rotki/ui-library-compat/style.css';
 import '@fontsource/roboto/latin.css';
 
-import { PiniaVuePlugin, createPinia, setActivePinia } from 'pinia';
+import {
+  PiniaVuePlugin,
+  createPinia,
+  setActivePinia,
+  storeToRefs,
+} from 'pinia';
 import {
   RiAddFill,
   RiAlertLine,
@@ -24,44 +29,58 @@ import {
   RiMoonLine,
   RiStarFill,
   RiSunLine,
-  RuiPlugin,
+  createRui,
 } from '@rotki/ui-library-compat';
 import Vue from 'vue';
 import App from '@/App.vue';
 import router from '@/router';
+import { useCounterStore } from '@/stores/counter';
 
 Vue.use(PiniaVuePlugin);
-Vue.use(RuiPlugin, {
-  icons: [
-    RiMoonLine,
-    RiStarFill,
-    RiSunLine,
-    RiMacbookLine,
-    RiArrowLeftLine,
-    RiArrowRightLine,
-    RiAddFill,
-    RiAlertLine,
-    RiAlignCenter,
-    RiAlignLeft,
-    RiAlignRight,
-    RiAlignJustify,
-    RiCheckboxCircleLine,
-    RiCloseFill,
-    RiInformationLine,
-    RiErrorWarningLine,
-    RiArrowLeftSLine,
-    RiArrowRightSLine,
-    RiArrowUpSLine,
-    RiArrowDownSLine,
-  ],
-});
-
 const pinia = createPinia();
 setActivePinia(pinia);
 
+const { itemsPerPage } = storeToRefs(useCounterStore());
+
+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,
+    ],
+  },
+  defaults: {
+    table: {
+      itemsPerPage,
+    },
+  },
+});
+Vue.use(RuiPlugin);
+
 new Vue({
   // @ts-ignore
   pinia,
   router,
+  setup() {
+    RuiPlugin.setupProvide();
+  },
   render: (h) => h(App),
 }).$mount('#app');

example/src/stores/counter.ts

@@ -9,5 +9,7 @@ export const useCounterStore = defineStore('counter', () => {
     count.value++;
   }
 
-  return { count, doubleCount, increment };
+  const itemsPerPage = ref(15);
+
+  return { count, doubleCount, increment, itemsPerPage };
 });

src/components/tables/DataTable.spec.ts

@@ -2,7 +2,16 @@ import { describe, expect, it } from 'vitest';
 import { mount } from '@vue/test-utils';
 import DataTable, { type TableColumn } from '@/components/tables/DataTable.vue';
 
-const createWrapper = (options?: any) => mount(DataTable, options);
+const createWrapper = (options?: any) =>
+  mount(DataTable, {
+    ...options,
+    provide: {
+      [TableSymbol.valueOf()]: {
+        itemsPerPage: ref(10),
+        globalItemsPerPage: get(false),
+      },
+    },
+  });
 
 describe('DataTable', () => {
   const data = [

src/components/tables/DataTable.vue

@@ -122,6 +122,11 @@ export interface Props {
    * should add zebra-striping to the table row
    */
   striped?: boolean;
+  /**
+   * 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({
@@ -145,6 +150,7 @@ const props = withDefaults(defineProps<Props>(), {
   rounded: 'md',
   hideDefaultFooter: false,
   striped: false,
+  globalItemsPerPage: undefined,
 });
 
 const emit = defineEmits<{
@@ -170,6 +176,13 @@ const {
 } = toRefs(props);
 
 const css = useCssModule();
+const tableDefaults = useTable();
+const globalItemsPerPageSettings = computed(() => {
+  if (props.globalItemsPerPage !== undefined) {
+    return props.globalItemsPerPage;
+  }
+  return get(tableDefaults.globalItemsPerPage);
+});
 
 /**
  * Prepare the columns from props or generate using first item in the list
@@ -198,6 +211,15 @@ const internalPaginationState: Ref<TablePaginationData | undefined> = ref();
 
 watchImmediate(pagination, (pagination) => {
   set(internalPaginationState, pagination);
+  if (pagination?.limit && get(globalItemsPerPageSettings)) {
+    set(tableDefaults.itemsPerPage, pagination.limit);
+  }
+});
+
+watchImmediate(tableDefaults.itemsPerPage, (itemsPerPage) => {
+  if (get(globalItemsPerPageSettings)) {
+    emit('update:pagination', { ...get(paginationData), limit: itemsPerPage });
+  }
 });
 
 /**

src/composables/defaults/table.ts

@@ -0,0 +1,25 @@
+import { type InjectionKey, type Ref } from 'vue';
+import { type MaybeRef } from '@vueuse/shared';
+
+export interface TableOptions {
+  itemsPerPage: Ref<number>;
+  globalItemsPerPage: MaybeRef<boolean>;
+}
+
+export const TableSymbol: InjectionKey<TableOptions> = Symbol.for('rui:table');
+
+export const createTableDefaults = (options?: TableOptions): TableOptions => ({
+  itemsPerPage: ref(10),
+  globalItemsPerPage: false,
+  ...options,
+});
+
+export const useTable = () => {
+  const options = inject(TableSymbol);
+
+  if (!options) {
+    throw new Error('Could not find rui table options injection');
+  }
+
+  return options;
+};

src/index.ts

@@ -1,8 +1,13 @@
 /* eslint-disable max-lines,import/max-dependencies */
-import Vue, { type VueConstructor } from 'vue';
+import Vue, { type VueConstructor, provide } from 'vue';
 import { isClient } from '@vueuse/core';
 import { StepperState } from '@/types/stepper';
 import { createTeleport } from '@/components/overlays/teleport-container';
+import {
+  type TableOptions,
+  TableSymbol,
+  createTableDefaults,
+} from '@/composables/defaults/table';
 import type { InitThemeOptions } from '@/types/theme';
 import '@/style.scss';
 
@@ -23,6 +28,13 @@ export * from '@/components';
 
 export { StepperState };
 
+export interface RuiOptions {
+  theme?: InitThemeOptions;
+  defaults?: {
+    table?: TableOptions;
+  };
+}
+
 const installTeleport = () => {
   if (!isClient) {
     return;
@@ -36,11 +48,22 @@ const installTeleport = () => {
   });
 };
 
-export const RuiPlugin = {
-  install: (app: VueConstructor, options?: InitThemeOptions) => {
+export function createRui(options: RuiOptions = {}) {
+  const { theme } = options;
+  const install = (_app: VueConstructor) => {
     const { registerIcons } = useIcons();
-    registerIcons(options?.icons || []);
-    useRotkiTheme().init({ ...options });
+    registerIcons(theme?.icons || []);
+    useRotkiTheme().init({ ...theme });
     installTeleport();
-  },
-};
+  };
+
+  const setupProvide = () => {
+    const tableDefaults = createTableDefaults(options.defaults?.table);
+    provide(TableSymbol, tableDefaults);
+  };
+
+  return {
+    install,
+    setupProvide,
+  };
+}