vuetify 3.3.2 → 3.3.4

package/lib/blueprints/index.d.mts

@@ -125,6 +125,7 @@ interface IconAliases {
     file: IconValue;
     plus: IconValue;
     minus: IconValue;
+    calendar: IconValue;
 }
 interface IconProps {
     tag: string;
@@ -136,41 +137,47 @@ interface IconSet {
     component: IconComponent;
 }
 type IconOptions = {
-    defaultSet: string;
+    defaultSet?: string;
     aliases?: Partial<IconAliases>;
-    sets: Record<string, IconSet>;
+    sets?: Record<string, IconSet>;
 };
 
-interface DateAdapter<Date> {
-    date(value?: any): Date | null;
-    format(date: Date, formatString: string): string;
-    startOfMonth(date: Date): Date;
-    endOfMonth(date: Date): Date;
-    startOfYear(date: Date): Date;
-    endOfYear(date: Date): Date;
-    isAfter(date: Date, comparing: Date): boolean;
-    isEqual(date: Date, comparing: Date): boolean;
-    isSameDay(date: Date, comparing: Date): boolean;
-    isSameMonth(date: Date, comparing: Date): boolean;
+interface DateAdapter<T> {
+    date(value?: any): T | null;
+    format(date: T, formatString: string): string;
+    toJsDate(value: T): Date;
+    startOfMonth(date: T): T;
+    endOfMonth(date: T): T;
+    startOfYear(date: T): T;
+    endOfYear(date: T): T;
+    isBefore(date: T, comparing: T): boolean;
+    isAfter(date: T, comparing: T): boolean;
+    isEqual(date: T, comparing: T): boolean;
+    isSameDay(date: T, comparing: T): boolean;
+    isSameMonth(date: T, comparing: T): boolean;
     isValid(date: any): boolean;
-    isWithinRange(date: Date, range: [Date, Date]): boolean;
-    addDays(date: Date, amount: number): Date;
-    addMonths(date: Date, amount: number): Date;
-    getYear(date: Date): number;
-    setYear(date: Date, year: number): Date;
-    getDiff(date: Date, comparing: Date | string, unit?: string): number;
-    getWeek(date: Date): number;
-    getWeekArray(date: Date): (Date | null)[][];
+    isWithinRange(date: T, range: [T, T]): boolean;
+    addDays(date: T, amount: number): T;
+    addMonths(date: T, amount: number): T;
+    getYear(date: T): number;
+    setYear(date: T, year: number): T;
+    getDiff(date: T, comparing: T | string, unit?: string): number;
+    getWeekArray(date: T): T[][];
     getWeekdays(): string[];
-    getMonth(date: Date): number;
+    getMonth(date: T): number;
 }
 
-interface DateInstance extends DateAdapter<Date> {
-    locale: string;
-}
-type DateOptions = {
-    adapter: (new (locale: string) => DateInstance) | DateInstance;
+interface DateInstance<T> extends DateAdapter<T> {
+    locale?: any;
+}
+type InternalDateOptions<T = any> = {
+    adapter: (new (options: {
+        locale: any;
+    }) => DateInstance<T>) | DateInstance<T>;
+    formats?: Record<string, string>;
+    locale: Record<string, any>;
 };
+type DateOptions<T = any> = Partial<InternalDateOptions<T>>;
 
 interface VuetifyOptions {
     aliases?: Record<string, any>;

package/lib/blueprints/md1.d.mts

@@ -125,6 +125,7 @@ interface IconAliases {
     file: IconValue;
     plus: IconValue;
     minus: IconValue;
+    calendar: IconValue;
 }
 interface IconProps {
     tag: string;
@@ -136,41 +137,47 @@ interface IconSet {
     component: IconComponent;
 }
 type IconOptions = {
-    defaultSet: string;
+    defaultSet?: string;
     aliases?: Partial<IconAliases>;
-    sets: Record<string, IconSet>;
+    sets?: Record<string, IconSet>;
 };
 
-interface DateAdapter<Date> {
-    date(value?: any): Date | null;
-    format(date: Date, formatString: string): string;
-    startOfMonth(date: Date): Date;
-    endOfMonth(date: Date): Date;
-    startOfYear(date: Date): Date;
-    endOfYear(date: Date): Date;
-    isAfter(date: Date, comparing: Date): boolean;
-    isEqual(date: Date, comparing: Date): boolean;
-    isSameDay(date: Date, comparing: Date): boolean;
-    isSameMonth(date: Date, comparing: Date): boolean;
+interface DateAdapter<T> {
+    date(value?: any): T | null;
+    format(date: T, formatString: string): string;
+    toJsDate(value: T): Date;
+    startOfMonth(date: T): T;
+    endOfMonth(date: T): T;
+    startOfYear(date: T): T;
+    endOfYear(date: T): T;
+    isBefore(date: T, comparing: T): boolean;
+    isAfter(date: T, comparing: T): boolean;
+    isEqual(date: T, comparing: T): boolean;
+    isSameDay(date: T, comparing: T): boolean;
+    isSameMonth(date: T, comparing: T): boolean;
     isValid(date: any): boolean;
-    isWithinRange(date: Date, range: [Date, Date]): boolean;
-    addDays(date: Date, amount: number): Date;
-    addMonths(date: Date, amount: number): Date;
-    getYear(date: Date): number;
-    setYear(date: Date, year: number): Date;
-    getDiff(date: Date, comparing: Date | string, unit?: string): number;
-    getWeek(date: Date): number;
-    getWeekArray(date: Date): (Date | null)[][];
+    isWithinRange(date: T, range: [T, T]): boolean;
+    addDays(date: T, amount: number): T;
+    addMonths(date: T, amount: number): T;
+    getYear(date: T): number;
+    setYear(date: T, year: number): T;
+    getDiff(date: T, comparing: T | string, unit?: string): number;
+    getWeekArray(date: T): T[][];
     getWeekdays(): string[];
-    getMonth(date: Date): number;
+    getMonth(date: T): number;
 }
 
-interface DateInstance extends DateAdapter<Date> {
-    locale: string;
-}
-type DateOptions = {
-    adapter: (new (locale: string) => DateInstance) | DateInstance;
+interface DateInstance<T> extends DateAdapter<T> {
+    locale?: any;
+}
+type InternalDateOptions<T = any> = {
+    adapter: (new (options: {
+        locale: any;
+    }) => DateInstance<T>) | DateInstance<T>;
+    formats?: Record<string, string>;
+    locale: Record<string, any>;
 };
+type DateOptions<T = any> = Partial<InternalDateOptions<T>>;
 
 interface VuetifyOptions {
     aliases?: Record<string, any>;

package/lib/blueprints/md2.d.mts

@@ -125,6 +125,7 @@ interface IconAliases {
     file: IconValue;
     plus: IconValue;
     minus: IconValue;
+    calendar: IconValue;
 }
 interface IconProps {
     tag: string;
@@ -136,41 +137,47 @@ interface IconSet {
     component: IconComponent;
 }
 type IconOptions = {
-    defaultSet: string;
+    defaultSet?: string;
     aliases?: Partial<IconAliases>;
-    sets: Record<string, IconSet>;
+    sets?: Record<string, IconSet>;
 };
 
-interface DateAdapter<Date> {
-    date(value?: any): Date | null;
-    format(date: Date, formatString: string): string;
-    startOfMonth(date: Date): Date;
-    endOfMonth(date: Date): Date;
-    startOfYear(date: Date): Date;
-    endOfYear(date: Date): Date;
-    isAfter(date: Date, comparing: Date): boolean;
-    isEqual(date: Date, comparing: Date): boolean;
-    isSameDay(date: Date, comparing: Date): boolean;
-    isSameMonth(date: Date, comparing: Date): boolean;
+interface DateAdapter<T> {
+    date(value?: any): T | null;
+    format(date: T, formatString: string): string;
+    toJsDate(value: T): Date;
+    startOfMonth(date: T): T;
+    endOfMonth(date: T): T;
+    startOfYear(date: T): T;
+    endOfYear(date: T): T;
+    isBefore(date: T, comparing: T): boolean;
+    isAfter(date: T, comparing: T): boolean;
+    isEqual(date: T, comparing: T): boolean;
+    isSameDay(date: T, comparing: T): boolean;
+    isSameMonth(date: T, comparing: T): boolean;
     isValid(date: any): boolean;
-    isWithinRange(date: Date, range: [Date, Date]): boolean;
-    addDays(date: Date, amount: number): Date;
-    addMonths(date: Date, amount: number): Date;
-    getYear(date: Date): number;
-    setYear(date: Date, year: number): Date;
-    getDiff(date: Date, comparing: Date | string, unit?: string): number;
-    getWeek(date: Date): number;
-    getWeekArray(date: Date): (Date | null)[][];
+    isWithinRange(date: T, range: [T, T]): boolean;
+    addDays(date: T, amount: number): T;
+    addMonths(date: T, amount: number): T;
+    getYear(date: T): number;
+    setYear(date: T, year: number): T;
+    getDiff(date: T, comparing: T | string, unit?: string): number;
+    getWeekArray(date: T): T[][];
     getWeekdays(): string[];
-    getMonth(date: Date): number;
+    getMonth(date: T): number;
 }
 
-interface DateInstance extends DateAdapter<Date> {
-    locale: string;
-}
-type DateOptions = {
-    adapter: (new (locale: string) => DateInstance) | DateInstance;
+interface DateInstance<T> extends DateAdapter<T> {
+    locale?: any;
+}
+type InternalDateOptions<T = any> = {
+    adapter: (new (options: {
+        locale: any;
+    }) => DateInstance<T>) | DateInstance<T>;
+    formats?: Record<string, string>;
+    locale: Record<string, any>;
 };
+type DateOptions<T = any> = Partial<InternalDateOptions<T>>;
 
 interface VuetifyOptions {
     aliases?: Record<string, any>;

package/lib/blueprints/md3.d.mts

@@ -125,6 +125,7 @@ interface IconAliases {
     file: IconValue;
     plus: IconValue;
     minus: IconValue;
+    calendar: IconValue;
 }
 interface IconProps {
     tag: string;
@@ -136,41 +137,47 @@ interface IconSet {
     component: IconComponent;
 }
 type IconOptions = {
-    defaultSet: string;
+    defaultSet?: string;
     aliases?: Partial<IconAliases>;
-    sets: Record<string, IconSet>;
+    sets?: Record<string, IconSet>;
 };
 
-interface DateAdapter<Date> {
-    date(value?: any): Date | null;
-    format(date: Date, formatString: string): string;
-    startOfMonth(date: Date): Date;
-    endOfMonth(date: Date): Date;
-    startOfYear(date: Date): Date;
-    endOfYear(date: Date): Date;
-    isAfter(date: Date, comparing: Date): boolean;
-    isEqual(date: Date, comparing: Date): boolean;
-    isSameDay(date: Date, comparing: Date): boolean;
-    isSameMonth(date: Date, comparing: Date): boolean;
+interface DateAdapter<T> {
+    date(value?: any): T | null;
+    format(date: T, formatString: string): string;
+    toJsDate(value: T): Date;
+    startOfMonth(date: T): T;
+    endOfMonth(date: T): T;
+    startOfYear(date: T): T;
+    endOfYear(date: T): T;
+    isBefore(date: T, comparing: T): boolean;
+    isAfter(date: T, comparing: T): boolean;
+    isEqual(date: T, comparing: T): boolean;
+    isSameDay(date: T, comparing: T): boolean;
+    isSameMonth(date: T, comparing: T): boolean;
     isValid(date: any): boolean;
-    isWithinRange(date: Date, range: [Date, Date]): boolean;
-    addDays(date: Date, amount: number): Date;
-    addMonths(date: Date, amount: number): Date;
-    getYear(date: Date): number;
-    setYear(date: Date, year: number): Date;
-    getDiff(date: Date, comparing: Date | string, unit?: string): number;
-    getWeek(date: Date): number;
-    getWeekArray(date: Date): (Date | null)[][];
+    isWithinRange(date: T, range: [T, T]): boolean;
+    addDays(date: T, amount: number): T;
+    addMonths(date: T, amount: number): T;
+    getYear(date: T): number;
+    setYear(date: T, year: number): T;
+    getDiff(date: T, comparing: T | string, unit?: string): number;
+    getWeekArray(date: T): T[][];
     getWeekdays(): string[];
-    getMonth(date: Date): number;
+    getMonth(date: T): number;
 }
 
-interface DateInstance extends DateAdapter<Date> {
-    locale: string;
-}
-type DateOptions = {
-    adapter: (new (locale: string) => DateInstance) | DateInstance;
+interface DateInstance<T> extends DateAdapter<T> {
+    locale?: any;
+}
+type InternalDateOptions<T = any> = {
+    adapter: (new (options: {
+        locale: any;
+    }) => DateInstance<T>) | DateInstance<T>;
+    formats?: Record<string, string>;
+    locale: Record<string, any>;
 };
+type DateOptions<T = any> = Partial<InternalDateOptions<T>>;
 
 interface VuetifyOptions {
     aliases?: Record<string, any>;

package/lib/components/VAppBar/VAppBar.mjs

@@ -7,9 +7,8 @@ import { makeVToolbarProps, VToolbar } from "../VToolbar/VToolbar.mjs"; // Compo
 import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs";
 import { makeScrollProps, useScroll } from "../../composables/scroll.mjs";
-import { useSsrBoot } from "../../composables/ssrBoot.mjs";
-import { useToggleScope } from "../../composables/toggleScope.mjs"; // Utilities
-import { computed, ref, shallowRef, toRef, watch } from 'vue';
+import { useSsrBoot } from "../../composables/ssrBoot.mjs"; // Utilities
+import { computed, ref, shallowRef, toRef, watchEffect } from 'vue';
 import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
 export const makeVAppBarProps = propsFactory({
   scrollBehavior: String,
@@ -80,7 +79,7 @@ export const VAppBar = genericComponent()({
       const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0;
       return height + extensionHeight;
     });
-    function setActive() {
+    watchEffect(() => {
       if (scrollBehavior.value.hide) {
         if (scrollBehavior.value.inverted) {
           isActive.value = currentScroll.value > scrollThreshold.value;
@@ -90,12 +89,6 @@ export const VAppBar = genericComponent()({
       } else {
         isActive.value = true;
       }
-    }
-    useToggleScope(() => !!props.scrollBehavior, () => {
-      watch(currentScroll, setActive, {
-        immediate: true
-      });
-      watch(scrollBehavior, setActive);
     });
     const {
       ssrBootStyles

package/lib/components/VAppBar/VAppBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VAppBar.mjs","names":["makeVToolbarProps","VToolbar","makeLayoutItemProps","useLayoutItem","useProxiedModel","makeScrollProps","useScroll","useSsrBoot","useToggleScope","computed","ref","shallowRef","toRef","watch","genericComponent","propsFactory","useRender","makeVAppBarProps","scrollBehavior","String","modelValue","type","Boolean","default","location","validator","value","includes","height","Number","VAppBar","name","props","emits","setup","_ref","slots","vToolbarRef","isActive","behavior","Set","split","hide","has","inverted","collapse","elevate","fadeImage","canScroll","currentScroll","scrollThreshold","isScrollingUp","scrollRatio","isCollapsed","isFlat","flat","opacity","undefined","contentHeight","extensionHeight","setActive","immediate","ssrBootStyles","layoutItemStyles","id","order","parseInt","position","layoutSize","elementSize","active","absolute","toolbarProps","filterProps","_createVNode","_mergeProps","class","style"],"sources":["../../../src/components/VAppBar/VAppBar.tsx"],"sourcesContent":["// Styles\nimport './VAppBar.sass'\n\n// Components\nimport { makeVToolbarProps, VToolbar } from '@/components/VToolbar/VToolbar'\n\n// Composables\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { makeScrollProps, useScroll } from '@/composables/scroll'\nimport { useSsrBoot } from '@/composables/ssrBoot'\nimport { useToggleScope } from '@/composables/toggleScope'\n\n// Utilities\nimport { computed, ref, shallowRef, toRef, watch } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { VToolbarSlots } from '@/components/VToolbar/VToolbar'\n\nexport const makeVAppBarProps = propsFactory({\n  scrollBehavior: String,\n  modelValue: {\n    type: Boolean,\n    default: true,\n  },\n  location: {\n    type: String as PropType<'top' | 'bottom'>,\n    default: 'top',\n    validator: (value: any) => ['top', 'bottom'].includes(value),\n  },\n\n  ...makeVToolbarProps(),\n  ...makeLayoutItemProps(),\n  ...makeScrollProps(),\n\n  height: {\n    type: [Number, String],\n    default: 64,\n  },\n}, 'VAppBar')\n\nexport const VAppBar = genericComponent<VToolbarSlots>()({\n  name: 'VAppBar',\n\n  props: makeVAppBarProps(),\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const vToolbarRef = ref<VToolbar>()\n    const isActive = useProxiedModel(props, 'modelValue')\n    const scrollBehavior = computed(() => {\n      const behavior = new Set(props.scrollBehavior?.split(' ') ?? [])\n      return {\n        hide: behavior.has('hide'),\n        // fullyHide: behavior.has('fully-hide'),\n        inverted: behavior.has('inverted'),\n        collapse: behavior.has('collapse'),\n        elevate: behavior.has('elevate'),\n        fadeImage: behavior.has('fade-image'),\n        // shrink: behavior.has('shrink'),\n      }\n    })\n    const canScroll = computed(() => {\n      const behavior = scrollBehavior.value\n      return (\n        behavior.hide ||\n        // behavior.fullyHide ||\n        behavior.inverted ||\n        behavior.collapse ||\n        behavior.elevate ||\n        behavior.fadeImage ||\n        // behavior.shrink ||\n        !isActive.value\n      )\n    })\n    const {\n      currentScroll,\n      scrollThreshold,\n      isScrollingUp,\n      scrollRatio,\n    } = useScroll(props, { canScroll })\n\n    const isCollapsed = computed(() => props.collapse || (\n      scrollBehavior.value.collapse &&\n      (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0)\n    ))\n    const isFlat = computed(() => props.flat || (\n      scrollBehavior.value.elevate &&\n      (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0)\n    ))\n    const opacity = computed(() => (\n      scrollBehavior.value.fadeImage\n        ? (scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value)\n        : undefined\n    ))\n    const height = computed(() => {\n      if (scrollBehavior.value.hide && scrollBehavior.value.inverted) return 0\n\n      const height = vToolbarRef.value?.contentHeight ?? 0\n      const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0\n\n      return (height + extensionHeight)\n    })\n    function setActive () {\n      if (scrollBehavior.value.hide) {\n        if (scrollBehavior.value.inverted) {\n          isActive.value = currentScroll.value > scrollThreshold.value\n        } else {\n          isActive.value = isScrollingUp.value || (currentScroll.value < scrollThreshold.value)\n        }\n      } else {\n        isActive.value = true\n      }\n    }\n\n    useToggleScope(() => !!props.scrollBehavior, () => {\n      watch(currentScroll, setActive, { immediate: true })\n      watch(scrollBehavior, setActive)\n    })\n\n    const { ssrBootStyles } = useSsrBoot()\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: toRef(props, 'location'),\n      layoutSize: height,\n      elementSize: shallowRef(undefined),\n      active: isActive,\n      absolute: toRef(props, 'absolute'),\n    })\n\n    useRender(() => {\n      const [toolbarProps] = VToolbar.filterProps(props)\n\n      return (\n        <VToolbar\n          ref={ vToolbarRef }\n          class={[\n            'v-app-bar',\n            {\n              'v-app-bar--bottom': props.location === 'bottom',\n            },\n            props.class,\n          ]}\n          style={[\n            {\n              ...layoutItemStyles.value,\n              '--v-toolbar-image-opacity': opacity.value,\n              height: undefined,\n              ...ssrBootStyles.value,\n            },\n            props.style,\n          ]}\n          { ...toolbarProps }\n          collapse={ isCollapsed.value }\n          flat={ isFlat.value }\n          v-slots={ slots }\n        />\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VAppBar = InstanceType<typeof VAppBar>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,iBAAiB,EAAEC,QAAQ,oCAEpC;AAAA,SACSC,mBAAmB,EAAEC,aAAa;AAAA,SAClCC,eAAe;AAAA,SACfC,eAAe,EAAEC,SAAS;AAAA,SAC1BC,UAAU;AAAA,SACVC,cAAc,6CAEvB;AACA,SAASC,QAAQ,EAAEC,GAAG,EAAEC,UAAU,EAAEC,KAAK,EAAEC,KAAK,QAAQ,KAAK;AAAA,SACpDC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAElD;AAIA,OAAO,MAAMC,gBAAgB,GAAGF,YAAY,CAAC;EAC3CG,cAAc,EAAEC,MAAM;EACtBC,UAAU,EAAE;IACVC,IAAI,EAAEC,OAAO;IACbC,OAAO,EAAE;EACX,CAAC;EACDC,QAAQ,EAAE;IACRH,IAAI,EAAEF,MAAoC;IAC1CI,OAAO,EAAE,KAAK;IACdE,SAAS,EAAGC,KAAU,IAAK,CAAC,KAAK,EAAE,QAAQ,CAAC,CAACC,QAAQ,CAACD,KAAK;EAC7D,CAAC;EAED,GAAG1B,iBAAiB,EAAE;EACtB,GAAGE,mBAAmB,EAAE;EACxB,GAAGG,eAAe,EAAE;EAEpBuB,MAAM,EAAE;IACNP,IAAI,EAAE,CAACQ,MAAM,EAAEV,MAAM,CAAC;IACtBI,OAAO,EAAE;EACX;AACF,CAAC,EAAE,SAAS,CAAC;AAEb,OAAO,MAAMO,OAAO,GAAGhB,gBAAgB,EAAiB,CAAC;EACvDiB,IAAI,EAAE,SAAS;EAEfC,KAAK,EAAEf,gBAAgB,EAAE;EAEzBgB,KAAK,EAAE;IACL,mBAAmB,EAAGP,KAAc,IAAK;EAC3C,CAAC;EAEDQ,KAAKA,CAAEF,KAAK,EAAAG,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAME,WAAW,GAAG3B,GAAG,EAAY;IACnC,MAAM4B,QAAQ,GAAGlC,eAAe,CAAC4B,KAAK,EAAE,YAAY,CAAC;IACrD,MAAMd,cAAc,GAAGT,QAAQ,CAAC,MAAM;MACpC,MAAM8B,QAAQ,GAAG,IAAIC,GAAG,CAACR,KAAK,CAACd,cAAc,EAAEuB,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;MAChE,OAAO;QACLC,IAAI,EAAEH,QAAQ,CAACI,GAAG,CAAC,MAAM,CAAC;QAC1B;QACAC,QAAQ,EAAEL,QAAQ,CAACI,GAAG,CAAC,UAAU,CAAC;QAClCE,QAAQ,EAAEN,QAAQ,CAACI,GAAG,CAAC,UAAU,CAAC;QAClCG,OAAO,EAAEP,QAAQ,CAACI,GAAG,CAAC,SAAS,CAAC;QAChCI,SAAS,EAAER,QAAQ,CAACI,GAAG,CAAC,YAAY;QACpC;MACF,CAAC;IACH,CAAC,CAAC;;IACF,MAAMK,SAAS,GAAGvC,QAAQ,CAAC,MAAM;MAC/B,MAAM8B,QAAQ,GAAGrB,cAAc,CAACQ,KAAK;MACrC,OACEa,QAAQ,CAACG,IAAI;MACb;MACAH,QAAQ,CAACK,QAAQ,IACjBL,QAAQ,CAACM,QAAQ,IACjBN,QAAQ,CAACO,OAAO,IAChBP,QAAQ,CAACQ,SAAS;MAClB;MACA,CAACT,QAAQ,CAACZ,KAAK;IAEnB,CAAC,CAAC;IACF,MAAM;MACJuB,aAAa;MACbC,eAAe;MACfC,aAAa;MACbC;IACF,CAAC,GAAG9C,SAAS,CAAC0B,KAAK,EAAE;MAAEgB;IAAU,CAAC,CAAC;IAEnC,MAAMK,WAAW,GAAG5C,QAAQ,CAAC,MAAMuB,KAAK,CAACa,QAAQ,IAC/C3B,cAAc,CAACQ,KAAK,CAACmB,QAAQ,KAC5B3B,cAAc,CAACQ,KAAK,CAACkB,QAAQ,GAAGQ,WAAW,CAAC1B,KAAK,GAAG,CAAC,GAAG0B,WAAW,CAAC1B,KAAK,KAAK,CAAC,CACjF,CAAC;IACF,MAAM4B,MAAM,GAAG7C,QAAQ,CAAC,MAAMuB,KAAK,CAACuB,IAAI,IACtCrC,cAAc,CAACQ,KAAK,CAACoB,OAAO,KAC3B5B,cAAc,CAACQ,KAAK,CAACkB,QAAQ,GAAGK,aAAa,CAACvB,KAAK,GAAG,CAAC,GAAGuB,aAAa,CAACvB,KAAK,KAAK,CAAC,CACrF,CAAC;IACF,MAAM8B,OAAO,GAAG/C,QAAQ,CAAC,MACvBS,cAAc,CAACQ,KAAK,CAACqB,SAAS,GACzB7B,cAAc,CAACQ,KAAK,CAACkB,QAAQ,GAAG,CAAC,GAAGQ,WAAW,CAAC1B,KAAK,GAAG0B,WAAW,CAAC1B,KAAK,GAC1E+B,SACL,CAAC;IACF,MAAM7B,MAAM,GAAGnB,QAAQ,CAAC,MAAM;MAC5B,IAAIS,cAAc,CAACQ,KAAK,CAACgB,IAAI,IAAIxB,cAAc,CAACQ,KAAK,CAACkB,QAAQ,EAAE,OAAO,CAAC;MAExE,MAAMhB,MAAM,GAAGS,WAAW,CAACX,KAAK,EAAEgC,aAAa,IAAI,CAAC;MACpD,MAAMC,eAAe,GAAGtB,WAAW,CAACX,KAAK,EAAEiC,eAAe,IAAI,CAAC;MAE/D,OAAQ/B,MAAM,GAAG+B,eAAe;IAClC,CAAC,CAAC;IACF,SAASC,SAASA,CAAA,EAAI;MACpB,IAAI1C,cAAc,CAACQ,KAAK,CAACgB,IAAI,EAAE;QAC7B,IAAIxB,cAAc,CAACQ,KAAK,CAACkB,QAAQ,EAAE;UACjCN,QAAQ,CAACZ,KAAK,GAAGuB,aAAa,CAACvB,KAAK,GAAGwB,eAAe,CAACxB,KAAK;QAC9D,CAAC,MAAM;UACLY,QAAQ,CAACZ,KAAK,GAAGyB,aAAa,CAACzB,KAAK,IAAKuB,aAAa,CAACvB,KAAK,GAAGwB,eAAe,CAACxB,KAAM;QACvF;MACF,CAAC,MAAM;QACLY,QAAQ,CAACZ,KAAK,GAAG,IAAI;MACvB;IACF;IAEAlB,cAAc,CAAC,MAAM,CAAC,CAACwB,KAAK,CAACd,cAAc,EAAE,MAAM;MACjDL,KAAK,CAACoC,aAAa,EAAEW,SAAS,EAAE;QAAEC,SAAS,EAAE;MAAK,CAAC,CAAC;MACpDhD,KAAK,CAACK,cAAc,EAAE0C,SAAS,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM;MAAEE;IAAc,CAAC,GAAGvD,UAAU,EAAE;IACtC,MAAM;MAAEwD;IAAiB,CAAC,GAAG5D,aAAa,CAAC;MACzC6D,EAAE,EAAEhC,KAAK,CAACD,IAAI;MACdkC,KAAK,EAAExD,QAAQ,CAAC,MAAMyD,QAAQ,CAAClC,KAAK,CAACiC,KAAK,EAAE,EAAE,CAAC,CAAC;MAChDE,QAAQ,EAAEvD,KAAK,CAACoB,KAAK,EAAE,UAAU,CAAC;MAClCoC,UAAU,EAAExC,MAAM;MAClByC,WAAW,EAAE1D,UAAU,CAAC8C,SAAS,CAAC;MAClCa,MAAM,EAAEhC,QAAQ;MAChBiC,QAAQ,EAAE3D,KAAK,CAACoB,KAAK,EAAE,UAAU;IACnC,CAAC,CAAC;IAEFhB,SAAS,CAAC,MAAM;MACd,MAAM,CAACwD,YAAY,CAAC,GAAGvE,QAAQ,CAACwE,WAAW,CAACzC,KAAK,CAAC;MAElD,OAAA0C,YAAA,CAAAzE,QAAA,EAAA0E,WAAA;QAAA,OAEUtC,WAAW;QAAA,SACV,CACL,WAAW,EACX;UACE,mBAAmB,EAAEL,KAAK,CAACR,QAAQ,KAAK;QAC1C,CAAC,EACDQ,KAAK,CAAC4C,KAAK,CACZ;QAAA,SACM,CACL;UACE,GAAGb,gBAAgB,CAACrC,KAAK;UACzB,2BAA2B,EAAE8B,OAAO,CAAC9B,KAAK;UAC1CE,MAAM,EAAE6B,SAAS;UACjB,GAAGK,aAAa,CAACpC;QACnB,CAAC,EACDM,KAAK,CAAC6C,KAAK;MACZ,GACIL,YAAY;QAAA,YACNnB,WAAW,CAAC3B,KAAK;QAAA,QACrB4B,MAAM,CAAC5B;MAAK,IACTU,KAAK;IAGrB,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VAppBar.mjs","names":["makeVToolbarProps","VToolbar","makeLayoutItemProps","useLayoutItem","useProxiedModel","makeScrollProps","useScroll","useSsrBoot","computed","ref","shallowRef","toRef","watchEffect","genericComponent","propsFactory","useRender","makeVAppBarProps","scrollBehavior","String","modelValue","type","Boolean","default","location","validator","value","includes","height","Number","VAppBar","name","props","emits","setup","_ref","slots","vToolbarRef","isActive","behavior","Set","split","hide","has","inverted","collapse","elevate","fadeImage","canScroll","currentScroll","scrollThreshold","isScrollingUp","scrollRatio","isCollapsed","isFlat","flat","opacity","undefined","contentHeight","extensionHeight","ssrBootStyles","layoutItemStyles","id","order","parseInt","position","layoutSize","elementSize","active","absolute","toolbarProps","filterProps","_createVNode","_mergeProps","class","style"],"sources":["../../../src/components/VAppBar/VAppBar.tsx"],"sourcesContent":["// Styles\nimport './VAppBar.sass'\n\n// Components\nimport { makeVToolbarProps, VToolbar } from '@/components/VToolbar/VToolbar'\n\n// Composables\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { makeScrollProps, useScroll } from '@/composables/scroll'\nimport { useSsrBoot } from '@/composables/ssrBoot'\n\n// Utilities\nimport { computed, ref, shallowRef, toRef, watchEffect } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { VToolbarSlots } from '@/components/VToolbar/VToolbar'\n\nexport const makeVAppBarProps = propsFactory({\n  scrollBehavior: String,\n  modelValue: {\n    type: Boolean,\n    default: true,\n  },\n  location: {\n    type: String as PropType<'top' | 'bottom'>,\n    default: 'top',\n    validator: (value: any) => ['top', 'bottom'].includes(value),\n  },\n\n  ...makeVToolbarProps(),\n  ...makeLayoutItemProps(),\n  ...makeScrollProps(),\n\n  height: {\n    type: [Number, String],\n    default: 64,\n  },\n}, 'VAppBar')\n\nexport const VAppBar = genericComponent<VToolbarSlots>()({\n  name: 'VAppBar',\n\n  props: makeVAppBarProps(),\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const vToolbarRef = ref<VToolbar>()\n    const isActive = useProxiedModel(props, 'modelValue')\n    const scrollBehavior = computed(() => {\n      const behavior = new Set(props.scrollBehavior?.split(' ') ?? [])\n      return {\n        hide: behavior.has('hide'),\n        // fullyHide: behavior.has('fully-hide'),\n        inverted: behavior.has('inverted'),\n        collapse: behavior.has('collapse'),\n        elevate: behavior.has('elevate'),\n        fadeImage: behavior.has('fade-image'),\n        // shrink: behavior.has('shrink'),\n      }\n    })\n    const canScroll = computed(() => {\n      const behavior = scrollBehavior.value\n      return (\n        behavior.hide ||\n        // behavior.fullyHide ||\n        behavior.inverted ||\n        behavior.collapse ||\n        behavior.elevate ||\n        behavior.fadeImage ||\n        // behavior.shrink ||\n        !isActive.value\n      )\n    })\n    const {\n      currentScroll,\n      scrollThreshold,\n      isScrollingUp,\n      scrollRatio,\n    } = useScroll(props, { canScroll })\n\n    const isCollapsed = computed(() => props.collapse || (\n      scrollBehavior.value.collapse &&\n      (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0)\n    ))\n    const isFlat = computed(() => props.flat || (\n      scrollBehavior.value.elevate &&\n      (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0)\n    ))\n    const opacity = computed(() => (\n      scrollBehavior.value.fadeImage\n        ? (scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value)\n        : undefined\n    ))\n    const height = computed(() => {\n      if (scrollBehavior.value.hide && scrollBehavior.value.inverted) return 0\n\n      const height = vToolbarRef.value?.contentHeight ?? 0\n      const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0\n\n      return (height + extensionHeight)\n    })\n\n    watchEffect(() => {\n      if (scrollBehavior.value.hide) {\n        if (scrollBehavior.value.inverted) {\n          isActive.value = currentScroll.value > scrollThreshold.value\n        } else {\n          isActive.value = isScrollingUp.value || (currentScroll.value < scrollThreshold.value)\n        }\n      } else {\n        isActive.value = true\n      }\n    })\n\n    const { ssrBootStyles } = useSsrBoot()\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: toRef(props, 'location'),\n      layoutSize: height,\n      elementSize: shallowRef(undefined),\n      active: isActive,\n      absolute: toRef(props, 'absolute'),\n    })\n\n    useRender(() => {\n      const [toolbarProps] = VToolbar.filterProps(props)\n\n      return (\n        <VToolbar\n          ref={ vToolbarRef }\n          class={[\n            'v-app-bar',\n            {\n              'v-app-bar--bottom': props.location === 'bottom',\n            },\n            props.class,\n          ]}\n          style={[\n            {\n              ...layoutItemStyles.value,\n              '--v-toolbar-image-opacity': opacity.value,\n              height: undefined,\n              ...ssrBootStyles.value,\n            },\n            props.style,\n          ]}\n          { ...toolbarProps }\n          collapse={ isCollapsed.value }\n          flat={ isFlat.value }\n          v-slots={ slots }\n        />\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VAppBar = InstanceType<typeof VAppBar>\n"],"mappings":"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"}

package/lib/components/VAppBar/index.d.mts

@@ -585,7 +585,9 @@ declare const VAppBarNavIcon: {
             density?: Density | undefined;
             variant?: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">> | undefined;
             stacked?: boolean | undefined;
-            ripple?: boolean | undefined;
+            ripple?: boolean | {
+                class: string;
+            } | undefined;
             key?: string | number | symbol | undefined;
             location?: Anchor | undefined;
             height?: string | number | undefined;
@@ -704,7 +706,9 @@ declare const VAppBarNavIcon: {
             density: Density;
             variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
             stacked: boolean;
-            ripple: boolean;
+            ripple: boolean | {
+                class: string;
+            } | undefined;
         } & {
             location?: Anchor | undefined;
             height?: string | number | undefined;
@@ -763,7 +767,9 @@ declare const VAppBarNavIcon: {
             density: Density;
             variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
             stacked: boolean;
-            ripple: boolean;
+            ripple: boolean | {
+                class: string;
+            } | undefined;
         }, {}, string, vue.SlotsType<Partial<{
             default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
@@ -811,7 +817,9 @@ declare const VAppBarNavIcon: {
         density: Density;
         variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
         stacked: boolean;
-        ripple: boolean;
+        ripple: boolean | {
+            class: string;
+        } | undefined;
     } & {
         location?: Anchor | undefined;
         height?: string | number | undefined;
@@ -872,7 +880,9 @@ declare const VAppBarNavIcon: {
     density: Density;
     variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
     stacked: boolean;
-    ripple: boolean;
+    ripple: boolean | {
+        class: string;
+    } | undefined;
 } & {
     location?: Anchor | undefined;
     height?: string | number | undefined;
@@ -931,7 +941,9 @@ declare const VAppBarNavIcon: {
     density: Density;
     variant: NonNullable<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
     stacked: boolean;
-    ripple: boolean;
+    ripple: boolean | {
+        class: string;
+    } | undefined;
 }, {}, string, vue.SlotsType<Partial<{
     default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
@@ -1026,7 +1038,9 @@ declare const VAppBarNavIcon: {
     block: BooleanConstructor;
     stacked: BooleanConstructor;
     ripple: {
-        type: BooleanConstructor;
+        type: vue.PropType<boolean | {
+            class: string;
+        } | undefined>;
         default: boolean;
     };
     text: StringConstructor;
@@ -1111,7 +1125,9 @@ declare const VAppBarNavIcon: {
     block: BooleanConstructor;
     stacked: BooleanConstructor;
     ripple: {
-        type: BooleanConstructor;
+        type: vue.PropType<boolean | {
+            class: string;
+        } | undefined>;
         default: boolean;
     };
     text: StringConstructor;

package/lib/components/VAutocomplete/VAutocomplete.css

@@ -1,23 +1,8 @@
-.v-input--density-default {
-  --autocomplete-chips-margin-bottom: 0px;
-}
-
-.v-input--density-comfortable {
-  --autocomplete-chips-margin-bottom: 2px;
-}
-
-.v-input--density-compact {
-  --autocomplete-chips-margin-bottom: 4px;
-}
-
 .v-autocomplete .v-field .v-text-field__prefix,
 .v-autocomplete .v-field .v-text-field__suffix,
 .v-autocomplete .v-field .v-field__input, .v-autocomplete .v-field.v-field {
   cursor: text;
 }
-.v-autocomplete .v-field--variant-outlined {
-  --autocomplete-chips-margin-bottom: 2px;
-}
 .v-autocomplete .v-field .v-field__input > input {
   align-self: flex-start;
   flex: 1 1;
@@ -48,14 +33,11 @@
   line-height: inherit;
   max-width: 100%;
 }
-.v-autocomplete--chips .v-field__input, .v-autocomplete--selection-slot .v-field__input {
-  min-height: calc(var(--v-field-input-min-height) + var(--autocomplete-chips-margin-bottom) + 2px);
-}
-.v-autocomplete--chips .v-autocomplete__selection, .v-autocomplete--selection-slot .v-autocomplete__selection {
-  margin-top: 2px;
-  margin-bottom: var(--autocomplete-chips-margin-bottom);
+.v-autocomplete input, .v-autocomplete__selection {
+  margin-top: var(--v-input-chips-margin-top);
+  margin-bottom: var(--v-input-chips-margin-bottom);
 }
-.v-autocomplete--chips .v-autocomplete__selection:first-child, .v-autocomplete--selection-slot .v-autocomplete__selection:first-child {
+.v-autocomplete input:first-child, .v-autocomplete__selection:first-child {
   margin-inline-start: 0;
 }
 .v-autocomplete--selecting-index .v-autocomplete__selection {

package/lib/components/VAutocomplete/VAutocomplete.mjs

@@ -89,7 +89,7 @@ export const VAutocomplete = genericComponent()({
       textColorStyles
     } = useTextColor(color);
     const search = useProxiedModel(props, 'search', '');
-    const model = useProxiedModel(props, 'modelValue', [], v => transformIn(wrapInArray(v)), v => {
+    const model = useProxiedModel(props, 'modelValue', [], v => transformIn(v === null ? [null] : wrapInArray(v)), v => {
       const transformed = transformOut(v);
       return props.multiple ? transformed : transformed[0] ?? null;
     });
@@ -115,6 +115,7 @@ export const VAutocomplete = genericComponent()({
       const selectFirst = props.autoSelectFirst === true || props.autoSelectFirst === 'exact' && search.value === displayItems.value[0]?.title;
       return selectFirst && displayItems.value.length > 0 && !isPristine.value && !listHasFocus.value;
     });
+    const menuDisabled = computed(() => props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value);
     const listRef = ref();
     function onClear(e) {
       if (props.openOnClear) {
@@ -123,10 +124,11 @@ export const VAutocomplete = genericComponent()({
       search.value = '';
     }
     function onMousedownControl() {
-      if (props.hideNoData && !items.value.length || props.readonly || form?.isReadonly.value) return;
+      if (menuDisabled.value) return;
       menu.value = true;
     }
     function onMousedownMenuIcon(e) {
+      if (menuDisabled.value) return;
       if (isFocused.value) {
         e.preventDefault();
         e.stopPropagation();
@@ -152,13 +154,8 @@ export const VAutocomplete = genericComponent()({
         }
         isPristine.value = true;
       }
-      if (e.key === 'ArrowDown') {
+      if (e.key === 'ArrowDown' && highlightFirst.value) {
         listRef.value?.focus('next');
-        if (highlightFirst.value) {
-          listRef.value?.focus('next');
-        }
-      } else if (e.key === 'ArrowUp') {
-        listRef.value?.focus('prev');
       }
       if (!props.multiple) return;
       if (['Backspace', 'Delete'].includes(e.key)) {
@@ -193,6 +190,11 @@ export const VAutocomplete = genericComponent()({
         }
       }
     }
+    function onListKeydown(e) {
+      if (e.key === 'Tab') {
+        vTextFieldRef.value?.focus();
+      }
+    }
     function onInput(e) {
       search.value = e.target.value;
     }
@@ -262,7 +264,7 @@ export const VAutocomplete = genericComponent()({
     });
     useRender(() => {
       const hasChips = !!(props.chips || slots.chip);
-      const hasList = !!(!props.hideNoData || displayItems.value.length || slots.prepend || slots.append || slots['no-data']);
+      const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
       const isDirty = model.value.length > 0;
       const [textFieldProps] = VTextField.filterProps(props);
       return _createVNode(VTextField, _mergeProps({
@@ -295,6 +297,7 @@ export const VAutocomplete = genericComponent()({
           "onUpdate:modelValue": $event => menu.value = $event,
           "activator": "parent",
           "contentClass": "v-autocomplete__content",
+          "disabled": menuDisabled.value,
           "eager": props.eager,
           "maxHeight": 310,
           "openOnClick": false,
@@ -307,12 +310,14 @@ export const VAutocomplete = genericComponent()({
             "selected": selected.value,
             "selectStrategy": props.multiple ? 'independent' : 'single-independent',
             "onMousedown": e => e.preventDefault(),
+            "onKeydown": onListKeydown,
             "onFocusin": onFocusin,
-            "onFocusout": onFocusout
+            "onFocusout": onFocusout,
+            "tabindex": "-1"
           }, {
-            default: () => [!displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? _createVNode(VListItem, {
+            default: () => [slots['prepend-item']?.(), !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? _createVNode(VListItem, {
               "title": t(props.noDataText)
-            }, null)), slots['prepend-item']?.(), displayItems.value.map((item, index) => {
+            }, null)), displayItems.value.map((item, index) => {
               const itemProps = mergeProps(item.props, {
                 key: index,
                 active: highlightFirst.value && index === 0 ? true : undefined,