Update componen template

2026-03-13 03:56:11 +00:00
parent 6bb6a1d430
commit f2ed1b2556
33 changed files with 1899 additions and 0 deletions
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { getSecondary } from '@/utils/UpdateColors';
+
+/*Chart*/
+const chartOptions = computed(() => {
+    return {
+        chart: {
+            type: 'area',
+            height: 80,
+            fontFamily: `inherit`,
+            toolbar: {
+                show: false
+            },
+            sparkline: {
+                enabled: true
+            },
+            group: 'sparklines'
+        },
+        colors: [getSecondary.value],
+        stroke: {
+            curve: 'smooth',
+            width: 2
+        },
+        fill: {
+            type: 'solid',
+            opacity: 0.05
+        },
+        markers: {
+            size: 0
+        },
+        tooltip: {
+            theme: 'dark',
+            x: {
+                show: false
+            }
+        }
+    };
+});
+const Chart = [
+    {
+        name: '',
+        data: [30, 25, 35, 20, 30, 40]
+    }
+];
+</script>
+<template>
+    <v-card elevation="10" >
+        <v-card-item>
+            <p class="text-subtitle-1 textSecondary">Customers</p>
+            <h4 class="text-h4 my-2">36,358</h4>
+            <div>
+                <v-avatar class="bg-lighterror" size="20">
+                    <ArrowDownRightIcon size="15" class="text-error" />
+                </v-avatar>
+                <span class="text-body-1 ml-2 textSecondary">+9%</span>
+            </div>
+        </v-card-item>
+        <apexchart class="" type="area" height="80" :options="chartOptions" :series="Chart"> </apexchart>
+    </v-card>
+</template>