@vuetify/nightly 3.8.2-master.2025-04-19 → 3.8.2-master.2025-04-23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (290) hide show
  1. package/CHANGELOG.md +23 -3
  2. package/dist/json/attributes.json +3523 -3523
  3. package/dist/json/importMap-labs.json +22 -22
  4. package/dist/json/importMap.json +144 -144
  5. package/dist/json/web-types.json +6716 -6457
  6. package/dist/vuetify-labs.cjs +624 -510
  7. package/dist/vuetify-labs.css +3327 -3318
  8. package/dist/vuetify-labs.d.ts +1835 -886
  9. package/dist/vuetify-labs.esm.js +625 -511
  10. package/dist/vuetify-labs.esm.js.map +1 -1
  11. package/dist/vuetify-labs.js +624 -510
  12. package/dist/vuetify-labs.min.css +2 -2
  13. package/dist/vuetify.cjs +402 -396
  14. package/dist/vuetify.cjs.map +1 -1
  15. package/dist/vuetify.css +3130 -3130
  16. package/dist/vuetify.d.ts +153 -151
  17. package/dist/vuetify.esm.js +403 -397
  18. package/dist/vuetify.esm.js.map +1 -1
  19. package/dist/vuetify.js +402 -396
  20. package/dist/vuetify.js.map +1 -1
  21. package/dist/vuetify.min.css +2 -2
  22. package/dist/vuetify.min.js +893 -886
  23. package/dist/vuetify.min.js.map +1 -1
  24. package/lib/components/VAlert/VAlert.js +8 -9
  25. package/lib/components/VAlert/VAlert.js.map +1 -1
  26. package/lib/components/VAppBar/VAppBar.js +4 -4
  27. package/lib/components/VAppBar/VAppBar.js.map +1 -1
  28. package/lib/components/VAutocomplete/VAutocomplete.js +1 -2
  29. package/lib/components/VAutocomplete/VAutocomplete.js.map +1 -1
  30. package/lib/components/VBadge/VBadge.js +2 -3
  31. package/lib/components/VBadge/VBadge.js.map +1 -1
  32. package/lib/components/VBanner/VBanner.js +3 -3
  33. package/lib/components/VBanner/VBanner.js.map +1 -1
  34. package/lib/components/VBottomNavigation/VBottomNavigation.js +8 -8
  35. package/lib/components/VBottomNavigation/VBottomNavigation.js.map +1 -1
  36. package/lib/components/VBreadcrumbs/VBreadcrumbs.js +6 -6
  37. package/lib/components/VBreadcrumbs/VBreadcrumbs.js.map +1 -1
  38. package/lib/components/VBreadcrumbs/VBreadcrumbsItem.js +1 -2
  39. package/lib/components/VBreadcrumbs/VBreadcrumbsItem.js.map +1 -1
  40. package/lib/components/VBtn/VBtn.js +3 -3
  41. package/lib/components/VBtn/VBtn.js.map +1 -1
  42. package/lib/components/VBtnGroup/VBtnGroup.js +4 -4
  43. package/lib/components/VBtnGroup/VBtnGroup.js.map +1 -1
  44. package/lib/components/VCard/VCard.js +7 -8
  45. package/lib/components/VCard/VCard.js.map +1 -1
  46. package/lib/components/VCheckbox/VCheckbox.js +2 -3
  47. package/lib/components/VCheckbox/VCheckbox.js.map +1 -1
  48. package/lib/components/VCheckbox/VCheckboxBtn.js +3 -3
  49. package/lib/components/VCheckbox/VCheckboxBtn.js.map +1 -1
  50. package/lib/components/VChip/VChip.js +8 -9
  51. package/lib/components/VChip/VChip.js.map +1 -1
  52. package/lib/components/VChipGroup/VChipGroup.js +5 -5
  53. package/lib/components/VChipGroup/VChipGroup.js.map +1 -1
  54. package/lib/components/VCombobox/VCombobox.js +3 -4
  55. package/lib/components/VCombobox/VCombobox.js.map +1 -1
  56. package/lib/components/VCounter/VCounter.js +2 -2
  57. package/lib/components/VCounter/VCounter.js.map +1 -1
  58. package/lib/components/VDataIterator/VDataIterator.js +2 -2
  59. package/lib/components/VDataIterator/VDataIterator.js.map +1 -1
  60. package/lib/components/VDataTable/VDataTable.js +7 -7
  61. package/lib/components/VDataTable/VDataTable.js.map +1 -1
  62. package/lib/components/VDataTable/VDataTableHeaders.js +1 -1
  63. package/lib/components/VDataTable/VDataTableHeaders.js.map +1 -1
  64. package/lib/components/VDataTable/VDataTableServer.js +7 -7
  65. package/lib/components/VDataTable/VDataTableServer.js.map +1 -1
  66. package/lib/components/VDataTable/VDataTableVirtual.js +7 -7
  67. package/lib/components/VDataTable/VDataTableVirtual.js.map +1 -1
  68. package/lib/components/VDataTable/composables/expand.d.ts +1 -1
  69. package/lib/components/VDataTable/composables/expand.js +1 -1
  70. package/lib/components/VDataTable/composables/expand.js.map +1 -1
  71. package/lib/components/VDataTable/composables/options.js +8 -8
  72. package/lib/components/VDataTable/composables/options.js.map +1 -1
  73. package/lib/components/VDataTable/composables/select.d.ts +2 -2
  74. package/lib/components/VDataTable/composables/select.js +2 -2
  75. package/lib/components/VDataTable/composables/select.js.map +1 -1
  76. package/lib/components/VDataTable/composables/sort.d.ts +2 -2
  77. package/lib/components/VDataTable/composables/sort.js +2 -2
  78. package/lib/components/VDataTable/composables/sort.js.map +1 -1
  79. package/lib/components/VDatePicker/VDatePicker.js +4 -4
  80. package/lib/components/VDatePicker/VDatePicker.js.map +1 -1
  81. package/lib/components/VDatePicker/VDatePickerHeader.js +1 -1
  82. package/lib/components/VDatePicker/VDatePickerHeader.js.map +1 -1
  83. package/lib/components/VDatePicker/VDatePickerMonth.js +2 -2
  84. package/lib/components/VDatePicker/VDatePickerMonth.js.map +1 -1
  85. package/lib/components/VDialog/VDialog.d.ts +9 -9
  86. package/lib/components/VDivider/VDivider.js +2 -2
  87. package/lib/components/VDivider/VDivider.js.map +1 -1
  88. package/lib/components/VEmptyState/VEmptyState.js +1 -2
  89. package/lib/components/VEmptyState/VEmptyState.js.map +1 -1
  90. package/lib/components/VExpansionPanel/VExpansionPanel.js +3 -3
  91. package/lib/components/VExpansionPanel/VExpansionPanel.js.map +1 -1
  92. package/lib/components/VExpansionPanel/VExpansionPanelTitle.js +3 -3
  93. package/lib/components/VExpansionPanel/VExpansionPanelTitle.js.map +1 -1
  94. package/lib/components/VExpansionPanel/VExpansionPanels.js +14 -14
  95. package/lib/components/VExpansionPanel/VExpansionPanels.js.map +1 -1
  96. package/lib/components/VFab/VFab.js +2 -2
  97. package/lib/components/VFab/VFab.js.map +1 -1
  98. package/lib/components/VField/VField.js +5 -5
  99. package/lib/components/VField/VField.js.map +1 -1
  100. package/lib/components/VFileInput/VFileInput.js +2 -2
  101. package/lib/components/VFileInput/VFileInput.js.map +1 -1
  102. package/lib/components/VFooter/VFooter.js +4 -4
  103. package/lib/components/VFooter/VFooter.js.map +1 -1
  104. package/lib/components/VForm/VForm.d.ts +40 -40
  105. package/lib/components/VIcon/VIcon.js +4 -4
  106. package/lib/components/VIcon/VIcon.js.map +1 -1
  107. package/lib/components/VImg/VImg.js +2 -2
  108. package/lib/components/VImg/VImg.js.map +1 -1
  109. package/lib/components/VInput/VInput.js +3 -3
  110. package/lib/components/VInput/VInput.js.map +1 -1
  111. package/lib/components/VLayout/VLayoutItem.js +5 -5
  112. package/lib/components/VLayout/VLayoutItem.js.map +1 -1
  113. package/lib/components/VList/VList.js +14 -14
  114. package/lib/components/VList/VList.js.map +1 -1
  115. package/lib/components/VList/VListGroup.js +2 -2
  116. package/lib/components/VList/VListGroup.js.map +1 -1
  117. package/lib/components/VList/VListItem.d.ts +3 -3
  118. package/lib/components/VList/VListItem.js +6 -6
  119. package/lib/components/VList/VListItem.js.map +1 -1
  120. package/lib/components/VList/VListSubheader.js +1 -2
  121. package/lib/components/VList/VListSubheader.js.map +1 -1
  122. package/lib/components/VMenu/VMenu.d.ts +15 -15
  123. package/lib/components/VMenu/VMenu.js +2 -2
  124. package/lib/components/VMenu/VMenu.js.map +1 -1
  125. package/lib/components/VMessages/VMessages.js +1 -1
  126. package/lib/components/VMessages/VMessages.js.map +1 -1
  127. package/lib/components/VNavigationDrawer/VNavigationDrawer.js +6 -6
  128. package/lib/components/VNavigationDrawer/VNavigationDrawer.js.map +1 -1
  129. package/lib/components/VNumberInput/VNumberInput.js +11 -11
  130. package/lib/components/VNumberInput/VNumberInput.js.map +1 -1
  131. package/lib/components/VOtpInput/VOtpInput.js +7 -7
  132. package/lib/components/VOtpInput/VOtpInput.js.map +1 -1
  133. package/lib/components/VOverlay/VOverlay.d.ts +3 -3
  134. package/lib/components/VOverlay/VOverlay.js +4 -4
  135. package/lib/components/VOverlay/VOverlay.js.map +1 -1
  136. package/lib/components/VOverlay/locationStrategies.js +10 -1
  137. package/lib/components/VOverlay/locationStrategies.js.map +1 -1
  138. package/lib/components/VPagination/VPagination.js +7 -7
  139. package/lib/components/VPagination/VPagination.js.map +1 -1
  140. package/lib/components/VProgressCircular/VProgressCircular.js +9 -9
  141. package/lib/components/VProgressCircular/VProgressCircular.js.map +1 -1
  142. package/lib/components/VProgressLinear/VProgressLinear.js +4 -4
  143. package/lib/components/VProgressLinear/VProgressLinear.js.map +1 -1
  144. package/lib/components/VSelect/VSelect.js +2 -2
  145. package/lib/components/VSelect/VSelect.js.map +1 -1
  146. package/lib/components/VSelectionControl/VSelectionControl.d.ts +1 -1
  147. package/lib/components/VSelectionControl/VSelectionControl.js +7 -7
  148. package/lib/components/VSelectionControl/VSelectionControl.js.map +1 -1
  149. package/lib/components/VSelectionControlGroup/VSelectionControlGroup.js +15 -15
  150. package/lib/components/VSelectionControlGroup/VSelectionControlGroup.js.map +1 -1
  151. package/lib/components/VSheet/VSheet.js +1 -2
  152. package/lib/components/VSheet/VSheet.js.map +1 -1
  153. package/lib/components/VSkeletonLoader/VSkeletonLoader.js +2 -2
  154. package/lib/components/VSkeletonLoader/VSkeletonLoader.js.map +1 -1
  155. package/lib/components/VSlider/slider.js +10 -10
  156. package/lib/components/VSlider/slider.js.map +1 -1
  157. package/lib/components/VSnackbar/VSnackbar.d.ts +9 -9
  158. package/lib/components/VSparkline/VSparkline.js +2 -2
  159. package/lib/components/VSparkline/VSparkline.js.map +1 -1
  160. package/lib/components/VSwitch/VSwitch.js +3 -3
  161. package/lib/components/VSwitch/VSwitch.js.map +1 -1
  162. package/lib/components/VSystemBar/VSystemBar.js +2 -2
  163. package/lib/components/VSystemBar/VSystemBar.js.map +1 -1
  164. package/lib/components/VTabs/VTab.d.ts +3 -3
  165. package/lib/components/VTabs/VTab.js +1 -1
  166. package/lib/components/VTabs/VTab.js.map +1 -1
  167. package/lib/components/VTabs/VTabs.js +7 -7
  168. package/lib/components/VTabs/VTabs.js.map +1 -1
  169. package/lib/components/VTimeline/VTimeline.js +9 -9
  170. package/lib/components/VTimeline/VTimeline.js.map +1 -1
  171. package/lib/components/VTimeline/VTimelineDivider.js +2 -3
  172. package/lib/components/VTimeline/VTimelineDivider.js.map +1 -1
  173. package/lib/components/VToolbar/VToolbar.js +2 -2
  174. package/lib/components/VToolbar/VToolbar.js.map +1 -1
  175. package/lib/components/VToolbar/VToolbarItems.js +2 -2
  176. package/lib/components/VToolbar/VToolbarItems.js.map +1 -1
  177. package/lib/components/VTooltip/VTooltip.d.ts +9 -9
  178. package/lib/components/VTooltip/VTooltip.js +3 -3
  179. package/lib/components/VTooltip/VTooltip.js.map +1 -1
  180. package/lib/components/VVirtualScroll/VVirtualScroll.js +1 -1
  181. package/lib/components/VVirtualScroll/VVirtualScroll.js.map +1 -1
  182. package/lib/components/VWindow/VWindow.js +3 -3
  183. package/lib/components/VWindow/VWindow.js.map +1 -1
  184. package/lib/components/transitions/dialog-transition.js +11 -2
  185. package/lib/components/transitions/dialog-transition.js.map +1 -1
  186. package/lib/composables/border.d.ts +1 -1
  187. package/lib/composables/border.js +5 -8
  188. package/lib/composables/border.js.map +1 -1
  189. package/lib/composables/calendar.d.ts +21 -54
  190. package/lib/composables/calendar.js +11 -11
  191. package/lib/composables/calendar.js.map +1 -1
  192. package/lib/composables/color.d.ts +8 -10
  193. package/lib/composables/color.js +21 -22
  194. package/lib/composables/color.js.map +1 -1
  195. package/lib/composables/density.d.ts +1 -1
  196. package/lib/composables/density.js +2 -2
  197. package/lib/composables/density.js.map +1 -1
  198. package/lib/composables/display.d.ts +4 -2
  199. package/lib/composables/display.js +2 -2
  200. package/lib/composables/display.js.map +1 -1
  201. package/lib/composables/elevation.js +4 -6
  202. package/lib/composables/elevation.js.map +1 -1
  203. package/lib/composables/focus.d.ts +4 -2
  204. package/lib/composables/focus.js +2 -2
  205. package/lib/composables/focus.js.map +1 -1
  206. package/lib/composables/form.d.ts +7 -7
  207. package/lib/composables/form.js +3 -3
  208. package/lib/composables/form.js.map +1 -1
  209. package/lib/composables/goto.js +2 -2
  210. package/lib/composables/goto.js.map +1 -1
  211. package/lib/composables/group.d.ts +3 -3
  212. package/lib/composables/group.js +4 -4
  213. package/lib/composables/group.js.map +1 -1
  214. package/lib/composables/icons.d.ts +2 -2
  215. package/lib/composables/icons.js +2 -2
  216. package/lib/composables/icons.js.map +1 -1
  217. package/lib/composables/layout.d.ts +10 -4
  218. package/lib/composables/layout.js +4 -4
  219. package/lib/composables/layout.js.map +1 -1
  220. package/lib/composables/lazy.d.ts +1 -1
  221. package/lib/composables/lazy.js +2 -2
  222. package/lib/composables/lazy.js.map +1 -1
  223. package/lib/composables/loader.d.ts +4 -2
  224. package/lib/composables/loader.js +2 -2
  225. package/lib/composables/loader.js.map +1 -1
  226. package/lib/composables/locale.js +3 -3
  227. package/lib/composables/locale.js.map +1 -1
  228. package/lib/composables/nested/nested.d.ts +3 -3
  229. package/lib/composables/nested/nested.js +4 -4
  230. package/lib/composables/nested/nested.js.map +1 -1
  231. package/lib/composables/position.d.ts +1 -1
  232. package/lib/composables/position.js +2 -2
  233. package/lib/composables/position.js.map +1 -1
  234. package/lib/composables/router.d.ts +3 -3
  235. package/lib/composables/router.js +8 -8
  236. package/lib/composables/router.js.map +1 -1
  237. package/lib/composables/size.d.ts +8 -5
  238. package/lib/composables/size.js +6 -5
  239. package/lib/composables/size.js.map +1 -1
  240. package/lib/composables/ssrBoot.d.ts +4 -2
  241. package/lib/composables/ssrBoot.js +2 -2
  242. package/lib/composables/ssrBoot.js.map +1 -1
  243. package/lib/composables/stack.d.ts +7 -5
  244. package/lib/composables/stack.js +5 -5
  245. package/lib/composables/stack.js.map +1 -1
  246. package/lib/composables/theme.js +7 -7
  247. package/lib/composables/theme.js.map +1 -1
  248. package/lib/composables/validation.js +0 -5
  249. package/lib/composables/validation.js.map +1 -1
  250. package/lib/composables/variant.d.ts +5 -6
  251. package/lib/composables/variant.js +6 -6
  252. package/lib/composables/variant.js.map +1 -1
  253. package/lib/entry-bundler.js +1 -1
  254. package/lib/framework.d.ts +66 -64
  255. package/lib/framework.js +1 -1
  256. package/lib/labs/VCalendar/VCalendar.d.ts +600 -211
  257. package/lib/labs/VCalendar/VCalendar.js +55 -27
  258. package/lib/labs/VCalendar/VCalendar.js.map +1 -1
  259. package/lib/labs/VCalendar/VCalendarDay.css +9 -0
  260. package/lib/labs/VCalendar/VCalendarDay.d.ts +329 -17
  261. package/lib/labs/VCalendar/VCalendarDay.js +18 -10
  262. package/lib/labs/VCalendar/VCalendarDay.js.map +1 -1
  263. package/lib/labs/VCalendar/VCalendarDay.sass +8 -0
  264. package/lib/labs/VCalendar/VCalendarEvent.js +15 -5
  265. package/lib/labs/VCalendar/VCalendarEvent.js.map +1 -1
  266. package/lib/labs/VCalendar/VCalendarHeader.d.ts +44 -17
  267. package/lib/labs/VCalendar/VCalendarHeader.js +5 -2
  268. package/lib/labs/VCalendar/VCalendarHeader.js.map +1 -1
  269. package/lib/labs/VCalendar/VCalendarInterval.d.ts +171 -17
  270. package/lib/labs/VCalendar/VCalendarInterval.js +66 -35
  271. package/lib/labs/VCalendar/VCalendarInterval.js.map +1 -1
  272. package/lib/labs/VCalendar/VCalendarIntervalEvent.d.ts +92 -17
  273. package/lib/labs/VCalendar/VCalendarIntervalEvent.js +30 -10
  274. package/lib/labs/VCalendar/VCalendarIntervalEvent.js.map +1 -1
  275. package/lib/labs/VCalendar/VCalendarMonthDay.d.ts +122 -88
  276. package/lib/labs/VCalendar/VCalendarMonthDay.js +24 -22
  277. package/lib/labs/VCalendar/VCalendarMonthDay.js.map +1 -1
  278. package/lib/labs/VIconBtn/VIconBtn.js +3 -3
  279. package/lib/labs/VIconBtn/VIconBtn.js.map +1 -1
  280. package/lib/labs/VPicker/VPicker.js +1 -2
  281. package/lib/labs/VPicker/VPicker.js.map +1 -1
  282. package/lib/labs/VTimePicker/VTimePickerClock.js +3 -3
  283. package/lib/labs/VTimePicker/VTimePickerClock.js.map +1 -1
  284. package/lib/labs/VTreeview/VTreeview.js +11 -11
  285. package/lib/labs/VTreeview/VTreeview.js.map +1 -1
  286. package/lib/util/box.js.map +1 -1
  287. package/lib/util/helpers.d.ts +5 -2
  288. package/lib/util/helpers.js +9 -5
  289. package/lib/util/helpers.js.map +1 -1
  290. package/package.json +1 -1
@@ -1,10 +1,10 @@
1
1
  /*!
2
- * Vuetify v3.8.2-master.2025-04-19
2
+ * Vuetify v3.8.2-master.2025-04-23
3
3
  * Forged by John Leider
4
4
  * Released under the MIT License.
5
5
  */
6
6
 
7
- import { shallowRef, reactive, computed, watchEffect, toRefs, capitalize, unref, Fragment, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, provide, inject as inject$1, defineComponent as defineComponent$1, h, camelize, createVNode, mergeProps, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, TransitionGroup, Transition, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
7
+ import { shallowRef, reactive, watchEffect, toRef, capitalize, unref, Fragment, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, computed, provide, inject as inject$1, defineComponent as defineComponent$1, h, camelize, createVNode, mergeProps, toValue, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, TransitionGroup, Transition, toRefs, isRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
8
8
 
9
9
  const IN_BROWSER = typeof window !== 'undefined';
10
10
  const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
@@ -365,15 +365,19 @@ function getEventCoordinates(e) {
365
365
 
366
366
  function destructComputed(getter) {
367
367
  const refs = reactive({});
368
- const base = computed(getter);
369
368
  watchEffect(() => {
370
- for (const key in base.value) {
371
- refs[key] = base.value[key];
369
+ const base = getter();
370
+ for (const key in base) {
371
+ refs[key] = base[key];
372
372
  }
373
373
  }, {
374
374
  flush: 'sync'
375
375
  });
376
- return toRefs(refs);
376
+ const obj = {};
377
+ for (const key in refs) {
378
+ obj[key] = toRef(() => refs[key]);
379
+ }
380
+ return obj;
377
381
  }
378
382
 
379
383
  /** Array.includes but value can be any type */
@@ -1673,7 +1677,7 @@ const useIcon = props => {
1673
1677
  const icons = inject$1(IconSymbol);
1674
1678
  if (!icons) throw new Error('Missing Vuetify Icons provide!');
1675
1679
  const iconData = computed(() => {
1676
- const iconAlias = unref(props);
1680
+ const iconAlias = toValue(props);
1677
1681
  if (!iconAlias) return {
1678
1682
  component: VComponentIcon
1679
1683
  };
@@ -2227,7 +2231,7 @@ function createLayout(props) {
2227
2231
  const mainRect = computed(() => {
2228
2232
  return layers.value[layers.value.length - 1].layer;
2229
2233
  });
2230
- const mainStyles = computed(() => {
2234
+ const mainStyles = toRef(() => {
2231
2235
  return {
2232
2236
  '--v-layout-left': convertToUnit(mainRect.value.left),
2233
2237
  '--v-layout-right': convertToUnit(mainRect.value.right),
@@ -2342,10 +2346,10 @@ function createLayout(props) {
2342
2346
  layoutRect,
2343
2347
  rootZIndex
2344
2348
  });
2345
- const layoutClasses = computed(() => ['v-layout', {
2349
+ const layoutClasses = toRef(() => ['v-layout', {
2346
2350
  'v-layout--full-height': props.fullHeight
2347
2351
  }]);
2348
- const layoutStyles = computed(() => ({
2352
+ const layoutStyles = toRef(() => ({
2349
2353
  zIndex: parentLayout ? rootZIndex.value : undefined,
2350
2354
  position: parentLayout ? 'relative' : undefined,
2351
2355
  overflow: parentLayout ? 'hidden' : undefined
@@ -2736,7 +2740,7 @@ function createRtl(i18n, options) {
2736
2740
  return {
2737
2741
  isRtl,
2738
2742
  rtl,
2739
- rtlClasses: computed(() => `v-locale--is-${isRtl.value ? 'rtl' : 'ltr'}`)
2743
+ rtlClasses: toRef(() => `v-locale--is-${isRtl.value ? 'rtl' : 'ltr'}`)
2740
2744
  };
2741
2745
  }
2742
2746
  function provideRtl(locale, rtl, props) {
@@ -2744,7 +2748,7 @@ function provideRtl(locale, rtl, props) {
2744
2748
  return {
2745
2749
  isRtl,
2746
2750
  rtl,
2747
- rtlClasses: computed(() => `v-locale--is-${isRtl.value ? 'rtl' : 'ltr'}`)
2751
+ rtlClasses: toRef(() => `v-locale--is-${isRtl.value ? 'rtl' : 'ltr'}`)
2748
2752
  };
2749
2753
  }
2750
2754
  function useRtl() {
@@ -2968,7 +2972,7 @@ function createTheme(options) {
2968
2972
  }
2969
2973
  return acc;
2970
2974
  });
2971
- const current = computed(() => computedThemes.value[name.value]);
2975
+ const current = toRef(() => computedThemes.value[name.value]);
2972
2976
  const styles = computed(() => {
2973
2977
  const lines = [];
2974
2978
  if (current.value?.dark) {
@@ -3015,7 +3019,7 @@ function createTheme(options) {
3015
3019
  }
3016
3020
  } else {
3017
3021
  if (IN_BROWSER) {
3018
- head.addHeadObjs(computed(getHead));
3022
+ head.addHeadObjs(toRef(getHead));
3019
3023
  watchEffect(() => head.updateDOM());
3020
3024
  } else {
3021
3025
  head.addHeadObjs(getHead());
@@ -3034,7 +3038,7 @@ function createTheme(options) {
3034
3038
  }
3035
3039
  }
3036
3040
  }
3037
- const themeClasses = computed(() => parsedOptions.isDisabled ? undefined : `v-theme--${name.value}`);
3041
+ const themeClasses = toRef(() => parsedOptions.isDisabled ? undefined : `v-theme--${name.value}`);
3038
3042
  return {
3039
3043
  install,
3040
3044
  isDisabled: parsedOptions.isDisabled,
@@ -3054,9 +3058,9 @@ function provideTheme(props) {
3054
3058
  getCurrentInstance('provideTheme');
3055
3059
  const theme = inject$1(ThemeSymbol, null);
3056
3060
  if (!theme) throw new Error('Could not find Vuetify theme injection');
3057
- const name = computed(() => props.theme ?? theme.name.value);
3058
- const current = computed(() => theme.themes.value[name.value]);
3059
- const themeClasses = computed(() => theme.isDisabled ? undefined : `v-theme--${name.value}`);
3061
+ const name = toRef(() => props.theme ?? theme.name.value);
3062
+ const current = toRef(() => theme.themes.value[name.value]);
3063
+ const themeClasses = toRef(() => theme.isDisabled ? undefined : `v-theme--${name.value}`);
3060
3064
  const newTheme = {
3061
3065
  ...theme,
3062
3066
  name,
@@ -3340,6 +3344,7 @@ function ExpandTransitionGenerator () {
3340
3344
  const makeVDialogTransitionProps = propsFactory({
3341
3345
  target: [Object, Array]
3342
3346
  }, 'v-dialog-transition');
3347
+ const saved = new WeakMap();
3343
3348
  const VDialogTransition = genericComponent()({
3344
3349
  name: 'VDialogTransition',
3345
3350
  props: makeVDialogTransitionProps(),
@@ -3356,13 +3361,15 @@ const VDialogTransition = genericComponent()({
3356
3361
  await new Promise(resolve => requestAnimationFrame(resolve));
3357
3362
  await new Promise(resolve => requestAnimationFrame(resolve));
3358
3363
  el.style.visibility = '';
3364
+ const dimensions = getDimensions(props.target, el);
3359
3365
  const {
3360
3366
  x,
3361
3367
  y,
3362
3368
  sx,
3363
3369
  sy,
3364
3370
  speed
3365
- } = getDimensions(props.target, el);
3371
+ } = dimensions;
3372
+ saved.set(el, dimensions);
3366
3373
  const animation = animate(el, [{
3367
3374
  transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`,
3368
3375
  opacity: 0
@@ -3391,13 +3398,19 @@ const VDialogTransition = genericComponent()({
3391
3398
  },
3392
3399
  async onLeave(el, done) {
3393
3400
  await new Promise(resolve => requestAnimationFrame(resolve));
3401
+ let dimensions;
3402
+ if (!Array.isArray(props.target) && !props.target.offsetParent && saved.has(el)) {
3403
+ dimensions = saved.get(el);
3404
+ } else {
3405
+ dimensions = getDimensions(props.target, el);
3406
+ }
3394
3407
  const {
3395
3408
  x,
3396
3409
  y,
3397
3410
  sx,
3398
3411
  sy,
3399
3412
  speed
3400
- } = getDimensions(props.target, el);
3413
+ } = dimensions;
3401
3414
  const animation = animate(el, [{}, {
3402
3415
  transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`,
3403
3416
  opacity: 0
@@ -3617,13 +3630,14 @@ const VResponsive = genericComponent()({
3617
3630
  // Composables
3618
3631
  function useColor(colors) {
3619
3632
  return destructComputed(() => {
3633
+ const _colors = toValue(colors);
3620
3634
  const classes = [];
3621
3635
  const styles = {};
3622
- if (colors.value.background) {
3623
- if (isCssColor(colors.value.background)) {
3624
- styles.backgroundColor = colors.value.background;
3625
- if (!colors.value.text && isParsableColor(colors.value.background)) {
3626
- const backgroundColor = parseColor(colors.value.background);
3636
+ if (_colors.background) {
3637
+ if (isCssColor(_colors.background)) {
3638
+ styles.backgroundColor = _colors.background;
3639
+ if (!_colors.text && isParsableColor(_colors.background)) {
3640
+ const backgroundColor = parseColor(_colors.background);
3627
3641
  if (backgroundColor.a == null || backgroundColor.a === 1) {
3628
3642
  const textColor = getForeground(backgroundColor);
3629
3643
  styles.color = textColor;
@@ -3631,15 +3645,15 @@ function useColor(colors) {
3631
3645
  }
3632
3646
  }
3633
3647
  } else {
3634
- classes.push(`bg-${colors.value.background}`);
3648
+ classes.push(`bg-${_colors.background}`);
3635
3649
  }
3636
3650
  }
3637
- if (colors.value.text) {
3638
- if (isCssColor(colors.value.text)) {
3639
- styles.color = colors.value.text;
3640
- styles.caretColor = colors.value.text;
3651
+ if (_colors.text) {
3652
+ if (isCssColor(_colors.text)) {
3653
+ styles.color = _colors.text;
3654
+ styles.caretColor = _colors.text;
3641
3655
  } else {
3642
- classes.push(`text-${colors.value.text}`);
3656
+ classes.push(`text-${_colors.text}`);
3643
3657
  }
3644
3658
  }
3645
3659
  return {
@@ -3648,27 +3662,25 @@ function useColor(colors) {
3648
3662
  };
3649
3663
  });
3650
3664
  }
3651
- function useTextColor(props, name) {
3652
- const colors = computed(() => ({
3653
- text: isRef(props) ? props.value : name ? props[name] : null
3654
- }));
3665
+ function useTextColor(color) {
3655
3666
  const {
3656
3667
  colorClasses: textColorClasses,
3657
3668
  colorStyles: textColorStyles
3658
- } = useColor(colors);
3669
+ } = useColor(() => ({
3670
+ text: toValue(color)
3671
+ }));
3659
3672
  return {
3660
3673
  textColorClasses,
3661
3674
  textColorStyles
3662
3675
  };
3663
3676
  }
3664
- function useBackgroundColor(props, name) {
3665
- const colors = computed(() => ({
3666
- background: isRef(props) ? props.value : name ? props[name] : null
3667
- }));
3677
+ function useBackgroundColor(color) {
3668
3678
  const {
3669
3679
  colorClasses: backgroundColorClasses,
3670
3680
  colorStyles: backgroundColorStyles
3671
- } = useColor(colors);
3681
+ } = useColor(() => ({
3682
+ background: toValue(color)
3683
+ }));
3672
3684
  return {
3673
3685
  backgroundColorClasses,
3674
3686
  backgroundColorStyles
@@ -3852,7 +3864,7 @@ const VImg = genericComponent()({
3852
3864
  const {
3853
3865
  backgroundColorClasses,
3854
3866
  backgroundColorStyles
3855
- } = useBackgroundColor(toRef(props, 'color'));
3867
+ } = useBackgroundColor(() => props.color);
3856
3868
  const {
3857
3869
  roundedClasses
3858
3870
  } = useRounded(props);
@@ -3959,7 +3971,7 @@ const VImg = genericComponent()({
3959
3971
  };
3960
3972
  poll();
3961
3973
  }
3962
- const containClasses = computed(() => ({
3974
+ const containClasses = toRef(() => ({
3963
3975
  'v-img__img--cover': props.cover,
3964
3976
  'v-img__img--contain': !props.cover
3965
3977
  }));
@@ -4096,16 +4108,13 @@ const makeBorderProps = propsFactory({
4096
4108
  function useBorder(props) {
4097
4109
  let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
4098
4110
  const borderClasses = computed(() => {
4099
- const border = isRef(props) ? props.value : props.border;
4100
- const classes = [];
4111
+ const border = props.border;
4101
4112
  if (border === true || border === '') {
4102
- classes.push(`${name}--border`);
4113
+ return `${name}--border`;
4103
4114
  } else if (typeof border === 'string' || border === 0) {
4104
- for (const value of String(border).split(' ')) {
4105
- classes.push(`border-${value}`);
4106
- }
4115
+ return String(border).split(' ').map(v => `border-${v}`);
4107
4116
  }
4108
- return classes;
4117
+ return [];
4109
4118
  });
4110
4119
  return {
4111
4120
  borderClasses
@@ -4130,12 +4139,10 @@ const makeElevationProps = propsFactory({
4130
4139
  }
4131
4140
  }, 'elevation');
4132
4141
  function useElevation(props) {
4133
- const elevationClasses = computed(() => {
4142
+ const elevationClasses = toRef(() => {
4134
4143
  const elevation = isRef(props) ? props.value : props.elevation;
4135
- const classes = [];
4136
- if (elevation == null) return classes;
4137
- classes.push(`elevation-${elevation}`);
4138
- return classes;
4144
+ if (elevation == null) return [];
4145
+ return [`elevation-${elevation}`];
4139
4146
  });
4140
4147
  return {
4141
4148
  elevationClasses
@@ -4186,7 +4193,7 @@ const VToolbar = genericComponent()({
4186
4193
  const {
4187
4194
  backgroundColorClasses,
4188
4195
  backgroundColorStyles
4189
- } = useBackgroundColor(toRef(props, 'color'));
4196
+ } = useBackgroundColor(() => props.color);
4190
4197
  const {
4191
4198
  borderClasses
4192
4199
  } = useBorder(props);
@@ -4395,7 +4402,7 @@ function useSsrBoot() {
4395
4402
  isBooted.value = true;
4396
4403
  });
4397
4404
  });
4398
- const ssrBootStyles = computed(() => !isBooted.value ? {
4405
+ const ssrBootStyles = toRef(() => !isBooted.value ? {
4399
4406
  transition: 'none !important'
4400
4407
  } : undefined);
4401
4408
  return {
@@ -4463,7 +4470,7 @@ const VAppBar = genericComponent()({
4463
4470
  } = useScroll(props, {
4464
4471
  canScroll
4465
4472
  });
4466
- const canHide = computed(() => scrollBehavior.value.hide || scrollBehavior.value.fullyHide);
4473
+ const canHide = toRef(() => scrollBehavior.value.hide || scrollBehavior.value.fullyHide);
4467
4474
  const isCollapsed = computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0));
4468
4475
  const isFlat = computed(() => props.flat || scrollBehavior.value.fullyHide && !isActive.value || scrollBehavior.value.elevate && (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0));
4469
4476
  const opacity = computed(() => scrollBehavior.value.fadeImage ? scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value : undefined);
@@ -4474,7 +4481,7 @@ const VAppBar = genericComponent()({
4474
4481
  if (!canHide.value) return height + extensionHeight;
4475
4482
  return currentScroll.value < scrollThreshold.value || scrollBehavior.value.fullyHide ? height + extensionHeight : height;
4476
4483
  });
4477
- useToggleScope(computed(() => !!props.scrollBehavior), () => {
4484
+ useToggleScope(() => !!props.scrollBehavior, () => {
4478
4485
  watchEffect(() => {
4479
4486
  if (canHide.value) {
4480
4487
  if (scrollBehavior.value.inverted) {
@@ -4495,11 +4502,11 @@ const VAppBar = genericComponent()({
4495
4502
  } = useLayoutItem({
4496
4503
  id: props.name,
4497
4504
  order: computed(() => parseInt(props.order, 10)),
4498
- position: toRef(props, 'location'),
4505
+ position: toRef(() => props.location),
4499
4506
  layoutSize: height,
4500
4507
  elementSize: shallowRef(undefined),
4501
4508
  active: isActive,
4502
- absolute: toRef(props, 'absolute')
4509
+ absolute: toRef(() => props.absolute)
4503
4510
  });
4504
4511
  useRender(() => {
4505
4512
  const toolbarProps = VToolbar.filterProps(props);
@@ -4542,7 +4549,7 @@ const makeDensityProps = propsFactory({
4542
4549
  }, 'density');
4543
4550
  function useDensity(props) {
4544
4551
  let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
4545
- const densityClasses = computed(() => {
4552
+ const densityClasses = toRef(() => {
4546
4553
  return `${name}--density-${props.density}`;
4547
4554
  });
4548
4555
  return {
@@ -4572,24 +4579,24 @@ const makeVariantProps = propsFactory({
4572
4579
  }, 'variant');
4573
4580
  function useVariant(props) {
4574
4581
  let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
4575
- const variantClasses = computed(() => {
4582
+ const variantClasses = toRef(() => {
4576
4583
  const {
4577
4584
  variant
4578
- } = unref(props);
4585
+ } = toValue(props);
4579
4586
  return `${name}--variant-${variant}`;
4580
4587
  });
4581
4588
  const {
4582
4589
  colorClasses,
4583
4590
  colorStyles
4584
- } = useColor(computed(() => {
4591
+ } = useColor(() => {
4585
4592
  const {
4586
4593
  variant,
4587
4594
  color
4588
- } = unref(props);
4595
+ } = toValue(props);
4589
4596
  return {
4590
4597
  [['elevated', 'flat'].includes(variant) ? 'background' : 'text']: color
4591
4598
  };
4592
- }));
4599
+ });
4593
4600
  return {
4594
4601
  colorClasses,
4595
4602
  colorStyles,
@@ -4634,11 +4641,11 @@ const VBtnGroup = genericComponent()({
4634
4641
  provideDefaults({
4635
4642
  VBtn: {
4636
4643
  height: 'auto',
4637
- baseColor: toRef(props, 'baseColor'),
4638
- color: toRef(props, 'color'),
4639
- density: toRef(props, 'density'),
4644
+ baseColor: toRef(() => props.baseColor),
4645
+ color: toRef(() => props.color),
4646
+ density: toRef(() => props.density),
4640
4647
  flat: true,
4641
- variant: toRef(props, 'variant')
4648
+ variant: toRef(() => props.variant)
4642
4649
  }
4643
4650
  });
4644
4651
  useRender(() => {
@@ -4688,7 +4695,7 @@ function useGroupItem(props, injectKey) {
4688
4695
  if (!required) return group;
4689
4696
  throw new Error(`[Vuetify] Could not find useGroup injection with symbol ${injectKey.description}`);
4690
4697
  }
4691
- const value = toRef(props, 'value');
4698
+ const value = toRef(() => props.value);
4692
4699
  const disabled = computed(() => !!(group.disabled.value || props.disabled));
4693
4700
  group.register({
4694
4701
  id,
@@ -4837,12 +4844,12 @@ function useGroup(props, injectKey) {
4837
4844
  unregister,
4838
4845
  selected,
4839
4846
  select,
4840
- disabled: toRef(props, 'disabled'),
4847
+ disabled: toRef(() => props.disabled),
4841
4848
  prev: () => step(items.length - 1),
4842
4849
  next: () => step(1),
4843
4850
  isSelected: id => selected.value.includes(id),
4844
- selectedClass: computed(() => props.selectedClass),
4845
- items: computed(() => items),
4851
+ selectedClass: toRef(() => props.selectedClass),
4852
+ items: toRef(() => items),
4846
4853
  getItemIndex: value => getItemIndex(items, value)
4847
4854
  };
4848
4855
  provide(injectKey, state);
@@ -4940,14 +4947,15 @@ const makeSizeProps = propsFactory({
4940
4947
  function useSize(props) {
4941
4948
  let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
4942
4949
  return destructComputed(() => {
4950
+ const size = props.size;
4943
4951
  let sizeClasses;
4944
4952
  let sizeStyles;
4945
- if (includes(predefinedSizes, props.size)) {
4946
- sizeClasses = `${name}--size-${props.size}`;
4947
- } else if (props.size) {
4953
+ if (includes(predefinedSizes, size)) {
4954
+ sizeClasses = `${name}--size-${size}`;
4955
+ } else if (size) {
4948
4956
  sizeStyles = {
4949
- width: convertToUnit(props.size),
4950
- height: convertToUnit(props.size)
4957
+ width: convertToUnit(size),
4958
+ height: convertToUnit(size)
4951
4959
  };
4952
4960
  }
4953
4961
  return {
@@ -4979,20 +4987,20 @@ const VIcon = genericComponent()({
4979
4987
  attrs,
4980
4988
  slots
4981
4989
  } = _ref;
4982
- const slotIcon = ref();
4990
+ const slotIcon = shallowRef();
4983
4991
  const {
4984
4992
  themeClasses
4985
4993
  } = useTheme();
4986
4994
  const {
4987
4995
  iconData
4988
- } = useIcon(computed(() => slotIcon.value || props.icon));
4996
+ } = useIcon(() => slotIcon.value || props.icon);
4989
4997
  const {
4990
4998
  sizeClasses
4991
4999
  } = useSize(props);
4992
5000
  const {
4993
5001
  textColorClasses,
4994
5002
  textColorStyles
4995
- } = useTextColor(toRef(props, 'color'));
5003
+ } = useTextColor(() => props.color);
4996
5004
  useRender(() => {
4997
5005
  const slotValue = slots.default?.();
4998
5006
  if (slotValue) {
@@ -5098,11 +5106,11 @@ const VProgressCircular = genericComponent()({
5098
5106
  const {
5099
5107
  textColorClasses,
5100
5108
  textColorStyles
5101
- } = useTextColor(toRef(props, 'color'));
5109
+ } = useTextColor(() => props.color);
5102
5110
  const {
5103
5111
  textColorClasses: underlayColorClasses,
5104
5112
  textColorStyles: underlayColorStyles
5105
- } = useTextColor(toRef(props, 'bgColor'));
5113
+ } = useTextColor(() => props.bgColor);
5106
5114
  const {
5107
5115
  intersectionRef,
5108
5116
  isIntersecting
@@ -5111,15 +5119,15 @@ const VProgressCircular = genericComponent()({
5111
5119
  resizeRef,
5112
5120
  contentRect
5113
5121
  } = useResizeObserver();
5114
- const normalizedValue = computed(() => Math.max(0, Math.min(100, parseFloat(props.modelValue))));
5115
- const width = computed(() => Number(props.width));
5116
- const size = computed(() => {
5122
+ const normalizedValue = toRef(() => Math.max(0, Math.min(100, parseFloat(props.modelValue))));
5123
+ const width = toRef(() => Number(props.width));
5124
+ const size = toRef(() => {
5117
5125
  // Get size from element if size prop value is small, large etc
5118
5126
  return sizeStyles.value ? Number(props.size) : contentRect.value ? contentRect.value.width : Math.max(width.value, 32);
5119
5127
  });
5120
- const diameter = computed(() => MAGIC_RADIUS_CONSTANT / (1 - width.value / size.value) * 2);
5121
- const strokeWidth = computed(() => width.value / size.value * diameter.value);
5122
- const strokeDashOffset = computed(() => convertToUnit((100 - normalizedValue.value) / 100 * CIRCUMFERENCE));
5128
+ const diameter = toRef(() => MAGIC_RADIUS_CONSTANT / (1 - width.value / size.value) * 2);
5129
+ const strokeWidth = toRef(() => width.value / size.value * diameter.value);
5130
+ const strokeDashOffset = toRef(() => convertToUnit((100 - normalizedValue.value) / 100 * CIRCUMFERENCE));
5123
5131
  watchEffect(() => {
5124
5132
  intersectionRef.value = root.value;
5125
5133
  resizeRef.value = root.value;
@@ -5297,19 +5305,19 @@ const VProgressLinear = genericComponent()({
5297
5305
  const {
5298
5306
  textColorClasses,
5299
5307
  textColorStyles
5300
- } = useTextColor(props, 'color');
5308
+ } = useTextColor(() => props.color);
5301
5309
  const {
5302
5310
  backgroundColorClasses,
5303
5311
  backgroundColorStyles
5304
- } = useBackgroundColor(computed(() => props.bgColor || props.color));
5312
+ } = useBackgroundColor(() => props.bgColor || props.color);
5305
5313
  const {
5306
5314
  backgroundColorClasses: bufferColorClasses,
5307
5315
  backgroundColorStyles: bufferColorStyles
5308
- } = useBackgroundColor(computed(() => props.bufferColor || props.bgColor || props.color));
5316
+ } = useBackgroundColor(() => props.bufferColor || props.bgColor || props.color);
5309
5317
  const {
5310
5318
  backgroundColorClasses: barColorClasses,
5311
5319
  backgroundColorStyles: barColorStyles
5312
- } = useBackgroundColor(props, 'color');
5320
+ } = useBackgroundColor(() => props.color);
5313
5321
  const {
5314
5322
  roundedClasses
5315
5323
  } = useRounded(props);
@@ -5416,7 +5424,7 @@ const makeLoaderProps = propsFactory({
5416
5424
  }, 'loader');
5417
5425
  function useLoader(props) {
5418
5426
  let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
5419
- const loaderClasses = computed(() => ({
5427
+ const loaderClasses = toRef(() => ({
5420
5428
  [`${name}--loading`]: props.loading
5421
5429
  }));
5422
5430
  return {
@@ -5455,7 +5463,7 @@ const makePositionProps = propsFactory({
5455
5463
  }, 'position');
5456
5464
  function usePosition(props) {
5457
5465
  let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
5458
- const positionClasses = computed(() => {
5466
+ const positionClasses = toRef(() => {
5459
5467
  return props.position ? `${name}--${props.position}` : undefined;
5460
5468
  });
5461
5469
  return {
@@ -5476,12 +5484,12 @@ function useRouter() {
5476
5484
  }
5477
5485
  function useLink(props, attrs) {
5478
5486
  const RouterLink = resolveDynamicComponent('RouterLink');
5479
- const isLink = computed(() => !!(props.href || props.to));
5487
+ const isLink = toRef(() => !!(props.href || props.to));
5480
5488
  const isClickable = computed(() => {
5481
5489
  return isLink?.value || hasEvent(attrs, 'click') || hasEvent(props, 'click');
5482
5490
  });
5483
5491
  if (typeof RouterLink === 'string' || !('useLink' in RouterLink)) {
5484
- const href = toRef(props, 'href');
5492
+ const href = toRef(() => props.href);
5485
5493
  return {
5486
5494
  isLink,
5487
5495
  isClickable,
@@ -5491,12 +5499,12 @@ function useLink(props, attrs) {
5491
5499
  })
5492
5500
  };
5493
5501
  }
5502
+
5494
5503
  // vue-router useLink `to` prop needs to be reactive and useLink will crash if undefined
5495
- const linkProps = computed(() => ({
5496
- ...props,
5497
- to: toRef(() => props.to || '')
5498
- }));
5499
- const routerLink = RouterLink.useLink(linkProps.value);
5504
+ const routerLink = RouterLink.useLink({
5505
+ to: toRef(() => props.to || ''),
5506
+ replace: toRef(() => props.replace)
5507
+ });
5500
5508
  // Actual link needs to be undefined when to prop is not used
5501
5509
  const link = computed(() => props.to ? routerLink : undefined);
5502
5510
  const route = useRoute();
@@ -5516,7 +5524,7 @@ function useLink(props, attrs) {
5516
5524
  href,
5517
5525
  linkProps: reactive({
5518
5526
  href,
5519
- 'aria-current': computed(() => isActive.value ? 'page' : undefined)
5527
+ 'aria-current': toRef(() => isActive.value ? 'page' : undefined)
5520
5528
  })
5521
5529
  };
5522
5530
  }
@@ -5965,7 +5973,7 @@ const VBtn = genericComponent()({
5965
5973
  }
5966
5974
  return group?.isSelected.value;
5967
5975
  });
5968
- const color = computed(() => isActive.value ? props.activeColor ?? props.color : props.color);
5976
+ const color = toRef(() => isActive.value ? props.activeColor ?? props.color : props.color);
5969
5977
  const variantProps = computed(() => {
5970
5978
  const showColor = group?.isSelected.value && (!link.isLink.value || link.isActive?.value) || !group || link.isActive?.value;
5971
5979
  return {
@@ -5979,7 +5987,7 @@ const VBtn = genericComponent()({
5979
5987
  variantClasses
5980
5988
  } = useVariant(variantProps);
5981
5989
  const isDisabled = computed(() => group?.disabled.value || props.disabled);
5982
- const isElevated = computed(() => {
5990
+ const isElevated = toRef(() => {
5983
5991
  return props.variant === 'elevated' && !(props.disabled || props.flat || props.border);
5984
5992
  });
5985
5993
  const valueAttr = computed(() => {
@@ -6182,15 +6190,11 @@ const VAlert = genericComponent()({
6182
6190
  slots
6183
6191
  } = _ref;
6184
6192
  const isActive = useProxiedModel(props, 'modelValue');
6185
- const icon = computed(() => {
6193
+ const icon = toRef(() => {
6186
6194
  if (props.icon === false) return undefined;
6187
6195
  if (!props.type) return props.icon;
6188
6196
  return props.icon ?? `$${props.type}`;
6189
6197
  });
6190
- const variantProps = computed(() => ({
6191
- color: props.color ?? props.type,
6192
- variant: props.variant
6193
- }));
6194
6198
  const {
6195
6199
  themeClasses
6196
6200
  } = provideTheme(props);
@@ -6198,7 +6202,10 @@ const VAlert = genericComponent()({
6198
6202
  colorClasses,
6199
6203
  colorStyles,
6200
6204
  variantClasses
6201
- } = useVariant(variantProps);
6205
+ } = useVariant(() => ({
6206
+ color: props.color ?? props.type,
6207
+ variant: props.variant
6208
+ }));
6202
6209
  const {
6203
6210
  densityClasses
6204
6211
  } = useDensity(props);
@@ -6220,11 +6227,11 @@ const VAlert = genericComponent()({
6220
6227
  const {
6221
6228
  textColorClasses,
6222
6229
  textColorStyles
6223
- } = useTextColor(toRef(props, 'borderColor'));
6230
+ } = useTextColor(() => props.borderColor);
6224
6231
  const {
6225
6232
  t
6226
6233
  } = useLocale();
6227
- const closeProps = computed(() => ({
6234
+ const closeProps = toRef(() => ({
6228
6235
  'aria-label': t(props.closeLabel),
6229
6236
  onClick(e) {
6230
6237
  isActive.value = false;
@@ -6461,8 +6468,8 @@ const VSelectionControlGroup = genericComponent()({
6461
6468
  } = _ref;
6462
6469
  const modelValue = useProxiedModel(props, 'modelValue');
6463
6470
  const uid = useId();
6464
- const id = computed(() => props.id || `v-selection-control-group-${uid}`);
6465
- const name = computed(() => props.name || id.value);
6471
+ const id = toRef(() => props.id || `v-selection-control-group-${uid}`);
6472
+ const name = toRef(() => props.name || id.value);
6466
6473
  const updateHandlers = new Set();
6467
6474
  provide(VSelectionControlGroupSymbol, {
6468
6475
  modelValue,
@@ -6478,20 +6485,20 @@ const VSelectionControlGroup = genericComponent()({
6478
6485
  });
6479
6486
  provideDefaults({
6480
6487
  [props.defaultsTarget]: {
6481
- color: toRef(props, 'color'),
6482
- disabled: toRef(props, 'disabled'),
6483
- density: toRef(props, 'density'),
6484
- error: toRef(props, 'error'),
6485
- inline: toRef(props, 'inline'),
6488
+ color: toRef(() => props.color),
6489
+ disabled: toRef(() => props.disabled),
6490
+ density: toRef(() => props.density),
6491
+ error: toRef(() => props.error),
6492
+ inline: toRef(() => props.inline),
6486
6493
  modelValue,
6487
- multiple: computed(() => !!props.multiple || props.multiple == null && Array.isArray(modelValue.value)),
6494
+ multiple: toRef(() => !!props.multiple || props.multiple == null && Array.isArray(modelValue.value)),
6488
6495
  name,
6489
- falseIcon: toRef(props, 'falseIcon'),
6490
- trueIcon: toRef(props, 'trueIcon'),
6491
- readonly: toRef(props, 'readonly'),
6492
- ripple: toRef(props, 'ripple'),
6493
- type: toRef(props, 'type'),
6494
- valueComparator: toRef(props, 'valueComparator')
6496
+ falseIcon: toRef(() => props.falseIcon),
6497
+ trueIcon: toRef(() => props.trueIcon),
6498
+ readonly: toRef(() => props.readonly),
6499
+ ripple: toRef(() => props.ripple),
6500
+ type: toRef(() => props.type),
6501
+ valueComparator: toRef(() => props.valueComparator)
6495
6502
  }
6496
6503
  });
6497
6504
  useRender(() => createVNode("div", {
@@ -6547,16 +6554,16 @@ function useSelectionControl(props) {
6547
6554
  const {
6548
6555
  textColorClasses,
6549
6556
  textColorStyles
6550
- } = useTextColor(computed(() => {
6557
+ } = useTextColor(() => {
6551
6558
  if (props.error || props.disabled) return undefined;
6552
6559
  return model.value ? props.color : props.baseColor;
6553
- }));
6560
+ });
6554
6561
  const {
6555
6562
  backgroundColorClasses,
6556
6563
  backgroundColorStyles
6557
- } = useBackgroundColor(computed(() => {
6564
+ } = useBackgroundColor(() => {
6558
6565
  return model.value && !props.error && !props.disabled ? props.color : props.baseColor;
6559
- }));
6566
+ });
6560
6567
  const icon = computed(() => model.value ? props.trueIcon : props.falseIcon);
6561
6568
  return {
6562
6569
  group,
@@ -6601,8 +6608,8 @@ const VSelectionControl = genericComponent()({
6601
6608
  const isFocused = shallowRef(false);
6602
6609
  const isFocusVisible = shallowRef(false);
6603
6610
  const input = ref();
6604
- const id = computed(() => props.id || `input-${uid}`);
6605
- const isInteractive = computed(() => !props.disabled && !props.readonly);
6611
+ const id = toRef(() => props.id || `input-${uid}`);
6612
+ const isInteractive = toRef(() => !props.disabled && !props.readonly);
6606
6613
  group?.onForceUpdate(() => {
6607
6614
  if (input.value) {
6608
6615
  input.value.checked = model.value;
@@ -6740,10 +6747,10 @@ const VCheckboxBtn = genericComponent()({
6740
6747
  indeterminate.value = false;
6741
6748
  }
6742
6749
  }
6743
- const falseIcon = computed(() => {
6750
+ const falseIcon = toRef(() => {
6744
6751
  return indeterminate.value ? props.indeterminateIcon : props.falseIcon;
6745
6752
  });
6746
- const trueIcon = computed(() => {
6753
+ const trueIcon = toRef(() => {
6747
6754
  return indeterminate.value ? props.indeterminateIcon : props.trueIcon;
6748
6755
  });
6749
6756
  useRender(() => {
@@ -6831,7 +6838,7 @@ const VMessages = genericComponent()({
6831
6838
  const {
6832
6839
  textColorClasses,
6833
6840
  textColorStyles
6834
- } = useTextColor(computed(() => props.color));
6841
+ } = useTextColor(() => props.color);
6835
6842
  useRender(() => createVNode(MaybeTransition, {
6836
6843
  "transition": props.transition,
6837
6844
  "tag": "div",
@@ -6861,7 +6868,7 @@ const makeFocusProps = propsFactory({
6861
6868
  function useFocus(props) {
6862
6869
  let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
6863
6870
  const isFocused = useProxiedModel(props, 'focused');
6864
- const focusClasses = computed(() => {
6871
+ const focusClasses = toRef(() => {
6865
6872
  return {
6866
6873
  [`${name}--focused`]: isFocused.value
6867
6874
  };
@@ -6900,8 +6907,8 @@ const makeFormProps = propsFactory({
6900
6907
  }, 'form');
6901
6908
  function createForm(props) {
6902
6909
  const model = useProxiedModel(props, 'modelValue');
6903
- const isDisabled = computed(() => props.disabled);
6904
- const isReadonly = computed(() => props.readonly);
6910
+ const isDisabled = toRef(() => props.disabled);
6911
+ const isReadonly = toRef(() => props.readonly);
6905
6912
  const isValidating = shallowRef(false);
6906
6913
  const items = ref([]);
6907
6914
  const errors = ref([]);
@@ -6991,7 +6998,7 @@ function createForm(props) {
6991
6998
  isValidating,
6992
6999
  isValid: model,
6993
7000
  items,
6994
- validateOn: toRef(props, 'validateOn')
7001
+ validateOn: toRef(() => props.validateOn)
6995
7002
  });
6996
7003
  return {
6997
7004
  errors,
@@ -7172,11 +7179,6 @@ function useValidation(props) {
7172
7179
  }
7173
7180
  async function validate() {
7174
7181
  let silent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
7175
- if (props.disabled || props.readonly) {
7176
- internalErrorMessages.value = [];
7177
- isValidating.value = false;
7178
- return internalErrorMessages.value;
7179
- }
7180
7182
  const results = [];
7181
7183
  isValidating.value = true;
7182
7184
  for (const rule of props.rules) {
@@ -7306,10 +7308,10 @@ const VInput = genericComponent()({
7306
7308
  resetValidation,
7307
7309
  validate
7308
7310
  }));
7309
- const color = computed(() => {
7311
+ const color = toRef(() => {
7310
7312
  return props.error || props.disabled ? undefined : props.focused ? props.color : props.baseColor;
7311
7313
  });
7312
- const iconColor = computed(() => {
7314
+ const iconColor = toRef(() => {
7313
7315
  if (!props.iconColor) return undefined;
7314
7316
  return props.iconColor === true ? color.value : props.iconColor;
7315
7317
  });
@@ -7399,7 +7401,6 @@ const VCheckbox = genericComponent()({
7399
7401
  blur
7400
7402
  } = useFocus(props);
7401
7403
  const uid = useId();
7402
- const id = computed(() => props.id || `checkbox-${uid}`);
7403
7404
  useRender(() => {
7404
7405
  const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
7405
7406
  const inputProps = VInput.filterProps(props);
@@ -7409,7 +7410,7 @@ const VCheckbox = genericComponent()({
7409
7410
  }, rootAttrs, inputProps, {
7410
7411
  "modelValue": model.value,
7411
7412
  "onUpdate:modelValue": $event => model.value = $event,
7412
- "id": id.value,
7413
+ "id": props.id || `checkbox-${uid}`,
7413
7414
  "focused": isFocused.value,
7414
7415
  "style": props.style
7415
7416
  }), {
@@ -7593,7 +7594,7 @@ function useDisplay() {
7593
7594
  return false;
7594
7595
  }
7595
7596
  });
7596
- const displayClasses = computed(() => {
7597
+ const displayClasses = toRef(() => {
7597
7598
  if (!name) return {};
7598
7599
  return {
7599
7600
  [`${name}--mobile`]: mobile.value
@@ -7708,7 +7709,7 @@ function useGoTo() {
7708
7709
  const goTo = {
7709
7710
  ...goToInstance,
7710
7711
  // can be set via VLocaleProvider
7711
- rtl: computed(() => goToInstance.rtl.value || isRtl.value)
7712
+ rtl: toRef(() => goToInstance.rtl.value || isRtl.value)
7712
7713
  };
7713
7714
  async function go(target, options) {
7714
7715
  return scrollTo(target, mergeDeep(_options, options), false, goTo);
@@ -8200,11 +8201,11 @@ const VChipGroup = genericComponent()({
8200
8201
  } = useGroup(props, VChipGroupSymbol);
8201
8202
  provideDefaults({
8202
8203
  VChip: {
8203
- baseColor: toRef(props, 'baseColor'),
8204
- color: toRef(props, 'color'),
8205
- disabled: toRef(props, 'disabled'),
8206
- filter: toRef(props, 'filter'),
8207
- variant: toRef(props, 'variant')
8204
+ baseColor: toRef(() => props.baseColor),
8205
+ color: toRef(() => props.color),
8206
+ disabled: toRef(() => props.disabled),
8207
+ filter: toRef(() => props.filter),
8208
+ variant: toRef(() => props.variant)
8208
8209
  }
8209
8210
  });
8210
8211
  useRender(() => {
@@ -8330,9 +8331,9 @@ const VChip = genericComponent()({
8330
8331
  const isActive = useProxiedModel(props, 'modelValue');
8331
8332
  const group = useGroupItem(props, VChipGroupSymbol, false);
8332
8333
  const link = useLink(props, attrs);
8333
- const isLink = computed(() => props.link !== false && link.isLink.value);
8334
+ const isLink = toRef(() => props.link !== false && link.isLink.value);
8334
8335
  const isClickable = computed(() => !props.disabled && props.link !== false && (!!group || props.link || link.isClickable.value));
8335
- const closeProps = computed(() => ({
8336
+ const closeProps = toRef(() => ({
8336
8337
  'aria-label': t(props.closeLabel),
8337
8338
  onClick(e) {
8338
8339
  e.preventDefault();
@@ -8341,18 +8342,17 @@ const VChip = genericComponent()({
8341
8342
  emit('click:close', e);
8342
8343
  }
8343
8344
  }));
8344
- const variantProps = computed(() => {
8345
+ const {
8346
+ colorClasses,
8347
+ colorStyles,
8348
+ variantClasses
8349
+ } = useVariant(() => {
8345
8350
  const showColor = !group || group.isSelected.value;
8346
8351
  return {
8347
8352
  color: showColor ? props.color ?? props.baseColor : props.baseColor,
8348
8353
  variant: props.variant
8349
8354
  };
8350
8355
  });
8351
- const {
8352
- colorClasses,
8353
- colorStyles,
8354
- variantClasses
8355
- } = useVariant(variantProps);
8356
8356
  function onClick(e) {
8357
8357
  emit('click', e);
8358
8358
  if (!isClickable.value) return;
@@ -9019,8 +9019,8 @@ const useNested = props => {
9019
9019
  id: shallowRef(),
9020
9020
  root: {
9021
9021
  opened,
9022
- activatable: toRef(props, 'activatable'),
9023
- selectable: toRef(props, 'selectable'),
9022
+ activatable: toRef(() => props.activatable),
9023
+ selectable: toRef(() => props.selectable),
9024
9024
  activated,
9025
9025
  selected,
9026
9026
  selectedValues: computed(() => {
@@ -9149,7 +9149,7 @@ const useNested = props => {
9149
9149
  const useNestedItem = (id, isGroup) => {
9150
9150
  const parent = inject$1(VNestedSymbol, emptyNested);
9151
9151
  const uidSymbol = Symbol('nested item');
9152
- const computedId = computed(() => id.value !== undefined ? id.value : uidSymbol);
9152
+ const computedId = computed(() => toValue(id) ?? uidSymbol);
9153
9153
  const item = {
9154
9154
  ...parent,
9155
9155
  id: computedId,
@@ -9225,7 +9225,7 @@ const VListGroup = genericComponent()({
9225
9225
  isOpen,
9226
9226
  open,
9227
9227
  id: _id
9228
- } = useNestedItem(toRef(props, 'value'), true);
9228
+ } = useNestedItem(() => props.value, true);
9229
9229
  const id = computed(() => `v-list-group--id-${String(_id.value)}`);
9230
9230
  const list = useList();
9231
9231
  const {
@@ -9399,12 +9399,12 @@ const VListItem = genericComponent()({
9399
9399
  } = useNestedItem(id, false);
9400
9400
  const list = useList();
9401
9401
  const isActive = computed(() => props.active !== false && (props.active || link.isActive?.value || (root.activatable.value ? isActivated.value : isSelected.value)));
9402
- const isLink = computed(() => props.link !== false && link.isLink.value);
9402
+ const isLink = toRef(() => props.link !== false && link.isLink.value);
9403
9403
  const isSelectable = computed(() => !!list && (root.selectable.value || root.activatable.value || props.value != null));
9404
9404
  const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || isSelectable.value));
9405
- const roundedProps = computed(() => props.rounded || props.nav);
9406
- const color = computed(() => props.color ?? props.activeColor);
9407
- const variantProps = computed(() => ({
9405
+ const roundedProps = toRef(() => props.rounded || props.nav);
9406
+ const color = toRef(() => props.color ?? props.activeColor);
9407
+ const variantProps = toRef(() => ({
9408
9408
  color: isActive.value ? color.value ?? props.baseColor : props.baseColor,
9409
9409
  variant: props.variant
9410
9410
  }));
@@ -9447,7 +9447,7 @@ const VListItem = genericComponent()({
9447
9447
  const {
9448
9448
  roundedClasses
9449
9449
  } = useRounded(roundedProps);
9450
- const lineClasses = computed(() => props.lines ? `v-list-item--${props.lines}-line` : undefined);
9450
+ const lineClasses = toRef(() => props.lines ? `v-list-item--${props.lines}-line` : undefined);
9451
9451
  const slotProps = computed(() => ({
9452
9452
  isActive: isActive.value,
9453
9453
  select,
@@ -9617,7 +9617,7 @@ const VListSubheader = genericComponent()({
9617
9617
  const {
9618
9618
  textColorClasses,
9619
9619
  textColorStyles
9620
- } = useTextColor(toRef(props, 'color'));
9620
+ } = useTextColor(() => props.color);
9621
9621
  useRender(() => {
9622
9622
  const hasText = !!(slots.default || props.title);
9623
9623
  return createVNode(props.tag, {
@@ -9662,7 +9662,7 @@ const VDivider = genericComponent()({
9662
9662
  const {
9663
9663
  textColorClasses,
9664
9664
  textColorStyles
9665
- } = useTextColor(toRef(props, 'color'));
9665
+ } = useTextColor(() => props.color);
9666
9666
  const dividerStyles = computed(() => {
9667
9667
  const styles = {};
9668
9668
  if (props.length) {
@@ -10024,7 +10024,7 @@ const VList = genericComponent()({
10024
10024
  const {
10025
10025
  backgroundColorClasses,
10026
10026
  backgroundColorStyles
10027
- } = useBackgroundColor(toRef(props, 'bgColor'));
10027
+ } = useBackgroundColor(() => props.bgColor);
10028
10028
  const {
10029
10029
  borderClasses
10030
10030
  } = useBorder(props);
@@ -10047,30 +10047,30 @@ const VList = genericComponent()({
10047
10047
  select,
10048
10048
  getPath
10049
10049
  } = useNested(props);
10050
- const lineClasses = computed(() => props.lines ? `v-list--${props.lines}-line` : undefined);
10051
- const activeColor = toRef(props, 'activeColor');
10052
- const baseColor = toRef(props, 'baseColor');
10053
- const color = toRef(props, 'color');
10050
+ const lineClasses = toRef(() => props.lines ? `v-list--${props.lines}-line` : undefined);
10051
+ const activeColor = toRef(() => props.activeColor);
10052
+ const baseColor = toRef(() => props.baseColor);
10053
+ const color = toRef(() => props.color);
10054
10054
  createList();
10055
10055
  provideDefaults({
10056
10056
  VListGroup: {
10057
10057
  activeColor,
10058
10058
  baseColor,
10059
10059
  color,
10060
- expandIcon: toRef(props, 'expandIcon'),
10061
- collapseIcon: toRef(props, 'collapseIcon')
10060
+ expandIcon: toRef(() => props.expandIcon),
10061
+ collapseIcon: toRef(() => props.collapseIcon)
10062
10062
  },
10063
10063
  VListItem: {
10064
- activeClass: toRef(props, 'activeClass'),
10064
+ activeClass: toRef(() => props.activeClass),
10065
10065
  activeColor,
10066
10066
  baseColor,
10067
10067
  color,
10068
- density: toRef(props, 'density'),
10069
- disabled: toRef(props, 'disabled'),
10070
- lines: toRef(props, 'lines'),
10071
- nav: toRef(props, 'nav'),
10072
- slim: toRef(props, 'slim'),
10073
- variant: toRef(props, 'variant')
10068
+ density: toRef(() => props.density),
10069
+ disabled: toRef(() => props.disabled),
10070
+ lines: toRef(() => props.lines),
10071
+ nav: toRef(() => props.nav),
10072
+ slim: toRef(() => props.slim),
10073
+ variant: toRef(() => props.variant)
10074
10074
  }
10075
10075
  });
10076
10076
  const isFocused = shallowRef(false);
@@ -10398,13 +10398,22 @@ function connectedLocationStrategy(data, props, contentStyles) {
10398
10398
  onScopeDispose(() => {
10399
10399
  observer.disconnect();
10400
10400
  });
10401
+ let targetBox = new Box({
10402
+ x: 0,
10403
+ y: 0,
10404
+ width: 0,
10405
+ height: 0
10406
+ });
10401
10407
 
10402
10408
  // eslint-disable-next-line max-statements
10403
10409
  function updateLocation() {
10404
10410
  observe = false;
10405
10411
  requestAnimationFrame(() => observe = true);
10406
10412
  if (!data.target.value || !data.contentEl.value) return;
10407
- const targetBox = getTargetBox(data.target.value);
10413
+ if (Array.isArray(data.target.value) || data.target.value.offsetParent) {
10414
+ targetBox = getTargetBox(data.target.value);
10415
+ } // Otherwise target element is hidden, use last known value
10416
+
10408
10417
  const contentBox = getIntrinsicSize(data.contentEl.value, data.isRtl.value);
10409
10418
  const scrollParents = getScrollParents(data.contentEl.value);
10410
10419
  const viewportMargin = 12;
@@ -11114,7 +11123,7 @@ const makeLazyProps = propsFactory({
11114
11123
  }, 'lazy');
11115
11124
  function useLazy(props, active) {
11116
11125
  const isBooted = shallowRef(false);
11117
- const hasContent = computed(() => isBooted.value || props.eager || active.value);
11126
+ const hasContent = toRef(() => isBooted.value || props.eager || active.value);
11118
11127
  watch(active, () => isBooted.value = true);
11119
11128
  function onAfterLeave() {
11120
11129
  if (!props.eager) isBooted.value = false;
@@ -11151,10 +11160,10 @@ function useStack(isActive, zIndex, disableGlobalStack) {
11151
11160
  activeChildren: new Set()
11152
11161
  });
11153
11162
  provide(StackSymbol, stack);
11154
- const _zIndex = shallowRef(Number(zIndex.value));
11163
+ const _zIndex = shallowRef(Number(toValue(zIndex)));
11155
11164
  useToggleScope(isActive, () => {
11156
11165
  const lastZIndex = globalStack.at(-1)?.[1];
11157
- _zIndex.value = lastZIndex ? lastZIndex + 10 : Number(zIndex.value);
11166
+ _zIndex.value = lastZIndex ? lastZIndex + 10 : Number(toValue(zIndex));
11158
11167
  if (createStackEntry) {
11159
11168
  globalStack.push([vm.uid, _zIndex.value]);
11160
11169
  }
@@ -11174,11 +11183,11 @@ function useStack(isActive, zIndex, disableGlobalStack) {
11174
11183
  setTimeout(() => globalTop.value = _isTop);
11175
11184
  });
11176
11185
  }
11177
- const localTop = computed(() => !stack.activeChildren.size);
11186
+ const localTop = toRef(() => !stack.activeChildren.size);
11178
11187
  return {
11179
11188
  globalTop: readonly(globalTop),
11180
11189
  localTop,
11181
- stackStyles: computed(() => ({
11190
+ stackStyles: toRef(() => ({
11182
11191
  zIndex: _zIndex.value
11183
11192
  }))
11184
11193
  };
@@ -11395,14 +11404,14 @@ const VOverlay = genericComponent()({
11395
11404
  hasContent,
11396
11405
  onAfterLeave: _onAfterLeave
11397
11406
  } = useLazy(props, isActive);
11398
- const scrimColor = useBackgroundColor(computed(() => {
11407
+ const scrimColor = useBackgroundColor(() => {
11399
11408
  return typeof props.scrim === 'string' ? props.scrim : null;
11400
- }));
11409
+ });
11401
11410
  const {
11402
11411
  globalTop,
11403
11412
  localTop,
11404
11413
  stackStyles
11405
- } = useStack(isActive, toRef(props, 'zIndex'), props._disableGlobalStack);
11414
+ } = useStack(isActive, () => props.zIndex, props._disableGlobalStack);
11406
11415
  const {
11407
11416
  activatorEl,
11408
11417
  activatorRef,
@@ -11728,7 +11737,7 @@ const VMenu = genericComponent()({
11728
11737
  isRtl
11729
11738
  } = useRtl();
11730
11739
  const uid = useId();
11731
- const id = computed(() => props.id || `v-menu-${uid}`);
11740
+ const id = toRef(() => props.id || `v-menu-${uid}`);
11732
11741
  const overlay = ref();
11733
11742
  const parent = inject$1(VMenuSymbol, null);
11734
11743
  const openChildren = shallowRef(new Set());
@@ -11896,7 +11905,7 @@ const VCounter = genericComponent()({
11896
11905
  let {
11897
11906
  slots
11898
11907
  } = _ref;
11899
- const counter = computed(() => {
11908
+ const counter = toRef(() => {
11900
11909
  return props.max ? `${props.value} / ${props.max}` : String(props.value);
11901
11910
  });
11902
11911
  useRender(() => createVNode(MaybeTransition, {
@@ -12023,12 +12032,12 @@ const VField = genericComponent()({
12023
12032
  const {
12024
12033
  rtlClasses
12025
12034
  } = useRtl();
12026
- const isActive = computed(() => props.dirty || props.active);
12027
- const hasLabel = computed(() => !!(props.label || slots.label));
12028
- const hasFloatingLabel = computed(() => !props.singleLine && hasLabel.value);
12035
+ const isActive = toRef(() => props.dirty || props.active);
12036
+ const hasLabel = toRef(() => !!(props.label || slots.label));
12037
+ const hasFloatingLabel = toRef(() => !props.singleLine && hasLabel.value);
12029
12038
  const uid = useId();
12030
12039
  const id = computed(() => props.id || `input-${uid}`);
12031
- const messagesId = computed(() => `${id.value}-messages`);
12040
+ const messagesId = toRef(() => `${id.value}-messages`);
12032
12041
  const labelRef = ref();
12033
12042
  const floatingLabelRef = ref();
12034
12043
  const controlRef = ref();
@@ -12043,7 +12052,7 @@ const VField = genericComponent()({
12043
12052
  const {
12044
12053
  backgroundColorClasses,
12045
12054
  backgroundColorStyles
12046
- } = useBackgroundColor(toRef(props, 'bgColor'));
12055
+ } = useBackgroundColor(() => props.bgColor);
12047
12056
  const {
12048
12057
  textColorClasses,
12049
12058
  textColorStyles
@@ -12770,7 +12779,7 @@ const VVirtualScroll = genericComponent()({
12770
12779
  paddingTop,
12771
12780
  paddingBottom,
12772
12781
  computedItems
12773
- } = useVirtual(props, toRef(props, 'items'));
12782
+ } = useVirtual(props, toRef(() => props.items));
12774
12783
  useToggleScope(() => props.renderless, () => {
12775
12784
  function handleListeners() {
12776
12785
  let add = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
@@ -13007,7 +13016,7 @@ const VSelect = genericComponent()({
13007
13016
  _menu.value = v;
13008
13017
  }
13009
13018
  });
13010
- const label = computed(() => menu.value ? props.closeText : props.openText);
13019
+ const label = toRef(() => menu.value ? props.closeText : props.openText);
13011
13020
  const computedMenuProps = computed(() => {
13012
13021
  return {
13013
13022
  ...props.menuProps,
@@ -13509,7 +13518,6 @@ const VAutocomplete = genericComponent()({
13509
13518
  const vMenuRef = ref();
13510
13519
  const vVirtualScrollRef = ref();
13511
13520
  const selectionIndex = shallowRef(-1);
13512
- const color = computed(() => vTextFieldRef.value?.color);
13513
13521
  const {
13514
13522
  items,
13515
13523
  transformIn,
@@ -13518,7 +13526,7 @@ const VAutocomplete = genericComponent()({
13518
13526
  const {
13519
13527
  textColorClasses,
13520
13528
  textColorStyles
13521
- } = useTextColor(color);
13529
+ } = useTextColor(() => vTextFieldRef.value?.color);
13522
13530
  const search = useProxiedModel(props, 'search', '');
13523
13531
  const model = useProxiedModel(props, 'modelValue', [], v => transformIn(v === null ? [null] : wrapInArray(v)), v => {
13524
13532
  const transformed = transformOut(v);
@@ -13967,7 +13975,7 @@ const VBadge = genericComponent()({
13967
13975
  const {
13968
13976
  backgroundColorClasses,
13969
13977
  backgroundColorStyles
13970
- } = useBackgroundColor(toRef(props, 'color'));
13978
+ } = useBackgroundColor(() => props.color);
13971
13979
  const {
13972
13980
  roundedClasses
13973
13981
  } = useRounded(props);
@@ -13977,7 +13985,7 @@ const VBadge = genericComponent()({
13977
13985
  const {
13978
13986
  textColorClasses,
13979
13987
  textColorStyles
13980
- } = useTextColor(toRef(props, 'textColor'));
13988
+ } = useTextColor(() => props.textColor);
13981
13989
  const {
13982
13990
  themeClasses
13983
13991
  } = useTheme();
@@ -14089,7 +14097,7 @@ const VBanner = genericComponent()({
14089
14097
  const {
14090
14098
  backgroundColorClasses,
14091
14099
  backgroundColorStyles
14092
- } = useBackgroundColor(props, 'bgColor');
14100
+ } = useBackgroundColor(() => props.bgColor);
14093
14101
  const {
14094
14102
  borderClasses
14095
14103
  } = useBorder(props);
@@ -14118,8 +14126,8 @@ const VBanner = genericComponent()({
14118
14126
  const {
14119
14127
  themeClasses
14120
14128
  } = provideTheme(props);
14121
- const color = toRef(props, 'color');
14122
- const density = toRef(props, 'density');
14129
+ const color = toRef(() => props.color);
14130
+ const density = toRef(() => props.density);
14123
14131
  provideDefaults({
14124
14132
  VBannerActions: {
14125
14133
  color,
@@ -14228,7 +14236,7 @@ const VBottomNavigation = genericComponent()({
14228
14236
  const {
14229
14237
  backgroundColorClasses,
14230
14238
  backgroundColorStyles
14231
- } = useBackgroundColor(toRef(props, 'bgColor'));
14239
+ } = useBackgroundColor(() => props.bgColor);
14232
14240
  const {
14233
14241
  densityClasses
14234
14242
  } = useDensity(props);
@@ -14248,19 +14256,19 @@ const VBottomNavigation = genericComponent()({
14248
14256
  } = useLayoutItem({
14249
14257
  id: props.name,
14250
14258
  order: computed(() => parseInt(props.order, 10)),
14251
- position: computed(() => 'bottom'),
14252
- layoutSize: computed(() => isActive.value ? height.value : 0),
14259
+ position: toRef(() => 'bottom'),
14260
+ layoutSize: toRef(() => isActive.value ? height.value : 0),
14253
14261
  elementSize: height,
14254
14262
  active: isActive,
14255
- absolute: toRef(props, 'absolute')
14263
+ absolute: toRef(() => props.absolute)
14256
14264
  });
14257
14265
  useGroup(props, VBtnToggleSymbol);
14258
14266
  provideDefaults({
14259
14267
  VBtn: {
14260
- baseColor: toRef(props, 'baseColor'),
14261
- color: toRef(props, 'color'),
14262
- density: toRef(props, 'density'),
14263
- stacked: computed(() => props.mode !== 'horizontal'),
14268
+ baseColor: toRef(() => props.baseColor),
14269
+ color: toRef(() => props.color),
14270
+ density: toRef(() => props.density),
14271
+ stacked: toRef(() => props.mode !== 'horizontal'),
14264
14272
  variant: 'text'
14265
14273
  }
14266
14274
  }, {
@@ -14496,11 +14504,10 @@ const VBreadcrumbsItem = genericComponent()({
14496
14504
  } = _ref;
14497
14505
  const link = useLink(props, attrs);
14498
14506
  const isActive = computed(() => props.active || link.isActive?.value);
14499
- const color = computed(() => isActive.value ? props.activeColor : props.color);
14500
14507
  const {
14501
14508
  textColorClasses,
14502
14509
  textColorStyles
14503
- } = useTextColor(color);
14510
+ } = useTextColor(() => isActive.value ? props.activeColor : props.color);
14504
14511
  useRender(() => {
14505
14512
  return createVNode(props.tag, {
14506
14513
  "class": ['v-breadcrumbs-item', {
@@ -14555,7 +14562,7 @@ const VBreadcrumbs = genericComponent()({
14555
14562
  const {
14556
14563
  backgroundColorClasses,
14557
14564
  backgroundColorStyles
14558
- } = useBackgroundColor(toRef(props, 'bgColor'));
14565
+ } = useBackgroundColor(() => props.bgColor);
14559
14566
  const {
14560
14567
  densityClasses
14561
14568
  } = useDensity(props);
@@ -14564,13 +14571,13 @@ const VBreadcrumbs = genericComponent()({
14564
14571
  } = useRounded(props);
14565
14572
  provideDefaults({
14566
14573
  VBreadcrumbsDivider: {
14567
- divider: toRef(props, 'divider')
14574
+ divider: toRef(() => props.divider)
14568
14575
  },
14569
14576
  VBreadcrumbsItem: {
14570
- activeClass: toRef(props, 'activeClass'),
14571
- activeColor: toRef(props, 'activeColor'),
14572
- color: toRef(props, 'color'),
14573
- disabled: toRef(props, 'disabled')
14577
+ activeClass: toRef(() => props.activeClass),
14578
+ activeColor: toRef(() => props.activeColor),
14579
+ color: toRef(() => props.color),
14580
+ disabled: toRef(() => props.disabled)
14574
14581
  }
14575
14582
  });
14576
14583
  const items = computed(() => props.items.map(item => {
@@ -14893,10 +14900,10 @@ const VCard = genericComponent()({
14893
14900
  roundedClasses
14894
14901
  } = useRounded(props);
14895
14902
  const link = useLink(props, attrs);
14896
- const isLink = computed(() => props.link !== false && link.isLink.value);
14897
- const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value));
14898
14903
  useRender(() => {
14899
- const Tag = isLink.value ? 'a' : props.tag;
14904
+ const isLink = props.link !== false && link.isLink.value;
14905
+ const isClickable = !props.disabled && props.link !== false && (props.link || link.isClickable.value);
14906
+ const Tag = isLink ? 'a' : props.tag;
14900
14907
  const hasTitle = !!(slots.title || props.title != null);
14901
14908
  const hasSubtitle = !!(slots.subtitle || props.subtitle != null);
14902
14909
  const hasHeader = hasTitle || hasSubtitle;
@@ -14910,10 +14917,10 @@ const VCard = genericComponent()({
14910
14917
  'v-card--disabled': props.disabled,
14911
14918
  'v-card--flat': props.flat,
14912
14919
  'v-card--hover': props.hover && !(props.disabled || props.flat),
14913
- 'v-card--link': isClickable.value
14920
+ 'v-card--link': isClickable
14914
14921
  }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, loaderClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value, props.class],
14915
14922
  "style": [colorStyles.value, dimensionStyles.value, locationStyles.value, props.style],
14916
- "onClick": isClickable.value && link.navigate,
14923
+ "onClick": isClickable && link.navigate,
14917
14924
  "tabindex": props.disabled ? -1 : undefined
14918
14925
  }, link.linkProps), {
14919
14926
  default: () => [hasImage && createVNode("div", {
@@ -14958,8 +14965,8 @@ const VCard = genericComponent()({
14958
14965
  default: () => [slots.text?.() ?? props.text]
14959
14966
  }), slots.default?.(), slots.actions && createVNode(VCardActions, null, {
14960
14967
  default: slots.actions
14961
- }), genOverlays(isClickable.value, 'v-card')]
14962
- }), [[resolveDirective("ripple"), isClickable.value && props.ripple]]);
14968
+ }), genOverlays(isClickable, 'v-card')]
14969
+ }), [[resolveDirective("ripple"), isClickable && props.ripple]]);
14963
14970
  });
14964
14971
  return {};
14965
14972
  }
@@ -15172,8 +15179,8 @@ const VWindow = genericComponent()({
15172
15179
  transitionHeight,
15173
15180
  rootRef
15174
15181
  });
15175
- const canMoveBack = computed(() => props.continuous || activeIndex.value !== 0);
15176
- const canMoveForward = computed(() => props.continuous || activeIndex.value !== group.items.value.length - 1);
15182
+ const canMoveBack = toRef(() => props.continuous || activeIndex.value !== 0);
15183
+ const canMoveForward = toRef(() => props.continuous || activeIndex.value !== group.items.value.length - 1);
15177
15184
  function prev() {
15178
15185
  canMoveBack.value && group.prev();
15179
15186
  }
@@ -16075,7 +16082,7 @@ const useSlider = _ref => {
16075
16082
  const {
16076
16083
  isRtl
16077
16084
  } = useRtl();
16078
- const isReversed = toRef(props, 'reverse');
16085
+ const isReversed = toRef(() => props.reverse);
16079
16086
  const vertical = computed(() => props.direction === 'vertical');
16080
16087
  const indexFromEnd = computed(() => vertical.value !== isReversed.value);
16081
16088
  const {
@@ -16089,7 +16096,7 @@ const useSlider = _ref => {
16089
16096
  const tickSize = computed(() => parseInt(props.tickSize, 10));
16090
16097
  const trackSize = computed(() => parseInt(props.trackSize, 10));
16091
16098
  const numTicks = computed(() => (max.value - min.value) / step.value);
16092
- const disabled = toRef(props, 'disabled');
16099
+ const disabled = toRef(() => props.disabled);
16093
16100
  const thumbColor = computed(() => props.error || props.disabled ? undefined : props.thumbColor ?? props.color);
16094
16101
  const trackColor = computed(() => props.error || props.disabled ? undefined : props.trackColor ?? props.color);
16095
16102
  const trackFillColor = computed(() => props.error || props.disabled ? undefined : props.trackFillColor ?? props.color);
@@ -16191,7 +16198,7 @@ const useSlider = _ref => {
16191
16198
  const percentage = (val - min.value) / (max.value - min.value) * 100;
16192
16199
  return clamp(isNaN(percentage) ? 0 : percentage, 0, 100);
16193
16200
  };
16194
- const showTicks = toRef(props, 'showTicks');
16201
+ const showTicks = toRef(() => props.showTicks);
16195
16202
  const parsedTicks = computed(() => {
16196
16203
  if (!showTicks.value) return [];
16197
16204
  if (!props.ticks) {
@@ -16222,11 +16229,11 @@ const useSlider = _ref => {
16222
16229
  }));
16223
16230
  const data = {
16224
16231
  activeThumbRef,
16225
- color: toRef(props, 'color'),
16232
+ color: toRef(() => props.color),
16226
16233
  decimals,
16227
16234
  disabled,
16228
- direction: toRef(props, 'direction'),
16229
- elevation: toRef(props, 'elevation'),
16235
+ direction: toRef(() => props.direction),
16236
+ elevation: toRef(() => props.elevation),
16230
16237
  hasLabels,
16231
16238
  isReversed,
16232
16239
  indexFromEnd,
@@ -16239,16 +16246,16 @@ const useSlider = _ref => {
16239
16246
  parsedTicks,
16240
16247
  parseMouseMove,
16241
16248
  position,
16242
- readonly: toRef(props, 'readonly'),
16243
- rounded: toRef(props, 'rounded'),
16249
+ readonly: toRef(() => props.readonly),
16250
+ rounded: toRef(() => props.rounded),
16244
16251
  roundValue,
16245
16252
  showTicks,
16246
16253
  startOffset,
16247
16254
  step,
16248
16255
  thumbSize,
16249
16256
  thumbColor,
16250
- thumbLabel: toRef(props, 'thumbLabel'),
16251
- ticks: toRef(props, 'ticks'),
16257
+ thumbLabel: toRef(() => props.thumbLabel),
16258
+ ticks: toRef(() => props.ticks),
16252
16259
  tickSize,
16253
16260
  trackColor,
16254
16261
  trackContainerRef,
@@ -17167,7 +17174,7 @@ const VSheet = genericComponent()({
17167
17174
  const {
17168
17175
  backgroundColorClasses,
17169
17176
  backgroundColorStyles
17170
- } = useBackgroundColor(toRef(props, 'color'));
17177
+ } = useBackgroundColor(() => props.color);
17171
17178
  const {
17172
17179
  borderClasses
17173
17180
  } = useBorder(props);
@@ -17214,7 +17221,7 @@ const VPicker = genericComponent()({
17214
17221
  const {
17215
17222
  backgroundColorClasses,
17216
17223
  backgroundColorStyles
17217
- } = useBackgroundColor(toRef(props, 'color'));
17224
+ } = useBackgroundColor(() => props.color);
17218
17225
  useRender(() => {
17219
17226
  const sheetProps = VSheet.filterProps(props);
17220
17227
  const hasTitle = !!(props.title || slots.title);
@@ -18199,7 +18206,6 @@ const VCombobox = genericComponent()({
18199
18206
  const vVirtualScrollRef = ref();
18200
18207
  const selectionIndex = shallowRef(-1);
18201
18208
  let cleared = false;
18202
- const color = computed(() => vTextFieldRef.value?.color);
18203
18209
  const {
18204
18210
  items,
18205
18211
  transformIn,
@@ -18208,7 +18214,7 @@ const VCombobox = genericComponent()({
18208
18214
  const {
18209
18215
  textColorClasses,
18210
18216
  textColorStyles
18211
- } = useTextColor(color);
18217
+ } = useTextColor(() => vTextFieldRef.value?.color);
18212
18218
  const model = useProxiedModel(props, 'modelValue', [], v => transformIn(wrapInArray(v)), v => {
18213
18219
  const transformed = transformOut(v);
18214
18220
  return props.multiple ? transformed : transformed[0] ?? null;
@@ -18263,7 +18269,7 @@ const VCombobox = genericComponent()({
18263
18269
  _menu.value = v;
18264
18270
  }
18265
18271
  });
18266
- const label = computed(() => menu.value ? props.closeText : props.openText);
18272
+ const label = toRef(() => menu.value ? props.closeText : props.openText);
18267
18273
  watch(_search, value => {
18268
18274
  if (cleared) {
18269
18275
  // wait for clear to finish, VTextField sets _search to null
@@ -18769,7 +18775,7 @@ const makeDataTableExpandProps = propsFactory({
18769
18775
  }, 'DataTable-expand');
18770
18776
  const VDataTableExpandedKey = Symbol.for('vuetify:datatable:expanded');
18771
18777
  function provideExpanded(props) {
18772
- const expandOnClick = toRef(props, 'expandOnClick');
18778
+ const expandOnClick = toRef(() => props.expandOnClick);
18773
18779
  const expanded = useProxiedModel(props, 'expanded', props.expanded, v => {
18774
18780
  return new Set(v);
18775
18781
  }, v => {
@@ -18956,23 +18962,23 @@ function useOptions(_ref) {
18956
18962
  search
18957
18963
  } = _ref;
18958
18964
  const vm = getCurrentInstance('VDataTable');
18959
- const options = computed(() => ({
18965
+ const options = () => ({
18960
18966
  page: page.value,
18961
18967
  itemsPerPage: itemsPerPage.value,
18962
18968
  sortBy: sortBy.value,
18963
18969
  groupBy: groupBy.value,
18964
18970
  search: search.value
18965
- }));
18971
+ });
18966
18972
  let oldOptions = null;
18967
- watch(options, () => {
18968
- if (deepEqual(oldOptions, options.value)) return;
18973
+ watch(options, value => {
18974
+ if (deepEqual(oldOptions, value)) return;
18969
18975
 
18970
18976
  // Reset page when searching
18971
- if (oldOptions && oldOptions.search !== options.value.search) {
18977
+ if (oldOptions && oldOptions.search !== value.search) {
18972
18978
  page.value = 1;
18973
18979
  }
18974
- vm.emit('update:options', options.value);
18975
- oldOptions = options.value;
18980
+ vm.emit('update:options', value);
18981
+ oldOptions = value;
18976
18982
  }, {
18977
18983
  deep: true,
18978
18984
  immediate: true
@@ -19253,7 +19259,7 @@ function provideSelection(props, _ref9) {
19253
19259
  });
19254
19260
  return !!items.length && isSelected(items);
19255
19261
  });
19256
- const showSelectAll = computed(() => selectStrategy.value.showSelectAll);
19262
+ const showSelectAll = toRef(() => selectStrategy.value.showSelectAll);
19257
19263
  const data = {
19258
19264
  toggleSelect,
19259
19265
  select,
@@ -19291,8 +19297,8 @@ const makeDataTableSortProps = propsFactory({
19291
19297
  const VDataTableSortSymbol = Symbol.for('vuetify:data-table-sort');
19292
19298
  function createSort(props) {
19293
19299
  const sortBy = useProxiedModel(props, 'sortBy');
19294
- const mustSort = toRef(props, 'mustSort');
19295
- const multiSort = toRef(props, 'multiSort');
19300
+ const mustSort = toRef(() => props.mustSort);
19301
+ const multiSort = toRef(() => props.multiSort);
19296
19302
  return {
19297
19303
  sortBy,
19298
19304
  mustSort,
@@ -19510,7 +19516,7 @@ const VDataIterator = genericComponent()({
19510
19516
  slots
19511
19517
  } = _ref;
19512
19518
  const groupBy = useProxiedModel(props, 'groupBy');
19513
- const search = toRef(props, 'search');
19519
+ const search = toRef(() => props.search);
19514
19520
  const {
19515
19521
  items
19516
19522
  } = useDataIteratorItems(props);
@@ -19554,7 +19560,7 @@ const VDataIterator = genericComponent()({
19554
19560
  const {
19555
19561
  flatItems
19556
19562
  } = useGroupedItems(sortedItems, groupBy, opened);
19557
- const itemsLength = computed(() => flatItems.value.length);
19563
+ const itemsLength = toRef(() => flatItems.value.length);
19558
19564
  const {
19559
19565
  startIndex,
19560
19566
  stopIndex,
@@ -19834,13 +19840,13 @@ const VPagination = genericComponent()({
19834
19840
  } = useRefs();
19835
19841
  provideDefaults({
19836
19842
  VPaginationBtn: {
19837
- color: toRef(props, 'color'),
19838
- border: toRef(props, 'border'),
19839
- density: toRef(props, 'density'),
19840
- size: toRef(props, 'size'),
19841
- variant: toRef(props, 'variant'),
19842
- rounded: toRef(props, 'rounded'),
19843
- elevation: toRef(props, 'elevation')
19843
+ color: toRef(() => props.color),
19844
+ border: toRef(() => props.border),
19845
+ density: toRef(() => props.density),
19846
+ size: toRef(() => props.size),
19847
+ variant: toRef(() => props.variant),
19848
+ rounded: toRef(() => props.rounded),
19849
+ elevation: toRef(() => props.elevation)
19844
19850
  }
19845
19851
  });
19846
19852
  const items = computed(() => {
@@ -20481,7 +20487,7 @@ const VDataTableHeaders = genericComponent()({
20481
20487
  const {
20482
20488
  backgroundColorClasses,
20483
20489
  backgroundColorStyles
20484
- } = useBackgroundColor(props, 'color');
20490
+ } = useBackgroundColor(() => props.color);
20485
20491
  const {
20486
20492
  displayClasses,
20487
20493
  mobile
@@ -21139,13 +21145,13 @@ const VDataTable = genericComponent()({
21139
21145
  filterFunctions
21140
21146
  } = createHeaders(props, {
21141
21147
  groupBy,
21142
- showSelect: toRef(props, 'showSelect'),
21143
- showExpand: toRef(props, 'showExpand')
21148
+ showSelect: toRef(() => props.showSelect),
21149
+ showExpand: toRef(() => props.showExpand)
21144
21150
  });
21145
21151
  const {
21146
21152
  items
21147
21153
  } = useDataTableItems(props, columns);
21148
- const search = toRef(props, 'search');
21154
+ const search = toRef(() => props.search);
21149
21155
  const {
21150
21156
  filteredItems
21151
21157
  } = useFilter(props, items, search, {
@@ -21228,10 +21234,10 @@ const VDataTable = genericComponent()({
21228
21234
  });
21229
21235
  provideDefaults({
21230
21236
  VDataTableRows: {
21231
- hideNoData: toRef(props, 'hideNoData'),
21232
- noDataText: toRef(props, 'noDataText'),
21233
- loading: toRef(props, 'loading'),
21234
- loadingText: toRef(props, 'loadingText')
21237
+ hideNoData: toRef(() => props.hideNoData),
21238
+ noDataText: toRef(() => props.noDataText),
21239
+ loading: toRef(() => props.loading),
21240
+ loadingText: toRef(() => props.loadingText)
21235
21241
  }
21236
21242
  });
21237
21243
  const slotProps = computed(() => ({
@@ -21328,13 +21334,13 @@ const VDataTableVirtual = genericComponent()({
21328
21334
  sortRawFunctions
21329
21335
  } = createHeaders(props, {
21330
21336
  groupBy,
21331
- showSelect: toRef(props, 'showSelect'),
21332
- showExpand: toRef(props, 'showExpand')
21337
+ showSelect: toRef(() => props.showSelect),
21338
+ showExpand: toRef(() => props.showExpand)
21333
21339
  });
21334
21340
  const {
21335
21341
  items
21336
21342
  } = useDataTableItems(props, columns);
21337
- const search = toRef(props, 'search');
21343
+ const search = toRef(() => props.search);
21338
21344
  const {
21339
21345
  filteredItems
21340
21346
  } = useFilter(props, items, search, {
@@ -21410,10 +21416,10 @@ const VDataTableVirtual = genericComponent()({
21410
21416
  });
21411
21417
  provideDefaults({
21412
21418
  VDataTableRows: {
21413
- hideNoData: toRef(props, 'hideNoData'),
21414
- noDataText: toRef(props, 'noDataText'),
21415
- loading: toRef(props, 'loading'),
21416
- loadingText: toRef(props, 'loadingText')
21419
+ hideNoData: toRef(() => props.hideNoData),
21420
+ noDataText: toRef(() => props.noDataText),
21421
+ loading: toRef(() => props.loading),
21422
+ loadingText: toRef(() => props.loadingText)
21417
21423
  }
21418
21424
  });
21419
21425
  const slotProps = computed(() => ({
@@ -21566,8 +21572,8 @@ const VDataTableServer = genericComponent()({
21566
21572
  headers
21567
21573
  } = createHeaders(props, {
21568
21574
  groupBy,
21569
- showSelect: toRef(props, 'showSelect'),
21570
- showExpand: toRef(props, 'showExpand')
21575
+ showSelect: toRef(() => props.showSelect),
21576
+ showExpand: toRef(() => props.showExpand)
21571
21577
  });
21572
21578
  const {
21573
21579
  items
@@ -21622,7 +21628,7 @@ const VDataTableServer = genericComponent()({
21622
21628
  itemsPerPage,
21623
21629
  sortBy,
21624
21630
  groupBy,
21625
- search: toRef(props, 'search')
21631
+ search: toRef(() => props.search)
21626
21632
  });
21627
21633
  provide('v-data-table', {
21628
21634
  toggleSort,
@@ -21630,10 +21636,10 @@ const VDataTableServer = genericComponent()({
21630
21636
  });
21631
21637
  provideDefaults({
21632
21638
  VDataTableRows: {
21633
- hideNoData: toRef(props, 'hideNoData'),
21634
- noDataText: toRef(props, 'noDataText'),
21635
- loading: toRef(props, 'loading'),
21636
- loadingText: toRef(props, 'loadingText')
21639
+ hideNoData: toRef(() => props.hideNoData),
21640
+ noDataText: toRef(() => props.noDataText),
21641
+ loading: toRef(() => props.loading),
21642
+ loadingText: toRef(() => props.loadingText)
21637
21643
  }
21638
21644
  });
21639
21645
  const slotProps = computed(() => ({
@@ -22103,7 +22109,7 @@ const VDatePickerHeader = genericComponent()({
22103
22109
  const {
22104
22110
  backgroundColorClasses,
22105
22111
  backgroundColorStyles
22106
- } = useBackgroundColor(props, 'color');
22112
+ } = useBackgroundColor(() => props.color);
22107
22113
  function onClick() {
22108
22114
  emit('click');
22109
22115
  }
@@ -22242,21 +22248,21 @@ function useCalendar(props) {
22242
22248
  const isSame = adapter.isSameDay(date, month.value);
22243
22249
  return {
22244
22250
  date,
22245
- isoDate,
22246
22251
  formatted: adapter.format(date, 'keyboardDate'),
22247
- year: adapter.getYear(date),
22248
- month: adapter.getMonth(date),
22249
- isDisabled: isDisabled(date),
22250
- isWeekStart: index % 7 === 0,
22251
- isWeekEnd: index % 7 === 6,
22252
- isToday: adapter.isSameDay(date, today),
22253
22252
  isAdjacent,
22254
- isHidden: isAdjacent && !props.showAdjacentMonths,
22255
- isStart,
22256
- isSelected: model.value.some(value => adapter.isSameDay(date, value)),
22253
+ isDisabled: isDisabled(date),
22257
22254
  isEnd,
22255
+ isHidden: isAdjacent && !props.showAdjacentMonths,
22258
22256
  isSame,
22259
- localized: adapter.format(date, 'dayOfMonth')
22257
+ isSelected: model.value.some(value => adapter.isSameDay(date, value)),
22258
+ isStart,
22259
+ isToday: adapter.isSameDay(date, today),
22260
+ isWeekEnd: index % 7 === 6,
22261
+ isWeekStart: index % 7 === 0,
22262
+ isoDate,
22263
+ localized: adapter.format(date, 'dayOfMonth'),
22264
+ month: adapter.getMonth(date),
22265
+ year: adapter.getYear(date)
22260
22266
  };
22261
22267
  });
22262
22268
  }
@@ -22344,7 +22350,7 @@ const VDatePickerMonth = genericComponent()({
22344
22350
  const rangeStart = shallowRef();
22345
22351
  const rangeStop = shallowRef();
22346
22352
  const isReverse = shallowRef(false);
22347
- const transition = computed(() => {
22353
+ const transition = toRef(() => {
22348
22354
  return !isReverse.value ? props.transition : props.reverseTransition;
22349
22355
  });
22350
22356
  if (props.multiple === 'range' && model.value.length > 0) {
@@ -22724,7 +22730,7 @@ const VDatePicker = genericComponent()({
22724
22730
  }
22725
22731
  return value && adapter.isValid(value) ? value : today;
22726
22732
  });
22727
- const headerColor = computed(() => props.headerColor ?? props.color);
22733
+ const headerColor = toRef(() => props.headerColor ?? props.color);
22728
22734
  const month = ref(Number(props.month ?? adapter.getMonth(adapter.startOfMonth(internal.value))));
22729
22735
  const year = ref(Number(props.year ?? adapter.getYear(adapter.startOfYear(adapter.setMonth(internal.value, month.value)))));
22730
22736
  const isReversing = shallowRef(false);
@@ -22741,8 +22747,8 @@ const VDatePicker = genericComponent()({
22741
22747
  date = adapter.setYear(date, year.value);
22742
22748
  return adapter.format(date, 'monthAndYear');
22743
22749
  });
22744
- // const headerIcon = computed(() => props.inputMode === 'calendar' ? props.keyboardIcon : props.calendarIcon)
22745
- const headerTransition = computed(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`);
22750
+ // const headerIcon = toRef(() => props.inputMode === 'calendar' ? props.keyboardIcon : props.calendarIcon)
22751
+ const headerTransition = toRef(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`);
22746
22752
  const disabled = computed(() => {
22747
22753
  if (props.disabled) return true;
22748
22754
  const targets = [];
@@ -22954,7 +22960,7 @@ const VEmptyState = genericComponent()({
22954
22960
  const {
22955
22961
  backgroundColorClasses,
22956
22962
  backgroundColorStyles
22957
- } = useBackgroundColor(toRef(props, 'bgColor'));
22963
+ } = useBackgroundColor(() => props.bgColor);
22958
22964
  const {
22959
22965
  dimensionStyles
22960
22966
  } = useDimension(props);
@@ -23117,7 +23123,7 @@ const VExpansionPanelTitle = genericComponent()({
23117
23123
  const {
23118
23124
  backgroundColorClasses,
23119
23125
  backgroundColorStyles
23120
- } = useBackgroundColor(props, 'color');
23126
+ } = useBackgroundColor(() => props.color);
23121
23127
  const {
23122
23128
  dimensionStyles
23123
23129
  } = useDimension(props);
@@ -23128,7 +23134,7 @@ const VExpansionPanelTitle = genericComponent()({
23128
23134
  expandIcon: props.expandIcon,
23129
23135
  readonly: props.readonly
23130
23136
  }));
23131
- const icon = computed(() => expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon);
23137
+ const icon = toRef(() => expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon);
23132
23138
  useRender(() => withDirectives(createVNode("button", {
23133
23139
  "class": ['v-expansion-panel-title', {
23134
23140
  'v-expansion-panel-title--active': expansionPanel.isSelected.value,
@@ -23183,14 +23189,14 @@ const VExpansionPanel = genericComponent()({
23183
23189
  const {
23184
23190
  backgroundColorClasses,
23185
23191
  backgroundColorStyles
23186
- } = useBackgroundColor(props, 'bgColor');
23192
+ } = useBackgroundColor(() => props.bgColor);
23187
23193
  const {
23188
23194
  elevationClasses
23189
23195
  } = useElevation(props);
23190
23196
  const {
23191
23197
  roundedClasses
23192
23198
  } = useRounded(props);
23193
- const isDisabled = computed(() => groupItem?.disabled.value || props.disabled);
23199
+ const isDisabled = toRef(() => groupItem?.disabled.value || props.disabled);
23194
23200
  const selectedIndices = computed(() => groupItem.group.items.value.reduce((arr, item, index) => {
23195
23201
  if (groupItem.group.selected.value.includes(item.id)) arr.push(index);
23196
23202
  return arr;
@@ -23281,21 +23287,21 @@ const VExpansionPanels = genericComponent()({
23281
23287
  const {
23282
23288
  themeClasses
23283
23289
  } = provideTheme(props);
23284
- const variantClass = computed(() => props.variant && `v-expansion-panels--variant-${props.variant}`);
23290
+ const variantClass = toRef(() => props.variant && `v-expansion-panels--variant-${props.variant}`);
23285
23291
  provideDefaults({
23286
23292
  VExpansionPanel: {
23287
- bgColor: toRef(props, 'bgColor'),
23288
- collapseIcon: toRef(props, 'collapseIcon'),
23289
- color: toRef(props, 'color'),
23290
- eager: toRef(props, 'eager'),
23291
- elevation: toRef(props, 'elevation'),
23292
- expandIcon: toRef(props, 'expandIcon'),
23293
- focusable: toRef(props, 'focusable'),
23294
- hideActions: toRef(props, 'hideActions'),
23295
- readonly: toRef(props, 'readonly'),
23296
- ripple: toRef(props, 'ripple'),
23297
- rounded: toRef(props, 'rounded'),
23298
- static: toRef(props, 'static')
23293
+ bgColor: toRef(() => props.bgColor),
23294
+ collapseIcon: toRef(() => props.collapseIcon),
23295
+ color: toRef(() => props.color),
23296
+ eager: toRef(() => props.eager),
23297
+ elevation: toRef(() => props.elevation),
23298
+ expandIcon: toRef(() => props.expandIcon),
23299
+ focusable: toRef(() => props.focusable),
23300
+ hideActions: toRef(() => props.hideActions),
23301
+ readonly: toRef(() => props.readonly),
23302
+ ripple: toRef(() => props.ripple),
23303
+ rounded: toRef(() => props.rounded),
23304
+ static: toRef(() => props.static)
23299
23305
  }
23300
23306
  });
23301
23307
  useRender(() => createVNode(props.tag, {
@@ -23357,7 +23363,7 @@ const VFab = genericComponent()({
23357
23363
  if (!entries.length) return;
23358
23364
  height.value = entries[0].target.clientHeight;
23359
23365
  });
23360
- const hasPosition = computed(() => props.app || props.absolute);
23366
+ const hasPosition = toRef(() => props.app || props.absolute);
23361
23367
  const position = computed(() => {
23362
23368
  if (!hasPosition.value) return false;
23363
23369
  return props.location?.split(' ').shift() ?? 'bottom';
@@ -23374,7 +23380,7 @@ const VFab = genericComponent()({
23374
23380
  layoutSize: computed(() => props.layout ? height.value + 24 : 0),
23375
23381
  elementSize: computed(() => height.value + 24),
23376
23382
  active: computed(() => props.app && model.value),
23377
- absolute: toRef(props, 'absolute')
23383
+ absolute: toRef(() => props.absolute)
23378
23384
  });
23379
23385
  watchEffect(() => {
23380
23386
  layoutItemStyles.value = layout.layoutItemStyles.value;
@@ -23499,7 +23505,7 @@ const VFileInput = genericComponent()({
23499
23505
  const vInputRef = ref();
23500
23506
  const vFieldRef = ref();
23501
23507
  const inputRef = ref();
23502
- const isActive = computed(() => isFocused.value || props.active);
23508
+ const isActive = toRef(() => isFocused.value || props.active);
23503
23509
  const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant));
23504
23510
  function onFocus() {
23505
23511
  if (inputRef.value !== document.activeElement) {
@@ -23672,7 +23678,7 @@ const VFooter = genericComponent()({
23672
23678
  const {
23673
23679
  backgroundColorClasses,
23674
23680
  backgroundColorStyles
23675
- } = useBackgroundColor(toRef(props, 'color'));
23681
+ } = useBackgroundColor(() => props.color);
23676
23682
  const {
23677
23683
  borderClasses
23678
23684
  } = useBorder(props);
@@ -23694,11 +23700,11 @@ const VFooter = genericComponent()({
23694
23700
  const layout = useLayoutItem({
23695
23701
  id: props.name,
23696
23702
  order: computed(() => parseInt(props.order, 10)),
23697
- position: computed(() => 'bottom'),
23703
+ position: toRef(() => 'bottom'),
23698
23704
  layoutSize: height,
23699
23705
  elementSize: computed(() => props.height === 'auto' ? undefined : height.value),
23700
- active: computed(() => props.app),
23701
- absolute: toRef(props, 'absolute')
23706
+ active: toRef(() => props.app),
23707
+ absolute: toRef(() => props.absolute)
23702
23708
  });
23703
23709
  watchEffect(() => {
23704
23710
  layoutItemStyles.value = layout.layoutItemStyles.value;
@@ -24171,11 +24177,11 @@ const VLayoutItem = genericComponent()({
24171
24177
  } = useLayoutItem({
24172
24178
  id: props.name,
24173
24179
  order: computed(() => parseInt(props.order, 10)),
24174
- position: toRef(props, 'position'),
24175
- elementSize: toRef(props, 'size'),
24176
- layoutSize: toRef(props, 'size'),
24177
- active: toRef(props, 'modelValue'),
24178
- absolute: toRef(props, 'absolute')
24180
+ position: toRef(() => props.position),
24181
+ elementSize: toRef(() => props.size),
24182
+ layoutSize: toRef(() => props.size),
24183
+ active: toRef(() => props.modelValue),
24184
+ absolute: toRef(() => props.absolute)
24179
24185
  });
24180
24186
  return () => createVNode("div", {
24181
24187
  "class": ['v-layout-item', props.class],
@@ -24707,7 +24713,7 @@ const VNavigationDrawer = genericComponent()({
24707
24713
  const {
24708
24714
  backgroundColorClasses,
24709
24715
  backgroundColorStyles
24710
- } = useBackgroundColor(toRef(props, 'color'));
24716
+ } = useBackgroundColor(() => props.color);
24711
24717
  const {
24712
24718
  elevationClasses
24713
24719
  } = useElevation(props);
@@ -24740,7 +24746,7 @@ const VNavigationDrawer = genericComponent()({
24740
24746
  const location = computed(() => {
24741
24747
  return toPhysical(props.location, isRtl.value);
24742
24748
  });
24743
- const isPersistent = computed(() => props.persistent);
24749
+ const isPersistent = toRef(() => props.persistent);
24744
24750
  const isTemporary = computed(() => !props.permanent && (mobile.value || props.temporary));
24745
24751
  const isSticky = computed(() => props.sticky && !isTemporary.value && location.value !== 'bottom');
24746
24752
  useToggleScope(() => props.expandOnHover && props.rail != null, () => {
@@ -24766,7 +24772,7 @@ const VNavigationDrawer = genericComponent()({
24766
24772
  isActive,
24767
24773
  isTemporary,
24768
24774
  width,
24769
- touchless: toRef(props, 'touchless'),
24775
+ touchless: toRef(() => props.touchless),
24770
24776
  position: location
24771
24777
  });
24772
24778
  const layoutSize = computed(() => {
@@ -24783,7 +24789,7 @@ const VNavigationDrawer = genericComponent()({
24783
24789
  layoutSize,
24784
24790
  elementSize: width,
24785
24791
  active: readonly(isActive),
24786
- disableTransitions: computed(() => isDragging.value),
24792
+ disableTransitions: toRef(() => isDragging.value),
24787
24793
  absolute: computed(() =>
24788
24794
  // eslint-disable-next-line @typescript-eslint/no-use-before-define
24789
24795
  props.absolute || isSticky.value && typeof isStuck.value !== 'string')
@@ -24796,9 +24802,9 @@ const VNavigationDrawer = genericComponent()({
24796
24802
  isSticky,
24797
24803
  layoutItemStyles
24798
24804
  });
24799
- const scrimColor = useBackgroundColor(computed(() => {
24805
+ const scrimColor = useBackgroundColor(() => {
24800
24806
  return typeof props.scrim === 'string' ? props.scrim : null;
24801
- }));
24807
+ });
24802
24808
  const scrimStyles = computed(() => ({
24803
24809
  ...(isDragging.value ? {
24804
24810
  opacity: dragProgress.value * 0.2,
@@ -25012,24 +25018,24 @@ const VNumberInput = genericComponent()({
25012
25018
  const controlVariant = computed(() => {
25013
25019
  return props.hideInput ? 'stacked' : props.controlVariant;
25014
25020
  });
25015
- const incrementIcon = computed(() => controlVariant.value === 'split' ? '$plus' : '$collapse');
25016
- const decrementIcon = computed(() => controlVariant.value === 'split' ? '$minus' : '$expand');
25017
- const controlNodeSize = computed(() => controlVariant.value === 'split' ? 'default' : 'small');
25018
- const controlNodeDefaultHeight = computed(() => controlVariant.value === 'stacked' ? 'auto' : '100%');
25019
- const incrementSlotProps = computed(() => ({
25021
+ const incrementIcon = toRef(() => controlVariant.value === 'split' ? '$plus' : '$collapse');
25022
+ const decrementIcon = toRef(() => controlVariant.value === 'split' ? '$minus' : '$expand');
25023
+ const controlNodeSize = toRef(() => controlVariant.value === 'split' ? 'default' : 'small');
25024
+ const controlNodeDefaultHeight = toRef(() => controlVariant.value === 'stacked' ? 'auto' : '100%');
25025
+ const incrementSlotProps = {
25020
25026
  props: {
25021
25027
  onClick: onControlClick,
25022
25028
  onPointerup: onControlMouseup,
25023
25029
  onPointerdown: onUpControlMousedown
25024
25030
  }
25025
- }));
25026
- const decrementSlotProps = computed(() => ({
25031
+ };
25032
+ const decrementSlotProps = {
25027
25033
  props: {
25028
25034
  onClick: onControlClick,
25029
25035
  onPointerup: onControlMouseup,
25030
25036
  onPointerdown: onDownControlMousedown
25031
25037
  }
25032
- }));
25038
+ };
25033
25039
  watch(() => props.precision, () => formatInputValue());
25034
25040
  onMounted(() => {
25035
25041
  clampModel();
@@ -25181,7 +25187,7 @@ const VNumberInput = genericComponent()({
25181
25187
  }
25182
25188
  }
25183
25189
  }, {
25184
- default: () => [slots.increment(incrementSlotProps.value)]
25190
+ default: () => [slots.increment(incrementSlotProps)]
25185
25191
  });
25186
25192
  }
25187
25193
  function decrementControlNode() {
@@ -25210,7 +25216,7 @@ const VNumberInput = genericComponent()({
25210
25216
  }
25211
25217
  }
25212
25218
  }, {
25213
- default: () => [slots.decrement(decrementSlotProps.value)]
25219
+ default: () => [slots.decrement(decrementSlotProps)]
25214
25220
  });
25215
25221
  }
25216
25222
  function controlNode() {
@@ -25410,12 +25416,12 @@ const VOtpInput = genericComponent()({
25410
25416
  }
25411
25417
  provideDefaults({
25412
25418
  VField: {
25413
- color: computed(() => props.color),
25414
- bgColor: computed(() => props.color),
25415
- baseColor: computed(() => props.baseColor),
25416
- disabled: computed(() => props.disabled),
25417
- error: computed(() => props.error),
25418
- variant: computed(() => props.variant)
25419
+ color: toRef(() => props.color),
25420
+ bgColor: toRef(() => props.color),
25421
+ baseColor: toRef(() => props.baseColor),
25422
+ disabled: toRef(() => props.disabled),
25423
+ error: toRef(() => props.error),
25424
+ variant: toRef(() => props.variant)
25419
25425
  }
25420
25426
  }, {
25421
25427
  scoped: true
@@ -26216,7 +26222,7 @@ const VSkeletonLoader = genericComponent()({
26216
26222
  const {
26217
26223
  backgroundColorClasses,
26218
26224
  backgroundColorStyles
26219
- } = useBackgroundColor(toRef(props, 'color'));
26225
+ } = useBackgroundColor(() => props.color);
26220
26226
  const {
26221
26227
  dimensionStyles
26222
26228
  } = useDimension(props);
@@ -27015,7 +27021,7 @@ const VSparkline = genericComponent()({
27015
27021
  const {
27016
27022
  textColorClasses,
27017
27023
  textColorStyles
27018
- } = useTextColor(toRef(props, 'color'));
27024
+ } = useTextColor(() => props.color);
27019
27025
  const hasLabels = computed(() => {
27020
27026
  return Boolean(props.showLabels || props.labels.length > 0 || !!slots?.label);
27021
27027
  });
@@ -27561,11 +27567,11 @@ const VSwitch = genericComponent()({
27561
27567
  } = useFocus(props);
27562
27568
  const control = ref();
27563
27569
  const isForcedColorsModeActive = IN_BROWSER && window.matchMedia('(forced-colors: active)').matches;
27564
- const loaderColor = computed(() => {
27570
+ const loaderColor = toRef(() => {
27565
27571
  return typeof props.loading === 'string' && props.loading !== '' ? props.loading : props.color;
27566
27572
  });
27567
27573
  const uid = useId();
27568
- const id = computed(() => props.id || `switch-${uid}`);
27574
+ const id = toRef(() => props.id || `switch-${uid}`);
27569
27575
  function onChange() {
27570
27576
  if (indeterminate.value) {
27571
27577
  indeterminate.value = false;
@@ -27716,7 +27722,7 @@ const VSystemBar = genericComponent()({
27716
27722
  const {
27717
27723
  backgroundColorClasses,
27718
27724
  backgroundColorStyles
27719
- } = useBackgroundColor(toRef(props, 'color'));
27725
+ } = useBackgroundColor(() => props.color);
27720
27726
  const {
27721
27727
  elevationClasses
27722
27728
  } = useElevation(props);
@@ -27736,7 +27742,7 @@ const VSystemBar = genericComponent()({
27736
27742
  layoutSize: height,
27737
27743
  elementSize: height,
27738
27744
  active: computed(() => true),
27739
- absolute: toRef(props, 'absolute')
27745
+ absolute: toRef(() => props.absolute)
27740
27746
  });
27741
27747
  useRender(() => createVNode(props.tag, {
27742
27748
  "class": ['v-system-bar', {
@@ -27778,7 +27784,7 @@ const VTab = genericComponent()({
27778
27784
  const {
27779
27785
  textColorClasses: sliderColorClasses,
27780
27786
  textColorStyles: sliderColorStyles
27781
- } = useTextColor(props, 'sliderColor');
27787
+ } = useTextColor(() => props.sliderColor);
27782
27788
  const rootEl = ref();
27783
27789
  const sliderEl = ref();
27784
27790
  const isHorizontal = computed(() => props.direction === 'horizontal');
@@ -27971,18 +27977,18 @@ const VTabs = genericComponent()({
27971
27977
  const {
27972
27978
  backgroundColorClasses,
27973
27979
  backgroundColorStyles
27974
- } = useBackgroundColor(toRef(props, 'bgColor'));
27980
+ } = useBackgroundColor(() => props.bgColor);
27975
27981
  const {
27976
27982
  scopeId
27977
27983
  } = useScopeId();
27978
27984
  provideDefaults({
27979
27985
  VTab: {
27980
- color: toRef(props, 'color'),
27981
- direction: toRef(props, 'direction'),
27982
- stacked: toRef(props, 'stacked'),
27983
- fixed: toRef(props, 'fixedTabs'),
27984
- sliderColor: toRef(props, 'sliderColor'),
27985
- hideSlider: toRef(props, 'hideSlider')
27986
+ color: toRef(() => props.color),
27987
+ direction: toRef(() => props.direction),
27988
+ stacked: toRef(() => props.stacked),
27989
+ fixed: toRef(() => props.fixedTabs),
27990
+ sliderColor: toRef(() => props.sliderColor),
27991
+ hideSlider: toRef(() => props.hideSlider)
27986
27992
  }
27987
27993
  });
27988
27994
  useRender(() => {
@@ -28332,7 +28338,7 @@ const VTimelineDivider = genericComponent()({
28332
28338
  const {
28333
28339
  backgroundColorStyles,
28334
28340
  backgroundColorClasses
28335
- } = useBackgroundColor(toRef(props, 'dotColor'));
28341
+ } = useBackgroundColor(() => props.dotColor);
28336
28342
  const {
28337
28343
  roundedClasses
28338
28344
  } = useRounded(props, 'v-timeline-divider__dot');
@@ -28342,7 +28348,7 @@ const VTimelineDivider = genericComponent()({
28342
28348
  const {
28343
28349
  backgroundColorClasses: lineColorClasses,
28344
28350
  backgroundColorStyles: lineColorStyles
28345
- } = useBackgroundColor(toRef(props, 'lineColor'));
28351
+ } = useBackgroundColor(() => props.lineColor);
28346
28352
  useRender(() => createVNode("div", {
28347
28353
  "class": ['v-timeline-divider', {
28348
28354
  'v-timeline-divider--fill-dot': props.fillDot
@@ -28513,17 +28519,17 @@ const VTimeline = genericComponent()({
28513
28519
  } = useRtl();
28514
28520
  provideDefaults({
28515
28521
  VTimelineDivider: {
28516
- lineColor: toRef(props, 'lineColor')
28522
+ lineColor: toRef(() => props.lineColor)
28517
28523
  },
28518
28524
  VTimelineItem: {
28519
- density: toRef(props, 'density'),
28520
- dotColor: toRef(props, 'dotColor'),
28521
- fillDot: toRef(props, 'fillDot'),
28522
- hideOpposite: toRef(props, 'hideOpposite'),
28523
- iconColor: toRef(props, 'iconColor'),
28524
- lineColor: toRef(props, 'lineColor'),
28525
- lineInset: toRef(props, 'lineInset'),
28526
- size: toRef(props, 'size')
28525
+ density: toRef(() => props.density),
28526
+ dotColor: toRef(() => props.dotColor),
28527
+ fillDot: toRef(() => props.fillDot),
28528
+ hideOpposite: toRef(() => props.hideOpposite),
28529
+ iconColor: toRef(() => props.iconColor),
28530
+ lineColor: toRef(() => props.lineColor),
28531
+ lineInset: toRef(() => props.lineInset),
28532
+ size: toRef(() => props.size)
28527
28533
  }
28528
28534
  });
28529
28535
  const sideClasses = computed(() => {
@@ -28570,9 +28576,9 @@ const VToolbarItems = genericComponent()({
28570
28576
  } = _ref;
28571
28577
  provideDefaults({
28572
28578
  VBtn: {
28573
- color: toRef(props, 'color'),
28579
+ color: toRef(() => props.color),
28574
28580
  height: 'inherit',
28575
- variant: toRef(props, 'variant')
28581
+ variant: toRef(() => props.variant)
28576
28582
  }
28577
28583
  });
28578
28584
  useRender(() => createVNode("div", {
@@ -28619,7 +28625,7 @@ const VTooltip = genericComponent()({
28619
28625
  scopeId
28620
28626
  } = useScopeId();
28621
28627
  const uid = useId();
28622
- const id = computed(() => props.id || `v-tooltip-${uid}`);
28628
+ const id = toRef(() => props.id || `v-tooltip-${uid}`);
28623
28629
  const overlay = ref();
28624
28630
  const location = computed(() => {
28625
28631
  return props.location.split(' ').length > 1 ? props.location : props.location + ' center';
@@ -28627,7 +28633,7 @@ const VTooltip = genericComponent()({
28627
28633
  const origin = computed(() => {
28628
28634
  return props.origin === 'auto' || props.origin === 'overlap' || props.origin.split(' ').length > 1 || props.location.split(' ').length > 1 ? props.origin : props.origin + ' center';
28629
28635
  });
28630
- const transition = computed(() => {
28636
+ const transition = toRef(() => {
28631
28637
  if (props.transition) return props.transition;
28632
28638
  return isActive.value ? 'scale-transition' : 'fade-transition';
28633
28639
  });
@@ -29174,7 +29180,7 @@ function createVuetify$1() {
29174
29180
  };
29175
29181
  });
29176
29182
  }
29177
- const version$1 = "3.8.2-master.2025-04-19";
29183
+ const version$1 = "3.8.2-master.2025-04-23";
29178
29184
  createVuetify$1.version = version$1;
29179
29185
 
29180
29186
  // Vue's inject() can only be used in setup
@@ -29199,7 +29205,7 @@ const createVuetify = function () {
29199
29205
  ...options
29200
29206
  });
29201
29207
  };
29202
- const version = "3.8.2-master.2025-04-19";
29208
+ const version = "3.8.2-master.2025-04-23";
29203
29209
  createVuetify.version = version;
29204
29210
 
29205
29211
  export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };