feat(VTimePicker): port to v3 (#18153)

closes #13516 Co-authored-by: John Leider <john@vuetifyjs.com>
vuetifyjs · Mar 26, 2024 · 695f5f4 · 695f5f4
1 parent 12cc8cc
commit 695f5f4
Show file tree

Hide file tree

Showing 81 changed files with 1,208 additions and 5,663 deletions.
diff --git a/packages/api-generator/src/locale/en/VTimePicker.json b/packages/api-generator/src/locale/en/VTimePicker.json
@@ -8,9 +8,10 @@
     "format": "Defines the format of a time displayed in picker. Available options are `ampm` and `24hr`.",
     "max": "Maximum allowed time.",
     "min": "Minimum allowed time.",
+    "hide-header": "Hide the header of the picker.",
     "readonly": "Puts picker in readonly state.",
     "scrollable": "Allows changing hour/minute with mouse scroll.",
-    "useSeconds": "Toggles the use of seconds in picker.",
+    "use-seconds": "Toggles the use of seconds in picker.",
     "value": "Time picker model (ISO 8601 format, 24hr hh:mm).",
     "width": "Width of the picker."
   },
@@ -19,9 +20,9 @@
   },
   "events": {
     "change": "Emitted when the time selection is done (when user changes the minute for HH:MM picker and the second for HH:MM:SS picker.",
-    "click:hour": "Emitted when user selects the hour.",
-    "click:minute": "Emitted when user selects the minute.",
-    "click:second": "Emitted when user selects the second.",
+    "update:hour": "Emitted when user selects the hour.",
+    "update:minute": "Emitted when user selects the minute.",
+    "update:second": "Emitted when user selects the second.",
     "update:period": "Emitted when user clicks the AM/PM button."
   }
 }
diff --git a/packages/docs/src/data/301.json b/packages/docs/src/data/301.json
@@ -118,12 +118,8 @@
   "components/simple-tables": "/components/tables",
   "components/data-tables": "/components/data-tables/basics",
   "components/date-pickers-month": "/introduction/roadmap",
-  "components/time-pickers": "/introduction/roadmap",
   "components/overflow-btns": "/introduction/roadmap",
-  "components/sparklines": "/introduction/roadmap",
   "components/server-side-data-tables": "/components/data-tables/server-side-tables",
-  "components/skeleton-loaders": "/introduction/roadmap",
-  "components/speed-dials": "/introduction/roadmap",
   "components/virtual-data-tables": "/components/data-tables/virtual-tables",
   "api/v-click-outside": "/api/v-click-outside-directive",
   "api/v-intersect": "/api/v-intersect-directive",

diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json
@@ -243,6 +243,10 @@
         "title": "speed-dials",
         "subfolder": "components"
       },
+      {
+        "title": "time-pickers",
+        "subfolder": "components"
+      },
       {
         "title": "treeview",
         "subfolder": "components"

diff --git a/packages/docs/src/examples/v-time-picker/misc-dialog-and-menu.vue b/packages/docs/src/examples/v-time-picker/misc-dialog-and-menu.vue
@@ -1,92 +1,64 @@
 <template>
-  <v-row>
-    <v-col
-      cols="11"
-      sm="5"
-    >
-      <v-menu
-        ref="menu"
-        v-model="menu2"
-        v-model:return-value="time"
-        :close-on-content-click="false"
-        :nudge-right="40"
-        max-width="290px"
-        min-width="290px"
-        transition="scale-transition"
-        offset-y
+  <v-container>
+    <v-row justify="space-around">
+      <v-col
+        cols="11"
+        sm="5"
       >
-        <template v-slot:activator="{ on, attrs }">
-          <v-text-field
-            v-model="time"
-            label="Picker in menu"
-            prepend-icon="mdi-clock-time-four-outline"
-            readonly
-            v-bind="attrs"
-            v-on="on"
-          ></v-text-field>
-        </template>
-        <v-time-picker
-          v-if="menu2"
+        <v-text-field
           v-model="time"
-          full-width
-          @click:minute="menu.save(time)"
-        ></v-time-picker>
-      </v-menu>
-    </v-col>
-    <v-spacer></v-spacer>
-    <v-col
-      cols="11"
-      sm="5"
-    >
-      <v-dialog
-        ref="dialog"
-        v-model="modal2"
-        v-model:return-value="time"
-        width="290px"
-        persistent
+          :active="menu2"
+          :focus="menu2"
+          label="Picker in menu"
+          prepend-icon="mdi-clock-time-four-outline"
+          readonly
+        >
+          <v-menu
+            v-model="menu2"
+            :close-on-content-click="false"
+            activator="parent"
+            transition="scale-transition"
+          >
+            <v-time-picker
+              v-if="menu2"
+              v-model="time"
+              full-width
+            ></v-time-picker>
+          </v-menu>
+        </v-text-field>
+      </v-col>
+
+      <v-col
+        cols="11"
+        sm="5"
       >
-        <template v-slot:activator="{ on, attrs }">
-          <v-text-field
-            v-model="time"
-            label="Picker in dialog"
-            prepend-icon="mdi-clock-time-four-outline"
-            readonly
-            v-bind="attrs"
-            v-on="on"
-          ></v-text-field>
-        </template>
-        <v-time-picker
-          v-if="modal2"
+        <v-text-field
           v-model="time"
-          full-width
+          :active="modal2"
+          :focused="modal2"
+          label="Picker in dialog"
+          prepend-icon="mdi-clock-time-four-outline"
+          readonly
         >
-          <v-spacer></v-spacer>
-          <v-btn
-            color="primary"
-            variant="text"
-            @click="modal2 = false"
+          <v-dialog
+            v-model="modal2"
+            activator="parent"
+            width="auto"
           >
-            Cancel
-          </v-btn>
-          <v-btn
-            color="primary"
-            variant="text"
-            @click="dialog.save(time)"
-          >
-            OK
-          </v-btn>
-        </v-time-picker>
-      </v-dialog>
-    </v-col>
-  </v-row>
+            <v-time-picker
+              v-if="modal2"
+              v-model="time"
+            ></v-time-picker>
+          </v-dialog>
+        </v-text-field>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script setup>
   import { ref } from 'vue'
 
-  const menu = ref()
-  const dialog = ref()
-
   const time = ref(null)
   const menu2 = ref(false)
   const modal2 = ref(false)

diff --git a/packages/docs/src/examples/v-time-picker/prop-allowed-times.vue b/packages/docs/src/examples/v-time-picker/prop-allowed-times.vue
@@ -1,22 +1,23 @@
 <template>
-  <v-row justify="space-around">
-    <v-time-picker
-      v-model="time"
-      :allowed-hours="allowedHours"
-      :allowed-minutes="allowedMinutes"
-      class="mt-4"
-      format="24hr"
-      max="22:15"
-      min="9:30"
-      scrollable
-    ></v-time-picker>
-    <v-time-picker
-      v-model="timeStep"
-      :allowed-minutes="allowedStep"
-      class="mt-4"
-      format="24hr"
-    ></v-time-picker>
-  </v-row>
+  <v-container>
+    <v-row justify="space-around">
+      <v-time-picker
+        v-model="time"
+        :allowed-hours="allowedHours"
+        :allowed-minutes="allowedMinutes"
+        format="24hr"
+        max="22:15"
+        min="9:30"
+        scrollable
+      ></v-time-picker>
+
+      <v-time-picker
+        v-model="timeStep"
+        :allowed-minutes="allowedStep"
+        format="24hr"
+      ></v-time-picker>
+    </v-row>
+  </v-container>
 </template>
 
 <script setup>

diff --git a/packages/docs/src/examples/v-time-picker/prop-color.vue b/packages/docs/src/examples/v-time-picker/prop-color.vue
@@ -1,29 +1,14 @@
 <template>
-  <v-row justify="space-around">
-    <v-time-picker
-      v-model="e4"
-      color="green-lighten-1"
-    ></v-time-picker>
-    <v-time-picker
-      v-model="e4"
-      color="green-lighten-1"
-      header-color="primary"
-    ></v-time-picker>
-  </v-row>
-</template>
-
-<script setup>
-  import { ref } from 'vue'
+  <v-container>
+    <v-row justify="space-around">
+      <v-time-picker
+        color="green-lighten-1"
+      ></v-time-picker>
 
-  const e4 = ref(null)
-</script>
-
-<script>
-  export default {
-    data () {
-      return {
-        e4: null,
-      }
-    },
-  }
-</script>
+      <v-time-picker
+        color="pink"
+        header-color="primary"
+      ></v-time-picker>
+    </v-row>
+  </v-container>
+</template>
diff --git a/packages/docs/src/examples/v-time-picker/prop-elevation.vue b/packages/docs/src/examples/v-time-picker/prop-elevation.vue
@@ -1,32 +1,9 @@
 <template>
-  <v-row
-    align="center"
-    justify="space-around"
-  >
-    <v-time-picker
-      v-model="picker"
-      flat
-    ></v-time-picker>
-
-    <v-time-picker
-      v-model="picker"
-      elevation="15"
-    ></v-time-picker>
-  </v-row>
+  <v-container>
+    <v-row justify="center">
+      <v-time-picker
+        elevation="15"
+      ></v-time-picker>
+    </v-row>
+  </v-container>
 </template>
-
-<script setup>
-  import { ref } from 'vue'
-
-  const picker = ref(null)
-</script>
-
-<script>
-  export default {
-    data () {
-      return {
-        picker: null,
-      }
-    },
-  }
-</script>
diff --git a/packages/docs/src/examples/v-time-picker/prop-format.vue b/packages/docs/src/examples/v-time-picker/prop-format.vue
@@ -1,26 +1,7 @@
 <template>
-  <v-row justify="center">
-    <v-col>
-      <v-time-picker
-        v-model="e7"
-        format="24hr"
-      ></v-time-picker>
-    </v-col>
-  </v-row>
+  <v-container>
+    <v-row justify="center">
+      <v-time-picker format="24hr"></v-time-picker>
+    </v-row>
+  </v-container>
 </template>
-
-<script setup>
-  import { ref } from 'vue'
-
-  const e7 = ref(null)
-</script>
-
-<script>
-  export default {
-    data () {
-      return {
-        e7: null,
-      }
-    },
-  }
-</script>
diff --git a/packages/docs/src/examples/v-time-picker/prop-hide-header.vue b/packages/docs/src/examples/v-time-picker/prop-hide-header.vue
@@ -0,0 +1,7 @@
+<template>
+  <v-container>
+    <v-row justify="center">
+      <v-time-picker hide-header></v-time-picker>
+    </v-row>
+  </v-container>
+</template>
diff --git a/packages/docs/src/examples/v-time-picker/prop-no-title.vue b/packages/docs/src/examples/v-time-picker/prop-no-title.vue