@vuetify/nightly 3.4.11-dev.2024-01-19 → 3.5.0-dev.2024-01-20

package/dist/vuetify-labs.d.ts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { Ref, DeepReadonly, ComponentPropsOptions, ExtractPropTypes, VNodeChild, VNode, PropType, JSXComponent, CSSProperties, ComponentInternalInstance, ComputedRef, Component, EffectScope, DirectiveBinding, WritableComputedRef, UnwrapRef, nextTick, Prop, InjectionKey } from 'vue';
+import { Ref, DeepReadonly, ComponentPropsOptions, ExtractPropTypes, VNodeChild, VNode, PropType, ComponentPublicInstance, JSXComponent, CSSProperties, ComponentInternalInstance, ComputedRef, Component, EffectScope, DirectiveBinding, WritableComputedRef, UnwrapRef, nextTick, Prop, InjectionKey } from 'vue';
 // @ts-ignore
 import * as vue_router from 'vue-router';
 // @ts-ignore
@@ -351,6 +351,23 @@ type DefaultsOptions = Partial<DefaultsInstance>;
 declare function useDefaults<T extends Record<string, any>>(props: T, name?: string): T;
 declare function useDefaults(props?: undefined, name?: string): Record<string, any>;
 
+interface GoToInstance {
+    rtl: Ref<boolean>;
+    options: GoToOptions;
+}
+interface GoToOptions {
+    container: ComponentPublicInstance | HTMLElement | string;
+    duration: number;
+    layout: boolean;
+    offset: number;
+    easing: string | ((t: number) => number);
+    patterns: Record<string, (t: number) => number>;
+}
+declare function useGoTo(_options?: Partial<GoToOptions>): {
+    (target: ComponentPublicInstance | HTMLElement | string | number, options?: Partial<GoToOptions>): Promise<unknown>;
+    horizontal(target: ComponentPublicInstance | HTMLElement | string | number, options?: Partial<GoToOptions>): Promise<unknown>;
+};
+
 type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 interface IconAliases {
@@ -753,6 +770,7 @@ interface VuetifyOptions {
     directives?: Record<string, any>;
     defaults?: DefaultsOptions;
     display?: DisplayOptions;
+    goTo?: GoToOptions;
     theme?: ThemeOptions;
     icons?: IconOptions;
     locale?: LocaleOptions & RtlOptions;
@@ -54826,8 +54844,17 @@ declare const VStepperWindowItem: {
 }>>;
 type VStepperWindowItem = InstanceType<typeof VStepperWindowItem>;
 
+type VSwitchSlot = {
+    model: Ref<boolean>;
+    isValid: ComputedRef<boolean | null>;
+};
 type VSwitchSlots = VInputSlots & VSelectionControlSlots & {
     loader: LoaderSlotProps;
+    thumb: {
+        icon: IconValue | undefined;
+    } & VSwitchSlot;
+    'track-false': VSwitchSlot;
+    'track-true': VSwitchSlot;
 };
 declare const VSwitch: {
     new (...args: any[]): vue.CreateComponentPublicInstance<{
@@ -54884,7 +54911,7 @@ declare const VSwitch: {
         'update:focused': (focused: boolean) => boolean;
         'update:modelValue': (value: any) => boolean;
         'update:indeterminate': (value: boolean) => boolean;
-    }, "$children" | "v-slot:default" | "v-slots" | "v-slot:append" | "v-slot:prepend" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:input" | "v-slot:label" | "v-slot:message" | "v-slot:details">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+    }, "$children" | "v-slot:default" | "v-slots" | "v-slot:append" | "v-slot:prepend" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:input" | "v-slot:label" | "v-slot:message" | "v-slot:details" | "v-slot:thumb" | "v-slot:track-false" | "v-slot:track-true">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
         flat: boolean;
         inline: boolean;
         error: boolean;
@@ -54959,8 +54986,8 @@ declare const VSwitch: {
         persistentHint: boolean;
     }, true, {}, vue.SlotsType<Partial<{
         default: (arg: VInputSlot & {
-            backgroundColorClasses: vue.Ref<string[]>;
-            backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+            backgroundColorClasses: Ref<string[]>;
+            backgroundColorStyles: Ref<vue.CSSProperties>;
         }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
         }>[];
@@ -54988,6 +55015,17 @@ declare const VSwitch: {
         loader: (arg: LoaderSlotProps) => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
         }>[];
+        thumb: (arg: {
+            icon: IconValue | undefined;
+        } & VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }>[];
+        'track-false': (arg: VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }>[];
+        'track-true': (arg: VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }>[];
     }>>, {
         P: {};
         B: {};
@@ -55126,7 +55164,7 @@ declare const VSwitch: {
     'update:focused': (focused: boolean) => boolean;
     'update:modelValue': (value: any) => boolean;
     'update:indeterminate': (value: boolean) => boolean;
-}, "$children" | "v-slot:default" | "v-slots" | "v-slot:append" | "v-slot:prepend" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:input" | "v-slot:label" | "v-slot:message" | "v-slot:details">, string, {
+}, "$children" | "v-slot:default" | "v-slots" | "v-slot:append" | "v-slot:prepend" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:input" | "v-slot:label" | "v-slot:message" | "v-slot:details" | "v-slot:thumb" | "v-slot:track-false" | "v-slot:track-true">, string, {
     flat: boolean;
     inline: boolean;
     error: boolean;
@@ -55151,8 +55189,8 @@ declare const VSwitch: {
     persistentHint: boolean;
 }, {}, string, vue.SlotsType<Partial<{
     default: (arg: VInputSlot & {
-        backgroundColorClasses: vue.Ref<string[]>;
-        backgroundColorStyles: vue.Ref<vue.CSSProperties>;
+        backgroundColorClasses: Ref<string[]>;
+        backgroundColorStyles: Ref<vue.CSSProperties>;
     }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
@@ -55180,6 +55218,17 @@ declare const VSwitch: {
     loader: (arg: LoaderSlotProps) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
+    thumb: (arg: {
+        icon: IconValue | undefined;
+    } & VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    'track-false': (arg: VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    'track-true': (arg: VSwitchSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
 }>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T>(props: {
     modelValue?: T | null | undefined;
     'onUpdate:modelValue'?: ((value: T | null) => void) | undefined;
@@ -69223,6 +69272,10 @@ declare const createVuetify: (options?: VuetifyOptions) => {
             setMinutes: (date: unknown, minutes: number) => unknown;
         };
     };
+    goTo: {
+        rtl: vue.Ref<boolean>;
+        options: Record<string, any>;
+    };
 };
 
-export { type DateInstance, type DefaultsInstance, type DisplayBreakpoint, type DisplayInstance, type DisplayThresholds, type IconAliases, type IconOptions, type IconProps, type IconSet, type LocaleInstance, type LocaleMessages, type LocaleOptions, type RtlInstance, type RtlOptions, type SubmitEventPromise, type ThemeDefinition, type ThemeInstance, allComponents_d as components, createVuetify, index_d as directives, useDate, useDefaults, useDisplay, useLayout, useLocale, useRtl, useTheme, version };
+export { type DateInstance, type DefaultsInstance, type DisplayBreakpoint, type DisplayInstance, type DisplayThresholds, type GoToInstance, type IconAliases, type IconOptions, type IconProps, type IconSet, type LocaleInstance, type LocaleMessages, type LocaleOptions, type RtlInstance, type RtlOptions, type SubmitEventPromise, type ThemeDefinition, type ThemeInstance, allComponents_d as components, createVuetify, index_d as directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.4.11-dev.2024-01-19
+* Vuetify v3.5.0-dev.2024-01-20
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -2156,7 +2156,7 @@ function provideLocale(props) {
   provide(LocaleSymbol, data);
   return data;
 }
-function genDefaults$1() {
+function genDefaults$2() {
   return {
     af: false,
     ar: true,
@@ -2203,7 +2203,7 @@ function genDefaults$1() {
   };
 }
 function createRtl(i18n, options) {
-  const rtl = ref(options?.rtl ?? genDefaults$1());
+  const rtl = ref(options?.rtl ?? genDefaults$2());
   const isRtl = computed(() => rtl.value[i18n.current.value] ?? false);
   return {
     isRtl,
@@ -2236,7 +2236,7 @@ const ThemeSymbol = Symbol.for('vuetify:theme');
 const makeThemeProps = propsFactory({
   theme: String
 }, 'theme');
-function genDefaults() {
+function genDefaults$1() {
   return {
     defaultTheme: 'light',
     variations: {
@@ -2323,8 +2323,8 @@ function genDefaults() {
   };
 }
 function parseThemeOptions() {
-  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : genDefaults();
-  const defaults = genDefaults();
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : genDefaults$1();
+  const defaults = genDefaults$1();
   if (!options) return {
     ...defaults,
     isDisabled: true
@@ -9047,7 +9047,7 @@ function elementToViewport(point, offset) {
 }
 
 /** Get the difference between two points */
-function getOffset$1(a, b) {
+function getOffset$2(a, b) {
   return {
     x: a.x - b.x,
     y: a.y - b.y
@@ -9294,7 +9294,7 @@ function connectedLocationStrategy(data, props, contentStyles) {
       let {
         x,
         y
-      } = getOffset$1(targetPoint, contentPoint);
+      } = getOffset$2(targetPoint, contentPoint);
       switch (_placement.anchor.side) {
         case 'top':
           y -= offset.value[0];
@@ -9829,7 +9829,7 @@ function useActivator(props, _ref) {
   const target = computed(() => {
     if (props.target === 'cursor' && cursorTarget.value) return cursorTarget.value;
     if (targetRef.value) return refElement(targetRef.value);
-    return getTarget(props.target, vm) || activatorEl.value;
+    return getTarget$1(props.target, vm) || activatorEl.value;
   });
   const targetEl = computed(() => {
     return Array.isArray(target.value) ? undefined : target.value;
@@ -9901,14 +9901,14 @@ function _useActivator(props, vm, _ref2) {
   }
   function getActivator() {
     let selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : props.activator;
-    const activator = getTarget(selector, vm);
+    const activator = getTarget$1(selector, vm);
 
     // The activator should only be a valid element (Ignore comments and text nodes)
     activatorEl.value = activator?.nodeType === Node.ELEMENT_NODE ? activator : undefined;
     return activatorEl.value;
   }
 }
-function getTarget(selector, vm) {
+function getTarget$1(selector, vm) {
   if (!selector) return;
   let target;
   if (selector === 'parent') {
@@ -14530,7 +14530,7 @@ const VColorPickerEdit = defineComponent({
 // Types
 
 const VSliderSymbol = Symbol.for('vuetify:v-slider');
-function getOffset(e, el, direction) {
+function getOffset$1(e, el, direction) {
   const vertical = direction === 'vertical';
   const rect = el.getBoundingClientRect();
   const touch = 'touches' in e ? e.touches[0] : e;
@@ -14689,7 +14689,7 @@ const useSlider = _ref => {
     activeThumbRef.value.focus();
     mousePressed.value = true;
     if (activeThumbRef.value.contains(e.target)) {
-      startOffset.value = getOffset(e, activeThumbRef.value, props.direction);
+      startOffset.value = getOffset$1(e, activeThumbRef.value, props.direction);
     } else {
       startOffset.value = 0;
       onSliderMove({
@@ -17534,6 +17534,112 @@ function getWeek(adapter, value) {
   return Math.floor(diffDays / 7) + 1;
 }
 
+// Utilities
+
+// Types
+
+const GoToSymbol = Symbol.for('vuetify:goto');
+function genDefaults() {
+  return {
+    container: undefined,
+    duration: 300,
+    layout: false,
+    offset: 0,
+    easing: 'easeInOutCubic',
+    patterns: {
+      linear: t => t,
+      easeInQuad: t => t ** 2,
+      easeOutQuad: t => t * (2 - t),
+      easeInOutQuad: t => t < 0.5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t,
+      easeInCubic: t => t ** 3,
+      easeOutCubic: t => --t ** 3 + 1,
+      easeInOutCubic: t => t < 0.5 ? 4 * t ** 3 : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+      easeInQuart: t => t ** 4,
+      easeOutQuart: t => 1 - --t ** 4,
+      easeInOutQuart: t => t < 0.5 ? 8 * t ** 4 : 1 - 8 * --t ** 4,
+      easeInQuint: t => t ** 5,
+      easeOutQuint: t => 1 + --t ** 5,
+      easeInOutQuint: t => t < 0.5 ? 16 * t ** 5 : 1 + 16 * --t ** 5
+    }
+  };
+}
+function getContainer(el) {
+  return getTarget(el) ?? (document.scrollingElement || document.body);
+}
+function getTarget(el) {
+  return typeof el === 'string' ? document.querySelector(el) : refElement(el);
+}
+function getOffset(target, horizontal, rtl) {
+  if (typeof target === 'number') return horizontal && rtl ? -target : target;
+  let el = getTarget(target);
+  let totalOffset = 0;
+  while (el) {
+    totalOffset += horizontal ? el.offsetLeft : el.offsetTop;
+    el = el.offsetParent;
+  }
+  return totalOffset;
+}
+function createGoTo(options, locale) {
+  return {
+    rtl: locale.isRtl,
+    options: mergeDeep(genDefaults(), options)
+  };
+}
+async function scrollTo(_target, _options, horizontal, goTo) {
+  const options = mergeDeep(goTo?.options, _options);
+  const rtl = goTo?.rtl.value;
+  const target = (typeof _target === 'number' ? _target : getTarget(_target)) ?? 0;
+  const container = options.container === 'parent' && target instanceof HTMLElement ? target.parentElement : getContainer(options.container);
+  const ease = typeof options.easing === 'function' ? options.easing : options.patterns[options.easing];
+  if (!ease) throw new TypeError(`Easing function "${options.easing}" not found.`);
+  let targetLocation;
+  if (typeof target === 'number') {
+    targetLocation = getOffset(target, horizontal, rtl);
+  } else {
+    targetLocation = getOffset(target, horizontal, rtl) - getOffset(container, horizontal, rtl);
+    if (options.layout) {
+      const styles = window.getComputedStyle(target);
+      const layoutOffset = styles.getPropertyValue('--v-layout-top');
+      if (layoutOffset) targetLocation -= parseInt(layoutOffset, 10);
+    }
+  }
+  targetLocation += options.offset;
+  const startLocation = (horizontal ? container.scrollLeft : container.scrollTop) ?? 0;
+  if (targetLocation === startLocation) return Promise.resolve(targetLocation);
+  const startTime = performance.now();
+  return new Promise(resolve => requestAnimationFrame(function step(currentTime) {
+    const timeElapsed = currentTime - startTime;
+    const progress = Math.abs(options.duration ? Math.min(timeElapsed / options.duration, 1) : 1);
+    const location = Math.floor(startLocation + (targetLocation - startLocation) * ease(progress));
+    container[horizontal ? 'scrollLeft' : 'scrollTop'] = location;
+    if (progress === 1) return resolve(targetLocation);
+    let clientSize;
+    let reachEnd;
+    if (!horizontal) {
+      clientSize = container === document.body ? document.documentElement.clientHeight : container.clientHeight;
+      reachEnd = clientSize + container.scrollTop >= container.scrollHeight;
+      if (targetLocation > container.scrollTop && reachEnd) return resolve(targetLocation);
+    } else {
+      clientSize = container === document.body ? document.documentElement.clientWidth : container.clientWidth;
+      reachEnd = clientSize + container.scrollLeft >= container.scrollWidth;
+      if (targetLocation > container.scrollLeft && reachEnd) return resolve(targetLocation);
+    }
+    requestAnimationFrame(step);
+  }));
+}
+function useGoTo() {
+  let _options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const goTo = inject$1(GoToSymbol);
+  if (!goTo) throw new Error('[Vuetify] Could not find injected goto instance');
+  async function go(target, options) {
+    return scrollTo(target, mergeDeep(_options, options), false, goTo);
+  }
+  go.horizontal = async (target, options) => {
+    return scrollTo(target, mergeDeep(_options, options), true, goTo);
+  };
+  return go;
+}
+
 // Composables
 
 // Types
@@ -23016,8 +23122,8 @@ const VRangeSlider = genericComponent()({
     } = useRtl();
     function getActiveThumb(e) {
       if (!startThumbRef.value || !stopThumbRef.value) return;
-      const startOffset = getOffset(e, startThumbRef.value.$el, props.direction);
-      const stopOffset = getOffset(e, stopThumbRef.value.$el, props.direction);
+      const startOffset = getOffset$1(e, startThumbRef.value.$el, props.direction);
+      const stopOffset = getOffset$1(e, stopThumbRef.value.$el, props.direction);
       const a = Math.abs(startOffset);
       const b = Math.abs(stopOffset);
       return a < b || a === b && startOffset < 0 ? startThumbRef.value.$el : stopThumbRef.value.$el;
@@ -24192,6 +24298,10 @@ const VSwitch = genericComponent()({
             isReadonly,
             isValid
           } = _ref2;
+          const slotProps = {
+            model,
+            isValid
+          };
           return createVNode(VSelectionControl, mergeProps({
             "ref": control
           }, controlProps, {
@@ -24216,7 +24326,13 @@ const VSwitch = genericComponent()({
                 "class": ['v-switch__track', ...backgroundColorClasses.value],
                 "style": backgroundColorStyles.value,
                 "onClick": onTrackClick
-              }, null);
+              }, [slots['track-true'] && createVNode("div", {
+                "key": "prepend",
+                "class": "v-switch__track-true"
+              }, [slots['track-true'](slotProps)]), slots['track-false'] && createVNode("div", {
+                "key": "append",
+                "class": "v-switch__track-false"
+              }, [slots['track-false'](slotProps)])]);
             },
             input: _ref4 => {
               let {
@@ -24230,9 +24346,21 @@ const VSwitch = genericComponent()({
                   'v-switch__thumb--filled': icon || props.loading
                 }, props.inset ? undefined : backgroundColorClasses.value],
                 "style": props.inset ? undefined : backgroundColorStyles.value
-              }, [createVNode(VScaleTransition, null, {
+              }, [slots.thumb ? createVNode(VDefaultsProvider, {
+                "defaults": {
+                  VIcon: {
+                    icon,
+                    size: 'x-small'
+                  }
+                }
+              }, {
+                default: () => [slots.thumb({
+                  ...slotProps,
+                  icon
+                })]
+              }) : createVNode(VScaleTransition, null, {
                 default: () => [!props.loading ? icon && createVNode(VIcon, {
-                  "key": icon,
+                  "key": String(icon),
                   "icon": icon,
                   "size": "x-small"
                 }, null) : createVNode(LoaderSlot, {
@@ -26004,6 +26132,7 @@ function createVuetify$1() {
   const icons = createIcons(options.icons);
   const locale = createLocale(options.locale);
   const date = createDate(options.date, locale);
+  const goTo = createGoTo(options.goTo, locale);
   const install = app => {
     for (const key in directives) {
       app.directive(key, directives[key]);
@@ -26026,6 +26155,7 @@ function createVuetify$1() {
     app.provide(LocaleSymbol, locale);
     app.provide(DateOptionsSymbol, date.options);
     app.provide(DateAdapterSymbol, date.instance);
+    app.provide(GoToSymbol, goTo);
     if (IN_BROWSER && options.ssr) {
       if (app.$nuxt) {
         app.$nuxt.hook('app:suspense:resolve', () => {
@@ -26068,10 +26198,11 @@ function createVuetify$1() {
     theme,
     icons,
     locale,
-    date
+    date,
+    goTo
   };
 }
-const version$1 = "3.4.11-dev.2024-01-19";
+const version$1 = "3.5.0-dev.2024-01-20";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -26085,7 +26216,7 @@ function inject(key) {
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.4.11-dev.2024-01-19";
+const version = "3.5.0-dev.2024-01-20";
 
 /* eslint-disable local-rules/sort-imports */
 
@@ -26098,5 +26229,5 @@ const createVuetify = function () {
   });
 };
 
-export { components, createVuetify, directives, useDate, useDefaults, useDisplay, useLayout, useLocale, useRtl, useTheme, version };
+export { components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };
 //# sourceMappingURL=vuetify-labs.esm.js.map