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

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

@@ -42,9 +42,6 @@ declare const VValidation: {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
@@ -85,9 +82,6 @@ declare const VValidation: {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
@@ -146,9 +140,6 @@ declare const VValidation: {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            default?: (() => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -181,9 +172,6 @@ declare const VValidation: {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
     };
-    $slots?: {
-        default?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
     } | undefined;

package/lib/components/VVirtualScroll/VVirtualScroll.mjs

@@ -4,6 +4,7 @@ import "./VVirtualScroll.css";
 
 // Components
 import { VVirtualScrollItem } from "./VVirtualScrollItem.mjs"; // Composables
+import { makeComponentProps } from "../../composables/component.mjs";
 import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
 import { useDisplay } from "../../composables/display.mjs";
 import { useResizeObserver } from "../../composables/resizeObserver.mjs"; // Utilities
@@ -19,7 +20,7 @@ export const VVirtualScroll = genericComponent()({
       default: () => []
     },
     itemHeight: [Number, String],
-    visibleItems: [Number, String],
+    ...makeComponentProps(),
     ...makeDimensionProps()
   },
   setup(props, _ref) {
@@ -46,7 +47,7 @@ export const VVirtualScroll = genericComponent()({
     const sizeMap = new Map();
     let sizes = createRange(props.items.length).map(() => itemHeight.value);
     const visibleItems = computed(() => {
-      return props.visibleItems ? parseInt(props.visibleItems, 10) : Math.max(12, Math.ceil((contentRect.value?.height ?? display.height.value) / itemHeight.value * 1.7 + 1));
+      return Math.max(12, Math.ceil((contentRect.value?.height ?? display.height.value) / itemHeight.value * 1.7 + 1));
     });
     function handleItemResize(index, height) {
       itemHeight.value = Math.max(itemHeight.value, height);
@@ -57,20 +58,13 @@ export const VVirtualScroll = genericComponent()({
       return sizes.slice(0, index).reduce((curr, value) => curr + (value || itemHeight.value), 0);
     }
     function calculateMidPointIndex(scrollTop) {
-      let start = 0;
-      let end = props.items.length;
-      while (start <= end) {
-        const middle = start + Math.floor((end - start) / 2);
-        const middleOffset = calculateOffset(middle);
-        if (middleOffset === scrollTop) {
-          return middle;
-        } else if (middleOffset < scrollTop) {
-          start = middle + 1;
-        } else if (middleOffset > scrollTop) {
-          end = middle - 1;
-        }
+      const end = props.items.length;
+      let middle = 0;
+      let middleOffset = 0;
+      while (middleOffset < scrollTop && middle < end) {
+        middleOffset += sizes[middle++] || itemHeight.value;
       }
-      return start;
+      return middle - 1;
     }
     let lastScrollTop = 0;
     function handleScroll() {
@@ -92,8 +86,12 @@ export const VVirtualScroll = genericComponent()({
       const offset = calculateOffset(index);
       rootEl.value.scrollTop = offset;
     }
+    const items = computed(() => props.items.map((item, index) => ({
+      raw: item,
+      index
+    })));
     const last = computed(() => Math.min(props.items.length, first.value + visibleItems.value));
-    const computedItems = computed(() => props.items.slice(first.value, last.value));
+    const computedItems = computed(() => items.value.slice(first.value, last.value));
     const paddingTop = computed(() => calculateOffset(first.value));
     const paddingBottom = computed(() => calculateOffset(props.items.length) - calculateOffset(last.value));
     const {
@@ -118,23 +116,23 @@ export const VVirtualScroll = genericComponent()({
     });
     useRender(() => _createVNode("div", {
       "ref": rootEl,
-      "class": "v-virtual-scroll",
+      "class": ['v-virtual-scroll', props.class],
       "onScroll": handleScroll,
-      "style": dimensionStyles.value
+      "style": [dimensionStyles.value, props.style]
     }, [_createVNode("div", {
       "class": "v-virtual-scroll__container",
       "style": {
         paddingTop: convertToUnit(paddingTop.value),
         paddingBottom: convertToUnit(paddingBottom.value)
       }
-    }, [computedItems.value.map((item, index) => _createVNode(VVirtualScrollItem, {
-      "key": index,
+    }, [computedItems.value.map(item => _createVNode(VVirtualScrollItem, {
+      "key": item.index,
       "dynamicHeight": !props.itemHeight,
-      "onUpdate:height": height => handleItemResize(index + first.value, height)
+      "onUpdate:height": height => handleItemResize(item.index, height)
     }, {
       default: () => [slots.default?.({
-        item,
-        index: index + first.value
+        item: item.raw,
+        index: item.index
       })]
     }))])]));
     return {

package/lib/components/VVirtualScroll/VVirtualScroll.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VVirtualScroll.mjs","names":["VVirtualScrollItem","makeDimensionProps","useDimension","useDisplay","useResizeObserver","computed","onMounted","ref","watch","watchEffect","clamp","convertToUnit","createRange","genericComponent","useRender","UP","DOWN","VVirtualScroll","name","props","items","type","Array","default","itemHeight","Number","String","visibleItems","setup","_ref","slots","first","baseItemHeight","get","parseInt","value","set","val","rootEl","resizeRef","contentRect","display","sizeMap","Map","sizes","length","map","Math","max","ceil","height","handleItemResize","index","calculateOffset","slice","reduce","curr","calculateMidPointIndex","scrollTop","start","end","middle","floor","middleOffset","lastScrollTop","handleScroll","direction","midPointIndex","buffer","round","scrollToIndex","offset","last","min","computedItems","paddingTop","paddingBottom","dimensionStyles","forEach","item","indexOf","delete","_createVNode"],"sources":["../../../src/components/VVirtualScroll/VVirtualScroll.tsx"],"sourcesContent":["// Styles\nimport './VVirtualScroll.sass'\n\n// Components\nimport { VVirtualScrollItem } from './VVirtualScrollItem'\n\n// Composables\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { useDisplay } from '@/composables/display'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { computed, onMounted, ref, watch, watchEffect } from 'vue'\nimport {\n  clamp,\n  convertToUnit,\n  createRange,\n  genericComponent,\n  useRender,\n} from '@/util'\n\n// Types\nimport type { SlotsToProps } from '@/util'\n\nconst UP = -1\nconst DOWN = 1\n\nexport interface VVirtualScrollSlot<T> {\n  item: T\n  index: number\n}\n\nexport const VVirtualScroll = genericComponent<new <T>() => {\n  $props: {\n    items: readonly T[]\n  } & SlotsToProps<{\n    default: [VVirtualScrollSlot<T>]\n  }>\n}>()({\n  name: 'VVirtualScroll',\n\n  props: {\n    items: {\n      type: Array,\n      default: () => ([]),\n    },\n    itemHeight: [Number, String],\n    visibleItems: [Number, String],\n\n    ...makeDimensionProps(),\n  },\n\n  setup (props, { slots }) {\n    const first = ref(0)\n    const baseItemHeight = ref(props.itemHeight)\n    const itemHeight = computed({\n      get: () => parseInt(baseItemHeight.value ?? 0, 10),\n      set (val) {\n        baseItemHeight.value = val\n      },\n    })\n    const rootEl = ref<HTMLDivElement>()\n    const { resizeRef, contentRect } = useResizeObserver()\n    watchEffect(() => {\n      resizeRef.value = rootEl.value\n    })\n    const display = useDisplay()\n\n    const sizeMap = new Map<any, number>()\n    let sizes = createRange(props.items.length).map(() => itemHeight.value)\n    const visibleItems = computed(() => {\n      return props.visibleItems\n        ? parseInt(props.visibleItems, 10)\n        : Math.max(12,\n          Math.ceil(((contentRect.value?.height ?? display.height.value) / itemHeight.value) * 1.7 + 1)\n        )\n    })\n\n    function handleItemResize (index: number, height: number) {\n      itemHeight.value = Math.max(itemHeight.value, height)\n      sizes[index] = height\n      sizeMap.set(props.items[index], height)\n    }\n\n    function calculateOffset (index: number) {\n      return sizes.slice(0, index).reduce((curr, value) => curr + (value || itemHeight.value), 0)\n    }\n\n    function calculateMidPointIndex (scrollTop: number) {\n      let start = 0\n      let end = props.items.length\n\n      while (start <= end) {\n        const middle = start + Math.floor((end - start) / 2)\n        const middleOffset = calculateOffset(middle)\n\n        if (middleOffset === scrollTop) {\n          return middle\n        } else if (middleOffset < scrollTop) {\n          start = middle + 1\n        } else if (middleOffset > scrollTop) {\n          end = middle - 1\n        }\n      }\n\n      return start\n    }\n\n    let lastScrollTop = 0\n    function handleScroll () {\n      if (!rootEl.value || !contentRect.value) return\n\n      const height = contentRect.value.height\n      const scrollTop = rootEl.value.scrollTop\n      const direction = scrollTop < lastScrollTop ? UP : DOWN\n\n      const midPointIndex = calculateMidPointIndex(scrollTop + height / 2)\n      const buffer = Math.round(visibleItems.value / 3)\n      if (direction === UP && midPointIndex <= first.value + (buffer * 2) - 1) {\n        first.value = clamp(midPointIndex - buffer, 0, props.items.length)\n      } else if (direction === DOWN && midPointIndex >= first.value + (buffer * 2) - 1) {\n        first.value = clamp(midPointIndex - buffer, 0, props.items.length - visibleItems.value)\n      }\n\n      lastScrollTop = rootEl.value.scrollTop\n    }\n\n    function scrollToIndex (index: number) {\n      if (!rootEl.value) return\n\n      const offset = calculateOffset(index)\n      rootEl.value.scrollTop = offset\n    }\n\n    const last = computed(() => Math.min(props.items.length, first.value + visibleItems.value))\n    const computedItems = computed(() => props.items.slice(first.value, last.value))\n    const paddingTop = computed(() => calculateOffset(first.value))\n    const paddingBottom = computed(() => calculateOffset(props.items.length) - calculateOffset(last.value))\n\n    const { dimensionStyles } = useDimension(props)\n\n    onMounted(() => {\n      if (!itemHeight.value) {\n        // If itemHeight prop is not set, then calculate an estimated height from the average of inital items\n        itemHeight.value = sizes.slice(first.value, last.value).reduce((curr, height) => curr + height, 0) / (visibleItems.value)\n      }\n    })\n\n    watch(() => props.items.length, () => {\n      sizes = createRange(props.items.length).map(() => itemHeight.value)\n      sizeMap.forEach((height, item) => {\n        const index = props.items.indexOf(item)\n        if (index === -1) {\n          sizeMap.delete(item)\n        } else {\n          sizes[index] = height\n        }\n      })\n    })\n\n    useRender(() => (\n      <div\n        ref={ rootEl }\n        class=\"v-virtual-scroll\"\n        onScroll={ handleScroll }\n        style={ dimensionStyles.value }\n      >\n        <div\n          class=\"v-virtual-scroll__container\"\n          style={{\n            paddingTop: convertToUnit(paddingTop.value),\n            paddingBottom: convertToUnit(paddingBottom.value),\n          }}\n        >\n          { computedItems.value.map((item, index) => (\n            <VVirtualScrollItem\n              key={ index }\n              dynamicHeight={ !props.itemHeight }\n              onUpdate:height={ height => handleItemResize(index + first.value, height) }\n            >\n              { slots.default?.({ item, index: index + first.value }) }\n            </VVirtualScrollItem>\n          ))}\n        </div>\n      </div>\n    ))\n\n    return {\n      scrollToIndex,\n    }\n  },\n})\n\nexport type VVirtualScroll = InstanceType<typeof VVirtualScroll>\n"],"mappings":"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"}
+{"version":3,"file":"VVirtualScroll.mjs","names":["VVirtualScrollItem","makeComponentProps","makeDimensionProps","useDimension","useDisplay","useResizeObserver","computed","onMounted","ref","watch","watchEffect","clamp","convertToUnit","createRange","genericComponent","useRender","UP","DOWN","VVirtualScroll","name","props","items","type","Array","default","itemHeight","Number","String","setup","_ref","slots","first","baseItemHeight","get","parseInt","value","set","val","rootEl","resizeRef","contentRect","display","sizeMap","Map","sizes","length","map","visibleItems","Math","max","ceil","height","handleItemResize","index","calculateOffset","slice","reduce","curr","calculateMidPointIndex","scrollTop","end","middle","middleOffset","lastScrollTop","handleScroll","direction","midPointIndex","buffer","round","scrollToIndex","offset","item","raw","last","min","computedItems","paddingTop","paddingBottom","dimensionStyles","forEach","indexOf","delete","_createVNode","class","style"],"sources":["../../../src/components/VVirtualScroll/VVirtualScroll.tsx"],"sourcesContent":["// Styles\nimport './VVirtualScroll.sass'\n\n// Components\nimport { VVirtualScrollItem } from './VVirtualScrollItem'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { useDisplay } from '@/composables/display'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { computed, onMounted, ref, watch, watchEffect } from 'vue'\nimport {\n  clamp,\n  convertToUnit,\n  createRange,\n  genericComponent,\n  useRender,\n} from '@/util'\n\n// Types\nimport type { GenericProps } from '@/util'\n\nconst UP = -1\nconst DOWN = 1\n\nexport interface VVirtualScrollSlot<T> {\n  item: T\n  index: number\n}\n\nexport const VVirtualScroll = genericComponent<new <T>(props: {\n  items?: readonly T[]\n}) => GenericProps<typeof props, {\n  default: [VVirtualScrollSlot<T>]\n}>>()({\n  name: 'VVirtualScroll',\n\n  props: {\n    items: {\n      type: Array,\n      default: () => ([]),\n    },\n    itemHeight: [Number, String],\n\n    ...makeComponentProps(),\n    ...makeDimensionProps(),\n  },\n\n  setup (props, { slots }) {\n    const first = ref(0)\n    const baseItemHeight = ref(props.itemHeight)\n    const itemHeight = computed({\n      get: () => parseInt(baseItemHeight.value ?? 0, 10),\n      set (val) {\n        baseItemHeight.value = val\n      },\n    })\n    const rootEl = ref<HTMLDivElement>()\n    const { resizeRef, contentRect } = useResizeObserver()\n    watchEffect(() => {\n      resizeRef.value = rootEl.value\n    })\n    const display = useDisplay()\n\n    const sizeMap = new Map<any, number>()\n    let sizes = createRange(props.items.length).map(() => itemHeight.value)\n    const visibleItems = computed(() => {\n      return Math.max(12,\n        Math.ceil(((contentRect.value?.height ?? display.height.value) / itemHeight.value) * 1.7 + 1)\n      )\n    })\n\n    function handleItemResize (index: number, height: number) {\n      itemHeight.value = Math.max(itemHeight.value, height)\n      sizes[index] = height\n      sizeMap.set(props.items[index], height)\n    }\n\n    function calculateOffset (index: number) {\n      return sizes.slice(0, index).reduce((curr, value) => curr + (value || itemHeight.value), 0)\n    }\n\n    function calculateMidPointIndex (scrollTop: number) {\n      const end = props.items.length\n\n      let middle = 0\n      let middleOffset = 0\n      while (middleOffset < scrollTop && middle < end) {\n        middleOffset += sizes[middle++] || itemHeight.value\n      }\n\n      return middle - 1\n    }\n\n    let lastScrollTop = 0\n    function handleScroll () {\n      if (!rootEl.value || !contentRect.value) return\n\n      const height = contentRect.value.height\n      const scrollTop = rootEl.value.scrollTop\n      const direction = scrollTop < lastScrollTop ? UP : DOWN\n\n      const midPointIndex = calculateMidPointIndex(scrollTop + height / 2)\n      const buffer = Math.round(visibleItems.value / 3)\n      if (direction === UP && midPointIndex <= first.value + (buffer * 2) - 1) {\n        first.value = clamp(midPointIndex - buffer, 0, props.items.length)\n      } else if (direction === DOWN && midPointIndex >= first.value + (buffer * 2) - 1) {\n        first.value = clamp(midPointIndex - buffer, 0, props.items.length - visibleItems.value)\n      }\n\n      lastScrollTop = rootEl.value.scrollTop\n    }\n\n    function scrollToIndex (index: number) {\n      if (!rootEl.value) return\n\n      const offset = calculateOffset(index)\n      rootEl.value.scrollTop = offset\n    }\n\n    const items = computed(() => props.items.map((item, index) => ({\n      raw: item,\n      index,\n    })))\n    const last = computed(() => Math.min(props.items.length, first.value + visibleItems.value))\n    const computedItems = computed(() => items.value.slice(first.value, last.value))\n    const paddingTop = computed(() => calculateOffset(first.value))\n    const paddingBottom = computed(() => calculateOffset(props.items.length) - calculateOffset(last.value))\n\n    const { dimensionStyles } = useDimension(props)\n\n    onMounted(() => {\n      if (!itemHeight.value) {\n        // If itemHeight prop is not set, then calculate an estimated height from the average of inital items\n        itemHeight.value = sizes.slice(first.value, last.value).reduce((curr, height) => curr + height, 0) / (visibleItems.value)\n      }\n    })\n\n    watch(() => props.items.length, () => {\n      sizes = createRange(props.items.length).map(() => itemHeight.value)\n      sizeMap.forEach((height, item) => {\n        const index = props.items.indexOf(item)\n        if (index === -1) {\n          sizeMap.delete(item)\n        } else {\n          sizes[index] = height\n        }\n      })\n    })\n\n    useRender(() => (\n      <div\n        ref={ rootEl }\n        class={[\n          'v-virtual-scroll',\n          props.class,\n        ]}\n        onScroll={ handleScroll }\n        style={[\n          dimensionStyles.value,\n          props.style,\n        ]}\n      >\n        <div\n          class=\"v-virtual-scroll__container\"\n          style={{\n            paddingTop: convertToUnit(paddingTop.value),\n            paddingBottom: convertToUnit(paddingBottom.value),\n          }}\n        >\n          { computedItems.value.map(item => (\n            <VVirtualScrollItem\n              key={ item.index }\n              dynamicHeight={ !props.itemHeight }\n              onUpdate:height={ height => handleItemResize(item.index, height) }\n            >\n              { slots.default?.({ item: item.raw, index: item.index }) }\n            </VVirtualScrollItem>\n          ))}\n        </div>\n      </div>\n    ))\n\n    return {\n      scrollToIndex,\n    }\n  },\n})\n\nexport type VVirtualScroll = InstanceType<typeof VVirtualScroll>\n"],"mappings":"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"}

package/lib/components/VVirtualScroll/VVirtualScrollItem.mjs

@@ -1,5 +1,6 @@
 import { createVNode as _createVNode } from "vue";
 // Composables
+import { makeComponentProps } from "../../composables/component.mjs";
 import { useResizeObserver } from "../../composables/resizeObserver.mjs";
 import { useToggleScope } from "../../composables/toggleScope.mjs"; // Utilities
 import { genericComponent, useRender } from "../../util/index.mjs";
@@ -7,7 +8,8 @@ import { onUpdated, watch } from 'vue';
 export const VVirtualScrollItem = genericComponent()({
   name: 'VVirtualScrollItem',
   props: {
-    dynamicHeight: Boolean
+    dynamicHeight: Boolean,
+    ...makeComponentProps()
   },
   emits: {
     'update:height': height => true
@@ -34,7 +36,8 @@ export const VVirtualScrollItem = genericComponent()({
     onUpdated(updateHeight);
     useRender(() => _createVNode("div", {
       "ref": props.dynamicHeight ? resizeRef : undefined,
-      "class": "v-virtual-scroll__item"
+      "class": ['v-virtual-scroll__item', props.class],
+      "style": props.style
     }, [slots.default?.()]));
   }
 });

package/lib/components/VVirtualScroll/VVirtualScrollItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VVirtualScrollItem.mjs","names":["useResizeObserver","useToggleScope","genericComponent","useRender","onUpdated","watch","VVirtualScrollItem","name","props","dynamicHeight","Boolean","emits","height","setup","_ref","emit","slots","resizeRef","contentRect","value","updateHeight","_createVNode","undefined","default"],"sources":["../../../src/components/VVirtualScroll/VVirtualScrollItem.tsx"],"sourcesContent":["// Composables\nimport { useResizeObserver } from '@/composables/resizeObserver'\nimport { useToggleScope } from '@/composables/toggleScope'\n\n// Utilities\nimport { genericComponent, useRender } from '@/util'\nimport { onUpdated, watch } from 'vue'\n\nexport const VVirtualScrollItem = genericComponent()({\n  name: 'VVirtualScrollItem',\n\n  props: {\n    dynamicHeight: Boolean,\n  },\n\n  emits: {\n    'update:height': (height: number) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const { resizeRef, contentRect } = useResizeObserver()\n\n    useToggleScope(() => props.dynamicHeight, () => {\n      watch(() => contentRect.value?.height, height => {\n        if (height != null) emit('update:height', height)\n      })\n    })\n\n    function updateHeight () {\n      if (props.dynamicHeight && contentRect.value) {\n        emit('update:height', contentRect.value.height)\n      }\n    }\n\n    onUpdated(updateHeight)\n\n    useRender(() => (\n      <div\n        ref={ props.dynamicHeight ? resizeRef : undefined }\n        class=\"v-virtual-scroll__item\"\n      >\n        { slots.default?.() }\n      </div>\n    ))\n  },\n})\n"],"mappings":";AAAA;AAAA,SACSA,iBAAiB;AAAA,SACjBC,cAAc,6CAEvB;AAAA,SACSC,gBAAgB,EAAEC,SAAS;AACpC,SAASC,SAAS,EAAEC,KAAK,QAAQ,KAAK;AAEtC,OAAO,MAAMC,kBAAkB,GAAGJ,gBAAgB,EAAE,CAAC;EACnDK,IAAI,EAAE,oBAAoB;EAE1BC,KAAK,EAAE;IACLC,aAAa,EAAEC;EACjB,CAAC;EAEDC,KAAK,EAAE;IACL,eAAe,EAAGC,MAAc,IAAK;EACvC,CAAC;EAEDC,KAAKA,CAAEL,KAAK,EAAAM,IAAA,EAAmB;IAAA,IAAjB;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC3B,MAAM;MAAEG,SAAS;MAAEC;IAAY,CAAC,GAAGlB,iBAAiB,EAAE;IAEtDC,cAAc,CAAC,MAAMO,KAAK,CAACC,aAAa,EAAE,MAAM;MAC9CJ,KAAK,CAAC,MAAMa,WAAW,CAACC,KAAK,EAAEP,MAAM,EAAEA,MAAM,IAAI;QAC/C,IAAIA,MAAM,IAAI,IAAI,EAAEG,IAAI,CAAC,eAAe,EAAEH,MAAM,CAAC;MACnD,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF,SAASQ,YAAYA,CAAA,EAAI;MACvB,IAAIZ,KAAK,CAACC,aAAa,IAAIS,WAAW,CAACC,KAAK,EAAE;QAC5CJ,IAAI,CAAC,eAAe,EAAEG,WAAW,CAACC,KAAK,CAACP,MAAM,CAAC;MACjD;IACF;IAEAR,SAAS,CAACgB,YAAY,CAAC;IAEvBjB,SAAS,CAAC,MAAAkB,YAAA;MAAA,OAEAb,KAAK,CAACC,aAAa,GAAGQ,SAAS,GAAGK,SAAS;MAAA,SAC3C;IAAwB,IAE5BN,KAAK,CAACO,OAAO,IAAI,EAEtB,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"VVirtualScrollItem.mjs","names":["makeComponentProps","useResizeObserver","useToggleScope","genericComponent","useRender","onUpdated","watch","VVirtualScrollItem","name","props","dynamicHeight","Boolean","emits","height","setup","_ref","emit","slots","resizeRef","contentRect","value","updateHeight","_createVNode","undefined","class","style","default"],"sources":["../../../src/components/VVirtualScroll/VVirtualScrollItem.tsx"],"sourcesContent":["// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { useResizeObserver } from '@/composables/resizeObserver'\nimport { useToggleScope } from '@/composables/toggleScope'\n\n// Utilities\nimport { genericComponent, useRender } from '@/util'\nimport { onUpdated, watch } from 'vue'\n\nexport const VVirtualScrollItem = genericComponent()({\n  name: 'VVirtualScrollItem',\n\n  props: {\n    dynamicHeight: Boolean,\n\n    ...makeComponentProps(),\n  },\n\n  emits: {\n    'update:height': (height: number) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const { resizeRef, contentRect } = useResizeObserver()\n\n    useToggleScope(() => props.dynamicHeight, () => {\n      watch(() => contentRect.value?.height, height => {\n        if (height != null) emit('update:height', height)\n      })\n    })\n\n    function updateHeight () {\n      if (props.dynamicHeight && contentRect.value) {\n        emit('update:height', contentRect.value.height)\n      }\n    }\n\n    onUpdated(updateHeight)\n\n    useRender(() => (\n      <div\n        ref={ props.dynamicHeight ? resizeRef : undefined }\n        class={[\n          'v-virtual-scroll__item',\n          props.class,\n        ]}\n        style={ props.style }\n      >\n        { slots.default?.() }\n      </div>\n    ))\n  },\n})\n"],"mappings":";AAAA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,iBAAiB;AAAA,SACjBC,cAAc,6CAEvB;AAAA,SACSC,gBAAgB,EAAEC,SAAS;AACpC,SAASC,SAAS,EAAEC,KAAK,QAAQ,KAAK;AAEtC,OAAO,MAAMC,kBAAkB,GAAGJ,gBAAgB,EAAE,CAAC;EACnDK,IAAI,EAAE,oBAAoB;EAE1BC,KAAK,EAAE;IACLC,aAAa,EAAEC,OAAO;IAEtB,GAAGX,kBAAkB;EACvB,CAAC;EAEDY,KAAK,EAAE;IACL,eAAe,EAAGC,MAAc,IAAK;EACvC,CAAC;EAEDC,KAAKA,CAAEL,KAAK,EAAAM,IAAA,EAAmB;IAAA,IAAjB;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC3B,MAAM;MAAEG,SAAS;MAAEC;IAAY,CAAC,GAAGlB,iBAAiB,EAAE;IAEtDC,cAAc,CAAC,MAAMO,KAAK,CAACC,aAAa,EAAE,MAAM;MAC9CJ,KAAK,CAAC,MAAMa,WAAW,CAACC,KAAK,EAAEP,MAAM,EAAEA,MAAM,IAAI;QAC/C,IAAIA,MAAM,IAAI,IAAI,EAAEG,IAAI,CAAC,eAAe,EAAEH,MAAM,CAAC;MACnD,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF,SAASQ,YAAYA,CAAA,EAAI;MACvB,IAAIZ,KAAK,CAACC,aAAa,IAAIS,WAAW,CAACC,KAAK,EAAE;QAC5CJ,IAAI,CAAC,eAAe,EAAEG,WAAW,CAACC,KAAK,CAACP,MAAM,CAAC;MACjD;IACF;IAEAR,SAAS,CAACgB,YAAY,CAAC;IAEvBjB,SAAS,CAAC,MAAAkB,YAAA;MAAA,OAEAb,KAAK,CAACC,aAAa,GAAGQ,SAAS,GAAGK,SAAS;MAAA,SAC1C,CACL,wBAAwB,EACxBd,KAAK,CAACe,KAAK,CACZ;MAAA,SACOf,KAAK,CAACgB;IAAK,IAEjBR,KAAK,CAACS,OAAO,IAAI,EAEtB,CAAC;EACJ;AACF,CAAC,CAAC"}

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

@@ -1,6 +1,26 @@
 import * as vue from 'vue';
-import { ComponentPropsOptions, ExtractPropTypes } from 'vue';
+import { ComponentPropsOptions, ExtractPropTypes, VNodeChild } from 'vue';
 
+type SlotsToProps<U extends Record<string, any[]> | Record<string, Slot>, T = U extends Record<string, any[]> ? MakeSlots<U> : U> = {
+    $children?: (VNodeChild | (T extends {
+        default: infer V;
+    } ? V : {}) | {
+        [K in keyof T]?: T[K];
+    });
+    'v-slots'?: {
+        [K in keyof T]?: T[K] | false;
+    };
+} & {
+    [K in keyof T as `v-slot:${K & string}`]?: T[K] | false;
+};
+type Slot<T extends any[] = any[]> = (...args: T) => VNodeChild;
+type MakeSlots<T extends Record<string, any[]> | Record<string, Slot>> = {
+    [K in keyof T]: T[K] extends any[] ? Slot<T[K]> : T[K];
+};
+type GenericProps<Props, Slots extends Record<string, any[]>> = {
+    $props: Props & SlotsToProps<Slots>;
+    $slots: MakeSlots<Slots>;
+};
 interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions>, Props = ExtractPropTypes<PropsOptions>> {
     filterProps<T extends Partial<Props>, U extends Exclude<keyof Props, Exclude<keyof Props, keyof T>>>(props: T): [yes: Partial<Pick<T, U>>, no: Omit<T, U>];
 }
@@ -13,20 +33,26 @@ declare const VVirtualScroll: {
     new (...args: any[]): {
         $: vue.ComponentInternalInstance;
         $data: {};
-        $props: Partial<{}> & Omit<Readonly<vue.ExtractPropTypes<Omit<{
+        $props: Partial<{
+            style: vue.StyleValue;
+        }> & Omit<Readonly<vue.ExtractPropTypes<Omit<{
             height: (StringConstructor | NumberConstructor)[];
             maxHeight: (StringConstructor | NumberConstructor)[];
             maxWidth: (StringConstructor | NumberConstructor)[];
             minHeight: (StringConstructor | NumberConstructor)[];
             minWidth: (StringConstructor | NumberConstructor)[];
             width: (StringConstructor | NumberConstructor)[];
+            class: vue.PropType<any>;
+            style: {
+                type: vue.PropType<vue.StyleValue>;
+                default: null;
+            };
             items: {
                 type: ArrayConstructor;
                 default: () => never[];
             };
             itemHeight: (StringConstructor | NumberConstructor)[];
-            visibleItems: (StringConstructor | NumberConstructor)[];
-        }, "$children" | "v-slot:default" | "$slots" | "v-slots" | "items">>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, never>;
+        }, "$children" | "v-slot:default" | "items" | "v-slots">>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "style">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -47,15 +73,21 @@ declare const VVirtualScroll: {
             minHeight: (StringConstructor | NumberConstructor)[];
             minWidth: (StringConstructor | NumberConstructor)[];
             width: (StringConstructor | NumberConstructor)[];
+            class: vue.PropType<any>;
+            style: {
+                type: vue.PropType<vue.StyleValue>;
+                default: null;
+            };
             items: {
                 type: ArrayConstructor;
                 default: () => never[];
             };
             itemHeight: (StringConstructor | NumberConstructor)[];
-            visibleItems: (StringConstructor | NumberConstructor)[];
-        }, "$children" | "v-slot:default" | "$slots" | "v-slots" | "items">>>, {
+        }, "$children" | "v-slot:default" | "items" | "v-slots">>>, {
             scrollToIndex: (index: number) => void;
-        }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slot:default" | "$slots" | "v-slots" | "items">, string, {}, {}, string> & {
+        }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slot:default" | "items" | "v-slots">, string, {
+            style: vue.StyleValue;
+        }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
             beforeMount?: ((() => void) | (() => void)[]) | undefined;
@@ -82,13 +114,17 @@ declare const VVirtualScroll: {
         minHeight: (StringConstructor | NumberConstructor)[];
         minWidth: (StringConstructor | NumberConstructor)[];
         width: (StringConstructor | NumberConstructor)[];
+        class: vue.PropType<any>;
+        style: {
+            type: vue.PropType<vue.StyleValue>;
+            default: null;
+        };
         items: {
             type: ArrayConstructor;
             default: () => never[];
         };
         itemHeight: (StringConstructor | NumberConstructor)[];
-        visibleItems: (StringConstructor | NumberConstructor)[];
-    }, "$children" | "v-slot:default" | "$slots" | "v-slots" | "items">>> & vue.ShallowUnwrapRef<{
+    }, "$children" | "v-slot:default" | "items" | "v-slots">>> & vue.ShallowUnwrapRef<{
         scrollToIndex: (index: number) => void;
     }> & {} & vue.ComponentCustomProperties & {};
     __isFragment?: undefined;
@@ -101,43 +137,43 @@ declare const VVirtualScroll: {
     minHeight: (StringConstructor | NumberConstructor)[];
     minWidth: (StringConstructor | NumberConstructor)[];
     width: (StringConstructor | NumberConstructor)[];
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     items: {
         type: ArrayConstructor;
         default: () => never[];
     };
     itemHeight: (StringConstructor | NumberConstructor)[];
-    visibleItems: (StringConstructor | NumberConstructor)[];
-}, "$children" | "v-slot:default" | "$slots" | "v-slots" | "items">>>, {
+}, "$children" | "v-slot:default" | "items" | "v-slots">>>, {
     scrollToIndex: (index: number) => void;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slot:default" | "$slots" | "v-slots" | "items">, string, {}, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T_1>() => {
-    $props: {
-        items: readonly T_1[];
-    } & {
-        $children?: vue.VNodeChild | ((args_0: VVirtualScrollSlot<T_1>) => vue.VNodeChild) | {
-            default?: ((args_0: VVirtualScrollSlot<T_1>) => vue.VNodeChild) | undefined;
-        };
-        $slots?: {
-            default?: ((args_0: VVirtualScrollSlot<T_1>) => vue.VNodeChild) | undefined;
-        } | undefined;
-        'v-slots'?: {
-            default?: false | ((args_0: VVirtualScrollSlot<T_1>) => vue.VNodeChild) | undefined;
-        } | undefined;
-    } & {
-        "v-slot:default"?: false | ((args_0: VVirtualScrollSlot<T_1>) => vue.VNodeChild) | undefined;
-    };
-}) & FilterPropsOptions<{
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slot:default" | "items" | "v-slots">, string, {
+    style: vue.StyleValue;
+}, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T_1>(props: {
+    items?: readonly T_1[] | undefined;
+}) => GenericProps<{
+    items?: readonly T_1[] | undefined;
+}, {
+    default: [VVirtualScrollSlot<T_1>];
+}>) & FilterPropsOptions<{
     height: (StringConstructor | NumberConstructor)[];
     maxHeight: (StringConstructor | NumberConstructor)[];
     maxWidth: (StringConstructor | NumberConstructor)[];
     minHeight: (StringConstructor | NumberConstructor)[];
     minWidth: (StringConstructor | NumberConstructor)[];
     width: (StringConstructor | NumberConstructor)[];
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     items: {
         type: ArrayConstructor;
         default: () => never[];
     };
     itemHeight: (StringConstructor | NumberConstructor)[];
-    visibleItems: (StringConstructor | NumberConstructor)[];
 }, vue.ExtractPropTypes<{
     height: (StringConstructor | NumberConstructor)[];
     maxHeight: (StringConstructor | NumberConstructor)[];
@@ -145,12 +181,16 @@ declare const VVirtualScroll: {
     minHeight: (StringConstructor | NumberConstructor)[];
     minWidth: (StringConstructor | NumberConstructor)[];
     width: (StringConstructor | NumberConstructor)[];
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     items: {
         type: ArrayConstructor;
         default: () => never[];
     };
     itemHeight: (StringConstructor | NumberConstructor)[];
-    visibleItems: (StringConstructor | NumberConstructor)[];
 }>>;
 type VVirtualScroll = InstanceType<typeof VVirtualScroll>;
 

package/lib/components/VWindow/VWindow.mjs

@@ -5,6 +5,7 @@ import "./VWindow.css";
 // Components
 import { VBtn } from "../VBtn/index.mjs"; // Directives
 import { Touch } from "../../directives/touch/index.mjs"; // Composables
+import { makeComponentProps } from "../../composables/component.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
 import { useGroup } from "../../composables/group.mjs";
@@ -46,6 +47,7 @@ export const makeVWindowProps = propsFactory({
   mandatory: {
     default: 'force'
   },
+  ...makeComponentProps(),
   ...makeTagProps(),
   ...makeThemeProps()
 }, 'v-window');
@@ -161,7 +163,8 @@ export const VWindow = genericComponent()({
       "ref": rootRef,
       "class": ['v-window', {
         'v-window--show-arrows-on-hover': props.showArrows === 'hover'
-      }, themeClasses.value]
+      }, themeClasses.value, props.class],
+      "style": props.style
     }, {
       default: () => [_createVNode("div", {
         "class": "v-window__container",

package/lib/components/VWindow/VWindow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VWindow.mjs","names":["VBtn","Touch","makeTagProps","makeThemeProps","provideTheme","useGroup","useLocale","useRtl","computed","provide","ref","watch","genericComponent","propsFactory","useRender","VWindowSymbol","Symbol","for","VWindowGroupSymbol","makeVWindowProps","continuous","Boolean","nextIcon","type","String","Function","Object","default","prevIcon","reverse","showArrows","validator","v","touch","undefined","direction","modelValue","disabled","selectedClass","mandatory","VWindow","name","directives","props","emits","setup","_ref","slots","themeClasses","isRtl","t","group","rootRef","isRtlReverse","value","isReversed","transition","axis","transitionCount","transitionHeight","activeIndex","items","findIndex","item","selected","includes","id","newVal","oldVal","itemsLength","length","lastIndex","canMoveBack","canMoveForward","prev","next","arrows","prevProps","icon","class","onClick","ariaLabel","push","_createVNode","nextProps","touchOptions","options","left","right","start","_ref2","originalEvent","stopPropagation","_withDirectives","tag","height","additional","_resolveDirective"],"sources":["../../../src/components/VWindow/VWindow.tsx"],"sourcesContent":["// Styles\nimport './VWindow.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Directives\nimport { Touch } from '@/directives/touch'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useGroup } from '@/composables/group'\nimport { useLocale, useRtl } from '@/composables/locale'\n\n// Utilities\nimport { computed, provide, ref, watch } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { ComputedRef, InjectionKey, PropType, Ref } from 'vue'\nimport type { GroupItemProvide, GroupProvide } from '@/composables/group'\nimport type { IconValue } from '@/composables/icons'\nimport type { TouchHandlers } from '@/directives/touch'\n\nexport type VWindowSlots = {\n  default: [{ group: GroupProvide }]\n  additional: [{ group: GroupProvide }]\n  prev: [{ props: ControlProps }]\n  next: [{ props: ControlProps }]\n}\n\ntype WindowProvide = {\n  transition: ComputedRef<undefined | string>\n  transitionCount: Ref<number>\n  transitionHeight: Ref<undefined | string>\n  isReversed: Ref<boolean>\n  rootRef: Ref<HTMLElement | undefined>\n}\n\ntype ControlProps = {\n  icon: IconValue\n  class: string\n  onClick: () => void\n  ariaLabel: string\n}\n\nexport const VWindowSymbol: InjectionKey<WindowProvide> = Symbol.for('vuetify:v-window')\nexport const VWindowGroupSymbol: InjectionKey<GroupItemProvide> = Symbol.for('vuetify:v-window-group')\n\nexport const makeVWindowProps = propsFactory({\n  continuous: Boolean,\n  nextIcon: {\n    type: [Boolean, String, Function, Object] as PropType<IconValue>,\n    default: '$next',\n  },\n  prevIcon: {\n    type: [Boolean, String, Function, Object] as PropType<IconValue>,\n    default: '$prev',\n  },\n  reverse: Boolean,\n  showArrows: {\n    type: [Boolean, String],\n    validator: (v: any) => typeof v === 'boolean' || v === 'hover',\n  },\n  touch: {\n    type: [Object, Boolean] as PropType<boolean | TouchHandlers>,\n    default: undefined,\n  },\n  direction: {\n    type: String,\n    default: 'horizontal',\n  },\n\n  modelValue: null,\n  disabled: Boolean,\n  selectedClass: {\n    type: String,\n    default: 'v-window-item--active',\n  },\n  // TODO: mandatory should probably not be exposed but do this for now\n  mandatory: {\n    default: 'force' as const,\n  },\n\n  ...makeTagProps(),\n  ...makeThemeProps(),\n}, 'v-window')\n\nexport const VWindow = genericComponent<VWindowSlots>()({\n  name: 'VWindow',\n\n  directives: {\n    Touch,\n  },\n\n  props: makeVWindowProps(),\n\n  emits: {\n    'update:modelValue': (v: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { isRtl } = useRtl()\n    const { t } = useLocale()\n\n    const group = useGroup(props, VWindowGroupSymbol)\n\n    const rootRef = ref()\n    const isRtlReverse = computed(() => isRtl.value ? !props.reverse : props.reverse)\n    const isReversed = ref(false)\n    const transition = computed(() => {\n      const axis = props.direction === 'vertical' ? 'y' : 'x'\n      const reverse = isRtlReverse.value ? !isReversed.value : isReversed.value\n      const direction = reverse ? '-reverse' : ''\n\n      return `v-window-${axis}${direction}-transition`\n    })\n    const transitionCount = ref(0)\n    const transitionHeight = ref<undefined | string>(undefined)\n\n    const activeIndex = computed(() => {\n      return group.items.value.findIndex(item => group.selected.value.includes(item.id))\n    })\n\n    watch(activeIndex, (newVal, oldVal) => {\n      const itemsLength = group.items.value.length\n      const lastIndex = itemsLength - 1\n\n      if (itemsLength <= 2) {\n        isReversed.value = newVal < oldVal\n      } else if (newVal === lastIndex && oldVal === 0) {\n        isReversed.value = true\n      } else if (newVal === 0 && oldVal === lastIndex) {\n        isReversed.value = false\n      } else {\n        isReversed.value = newVal < oldVal\n      }\n    })\n\n    provide(VWindowSymbol, {\n      transition,\n      isReversed,\n      transitionCount,\n      transitionHeight,\n      rootRef,\n    })\n\n    const canMoveBack = computed(() => props.continuous || activeIndex.value !== 0)\n    const canMoveForward = computed(() => props.continuous || activeIndex.value !== group.items.value.length - 1)\n\n    function prev () {\n      canMoveBack.value && group.prev()\n    }\n\n    function next () {\n      canMoveForward.value && group.next()\n    }\n\n    const arrows = computed(() => {\n      const arrows = []\n\n      const prevProps = {\n        icon: isRtl.value ? props.nextIcon : props.prevIcon,\n        class: `v-window__${isRtlReverse.value ? 'right' : 'left'}`,\n        onClick: group.prev,\n        ariaLabel: t('$vuetify.carousel.prev'),\n      }\n\n      arrows.push(canMoveBack.value\n        ? slots.prev\n          ? slots.prev({ props: prevProps })\n          : <VBtn { ...prevProps } />\n        : <div />\n      )\n\n      const nextProps = {\n        icon: isRtl.value ? props.prevIcon : props.nextIcon,\n        class: `v-window__${isRtlReverse.value ? 'left' : 'right'}`,\n        onClick: group.next,\n        ariaLabel: t('$vuetify.carousel.next'),\n      }\n\n      arrows.push(canMoveForward.value\n        ? slots.next\n          ? slots.next({ props: nextProps })\n          : <VBtn { ...nextProps } />\n        : <div />\n      )\n\n      return arrows\n    })\n\n    const touchOptions = computed(() => {\n      if (props.touch === false) return props.touch\n\n      const options: TouchHandlers = {\n        left: () => {\n          isRtlReverse.value ? prev() : next()\n        },\n        right: () => {\n          isRtlReverse.value ? next() : prev()\n        },\n        start: ({ originalEvent }) => {\n          originalEvent.stopPropagation()\n        },\n      }\n\n      return {\n        ...options,\n        ...(props.touch === true ? {} : props.touch),\n      }\n    })\n\n    useRender(() => (\n      <props.tag\n        ref={ rootRef }\n        class={[\n          'v-window',\n          {\n            'v-window--show-arrows-on-hover': props.showArrows === 'hover',\n          },\n          themeClasses.value,\n        ]}\n        v-touch={ touchOptions.value }\n      >\n        <div\n          class=\"v-window__container\"\n          style={{\n            height: transitionHeight.value,\n          }}\n        >\n          { slots.default?.({ group }) }\n\n          { props.showArrows !== false && (\n            <div class=\"v-window__controls\">\n              { arrows.value }\n            </div>\n          )}\n        </div>\n\n        { slots.additional?.({ group }) }\n      </props.tag>\n    ))\n\n    return {\n      group,\n    }\n  },\n})\n\nexport type VWindow = InstanceType<typeof VWindow>\n"],"mappings":"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"}
+{"version":3,"file":"VWindow.mjs","names":["VBtn","Touch","makeComponentProps","makeTagProps","makeThemeProps","provideTheme","useGroup","useLocale","useRtl","computed","provide","ref","watch","genericComponent","propsFactory","useRender","VWindowSymbol","Symbol","for","VWindowGroupSymbol","makeVWindowProps","continuous","Boolean","nextIcon","type","String","Function","Object","default","prevIcon","reverse","showArrows","validator","v","touch","undefined","direction","modelValue","disabled","selectedClass","mandatory","VWindow","name","directives","props","emits","setup","_ref","slots","themeClasses","isRtl","t","group","rootRef","isRtlReverse","value","isReversed","transition","axis","transitionCount","transitionHeight","activeIndex","items","findIndex","item","selected","includes","id","newVal","oldVal","itemsLength","length","lastIndex","canMoveBack","canMoveForward","prev","next","arrows","prevProps","icon","class","onClick","ariaLabel","push","_createVNode","nextProps","touchOptions","options","left","right","start","_ref2","originalEvent","stopPropagation","_withDirectives","tag","style","height","additional","_resolveDirective"],"sources":["../../../src/components/VWindow/VWindow.tsx"],"sourcesContent":["// Styles\nimport './VWindow.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Directives\nimport { Touch } from '@/directives/touch'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useGroup } from '@/composables/group'\nimport { useLocale, useRtl } from '@/composables/locale'\n\n// Utilities\nimport { computed, provide, ref, watch } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { ComputedRef, InjectionKey, PropType, Ref } from 'vue'\nimport type { GroupItemProvide, GroupProvide } from '@/composables/group'\nimport type { IconValue } from '@/composables/icons'\nimport type { TouchHandlers } from '@/directives/touch'\n\nexport type VWindowSlots = {\n  default: [{ group: GroupProvide }]\n  additional: [{ group: GroupProvide }]\n  prev: [{ props: ControlProps }]\n  next: [{ props: ControlProps }]\n}\n\ntype WindowProvide = {\n  transition: ComputedRef<undefined | string>\n  transitionCount: Ref<number>\n  transitionHeight: Ref<undefined | string>\n  isReversed: Ref<boolean>\n  rootRef: Ref<HTMLElement | undefined>\n}\n\ntype ControlProps = {\n  icon: IconValue\n  class: string\n  onClick: () => void\n  ariaLabel: string\n}\n\nexport const VWindowSymbol: InjectionKey<WindowProvide> = Symbol.for('vuetify:v-window')\nexport const VWindowGroupSymbol: InjectionKey<GroupItemProvide> = Symbol.for('vuetify:v-window-group')\n\nexport const makeVWindowProps = propsFactory({\n  continuous: Boolean,\n  nextIcon: {\n    type: [Boolean, String, Function, Object] as PropType<IconValue>,\n    default: '$next',\n  },\n  prevIcon: {\n    type: [Boolean, String, Function, Object] as PropType<IconValue>,\n    default: '$prev',\n  },\n  reverse: Boolean,\n  showArrows: {\n    type: [Boolean, String],\n    validator: (v: any) => typeof v === 'boolean' || v === 'hover',\n  },\n  touch: {\n    type: [Object, Boolean] as PropType<boolean | TouchHandlers>,\n    default: undefined,\n  },\n  direction: {\n    type: String,\n    default: 'horizontal',\n  },\n\n  modelValue: null,\n  disabled: Boolean,\n  selectedClass: {\n    type: String,\n    default: 'v-window-item--active',\n  },\n  // TODO: mandatory should probably not be exposed but do this for now\n  mandatory: {\n    default: 'force' as const,\n  },\n\n  ...makeComponentProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n}, 'v-window')\n\nexport const VWindow = genericComponent<VWindowSlots>()({\n  name: 'VWindow',\n\n  directives: {\n    Touch,\n  },\n\n  props: makeVWindowProps(),\n\n  emits: {\n    'update:modelValue': (v: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { isRtl } = useRtl()\n    const { t } = useLocale()\n\n    const group = useGroup(props, VWindowGroupSymbol)\n\n    const rootRef = ref()\n    const isRtlReverse = computed(() => isRtl.value ? !props.reverse : props.reverse)\n    const isReversed = ref(false)\n    const transition = computed(() => {\n      const axis = props.direction === 'vertical' ? 'y' : 'x'\n      const reverse = isRtlReverse.value ? !isReversed.value : isReversed.value\n      const direction = reverse ? '-reverse' : ''\n\n      return `v-window-${axis}${direction}-transition`\n    })\n    const transitionCount = ref(0)\n    const transitionHeight = ref<undefined | string>(undefined)\n\n    const activeIndex = computed(() => {\n      return group.items.value.findIndex(item => group.selected.value.includes(item.id))\n    })\n\n    watch(activeIndex, (newVal, oldVal) => {\n      const itemsLength = group.items.value.length\n      const lastIndex = itemsLength - 1\n\n      if (itemsLength <= 2) {\n        isReversed.value = newVal < oldVal\n      } else if (newVal === lastIndex && oldVal === 0) {\n        isReversed.value = true\n      } else if (newVal === 0 && oldVal === lastIndex) {\n        isReversed.value = false\n      } else {\n        isReversed.value = newVal < oldVal\n      }\n    })\n\n    provide(VWindowSymbol, {\n      transition,\n      isReversed,\n      transitionCount,\n      transitionHeight,\n      rootRef,\n    })\n\n    const canMoveBack = computed(() => props.continuous || activeIndex.value !== 0)\n    const canMoveForward = computed(() => props.continuous || activeIndex.value !== group.items.value.length - 1)\n\n    function prev () {\n      canMoveBack.value && group.prev()\n    }\n\n    function next () {\n      canMoveForward.value && group.next()\n    }\n\n    const arrows = computed(() => {\n      const arrows = []\n\n      const prevProps = {\n        icon: isRtl.value ? props.nextIcon : props.prevIcon,\n        class: `v-window__${isRtlReverse.value ? 'right' : 'left'}`,\n        onClick: group.prev,\n        ariaLabel: t('$vuetify.carousel.prev'),\n      }\n\n      arrows.push(canMoveBack.value\n        ? slots.prev\n          ? slots.prev({ props: prevProps })\n          : <VBtn { ...prevProps } />\n        : <div />\n      )\n\n      const nextProps = {\n        icon: isRtl.value ? props.prevIcon : props.nextIcon,\n        class: `v-window__${isRtlReverse.value ? 'left' : 'right'}`,\n        onClick: group.next,\n        ariaLabel: t('$vuetify.carousel.next'),\n      }\n\n      arrows.push(canMoveForward.value\n        ? slots.next\n          ? slots.next({ props: nextProps })\n          : <VBtn { ...nextProps } />\n        : <div />\n      )\n\n      return arrows\n    })\n\n    const touchOptions = computed(() => {\n      if (props.touch === false) return props.touch\n\n      const options: TouchHandlers = {\n        left: () => {\n          isRtlReverse.value ? prev() : next()\n        },\n        right: () => {\n          isRtlReverse.value ? next() : prev()\n        },\n        start: ({ originalEvent }) => {\n          originalEvent.stopPropagation()\n        },\n      }\n\n      return {\n        ...options,\n        ...(props.touch === true ? {} : props.touch),\n      }\n    })\n\n    useRender(() => (\n      <props.tag\n        ref={ rootRef }\n        class={[\n          'v-window',\n          {\n            'v-window--show-arrows-on-hover': props.showArrows === 'hover',\n          },\n          themeClasses.value,\n          props.class,\n        ]}\n        style={ props.style }\n        v-touch={ touchOptions.value }\n      >\n        <div\n          class=\"v-window__container\"\n          style={{\n            height: transitionHeight.value,\n          }}\n        >\n          { slots.default?.({ group }) }\n\n          { props.showArrows !== false && (\n            <div class=\"v-window__controls\">\n              { arrows.value }\n            </div>\n          )}\n        </div>\n\n        { slots.additional?.({ group }) }\n      </props.tag>\n    ))\n\n    return {\n      group,\n    }\n  },\n})\n\nexport type VWindow = InstanceType<typeof VWindow>\n"],"mappings":"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"}

package/lib/components/VWindow/VWindowItem.mjs

@@ -1,6 +1,7 @@
 import { withDirectives as _withDirectives, createVNode as _createVNode, vShow as _vShow } from "vue";
 // Directives
 import Touch from "../../directives/touch/index.mjs"; // Composables
+import { makeComponentProps } from "../../composables/component.mjs";
 import { makeGroupItemProps, useGroupItem } from "../../composables/group.mjs";
 import { makeLazyProps, useLazy } from "../../composables/lazy.mjs";
 import { MaybeTransition } from "../../composables/transition.mjs";
@@ -22,6 +23,7 @@ export const VWindowItem = genericComponent()({
       type: [Boolean, String],
       default: undefined
     },
+    ...makeComponentProps(),
     ...makeGroupItemProps(),
     ...makeLazyProps()
   },
@@ -108,7 +110,8 @@ export const VWindowItem = genericComponent()({
       "disabled": !isBooted.value
     }, {
       default: () => [_withDirectives(_createVNode("div", {
-        "class": ['v-window-item', groupItem.selectedClass.value]
+        "class": ['v-window-item', groupItem.selectedClass.value, props.class],
+        "style": props.style
       }, [hasContent.value && slots.default?.()]), [[_vShow, groupItem.isSelected.value]])]
     }));
     return {};

package/lib/components/VWindow/VWindowItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VWindowItem.mjs","names":["Touch","makeGroupItemProps","useGroupItem","makeLazyProps","useLazy","MaybeTransition","useSsrBoot","computed","inject","nextTick","ref","convertToUnit","genericComponent","useRender","VWindowGroupSymbol","VWindowSymbol","VWindowItem","name","directives","props","reverseTransition","type","Boolean","String","default","undefined","transition","emits","val","setup","_ref","slots","window","groupItem","isBooted","Error","isTransitioning","hasTransition","isReversed","value","onAfterTransition","transitionCount","transitionHeight","onBeforeTransition","rootRef","clientHeight","onTransitionCancelled","onEnterTransition","el","onBeforeEnter","onAfterEnter","onEnterCancelled","onBeforeLeave","onAfterLeave","onLeaveCancelled","onEnter","hasContent","isSelected","_createVNode","_withDirectives","selectedClass","_vShow"],"sources":["../../../src/components/VWindow/VWindowItem.tsx"],"sourcesContent":["// Directives\nimport Touch from '@/directives/touch'\n\n// Composables\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\nimport { makeLazyProps, useLazy } from '@/composables/lazy'\nimport { MaybeTransition } from '@/composables/transition'\nimport { useSsrBoot } from '@/composables/ssrBoot'\n\n// Utilities\nimport { computed, inject, nextTick, ref } from 'vue'\nimport { convertToUnit, genericComponent, useRender } from '@/util'\n\n// Types\nimport { VWindowGroupSymbol, VWindowSymbol } from './VWindow'\n\nexport const VWindowItem = genericComponent()({\n  name: 'VWindowItem',\n\n  directives: {\n    Touch,\n  },\n\n  props: {\n    reverseTransition: {\n      type: [Boolean, String],\n      default: undefined,\n    },\n    transition: {\n      type: [Boolean, String],\n      default: undefined,\n    },\n\n    ...makeGroupItemProps(),\n    ...makeLazyProps(),\n  },\n\n  emits: {\n    'group:selected': (val: { value: boolean }) => true,\n  },\n\n  setup (props, { slots }) {\n    const window = inject(VWindowSymbol)\n    const groupItem = useGroupItem(props, VWindowGroupSymbol)\n    const { isBooted } = useSsrBoot()\n\n    if (!window || !groupItem) throw new Error('[Vuetify] VWindowItem must be used inside VWindow')\n\n    const isTransitioning = ref(false)\n    const hasTransition = computed(() => window.isReversed.value ? props.reverseTransition !== false : props.transition !== false)\n\n    function onAfterTransition () {\n      if (!isTransitioning.value || !window) {\n        return\n      }\n\n      // Finalize transition state.\n      isTransitioning.value = false\n      if (window.transitionCount.value > 0) {\n        window.transitionCount.value -= 1\n\n        // Remove container height if we are out of transition.\n        if (window.transitionCount.value === 0) {\n          window.transitionHeight.value = undefined\n        }\n      }\n    }\n\n    function onBeforeTransition () {\n      if (isTransitioning.value || !window) {\n        return\n      }\n\n      // Initialize transition state here.\n      isTransitioning.value = true\n\n      if (window.transitionCount.value === 0) {\n        // Set initial height for height transition.\n        window.transitionHeight.value = convertToUnit(window.rootRef.value?.clientHeight)\n      }\n\n      window.transitionCount.value += 1\n    }\n\n    function onTransitionCancelled () {\n      onAfterTransition() // This should have the same path as normal transition end.\n    }\n\n    function onEnterTransition (el: Element) {\n      if (!isTransitioning.value) {\n        return\n      }\n\n      nextTick(() => {\n        // Do not set height if no transition or cancelled.\n        if (!hasTransition.value || !isTransitioning.value || !window) {\n          return\n        }\n\n        // Set transition target height.\n        window.transitionHeight.value = convertToUnit(el.clientHeight)\n      })\n    }\n\n    const transition = computed(() => {\n      const name = window.isReversed.value\n        ? props.reverseTransition\n        : props.transition\n\n      return !hasTransition.value ? false : {\n        name: typeof name !== 'string' ? window.transition.value : name,\n        onBeforeEnter: onBeforeTransition,\n        onAfterEnter: onAfterTransition,\n        onEnterCancelled: onTransitionCancelled,\n        onBeforeLeave: onBeforeTransition,\n        onAfterLeave: onAfterTransition,\n        onLeaveCancelled: onTransitionCancelled,\n        onEnter: onEnterTransition,\n      }\n    })\n\n    const { hasContent } = useLazy(props, groupItem.isSelected)\n\n    useRender(() => (\n      <MaybeTransition transition={ transition.value } disabled={ !isBooted.value }>\n        <div\n          class={[\n            'v-window-item',\n            groupItem.selectedClass.value,\n          ]}\n          v-show={ groupItem.isSelected.value }\n        >\n          { hasContent.value && slots.default?.() }\n        </div>\n      </MaybeTransition>\n    ))\n\n    return {}\n  },\n})\n\nexport type VWindowItem = InstanceType<typeof VWindowItem>\n"],"mappings":"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"}
+{"version":3,"file":"VWindowItem.mjs","names":["Touch","makeComponentProps","makeGroupItemProps","useGroupItem","makeLazyProps","useLazy","MaybeTransition","useSsrBoot","computed","inject","nextTick","ref","convertToUnit","genericComponent","useRender","VWindowGroupSymbol","VWindowSymbol","VWindowItem","name","directives","props","reverseTransition","type","Boolean","String","default","undefined","transition","emits","val","setup","_ref","slots","window","groupItem","isBooted","Error","isTransitioning","hasTransition","isReversed","value","onAfterTransition","transitionCount","transitionHeight","onBeforeTransition","rootRef","clientHeight","onTransitionCancelled","onEnterTransition","el","onBeforeEnter","onAfterEnter","onEnterCancelled","onBeforeLeave","onAfterLeave","onLeaveCancelled","onEnter","hasContent","isSelected","_createVNode","_withDirectives","selectedClass","class","style","_vShow"],"sources":["../../../src/components/VWindow/VWindowItem.tsx"],"sourcesContent":["// Directives\nimport Touch from '@/directives/touch'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\nimport { makeLazyProps, useLazy } from '@/composables/lazy'\nimport { MaybeTransition } from '@/composables/transition'\nimport { useSsrBoot } from '@/composables/ssrBoot'\n\n// Utilities\nimport { computed, inject, nextTick, ref } from 'vue'\nimport { convertToUnit, genericComponent, useRender } from '@/util'\n\n// Types\nimport { VWindowGroupSymbol, VWindowSymbol } from './VWindow'\n\nexport const VWindowItem = genericComponent()({\n  name: 'VWindowItem',\n\n  directives: {\n    Touch,\n  },\n\n  props: {\n    reverseTransition: {\n      type: [Boolean, String],\n      default: undefined,\n    },\n    transition: {\n      type: [Boolean, String],\n      default: undefined,\n    },\n\n    ...makeComponentProps(),\n    ...makeGroupItemProps(),\n    ...makeLazyProps(),\n  },\n\n  emits: {\n    'group:selected': (val: { value: boolean }) => true,\n  },\n\n  setup (props, { slots }) {\n    const window = inject(VWindowSymbol)\n    const groupItem = useGroupItem(props, VWindowGroupSymbol)\n    const { isBooted } = useSsrBoot()\n\n    if (!window || !groupItem) throw new Error('[Vuetify] VWindowItem must be used inside VWindow')\n\n    const isTransitioning = ref(false)\n    const hasTransition = computed(() => window.isReversed.value ? props.reverseTransition !== false : props.transition !== false)\n\n    function onAfterTransition () {\n      if (!isTransitioning.value || !window) {\n        return\n      }\n\n      // Finalize transition state.\n      isTransitioning.value = false\n      if (window.transitionCount.value > 0) {\n        window.transitionCount.value -= 1\n\n        // Remove container height if we are out of transition.\n        if (window.transitionCount.value === 0) {\n          window.transitionHeight.value = undefined\n        }\n      }\n    }\n\n    function onBeforeTransition () {\n      if (isTransitioning.value || !window) {\n        return\n      }\n\n      // Initialize transition state here.\n      isTransitioning.value = true\n\n      if (window.transitionCount.value === 0) {\n        // Set initial height for height transition.\n        window.transitionHeight.value = convertToUnit(window.rootRef.value?.clientHeight)\n      }\n\n      window.transitionCount.value += 1\n    }\n\n    function onTransitionCancelled () {\n      onAfterTransition() // This should have the same path as normal transition end.\n    }\n\n    function onEnterTransition (el: Element) {\n      if (!isTransitioning.value) {\n        return\n      }\n\n      nextTick(() => {\n        // Do not set height if no transition or cancelled.\n        if (!hasTransition.value || !isTransitioning.value || !window) {\n          return\n        }\n\n        // Set transition target height.\n        window.transitionHeight.value = convertToUnit(el.clientHeight)\n      })\n    }\n\n    const transition = computed(() => {\n      const name = window.isReversed.value\n        ? props.reverseTransition\n        : props.transition\n\n      return !hasTransition.value ? false : {\n        name: typeof name !== 'string' ? window.transition.value : name,\n        onBeforeEnter: onBeforeTransition,\n        onAfterEnter: onAfterTransition,\n        onEnterCancelled: onTransitionCancelled,\n        onBeforeLeave: onBeforeTransition,\n        onAfterLeave: onAfterTransition,\n        onLeaveCancelled: onTransitionCancelled,\n        onEnter: onEnterTransition,\n      }\n    })\n\n    const { hasContent } = useLazy(props, groupItem.isSelected)\n\n    useRender(() => (\n      <MaybeTransition transition={ transition.value } disabled={ !isBooted.value }>\n        <div\n          class={[\n            'v-window-item',\n            groupItem.selectedClass.value,\n            props.class,\n          ]}\n          style={ props.style }\n          v-show={ groupItem.isSelected.value }\n        >\n          { hasContent.value && slots.default?.() }\n        </div>\n      </MaybeTransition>\n    ))\n\n    return {}\n  },\n})\n\nexport type VWindowItem = InstanceType<typeof VWindowItem>\n"],"mappings":"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"}