refactor: update button view to use data generation

example/src/auto-imports.d.ts

@@ -46,6 +46,7 @@ declare global {
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
+  const generateButtonGroupData: typeof import('./utils/buttons')['generateButtonGroupData']
   const get: typeof import('@vueuse/shared')['get']
   const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
@@ -373,6 +374,7 @@ declare module 'vue' {
     readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
     readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
+    readonly generateButtonGroupData: UnwrapRef<typeof import('./utils/buttons')['generateButtonGroupData']>
     readonly get: UnwrapRef<typeof import('@vueuse/shared')['get']>
     readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>

example/src/components/buttons/ButtonGroups.vue

@@ -0,0 +1,52 @@
+<script setup lang='ts'>
+import { objectOmit } from '@vueuse/shared';
+import { RuiButton, RuiButtonGroup, RuiIcon } from '@rotki/ui-library';
+import ComponentGroup from '@/components/ComponentGroup.vue';
+import { type ButtonGroupData, generateButtonGroupData } from '@/utils/buttons';
+
+const attributes: Partial<ButtonGroupData>[] = [
+  {},
+  { vertical: true },
+  { variant: 'outlined' },
+  { variant: 'text' },
+  { variant: 'outlined', size: 'lg' },
+  { variant: 'outlined', size: 'lg', rounded: true },
+  { variant: 'outlined', size: 'sm' },
+  { variant: 'outlined', size: 'sm', rounded: true },
+];
+
+const buttonGroups = ref<ButtonGroupData[]>([]);
+
+onBeforeMount(() => {
+  set(buttonGroups, generateButtonGroupData(attributes));
+});
+</script>
+
+<template>
+  <ComponentGroup
+    data-cy="button-groups"
+    class="grid gap-4 grid-rows-2 grid-cols-2 justify-items-start mb-14"
+    :items="buttonGroups"
+  >
+    <template #title>
+      Button Groups
+    </template>
+
+    <template #item="{ item: buttonGroup }">
+      <RuiButtonGroup v-bind="objectOmit(buttonGroup, ['count', 'rounded'])">
+        <RuiButton @click="buttonGroup.count--">
+          Decrease
+        </RuiButton>
+        <RuiButton @click="buttonGroup.count++">
+          Increase
+        </RuiButton>
+        <RuiButton @click="buttonGroup.count++">
+          <RuiIcon name="add-fill" />
+        </RuiButton>
+      </RuiButtonGroup>
+      <div class="mt-2">
+        Counts: {{ buttonGroup.count }}
+      </div>
+    </template>
+  </ComponentGroup>
+</template>

example/src/components/buttons/MultiToggleButtonGroups.vue

@@ -0,0 +1,58 @@
+<script setup lang='ts'>
+import { objectOmit } from '@vueuse/shared';
+import { RuiButton, RuiButtonGroup, RuiIcon } from '@rotki/ui-library';
+import ComponentGroup from '@/components/ComponentGroup.vue';
+import type { ButtonGroupData } from '@/utils/buttons';
+
+const attributes: Partial<ButtonGroupData>[] = [
+  { activeColor: 'warning', required: true },
+  { disabled: true, required: true },
+  { vertical: true },
+  { variant: 'outlined' },
+  { variant: 'text' },
+];
+
+const multipleToggleButtons = ref<ButtonGroupData[]>([]);
+
+onBeforeMount(() => {
+  set(multipleToggleButtons, generateButtonGroupData(attributes, ['center']));
+});
+</script>
+
+<template>
+  <ComponentGroup
+    :items="multipleToggleButtons"
+    data-cy="multiple-toggleable-button-groups"
+    class="grid gap-4 grid-rows-2 grid-cols-2 justify-items-start"
+  >
+    <template #title>
+      Multiple Toggleable Button Groups
+    </template>
+
+    <template #item="{ item: buttonGroup }">
+      <RuiButtonGroup
+        v-bind="objectOmit(buttonGroup, ['modelValue', 'count', 'rounded'])"
+        v-model="buttonGroup.modelValue"
+      >
+        <RuiButton model-value="left">
+          <RuiIcon name="align-left" />
+        </RuiButton>
+        <RuiButton model-value="center">
+          <RuiIcon name="align-center" />
+        </RuiButton>
+        <RuiButton model-value="right">
+          <RuiIcon name="align-right" />
+        </RuiButton>
+        <RuiButton model-value="justify">
+          <RuiIcon name="align-justify" />
+        </RuiButton>
+      </RuiButtonGroup>
+      <div
+        v-if="buttonGroup.required"
+        class="mt-2 text-rui-error"
+      >
+        required: *
+      </div>
+    </template>
+  </ComponentGroup>
+</template>

example/src/components/buttons/SingleButtons.vue

@@ -0,0 +1,94 @@
+<script lang='ts' setup>
+import { type ButtonProps, type ContextColorsType, RuiButton, RuiIcon, type RuiIcons, contextColors } from '@rotki/ui-library';
+import ComponentGroup from '@/components/ComponentGroup.vue';
+
+interface ExtraProperties {
+  clicks: number;
+  prepend?: RuiIcons;
+  append?: RuiIcons;
+  iconName?: RuiIcons;
+}
+
+type ButtonData = ButtonProps & ExtraProperties;
+
+const attributes: Partial<ButtonData>[] = [
+  {}, // Base button
+  { variant: 'outlined' }, // Outlined button
+  { prepend: 'arrow-right-line' }, // Button with prepend icon
+  { append: 'arrow-right-line' }, // Button with append icon
+  { variant: 'text' }, // Text variant button
+  { disabled: true }, // Disabled button
+  { disabled: false, rounded: true }, // Rounded button
+  { variant: 'outlined', rounded: true }, // Outlined and rounded button
+  { variant: 'outlined', rounded: true, size: 'lg' }, // Outlined, rounded, large button
+  { variant: 'outlined', rounded: true, size: 'sm' }, // Outlined, rounded, small button
+  { variant: 'text', rounded: true }, // Rounded text variant button
+  { disabled: true, rounded: true }, // Disabled rounded text variant
+  { loading: true, rounded: true }, // Loading and rounded button
+  { variant: 'fab' }, // FAB button
+  { variant: 'fab', icon: true, iconName: 'add-fill' },
+  { variant: 'text', icon: true, iconName: 'add-fill' },
+  { variant: 'outlined', icon: true, iconName: 'add-fill' },
+];
+
+const buttons = ref<ButtonData[]>([]);
+
+function createButtonData(color: ContextColorsType, extraProps: Partial<ButtonData> = {}): ButtonData {
+  return { clicks: 0, color, ...extraProps };
+}
+
+function generateButtonData(): ButtonData[] {
+  const buttonData: ButtonData[] = [];
+
+  for (const attrs of attributes) {
+    for (const color of contextColors) {
+      buttonData.push(createButtonData(color, attrs));
+    }
+  }
+
+  return buttonData;
+}
+
+onMounted(() => {
+  set(buttons, generateButtonData());
+});
+</script>
+
+<template>
+  <ComponentGroup
+    :items="buttons"
+    class="grid gap-4 grid-rows-2 grid-cols-6 justify-items-start mb-14"
+  >
+    <template #item="{ item, index }">
+      <RuiButton
+        :key="index"
+        :class="{ 'w-full': !item.icon && item.variant !== 'fab' }"
+        v-bind="item"
+        @click="item.clicks++"
+      >
+        <template
+          v-if="item.prepend"
+          #prepend
+        >
+          <RuiIcon :name="item.prepend" />
+        </template>
+        <span
+          v-if="!item.icon"
+          class="capitalize"
+        >
+          {{ item.color }} {{ item.clicks }}
+        </span>
+        <RuiIcon
+          v-else-if="item.iconName"
+          :name="item.iconName"
+        />
+        <template
+          v-if="item.append"
+          #append
+        >
+          <RuiIcon :name="item.append" />
+        </template>
+      </RuiButton>
+    </template>
+  </ComponentGroup>
+</template>

example/src/components/buttons/ToggleButtonGroups.vue

@@ -0,0 +1,63 @@
+<script setup lang='ts'>
+import { objectOmit } from '@vueuse/shared';
+import { RuiButton, RuiButtonGroup, RuiIcon } from '@rotki/ui-library';
+import ComponentGroup from '@/components/ComponentGroup.vue';
+import { type ButtonGroupData, generateButtonGroupData } from '@/utils/buttons';
+
+const attributes: Partial<ButtonGroupData>[] = [
+  { activeColor: 'warning' },
+  { required: true, activeColor: 'warning' },
+  { disabled: true },
+  { required: true, disabled: true },
+  { },
+  { required: true },
+  { vertical: true },
+  { vertical: true, variant: 'outlined' },
+  { variant: 'outlined' },
+  { variant: 'text' },
+];
+
+const toggleButtons = ref<ButtonGroupData[]>([]);
+
+onBeforeMount(() => {
+  set(toggleButtons, generateButtonGroupData(attributes, 0));
+});
+</script>
+
+<template>
+  <ComponentGroup
+    :items="toggleButtons"
+    class="grid gap-4 grid-rows-2 grid-cols-2 justify-items-start mb-14"
+    data-cy="toggleable-button-groups"
+  >
+    <template #title>
+      Toggleable Button Groups
+    </template>
+
+    <template #item="{ item: buttonGroup }">
+      <RuiButtonGroup
+        v-bind="objectOmit(buttonGroup, ['modelValue', 'count', 'rounded'])"
+        v-model="buttonGroup.modelValue"
+      >
+        <RuiButton>
+          <RuiIcon name="align-left" />
+        </RuiButton>
+        <RuiButton>
+          <RuiIcon name="align-center" />
+        </RuiButton>
+        <RuiButton>
+          <RuiIcon name="align-right" />
+        </RuiButton>
+        <RuiButton>
+          <RuiIcon name="align-justify" />
+        </RuiButton>
+      </RuiButtonGroup>
+      <div
+        v-if="buttonGroup.required"
+        class="mt-2 text-rui-error"
+      >
+        required: *
+      </div>
+    </template>
+  </ComponentGroup>
+</template>

example/src/utils/buttons.ts

@@ -0,0 +1,31 @@
+import { type ButtonGroupProps, type ContextColorsType, contextColors } from '@rotki/ui-library';
+
+const gap = ['sm', 'md', 'lg'] as const;
+
+export interface ButtonGroupData extends ButtonGroupProps<number | string> {
+  count: number;
+  rounded?: boolean;
+};
+
+function createButtonGroupData(color: ContextColorsType, options: Partial<ButtonGroupData>): ButtonGroupData {
+  return {
+    count: 0,
+    ...options,
+    color,
+  };
+}
+
+export function generateButtonGroupData(attributes: Partial<ButtonGroupData>[], modelValue?: ButtonGroupProps<any>['modelValue']): ButtonGroupData[] {
+  const data: ButtonGroupData[] = [];
+  for (const attrs of attributes) {
+    for (const [i, color] of contextColors.entries()) {
+      const groupGap = gap?.[i];
+      data.push(createButtonGroupData(color, {
+        ...attrs,
+        ...(groupGap ? { gap: groupGap } : {}),
+        ...(modelValue ? { modelValue: Array.isArray(modelValue) ? [...modelValue] : modelValue } : {}),
+      }));
+    }
+  }
+  return data;
+}