fix(v-stats): fix card layout

gitsindonesia · Jun 10, 2022 · 1c60db9 · 1c60db9
1 parent 6f629b9
commit 1c60db9
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 13 deletions.
diff --git a/packages/stats/package.json b/packages/stats/package.json
@@ -20,7 +20,7 @@
     "@gits-id/card": "^0.4.6",
     "feather-icons": "^4.28.0",
     "vue": "^3.2.31",
-    "vue-feather": "^2.0.0"
+    "@iconify/vue": "^3.2.1"
   },
   "devDependencies": {
     "@gits-id/tailwind-config": "^0.4.6",

diff --git a/packages/stats/src/VStats.stories.ts b/packages/stats/src/VStats.stories.ts
@@ -15,7 +15,7 @@ export default {
     modelValue: true,
     title: 'Avg. Click Rate',
     value: '24.59%',
-    icon: 'user',
+    icon: 'ri:user-line',
     color: 'primary',
   },
 } as Meta;
@@ -35,7 +35,7 @@ Default.args = {};
 Default.parameters = {
   docs: {
     source: {
-      code: '<v-stats title="Avg. Click Rate" value="24.59%" icon="user" />',
+      code: '<v-stats title="Avg. Click Rate" value="24.59%" icon="ri:user-line" />',
     },
   },
 };
@@ -61,7 +61,7 @@ ProgressUp.args = {
 ProgressUp.parameters = {
   docs: {
     source: {
-      code: '<v-stats title="Avg. Click Rate" value="24.59%" icon="user" from="10.5%" to="5.5.%" up />',
+      code: '<v-stats title="Avg. Click Rate" value="24.59%" icon="ri:user-line" from="10.5%" to="5.5.%" up />',
     },
   },
 };
@@ -75,7 +75,7 @@ ProgressDown.args = {
 ProgressUp.parameters = {
   docs: {
     source: {
-      code: '<v-stats title="Avg. Click Rate" value="24.59%" icon="user" from="10.5%" to="5.5.%" down />',
+      code: '<v-stats title="Avg. Click Rate" value="24.59%" icon="ri:user-line" from="10.5%" to="5.5.%" down />',
     },
   },
 };
@@ -87,7 +87,7 @@ Success.args = {
 Success.parameters = {
   docs: {
     source: {
-      code: '<v-stats title="Avg. Click Rate" value="24.59%" icon="user" color="success" />',
+      code: '<v-stats title="Avg. Click Rate" value="24.59%" icon="ri:user-line" color="success" />',
     },
   },
 };
@@ -99,7 +99,7 @@ Primary.args = {
 Primary.parameters = {
   docs: {
     source: {
-      code: '<v-stats title="Avg. Click Rate" value="24.59%" icon="user" color="primary" />',
+      code: '<v-stats title="Avg. Click Rate" value="24.59%" icon="ri:user-line" color="primary" />',
     },
   },
 };
@@ -111,7 +111,7 @@ Error.args = {
 Error.parameters = {
   docs: {
     source: {
-      code: '<v-stats title="Avg. Click Rate" value="24.59%" icon="user" color="error" />',
+      code: '<v-stats title="Avg. Click Rate" value="24.59%" icon="ri:user-line" color="error" />',
     },
   },
 };
@@ -123,7 +123,7 @@ Info.args = {
 Info.parameters = {
   docs: {
     source: {
-      code: '<v-stats title="Avg. Click Rate" value="24.59%" icon="user" color="info" />',
+      code: '<v-stats title="Avg. Click Rate" value="24.59%" icon="ri:user-line" color="info" />',
     },
   },
 };
@@ -135,7 +135,7 @@ Warning.args = {
 Warning.parameters = {
   docs: {
     source: {
-      code: '<v-stats title="Avg. Click Rate" value="24.59%" icon="user" color="warning" />',
+      code: '<v-stats title="Avg. Click Rate" value="24.59%" icon="ri:user-line" color="warning" />',
     },
   },
 };
diff --git a/packages/stats/src/VStats.vue b/packages/stats/src/VStats.vue
@@ -3,6 +3,7 @@ import {computed, toRefs} from 'vue';
 import VCard from '@gits-id/card';
 import VBadge from '@gits-id/badge';
 import VueFeather from 'vue-feather';
+import {Icon} from '@iconify/vue';
 
 type Props = {
   title?: string;
@@ -14,6 +15,7 @@ type Props = {
   progress?: string;
   up?: boolean;
   down?: boolean;
+  iconClass?: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -26,6 +28,7 @@ const props = withDefaults(defineProps<Props>(), {
   progress: '',
   up: false,
   down: false,
+  iconClass: 'w-8 h-8',
 });
 
 const {title, icon, value, color, from, progressColor, progress, up, down} =
@@ -61,7 +64,7 @@ const badgeColor = computed(() => {
   <v-card
     :title="title"
     wrapper-class="rounded-lg"
-    body-class="!p-4 flex items-start gap-4"
+    body-class="!flex-row items-center !py-4 !gap-4"
     hide-header
     hide-footer
   >
@@ -81,7 +84,7 @@ const badgeColor = computed(() => {
       :class="colorClass"
     >
       <slot name="icon" :icon="icon">
-        <vue-feather :type="icon" />
+        <Icon :icon="icon" :class="iconClass" />
       </slot>
     </div>
     <div class="w-full">

diff --git a/packages/stats/vite.config.js b/packages/stats/vite.config.js
@@ -21,7 +21,7 @@ export default defineConfig({
       external: [
         'vue',
         '@heroicons/vue/outline',
-        'vue-feather',
+        '@iconify/vue',
         '@gits-id/card',
         '@gits-id/badge',
       ],