Merge branch 'master' into dev

Author: KaelWD

lerna.json

@@ -13,5 +13,5 @@
     }
   },
   "npmClient": "pnpm",
-  "version": "3.10.7"
+  "version": "3.10.8"
 }

packages/api-generator/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuetify/api-generator",
   "type": "module",
-  "version": "3.10.7",
+  "version": "3.10.8",
   "private": true,
   "description": "",
   "scripts": {

packages/api-generator/src/locale/en/VSnackbar.json

@@ -2,7 +2,7 @@
   "props": {
     "app": "Respects boundaries of—and will not overlap with—other `app` components like `v-app-bar`, `v-navigation-drawer`, and `v-footer`.",
     "centered": "Positions the snackbar in the center of the screen, (x and y axis).",
-    "multiLine": "Gives the snackbar a larger minimum height.",
+    "multiLine": "Deprecated, use `min-height` instead. Increases minimum height.",
     "timer": "Display a progress bar that counts down until the snackbar closes. Pass a string to set a custom color, otherwise uses `info`.",
     "timeout": "Time (in milliseconds) to wait until snackbar is automatically hidden.  Use `-1` to keep open indefinitely (`0` in version < 2.3 ). It is recommended for this number to be between `4000` and `10000`. Changes to this property will reset the timeout.",
     "vertical": "Stacks snackbar content on top of the actions (button)."

packages/docs/package.json

@@ -4,7 +4,7 @@
   "description": "A Vue.js project",
   "private": true,
   "author": "John Leider <john@vuetifyjs.com>",
-  "version": "3.10.7",
+  "version": "3.10.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",

packages/docs/src/examples/v-stepper-vertical/prop-non-linear.vue

@@ -1,8 +1,29 @@
 <template>
-  <v-stepper-vertical
-    :items="['Step 1', 'Step 2', 'Step 3']"
-    :mandatory="false"
-    editable
-    non-linear
-  ></v-stepper-vertical>
+  <div>
+    <v-stepper-vertical
+      v-model="step"
+      :mandatory="false"
+      hide-actions
+      multiple
+      non-linear
+    >
+      <v-stepper-vertical-item title="Select campaign settings" value="1" editable>
+        Step content
+      </v-stepper-vertical-item>
+
+      <v-stepper-vertical-item title="Create an ad group" value="2" editable>
+        Step content
+      </v-stepper-vertical-item>
+
+      <v-stepper-vertical-item title="Create an ad" value="3" editable>
+        Step content
+      </v-stepper-vertical-item>
+    </v-stepper-vertical>
+  </div>
 </template>
+
+<script setup>
+  import { shallowRef } from 'vue'
+
+  const step = shallowRef([1])
+</script>

packages/docs/src/pages/en/components/vertical-steppers.md

@@ -64,7 +64,7 @@ The `v-stepper-vertical` is the vertical variant of the [v-stepper](/components/
 
 Non-linear stepper allow the user to navigate freely – skip to a desired section without forcing clicks on the action buttons within, provided **editable** prop is also present. When combined with `:mandatory="false"`, allowes to collapse the section as well.
 
-<ExamplesExample file="v-stepper/prop-non-linear" />
+<ExamplesExample file="v-stepper-vertical/prop-non-linear" />
 
 #### Slots
 

packages/vuetify/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.10.7",
+  "version": "3.10.8",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"

packages/vuetify/src/components/VColorPicker/VColorPickerPreview.tsx

@@ -103,7 +103,7 @@ export const VColorPickerPreview = defineComponent({
             name={ t('$vuetify.colorPicker.ariaLabel.hueSlider') }
             modelValue={ props.color?.h }
             onUpdate:modelValue={ h => emit('update:color', { ...(props.color ?? nullColor), h }) }
-            step={ 0 }
+            step={ 1 }
             min={ 0 }
             max={ 360 }
             disabled={ props.disabled }
@@ -119,7 +119,7 @@ export const VColorPickerPreview = defineComponent({
               name={ t('$vuetify.colorPicker.ariaLabel.alphaSlider') }
               modelValue={ props.color?.a ?? 1 }
               onUpdate:modelValue={ a => emit('update:color', { ...(props.color ?? nullColor), a }) }
-              step={ 1 / 256 }
+              step={ 0.01 }
               min={ 0 }
               max={ 1 }
               disabled={ props.disabled }

packages/vuetify/src/components/VConfirmEdit/VConfirmEdit.tsx

@@ -6,8 +6,8 @@ import { useLocale } from '@/composables/locale'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
-import { computed, ref, toRaw, watchEffect } from 'vue'
-import { deepEqual, genericComponent, propsFactory, useRender } from '@/util'
+import { computed, ref, watchEffect } from 'vue'
+import { deepEqual, deepToRaw, genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType, Ref, VNode } from 'vue'
@@ -63,7 +63,7 @@ export const VConfirmEdit = genericComponent<new <T> (
     const model = useProxiedModel(props, 'modelValue')
     const internalModel = ref()
     watchEffect(() => {
-      internalModel.value = structuredClone(toRaw(model.value))
+      internalModel.value = structuredClone(deepToRaw(model.value))
     })
 
     const { t } = useLocale()
@@ -93,7 +93,7 @@ export const VConfirmEdit = genericComponent<new <T> (
     }
 
     function cancel () {
-      internalModel.value = structuredClone(toRaw(model.value))
+      internalModel.value = structuredClone(deepToRaw(model.value))
       emit('cancel')
     }
 

packages/vuetify/src/components/VDataTable/composables/select.ts

@@ -3,7 +3,7 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
 import { computed, inject, provide, shallowRef, toRef } from 'vue'
-import { deepEqual, propsFactory, wrapInArray } from '@/util'
+import { deepEqual, isPrimitive, propsFactory, wrapInArray } from '@/util'
 
 // Types
 import type { InjectionKey, PropType, Ref } from 'vue'
@@ -37,7 +37,7 @@ export interface DataTableSelectStrategy {
 type SelectionProps = Pick<DataTableItemProps, 'itemValue'> & {
   modelValue: readonly any[]
   selectStrategy: 'single' | 'page' | 'all'
-  valueComparator: typeof deepEqual
+  valueComparator?: typeof deepEqual
   'onUpdate:modelValue': EventProp<[any[]]> | undefined
 }
 
@@ -75,7 +75,9 @@ const allSelectStrategy: DataTableSelectStrategy = {
 
     return selected
   },
-  selectAll: ({ value, allItems, selected }) => allSelectStrategy.select({ items: allItems, value, selected }),
+  selectAll: ({ value, allItems }) => {
+    return new Set(value ? allItems.map(item => item.value) : [])
+  },
 }
 
 export const makeDataTableSelectProps = propsFactory({
@@ -88,10 +90,7 @@ export const makeDataTableSelectProps = propsFactory({
     type: Array as PropType<readonly any[]>,
     default: () => ([]),
   },
-  valueComparator: {
-    type: Function as PropType<typeof deepEqual>,
-    default: deepEqual,
-  },
+  valueComparator: Function as PropType<typeof deepEqual>,
 }, 'DataTable-select')
 
 export const VDataTableSelectionSymbol: InjectionKey<ReturnType<typeof provideSelection>> = Symbol.for('vuetify:data-table-selection')
@@ -101,8 +100,16 @@ export function provideSelection (
   { allItems, currentPage }: { allItems: Ref<SelectableItem[]>, currentPage: Ref<SelectableItem[]> }
 ) {
   const selected = useProxiedModel(props, 'modelValue', props.modelValue, v => {
+    const customComparator = props.valueComparator
+    if (customComparator) {
+      return new Set(wrapInArray(v).map(v => {
+        return allItems.value.find(item => customComparator(v, item.value))?.value ?? v
+      }))
+    }
     return new Set(wrapInArray(v).map(v => {
-      return allItems.value.find(item => props.valueComparator(v, item.value))?.value ?? v
+      return isPrimitive(v)
+        ? allItems.value.find(item => v === item.value)?.value ?? v
+        : allItems.value.find(item => deepEqual(v, item.value))?.value ?? v
     }))
   }, v => {
     return [...v.values()]