vuetify 3.8.4 → 3.8.6

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.4
+* Vuetify v3.8.6
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -512,7 +512,7 @@
   }
   function focusChild(el, location) {
     const focusable = focusableChildren(el);
-    if (!location) {
+    if (location == null) {
       if (el === document.activeElement || !el.contains(document.activeElement)) {
         focusable[0]?.focus();
       }
@@ -4510,7 +4510,8 @@
     treeviewCollapse: 'mdi-menu-down',
     treeviewExpand: 'mdi-menu-right',
     eyeDropper: 'mdi-eyedropper',
-    upload: 'mdi-cloud-upload'
+    upload: 'mdi-cloud-upload',
+    color: 'mdi-palette'
   };
   const mdi = {
     // Not using mergeProps here, functional components merge props by default (?)
@@ -6760,13 +6761,18 @@
     };
   }
 
+  // Utilities
+  const RulesSymbol = Symbol.for('vuetify:rules');
+  function useRules(fn) {
+    const resolveRules = vue.inject(RulesSymbol, null);
+    if (!resolveRules) return vue.toRef(fn);
+    return resolveRules(fn);
+  }
+
   // Composables
 
   // Types
 
-  // type ValidationRuleParams = [any, string?]
-  // type ValidationAlias = string | [string, ...ValidationRuleParams]
-
   const makeValidationProps = propsFactory({
     disabled: {
       type: Boolean,
@@ -6789,7 +6795,6 @@
     },
     rules: {
       type: Array,
-      // type: Array as PropType<readonly (ValidationRule | ValidationAlias)[]>,
       default: () => []
     },
     modelValue: null,
@@ -6803,7 +6808,7 @@
     const model = useProxiedModel(props, 'modelValue');
     const validationModel = vue.computed(() => props.validationValue === undefined ? model.value : props.validationValue);
     const form = useForm(props);
-    // const rules = useRules()
+    const rules = useRules(() => props.rules);
     const internalErrorMessages = vue.ref([]);
     const isPristine = vue.shallowRef(true);
     const isDirty = vue.computed(() => !!(wrapInArray(model.value === '' ? null : model.value).length || wrapInArray(validationModel.value === '' ? null : validationModel.value).length));
@@ -6843,28 +6848,6 @@
     });
     const vm = getCurrentInstance('validation');
     const uid = vue.computed(() => props.name ?? vue.unref(id));
-
-    // const resolvedRules = computed(() => props.rules.map(rule => {
-    //   let ruleName: string | null = null
-    //   let ruleParams: ValidationRuleParams = [undefined]
-    //   if (Array.isArray(rule)) {
-    //     ruleName = rule[0]
-    //     ruleParams = rule.slice(1) as ValidationRuleParams
-    //   } else if (typeof rule === 'string') {
-    //     ruleName = rule
-    //   }
-
-    //   if (ruleName !== null) {
-    //     if (ruleName.startsWith('$')) {
-    //       ruleName = ruleName.slice(1)
-    //     }
-
-    //     return rules?.[ruleName]?.(...ruleParams)
-    //   } else {
-    //     return rule
-    //   }
-    // }))
-
     vue.onBeforeMount(() => {
       form.register?.({
         id: uid.value,
@@ -6920,7 +6903,7 @@
       let silent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       const results = [];
       isValidating.value = true;
-      for (const rule of props.rules) {
+      for (const rule of rules.value) {
         if (results.length >= Number(props.maxErrors ?? 1)) {
           break;
         }
@@ -12832,11 +12815,13 @@
         keyboardLookupLastTime = now;
         const item = items.value.find(item => item.title.toLowerCase().startsWith(keyboardLookupPrefix));
         if (item !== undefined) {
-          model.value = [item];
+          if (!props.multiple) {
+            model.value = [item];
+          }
           const index = displayItems.value.indexOf(item);
-          IN_BROWSER && window.requestAnimationFrame(() => {
-            index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
-          });
+          if (~index && IN_BROWSER) {
+            listRef.value?.focus(index);
+          }
         }
       }
 
@@ -13506,11 +13491,6 @@
           menu.value = true;
         }
       });
-      vue.watch(model, value => {
-        if (!props.multiple && !hasSelectionSlot.value) {
-          search.value = value[0]?.title ?? '';
-        }
-      });
       useRender(() => {
         const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
         const isDirty = model.value.length > 0;
@@ -29081,6 +29061,236 @@
 
   // Types
 
+  const makeVColorInputProps = propsFactory({
+    pip: Boolean,
+    pipIcon: {
+      type: String,
+      default: '$color'
+    },
+    ...makeFocusProps(),
+    ...makeVConfirmEditProps(),
+    ...makeVTextFieldProps(),
+    ...omit(makeVColorPickerProps(), ['width'])
+  }, 'VColorInput');
+  const VColorInput = genericComponent()({
+    name: 'VColorInput',
+    props: makeVColorInputProps(),
+    emits: {
+      'update:modelValue': val => true
+    },
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      const {
+        isFocused,
+        focus,
+        blur
+      } = useFocus(props);
+      const model = useProxiedModel(props, 'modelValue');
+      const menu = vue.shallowRef(false);
+      const isInteractive = vue.computed(() => !props.disabled && !props.readonly);
+      const display = vue.computed(() => model.value || null);
+      function onKeydown(e) {
+        if (e.key !== 'Enter') return;
+        if (!menu.value || !isFocused.value) {
+          menu.value = true;
+          return;
+        }
+        const target = e.target;
+        model.value = target.value;
+      }
+      function onClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        menu.value = true;
+      }
+      function onSave() {
+        menu.value = false;
+      }
+      useRender(() => {
+        const confirmEditProps = VConfirmEdit.filterProps(props);
+        const colorPickerProps = VColorPicker.filterProps(omit(props, ['active', 'color']));
+        const textFieldProps = VTextField.filterProps(omit(props, ['prependInnerIcon']));
+        const hasPrepend = !!(slots.prepend || props.pipIcon);
+        return vue.createVNode(VTextField, vue.mergeProps(textFieldProps, {
+          "class": ['v-color-input', props.class],
+          "style": props.style,
+          "modelValue": display.value,
+          "onKeydown": isInteractive.value ? onKeydown : undefined,
+          "focused": menu.value || isFocused.value,
+          "onFocus": focus,
+          "onBlur": blur,
+          "onClick:control": isInteractive.value ? onClick : undefined,
+          "onClick:prependInner": isInteractive.value ? onClick : undefined,
+          "onClick:appendInner": isInteractive.value ? onClick : undefined,
+          "onUpdate:modelValue": val => {
+            model.value = val;
+          }
+        }), {
+          ...slots,
+          prepend: props.pipIcon ? arg => vue.createVNode(vue.Fragment, null, [hasPrepend && vue.createVNode(VIcon, {
+            "color": props.pip ? model.value : undefined,
+            "icon": props.pipIcon
+          }, null), slots.prepend?.(arg)]) : undefined,
+          default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VMenu, {
+            "modelValue": menu.value,
+            "onUpdate:modelValue": $event => menu.value = $event,
+            "activator": "parent",
+            "min-width": "0",
+            "closeOnContentClick": false,
+            "openOnClick": false
+          }, {
+            default: () => [vue.createVNode(VConfirmEdit, vue.mergeProps(confirmEditProps, {
+              "modelValue": model.value,
+              "onUpdate:modelValue": $event => model.value = $event,
+              "onSave": onSave
+            }), {
+              default: _ref2 => {
+                let {
+                  actions,
+                  model: proxyModel,
+                  save,
+                  cancel,
+                  isPristine
+                } = _ref2;
+                return vue.createVNode(VColorPicker, vue.mergeProps(colorPickerProps, {
+                  "modelValue": proxyModel.value,
+                  "onUpdate:modelValue": val => {
+                    proxyModel.value = val;
+                    model.value = val;
+                  },
+                  "onMousedown": e => e.preventDefault()
+                }), {
+                  actions: !props.hideActions ? () => slots.actions?.({
+                    save,
+                    cancel,
+                    isPristine
+                  }) ?? actions() : undefined
+                });
+              }
+            })]
+          }), slots.default?.()])
+        });
+      });
+    }
+  });
+
+  // Composables
+
+  // Types
+
+  // Types
+
+  class DateFormatSpec {
+    constructor(order,
+    // mdy | dmy | ymd
+    separator // / | - | .
+    ) {
+      this.order = order;
+      this.separator = separator;
+    }
+    get format() {
+      return this.order.split('').map(sign => `${sign}${sign}`).join(this.separator).replace('yy', 'yyyy');
+    }
+    static canBeParsed(v) {
+      if (typeof v !== 'string') return false;
+      const lowercase = v.toLowerCase();
+      return ['y', 'm', 'd'].every(sign => lowercase.includes(sign)) && ['/', '-', '.'].some(sign => v.includes(sign));
+    }
+    static parse(v) {
+      if (!DateFormatSpec.canBeParsed(v)) {
+        throw new Error(`[${v}] cannot be parsed into date format specification`);
+      }
+      const order = v.toLowerCase().split('').filter((c, i, all) => 'dmy'.includes(c) && all.indexOf(c) === i).join('');
+      const separator = ['/', '-', '.'].find(sign => v.includes(sign));
+      return new DateFormatSpec(order, separator);
+    }
+  }
+  const makeDateFormatProps = propsFactory({
+    inputFormat: {
+      type: String,
+      validator: v => !v || DateFormatSpec.canBeParsed(v)
+    }
+  }, 'date-format');
+  function useDateFormat(props, locale) {
+    const adapter = useDate();
+    function inferFromLocale() {
+      const localeForDateFormat = locale.value ?? 'en-US';
+      const formatFromLocale = Intl.DateTimeFormat(localeForDateFormat, {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+      }).format(adapter.toJsDate(adapter.parseISO('1999-12-07'))).replace(/(07)|(٠٧)|(٢٩)|(۱۶)|(০৭)/, 'dd').replace(/(12)|(١٢)|(٠٨)|(۰۹)|(১২)/, 'mm').replace(/(1999)|(2542)|(١٩٩٩)|(١٤٢٠)|(۱۳۷۸)|(১৯৯৯)/, 'yyyy').replace(/[^ymd\-/.]/g, '').replace(/\.$/, '');
+      if (!DateFormatSpec.canBeParsed(formatFromLocale)) {
+        consoleWarn(`Date format inferred from locale [${localeForDateFormat}] is invalid: [${formatFromLocale}]`);
+        return 'mm/dd/yyyy';
+      }
+      return formatFromLocale;
+    }
+    const currentFormat = vue.toRef(() => {
+      return DateFormatSpec.canBeParsed(props.inputFormat) ? DateFormatSpec.parse(props.inputFormat) : DateFormatSpec.parse(inferFromLocale());
+    });
+    function parseDate(dateString) {
+      function parseDateParts(text) {
+        const parts = text.trim().split(currentFormat.value.separator);
+        return {
+          y: Number(parts[currentFormat.value.order.indexOf('y')]),
+          m: Number(parts[currentFormat.value.order.indexOf('m')]),
+          d: Number(parts[currentFormat.value.order.indexOf('d')])
+        };
+      }
+      function validateDateParts(dateParts) {
+        const {
+          y: year,
+          m: month,
+          d: day
+        } = dateParts;
+        if (!year || !month || !day) return null;
+        if (month < 1 || month > 12) return null;
+        if (day < 1 || day > 31) return null;
+        return {
+          year: autoFixYear(year),
+          month,
+          day
+        };
+      }
+      function autoFixYear(year) {
+        const currentYear = adapter.getYear(adapter.date());
+        if (year > 100 || currentYear % 100 >= 50) {
+          return year;
+        }
+        const currentCentury = ~~(currentYear / 100) * 100;
+        return year < 50 ? currentCentury + year : currentCentury - 100 + year;
+      }
+      const dateParts = parseDateParts(dateString);
+      const validatedParts = validateDateParts(dateParts);
+      if (!validatedParts) return null;
+      const {
+        year,
+        month,
+        day
+      } = validatedParts;
+      const pad = v => String(v).padStart(2, '0');
+      return adapter.parseISO(`${year}-${pad(month)}-${pad(day)}`);
+    }
+    function isValid(text) {
+      return !!parseDate(text);
+    }
+    function formatDate(value) {
+      const parts = adapter.toISO(value).split('-');
+      return currentFormat.value.order.split('').map(sign => parts['ymd'.indexOf(sign)]).join(currentFormat.value.separator);
+    }
+    return {
+      isValid,
+      parseDate,
+      formatDate,
+      parserFormat: vue.toRef(() => currentFormat.value.format)
+    };
+  }
+
+  // Types
+
   // Types
 
   const makeVDateInputProps = propsFactory({
@@ -29089,10 +29299,12 @@
       type: String,
       default: 'bottom start'
     },
+    menu: Boolean,
     updateOn: {
       type: Array,
       default: () => ['blur', 'enter']
     },
+    ...makeDateFormatProps(),
     ...makeDisplayProps({
       mobile: null
     }),
@@ -29101,7 +29313,6 @@
       hideActions: true
     }),
     ...makeVTextFieldProps({
-      placeholder: 'mm/dd/yyyy',
       prependIcon: '$calendar'
     }),
     ...omit(makeVDatePickerProps({
@@ -29115,7 +29326,8 @@
     emits: {
       save: value => true,
       cancel: () => true,
-      'update:modelValue': val => true
+      'update:modelValue': val => true,
+      'update:menu': val => true
     },
     setup(props, _ref) {
       let {
@@ -29123,9 +29335,16 @@
         slots
       } = _ref;
       const {
-        t
+        t,
+        current: currentLocale
       } = useLocale();
       const adapter = useDate();
+      const {
+        isValid,
+        parseDate,
+        formatDate,
+        parserFormat
+      } = useDateFormat(props, currentLocale);
       const {
         mobile
       } = useDisplay(props);
@@ -29136,7 +29355,7 @@
       } = useFocus(props);
       const emptyModelValue = () => props.multiple ? [] : null;
       const model = useProxiedModel(props, 'modelValue', emptyModelValue(), val => Array.isArray(val) ? val.map(item => adapter.toJsDate(item)) : val ? adapter.toJsDate(val) : val, val => Array.isArray(val) ? val.map(item => adapter.date(item)) : val ? adapter.date(val) : val);
-      const menu = vue.shallowRef(false);
+      const menu = useProxiedModel(props, 'menu');
       const isEditingInput = vue.shallowRef(false);
       const vTextFieldRef = vue.ref();
       const disabledActions = vue.ref(['save']);
@@ -29144,7 +29363,10 @@
         if (typeof props.displayFormat === 'function') {
           return props.displayFormat(date);
         }
-        return adapter.format(date, props.displayFormat ?? 'keyboardDate');
+        if (props.displayFormat) {
+          return adapter.format(date, props.displayFormat ?? 'keyboardDate');
+        }
+        return formatDate(date);
       }
       const display = vue.computed(() => {
         const value = wrapInArray(model.value);
@@ -29179,7 +29401,6 @@
         if (e.key !== 'Enter') return;
         if (!menu.value || !isFocused.value) {
           menu.value = true;
-          return;
         }
         if (props.updateOn.includes('enter')) {
           onUserInput(e.target);
@@ -29223,13 +29444,32 @@
         let {
           value
         } = _ref2;
-        if (value && !adapter.isValid(value)) return;
-        model.value = !value ? emptyModelValue() : value;
+        if (!value.trim()) {
+          model.value = emptyModelValue();
+        } else if (!props.multiple) {
+          if (isValid(value)) {
+            model.value = parseDate(value);
+          }
+        } else {
+          const parts = value.trim().split(/\D+-\D+|[^\d\-/.]+/);
+          if (parts.every(isValid)) {
+            if (props.multiple === 'range') {
+              model.value = getRange(parts);
+            } else {
+              model.value = parts.map(parseDate);
+            }
+          }
+        }
+      }
+      function getRange(inputDates) {
+        const [start, stop] = inputDates.map(parseDate).toSorted((a, b) => adapter.isAfter(a, b) ? 1 : -1);
+        const diff = adapter.getDiff(stop ?? start, start, 'days');
+        return [start, ...createRange(diff, 1).map(i => adapter.addDays(start, i))];
       }
       useRender(() => {
         const confirmEditProps = VConfirmEdit.filterProps(props);
         const datePickerProps = VDatePicker.filterProps(omit(props, ['active', 'location', 'rounded']));
-        const textFieldProps = VTextField.filterProps(props);
+        const textFieldProps = VTextField.filterProps(omit(props, ['placeholder']));
         return vue.createVNode(VTextField, vue.mergeProps({
           "ref": vTextFieldRef
         }, textFieldProps, {
@@ -29237,11 +29477,13 @@
           "style": props.style,
           "modelValue": display.value,
           "inputmode": inputmode.value,
+          "placeholder": props.placeholder ?? parserFormat.value,
           "readonly": isReadonly.value,
           "onKeydown": isInteractive.value ? onKeydown : undefined,
           "focused": menu.value || isFocused.value,
           "onFocus": focus,
           "onBlur": onBlur,
+          "validationValue": model.value,
           "onClick:control": isInteractive.value ? onClick : undefined,
           "onClick:prepend": isInteractive.value ? onClick : undefined,
           "onUpdate:modelValue": onUpdateDisplayModel
@@ -31208,6 +31450,7 @@
     VClassIcon: VClassIcon,
     VCode: VCode,
     VCol: VCol,
+    VColorInput: VColorInput,
     VColorPicker: VColorPicker,
     VCombobox: VCombobox,
     VComponentIcon: VComponentIcon,
@@ -31674,7 +31917,7 @@
       };
     });
   }
-  const version$1 = "3.8.4";
+  const version$1 = "3.8.6";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -31972,7 +32215,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.8.4";
+  const version = "3.8.6";
 
   /* eslint-disable local-rules/sort-imports */