vuetify 3.8.4 → 3.8.5

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.4
+* Vuetify v3.8.5
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -4506,7 +4506,8 @@ const aliases = {
   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 (?)
@@ -13502,11 +13503,6 @@ const VAutocomplete = genericComponent()({
         menu.value = true;
       }
     });
-    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;
@@ -29077,6 +29073,236 @@ const VCalendar = genericComponent()({
 
 // 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 = shallowRef(false);
+    const isInteractive = computed(() => !props.disabled && !props.readonly);
+    const display = 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 createVNode(VTextField, 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 => createVNode(Fragment, null, [hasPrepend && createVNode(VIcon, {
+          "color": props.pip ? model.value : undefined,
+          "icon": props.pipIcon
+        }, null), slots.prepend?.(arg)]) : undefined,
+        default: () => createVNode(Fragment, null, [createVNode(VMenu, {
+          "modelValue": menu.value,
+          "onUpdate:modelValue": $event => menu.value = $event,
+          "activator": "parent",
+          "min-width": "0",
+          "closeOnContentClick": false,
+          "openOnClick": false
+        }, {
+          default: () => [createVNode(VConfirmEdit, mergeProps(confirmEditProps, {
+            "modelValue": model.value,
+            "onUpdate:modelValue": $event => model.value = $event,
+            "onSave": onSave
+          }), {
+            default: _ref2 => {
+              let {
+                actions,
+                model: proxyModel,
+                save,
+                cancel,
+                isPristine
+              } = _ref2;
+              return createVNode(VColorPicker, 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 = 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: toRef(() => currentFormat.value.format)
+  };
+}
+
+// Types
+
 // Types
 
 const makeVDateInputProps = propsFactory({
@@ -29085,10 +29311,12 @@ const makeVDateInputProps = propsFactory({
     type: String,
     default: 'bottom start'
   },
+  menu: Boolean,
   updateOn: {
     type: Array,
     default: () => ['blur', 'enter']
   },
+  ...makeDateFormatProps(),
   ...makeDisplayProps({
     mobile: null
   }),
@@ -29097,7 +29325,6 @@ const makeVDateInputProps = propsFactory({
     hideActions: true
   }),
   ...makeVTextFieldProps({
-    placeholder: 'mm/dd/yyyy',
     prependIcon: '$calendar'
   }),
   ...omit(makeVDatePickerProps({
@@ -29111,7 +29338,8 @@ const VDateInput = genericComponent()({
   emits: {
     save: value => true,
     cancel: () => true,
-    'update:modelValue': val => true
+    'update:modelValue': val => true,
+    'update:menu': val => true
   },
   setup(props, _ref) {
     let {
@@ -29119,9 +29347,16 @@ const VDateInput = genericComponent()({
       slots
     } = _ref;
     const {
-      t
+      t,
+      current: currentLocale
     } = useLocale();
     const adapter = useDate();
+    const {
+      isValid,
+      parseDate,
+      formatDate,
+      parserFormat
+    } = useDateFormat(props, currentLocale);
     const {
       mobile
     } = useDisplay(props);
@@ -29132,7 +29367,7 @@ const VDateInput = genericComponent()({
     } = 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 = shallowRef(false);
+    const menu = useProxiedModel(props, 'menu');
     const isEditingInput = shallowRef(false);
     const vTextFieldRef = ref();
     const disabledActions = ref(['save']);
@@ -29140,7 +29375,10 @@ const VDateInput = genericComponent()({
       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 = computed(() => {
       const value = wrapInArray(model.value);
@@ -29175,7 +29413,6 @@ const VDateInput = genericComponent()({
       if (e.key !== 'Enter') return;
       if (!menu.value || !isFocused.value) {
         menu.value = true;
-        return;
       }
       if (props.updateOn.includes('enter')) {
         onUserInput(e.target);
@@ -29219,13 +29456,32 @@ const VDateInput = genericComponent()({
       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 createVNode(VTextField, mergeProps({
         "ref": vTextFieldRef
       }, textFieldProps, {
@@ -29233,11 +29489,13 @@ const VDateInput = genericComponent()({
         "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
@@ -31204,6 +31462,7 @@ var components = /*#__PURE__*/Object.freeze({
   VClassIcon: VClassIcon,
   VCode: VCode,
   VCol: VCol,
+  VColorInput: VColorInput,
   VColorPicker: VColorPicker,
   VCombobox: VCombobox,
   VComponentIcon: VComponentIcon,
@@ -31670,7 +31929,7 @@ function createVuetify$1() {
     };
   });
 }
-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
@@ -31968,7 +32227,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.8.4";
+const version = "3.8.5";
 
 /* eslint-disable local-rules/sort-imports */