chore: refactor btn group and handle empty tables on page re-visit

rotki · Oct 18, 2023 · 4d513c1 · 4d513c1
1 parent 4cbb5f2
commit 4d513c1
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 10 deletions.
diff --git a/example/src/views/DataTableView.vue b/example/src/views/DataTableView.vue
@@ -37,9 +37,11 @@ interface _User {
   };
 }
 
-const { data: _users, isFetching } = useFetch<string>(
-  'https://jsonplaceholder.typicode.com/users',
-);
+const {
+  data: _users,
+  isFetching,
+  execute,
+} = useFetch<string>('https://jsonplaceholder.typicode.com/users');
 
 interface BaseUser {
   id: number;
@@ -270,7 +272,10 @@ const emptyTables = ref<
 ]);
 
 const datatables = ref<
-  { title: string; table: DataTableProps<ExtendedUser, 'id'> }[]
+  {
+    title: string;
+    table: DataTableProps<ExtendedUser, 'id'>;
+  }[]
 >([
   {
     title: 'With Column definitions',
@@ -373,7 +378,10 @@ const datatables = ref<
 ]);
 
 const apiDatatables = ref<
-  { title: string; table: DataTableProps<ExtendedUser, 'id'> }[]
+  {
+    title: string;
+    table: DataTableProps<ExtendedUser, 'id'>;
+  }[]
 >([
   {
     title: 'API: With Column definitions',
@@ -503,7 +511,10 @@ const fakeFetch = async (
   options?: DataTableOptions<ExtendedUser>,
   search?: string,
   api?: boolean,
-): Promise<{ data: ExtendedUser[]; total: number }> => {
+): Promise<{
+  data: ExtendedUser[];
+  total: number;
+}> => {
   await new Promise((resolve) => {
     setTimeout(resolve, 1500);
   });
@@ -615,7 +626,11 @@ const onSearch = useDebounceFn(async (query: string, index: number) => {
   }
 }, 500);
 
-onBeforeMount(() => {
+onBeforeMount(async () => {
+  if (get(isFetching)) {
+    await execute().catch();
+  }
+
   get(datatables).forEach((row, i) => {
     fetchData(
       i,

diff --git a/src/components/buttons/button-group/ButtonGroup.vue b/src/components/buttons/button-group/ButtonGroup.vue
@@ -29,7 +29,16 @@ const emit = defineEmits<{
 
 const slots = useSlots();
 const { modelValue, required } = toRefs(props);
-const children = computed(() => slots.default?.() ?? []);
+const children = computed(() =>
+  (slots.default?.() ?? []).map((child, i) => {
+    child.props = {
+      ...child.props,
+      active: activeItem(child.props?.value ?? i),
+    };
+
+    return child;
+  }),
+);
 
 const activeItem = (id: T) => {
   const selected = get(modelValue);
@@ -77,13 +86,12 @@ const css = useCssModule();
         :is="child"
         v-for="(child, i) in children"
         :key="i"
-        :active="activeItem(child.props?.value ?? i)"
         :class="css.button"
         :color="color"
         :disabled="disabled"
         :size="size"
         :variant="variant"
-        @update:value="onClick(child.props?.value ?? i)"
+        @update:value="onClick($event ?? i)"
       />
     </div>
   </div>