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

package/lib/components/VList/{index.d.ts → index.d.mts}

@@ -139,6 +139,7 @@ declare const VListItem: {
             rounded?: string | number | boolean | undefined;
             prependIcon?: IconValue | undefined;
             appendIcon?: IconValue | undefined;
+            baseColor?: string | undefined;
             activeClass?: string | undefined;
             appendAvatar?: string | undefined;
             prependAvatar?: string | undefined;
@@ -215,6 +216,7 @@ declare const VListItem: {
             rounded?: string | number | boolean | undefined;
             prependIcon?: IconValue | undefined;
             appendIcon?: IconValue | undefined;
+            baseColor?: string | undefined;
             activeClass?: string | undefined;
             appendAvatar?: string | undefined;
             prependAvatar?: string | undefined;
@@ -312,6 +314,7 @@ declare const VListItem: {
         rounded?: string | number | boolean | undefined;
         prependIcon?: IconValue | undefined;
         appendIcon?: IconValue | undefined;
+        baseColor?: string | undefined;
         activeClass?: string | undefined;
         appendAvatar?: string | undefined;
         prependAvatar?: string | undefined;
@@ -378,6 +381,7 @@ declare const VListItem: {
     rounded?: string | number | boolean | undefined;
     prependIcon?: IconValue | undefined;
     appendIcon?: IconValue | undefined;
+    baseColor?: string | undefined;
     activeClass?: string | undefined;
     appendAvatar?: string | undefined;
     prependAvatar?: string | undefined;
@@ -474,6 +478,7 @@ declare const VListItem: {
     activeColor: StringConstructor;
     appendAvatar: StringConstructor;
     appendIcon: PropType<IconValue>;
+    baseColor: StringConstructor;
     disabled: BooleanConstructor;
     lines: PropType<"one" | "two" | "three">;
     link: {
@@ -544,6 +549,7 @@ declare const VListItem: {
     activeColor: StringConstructor;
     appendAvatar: StringConstructor;
     appendIcon: PropType<IconValue>;
+    baseColor: StringConstructor;
     disabled: BooleanConstructor;
     lines: PropType<"one" | "two" | "three">;
     link: {
@@ -677,6 +683,7 @@ declare const VList: {
             opened: PropType<unknown[]>;
             selected: PropType<unknown[]>;
             mandatory: BooleanConstructor;
+            baseColor: StringConstructor;
             activeColor: StringConstructor;
             activeClass: StringConstructor;
             bgColor: StringConstructor;
@@ -797,6 +804,7 @@ declare const VList: {
             opened: PropType<unknown[]>;
             selected: PropType<unknown[]>;
             mandatory: BooleanConstructor;
+            baseColor: StringConstructor;
             activeColor: StringConstructor;
             activeClass: StringConstructor;
             bgColor: StringConstructor;
@@ -950,6 +958,7 @@ declare const VList: {
         opened: PropType<unknown[]>;
         selected: PropType<unknown[]>;
         mandatory: BooleanConstructor;
+        baseColor: StringConstructor;
         activeColor: StringConstructor;
         activeClass: StringConstructor;
         bgColor: StringConstructor;
@@ -1056,6 +1065,7 @@ declare const VList: {
     opened: PropType<unknown[]>;
     selected: PropType<unknown[]>;
     mandatory: BooleanConstructor;
+    baseColor: StringConstructor;
     activeColor: StringConstructor;
     activeClass: StringConstructor;
     bgColor: StringConstructor;
@@ -1193,6 +1203,7 @@ declare const VList: {
     opened: PropType<unknown[]>;
     selected: PropType<unknown[]>;
     mandatory: BooleanConstructor;
+    baseColor: StringConstructor;
     activeColor: StringConstructor;
     activeClass: StringConstructor;
     bgColor: StringConstructor;
@@ -1278,6 +1289,7 @@ declare const VList: {
     opened: PropType<unknown[]>;
     selected: PropType<unknown[]>;
     mandatory: BooleanConstructor;
+    baseColor: StringConstructor;
     activeColor: StringConstructor;
     activeClass: StringConstructor;
     bgColor: StringConstructor;
@@ -1315,6 +1327,7 @@ declare const VListGroup: {
             class?: any;
             prependIcon?: IconValue | undefined;
             appendIcon?: IconValue | undefined;
+            baseColor?: string | undefined;
             activeColor?: string | undefined;
         } & {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
@@ -1365,6 +1378,7 @@ declare const VListGroup: {
             class?: any;
             prependIcon?: IconValue | undefined;
             appendIcon?: IconValue | undefined;
+            baseColor?: string | undefined;
             activeColor?: string | undefined;
         } & {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
@@ -1428,6 +1442,7 @@ declare const VListGroup: {
         class?: any;
         prependIcon?: IconValue | undefined;
         appendIcon?: IconValue | undefined;
+        baseColor?: string | undefined;
         activeColor?: string | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
@@ -1468,6 +1483,7 @@ declare const VListGroup: {
     class?: any;
     prependIcon?: IconValue | undefined;
     appendIcon?: IconValue | undefined;
+    baseColor?: string | undefined;
     activeColor?: string | undefined;
 } & {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
@@ -1508,6 +1524,7 @@ declare const VListGroup: {
         default: null;
     };
     activeColor: StringConstructor;
+    baseColor: StringConstructor;
     color: StringConstructor;
     collapseIcon: {
         type: vue.PropType<IconValue>;
@@ -1534,6 +1551,7 @@ declare const VListGroup: {
         default: null;
     };
     activeColor: StringConstructor;
+    baseColor: StringConstructor;
     color: StringConstructor;
     collapseIcon: {
         type: vue.PropType<IconValue>;

package/lib/components/VNavigationDrawer/VNavigationDrawer.mjs

@@ -20,7 +20,7 @@ import { useSsrBoot } from "../../composables/ssrBoot.mjs";
 import { useSticky } from "./sticky.mjs";
 import { useTouch } from "./touch.mjs"; // Utilities
 import { computed, nextTick, onBeforeMount, ref, toRef, Transition, watch } from 'vue';
-import { convertToUnit, genericComponent, toPhysical, useRender } from "../../util/index.mjs"; // Types
+import { genericComponent, toPhysical, useRender } from "../../util/index.mjs"; // Types
 const locations = ['start', 'end', 'left', 'right', 'top', 'bottom'];
 export const VNavigationDrawer = genericComponent()({
   name: 'VNavigationDrawer',
@@ -150,7 +150,6 @@ export const VNavigationDrawer = genericComponent()({
     });
     const {
       layoutItemStyles,
-      layoutRect,
       layoutItemScrimStyles
     } = useLayoutItem({
       id: props.name,
@@ -180,12 +179,6 @@ export const VNavigationDrawer = genericComponent()({
         opacity: dragProgress.value * 0.2,
         transition: 'none'
       } : undefined),
-      ...(layoutRect.value ? {
-        left: convertToUnit(layoutRect.value.left),
-        right: convertToUnit(layoutRect.value.right),
-        top: convertToUnit(layoutRect.value.top),
-        bottom: convertToUnit(layoutRect.value.bottom)
-      } : undefined),
       ...layoutItemScrimStyles.value
     }));
     provideDefaults({

package/lib/components/VNavigationDrawer/VNavigationDrawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VNavigationDrawer.mjs","names":["makeBorderProps","useBorder","makeComponentProps","makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","provideDefaults","useBackgroundColor","useDisplay","useProxiedModel","useRouter","useRtl","useSsrBoot","useSticky","useTouch","computed","nextTick","onBeforeMount","ref","toRef","Transition","watch","convertToUnit","genericComponent","toPhysical","useRender","locations","VNavigationDrawer","name","props","color","String","disableResizeWatcher","Boolean","disableRouteWatcher","expandOnHover","floating","modelValue","type","default","permanent","rail","railWidth","Number","scrim","image","temporary","touchless","width","location","validator","value","includes","sticky","tag","emits","val","setup","_ref","attrs","emit","slots","isRtl","themeClasses","borderClasses","backgroundColorClasses","backgroundColorStyles","elevationClasses","mobile","roundedClasses","router","isActive","v","ssrBootStyles","rootEl","isHovering","isTemporary","isSticky","currentRoute","isDragging","dragProgress","dragStyles","position","layoutSize","size","layoutItemStyles","layoutRect","layoutItemScrimStyles","id","order","parseInt","elementSize","active","disableTransitions","absolute","isStuck","stickyStyles","scrimColor","scrimStyles","opacity","transition","undefined","left","right","top","bottom","VList","bgColor","onMouseenter","onMouseleave","hasImage","_createVNode","_Fragment","_mergeProps","class","style","prepend","append","onClick"],"sources":["../../../src/components/VNavigationDrawer/VNavigationDrawer.tsx"],"sourcesContent":["// Styles\nimport './VNavigationDrawer.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useDisplay } from '@/composables/display'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useRouter } from '@/composables/router'\nimport { useRtl } from '@/composables'\nimport { useSsrBoot } from '@/composables/ssrBoot'\nimport { useSticky } from './sticky'\nimport { useTouch } from './touch'\n\n// Utilities\nimport { computed, nextTick, onBeforeMount, ref, toRef, Transition, watch } from 'vue'\nimport { convertToUnit, genericComponent, toPhysical, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport type VNavigationDrawerImageSlot = {\n  image: string\n}\n\nexport type VNavigationDrawerSlots = {\n  default: []\n  prepend: []\n  append: []\n  image: [VNavigationDrawerImageSlot]\n}\n\nconst locations = ['start', 'end', 'left', 'right', 'top', 'bottom'] as const\n\nexport const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({\n  name: 'VNavigationDrawer',\n\n  props: {\n    color: String,\n    disableResizeWatcher: Boolean,\n    disableRouteWatcher: Boolean,\n    expandOnHover: Boolean,\n    floating: Boolean,\n    modelValue: {\n      type: Boolean as PropType<boolean | null>,\n      default: null,\n    },\n    permanent: Boolean,\n    rail: {\n      type: Boolean as PropType<boolean | null>,\n      default: null,\n    },\n    railWidth: {\n      type: [Number, String],\n      default: 56,\n    },\n    scrim: {\n      type: [String, Boolean],\n      default: true,\n    },\n    image: String,\n    temporary: Boolean,\n    touchless: Boolean,\n    width: {\n      type: [Number, String],\n      default: 256,\n    },\n    location: {\n      type: String as PropType<typeof locations[number]>,\n      default: 'start',\n      validator: (value: any) => locations.includes(value),\n    },\n    sticky: Boolean,\n\n    ...makeBorderProps(),\n    ...makeComponentProps(),\n    ...makeElevationProps(),\n    ...makeLayoutItemProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps({ tag: 'nav' }),\n    ...makeThemeProps(),\n  },\n\n  emits: {\n    'update:modelValue': (val: boolean) => true,\n    'update:rail': (val: boolean) => true,\n  },\n\n  setup (props, { attrs, emit, slots }) {\n    const { isRtl } = useRtl()\n    const { themeClasses } = provideTheme(props)\n    const { borderClasses } = useBorder(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { elevationClasses } = useElevation(props)\n    const { mobile } = useDisplay()\n    const { roundedClasses } = useRounded(props)\n    const router = useRouter()\n    const isActive = useProxiedModel(props, 'modelValue', null, v => !!v)\n    const { ssrBootStyles } = useSsrBoot()\n\n    const rootEl = ref<HTMLElement>()\n    const isHovering = ref(false)\n\n    const width = computed(() => {\n      return (props.rail && props.expandOnHover && isHovering.value)\n        ? Number(props.width)\n        : Number(props.rail ? props.railWidth : props.width)\n    })\n    const location = computed(() => {\n      return toPhysical(props.location, isRtl.value) as 'left' | 'right' | 'bottom'\n    })\n    const isTemporary = computed(() => !props.permanent && (mobile.value || props.temporary))\n    const isSticky = computed(() =>\n      props.sticky &&\n      !isTemporary.value &&\n      location.value !== 'bottom'\n    )\n\n    if (props.expandOnHover && props.rail != null) {\n      watch(isHovering, val => emit('update:rail', !val))\n    }\n\n    if (!props.disableResizeWatcher) {\n      watch(isTemporary, val => !props.permanent && (nextTick(() => isActive.value = !val)))\n    }\n\n    if (!props.disableRouteWatcher && router) {\n      watch(router.currentRoute, () => isTemporary.value && (isActive.value = false))\n    }\n\n    watch(() => props.permanent, val => {\n      if (val) isActive.value = true\n    })\n\n    onBeforeMount(() => {\n      if (props.modelValue != null || isTemporary.value) return\n\n      isActive.value = props.permanent || !mobile.value\n    })\n\n    const { isDragging, dragProgress, dragStyles } = useTouch({\n      isActive,\n      isTemporary,\n      width,\n      touchless: toRef(props, 'touchless'),\n      position: location,\n    })\n\n    const layoutSize = computed(() => {\n      const size = isTemporary.value ? 0\n        : props.rail && props.expandOnHover ? Number(props.railWidth)\n        : width.value\n\n      return isDragging.value ? size * dragProgress.value : size\n    })\n\n    const { layoutItemStyles, layoutRect, layoutItemScrimStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: location,\n      layoutSize,\n      elementSize: width,\n      active: computed(() => isActive.value || isDragging.value),\n      disableTransitions: computed(() => isDragging.value),\n      absolute: computed(() =>\n        // eslint-disable-next-line @typescript-eslint/no-use-before-define\n        props.absolute || (isSticky.value && typeof isStuck.value !== 'string')\n      ),\n    })\n\n    const { isStuck, stickyStyles } = useSticky({ rootEl, isSticky, layoutItemStyles })\n\n    const scrimColor = useBackgroundColor(computed(() => {\n      return typeof props.scrim === 'string' ? props.scrim : null\n    }))\n    const scrimStyles = computed(() => ({\n      ...isDragging.value ? {\n        opacity: dragProgress.value * 0.2,\n        transition: 'none',\n      } : undefined,\n      ...layoutRect.value ? {\n        left: convertToUnit(layoutRect.value.left),\n        right: convertToUnit(layoutRect.value.right),\n        top: convertToUnit(layoutRect.value.top),\n        bottom: convertToUnit(layoutRect.value.bottom),\n      } : undefined,\n      ...layoutItemScrimStyles.value,\n    }))\n\n    provideDefaults({\n      VList: {\n        bgColor: 'transparent',\n      },\n    })\n\n    function onMouseenter () {\n      isHovering.value = true\n    }\n    function onMouseleave () {\n      isHovering.value = false\n    }\n\n    useRender(() => {\n      const hasImage = (slots.image || props.image)\n\n      return (\n        <>\n          <props.tag\n            ref={ rootEl }\n            onMouseenter={ onMouseenter }\n            onMouseleave={ onMouseleave }\n            class={[\n              'v-navigation-drawer',\n              `v-navigation-drawer--${location.value}`,\n              {\n                'v-navigation-drawer--expand-on-hover': props.expandOnHover,\n                'v-navigation-drawer--floating': props.floating,\n                'v-navigation-drawer--is-hovering': isHovering.value,\n                'v-navigation-drawer--rail': props.rail,\n                'v-navigation-drawer--temporary': isTemporary.value,\n                'v-navigation-drawer--active': isActive.value,\n                'v-navigation-drawer--sticky': isSticky.value,\n              },\n              themeClasses.value,\n              backgroundColorClasses.value,\n              borderClasses.value,\n              elevationClasses.value,\n              roundedClasses.value,\n              props.class,\n            ]}\n            style={[\n              backgroundColorStyles.value,\n              layoutItemStyles.value,\n              dragStyles.value,\n              ssrBootStyles.value,\n              stickyStyles.value,\n              props.style,\n            ]}\n            { ...attrs }\n          >\n            { hasImage && (\n              <div key=\"image\" class=\"v-navigation-drawer__img\">\n                { slots.image\n                  ? slots.image?.({ image: props.image })\n                  : (<img src={ props.image } alt=\"\" />)\n                }\n              </div>\n            )}\n\n            { slots.prepend && (\n              <div class=\"v-navigation-drawer__prepend\">\n                { slots.prepend?.() }\n              </div>\n            )}\n\n            <div class=\"v-navigation-drawer__content\">\n              { slots.default?.() }\n            </div>\n\n            { slots.append && (\n              <div class=\"v-navigation-drawer__append\">\n                { slots.append?.() }\n              </div>\n            )}\n          </props.tag>\n\n          <Transition name=\"fade-transition\">\n            { isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && (\n              <div\n                class={['v-navigation-drawer__scrim', scrimColor.backgroundColorClasses.value]}\n                style={[scrimStyles.value, scrimColor.backgroundColorStyles.value]}\n                onClick={ () => isActive.value = false }\n              />\n            )}\n          </Transition>\n        </>\n      )\n    })\n\n    return {\n      isStuck,\n    }\n  },\n})\n\nexport type VNavigationDrawer = InstanceType<typeof VNavigationDrawer>\n"],"mappings":"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"}
+{"version":3,"file":"VNavigationDrawer.mjs","names":["makeBorderProps","useBorder","makeComponentProps","makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","provideDefaults","useBackgroundColor","useDisplay","useProxiedModel","useRouter","useRtl","useSsrBoot","useSticky","useTouch","computed","nextTick","onBeforeMount","ref","toRef","Transition","watch","genericComponent","toPhysical","useRender","locations","VNavigationDrawer","name","props","color","String","disableResizeWatcher","Boolean","disableRouteWatcher","expandOnHover","floating","modelValue","type","default","permanent","rail","railWidth","Number","scrim","image","temporary","touchless","width","location","validator","value","includes","sticky","tag","emits","val","setup","_ref","attrs","emit","slots","isRtl","themeClasses","borderClasses","backgroundColorClasses","backgroundColorStyles","elevationClasses","mobile","roundedClasses","router","isActive","v","ssrBootStyles","rootEl","isHovering","isTemporary","isSticky","currentRoute","isDragging","dragProgress","dragStyles","position","layoutSize","size","layoutItemStyles","layoutItemScrimStyles","id","order","parseInt","elementSize","active","disableTransitions","absolute","isStuck","stickyStyles","scrimColor","scrimStyles","opacity","transition","undefined","VList","bgColor","onMouseenter","onMouseleave","hasImage","_createVNode","_Fragment","_mergeProps","class","style","prepend","append","onClick"],"sources":["../../../src/components/VNavigationDrawer/VNavigationDrawer.tsx"],"sourcesContent":["// Styles\nimport './VNavigationDrawer.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useDisplay } from '@/composables/display'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useRouter } from '@/composables/router'\nimport { useRtl } from '@/composables'\nimport { useSsrBoot } from '@/composables/ssrBoot'\nimport { useSticky } from './sticky'\nimport { useTouch } from './touch'\n\n// Utilities\nimport { computed, nextTick, onBeforeMount, ref, toRef, Transition, watch } from 'vue'\nimport { genericComponent, toPhysical, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport type VNavigationDrawerImageSlot = {\n  image: string\n}\n\nexport type VNavigationDrawerSlots = {\n  default: []\n  prepend: []\n  append: []\n  image: [VNavigationDrawerImageSlot]\n}\n\nconst locations = ['start', 'end', 'left', 'right', 'top', 'bottom'] as const\n\nexport const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({\n  name: 'VNavigationDrawer',\n\n  props: {\n    color: String,\n    disableResizeWatcher: Boolean,\n    disableRouteWatcher: Boolean,\n    expandOnHover: Boolean,\n    floating: Boolean,\n    modelValue: {\n      type: Boolean as PropType<boolean | null>,\n      default: null,\n    },\n    permanent: Boolean,\n    rail: {\n      type: Boolean as PropType<boolean | null>,\n      default: null,\n    },\n    railWidth: {\n      type: [Number, String],\n      default: 56,\n    },\n    scrim: {\n      type: [String, Boolean],\n      default: true,\n    },\n    image: String,\n    temporary: Boolean,\n    touchless: Boolean,\n    width: {\n      type: [Number, String],\n      default: 256,\n    },\n    location: {\n      type: String as PropType<typeof locations[number]>,\n      default: 'start',\n      validator: (value: any) => locations.includes(value),\n    },\n    sticky: Boolean,\n\n    ...makeBorderProps(),\n    ...makeComponentProps(),\n    ...makeElevationProps(),\n    ...makeLayoutItemProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps({ tag: 'nav' }),\n    ...makeThemeProps(),\n  },\n\n  emits: {\n    'update:modelValue': (val: boolean) => true,\n    'update:rail': (val: boolean) => true,\n  },\n\n  setup (props, { attrs, emit, slots }) {\n    const { isRtl } = useRtl()\n    const { themeClasses } = provideTheme(props)\n    const { borderClasses } = useBorder(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { elevationClasses } = useElevation(props)\n    const { mobile } = useDisplay()\n    const { roundedClasses } = useRounded(props)\n    const router = useRouter()\n    const isActive = useProxiedModel(props, 'modelValue', null, v => !!v)\n    const { ssrBootStyles } = useSsrBoot()\n\n    const rootEl = ref<HTMLElement>()\n    const isHovering = ref(false)\n\n    const width = computed(() => {\n      return (props.rail && props.expandOnHover && isHovering.value)\n        ? Number(props.width)\n        : Number(props.rail ? props.railWidth : props.width)\n    })\n    const location = computed(() => {\n      return toPhysical(props.location, isRtl.value) as 'left' | 'right' | 'bottom'\n    })\n    const isTemporary = computed(() => !props.permanent && (mobile.value || props.temporary))\n    const isSticky = computed(() =>\n      props.sticky &&\n      !isTemporary.value &&\n      location.value !== 'bottom'\n    )\n\n    if (props.expandOnHover && props.rail != null) {\n      watch(isHovering, val => emit('update:rail', !val))\n    }\n\n    if (!props.disableResizeWatcher) {\n      watch(isTemporary, val => !props.permanent && (nextTick(() => isActive.value = !val)))\n    }\n\n    if (!props.disableRouteWatcher && router) {\n      watch(router.currentRoute, () => isTemporary.value && (isActive.value = false))\n    }\n\n    watch(() => props.permanent, val => {\n      if (val) isActive.value = true\n    })\n\n    onBeforeMount(() => {\n      if (props.modelValue != null || isTemporary.value) return\n\n      isActive.value = props.permanent || !mobile.value\n    })\n\n    const { isDragging, dragProgress, dragStyles } = useTouch({\n      isActive,\n      isTemporary,\n      width,\n      touchless: toRef(props, 'touchless'),\n      position: location,\n    })\n\n    const layoutSize = computed(() => {\n      const size = isTemporary.value ? 0\n        : props.rail && props.expandOnHover ? Number(props.railWidth)\n        : width.value\n\n      return isDragging.value ? size * dragProgress.value : size\n    })\n\n    const { layoutItemStyles, layoutItemScrimStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: location,\n      layoutSize,\n      elementSize: width,\n      active: computed(() => isActive.value || isDragging.value),\n      disableTransitions: computed(() => isDragging.value),\n      absolute: computed(() =>\n        // eslint-disable-next-line @typescript-eslint/no-use-before-define\n        props.absolute || (isSticky.value && typeof isStuck.value !== 'string')\n      ),\n    })\n\n    const { isStuck, stickyStyles } = useSticky({ rootEl, isSticky, layoutItemStyles })\n\n    const scrimColor = useBackgroundColor(computed(() => {\n      return typeof props.scrim === 'string' ? props.scrim : null\n    }))\n    const scrimStyles = computed(() => ({\n      ...isDragging.value ? {\n        opacity: dragProgress.value * 0.2,\n        transition: 'none',\n      } : undefined,\n      ...layoutItemScrimStyles.value,\n    }))\n\n    provideDefaults({\n      VList: {\n        bgColor: 'transparent',\n      },\n    })\n\n    function onMouseenter () {\n      isHovering.value = true\n    }\n    function onMouseleave () {\n      isHovering.value = false\n    }\n\n    useRender(() => {\n      const hasImage = (slots.image || props.image)\n\n      return (\n        <>\n          <props.tag\n            ref={ rootEl }\n            onMouseenter={ onMouseenter }\n            onMouseleave={ onMouseleave }\n            class={[\n              'v-navigation-drawer',\n              `v-navigation-drawer--${location.value}`,\n              {\n                'v-navigation-drawer--expand-on-hover': props.expandOnHover,\n                'v-navigation-drawer--floating': props.floating,\n                'v-navigation-drawer--is-hovering': isHovering.value,\n                'v-navigation-drawer--rail': props.rail,\n                'v-navigation-drawer--temporary': isTemporary.value,\n                'v-navigation-drawer--active': isActive.value,\n                'v-navigation-drawer--sticky': isSticky.value,\n              },\n              themeClasses.value,\n              backgroundColorClasses.value,\n              borderClasses.value,\n              elevationClasses.value,\n              roundedClasses.value,\n              props.class,\n            ]}\n            style={[\n              backgroundColorStyles.value,\n              layoutItemStyles.value,\n              dragStyles.value,\n              ssrBootStyles.value,\n              stickyStyles.value,\n              props.style,\n            ]}\n            { ...attrs }\n          >\n            { hasImage && (\n              <div key=\"image\" class=\"v-navigation-drawer__img\">\n                { slots.image\n                  ? slots.image?.({ image: props.image })\n                  : (<img src={ props.image } alt=\"\" />)\n                }\n              </div>\n            )}\n\n            { slots.prepend && (\n              <div class=\"v-navigation-drawer__prepend\">\n                { slots.prepend?.() }\n              </div>\n            )}\n\n            <div class=\"v-navigation-drawer__content\">\n              { slots.default?.() }\n            </div>\n\n            { slots.append && (\n              <div class=\"v-navigation-drawer__append\">\n                { slots.append?.() }\n              </div>\n            )}\n          </props.tag>\n\n          <Transition name=\"fade-transition\">\n            { isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && (\n              <div\n                class={['v-navigation-drawer__scrim', scrimColor.backgroundColorClasses.value]}\n                style={[scrimStyles.value, scrimColor.backgroundColorStyles.value]}\n                onClick={ () => isActive.value = false }\n              />\n            )}\n          </Transition>\n        </>\n      )\n    })\n\n    return {\n      isStuck,\n    }\n  },\n})\n\nexport type VNavigationDrawer = InstanceType<typeof VNavigationDrawer>\n"],"mappings":"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"}

package/lib/components/VRadioGroup/{index.d.ts → index.d.mts}

@@ -98,7 +98,7 @@ declare const VRadioGroup: {
             appendIcon?: IconValue | undefined;
             'onClick:append'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
             'onClick:prepend'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
-            'onUpdate:focused'?: EventProp<[FocusEvent], (args_0: FocusEvent) => any> | undefined;
+            'onUpdate:focused'?: EventProp<[boolean], (args_0: boolean) => any> | undefined;
             validateOn?: "input" | "blur" | "submit" | undefined;
             validationValue?: any;
             hint?: string | undefined;
@@ -184,7 +184,7 @@ declare const VRadioGroup: {
             appendIcon?: IconValue | undefined;
             'onClick:append'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
             'onClick:prepend'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
-            'onUpdate:focused'?: EventProp<[FocusEvent], (args_0: FocusEvent) => any> | undefined;
+            'onUpdate:focused'?: EventProp<[boolean], (args_0: boolean) => any> | undefined;
             validateOn?: "input" | "blur" | "submit" | undefined;
             validationValue?: any;
             hint?: string | undefined;
@@ -298,7 +298,7 @@ declare const VRadioGroup: {
         appendIcon?: IconValue | undefined;
         'onClick:append'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
         'onClick:prepend'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
-        'onUpdate:focused'?: EventProp<[FocusEvent], (args_0: FocusEvent) => any> | undefined;
+        'onUpdate:focused'?: EventProp<[boolean], (args_0: boolean) => any> | undefined;
         validateOn?: "input" | "blur" | "submit" | undefined;
         validationValue?: any;
         hint?: string | undefined;
@@ -374,7 +374,7 @@ declare const VRadioGroup: {
     appendIcon?: IconValue | undefined;
     'onClick:append'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
     'onClick:prepend'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
-    'onUpdate:focused'?: EventProp<[FocusEvent], (args_0: FocusEvent) => any> | undefined;
+    'onUpdate:focused'?: EventProp<[boolean], (args_0: boolean) => any> | undefined;
     validateOn?: "input" | "blur" | "submit" | undefined;
     validationValue?: any;
     hint?: string | undefined;
@@ -472,7 +472,7 @@ declare const VRadioGroup: {
         default: typeof deepEqual;
     };
     focused: BooleanConstructor;
-    'onUpdate:focused': vue.PropType<EventProp<[FocusEvent], (args_0: FocusEvent) => any>>;
+    'onUpdate:focused': vue.PropType<EventProp<[boolean], (args_0: boolean) => any>>;
     errorMessages: {
         type: vue.PropType<string | string[]>;
         default: () => never[];
@@ -549,7 +549,7 @@ declare const VRadioGroup: {
         default: typeof deepEqual;
     };
     focused: BooleanConstructor;
-    'onUpdate:focused': vue.PropType<EventProp<[FocusEvent], (args_0: FocusEvent) => any>>;
+    'onUpdate:focused': vue.PropType<EventProp<[boolean], (args_0: boolean) => any>>;
     errorMessages: {
         type: vue.PropType<string | string[]>;
         default: () => never[];

package/lib/components/VRangeSlider/{index.d.ts → index.d.mts}

@@ -95,7 +95,7 @@ declare const VRangeSlider: {
             appendIcon?: IconValue | undefined;
             'onClick:append'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
             'onClick:prepend'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
-            'onUpdate:focused'?: EventProp<[FocusEvent], (args_0: FocusEvent) => any> | undefined;
+            'onUpdate:focused'?: EventProp<[boolean], (args_0: boolean) => any> | undefined;
             validateOn?: "input" | "blur" | "submit" | undefined;
             validationValue?: any;
             hint?: string | undefined;
@@ -183,7 +183,7 @@ declare const VRangeSlider: {
             appendIcon?: IconValue | undefined;
             'onClick:append'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
             'onClick:prepend'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
-            'onUpdate:focused'?: EventProp<[FocusEvent], (args_0: FocusEvent) => any> | undefined;
+            'onUpdate:focused'?: EventProp<[boolean], (args_0: boolean) => any> | undefined;
             validateOn?: "input" | "blur" | "submit" | undefined;
             validationValue?: any;
             hint?: string | undefined;
@@ -308,7 +308,7 @@ declare const VRangeSlider: {
         appendIcon?: IconValue | undefined;
         'onClick:append'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
         'onClick:prepend'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
-        'onUpdate:focused'?: EventProp<[FocusEvent], (args_0: FocusEvent) => any> | undefined;
+        'onUpdate:focused'?: EventProp<[boolean], (args_0: boolean) => any> | undefined;
         validateOn?: "input" | "blur" | "submit" | undefined;
         validationValue?: any;
         hint?: string | undefined;
@@ -386,7 +386,7 @@ declare const VRangeSlider: {
     appendIcon?: IconValue | undefined;
     'onClick:append'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
     'onClick:prepend'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
-    'onUpdate:focused'?: EventProp<[FocusEvent], (args_0: FocusEvent) => any> | undefined;
+    'onUpdate:focused'?: EventProp<[boolean], (args_0: boolean) => any> | undefined;
     validateOn?: "input" | "blur" | "submit" | undefined;
     validationValue?: any;
     hint?: string | undefined;
@@ -524,7 +524,7 @@ declare const VRangeSlider: {
     };
     reverse: BooleanConstructor;
     focused: BooleanConstructor;
-    'onUpdate:focused': PropType<EventProp<[FocusEvent], (args_0: FocusEvent) => any>>;
+    'onUpdate:focused': PropType<EventProp<[boolean], (args_0: boolean) => any>>;
     errorMessages: {
         type: PropType<string | string[]>;
         default: () => never[];
@@ -631,7 +631,7 @@ declare const VRangeSlider: {
     };
     reverse: BooleanConstructor;
     focused: BooleanConstructor;
-    'onUpdate:focused': PropType<EventProp<[FocusEvent], (args_0: FocusEvent) => any>>;
+    'onUpdate:focused': PropType<EventProp<[boolean], (args_0: boolean) => any>>;
     errorMessages: {
         type: PropType<string | string[]>;
         default: () => never[];

package/lib/components/VResponsive/VResponsive.css

@@ -1,23 +1,31 @@
 .v-responsive {
-  display: flex;
+  display: grid;
+  grid-template-rows: minmax(100%, 1fr);
+  grid-template-columns: 1fr;
   flex: 1 0 auto;
   max-height: 100%;
   max-width: 100%;
   overflow: hidden;
   position: relative;
 }
+.v-responsive--inline {
+  display: inline-grid;
+  flex: 0 0 auto;
+}
 
 .v-responsive__content {
   flex: 1 0 0px;
   max-width: 100%;
 }
 
-.v-responsive__sizer ~ .v-responsive__content {
-  margin-inline-start: -100%;
-}
-
 .v-responsive__sizer {
   flex: 1 0 0px;
   transition: padding-bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   pointer-events: none;
+}
+
+.v-responsive__sizer,
+.v-responsive__content {
+  grid-row-start: 1;
+  grid-column-start: 1;
 }

package/lib/components/VResponsive/VResponsive.mjs

@@ -6,7 +6,7 @@ import "./VResponsive.css";
 import { makeComponentProps } from "../../composables/component.mjs";
 import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs"; // Utilities
 import { computed } from 'vue';
-import { genericComponent, useRender } from "../../util/index.mjs";
+import { genericComponent, propsFactory, useRender } from "../../util/index.mjs";
 export function useAspectStyles(props) {
   return {
     aspectStyles: computed(() => {
@@ -17,14 +17,16 @@ export function useAspectStyles(props) {
     })
   };
 }
+export const makeVResponsiveProps = propsFactory({
+  aspectRatio: [String, Number],
+  contentClass: String,
+  inline: Boolean,
+  ...makeComponentProps(),
+  ...makeDimensionProps()
+}, 'v-responsive');
 export const VResponsive = genericComponent()({
   name: 'VResponsive',
-  props: {
-    aspectRatio: [String, Number],
-    contentClass: String,
-    ...makeComponentProps(),
-    ...makeDimensionProps()
-  },
+  props: makeVResponsiveProps(),
   setup(props, _ref) {
     let {
       slots
@@ -36,7 +38,9 @@ export const VResponsive = genericComponent()({
       dimensionStyles
     } = useDimension(props);
     useRender(() => _createVNode("div", {
-      "class": ['v-responsive', props.class],
+      "class": ['v-responsive', {
+        'v-responsive--inline': props.inline
+      }, props.class],
       "style": [dimensionStyles.value, props.style]
     }, [_createVNode("div", {
       "class": "v-responsive__sizer",

package/lib/components/VResponsive/VResponsive.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VResponsive.mjs","names":["makeComponentProps","makeDimensionProps","useDimension","computed","genericComponent","useRender","useAspectStyles","props","aspectStyles","ratio","Number","aspectRatio","paddingBottom","String","undefined","VResponsive","name","contentClass","setup","_ref","slots","dimensionStyles","_createVNode","class","value","style","additional","default"],"sources":["../../../src/components/VResponsive/VResponsive.tsx"],"sourcesContent":["// Styles\nimport './VResponsive.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\nexport type VResponsiveSlots = {\n  default: []\n  additional: []\n}\n\nexport function useAspectStyles (props: { aspectRatio?: string | number }) {\n  return {\n    aspectStyles: computed(() => {\n      const ratio = Number(props.aspectRatio)\n\n      return ratio\n        ? { paddingBottom: String(1 / ratio * 100) + '%' }\n        : undefined\n    }),\n  }\n}\n\nexport const VResponsive = genericComponent<VResponsiveSlots>()({\n  name: 'VResponsive',\n\n  props: {\n    aspectRatio: [String, Number],\n    contentClass: String,\n\n    ...makeComponentProps(),\n    ...makeDimensionProps(),\n  },\n\n  setup (props, { slots }) {\n    const { aspectStyles } = useAspectStyles(props)\n    const { dimensionStyles } = useDimension(props)\n\n    useRender(() => (\n      <div\n        class={[\n          'v-responsive',\n          props.class,\n        ]}\n        style={[\n          dimensionStyles.value,\n          props.style,\n        ]}\n      >\n        <div class=\"v-responsive__sizer\" style={ aspectStyles.value } />\n\n        { slots.additional?.() }\n\n        { slots.default && (\n          <div class={['v-responsive__content', props.contentClass]}>{ slots.default() }</div>\n        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VResponsive = InstanceType<typeof VResponsive>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,kBAAkB,EAAEC,YAAY,4CAEzC;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,SAAS;AAOpC,OAAO,SAASC,eAAeA,CAAEC,KAAwC,EAAE;EACzE,OAAO;IACLC,YAAY,EAAEL,QAAQ,CAAC,MAAM;MAC3B,MAAMM,KAAK,GAAGC,MAAM,CAACH,KAAK,CAACI,WAAW,CAAC;MAEvC,OAAOF,KAAK,GACR;QAAEG,aAAa,EAAEC,MAAM,CAAC,CAAC,GAAGJ,KAAK,GAAG,GAAG,CAAC,GAAG;MAAI,CAAC,GAChDK,SAAS;IACf,CAAC;EACH,CAAC;AACH;AAEA,OAAO,MAAMC,WAAW,GAAGX,gBAAgB,EAAoB,CAAC;EAC9DY,IAAI,EAAE,aAAa;EAEnBT,KAAK,EAAE;IACLI,WAAW,EAAE,CAACE,MAAM,EAAEH,MAAM,CAAC;IAC7BO,YAAY,EAAEJ,MAAM;IAEpB,GAAGb,kBAAkB,EAAE;IACvB,GAAGC,kBAAkB;EACvB,CAAC;EAEDiB,KAAKA,CAAEX,KAAK,EAAAY,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEX;IAAa,CAAC,GAAGF,eAAe,CAACC,KAAK,CAAC;IAC/C,MAAM;MAAEc;IAAgB,CAAC,GAAGnB,YAAY,CAACK,KAAK,CAAC;IAE/CF,SAAS,CAAC,MAAAiB,YAAA;MAAA,SAEC,CACL,cAAc,EACdf,KAAK,CAACgB,KAAK,CACZ;MAAA,SACM,CACLF,eAAe,CAACG,KAAK,EACrBjB,KAAK,CAACkB,KAAK;IACZ,IAAAH,YAAA;MAAA,SAEU,qBAAqB;MAAA,SAASd,YAAY,CAACgB;IAAK,UAEzDJ,KAAK,CAACM,UAAU,IAAI,EAEpBN,KAAK,CAACO,OAAO,IAAAL,YAAA;MAAA,SACD,CAAC,uBAAuB,EAAEf,KAAK,CAACU,YAAY;IAAC,IAAIG,KAAK,CAACO,OAAO,EAAE,EAC7E,EAEJ,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VResponsive.mjs","names":["makeComponentProps","makeDimensionProps","useDimension","computed","genericComponent","propsFactory","useRender","useAspectStyles","props","aspectStyles","ratio","Number","aspectRatio","paddingBottom","String","undefined","makeVResponsiveProps","contentClass","inline","Boolean","VResponsive","name","setup","_ref","slots","dimensionStyles","_createVNode","class","value","style","additional","default"],"sources":["../../../src/components/VResponsive/VResponsive.tsx"],"sourcesContent":["// Styles\nimport './VResponsive.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport type VResponsiveSlots = {\n  default: []\n  additional: []\n}\n\nexport function useAspectStyles (props: { aspectRatio?: string | number }) {\n  return {\n    aspectStyles: computed(() => {\n      const ratio = Number(props.aspectRatio)\n\n      return ratio\n        ? { paddingBottom: String(1 / ratio * 100) + '%' }\n        : undefined\n    }),\n  }\n}\n\nexport const makeVResponsiveProps = propsFactory({\n  aspectRatio: [String, Number],\n  contentClass: String,\n  inline: Boolean,\n\n  ...makeComponentProps(),\n  ...makeDimensionProps(),\n}, 'v-responsive')\n\nexport const VResponsive = genericComponent<VResponsiveSlots>()({\n  name: 'VResponsive',\n\n  props: makeVResponsiveProps(),\n\n  setup (props, { slots }) {\n    const { aspectStyles } = useAspectStyles(props)\n    const { dimensionStyles } = useDimension(props)\n\n    useRender(() => (\n      <div\n        class={[\n          'v-responsive',\n          { 'v-responsive--inline': props.inline },\n          props.class,\n        ]}\n        style={[\n          dimensionStyles.value,\n          props.style,\n        ]}\n      >\n        <div class=\"v-responsive__sizer\" style={ aspectStyles.value } />\n\n        { slots.additional?.() }\n\n        { slots.default && (\n          <div class={['v-responsive__content', props.contentClass]}>{ slots.default() }</div>\n        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VResponsive = InstanceType<typeof VResponsive>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,kBAAkB,EAAEC,YAAY,4CAEzC;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAOlD,OAAO,SAASC,eAAeA,CAAEC,KAAwC,EAAE;EACzE,OAAO;IACLC,YAAY,EAAEN,QAAQ,CAAC,MAAM;MAC3B,MAAMO,KAAK,GAAGC,MAAM,CAACH,KAAK,CAACI,WAAW,CAAC;MAEvC,OAAOF,KAAK,GACR;QAAEG,aAAa,EAAEC,MAAM,CAAC,CAAC,GAAGJ,KAAK,GAAG,GAAG,CAAC,GAAG;MAAI,CAAC,GAChDK,SAAS;IACf,CAAC;EACH,CAAC;AACH;AAEA,OAAO,MAAMC,oBAAoB,GAAGX,YAAY,CAAC;EAC/CO,WAAW,EAAE,CAACE,MAAM,EAAEH,MAAM,CAAC;EAC7BM,YAAY,EAAEH,MAAM;EACpBI,MAAM,EAAEC,OAAO;EAEf,GAAGnB,kBAAkB,EAAE;EACvB,GAAGC,kBAAkB;AACvB,CAAC,EAAE,cAAc,CAAC;AAElB,OAAO,MAAMmB,WAAW,GAAGhB,gBAAgB,EAAoB,CAAC;EAC9DiB,IAAI,EAAE,aAAa;EAEnBb,KAAK,EAAEQ,oBAAoB,EAAE;EAE7BM,KAAKA,CAAEd,KAAK,EAAAe,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEd;IAAa,CAAC,GAAGF,eAAe,CAACC,KAAK,CAAC;IAC/C,MAAM;MAAEiB;IAAgB,CAAC,GAAGvB,YAAY,CAACM,KAAK,CAAC;IAE/CF,SAAS,CAAC,MAAAoB,YAAA;MAAA,SAEC,CACL,cAAc,EACd;QAAE,sBAAsB,EAAElB,KAAK,CAACU;MAAO,CAAC,EACxCV,KAAK,CAACmB,KAAK,CACZ;MAAA,SACM,CACLF,eAAe,CAACG,KAAK,EACrBpB,KAAK,CAACqB,KAAK;IACZ,IAAAH,YAAA;MAAA,SAEU,qBAAqB;MAAA,SAASjB,YAAY,CAACmB;IAAK,UAEzDJ,KAAK,CAACM,UAAU,IAAI,EAEpBN,KAAK,CAACO,OAAO,IAAAL,YAAA;MAAA,SACD,CAAC,uBAAuB,EAAElB,KAAK,CAACS,YAAY;IAAC,IAAIO,KAAK,CAACO,OAAO,EAAE,EAC7E,EAEJ,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/VResponsive/VResponsive.sass

@@ -1,21 +1,29 @@
 @use '../../styles/settings'
 
 .v-responsive
-  display: flex
+  display: grid
+  grid-template-rows: minmax(100%, 1fr)
+  grid-template-columns: 1fr
   flex: 1 0 auto
   max-height: 100%
   max-width: 100%
   overflow: hidden
   position: relative
 
+  &--inline
+    display: inline-grid
+    flex: 0 0 auto
+
 .v-responsive__content
   flex: 1 0 0px
   max-width: 100%
 
-.v-responsive__sizer ~ .v-responsive__content
-  margin-inline-start: -100%
-
 .v-responsive__sizer
   flex: 1 0 0px
   transition: padding-bottom 0.2s settings.$standard-easing
   pointer-events: none
+
+.v-responsive__sizer,
+.v-responsive__content
+  grid-row-start: 1
+  grid-column-start: 1

package/lib/components/VResponsive/{index.d.ts → index.d.mts}

@@ -10,8 +10,10 @@ declare const VResponsive: {
         $: vue.ComponentInternalInstance;
         $data: {};
         $props: Partial<{
+            inline: boolean;
             style: vue.StyleValue;
         }> & Omit<{
+            inline: boolean;
             style: vue.StyleValue;
         } & {
             height?: string | number | undefined;
@@ -35,7 +37,7 @@ declare const VResponsive: {
         } & {
             "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:additional"?: false | (() => vue.VNodeChild) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "style">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "inline" | "style">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -50,6 +52,7 @@ declare const VResponsive: {
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: vue.ComponentOptionsBase<{
+            inline: boolean;
             style: vue.StyleValue;
         } & {
             height?: string | number | undefined;
@@ -74,6 +77,7 @@ declare const VResponsive: {
             "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:additional"?: false | (() => vue.VNodeChild) | undefined;
         }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+            inline: boolean;
             style: vue.StyleValue;
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
@@ -96,6 +100,7 @@ declare const VResponsive: {
         $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;
     } & {
+        inline: boolean;
         style: vue.StyleValue;
     } & {
         height?: string | number | undefined;
@@ -124,6 +129,7 @@ declare const VResponsive: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
+    inline: boolean;
     style: vue.StyleValue;
 } & {
     height?: string | number | undefined;
@@ -148,6 +154,7 @@ declare const VResponsive: {
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
     "v-slot:additional"?: false | (() => vue.VNodeChild) | undefined;
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+    inline: boolean;
     style: vue.StyleValue;
 }, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     height: (StringConstructor | NumberConstructor)[];
@@ -163,6 +170,7 @@ declare const VResponsive: {
     };
     aspectRatio: (StringConstructor | NumberConstructor)[];
     contentClass: StringConstructor;
+    inline: BooleanConstructor;
 }, vue.ExtractPropTypes<{
     height: (StringConstructor | NumberConstructor)[];
     maxHeight: (StringConstructor | NumberConstructor)[];
@@ -177,6 +185,7 @@ declare const VResponsive: {
     };
     aspectRatio: (StringConstructor | NumberConstructor)[];
     contentClass: StringConstructor;
+    inline: BooleanConstructor;
 }>>;
 type VResponsive = InstanceType<typeof VResponsive>;
 

package/lib/components/VSelect/VSelect.mjs

@@ -10,6 +10,7 @@ import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
 import { VDialogTransition } from "../transitions/index.mjs";
 import { VList, VListItem } from "../VList/index.mjs";
 import { VMenu } from "../VMenu/index.mjs";
+import { VIcon } from "../VIcon/index.mjs";
 import { VTextField } from "../VTextField/index.mjs"; // Composables
 import { forwardRefs } from "../../composables/forwardRefs.mjs";
 import { IconValue } from "../../composables/icons.mjs";
@@ -261,11 +262,13 @@ export const VSelect = genericComponent()({
                   let {
                     isSelected
                   } = _ref2;
-                  return props.multiple && !props.hideSelected ? _createVNode(VCheckboxBtn, {
+                  return _createVNode(_Fragment, null, [props.multiple && !props.hideSelected ? _createVNode(VCheckboxBtn, {
                     "modelValue": isSelected,
                     "ripple": false,
                     "tabindex": "-1"
-                  }, null) : undefined;
+                  }, null) : undefined, item.props.prependIcon && _createVNode(VIcon, {
+                    "icon": item.props.prependIcon
+                  }, null)]);
                 }
               });
             }), slots['append-item']?.()]
@@ -278,6 +281,10 @@ export const VSelect = genericComponent()({
           }
           const slotProps = {
             'onClick:close': onChipClose,
+            onMousedown(e) {
+              e.preventDefault();
+              e.stopPropagation();
+            },
             modelValue: true,
             'onUpdate:modelValue': undefined
           };