vuetify 3.3.13 → 3.3.14

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 (94) hide show
  1. package/dist/json/attributes.json +70 -66
  2. package/dist/json/importMap-labs.json +4 -4
  3. package/dist/json/importMap.json +12 -12
  4. package/dist/json/tags.json +5 -4
  5. package/dist/json/web-types.json +180 -140
  6. package/dist/vuetify-labs.css +363 -304
  7. package/dist/vuetify-labs.d.ts +384 -236
  8. package/dist/vuetify-labs.esm.js +410 -297
  9. package/dist/vuetify-labs.esm.js.map +1 -1
  10. package/dist/vuetify-labs.js +409 -296
  11. package/dist/vuetify-labs.min.css +2 -2
  12. package/dist/vuetify.css +291 -232
  13. package/dist/vuetify.d.ts +232 -76
  14. package/dist/vuetify.esm.js +210 -160
  15. package/dist/vuetify.esm.js.map +1 -1
  16. package/dist/vuetify.js +209 -159
  17. package/dist/vuetify.js.map +1 -1
  18. package/dist/vuetify.min.css +2 -2
  19. package/dist/vuetify.min.js +838 -827
  20. package/dist/vuetify.min.js.map +1 -1
  21. package/lib/components/VAppBar/VAppBar.mjs.map +1 -1
  22. package/lib/components/VAppBar/index.d.mts +6 -6
  23. package/lib/components/VAutocomplete/VAutocomplete.mjs +12 -2
  24. package/lib/components/VAutocomplete/VAutocomplete.mjs.map +1 -1
  25. package/lib/components/VBadge/VBadge.css +1 -1
  26. package/lib/components/VBadge/_variables.scss +1 -1
  27. package/lib/components/VCheckbox/VCheckbox.mjs +2 -2
  28. package/lib/components/VCheckbox/VCheckbox.mjs.map +1 -1
  29. package/lib/components/VCheckbox/VCheckboxBtn.mjs +14 -11
  30. package/lib/components/VCheckbox/VCheckboxBtn.mjs.map +1 -1
  31. package/lib/components/VColorPicker/VColorPickerEdit.css +4 -2
  32. package/lib/components/VColorPicker/VColorPickerPreview.css +11 -6
  33. package/lib/components/VCombobox/VCombobox.mjs +11 -1
  34. package/lib/components/VCombobox/VCombobox.mjs.map +1 -1
  35. package/lib/components/VField/VField.css +22 -7
  36. package/lib/components/VField/VField.sass +8 -1
  37. package/lib/components/VField/_variables.scss +1 -0
  38. package/lib/components/VGrid/VGrid.css +153 -142
  39. package/lib/components/VProgressLinear/VProgressLinear.css +3 -2
  40. package/lib/components/VRadioGroup/VRadioGroup.mjs +2 -2
  41. package/lib/components/VRadioGroup/VRadioGroup.mjs.map +1 -1
  42. package/lib/components/VRangeSlider/index.d.mts +114 -33
  43. package/lib/components/VSelect/VSelect.mjs +12 -2
  44. package/lib/components/VSelect/VSelect.mjs.map +1 -1
  45. package/lib/components/VSelectionControl/VSelectionControl.mjs +2 -1
  46. package/lib/components/VSelectionControl/VSelectionControl.mjs.map +1 -1
  47. package/lib/components/VSlider/VSlider.mjs.map +1 -1
  48. package/lib/components/VSlider/VSliderThumb.css +8 -4
  49. package/lib/components/VSlider/VSliderTrack.css +22 -12
  50. package/lib/components/VSlider/index.d.mts +114 -33
  51. package/lib/components/VSwitch/VSwitch.mjs +9 -9
  52. package/lib/components/VSwitch/VSwitch.mjs.map +1 -1
  53. package/lib/components/VTimeline/VTimeline.css +19 -10
  54. package/lib/components/VTimeline/VTimeline.sass +5 -0
  55. package/lib/components/VToolbar/VToolbar.css +4 -2
  56. package/lib/components/index.d.mts +228 -72
  57. package/lib/composables/color.mjs +6 -1
  58. package/lib/composables/color.mjs.map +1 -1
  59. package/lib/composables/defaults.mjs +9 -9
  60. package/lib/composables/defaults.mjs.map +1 -1
  61. package/lib/composables/theme.mjs +2 -5
  62. package/lib/composables/theme.mjs.map +1 -1
  63. package/lib/entry-bundler.mjs +1 -1
  64. package/lib/framework.mjs +1 -1
  65. package/lib/index.d.mts +4 -4
  66. package/lib/labs/VDateInput/index.d.mts +2 -2
  67. package/lib/labs/VDatePicker/VDateCard.mjs +3 -0
  68. package/lib/labs/VDatePicker/VDateCard.mjs.map +1 -1
  69. package/lib/labs/VDatePicker/VDatePicker.mjs +51 -21
  70. package/lib/labs/VDatePicker/VDatePicker.mjs.map +1 -1
  71. package/lib/labs/VDatePicker/VDatePickerControls.css +1 -1
  72. package/lib/labs/VDatePicker/VDatePickerControls.mjs +53 -35
  73. package/lib/labs/VDatePicker/VDatePickerControls.mjs.map +1 -1
  74. package/lib/labs/VDatePicker/VDatePickerMonth.mjs +37 -28
  75. package/lib/labs/VDatePicker/VDatePickerMonth.mjs.map +1 -1
  76. package/lib/labs/VDatePicker/VDatePickerYears.mjs +19 -17
  77. package/lib/labs/VDatePicker/VDatePickerYears.mjs.map +1 -1
  78. package/lib/labs/VDatePicker/index.d.mts +148 -156
  79. package/lib/labs/VDateRangePicker/VDateRangeCard.mjs +3 -0
  80. package/lib/labs/VDateRangePicker/VDateRangeCard.mjs.map +1 -1
  81. package/lib/labs/VDateRangePicker/index.d.mts +59 -52
  82. package/lib/labs/VSkeletonLoader/VSkeletonLoader.mjs.map +1 -1
  83. package/lib/labs/VSkeletonLoader/index.d.mts +8 -8
  84. package/lib/labs/components.d.mts +156 -164
  85. package/lib/locale/no.mjs +1 -1
  86. package/lib/locale/no.mjs.map +1 -1
  87. package/lib/styles/tools/_rtl.sass +4 -2
  88. package/lib/util/colorUtils.mjs +6 -0
  89. package/lib/util/colorUtils.mjs.map +1 -1
  90. package/lib/util/helpers.mjs +10 -4
  91. package/lib/util/helpers.mjs.map +1 -1
  92. package/lib/util/injectSelf.mjs +2 -1
  93. package/lib/util/injectSelf.mjs.map +1 -1
  94. package/package.json +2 -2
@@ -1,10 +1,10 @@
1
1
  /*!
2
- * Vuetify v3.3.13
2
+ * Vuetify v3.3.14
3
3
  * Forged by John Leider
4
4
  * Released under the MIT License.
5
5
  */
6
6
 
7
- import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, warn, watch, onScopeDispose, effectScope, ref, unref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, readonly, onDeactivated, onActivated, onMounted, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onBeforeUpdate, vModelText, withModifiers } from 'vue';
7
+ import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, warn, ref, unref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, watch, readonly, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onBeforeUpdate, vModelText, withModifiers } from 'vue';
8
8
 
9
9
  // Types
10
10
  // eslint-disable-line vue/prefer-import-from-vue
@@ -229,14 +229,22 @@ function only(obj, include) {
229
229
  include.forEach(prop => clone[prop] = obj[prop]);
230
230
  return clone;
231
231
  }
232
+ const onRE = /^on[^a-z]/;
233
+ const isOn = key => onRE.test(key);
234
+ const bubblingEvents = ['onAfterscriptexecute', 'onAnimationcancel', 'onAnimationend', 'onAnimationiteration', 'onAnimationstart', 'onAuxclick', 'onBeforeinput', 'onBeforescriptexecute', 'onChange', 'onClick', 'onCompositionend', 'onCompositionstart', 'onCompositionupdate', 'onContextmenu', 'onCopy', 'onCut', 'onDblclick', 'onFocusin', 'onFocusout', 'onFullscreenchange', 'onFullscreenerror', 'onGesturechange', 'onGestureend', 'onGesturestart', 'onGotpointercapture', 'onInput', 'onKeydown', 'onKeypress', 'onKeyup', 'onLostpointercapture', 'onMousedown', 'onMousemove', 'onMouseout', 'onMouseover', 'onMouseup', 'onMousewheel', 'onPaste', 'onPointercancel', 'onPointerdown', 'onPointerenter', 'onPointerleave', 'onPointermove', 'onPointerout', 'onPointerover', 'onPointerup', 'onReset', 'onSelect', 'onSubmit', 'onTouchcancel', 'onTouchend', 'onTouchmove', 'onTouchstart', 'onTransitioncancel', 'onTransitionend', 'onTransitionrun', 'onTransitionstart', 'onWheel'];
232
235
 
233
236
  /**
234
237
  * Filter attributes that should be applied to
235
- * the root element of a an input component. Remaining
238
+ * the root element of an input component. Remaining
236
239
  * attributes should be passed to the <input> element inside.
237
240
  */
238
241
  function filterInputAttrs(attrs) {
239
- return pick(attrs, ['class', 'style', 'id', /^data-/]);
242
+ const [events, props] = pick(attrs, [onRE]);
243
+ const inputEvents = omit(events, bubblingEvents);
244
+ const [rootAttrs, inputAttrs] = pick(props, ['class', 'style', 'id', /^data-/]);
245
+ Object.assign(rootAttrs, events);
246
+ Object.assign(inputAttrs, inputEvents);
247
+ return [rootAttrs, inputAttrs];
240
248
  }
241
249
  function wrapInArray(v) {
242
250
  return v == null ? [] : Array.isArray(v) ? v : [v];
@@ -389,8 +397,6 @@ function destructComputed(getter) {
389
397
  function includes(arr, val) {
390
398
  return arr.includes(val);
391
399
  }
392
- const onRE = /^on[^a-z]/;
393
- const isOn = key => onRE.test(key);
394
400
  function eventName(propName) {
395
401
  return propName[2].toLowerCase() + propName.slice(3);
396
402
  }
@@ -660,6 +666,94 @@ function unbindProps(el, props) {
660
666
  });
661
667
  }
662
668
 
669
+ /**
670
+ * WCAG 3.0 APCA perceptual contrast algorithm from https://github.com/Myndex/SAPC-APCA
671
+ * @licence https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
672
+ * @see https://www.w3.org/WAI/GL/task-forces/silver/wiki/Visual_Contrast_of_Text_Subgroup
673
+ */
674
+ // Types
675
+
676
+ // MAGICAL NUMBERS
677
+
678
+ // sRGB Conversion to Relative Luminance (Y)
679
+
680
+ // Transfer Curve (aka "Gamma") for sRGB linearization
681
+ // Simple power curve vs piecewise described in docs
682
+ // Essentially, 2.4 best models actual display
683
+ // characteristics in combination with the total method
684
+ const mainTRC = 2.4;
685
+ const Rco = 0.2126729; // sRGB Red Coefficient (from matrix)
686
+ const Gco = 0.7151522; // sRGB Green Coefficient (from matrix)
687
+ const Bco = 0.0721750; // sRGB Blue Coefficient (from matrix)
688
+
689
+ // For Finding Raw SAPC Contrast from Relative Luminance (Y)
690
+
691
+ // Constants for SAPC Power Curve Exponents
692
+ // One pair for normal text, and one for reverse
693
+ // These are the "beating heart" of SAPC
694
+ const normBG = 0.55;
695
+ const normTXT = 0.58;
696
+ const revTXT = 0.57;
697
+ const revBG = 0.62;
698
+
699
+ // For Clamping and Scaling Values
700
+
701
+ const blkThrs = 0.03; // Level that triggers the soft black clamp
702
+ const blkClmp = 1.45; // Exponent for the soft black clamp curve
703
+ const deltaYmin = 0.0005; // Lint trap
704
+ const scaleBoW = 1.25; // Scaling for dark text on light
705
+ const scaleWoB = 1.25; // Scaling for light text on dark
706
+ const loConThresh = 0.078; // Threshold for new simple offset scale
707
+ const loConFactor = 12.82051282051282; // = 1/0.078,
708
+ const loConOffset = 0.06; // The simple offset
709
+ const loClip = 0.001; // Output clip (lint trap #2)
710
+
711
+ function APCAcontrast(text, background) {
712
+ // Linearize sRGB
713
+ const Rtxt = (text.r / 255) ** mainTRC;
714
+ const Gtxt = (text.g / 255) ** mainTRC;
715
+ const Btxt = (text.b / 255) ** mainTRC;
716
+ const Rbg = (background.r / 255) ** mainTRC;
717
+ const Gbg = (background.g / 255) ** mainTRC;
718
+ const Bbg = (background.b / 255) ** mainTRC;
719
+
720
+ // Apply the standard coefficients and sum to Y
721
+ let Ytxt = Rtxt * Rco + Gtxt * Gco + Btxt * Bco;
722
+ let Ybg = Rbg * Rco + Gbg * Gco + Bbg * Bco;
723
+
724
+ // Soft clamp Y when near black.
725
+ // Now clamping all colors to prevent crossover errors
726
+ if (Ytxt <= blkThrs) Ytxt += (blkThrs - Ytxt) ** blkClmp;
727
+ if (Ybg <= blkThrs) Ybg += (blkThrs - Ybg) ** blkClmp;
728
+
729
+ // Return 0 Early for extremely low ∆Y (lint trap #1)
730
+ if (Math.abs(Ybg - Ytxt) < deltaYmin) return 0.0;
731
+
732
+ // SAPC CONTRAST
733
+
734
+ let outputContrast; // For weighted final values
735
+ if (Ybg > Ytxt) {
736
+ // For normal polarity, black text on white
737
+ // Calculate the SAPC contrast value and scale
738
+
739
+ const SAPC = (Ybg ** normBG - Ytxt ** normTXT) * scaleBoW;
740
+
741
+ // NEW! SAPC SmoothScale™
742
+ // Low Contrast Smooth Scale Rollout to prevent polarity reversal
743
+ // and also a low clip for very low contrasts (lint trap #2)
744
+ // much of this is for very low contrasts, less than 10
745
+ // therefore for most reversing needs, only loConOffset is important
746
+ outputContrast = SAPC < loClip ? 0.0 : SAPC < loConThresh ? SAPC - SAPC * loConFactor * loConOffset : SAPC - loConOffset;
747
+ } else {
748
+ // For reverse polarity, light text on dark
749
+ // WoB should always return negative value.
750
+
751
+ const SAPC = (Ybg ** revBG - Ytxt ** revTXT) * scaleWoB;
752
+ outputContrast = SAPC > -loClip ? 0.0 : SAPC > -loConThresh ? SAPC - SAPC * loConFactor * loConOffset : SAPC + loConOffset;
753
+ }
754
+ return outputContrast * 100;
755
+ }
756
+
663
757
  /* eslint-disable no-console */
664
758
 
665
759
  function consoleWarn(message) {
@@ -1016,36 +1110,13 @@ function getContrast(first, second) {
1016
1110
  const dark = Math.min(l1, l2);
1017
1111
  return (light + 0.05) / (dark + 0.05);
1018
1112
  }
1019
-
1020
- // Utilities
1021
-
1022
- // Types
1023
-
1024
- function useToggleScope(source, fn) {
1025
- let scope;
1026
- function start() {
1027
- scope = effectScope();
1028
- scope.run(() => fn.length ? fn(() => {
1029
- scope?.stop();
1030
- start();
1031
- }) : fn());
1032
- }
1033
- watch(source, active => {
1034
- if (active && !scope) {
1035
- start();
1036
- } else if (!active) {
1037
- scope?.stop();
1038
- scope = undefined;
1039
- }
1040
- }, {
1041
- immediate: true
1042
- });
1043
- onScopeDispose(() => {
1044
- scope?.stop();
1045
- });
1113
+ function getForeground(color) {
1114
+ const blackContrast = Math.abs(APCAcontrast(parseColor(0), parseColor(color)));
1115
+ const whiteContrast = Math.abs(APCAcontrast(parseColor(0xffffff), parseColor(color)));
1116
+ return whiteContrast > Math.min(blackContrast, 50) ? '#fff' : '#000';
1046
1117
  }
1047
1118
 
1048
- // Composables
1119
+ // Utilities
1049
1120
 
1050
1121
  // Types
1051
1122
 
@@ -1067,6 +1138,7 @@ function provideDefaults(defaults, options) {
1067
1138
  const scoped = unref(options?.scoped);
1068
1139
  const reset = unref(options?.reset);
1069
1140
  const root = unref(options?.root);
1141
+ if (providedDefaults.value == null && !(scoped || reset || root)) return injectedDefaults.value;
1070
1142
  let properties = mergeDeep(providedDefaults.value, {
1071
1143
  prev: injectedDefaults.value
1072
1144
  });
@@ -1122,16 +1194,16 @@ function internalUseDefaults() {
1122
1194
  let [key] = _ref;
1123
1195
  return key.startsWith(key[0].toUpperCase());
1124
1196
  });
1125
- if (subComponents.length) _subcomponentDefaults.value = Object.fromEntries(subComponents);
1197
+ _subcomponentDefaults.value = subComponents.length ? Object.fromEntries(subComponents) : undefined;
1198
+ } else {
1199
+ _subcomponentDefaults.value = undefined;
1126
1200
  }
1127
1201
  });
1128
1202
  function provideSubDefaults() {
1129
- // If subcomponent defaults are provided, override any
1130
- // subcomponents provided by the component's setup function.
1131
- // This uses injectSelf so must be done after the original setup to work.
1132
- useToggleScope(_subcomponentDefaults, () => {
1133
- provideDefaults(mergeDeep(injectSelf(DefaultsSymbol)?.value ?? {}, _subcomponentDefaults.value));
1134
- });
1203
+ const injected = injectSelf(DefaultsSymbol, vm);
1204
+ provide(DefaultsSymbol, computed(() => {
1205
+ return _subcomponentDefaults.value ? mergeDeep(injected?.value ?? {}, _subcomponentDefaults.value) : injected?.value;
1206
+ }));
1135
1207
  }
1136
1208
  return {
1137
1209
  props: _props,
@@ -1313,9 +1385,10 @@ function isPotentiallyScrollable(el) {
1313
1385
  // Types
1314
1386
 
1315
1387
  function injectSelf(key) {
1388
+ let vm = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstance('injectSelf');
1316
1389
  const {
1317
1390
  provides
1318
- } = getCurrentInstance('injectSelf');
1391
+ } = vm;
1319
1392
  if (provides && key in provides) {
1320
1393
  // TS doesn't allow symbol as index type
1321
1394
  return provides[key];
@@ -1792,6 +1865,34 @@ const defaultRtl = {
1792
1865
  zhHant: false
1793
1866
  };
1794
1867
 
1868
+ // Utilities
1869
+
1870
+ // Types
1871
+
1872
+ function useToggleScope(source, fn) {
1873
+ let scope;
1874
+ function start() {
1875
+ scope = effectScope();
1876
+ scope.run(() => fn.length ? fn(() => {
1877
+ scope?.stop();
1878
+ start();
1879
+ }) : fn());
1880
+ }
1881
+ watch(source, active => {
1882
+ if (active && !scope) {
1883
+ start();
1884
+ } else if (!active) {
1885
+ scope?.stop();
1886
+ scope = undefined;
1887
+ }
1888
+ }, {
1889
+ immediate: true
1890
+ });
1891
+ onScopeDispose(() => {
1892
+ scope?.stop();
1893
+ });
1894
+ }
1895
+
1795
1896
  // Composables
1796
1897
 
1797
1898
  // Types
@@ -1993,94 +2094,6 @@ function useRtl() {
1993
2094
  };
1994
2095
  }
1995
2096
 
1996
- /**
1997
- * WCAG 3.0 APCA perceptual contrast algorithm from https://github.com/Myndex/SAPC-APCA
1998
- * @licence https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
1999
- * @see https://www.w3.org/WAI/GL/task-forces/silver/wiki/Visual_Contrast_of_Text_Subgroup
2000
- */
2001
- // Types
2002
-
2003
- // MAGICAL NUMBERS
2004
-
2005
- // sRGB Conversion to Relative Luminance (Y)
2006
-
2007
- // Transfer Curve (aka "Gamma") for sRGB linearization
2008
- // Simple power curve vs piecewise described in docs
2009
- // Essentially, 2.4 best models actual display
2010
- // characteristics in combination with the total method
2011
- const mainTRC = 2.4;
2012
- const Rco = 0.2126729; // sRGB Red Coefficient (from matrix)
2013
- const Gco = 0.7151522; // sRGB Green Coefficient (from matrix)
2014
- const Bco = 0.0721750; // sRGB Blue Coefficient (from matrix)
2015
-
2016
- // For Finding Raw SAPC Contrast from Relative Luminance (Y)
2017
-
2018
- // Constants for SAPC Power Curve Exponents
2019
- // One pair for normal text, and one for reverse
2020
- // These are the "beating heart" of SAPC
2021
- const normBG = 0.55;
2022
- const normTXT = 0.58;
2023
- const revTXT = 0.57;
2024
- const revBG = 0.62;
2025
-
2026
- // For Clamping and Scaling Values
2027
-
2028
- const blkThrs = 0.03; // Level that triggers the soft black clamp
2029
- const blkClmp = 1.45; // Exponent for the soft black clamp curve
2030
- const deltaYmin = 0.0005; // Lint trap
2031
- const scaleBoW = 1.25; // Scaling for dark text on light
2032
- const scaleWoB = 1.25; // Scaling for light text on dark
2033
- const loConThresh = 0.078; // Threshold for new simple offset scale
2034
- const loConFactor = 12.82051282051282; // = 1/0.078,
2035
- const loConOffset = 0.06; // The simple offset
2036
- const loClip = 0.001; // Output clip (lint trap #2)
2037
-
2038
- function APCAcontrast(text, background) {
2039
- // Linearize sRGB
2040
- const Rtxt = (text.r / 255) ** mainTRC;
2041
- const Gtxt = (text.g / 255) ** mainTRC;
2042
- const Btxt = (text.b / 255) ** mainTRC;
2043
- const Rbg = (background.r / 255) ** mainTRC;
2044
- const Gbg = (background.g / 255) ** mainTRC;
2045
- const Bbg = (background.b / 255) ** mainTRC;
2046
-
2047
- // Apply the standard coefficients and sum to Y
2048
- let Ytxt = Rtxt * Rco + Gtxt * Gco + Btxt * Bco;
2049
- let Ybg = Rbg * Rco + Gbg * Gco + Bbg * Bco;
2050
-
2051
- // Soft clamp Y when near black.
2052
- // Now clamping all colors to prevent crossover errors
2053
- if (Ytxt <= blkThrs) Ytxt += (blkThrs - Ytxt) ** blkClmp;
2054
- if (Ybg <= blkThrs) Ybg += (blkThrs - Ybg) ** blkClmp;
2055
-
2056
- // Return 0 Early for extremely low ∆Y (lint trap #1)
2057
- if (Math.abs(Ybg - Ytxt) < deltaYmin) return 0.0;
2058
-
2059
- // SAPC CONTRAST
2060
-
2061
- let outputContrast; // For weighted final values
2062
- if (Ybg > Ytxt) {
2063
- // For normal polarity, black text on white
2064
- // Calculate the SAPC contrast value and scale
2065
-
2066
- const SAPC = (Ybg ** normBG - Ytxt ** normTXT) * scaleBoW;
2067
-
2068
- // NEW! SAPC SmoothScale™
2069
- // Low Contrast Smooth Scale Rollout to prevent polarity reversal
2070
- // and also a low clip for very low contrasts (lint trap #2)
2071
- // much of this is for very low contrasts, less than 10
2072
- // therefore for most reversing needs, only loConOffset is important
2073
- outputContrast = SAPC < loClip ? 0.0 : SAPC < loConThresh ? SAPC - SAPC * loConFactor * loConOffset : SAPC - loConOffset;
2074
- } else {
2075
- // For reverse polarity, light text on dark
2076
- // WoB should always return negative value.
2077
-
2078
- const SAPC = (Ybg ** revBG - Ytxt ** revTXT) * scaleWoB;
2079
- outputContrast = SAPC > -loClip ? 0.0 : SAPC > -loConThresh ? SAPC - SAPC * loConFactor * loConOffset : SAPC + loConOffset;
2080
- }
2081
- return outputContrast * 100;
2082
- }
2083
-
2084
2097
  // Utilities
2085
2098
 
2086
2099
  // Types
@@ -2216,8 +2229,6 @@ function createTheme(options) {
2216
2229
  if (/^on-[a-z]/.test(color) || theme.colors[`on-${color}`]) continue;
2217
2230
  const onColor = `on-${color}`;
2218
2231
  const colorVal = parseColor(theme.colors[color]);
2219
- const blackContrast = Math.abs(APCAcontrast(parseColor(0), colorVal));
2220
- const whiteContrast = Math.abs(APCAcontrast(parseColor(0xffffff), colorVal));
2221
2232
 
2222
2233
  // TODO: warn about poor color selections
2223
2234
  // const contrastAsText = Math.abs(APCAcontrast(colorVal, colorToInt(theme.colors.background)))
@@ -2229,7 +2240,7 @@ function createTheme(options) {
2229
2240
  // }
2230
2241
 
2231
2242
  // Prefer white text if both have an acceptable contrast ratio
2232
- theme.colors[onColor] = whiteContrast > Math.min(blackContrast, 50) ? '#fff' : '#000';
2243
+ theme.colors[onColor] = getForeground(colorVal);
2233
2244
  }
2234
2245
  }
2235
2246
  return acc;
@@ -3258,6 +3269,11 @@ function useColor(colors) {
3258
3269
  if (colors.value.background) {
3259
3270
  if (isCssColor(colors.value.background)) {
3260
3271
  styles.backgroundColor = colors.value.background;
3272
+ if (!colors.value.text) {
3273
+ const textColor = getForeground(styles.backgroundColor);
3274
+ styles.color = textColor;
3275
+ styles.caretColor = textColor;
3276
+ }
3261
3277
  } else {
3262
3278
  classes.push(`bg-${colors.value.background}`);
3263
3279
  }
@@ -5903,7 +5919,8 @@ const VSelectionControl = genericComponent()({
5903
5919
  "icon": icon.value
5904
5920
  }, null), inputNode])]), [[resolveDirective("ripple"), props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), label && createVNode(VLabel, {
5905
5921
  "for": id.value,
5906
- "clickable": true
5922
+ "clickable": true,
5923
+ "onClick": e => e.stopPropagation()
5907
5924
  }, {
5908
5925
  default: () => [label]
5909
5926
  })]);
@@ -5952,16 +5969,19 @@ const VCheckboxBtn = genericComponent()({
5952
5969
  const trueIcon = computed(() => {
5953
5970
  return indeterminate.value ? props.indeterminateIcon : props.trueIcon;
5954
5971
  });
5955
- useRender(() => createVNode(VSelectionControl, mergeProps(props, {
5956
- "modelValue": model.value,
5957
- "onUpdate:modelValue": [$event => model.value = $event, onChange],
5958
- "class": ['v-checkbox-btn', props.class],
5959
- "style": props.style,
5960
- "type": "checkbox",
5961
- "falseIcon": falseIcon.value,
5962
- "trueIcon": trueIcon.value,
5963
- "aria-checked": indeterminate.value ? 'mixed' : undefined
5964
- }), slots));
5972
+ useRender(() => {
5973
+ const controlProps = omit(VSelectionControl.filterProps(props)[0], ['modelValue']);
5974
+ return createVNode(VSelectionControl, mergeProps(controlProps, {
5975
+ "modelValue": model.value,
5976
+ "onUpdate:modelValue": [$event => model.value = $event, onChange],
5977
+ "class": ['v-checkbox-btn', props.class],
5978
+ "style": props.style,
5979
+ "type": "checkbox",
5980
+ "falseIcon": falseIcon.value,
5981
+ "trueIcon": trueIcon.value,
5982
+ "aria-checked": indeterminate.value ? 'mixed' : undefined
5983
+ }), slots);
5984
+ });
5965
5985
  return {};
5966
5986
  }
5967
5987
  });
@@ -6525,12 +6545,12 @@ const VCheckbox = genericComponent()({
6525
6545
  const uid = getUid();
6526
6546
  const id = computed(() => props.id || `checkbox-${uid}`);
6527
6547
  useRender(() => {
6528
- const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
6548
+ const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
6529
6549
  const [inputProps, _1] = VInput.filterProps(props);
6530
6550
  const [checkboxProps, _2] = VCheckboxBtn.filterProps(props);
6531
6551
  return createVNode(VInput, mergeProps({
6532
6552
  "class": ['v-checkbox', props.class]
6533
- }, inputAttrs, inputProps, {
6553
+ }, rootAttrs, inputProps, {
6534
6554
  "modelValue": model.value,
6535
6555
  "onUpdate:modelValue": $event => model.value = $event,
6536
6556
  "id": id.value,
@@ -10858,6 +10878,7 @@ const VSelect = genericComponent()({
10858
10878
  } = useLocale();
10859
10879
  const vTextFieldRef = ref();
10860
10880
  const vMenuRef = ref();
10881
+ const vVirtualScrollRef = ref();
10861
10882
  const _menu = useProxiedModel(props, 'menu');
10862
10883
  const menu = computed({
10863
10884
  get: () => _menu.value,
@@ -10987,6 +11008,14 @@ const VSelect = genericComponent()({
10987
11008
  vTextFieldRef.value.value = '';
10988
11009
  }
10989
11010
  }
11011
+ watch(menu, () => {
11012
+ if (!props.hideSelected && menu.value && selections.value.length) {
11013
+ const index = displayItems.value.findIndex(item => selections.value.some(s => item.value === s.value));
11014
+ IN_BROWSER && window.requestAnimationFrame(() => {
11015
+ index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
11016
+ });
11017
+ }
11018
+ });
10990
11019
  useRender(() => {
10991
11020
  const hasChips = !!(props.chips || slots.chip);
10992
11021
  const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
@@ -11048,6 +11077,7 @@ const VSelect = genericComponent()({
11048
11077
  default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
11049
11078
  "title": t(props.noDataText)
11050
11079
  }, null)), createVNode(VVirtualScroll, {
11080
+ "ref": vVirtualScrollRef,
11051
11081
  "renderless": true,
11052
11082
  "items": displayItems.value
11053
11083
  }, {
@@ -11308,6 +11338,7 @@ const VAutocomplete = genericComponent()({
11308
11338
  const isPristine = shallowRef(true);
11309
11339
  const listHasFocus = shallowRef(false);
11310
11340
  const vMenuRef = ref();
11341
+ const vVirtualScrollRef = ref();
11311
11342
  const _menu = useProxiedModel(props, 'menu');
11312
11343
  const menu = computed({
11313
11344
  get: () => _menu.value,
@@ -11398,7 +11429,7 @@ const VAutocomplete = genericComponent()({
11398
11429
  menu.value = false;
11399
11430
  }
11400
11431
  if (highlightFirst.value && ['Enter', 'Tab'].includes(e.key)) {
11401
- select(filteredItems.value[0]);
11432
+ select(displayItems.value[0]);
11402
11433
  }
11403
11434
  if (e.key === 'ArrowDown' && highlightFirst.value) {
11404
11435
  listRef.value?.focus('next');
@@ -11511,6 +11542,14 @@ const VAutocomplete = genericComponent()({
11511
11542
  if (val) menu.value = true;
11512
11543
  isPristine.value = !val;
11513
11544
  });
11545
+ watch(menu, () => {
11546
+ if (!props.hideSelected && menu.value && selections.value.length) {
11547
+ const index = displayItems.value.findIndex(item => selections.value.some(s => item.value === s.value));
11548
+ IN_BROWSER && window.requestAnimationFrame(() => {
11549
+ index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
11550
+ });
11551
+ }
11552
+ });
11514
11553
  useRender(() => {
11515
11554
  const hasChips = !!(props.chips || slots.chip);
11516
11555
  const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
@@ -11570,6 +11609,7 @@ const VAutocomplete = genericComponent()({
11570
11609
  default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
11571
11610
  "title": t(props.noDataText)
11572
11611
  }, null)), createVNode(VVirtualScroll, {
11612
+ "ref": vVirtualScrollRef,
11573
11613
  "renderless": true,
11574
11614
  "items": displayItems.value
11575
11615
  }, {
@@ -14841,6 +14881,7 @@ const VCombobox = genericComponent()({
14841
14881
  const isPristine = shallowRef(true);
14842
14882
  const listHasFocus = shallowRef(false);
14843
14883
  const vMenuRef = ref();
14884
+ const vVirtualScrollRef = ref();
14844
14885
  const _menu = useProxiedModel(props, 'menu');
14845
14886
  const menu = computed({
14846
14887
  get: () => _menu.value,
@@ -15074,6 +15115,14 @@ const VCombobox = genericComponent()({
15074
15115
  search.value = '';
15075
15116
  }
15076
15117
  });
15118
+ watch(menu, () => {
15119
+ if (!props.hideSelected && menu.value && selections.value.length) {
15120
+ const index = displayItems.value.findIndex(item => selections.value.some(s => item.value === s.value));
15121
+ IN_BROWSER && window.requestAnimationFrame(() => {
15122
+ index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
15123
+ });
15124
+ }
15125
+ });
15077
15126
  useRender(() => {
15078
15127
  const hasChips = !!(props.chips || slots.chip);
15079
15128
  const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
@@ -15132,6 +15181,7 @@ const VCombobox = genericComponent()({
15132
15181
  default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? createVNode(VListItem, {
15133
15182
  "title": t(props.noDataText)
15134
15183
  }, null)), createVNode(VVirtualScroll, {
15184
+ "ref": vVirtualScrollRef,
15135
15185
  "renderless": true,
15136
15186
  "items": displayItems.value
15137
15187
  }, {
@@ -17523,7 +17573,7 @@ const VRadioGroup = genericComponent()({
17523
17573
  const id = computed(() => props.id || `radio-group-${uid}`);
17524
17574
  const model = useProxiedModel(props, 'modelValue');
17525
17575
  useRender(() => {
17526
- const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
17576
+ const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
17527
17577
  const [inputProps, _1] = VInput.filterProps(props);
17528
17578
  const [controlProps, _2] = VSelectionControl.filterProps(props);
17529
17579
  const label = slots.label ? slots.label({
@@ -17535,7 +17585,7 @@ const VRadioGroup = genericComponent()({
17535
17585
  return createVNode(VInput, mergeProps({
17536
17586
  "class": ['v-radio-group', props.class],
17537
17587
  "style": props.style
17538
- }, inputAttrs, inputProps, {
17588
+ }, rootAttrs, inputProps, {
17539
17589
  "modelValue": model.value,
17540
17590
  "onUpdate:modelValue": $event => model.value = $event,
17541
17591
  "id": id.value
@@ -18512,6 +18562,7 @@ const VSwitch = genericComponent()({
18512
18562
  focus,
18513
18563
  blur
18514
18564
  } = useFocus(props);
18565
+ const control = ref();
18515
18566
  const loaderColor = computed(() => {
18516
18567
  return typeof props.loading === 'string' && props.loading !== '' ? props.loading : props.color;
18517
18568
  });
@@ -18522,16 +18573,15 @@ const VSwitch = genericComponent()({
18522
18573
  indeterminate.value = false;
18523
18574
  }
18524
18575
  }
18576
+ function onTrackClick(e) {
18577
+ e.stopPropagation();
18578
+ e.preventDefault();
18579
+ control.value?.input?.click();
18580
+ }
18525
18581
  useRender(() => {
18526
- const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
18582
+ const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
18527
18583
  const [inputProps, _1] = VInput.filterProps(props);
18528
18584
  const [controlProps, _2] = VSelectionControl.filterProps(props);
18529
- const control = ref();
18530
- function onClick(e) {
18531
- e.stopPropagation();
18532
- e.preventDefault();
18533
- control.value?.input?.click();
18534
- }
18535
18585
  return createVNode(VInput, mergeProps({
18536
18586
  "class": ['v-switch', {
18537
18587
  'v-switch--inset': props.inset
@@ -18539,7 +18589,7 @@ const VSwitch = genericComponent()({
18539
18589
  'v-switch--indeterminate': indeterminate.value
18540
18590
  }, loaderClasses.value, props.class],
18541
18591
  "style": props.style
18542
- }, inputAttrs, inputProps, {
18592
+ }, rootAttrs, inputProps, {
18543
18593
  "id": id.value,
18544
18594
  "focused": isFocused.value
18545
18595
  }), {
@@ -18569,7 +18619,7 @@ const VSwitch = genericComponent()({
18569
18619
  ...slots,
18570
18620
  default: () => createVNode("div", {
18571
18621
  "class": "v-switch__track",
18572
- "onClick": onClick
18622
+ "onClick": onTrackClick
18573
18623
  }, null),
18574
18624
  input: _ref3 => {
18575
18625
  let {
@@ -21721,6 +21771,98 @@ const VDataTableServer = genericComponent()({
21721
21771
  }
21722
21772
  });
21723
21773
 
21774
+ // Types
21775
+
21776
+ const makeVDatePickerControlsProps = propsFactory({
21777
+ displayDate: String,
21778
+ disabled: {
21779
+ type: [Boolean, String],
21780
+ default: false
21781
+ },
21782
+ nextIcon: {
21783
+ type: [String],
21784
+ default: '$next'
21785
+ },
21786
+ prevIcon: {
21787
+ type: [String],
21788
+ default: '$prev'
21789
+ },
21790
+ expandIcon: {
21791
+ type: [String],
21792
+ default: '$expand'
21793
+ },
21794
+ collapseIcon: {
21795
+ type: [String],
21796
+ default: '$collapse'
21797
+ },
21798
+ viewMode: {
21799
+ type: String,
21800
+ default: 'month'
21801
+ }
21802
+ }, 'VDatePickerControls');
21803
+ const VDatePickerControls = genericComponent()({
21804
+ name: 'VDatePickerControls',
21805
+ props: makeVDatePickerControlsProps(),
21806
+ emits: {
21807
+ 'click:mode': () => true,
21808
+ 'click:prev': () => true,
21809
+ 'click:next': () => true
21810
+ },
21811
+ setup(props, _ref) {
21812
+ let {
21813
+ emit
21814
+ } = _ref;
21815
+ const modeIcon = computed(() => {
21816
+ return props.viewMode === 'month' ? props.expandIcon : props.collapseIcon;
21817
+ });
21818
+ const disableMode = computed(() => {
21819
+ return Array.isArray(props.disabled) ? props.disabled.includes('mode') : props.disabled;
21820
+ });
21821
+ const disablePrev = computed(() => {
21822
+ return Array.isArray(props.disabled) ? props.disabled.includes('prev') : props.disabled;
21823
+ });
21824
+ const disableNext = computed(() => {
21825
+ return Array.isArray(props.disabled) ? props.disabled.includes('next') : props.disabled;
21826
+ });
21827
+ function onClickPrev() {
21828
+ emit('click:prev');
21829
+ }
21830
+ function onClickNext() {
21831
+ emit('click:next');
21832
+ }
21833
+ function onClickMode() {
21834
+ emit('click:mode');
21835
+ }
21836
+ useRender(() => {
21837
+ return createVNode("div", {
21838
+ "class": "v-date-picker-controls"
21839
+ }, [createVNode("div", {
21840
+ "class": "v-date-picker-controls__date"
21841
+ }, [props.displayDate]), createVNode(VBtn, {
21842
+ "disabled": disableMode.value,
21843
+ "key": "expand-btn",
21844
+ "icon": modeIcon.value,
21845
+ "variant": "text",
21846
+ "onClick": onClickMode
21847
+ }, null), createVNode(VSpacer, null, null), createVNode("div", {
21848
+ "key": "month-buttons",
21849
+ "class": "v-date-picker-controls__month"
21850
+ }, [createVNode(VBtn, {
21851
+ "disabled": disablePrev.value,
21852
+ "icon": props.prevIcon,
21853
+ "variant": "text",
21854
+ "onClick": onClickPrev
21855
+ }, null), createVNode(VBtn, {
21856
+ "disabled": disableNext.value,
21857
+ "icon": props.nextIcon,
21858
+ "variant": "text",
21859
+ "onClick": onClickNext
21860
+ }, null)])]);
21861
+ });
21862
+ return {};
21863
+ }
21864
+ });
21865
+
21724
21866
  // Utilities
21725
21867
 
21726
21868
  // Types
@@ -22289,76 +22431,6 @@ function createDateInput(props, isRange) {
22289
22431
  };
22290
22432
  }
22291
22433
 
22292
- const makeVDatePickerControlsProps = propsFactory({
22293
- nextIcon: {
22294
- type: [String],
22295
- default: '$next'
22296
- },
22297
- prevIcon: {
22298
- type: [String],
22299
- default: '$prev'
22300
- },
22301
- expandIcon: {
22302
- type: [String],
22303
- default: '$expand'
22304
- },
22305
- collapseIcon: {
22306
- type: [String],
22307
- default: '$collapse'
22308
- },
22309
- range: {
22310
- default: false,
22311
- type: [Boolean, String],
22312
- validator: v => v === false || ['start', 'end'].includes(v)
22313
- },
22314
- ...omit(makeDateProps(), ['modelValue', 'inputMode'])
22315
- }, 'VDatePickerControls');
22316
- const VDatePickerControls = genericComponent()({
22317
- name: 'VDatePickerControls',
22318
- props: makeVDatePickerControlsProps(),
22319
- emits: {
22320
- ...omit(dateEmits, ['update:modelValue', 'update:inputMode'])
22321
- },
22322
- setup(props, _ref) {
22323
- let {
22324
- emit
22325
- } = _ref;
22326
- const adapter = useDate();
22327
- const monthAndYear = computed(() => {
22328
- const month = props.range === 'end' ? adapter.addMonths(props.displayDate, 1) : props.displayDate;
22329
- return adapter.format(month, 'monthAndYear');
22330
- });
22331
- useRender(() => {
22332
- const prevBtn = createVNode(VBtn, {
22333
- "variant": "text",
22334
- "icon": props.prevIcon,
22335
- "onClick": () => emit('update:displayDate', adapter.addMonths(props.displayDate, -1))
22336
- }, null);
22337
- const nextBtn = createVNode(VBtn, {
22338
- "variant": "text",
22339
- "icon": props.nextIcon,
22340
- "onClick": () => emit('update:displayDate', adapter.addMonths(props.displayDate, 1))
22341
- }, null);
22342
- return createVNode("div", {
22343
- "class": "v-date-picker-controls"
22344
- }, [props.viewMode === 'month' && props.range === 'start' && prevBtn, !!props.range && createVNode(VSpacer, {
22345
- "key": "range-spacer"
22346
- }, null), createVNode("div", {
22347
- "class": "v-date-picker-controls__date"
22348
- }, [monthAndYear.value]), createVNode(VBtn, {
22349
- "key": "expand-btn",
22350
- "variant": "text",
22351
- "icon": props.viewMode === 'month' ? props.expandIcon : props.collapseIcon,
22352
- "onClick": () => emit('update:viewMode', props.viewMode === 'month' ? 'year' : 'month')
22353
- }, null), createVNode(VSpacer, null, null), props.viewMode === 'month' && !props.range && createVNode("div", {
22354
- "class": "v-date-picker-controls__month",
22355
- "key": "month-buttons"
22356
- }, [prevBtn, nextBtn]), props.viewMode === 'month' && props.range === 'end' && nextBtn]);
22357
- });
22358
- return {};
22359
- }
22360
- });
22361
-
22362
22434
  // Composables
22363
22435
 
22364
22436
  // Types
@@ -22415,6 +22487,8 @@ const makeVDatePickerMonthProps = propsFactory({
22415
22487
  side: {
22416
22488
  type: String
22417
22489
  },
22490
+ min: [Number, String, Date],
22491
+ max: [Number, String, Date],
22418
22492
  ...omit(makeDateProps(), ['inputMode', 'viewMode'])
22419
22493
  }, 'VDatePickerMonth');
22420
22494
  const VDatePickerMonth = genericComponent()({
@@ -22490,6 +22564,7 @@ const VDatePickerMonth = genericComponent()({
22490
22564
  const startDate = validDates[0];
22491
22565
  const endDate = validDates[1];
22492
22566
  return days.map((date, index) => {
22567
+ const isDisabled = !!(props.min && adapter.isAfter(props.min, date) || props.max && adapter.isAfter(date, props.max));
22493
22568
  const isStart = startDate && adapter.isSameDay(date, startDate);
22494
22569
  const isEnd = endDate && adapter.isSameDay(date, endDate);
22495
22570
  const isAdjacent = !adapter.isSameMonth(date, month.value);
@@ -22500,6 +22575,7 @@ const VDatePickerMonth = genericComponent()({
22500
22575
  formatted: adapter.format(date, 'keyboardDate'),
22501
22576
  year: adapter.getYear(date),
22502
22577
  month: adapter.getMonth(date),
22578
+ isDisabled,
22503
22579
  isWeekStart: index % 7 === 0,
22504
22580
  isWeekEnd: index % 7 === 6,
22505
22581
  isSelected: isStart || isEnd,
@@ -22642,50 +22718,55 @@ const VDatePickerMonth = genericComponent()({
22642
22718
  "onTouchstart": handleMousedown
22643
22719
  }, [!props.hideWeekdays && adapter.getWeekdays().map(weekDay => createVNode("div", {
22644
22720
  "class": ['v-date-picker-month__day', 'v-date-picker-month__weekday']
22645
- }, [weekDay])), daysInMonth.value.map((item, index) => createVNode("div", {
22646
- "class": ['v-date-picker-month__day', {
22647
- 'v-date-picker-month__day--selected': item.isSelected,
22648
- 'v-date-picker-month__day--start': item.isStart,
22649
- 'v-date-picker-month__day--end': item.isEnd,
22650
- 'v-date-picker-month__day--adjacent': item.isAdjacent,
22651
- 'v-date-picker-month__day--hide-adjacent': item.isHidden,
22652
- 'v-date-picker-month__day--week-start': item.isWeekStart,
22653
- 'v-date-picker-month__day--week-end': item.isWeekEnd,
22654
- 'v-date-picker-month__day--hovered': item.isHovered
22655
- }],
22656
- "data-v-date": !item.isHidden ? item.isoDate : undefined
22657
- }, [item.inRange && createVNode("div", {
22658
- "key": "in-range",
22659
- "class": ['v-date-picker-month__day--range', backgroundColorClasses.value],
22660
- "style": backgroundColorStyles.value
22661
- }, null), item.inHover && !item.isStart && !item.isEnd && !item.isHovered && !item.inRange && createVNode("div", {
22662
- "key": "in-hover",
22663
- "class": "v-date-picker-month__day--hover"
22664
- }, null), (props.showAdjacentMonths || !item.isAdjacent) && createVNode(VBtn, {
22665
- "icon": true,
22666
- "ripple": false,
22667
- "variant": (item.isToday || item.isHovered) && !item.isSelected ? 'outlined' : 'flat',
22668
- "active": item.isSelected,
22669
- "color": item.isSelected || item.isToday ? props.color : item.isHovered ? undefined : 'transparent'
22670
- }, {
22671
- default: () => [item.localized]
22672
- })]))])]);
22721
+ }, [weekDay])), daysInMonth.value.map((item, index) => {
22722
+ const color = item.isSelected || item.isToday ? props.color : item.isHovered || item.isDisabled ? undefined : 'transparent';
22723
+ const variant = item.isDisabled ? 'text' : (item.isToday || item.isHovered) && !item.isSelected ? 'outlined' : 'flat';
22724
+ return createVNode("div", {
22725
+ "class": ['v-date-picker-month__day', {
22726
+ 'v-date-picker-month__day--selected': item.isSelected,
22727
+ 'v-date-picker-month__day--start': item.isStart,
22728
+ 'v-date-picker-month__day--end': item.isEnd,
22729
+ 'v-date-picker-month__day--adjacent': item.isAdjacent,
22730
+ 'v-date-picker-month__day--hide-adjacent': item.isHidden,
22731
+ 'v-date-picker-month__day--week-start': item.isWeekStart,
22732
+ 'v-date-picker-month__day--week-end': item.isWeekEnd,
22733
+ 'v-date-picker-month__day--hovered': item.isHovered
22734
+ }],
22735
+ "data-v-date": !item.isHidden && !item.isDisabled ? item.isoDate : undefined
22736
+ }, [item.inRange && createVNode("div", {
22737
+ "key": "in-range",
22738
+ "class": ['v-date-picker-month__day--range', backgroundColorClasses.value],
22739
+ "style": backgroundColorStyles.value
22740
+ }, null), item.inHover && !item.isStart && !item.isEnd && !item.isHovered && !item.inRange && createVNode("div", {
22741
+ "key": "in-hover",
22742
+ "class": "v-date-picker-month__day--hover"
22743
+ }, null), (props.showAdjacentMonths || !item.isAdjacent) && createVNode(VBtn, {
22744
+ "active": item.isSelected,
22745
+ "color": color,
22746
+ "disabled": item.isDisabled,
22747
+ "icon": true,
22748
+ "ripple": false,
22749
+ "variant": variant
22750
+ }, {
22751
+ default: () => [item.localized]
22752
+ })]);
22753
+ })])]);
22673
22754
  }
22674
22755
  });
22675
22756
 
22676
22757
  const makeVDatePickerYearsProps = propsFactory({
22677
22758
  color: String,
22678
- min: Number,
22679
- max: Number,
22680
22759
  height: [String, Number],
22681
- displayDate: null
22760
+ displayDate: null,
22761
+ min: [Number, String, Date],
22762
+ max: [Number, String, Date]
22682
22763
  }, 'VDatePickerYears');
22683
22764
  const VDatePickerYears = genericComponent()({
22684
22765
  name: 'VDatePickerYears',
22685
22766
  props: makeVDatePickerYearsProps(),
22686
22767
  emits: {
22687
22768
  'update:displayDate': date => true,
22688
- 'update:viewMode': date => true
22769
+ 'click:mode': () => true
22689
22770
  },
22690
22771
  setup(props, _ref) {
22691
22772
  let {
@@ -22694,8 +22775,8 @@ const VDatePickerYears = genericComponent()({
22694
22775
  const adapter = useDate();
22695
22776
  const displayYear = computed(() => adapter.getYear(props.displayDate ?? new Date()));
22696
22777
  const years = computed(() => {
22697
- const min = props.min ?? displayYear.value - 50 - 2;
22698
- const max = props.max ?? displayYear.value + 50;
22778
+ const min = props.min ? adapter.date(props.min).getFullYear() : displayYear.value - 100;
22779
+ const max = props.max ? adapter.date(props.max).getFullYear() : displayYear.value + 50;
22699
22780
  return createRange(max - min, min);
22700
22781
  });
22701
22782
  const yearRef = ref();
@@ -22711,19 +22792,21 @@ const VDatePickerYears = genericComponent()({
22711
22792
  }
22712
22793
  }, [createVNode("div", {
22713
22794
  "class": "v-date-picker-years__content"
22714
- }, [years.value.map(year => createVNode(VBtn, {
22715
- "ref": year === displayYear.value ? yearRef : undefined,
22716
- "variant": year === displayYear.value ? 'flat' : 'text',
22717
- "rounded": "xl",
22718
- "active": year === displayYear.value,
22719
- "color": year === displayYear.value ? props.color : undefined,
22720
- "onClick": () => {
22795
+ }, [years.value.map(year => {
22796
+ function onClick() {
22721
22797
  emit('update:displayDate', adapter.setYear(props.displayDate, year));
22722
- emit('update:viewMode', 'month');
22723
- }
22724
- }, {
22725
- default: () => [year]
22726
- }))])]));
22798
+ emit('click:mode');
22799
+ }
22800
+ return createVNode(VBtn, {
22801
+ "ref": year === displayYear.value ? yearRef : undefined,
22802
+ "active": year === displayYear.value,
22803
+ "color": year === displayYear.value ? props.color : undefined,
22804
+ "rounded": "xl",
22805
+ "text": String(year),
22806
+ "variant": year === displayYear.value ? 'flat' : 'text',
22807
+ "onClick": onClick
22808
+ }, null);
22809
+ })])]));
22727
22810
  return {};
22728
22811
  }
22729
22812
  });
@@ -23008,21 +23091,24 @@ const VDatePicker = genericComponent()({
23008
23091
  const header = computed(() => model.value.length ? adapter.format(model.value[0], 'normalDateWithWeekday') : t(props.header));
23009
23092
  const headerIcon = computed(() => inputMode.value === 'calendar' ? props.keyboardIcon : props.calendarIcon);
23010
23093
  const headerTransition = computed(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`);
23011
- function updateFromInput(input, index) {
23012
- const {
23013
- isValid,
23014
- date
23015
- } = adapter;
23016
- if (isValid(input)) {
23017
- const newModel = model.value.slice();
23018
- newModel[index] = date(input);
23019
- if (props.hideActions) {
23020
- model.value = newModel;
23021
- } else {
23022
- temporaryModel.value = newModel;
23023
- }
23094
+ const minDate = computed(() => props.min && adapter.isValid(props.min) ? adapter.date(props.min) : null);
23095
+ const maxDate = computed(() => props.max && adapter.isValid(props.max) ? adapter.date(props.max) : null);
23096
+ const disabled = computed(() => {
23097
+ if (!minDate.value && !maxDate.value) return false;
23098
+ const targets = [];
23099
+ if (minDate.value) {
23100
+ const date = adapter.addDays(adapter.startOfMonth(displayDate.value), -1);
23101
+ adapter.isAfter(minDate.value, date) && targets.push('prev');
23024
23102
  }
23025
- }
23103
+ if (maxDate.value) {
23104
+ const date = adapter.addDays(adapter.endOfMonth(displayDate.value), 1);
23105
+ adapter.isAfter(date, maxDate.value) && targets.push('next');
23106
+ }
23107
+ if (minDate.value?.getFullYear() === maxDate.value?.getFullYear()) {
23108
+ targets.push('mode');
23109
+ }
23110
+ return targets;
23111
+ });
23026
23112
  watch(model, val => {
23027
23113
  if (!isEqual(val, temporaryModel.value)) {
23028
23114
  temporaryModel.value = val;
@@ -23037,6 +23123,21 @@ const VDatePicker = genericComponent()({
23037
23123
  isReversing.value = adapter.isBefore(val[0], oldVal[0]);
23038
23124
  }
23039
23125
  });
23126
+ function updateFromInput(input, index) {
23127
+ const {
23128
+ isValid,
23129
+ date
23130
+ } = adapter;
23131
+ if (isValid(input)) {
23132
+ const newModel = model.value.slice();
23133
+ newModel[index] = date(input);
23134
+ if (props.hideActions) {
23135
+ model.value = newModel;
23136
+ } else {
23137
+ temporaryModel.value = newModel;
23138
+ }
23139
+ }
23140
+ }
23040
23141
  function onClickCancel() {
23041
23142
  emit('click:cancel');
23042
23143
  }
@@ -23047,6 +23148,15 @@ const VDatePicker = genericComponent()({
23047
23148
  function onClickAppend() {
23048
23149
  inputMode.value = inputMode.value === 'calendar' ? 'keyboard' : 'calendar';
23049
23150
  }
23151
+ function onClickNext() {
23152
+ displayDate.value = adapter.addMonths(displayDate.value, 1);
23153
+ }
23154
+ function onClickPrev() {
23155
+ displayDate.value = adapter.addMonths(displayDate.value, -1);
23156
+ }
23157
+ function onClickMode() {
23158
+ viewMode.value = viewMode.value === 'month' ? 'year' : 'month';
23159
+ }
23050
23160
  const headerSlotProps = computed(() => ({
23051
23161
  header: header.value,
23052
23162
  appendIcon: headerIcon.value,
@@ -23068,10 +23178,11 @@ const VDatePicker = genericComponent()({
23068
23178
  "key": "header"
23069
23179
  }, headerSlotProps.value), null),
23070
23180
  default: () => inputMode.value === 'calendar' ? createVNode(Fragment, null, [createVNode(VDatePickerControls, mergeProps(datePickerControlsProps, {
23071
- "displayDate": displayDate.value,
23072
- "onUpdate:displayDate": $event => displayDate.value = $event,
23073
- "viewMode": viewMode.value,
23074
- "onUpdate:viewMode": $event => viewMode.value = $event
23181
+ "disabled": disabled.value,
23182
+ "displayDate": adapter.format(displayDate.value, 'monthAndYear'),
23183
+ "onClick:next": onClickNext,
23184
+ "onClick:prev": onClickPrev,
23185
+ "onClick:mode": onClickMode
23075
23186
  }), null), createVNode(VFadeTransition, {
23076
23187
  "hideOnLeave": true
23077
23188
  }, {
@@ -23081,14 +23192,16 @@ const VDatePicker = genericComponent()({
23081
23192
  "modelValue": temporaryModel.value,
23082
23193
  "onUpdate:modelValue": $event => temporaryModel.value = $event,
23083
23194
  "displayDate": displayDate.value,
23084
- "onUpdate:displayDate": $event => displayDate.value = $event
23195
+ "min": minDate.value,
23196
+ "max": maxDate.value
23085
23197
  }), null) : createVNode(VDatePickerYears, mergeProps({
23086
23198
  "key": "date-picker-years"
23087
23199
  }, datePickerYearsProps, {
23088
23200
  "displayDate": displayDate.value,
23089
23201
  "onUpdate:displayDate": $event => displayDate.value = $event,
23090
- "viewMode": viewMode.value,
23091
- "onUpdate:viewMode": $event => viewMode.value = $event
23202
+ "min": minDate.value,
23203
+ "max": maxDate.value,
23204
+ "onClick:mode": onClickMode
23092
23205
  }), null)]
23093
23206
  })]) : createVNode("div", {
23094
23207
  "class": "v-date-picker__input"
@@ -24431,7 +24544,7 @@ function createVuetify$1() {
24431
24544
  date
24432
24545
  };
24433
24546
  }
24434
- const version$1 = "3.3.13";
24547
+ const version$1 = "3.3.14";
24435
24548
  createVuetify$1.version = version$1;
24436
24549
 
24437
24550
  // Vue's inject() can only be used in setup
@@ -24445,7 +24558,7 @@ function inject(key) {
24445
24558
 
24446
24559
  /* eslint-disable local-rules/sort-imports */
24447
24560
 
24448
- const version = "3.3.13";
24561
+ const version = "3.3.14";
24449
24562
 
24450
24563
  /* eslint-disable local-rules/sort-imports */
24451
24564