@vuetify/nightly 4.0.0-dev-20230422.0 → 4.0.0-dev-20230427.0

package/lib/components/VAppBar/VAppBar.mjs

@@ -117,13 +117,13 @@ export const VAppBar = genericComponent()({
         "ref": vToolbarRef,
         "class": ['v-app-bar', {
           'v-app-bar--bottom': props.location === 'bottom'
-        }],
-        "style": {
+        }, props.class],
+        "style": [{
           ...layoutItemStyles.value,
           '--v-toolbar-image-opacity': opacity.value,
           height: undefined,
           ...ssrBootStyles.value
-        }
+        }, props.style]
       }, toolbarProps, {
         "collapse": isCollapsed.value,
         "flat": isFlat.value

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

@@ -1 +1 @@
-{"version":3,"file":"VAppBar.mjs","names":["makeVToolbarProps","VToolbar","makeLayoutItemProps","useLayoutItem","makeScrollProps","useScroll","useProxiedModel","useSsrBoot","computed","ref","toRef","watch","genericComponent","useRender","VAppBar","name","props","scrollBehavior","String","modelValue","type","Boolean","default","location","validator","value","includes","height","Number","emits","setup","_ref","slots","vToolbarRef","isActive","behavior","Set","split","hide","has","inverted","collapse","elevate","fadeImage","canScroll","currentScroll","currentThreshold","computedScrollThreshold","isScrollingUp","isCollapsed","isFlat","flat","scrollRatio","Math","min","opacity","undefined","contentHeight","extensionHeight","setActive","val","immediate","ssrBootStyles","layoutItemStyles","id","order","parseInt","position","layoutSize","elementSize","active","absolute","toolbarProps","filterProps","_createVNode","_mergeProps"],"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 { makeScrollProps, useScroll } from '@/composables/scroll'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useSsrBoot } from '@/composables/ssrBoot'\n\n// Utilities\nimport { computed, ref, toRef, watch } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { VToolbarSlots } from '@/components/VToolbar/VToolbar'\n\nexport const VAppBar = genericComponent<VToolbarSlots>()({\n  name: 'VAppBar',\n\n  props: {\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  },\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      currentThreshold,\n      computedScrollThreshold,\n      isScrollingUp,\n    } = useScroll(props, { canScroll })\n\n    const isCollapsed = computed(() => props.collapse || (\n      scrollBehavior.value.collapse &&\n      (scrollBehavior.value.inverted ? currentScroll.value < 1 : currentScroll.value > 0)\n    ))\n    const isFlat = computed(() => props.flat || (\n      scrollBehavior.value.elevate &&\n      currentScroll.value === (scrollBehavior.value.inverted ? 1 : 0)\n    ))\n    const scrollRatio = computed(() => Math.min(\n      ((currentThreshold.value - currentScroll.value) / currentThreshold.value) || 1,\n      1\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      const val = currentScroll.value\n      if (scrollBehavior.value.hide) {\n        if (scrollBehavior.value.inverted) {\n          isActive.value = val > computedScrollThreshold.value\n        } else {\n          isActive.value = isScrollingUp.value || (val < computedScrollThreshold.value)\n        }\n      } else if (scrollBehavior.value.inverted) {\n        isActive.value = currentScroll.value === 0\n      } else {\n        isActive.value = true\n      }\n    }\n\n    watch(currentScroll, setActive, { immediate: true })\n    watch(scrollBehavior, setActive)\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: ref(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          ]}\n          style={{\n            ...layoutItemStyles.value,\n            '--v-toolbar-image-opacity': opacity.value,\n            height: undefined,\n            ...ssrBootStyles.value,\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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"}
+{"version":3,"file":"VAppBar.mjs","names":["makeVToolbarProps","VToolbar","makeLayoutItemProps","useLayoutItem","makeScrollProps","useScroll","useProxiedModel","useSsrBoot","computed","ref","toRef","watch","genericComponent","useRender","VAppBar","name","props","scrollBehavior","String","modelValue","type","Boolean","default","location","validator","value","includes","height","Number","emits","setup","_ref","slots","vToolbarRef","isActive","behavior","Set","split","hide","has","inverted","collapse","elevate","fadeImage","canScroll","currentScroll","currentThreshold","computedScrollThreshold","isScrollingUp","isCollapsed","isFlat","flat","scrollRatio","Math","min","opacity","undefined","contentHeight","extensionHeight","setActive","val","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 { makeScrollProps, useScroll } from '@/composables/scroll'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useSsrBoot } from '@/composables/ssrBoot'\n\n// Utilities\nimport { computed, ref, toRef, watch } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { VToolbarSlots } from '@/components/VToolbar/VToolbar'\n\nexport const VAppBar = genericComponent<VToolbarSlots>()({\n  name: 'VAppBar',\n\n  props: {\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  },\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      currentThreshold,\n      computedScrollThreshold,\n      isScrollingUp,\n    } = useScroll(props, { canScroll })\n\n    const isCollapsed = computed(() => props.collapse || (\n      scrollBehavior.value.collapse &&\n      (scrollBehavior.value.inverted ? currentScroll.value < 1 : currentScroll.value > 0)\n    ))\n    const isFlat = computed(() => props.flat || (\n      scrollBehavior.value.elevate &&\n      currentScroll.value === (scrollBehavior.value.inverted ? 1 : 0)\n    ))\n    const scrollRatio = computed(() => Math.min(\n      ((currentThreshold.value - currentScroll.value) / currentThreshold.value) || 1,\n      1\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      const val = currentScroll.value\n      if (scrollBehavior.value.hide) {\n        if (scrollBehavior.value.inverted) {\n          isActive.value = val > computedScrollThreshold.value\n        } else {\n          isActive.value = isScrollingUp.value || (val < computedScrollThreshold.value)\n        }\n      } else if (scrollBehavior.value.inverted) {\n        isActive.value = currentScroll.value === 0\n      } else {\n        isActive.value = true\n      }\n    }\n\n    watch(currentScroll, setActive, { immediate: true })\n    watch(scrollBehavior, setActive)\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: ref(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/VAppBarNavIcon.mjs

@@ -1,7 +1,8 @@
 import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
 // Components
 import { VBtn } from "../VBtn/index.mjs"; // Composables
-import { IconValue } from "../../composables/icons.mjs"; // Utilities
+import { IconValue } from "../../composables/icons.mjs";
+import { makeComponentProps } from "../../composables/component.mjs"; // Utilities
 import { genericComponent, useRender } from "../../util/index.mjs"; // Types
 export const VAppBarNavIcon = genericComponent()({
   name: 'VAppBarNavIcon',
@@ -9,15 +10,17 @@ export const VAppBarNavIcon = genericComponent()({
     icon: {
       type: IconValue,
       default: '$menu'
-    }
+    },
+    ...makeComponentProps()
   },
   setup(props, _ref) {
     let {
       slots
     } = _ref;
     useRender(() => _createVNode(VBtn, {
-      "class": "v-app-bar-nav-icon",
-      "icon": props.icon
+      "class": ['v-app-bar-nav-icon', props.class],
+      "icon": props.icon,
+      "style": props.style
     }, slots));
     return {};
   }

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

@@ -1 +1 @@
-{"version":3,"file":"VAppBarNavIcon.mjs","names":["VBtn","IconValue","genericComponent","useRender","VAppBarNavIcon","name","props","icon","type","default","setup","_ref","slots","_createVNode"],"sources":["../../../src/components/VAppBar/VAppBarNavIcon.tsx"],"sourcesContent":["// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\n\n// Utilities\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { VBtnSlots } from '@/components/VBtn/VBtn'\n\nexport const VAppBarNavIcon = genericComponent<VBtnSlots>()({\n  name: 'VAppBarNavIcon',\n\n  props: {\n    icon: {\n      type: IconValue,\n      default: '$menu',\n    },\n  },\n\n  setup (props, { slots }) {\n    useRender(() => (\n      <VBtn\n        class=\"v-app-bar-nav-icon\"\n        icon={ props.icon }\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VAppBarNavIcon = InstanceType<typeof VAppBarNavIcon>\n"],"mappings":";AAAA;AAAA,SACSA,IAAI,6BAEb;AAAA,SACSC,SAAS,uCAElB;AAAA,SACSC,gBAAgB,EAAEC,SAAS,gCAEpC;AAGA,OAAO,MAAMC,cAAc,GAAGF,gBAAgB,EAAa,CAAC;EAC1DG,IAAI,EAAE,gBAAgB;EAEtBC,KAAK,EAAE;IACLC,IAAI,EAAE;MACJC,IAAI,EAAEP,SAAS;MACfQ,OAAO,EAAE;IACX;EACF,CAAC;EAEDC,KAAKA,CAAEJ,KAAK,EAAAK,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrBR,SAAS,CAAC,MAAAU,YAAA,CAAAb,IAAA;MAAA,SAEA,oBAAoB;MAAA,QACnBM,KAAK,CAACC;IAAI,GACPK,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VAppBarNavIcon.mjs","names":["VBtn","IconValue","makeComponentProps","genericComponent","useRender","VAppBarNavIcon","name","props","icon","type","default","setup","_ref","slots","_createVNode","class","style"],"sources":["../../../src/components/VAppBar/VAppBarNavIcon.tsx"],"sourcesContent":["// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { makeComponentProps } from '@/composables/component'\n\n// Utilities\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { VBtnSlots } from '@/components/VBtn/VBtn'\n\nexport const VAppBarNavIcon = genericComponent<VBtnSlots>()({\n  name: 'VAppBarNavIcon',\n\n  props: {\n    icon: {\n      type: IconValue,\n      default: '$menu',\n    },\n\n    ...makeComponentProps(),\n  },\n\n  setup (props, { slots }) {\n    useRender(() => (\n      <VBtn\n        class={[\n          'v-app-bar-nav-icon',\n          props.class,\n        ]}\n        icon={ props.icon }\n        style={ props.style }\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VAppBarNavIcon = InstanceType<typeof VAppBarNavIcon>\n"],"mappings":";AAAA;AAAA,SACSA,IAAI,6BAEb;AAAA,SACSC,SAAS;AAAA,SACTC,kBAAkB,2CAE3B;AAAA,SACSC,gBAAgB,EAAEC,SAAS,gCAEpC;AAGA,OAAO,MAAMC,cAAc,GAAGF,gBAAgB,EAAa,CAAC;EAC1DG,IAAI,EAAE,gBAAgB;EAEtBC,KAAK,EAAE;IACLC,IAAI,EAAE;MACJC,IAAI,EAAER,SAAS;MACfS,OAAO,EAAE;IACX,CAAC;IAED,GAAGR,kBAAkB;EACvB,CAAC;EAEDS,KAAKA,CAAEJ,KAAK,EAAAK,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrBR,SAAS,CAAC,MAAAU,YAAA,CAAAd,IAAA;MAAA,SAEC,CACL,oBAAoB,EACpBO,KAAK,CAACQ,KAAK,CACZ;MAAA,QACMR,KAAK,CAACC,IAAI;MAAA,SACTD,KAAK,CAACS;IAAK,GACTH,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

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

@@ -17,6 +17,7 @@ declare const VAppBar: {
             location: "top" | "bottom";
             height: string | number;
             order: string | number;
+            style: vue.StyleValue;
             tag: string;
             collapse: boolean;
             rounded: string | number | boolean;
@@ -31,6 +32,7 @@ declare const VAppBar: {
             location: "top" | "bottom";
             height: string | number;
             order: string | number;
+            style: vue.StyleValue;
             tag: string;
             collapse: boolean;
             density: Density;
@@ -45,13 +47,14 @@ declare const VAppBar: {
             scrollBehavior?: string | undefined;
             title?: string | undefined;
             image?: string | undefined;
+            class?: any;
             elevation?: string | number | undefined;
             theme?: string | undefined;
             rounded?: string | number | boolean | undefined;
             scrollTarget?: string | undefined;
             scrollThreshold?: string | number | undefined;
         } & {
-            $children?: {} | vue.VNodeChild | {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
                 image?: (() => vue.VNodeChild) | undefined;
                 prepend?: (() => vue.VNodeChild) | undefined;
@@ -59,14 +62,6 @@ declare const VAppBar: {
                 title?: (() => vue.VNodeChild) | undefined;
                 extension?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-                image?: (() => vue.VNodeChild) | undefined;
-                prepend?: (() => vue.VNodeChild) | undefined;
-                append?: (() => vue.VNodeChild) | undefined;
-                title?: (() => vue.VNodeChild) | undefined;
-                extension?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
                 image?: false | (() => vue.VNodeChild) | undefined;
@@ -84,7 +79,7 @@ declare const VAppBar: {
             "v-slot:extension"?: false | (() => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "flat" | "absolute" | "location" | "height" | "order" | "tag" | "collapse" | "rounded" | "density" | "extended" | "extensionHeight" | "floating" | "modelValue">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "flat" | "absolute" | "location" | "height" | "order" | "style" | "tag" | "collapse" | "rounded" | "density" | "extended" | "extensionHeight" | "floating" | "modelValue">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -104,6 +99,7 @@ declare const VAppBar: {
             location: "top" | "bottom";
             height: string | number;
             order: string | number;
+            style: vue.StyleValue;
             tag: string;
             collapse: boolean;
             density: Density;
@@ -118,13 +114,14 @@ declare const VAppBar: {
             scrollBehavior?: string | undefined;
             title?: string | undefined;
             image?: string | undefined;
+            class?: any;
             elevation?: string | number | undefined;
             theme?: string | undefined;
             rounded?: string | number | boolean | undefined;
             scrollTarget?: string | undefined;
             scrollThreshold?: string | number | undefined;
         } & {
-            $children?: {} | vue.VNodeChild | {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
                 image?: (() => vue.VNodeChild) | undefined;
                 prepend?: (() => vue.VNodeChild) | undefined;
@@ -132,14 +129,6 @@ declare const VAppBar: {
                 title?: (() => vue.VNodeChild) | undefined;
                 extension?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-                image?: (() => vue.VNodeChild) | undefined;
-                prepend?: (() => vue.VNodeChild) | undefined;
-                append?: (() => vue.VNodeChild) | undefined;
-                title?: (() => vue.VNodeChild) | undefined;
-                extension?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
                 image?: false | (() => vue.VNodeChild) | undefined;
@@ -165,6 +154,7 @@ declare const VAppBar: {
             location: "top" | "bottom";
             height: string | number;
             order: string | number;
+            style: vue.StyleValue;
             tag: string;
             collapse: boolean;
             rounded: string | number | boolean;
@@ -199,6 +189,7 @@ declare const VAppBar: {
         location: "top" | "bottom";
         height: string | number;
         order: string | number;
+        style: vue.StyleValue;
         tag: string;
         collapse: boolean;
         density: Density;
@@ -213,13 +204,14 @@ declare const VAppBar: {
         scrollBehavior?: string | undefined;
         title?: string | undefined;
         image?: string | undefined;
+        class?: any;
         elevation?: string | number | undefined;
         theme?: string | undefined;
         rounded?: string | number | boolean | undefined;
         scrollTarget?: string | undefined;
         scrollThreshold?: string | number | undefined;
     } & {
-        $children?: {} | vue.VNodeChild | {
+        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
             image?: (() => vue.VNodeChild) | undefined;
             prepend?: (() => vue.VNodeChild) | undefined;
@@ -227,14 +219,6 @@ declare const VAppBar: {
             title?: (() => vue.VNodeChild) | undefined;
             extension?: (() => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            default?: (() => vue.VNodeChild) | undefined;
-            image?: (() => vue.VNodeChild) | undefined;
-            prepend?: (() => vue.VNodeChild) | undefined;
-            append?: (() => vue.VNodeChild) | undefined;
-            title?: (() => vue.VNodeChild) | undefined;
-            extension?: (() => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
             image?: false | (() => vue.VNodeChild) | undefined;
@@ -262,6 +246,7 @@ declare const VAppBar: {
     location: "top" | "bottom";
     height: string | number;
     order: string | number;
+    style: vue.StyleValue;
     tag: string;
     collapse: boolean;
     density: Density;
@@ -276,13 +261,14 @@ declare const VAppBar: {
     scrollBehavior?: string | undefined;
     title?: string | undefined;
     image?: string | undefined;
+    class?: any;
     elevation?: string | number | undefined;
     theme?: string | undefined;
     rounded?: string | number | boolean | undefined;
     scrollTarget?: string | undefined;
     scrollThreshold?: string | number | undefined;
 } & {
-    $children?: {} | vue.VNodeChild | {
+    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
         image?: (() => vue.VNodeChild) | undefined;
         prepend?: (() => vue.VNodeChild) | undefined;
@@ -290,14 +276,6 @@ declare const VAppBar: {
         title?: (() => vue.VNodeChild) | undefined;
         extension?: (() => vue.VNodeChild) | undefined;
     };
-    $slots?: {
-        default?: (() => vue.VNodeChild) | undefined;
-        image?: (() => vue.VNodeChild) | undefined;
-        prepend?: (() => vue.VNodeChild) | undefined;
-        append?: (() => vue.VNodeChild) | undefined;
-        title?: (() => vue.VNodeChild) | undefined;
-        extension?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
         image?: false | (() => vue.VNodeChild) | undefined;
@@ -323,6 +301,7 @@ declare const VAppBar: {
     location: "top" | "bottom";
     height: string | number;
     order: string | number;
+    style: vue.StyleValue;
     tag: string;
     collapse: boolean;
     rounded: string | number | boolean;
@@ -366,6 +345,11 @@ declare const VAppBar: {
         type: (StringConstructor | NumberConstructor)[];
         validator(v: any): boolean;
     };
+    class: PropType<any>;
+    style: {
+        type: PropType<vue.StyleValue>;
+        default: null;
+    };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     collapse: BooleanConstructor;
     color: StringConstructor;
@@ -428,6 +412,11 @@ declare const VAppBar: {
         type: (StringConstructor | NumberConstructor)[];
         validator(v: any): boolean;
     };
+    class: PropType<any>;
+    style: {
+        type: PropType<vue.StyleValue>;
+        default: null;
+    };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     collapse: BooleanConstructor;
     color: StringConstructor;
@@ -458,7 +447,7 @@ declare const VAppBar: {
 }>>;
 type VAppBar = InstanceType<typeof VAppBar>;
 
-type IconValue = string | JSXComponent;
+type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 
 declare const VAppBarNavIcon: {
@@ -466,22 +455,20 @@ declare const VAppBarNavIcon: {
         $: vue.ComponentInternalInstance;
         $data: {};
         $props: Partial<{
+            style: vue.StyleValue;
             icon: IconValue;
         }> & Omit<{
+            style: vue.StyleValue;
             icon: IconValue;
-        } & {} & {
-            $children?: {} | vue.VNodeChild | {
+        } & {
+            class?: any;
+        } & {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
                 prepend?: (() => vue.VNodeChild) | undefined;
                 append?: (() => vue.VNodeChild) | undefined;
                 loader?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-                prepend?: (() => vue.VNodeChild) | undefined;
-                append?: (() => vue.VNodeChild) | undefined;
-                loader?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
                 prepend?: false | (() => vue.VNodeChild) | undefined;
@@ -493,7 +480,7 @@ declare const VAppBarNavIcon: {
             "v-slot:prepend"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:append"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:loader"?: false | (() => vue.VNodeChild) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "icon">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "style" | "icon">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -508,20 +495,17 @@ declare const VAppBarNavIcon: {
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: vue.ComponentOptionsBase<{
+            style: vue.StyleValue;
             icon: IconValue;
-        } & {} & {
-            $children?: {} | vue.VNodeChild | {
+        } & {
+            class?: any;
+        } & {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
                 prepend?: (() => vue.VNodeChild) | undefined;
                 append?: (() => vue.VNodeChild) | undefined;
                 loader?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-                prepend?: (() => vue.VNodeChild) | undefined;
-                append?: (() => vue.VNodeChild) | undefined;
-                loader?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
                 prepend?: false | (() => vue.VNodeChild) | undefined;
@@ -534,6 +518,7 @@ declare const VAppBarNavIcon: {
             "v-slot:append"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:loader"?: false | (() => vue.VNodeChild) | undefined;
         }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+            style: vue.StyleValue;
             icon: IconValue;
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
@@ -556,20 +541,17 @@ declare const VAppBarNavIcon: {
         $nextTick: typeof vue.nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
     } & {
+        style: vue.StyleValue;
         icon: IconValue;
-    } & {} & {
-        $children?: {} | vue.VNodeChild | {
+    } & {
+        class?: any;
+    } & {
+        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
             prepend?: (() => vue.VNodeChild) | undefined;
             append?: (() => vue.VNodeChild) | undefined;
             loader?: (() => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            default?: (() => vue.VNodeChild) | undefined;
-            prepend?: (() => vue.VNodeChild) | undefined;
-            append?: (() => vue.VNodeChild) | undefined;
-            loader?: (() => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
             prepend?: false | (() => vue.VNodeChild) | undefined;
@@ -586,20 +568,17 @@ declare const VAppBarNavIcon: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
+    style: vue.StyleValue;
     icon: IconValue;
-} & {} & {
-    $children?: {} | vue.VNodeChild | {
+} & {
+    class?: any;
+} & {
+    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
         prepend?: (() => vue.VNodeChild) | undefined;
         append?: (() => vue.VNodeChild) | undefined;
         loader?: (() => vue.VNodeChild) | undefined;
     };
-    $slots?: {
-        default?: (() => vue.VNodeChild) | undefined;
-        prepend?: (() => vue.VNodeChild) | undefined;
-        append?: (() => vue.VNodeChild) | undefined;
-        loader?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
         prepend?: false | (() => vue.VNodeChild) | undefined;
@@ -612,13 +591,24 @@ declare const VAppBarNavIcon: {
     "v-slot:append"?: false | (() => vue.VNodeChild) | undefined;
     "v-slot:loader"?: false | (() => vue.VNodeChild) | undefined;
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+    style: vue.StyleValue;
     icon: IconValue;
 }, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     icon: {
         type: vue.PropType<IconValue>;
         default: string;
     };
 }, vue.ExtractPropTypes<{
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     icon: {
         type: vue.PropType<IconValue>;
         default: string;
@@ -631,20 +621,19 @@ declare const VAppBarTitle: {
         $: vue.ComponentInternalInstance;
         $data: {};
         $props: Partial<{
+            style: vue.StyleValue;
             tag: string;
         }> & Omit<{
+            style: vue.StyleValue;
             tag: string;
         } & {
             text?: string | undefined;
+            class?: any;
         } & {
-            $children?: {} | vue.VNodeChild | {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
                 text?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-                text?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
                 text?: false | (() => vue.VNodeChild) | undefined;
@@ -652,7 +641,7 @@ declare const VAppBarTitle: {
         } & {
             "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:text"?: false | (() => vue.VNodeChild) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "tag">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "style" | "tag">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -667,18 +656,16 @@ declare const VAppBarTitle: {
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: vue.ComponentOptionsBase<{
+            style: vue.StyleValue;
             tag: string;
         } & {
             text?: string | undefined;
+            class?: any;
         } & {
-            $children?: {} | vue.VNodeChild | {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
                 text?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-                text?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
                 text?: false | (() => vue.VNodeChild) | undefined;
@@ -687,6 +674,7 @@ declare const VAppBarTitle: {
             "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:text"?: false | (() => vue.VNodeChild) | undefined;
         }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+            style: vue.StyleValue;
             tag: string;
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
@@ -709,18 +697,16 @@ declare const VAppBarTitle: {
         $nextTick: typeof vue.nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
     } & {
+        style: vue.StyleValue;
         tag: string;
     } & {
         text?: string | undefined;
+        class?: any;
     } & {
-        $children?: {} | vue.VNodeChild | {
+        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
             text?: (() => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            default?: (() => vue.VNodeChild) | undefined;
-            text?: (() => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
             text?: false | (() => vue.VNodeChild) | undefined;
@@ -733,18 +719,16 @@ declare const VAppBarTitle: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
+    style: vue.StyleValue;
     tag: string;
 } & {
     text?: string | undefined;
+    class?: any;
 } & {
-    $children?: {} | vue.VNodeChild | {
+    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
         text?: (() => vue.VNodeChild) | undefined;
     };
-    $slots?: {
-        default?: (() => vue.VNodeChild) | undefined;
-        text?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
         text?: false | (() => vue.VNodeChild) | undefined;
@@ -753,18 +737,29 @@ declare const VAppBarTitle: {
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
     "v-slot:text"?: false | (() => vue.VNodeChild) | undefined;
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+    style: vue.StyleValue;
     tag: string;
 }, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     tag: {
         type: StringConstructor;
         default: string;
     };
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     text: StringConstructor;
 }, vue.ExtractPropTypes<{
     tag: {
         type: StringConstructor;
         default: string;
     };
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     text: StringConstructor;
 }>>;
 type VAppBarTitle = InstanceType<typeof VAppBarTitle>;

package/lib/components/VAutocomplete/VAutocomplete.mjs

@@ -248,7 +248,8 @@ export const VAutocomplete = genericComponent()({
           'v-autocomplete--selecting-index': selectionIndex.value > -1,
           [`v-autocomplete--${props.multiple ? 'multiple' : 'single'}`]: true,
           'v-autocomplete--selection-slot': !!slots.selection
-        }],
+        }, props.class],
+        "style": props.style,
         "appendInnerIcon": props.menuIcon,
         "readonly": props.readonly,
         "placeholder": isDirty ? undefined : props.placeholder,