vuetify 3.8.4 → 3.8.5

package/dist/vuetify-labs.cjs

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.4
+* Vuetify v3.8.5
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -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 (?)
@@ -13506,11 +13507,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 +29077,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 +29315,12 @@
       type: String,
       default: 'bottom start'
     },
+    menu: Boolean,
     updateOn: {
       type: Array,
       default: () => ['blur', 'enter']
     },
+    ...makeDateFormatProps(),
     ...makeDisplayProps({
       mobile: null
     }),
@@ -29101,7 +29329,6 @@
       hideActions: true
     }),
     ...makeVTextFieldProps({
-      placeholder: 'mm/dd/yyyy',
       prependIcon: '$calendar'
     }),
     ...omit(makeVDatePickerProps({
@@ -29115,7 +29342,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 +29351,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 +29371,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 +29379,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 +29417,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 +29460,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 +29493,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 +31466,7 @@
     VClassIcon: VClassIcon,
     VCode: VCode,
     VCol: VCol,
+    VColorInput: VColorInput,
     VColorPicker: VColorPicker,
     VCombobox: VCombobox,
     VComponentIcon: VComponentIcon,
@@ -31674,7 +31933,7 @@
       };
     });
   }
-  const version$1 = "3.8.4";
+  const version$1 = "3.8.5";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -31972,7 +32231,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.8.4";
+  const version = "3.8.5";
 
   /* eslint-disable local-rules/sort-imports */