feat(VSparkline): port to v3 (#18659)

Co-authored-by: John Leider <[email protected]>
vuetifyjs · Feb 21, 2024 · 09004a0 · 09004a0
1 parent 54f05f2
commit 09004a0
Show file tree

Hide file tree

Showing 15 changed files with 697 additions and 36 deletions.
diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json
@@ -222,6 +222,10 @@
       {
         "title": "calendars",
         "subfolder": "components"
+      },
+      {
+        "title": "sparklines",
+        "subfolder": "components"
       }
     ]
   },

diff --git a/packages/docs/src/examples/v-sparkline/misc-custom-labels.vue b/packages/docs/src/examples/v-sparkline/misc-custom-labels.vue
@@ -8,7 +8,7 @@
     <v-card-text>
       <v-sheet color="rgba(0, 0, 0, .12)">
         <v-sparkline
-          :value="value"
+          :model-value="value"
           color="rgba(255, 255, 255, .7)"
           height="100"
           padding="24"

diff --git a/packages/docs/src/examples/v-sparkline/misc-dashboard-card.vue b/packages/docs/src/examples/v-sparkline/misc-dashboard-card.vue
@@ -1,17 +1,18 @@
 <template>
   <v-card
-    class="mt-4 mx-auto"
+    class="mt-8 mx-auto overflow-visible"
     max-width="400"
   >
     <v-sheet
       class="v-sheet--offset mx-auto"
       color="cyan"
       elevation="12"
+      rounded="lg"
       max-width="calc(100% - 32px)"
     >
       <v-sparkline
         :labels="labels"
-        :value="value"
+        :model-value="value"
         color="white"
         line-width="2"
         padding="16"

diff --git a/packages/docs/src/examples/v-sparkline/misc-heart-rate.vue b/packages/docs/src/examples/v-sparkline/misc-heart-rate.vue
@@ -4,46 +4,44 @@
     color="grey-lighten-4"
     max-width="600"
   >
-    <v-card-title>
+    <template v-slot:prepend>
       <v-icon
         :color="checking ? 'red lighten-2' : 'indigo'"
-        class="me-12"
+        class="me-8"
         size="64"
+        icon="mdi-heart-pulse"
         @click="takePulse"
-      >
-        mdi-heart-pulse
-      </v-icon>
-      <v-row align="start">
-        <div class="text-caption text-grey text-uppercase">
-          Heart rate
-        </div>
-        <div>
-          <span
-            class="text-h3 font-weight-black"
-            v-text="avg || '—'"
-          ></span>
-          <strong v-if="avg">BPM</strong>
-        </div>
-      </v-row>
-
-      <v-spacer></v-spacer>
+      ></v-icon>
+    </template>
 
+    <template v-slot:title>
+      <div class="text-caption text-grey text-uppercase">
+        Heart rate
+      </div>
+
+      <span
+        class="text-h3 font-weight-black"
+        v-text="avg || '—'"
+      ></span>
+      <strong v-if="avg">BPM</strong>
+    </template>
+
+    <template v-slot:append>
       <v-btn
-        icon
+        icon="mdi-arrow-right-thick"
         class="align-self-start"
-        size="28"
-      >
-        <v-icon>mdi-arrow-right-thick</v-icon>
-      </v-btn>
-    </v-card-title>
+        size="34"
+        variant="text"
+      ></v-btn>
+    </template>
 
     <v-sheet color="transparent">
       <v-sparkline
         :key="String(avg)"
         :smooth="16"
         :gradient="['#f72047', '#ffd200', '#1feaea']"
         :line-width="3"
-        :value="heartbeats"
+        :model-value="heartbeats"
         auto-draw
         stroke-linecap="round"
       ></v-sparkline>

diff --git a/packages/docs/src/examples/v-sparkline/prop-fill.vue b/packages/docs/src/examples/v-sparkline/prop-fill.vue
@@ -6,7 +6,7 @@
       :line-width="width"
       :padding="padding"
       :smooth="radius || false"
-      :value="value"
+      :model-value="value"
       auto-draw
     ></v-sparkline>
 

diff --git a/packages/docs/src/examples/v-sparkline/usage.vue b/packages/docs/src/examples/v-sparkline/usage.vue
@@ -1,6 +1,6 @@
 <template>
   <v-sparkline
-    :value="value"
+    :model-value="value"
     :gradient="gradient"
     :smooth="radius || false"
     :padding="padding"

diff --git a/packages/docs/src/pages/en/components/all.md b/packages/docs/src/pages/en/components/all.md
@@ -340,6 +340,12 @@ These components are used to display data and information in a variety of ways.
 
 </ComponentsListItem>
 
+<ComponentsListItem name="Sparkline component" src="sparkline" labs>
+
+  The sparkline component creates beautiful and expressive simple graphs for displaying numerical data
+
+</ComponentsListItem>
+
 <ComponentsListItem name="Virtual Data table component"  src="data-tables/virtual-tables">
 
   The virtual data table component is used to display very large subsets of data

diff --git a/packages/docs/src/pages/en/components/sparklines.md b/packages/docs/src/pages/en/components/sparklines.md
@@ -1,7 +1,7 @@
 ---
-disabled: true
+emphasized: true
 meta:
-  title: Sparkline component
+  title: Sparklines
   description: The sparkline component creates beautiful and expressive simple graphs for displaying numerical data.
   keywords: sparklines, vuetify sparkline component, vue sparkline component, sparkline, graph, chart, line
 related:
@@ -14,8 +14,6 @@ related:
 
 The sparkline component can be used to create simple graphs, like GitHub's contribution chart.
 
-Any [SVG attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute) may be used in addition to the ones listed below.
-
 <PromotedEntry />
 
 ## Usage
@@ -26,7 +24,11 @@ A sparkline is a tiny chart that provides a visual representation of data. The s
 
 ## API
 
-<ApiInline />
+| Component | Description |
+| - | - |
+| [v-sparkline](/api/v-sparkline/) | Primary Component |
+
+<ApiInline hide-links />
 
 ## Examples