refactor: extract attributes in badge vue to avoid repetition

rotki · Oct 28, 2024 · 9e5ebf2 · 9e5ebf2
1 parent 9a82d67
commit 9e5ebf2
Showing 1 changed file with 26 additions and 18 deletions.
diff --git a/example/src/views/BadgeView.vue b/example/src/views/BadgeView.vue
@@ -12,6 +12,25 @@ const icon = 'star-fill';
 const placement = 'bottom';
 const colors = ['default', 'primary', 'secondary', 'error', 'warning', 'info', 'success'] as const;
 
+const attributes: Partial<BadgeProps>[] = [
+  {},
+  { placement },
+  { left: true },
+  { left: true, placement },
+  { icon },
+  { placement, icon },
+  { left: true, icon, offsetX: -20 },
+  { left: true, placement, icon, offsetX: -20 },
+  { icon, text: undefined },
+  { icon, text: undefined, placement },
+  { icon, text: undefined, left: true },
+  { icon, text: undefined, left: true, placement },
+  { dot: true },
+  { dot: true, placement },
+  { dot: true, left: true },
+  { dot: true, left: true, placement },
+];
+
 const badges = ref<BadgeProps[]>();
 
 function createBadge(color: typeof colors[number], options: Partial<BadgeProps> = {}): BadgeProps {
@@ -24,24 +43,13 @@ function createBadge(color: typeof colors[number], options: Partial<BadgeProps>
 }
 
 function generateBadges(): BadgeProps[] {
-  return [
-    ...colors.map(color => createBadge(color)),
-    ...colors.map(color => createBadge(color, { placement })),
-    ...colors.map(color => createBadge(color, { left: true })),
-    ...colors.map(color => createBadge(color, { left: true, placement })),
-    ...colors.map(color => createBadge(color, { icon })),
-    ...colors.map(color => createBadge(color, { placement, icon })),
-    ...colors.map(color => createBadge(color, { left: true, icon, offsetX: -20 })),
-    ...colors.map(color => createBadge(color, { left: true, placement, icon, offsetX: -20 })),
-    ...colors.map(color => createBadge(color, { icon, text: undefined })),
-    ...colors.map(color => createBadge(color, { icon, text: undefined, placement })),
-    ...colors.map(color => createBadge(color, { icon, text: undefined, left: true })),
-    ...colors.map(color => createBadge(color, { icon, text: undefined, left: true, placement })),
-    ...colors.map(color => createBadge(color, { dot: true })),
-    ...colors.map(color => createBadge(color, { dot: true, placement })),
-    ...colors.map(color => createBadge(color, { dot: true, left: true })),
-    ...colors.map(color => createBadge(color, { dot: true, left: true, placement })),
-  ];
+  const badges: BadgeProps[] = [];
+  for (const attribute of attributes) {
+    for (const color of colors) {
+      badges.push(createBadge(color, attribute));
+    }
+  }
+  return badges;
 }
 
 onBeforeMount(() => {