@vuetify/nightly 3.3.5-master.2023-06-21 → 3.3.5-pr-17265.042d482

package/lib/components/VVirtualScroll/VVirtualScroll.mjs

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode } from "vue";
+import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
 // Styles
 import "./VVirtualScroll.css";
 
@@ -6,14 +6,16 @@ import "./VVirtualScroll.css";
 import { VVirtualScrollItem } from "./VVirtualScrollItem.mjs"; // Composables
 import { makeComponentProps } from "../../composables/component.mjs";
 import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
+import { useToggleScope } from "../../composables/toggleScope.mjs";
 import { makeVirtualProps, useVirtual } from "../../composables/virtual.mjs"; // Utilities
-import { toRef } from 'vue';
-import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
+import { onMounted, onScopeDispose, toRef } from 'vue';
+import { convertToUnit, genericComponent, getCurrentInstance, getScrollParent, propsFactory, useRender } from "../../util/index.mjs"; // Types
 export const makeVVirtualScrollProps = propsFactory({
   items: {
     type: Array,
     default: () => []
   },
+  renderless: Boolean,
   ...makeVirtualProps(),
   ...makeComponentProps(),
   ...makeDimensionProps()
@@ -25,6 +27,7 @@ export const VVirtualScroll = genericComponent()({
     let {
       slots
     } = _ref;
+    const vm = getCurrentInstance('VVirtualScroll');
     const {
       dimensionStyles
     } = useDimension(props);
@@ -37,27 +40,50 @@ export const VVirtualScroll = genericComponent()({
       paddingBottom,
       computedItems
     } = useVirtual(props, toRef(props, 'items'));
-    useRender(() => _createVNode("div", {
-      "ref": containerRef,
-      "class": ['v-virtual-scroll', props.class],
-      "onScroll": handleScroll,
-      "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 => _createVNode(VVirtualScrollItem, {
-      "key": item.index,
-      "dynamicHeight": !props.itemHeight,
-      "onUpdate:height": height => handleItemResize(item.index, height)
-    }, {
-      default: () => [slots.default?.({
-        item: item.raw,
-        index: item.index
-      })]
-    }))])]));
+    useToggleScope(() => props.renderless, () => {
+      onMounted(() => {
+        containerRef.value = getScrollParent(vm.vnode.el, true);
+        containerRef.value?.addEventListener('scroll', handleScroll);
+      });
+      onScopeDispose(() => {
+        containerRef.value?.removeEventListener('scroll', handleScroll);
+      });
+    });
+    useRender(() => {
+      const children = computedItems.value.map(item => _createVNode(VVirtualScrollItem, {
+        "key": item.index,
+        "renderless": props.renderless,
+        "onUpdate:height": height => handleItemResize(item.index, height)
+      }, {
+        default: slotProps => slots.default?.({
+          item: item.raw,
+          index: item.index,
+          ...slotProps
+        })
+      }));
+      return props.renderless ? _createVNode(_Fragment, null, [_createVNode("div", {
+        "class": "v-virtual-scroll__spacer",
+        "style": {
+          paddingTop: convertToUnit(paddingTop.value)
+        }
+      }, null), children, _createVNode("div", {
+        "class": "v-virtual-scroll__spacer",
+        "style": {
+          paddingBottom: convertToUnit(paddingBottom.value)
+        }
+      }, null)]) : _createVNode("div", {
+        "ref": containerRef,
+        "class": ['v-virtual-scroll', props.class],
+        "onScroll": handleScroll,
+        "style": [dimensionStyles.value, props.style]
+      }, [_createVNode("div", {
+        "class": "v-virtual-scroll__container",
+        "style": {
+          paddingTop: convertToUnit(paddingTop.value),
+          paddingBottom: convertToUnit(paddingBottom.value)
+        }
+      }, [children])]);
+    });
     return {
       scrollToIndex
     };

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

@@ -1 +1 @@
-{"version":3,"file":"VVirtualScroll.mjs","names":["VVirtualScrollItem","makeComponentProps","makeDimensionProps","useDimension","makeVirtualProps","useVirtual","toRef","convertToUnit","genericComponent","propsFactory","useRender","makeVVirtualScrollProps","items","type","Array","default","VVirtualScroll","name","props","setup","_ref","slots","dimensionStyles","containerRef","handleScroll","handleItemResize","scrollToIndex","paddingTop","paddingBottom","computedItems","_createVNode","class","value","style","map","item","index","itemHeight","height","raw"],"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 { makeVirtualProps, useVirtual } from '@/composables/virtual'\n\n// Utilities\nimport { toRef } from 'vue'\nimport {\n  convertToUnit,\n  genericComponent,\n  propsFactory,\n  useRender,\n} from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { GenericProps } from '@/util'\n\nexport interface VVirtualScrollSlot<T> {\n  item: T\n  index: number\n}\n\nexport const makeVVirtualScrollProps = propsFactory({\n  items: {\n    type: Array as PropType<readonly unknown[]>,\n    default: () => ([]),\n  },\n\n  ...makeVirtualProps(),\n  ...makeComponentProps(),\n  ...makeDimensionProps(),\n}, 'VVirtualScroll')\n\nexport const VVirtualScroll = genericComponent<new <T>(\n  props: {\n    items?: readonly T[]\n  },\n  slots: {\n    default: VVirtualScrollSlot<T>\n  }\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VVirtualScroll',\n\n  props: makeVVirtualScrollProps(),\n\n  setup (props, { slots }) {\n    const { dimensionStyles } = useDimension(props)\n    const {\n      containerRef,\n      handleScroll,\n      handleItemResize,\n      scrollToIndex,\n      paddingTop,\n      paddingBottom,\n      computedItems,\n    } = useVirtual(props, toRef(props, 'items'))\n\n    useRender(() => (\n      <div\n        ref={ containerRef }\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":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB,oCAE3B;AAAA,SACSC,kBAAkB;AAAA,SAClBC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,gBAAgB,EAAEC,UAAU,yCAErC;AACA,SAASC,KAAK,QAAQ,KAAK;AAAA,SAEzBC,aAAa,EACbC,gBAAgB,EAChBC,YAAY,EACZC,SAAS,gCAGX;AASA,OAAO,MAAMC,uBAAuB,GAAGF,YAAY,CAAC;EAClDG,KAAK,EAAE;IACLC,IAAI,EAAEC,KAAqC;IAC3CC,OAAO,EAAEA,CAAA,KAAO;EAClB,CAAC;EAED,GAAGX,gBAAgB,EAAE;EACrB,GAAGH,kBAAkB,EAAE;EACvB,GAAGC,kBAAkB;AACvB,CAAC,EAAE,gBAAgB,CAAC;AAEpB,OAAO,MAAMc,cAAc,GAAGR,gBAAgB,EAOE,CAAC;EAC/CS,IAAI,EAAE,gBAAgB;EAEtBC,KAAK,EAAEP,uBAAuB,EAAE;EAEhCQ,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE;IAAgB,CAAC,GAAGnB,YAAY,CAACe,KAAK,CAAC;IAC/C,MAAM;MACJK,YAAY;MACZC,YAAY;MACZC,gBAAgB;MAChBC,aAAa;MACbC,UAAU;MACVC,aAAa;MACbC;IACF,CAAC,GAAGxB,UAAU,CAACa,KAAK,EAAEZ,KAAK,CAACY,KAAK,EAAE,OAAO,CAAC,CAAC;IAE5CR,SAAS,CAAC,MAAAoB,YAAA;MAAA,OAEAP,YAAY;MAAA,SACX,CACL,kBAAkB,EAClBL,KAAK,CAACa,KAAK,CACZ;MAAA,YACUP,YAAY;MAAA,SAChB,CACLF,eAAe,CAACU,KAAK,EACrBd,KAAK,CAACe,KAAK;IACZ,IAAAH,YAAA;MAAA,SAGO,6BAA6B;MAAA,SAC5B;QACLH,UAAU,EAAEpB,aAAa,CAACoB,UAAU,CAACK,KAAK,CAAC;QAC3CJ,aAAa,EAAErB,aAAa,CAACqB,aAAa,CAACI,KAAK;MAClD;IAAC,IAECH,aAAa,CAACG,KAAK,CAACE,GAAG,CAACC,IAAI,IAAAL,YAAA,CAAA9B,kBAAA;MAAA,OAEpBmC,IAAI,CAACC,KAAK;MAAA,iBACA,CAAClB,KAAK,CAACmB,UAAU;MAAA,mBACfC,MAAM,IAAIb,gBAAgB,CAACU,IAAI,CAACC,KAAK,EAAEE,MAAM;IAAC;MAAAvB,OAAA,EAAAA,CAAA,MAE9DM,KAAK,CAACN,OAAO,GAAG;QAAEoB,IAAI,EAAEA,IAAI,CAACI,GAAG;QAAEH,KAAK,EAAED,IAAI,CAACC;MAAM,CAAC,CAAC;IAAA,EAE3D,CAAC,IAGP,CAAC;IAEF,OAAO;MACLV;IACF,CAAC;EACH;AACF,CAAC,CAAC"}
+{"version":3,"file":"VVirtualScroll.mjs","names":["VVirtualScrollItem","makeComponentProps","makeDimensionProps","useDimension","useToggleScope","makeVirtualProps","useVirtual","onMounted","onScopeDispose","toRef","convertToUnit","genericComponent","getCurrentInstance","getScrollParent","propsFactory","useRender","makeVVirtualScrollProps","items","type","Array","default","renderless","Boolean","VVirtualScroll","name","props","setup","_ref","slots","vm","dimensionStyles","containerRef","handleScroll","handleItemResize","scrollToIndex","paddingTop","paddingBottom","computedItems","value","vnode","el","addEventListener","removeEventListener","children","map","item","_createVNode","index","height","slotProps","raw","_Fragment","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 { useToggleScope } from '@/composables/toggleScope'\nimport { makeVirtualProps, useVirtual } from '@/composables/virtual'\n\n// Utilities\nimport { onMounted, onScopeDispose, toRef } from 'vue'\nimport {\n  convertToUnit,\n  genericComponent,\n  getCurrentInstance,\n  getScrollParent,\n  propsFactory,\n  useRender,\n} from '@/util'\n\n// Types\nimport type { PropType, Ref } from 'vue'\nimport type { GenericProps } from '@/util'\n\nexport interface VVirtualScrollSlot<T> {\n  item: T\n  index: number\n}\n\nexport const makeVVirtualScrollProps = propsFactory({\n  items: {\n    type: Array as PropType<readonly unknown[]>,\n    default: () => ([]),\n  },\n  renderless: Boolean,\n\n  ...makeVirtualProps(),\n  ...makeComponentProps(),\n  ...makeDimensionProps(),\n}, 'VVirtualScroll')\n\nexport const VVirtualScroll = genericComponent<new <T, Renderless extends boolean = false>(\n  props: {\n    items?: readonly T[]\n    renderless?: Renderless\n  },\n  slots: {\n    default: VVirtualScrollSlot<T> & (Renderless extends true ? {\n      itemRef: Ref<HTMLElement | undefined>\n    } : {})\n  }\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VVirtualScroll',\n\n  props: makeVVirtualScrollProps(),\n\n  setup (props, { slots }) {\n    const vm = getCurrentInstance('VVirtualScroll')\n    const { dimensionStyles } = useDimension(props)\n    const {\n      containerRef,\n      handleScroll,\n      handleItemResize,\n      scrollToIndex,\n      paddingTop,\n      paddingBottom,\n      computedItems,\n    } = useVirtual(props, toRef(props, 'items'))\n\n    useToggleScope(() => props.renderless, () => {\n      onMounted(() => {\n        containerRef.value = getScrollParent(vm.vnode.el as HTMLElement, true)\n        containerRef.value?.addEventListener('scroll', handleScroll)\n      })\n      onScopeDispose(() => {\n        containerRef.value?.removeEventListener('scroll', handleScroll)\n      })\n    })\n\n    useRender(() => {\n      const children = computedItems.value.map(item => (\n        <VVirtualScrollItem\n          key={ item.index }\n          renderless={ props.renderless }\n          onUpdate:height={ height => handleItemResize(item.index, height) }\n        >\n          { slotProps => slots.default?.({ item: item.raw, index: item.index, ...slotProps }) }\n        </VVirtualScrollItem>\n      ))\n\n      return props.renderless ? (\n        <>\n          <div class=\"v-virtual-scroll__spacer\" style={{ paddingTop: convertToUnit(paddingTop.value) }} />\n          { children }\n          <div class=\"v-virtual-scroll__spacer\" style={{ paddingBottom: convertToUnit(paddingBottom.value) }} />\n        </>\n      ) : (\n        <div\n          ref={ containerRef }\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            { children }\n          </div>\n        </div>\n      )\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,50 +1,40 @@
-import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
 // Composables
 import { makeComponentProps } from "../../composables/component.mjs";
-import { useResizeObserver } from "../../composables/resizeObserver.mjs";
-import { useToggleScope } from "../../composables/toggleScope.mjs"; // Utilities
-import { onUpdated, watch } from 'vue';
-import { genericComponent, propsFactory, useRender } from "../../util/index.mjs";
+import { useResizeObserver } from "../../composables/resizeObserver.mjs"; // Utilities
+import { watch } from 'vue';
+import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
 export const makeVVirtualScrollItemProps = propsFactory({
-  dynamicHeight: Boolean,
   renderless: Boolean,
   ...makeComponentProps()
 }, 'VVirtualScrollItem');
 export const VVirtualScrollItem = genericComponent()({
   name: 'VVirtualScrollItem',
+  inheritAttrs: false,
   props: makeVVirtualScrollItemProps(),
   emits: {
     'update:height': height => true
   },
   setup(props, _ref) {
     let {
+      attrs,
       emit,
       slots
     } = _ref;
     const {
       resizeRef,
       contentRect
-    } = useResizeObserver();
-    useToggleScope(() => props.dynamicHeight, () => {
-      watch(() => contentRect.value?.height, height => {
-        if (height != null) emit('update:height', height);
-      });
+    } = useResizeObserver(undefined, 'border');
+    watch(() => contentRect.value?.height, height => {
+      if (height != null) emit('update:height', height);
     });
-    function updateHeight() {
-      if (props.dynamicHeight && contentRect.value) {
-        emit('update:height', contentRect.value.height);
-      }
-    }
-    onUpdated(updateHeight);
     useRender(() => props.renderless ? _createVNode(_Fragment, null, [slots.default?.({
-      props: {
-        ref: props.dynamicHeight ? resizeRef : undefined
-      }
-    })]) : _createVNode("div", {
-      "ref": props.dynamicHeight ? resizeRef : undefined,
+      itemRef: resizeRef
+    })]) : _createVNode("div", _mergeProps({
+      "ref": resizeRef,
       "class": ['v-virtual-scroll__item', props.class],
       "style": props.style
-    }, [slots.default?.()]));
+    }, attrs), [slots.default?.()]));
   }
 });
 //# sourceMappingURL=VVirtualScrollItem.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"VVirtualScrollItem.mjs","names":["makeComponentProps","useResizeObserver","useToggleScope","onUpdated","watch","genericComponent","propsFactory","useRender","makeVVirtualScrollItemProps","dynamicHeight","Boolean","renderless","VVirtualScrollItem","name","props","emits","height","setup","_ref","emit","slots","resizeRef","contentRect","value","updateHeight","_createVNode","_Fragment","default","ref","undefined","class","style"],"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 { onUpdated, watch } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVVirtualScrollItemProps = propsFactory({\n  dynamicHeight: Boolean,\n  renderless: Boolean,\n\n  ...makeComponentProps(),\n}, 'VVirtualScrollItem')\n\nexport const VVirtualScrollItem = genericComponent<{ default: { props: Record<string, any> } | void }>()({\n  name: 'VVirtualScrollItem',\n\n  props: makeVVirtualScrollItemProps(),\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(() => props.renderless ? (\n      <>\n        { slots.default?.({ props: { ref: props.dynamicHeight ? resizeRef : undefined } }) }\n      </>\n    ) : (\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;AACA,SAASC,SAAS,EAAEC,KAAK,QAAQ,KAAK;AAAA,SAC7BC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,2BAA2B,GAAGF,YAAY,CAAC;EACtDG,aAAa,EAAEC,OAAO;EACtBC,UAAU,EAAED,OAAO;EAEnB,GAAGV,kBAAkB;AACvB,CAAC,EAAE,oBAAoB,CAAC;AAExB,OAAO,MAAMY,kBAAkB,GAAGP,gBAAgB,EAAsD,CAAC;EACvGQ,IAAI,EAAE,oBAAoB;EAE1BC,KAAK,EAAEN,2BAA2B,EAAE;EAEpCO,KAAK,EAAE;IACL,eAAe,EAAGC,MAAc,IAAK;EACvC,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAAI,IAAA,EAAmB;IAAA,IAAjB;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC3B,MAAM;MAAEG,SAAS;MAAEC;IAAY,CAAC,GAAGrB,iBAAiB,EAAE;IAEtDC,cAAc,CAAC,MAAMY,KAAK,CAACL,aAAa,EAAE,MAAM;MAC9CL,KAAK,CAAC,MAAMkB,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,IAAIV,KAAK,CAACL,aAAa,IAAIa,WAAW,CAACC,KAAK,EAAE;QAC5CJ,IAAI,CAAC,eAAe,EAAEG,WAAW,CAACC,KAAK,CAACP,MAAM,CAAC;MACjD;IACF;IAEAb,SAAS,CAACqB,YAAY,CAAC;IAEvBjB,SAAS,CAAC,MAAMO,KAAK,CAACH,UAAU,GAAAc,YAAA,CAAAC,SAAA,SAE1BN,KAAK,CAACO,OAAO,GAAG;MAAEb,KAAK,EAAE;QAAEc,GAAG,EAAEd,KAAK,CAACL,aAAa,GAAGY,SAAS,GAAGQ;MAAU;IAAE,CAAC,CAAC,KAAAJ,YAAA;MAAA,OAI5EX,KAAK,CAACL,aAAa,GAAGY,SAAS,GAAGQ,SAAS;MAAA,SAC1C,CACL,wBAAwB,EACxBf,KAAK,CAACgB,KAAK,CACZ;MAAA,SACOhB,KAAK,CAACiB;IAAK,IAEjBX,KAAK,CAACO,OAAO,IAAI,EAEtB,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"VVirtualScrollItem.mjs","names":["makeComponentProps","useResizeObserver","watch","genericComponent","propsFactory","useRender","makeVVirtualScrollItemProps","renderless","Boolean","VVirtualScrollItem","name","inheritAttrs","props","emits","height","setup","_ref","attrs","emit","slots","resizeRef","contentRect","undefined","value","_createVNode","_Fragment","default","itemRef","_mergeProps","class","style"],"sources":["../../../src/components/VVirtualScroll/VVirtualScrollItem.tsx"],"sourcesContent":["// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { watch } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { Ref } from 'vue'\nimport type { GenericProps } from '@/util'\n\nexport const makeVVirtualScrollItemProps = propsFactory({\n  renderless: Boolean,\n\n  ...makeComponentProps(),\n}, 'VVirtualScrollItem')\n\nexport const VVirtualScrollItem = genericComponent<new <Renderless extends boolean = false>(\n  props: {\n    renderless?: Renderless\n  },\n  slots: {\n    default: Renderless extends true ? {\n      itemRef: Ref<HTMLElement | undefined>\n    } : never\n  }\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VVirtualScrollItem',\n\n  inheritAttrs: false,\n\n  props: makeVVirtualScrollItemProps(),\n\n  emits: {\n    'update:height': (height: number) => true,\n  },\n\n  setup (props, { attrs, emit, slots }) {\n    const { resizeRef, contentRect } = useResizeObserver(undefined, 'border')\n\n    watch(() => contentRect.value?.height, height => {\n      if (height != null) emit('update:height', height)\n    })\n\n    useRender(() => props.renderless ? (\n      <>\n        { slots.default?.({ itemRef: resizeRef }) }\n      </>\n    ) : (\n      <div\n        ref={ resizeRef }\n        class={[\n          'v-virtual-scroll__item',\n          props.class,\n        ]}\n        style={ props.style }\n        { ...attrs }\n      >\n        { (slots.default as any)?.() }\n      </div>\n    ))\n  },\n})\n"],"mappings":";AAAA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,iBAAiB,gDAE1B;AACA,SAASC,KAAK,QAAQ,KAAK;AAAA,SAClBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAElD;AAIA,OAAO,MAAMC,2BAA2B,GAAGF,YAAY,CAAC;EACtDG,UAAU,EAAEC,OAAO;EAEnB,GAAGR,kBAAkB;AACvB,CAAC,EAAE,oBAAoB,CAAC;AAExB,OAAO,MAAMS,kBAAkB,GAAGN,gBAAgB,EASF,CAAC;EAC/CO,IAAI,EAAE,oBAAoB;EAE1BC,YAAY,EAAE,KAAK;EAEnBC,KAAK,EAAEN,2BAA2B,EAAE;EAEpCO,KAAK,EAAE;IACL,eAAe,EAAGC,MAAc,IAAK;EACvC,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAAI,IAAA,EAA0B;IAAA,IAAxB;MAAEC,KAAK;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAH,IAAA;IAClC,MAAM;MAAEI,SAAS;MAAEC;IAAY,CAAC,GAAGpB,iBAAiB,CAACqB,SAAS,EAAE,QAAQ,CAAC;IAEzEpB,KAAK,CAAC,MAAMmB,WAAW,CAACE,KAAK,EAAET,MAAM,EAAEA,MAAM,IAAI;MAC/C,IAAIA,MAAM,IAAI,IAAI,EAAEI,IAAI,CAAC,eAAe,EAAEJ,MAAM,CAAC;IACnD,CAAC,CAAC;IAEFT,SAAS,CAAC,MAAMO,KAAK,CAACL,UAAU,GAAAiB,YAAA,CAAAC,SAAA,SAE1BN,KAAK,CAACO,OAAO,GAAG;MAAEC,OAAO,EAAEP;IAAU,CAAC,CAAC,KAAAI,YAAA,QAAAI,WAAA;MAAA,OAInCR,SAAS;MAAA,SACR,CACL,wBAAwB,EACxBR,KAAK,CAACiB,KAAK,CACZ;MAAA,SACOjB,KAAK,CAACkB;IAAK,GACdb,KAAK,IAEPE,KAAK,CAACO,OAAO,IAAY,EAE/B,CAAC;EACJ;AACF,CAAC,CAAC"}

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

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { ComponentPropsOptions, ExtractPropTypes, VNodeChild, VNode, PropType } from 'vue';
+import { ComponentPropsOptions, ExtractPropTypes, VNodeChild, VNode, Ref, PropType } from 'vue';
 
 type SlotsToProps<U extends RawSlots, T = MakeInternalSlots<U>> = {
     $children?: (VNodeChild | (T extends {
@@ -40,6 +40,7 @@ declare const VVirtualScroll: {
         $data: {};
         $props: {
             style?: vue.StyleValue | undefined;
+            itemHeight?: string | number | undefined;
             key?: string | number | symbol | undefined;
             height?: string | number | undefined;
             width?: string | number | undefined;
@@ -89,7 +90,6 @@ declare const VVirtualScroll: {
             }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>) => void)[] | undefined;
-            itemHeight?: string | number | undefined;
         };
         $attrs: {
             [x: string]: unknown;
@@ -98,7 +98,9 @@ declare const VVirtualScroll: {
             [x: string]: unknown;
         };
         $slots: Readonly<{
-            default?: ((arg: VVirtualScrollSlot<unknown>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            default?: ((arg: VVirtualScrollSlot<unknown> | (VVirtualScrollSlot<unknown> & {
+                itemRef: Ref<HTMLElement | undefined>;
+            })) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[]) | undefined;
         }>;
@@ -108,6 +110,7 @@ declare const VVirtualScroll: {
         $el: any;
         $options: vue.ComponentOptionsBase<{
             style: vue.StyleValue;
+            itemHeight: string | number;
         } & {
             height?: string | number | undefined;
             width?: string | number | undefined;
@@ -116,13 +119,15 @@ declare const VVirtualScroll: {
             minHeight?: string | number | undefined;
             minWidth?: string | number | undefined;
             class?: any;
-            itemHeight?: string | number | undefined;
         }, {
             scrollToIndex: (index: number) => void;
-        }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slot:default" | "items" | "v-slots">, string, {
+        }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slot:default" | "items" | "v-slots" | "renderless">, string, {
             style: vue.StyleValue;
+            itemHeight: string | number;
         }, {}, string, vue.SlotsType<Partial<{
-            default: (arg: VVirtualScrollSlot<unknown>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            default: (arg: VVirtualScrollSlot<unknown> | (VVirtualScrollSlot<unknown> & {
+                itemRef: Ref<HTMLElement | undefined>;
+            })) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[];
         }>>> & {
@@ -147,6 +152,7 @@ declare const VVirtualScroll: {
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
     } & {
         style: vue.StyleValue;
+        itemHeight: string | number;
     } & {
         height?: string | number | undefined;
         width?: string | number | undefined;
@@ -155,7 +161,6 @@ declare const VVirtualScroll: {
         minHeight?: string | number | undefined;
         minWidth?: string | number | undefined;
         class?: any;
-        itemHeight?: string | number | undefined;
     } & vue.ShallowUnwrapRef<{
         scrollToIndex: (index: number) => void;
     }> & {} & vue.ComponentCustomProperties & {};
@@ -164,6 +169,7 @@ declare const VVirtualScroll: {
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
     style: vue.StyleValue;
+    itemHeight: string | number;
 } & {
     height?: string | number | undefined;
     width?: string | number | undefined;
@@ -172,23 +178,31 @@ declare const VVirtualScroll: {
     minHeight?: string | number | undefined;
     minWidth?: string | number | undefined;
     class?: any;
-    itemHeight?: string | number | undefined;
 }, {
     scrollToIndex: (index: number) => void;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slot:default" | "items" | "v-slots">, string, {
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slot:default" | "items" | "v-slots" | "renderless">, string, {
     style: vue.StyleValue;
+    itemHeight: string | number;
 }, {}, string, vue.SlotsType<Partial<{
-    default: (arg: VVirtualScrollSlot<unknown>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    default: (arg: VVirtualScrollSlot<unknown> | (VVirtualScrollSlot<unknown> & {
+        itemRef: Ref<HTMLElement | undefined>;
+    })) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
-}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T_1>(props: {
+}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T_1, Renderless extends boolean = false>(props: {
     items?: readonly T_1[] | undefined;
+    renderless?: Renderless | undefined;
 }, slots: {
-    default: VVirtualScrollSlot<T_1>;
+    default: VVirtualScrollSlot<T_1> & (Renderless extends true ? {
+        itemRef: Ref<HTMLElement | undefined>;
+    } : {});
 }) => GenericProps<{
     items?: readonly T_1[] | undefined;
+    renderless?: Renderless | undefined;
 }, {
-    default: VVirtualScrollSlot<T_1>;
+    default: VVirtualScrollSlot<T_1> & (Renderless extends true ? {
+        itemRef: Ref<HTMLElement | undefined>;
+    } : {});
 }>) & FilterPropsOptions<{
     height: (StringConstructor | NumberConstructor)[];
     maxHeight: (StringConstructor | NumberConstructor)[];
@@ -201,11 +215,15 @@ declare const VVirtualScroll: {
         type: PropType<vue.StyleValue>;
         default: null;
     };
-    itemHeight: (StringConstructor | NumberConstructor)[];
+    itemHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
     items: {
         type: PropType<readonly unknown[]>;
         default: () => never[];
     };
+    renderless: BooleanConstructor;
 }, vue.ExtractPropTypes<{
     height: (StringConstructor | NumberConstructor)[];
     maxHeight: (StringConstructor | NumberConstructor)[];
@@ -218,11 +236,15 @@ declare const VVirtualScroll: {
         type: PropType<vue.StyleValue>;
         default: null;
     };
-    itemHeight: (StringConstructor | NumberConstructor)[];
+    itemHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
     items: {
         type: PropType<readonly unknown[]>;
         default: () => never[];
     };
+    renderless: BooleanConstructor;
 }>>;
 type VVirtualScroll = InstanceType<typeof VVirtualScroll>;
 

package/lib/components/index.d.mts

@@ -55166,6 +55166,7 @@ declare const VVirtualScroll: {
         $data: {};
         $props: {
             style?: vue.StyleValue | undefined;
+            itemHeight?: string | number | undefined;
             key?: string | number | symbol | undefined;
             height?: string | number | undefined;
             width?: string | number | undefined;
@@ -55215,7 +55216,6 @@ declare const VVirtualScroll: {
             }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>) => void)[] | undefined;
-            itemHeight?: string | number | undefined;
         };
         $attrs: {
             [x: string]: unknown;
@@ -55224,7 +55224,9 @@ declare const VVirtualScroll: {
             [x: string]: unknown;
         };
         $slots: Readonly<{
-            default?: ((arg: VVirtualScrollSlot<unknown>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            default?: ((arg: VVirtualScrollSlot<unknown> | (VVirtualScrollSlot<unknown> & {
+                itemRef: Ref<HTMLElement | undefined>;
+            })) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[]) | undefined;
         }>;
@@ -55234,6 +55236,7 @@ declare const VVirtualScroll: {
         $el: any;
         $options: vue.ComponentOptionsBase<{
             style: vue.StyleValue;
+            itemHeight: string | number;
         } & {
             height?: string | number | undefined;
             width?: string | number | undefined;
@@ -55242,13 +55245,15 @@ declare const VVirtualScroll: {
             minHeight?: string | number | undefined;
             minWidth?: string | number | undefined;
             class?: any;
-            itemHeight?: string | number | undefined;
         }, {
             scrollToIndex: (index: number) => void;
-        }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slot:default" | "items" | "v-slots">, string, {
+        }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slot:default" | "items" | "v-slots" | "renderless">, string, {
             style: vue.StyleValue;
+            itemHeight: string | number;
         }, {}, string, vue.SlotsType<Partial<{
-            default: (arg: VVirtualScrollSlot<unknown>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            default: (arg: VVirtualScrollSlot<unknown> | (VVirtualScrollSlot<unknown> & {
+                itemRef: Ref<HTMLElement | undefined>;
+            })) => vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>[];
         }>>> & {
@@ -55273,6 +55278,7 @@ declare const VVirtualScroll: {
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
     } & {
         style: vue.StyleValue;
+        itemHeight: string | number;
     } & {
         height?: string | number | undefined;
         width?: string | number | undefined;
@@ -55281,7 +55287,6 @@ declare const VVirtualScroll: {
         minHeight?: string | number | undefined;
         minWidth?: string | number | undefined;
         class?: any;
-        itemHeight?: string | number | undefined;
     } & vue.ShallowUnwrapRef<{
         scrollToIndex: (index: number) => void;
     }> & {} & vue.ComponentCustomProperties & {};
@@ -55290,6 +55295,7 @@ declare const VVirtualScroll: {
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
     style: vue.StyleValue;
+    itemHeight: string | number;
 } & {
     height?: string | number | undefined;
     width?: string | number | undefined;
@@ -55298,23 +55304,31 @@ declare const VVirtualScroll: {
     minHeight?: string | number | undefined;
     minWidth?: string | number | undefined;
     class?: any;
-    itemHeight?: string | number | undefined;
 }, {
     scrollToIndex: (index: number) => void;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slot:default" | "items" | "v-slots">, string, {
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slot:default" | "items" | "v-slots" | "renderless">, string, {
     style: vue.StyleValue;
+    itemHeight: string | number;
 }, {}, string, vue.SlotsType<Partial<{
-    default: (arg: VVirtualScrollSlot<unknown>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    default: (arg: VVirtualScrollSlot<unknown> | (VVirtualScrollSlot<unknown> & {
+        itemRef: Ref<HTMLElement | undefined>;
+    })) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];
-}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T_1>(props: {
+}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T_1, Renderless extends boolean = false>(props: {
     items?: readonly T_1[] | undefined;
+    renderless?: Renderless | undefined;
 }, slots: {
-    default: VVirtualScrollSlot<T_1>;
+    default: VVirtualScrollSlot<T_1> & (Renderless extends true ? {
+        itemRef: Ref<HTMLElement | undefined>;
+    } : {});
 }) => GenericProps<{
     items?: readonly T_1[] | undefined;
+    renderless?: Renderless | undefined;
 }, {
-    default: VVirtualScrollSlot<T_1>;
+    default: VVirtualScrollSlot<T_1> & (Renderless extends true ? {
+        itemRef: Ref<HTMLElement | undefined>;
+    } : {});
 }>) & FilterPropsOptions<{
     height: (StringConstructor | NumberConstructor)[];
     maxHeight: (StringConstructor | NumberConstructor)[];
@@ -55327,11 +55341,15 @@ declare const VVirtualScroll: {
         type: PropType<vue.StyleValue>;
         default: null;
     };
-    itemHeight: (StringConstructor | NumberConstructor)[];
+    itemHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
     items: {
         type: PropType<readonly unknown[]>;
         default: () => never[];
     };
+    renderless: BooleanConstructor;
 }, vue.ExtractPropTypes<{
     height: (StringConstructor | NumberConstructor)[];
     maxHeight: (StringConstructor | NumberConstructor)[];
@@ -55344,11 +55362,15 @@ declare const VVirtualScroll: {
         type: PropType<vue.StyleValue>;
         default: null;
     };
-    itemHeight: (StringConstructor | NumberConstructor)[];
+    itemHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
     items: {
         type: PropType<readonly unknown[]>;
         default: () => never[];
     };
+    renderless: BooleanConstructor;
 }>>;
 type VVirtualScroll = InstanceType<typeof VVirtualScroll>;
 

package/lib/composables/filter.mjs

@@ -72,8 +72,6 @@ export function useFilter(props, items, query, options) {
   const filteredMatches = ref(new Map());
   const transformedItems = computed(() => options?.transform ? unref(items).map(options?.transform) : unref(items));
   watchEffect(() => {
-    filteredItems.value = [];
-    filteredMatches.value = new Map();
     const results = filterItems(transformedItems.value, strQuery.value, {
       customKeyFilter: props.customKeyFilter,
       default: props.customFilter,
@@ -82,15 +80,19 @@ export function useFilter(props, items, query, options) {
       noFilter: props.noFilter
     });
     const originalItems = unref(items);
+    const _filteredItems = [];
+    const _filteredMatches = new Map();
     results.forEach(_ref => {
       let {
         index,
         matches
       } = _ref;
       const item = originalItems[index];
-      filteredItems.value.push(item);
-      filteredMatches.value.set(item.value, matches);
+      _filteredItems.push(item);
+      _filteredMatches.set(item.value, matches);
     });
+    filteredItems.value = _filteredItems;
+    filteredMatches.value = _filteredMatches;
   });
   function getMatches(item) {
     return filteredMatches.value.get(item.value);

package/lib/composables/filter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"filter.mjs","names":["computed","ref","unref","watchEffect","getPropertyFromItem","propsFactory","wrapInArray","defaultFilter","value","query","item","toString","toLocaleLowerCase","indexOf","makeFilterProps","customFilter","Function","customKeyFilter","Object","filterKeys","Array","String","filterMode","type","default","noFilter","Boolean","filterItems","items","options","array","filter","keys","customFiltersLength","length","loop","i","customMatches","defaultMatches","match","key","keyFilter","title","defaultMatchesLength","customMatchesLength","push","index","matches","useFilter","props","strQuery","filteredItems","filteredMatches","Map","transformedItems","transform","map","results","originalItems","forEach","_ref","set","getMatches","get"],"sources":["../../src/composables/filter.ts"],"sourcesContent":["/* eslint-disable max-statements */\n/* eslint-disable no-labels */\n\n// Utilities\nimport { computed, ref, unref, watchEffect } from 'vue'\nimport { getPropertyFromItem, propsFactory, wrapInArray } from '@/util'\n\n// Types\nimport type { PropType, Ref } from 'vue'\nimport type { MaybeRef } from '@/util'\n\n/**\n * - match without highlight\n * - single match (index), length already known\n * - single match (start, end)\n * - multiple matches (start, end), probably shouldn't overlap\n */\nexport type FilterMatch = boolean | number | [number, number] | [number, number][]\nexport type FilterFunction = (value: string, query: string, item?: any) => FilterMatch\nexport type FilterKeyFunctions = Record<string, FilterFunction>\nexport type FilterKeys = string | string[]\nexport type FilterMode = 'some' | 'every' | 'union' | 'intersection'\n\nexport interface FilterProps {\n  customFilter?: FilterFunction\n  customKeyFilter?: FilterKeyFunctions\n  filterKeys?: FilterKeys\n  filterMode?: FilterMode\n  noFilter?: boolean\n}\n\n// Composables\nexport const defaultFilter: FilterFunction = (value, query, item) => {\n  if (value == null || query == null) return -1\n\n  return value.toString().toLocaleLowerCase().indexOf(query.toString().toLocaleLowerCase())\n}\n\nexport const makeFilterProps = propsFactory({\n  customFilter: Function as PropType<FilterFunction>,\n  customKeyFilter: Object as PropType<FilterKeyFunctions>,\n  filterKeys: [Array, String] as PropType<FilterKeys>,\n  filterMode: {\n    type: String as PropType<FilterMode>,\n    default: 'intersection',\n  },\n  noFilter: Boolean,\n}, 'filter')\n\nexport function filterItems (\n  items: any[],\n  query: string,\n  options?: {\n    customKeyFilter?: FilterKeyFunctions\n    default?: FilterFunction\n    filterKeys?: FilterKeys\n    filterMode?: FilterMode\n    noFilter?: boolean\n  },\n) {\n  const array: { index: number, matches: Record<string, FilterMatch> }[] = []\n  // always ensure we fall back to a functioning filter\n  const filter = options?.default ?? defaultFilter\n  const keys = options?.filterKeys ? wrapInArray(options.filterKeys) : false\n  const customFiltersLength = Object.keys(options?.customKeyFilter ?? {}).length\n\n  if (!items?.length) return array\n\n  loop:\n  for (let i = 0; i < items.length; i++) {\n    const item = items[i]\n    const customMatches: Record<string, FilterMatch> = {}\n    const defaultMatches: Record<string, FilterMatch> = {}\n    let match: FilterMatch = -1\n\n    if (query && !options?.noFilter) {\n      if (typeof item === 'object') {\n        const filterKeys = keys || Object.keys(item)\n\n        for (const key of filterKeys) {\n          const value = getPropertyFromItem(item as any, key, item)\n          const keyFilter = options?.customKeyFilter?.[key]\n\n          match = keyFilter\n            ? keyFilter(value, query, item)\n            : filter(value, query, item)\n\n          if (match !== -1 && match !== false) {\n            if (keyFilter) customMatches[key] = match\n            else defaultMatches[key] = match\n          } else if (options?.filterMode === 'every') {\n            continue loop\n          }\n        }\n      } else {\n        match = filter(item, query, item)\n        if (match !== -1 && match !== false) {\n          defaultMatches.title = match\n        }\n      }\n\n      const defaultMatchesLength = Object.keys(defaultMatches).length\n      const customMatchesLength = Object.keys(customMatches).length\n\n      if (!defaultMatchesLength && !customMatchesLength) continue\n\n      if (\n        options?.filterMode === 'union' &&\n        customMatchesLength !== customFiltersLength &&\n        !defaultMatchesLength\n      ) continue\n\n      if (\n        options?.filterMode === 'intersection' &&\n        (\n          customMatchesLength !== customFiltersLength ||\n          !defaultMatchesLength\n        )\n      ) continue\n    }\n\n    array.push({ index: i, matches: { ...defaultMatches, ...customMatches } })\n  }\n\n  return array\n}\n\nexport function useFilter <T extends { value: unknown }> (\n  props: FilterProps,\n  items: MaybeRef<T[]>,\n  query: Ref<string | undefined>,\n  options?: {\n    transform?: (item: T) => any\n  }\n) {\n  const strQuery = computed(() => (\n    typeof query?.value !== 'string' &&\n    typeof query?.value !== 'number'\n  ) ? '' : String(query.value))\n\n  const filteredItems: Ref<T[]> = ref([])\n  const filteredMatches: Ref<Map<unknown, Record<string, FilterMatch>>> = ref(new Map())\n  const transformedItems = computed(() => options?.transform ? unref(items).map(options?.transform) : unref(items))\n\n  watchEffect(() => {\n    filteredItems.value = []\n    filteredMatches.value = new Map()\n\n    const results = filterItems(\n      transformedItems.value,\n      strQuery.value,\n      {\n        customKeyFilter: props.customKeyFilter,\n        default: props.customFilter,\n        filterKeys: props.filterKeys,\n        filterMode: props.filterMode,\n        noFilter: props.noFilter,\n      },\n    )\n\n    const originalItems = unref(items)\n\n    results.forEach(({ index, matches }) => {\n      const item = originalItems[index]\n      filteredItems.value.push(item)\n      filteredMatches.value.set(item.value, matches)\n    })\n  })\n\n  function getMatches (item: T) {\n    return filteredMatches.value.get(item.value)\n  }\n\n  return { filteredItems, filteredMatches, getMatches }\n}\n"],"mappings":"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"}
+{"version":3,"file":"filter.mjs","names":["computed","ref","unref","watchEffect","getPropertyFromItem","propsFactory","wrapInArray","defaultFilter","value","query","item","toString","toLocaleLowerCase","indexOf","makeFilterProps","customFilter","Function","customKeyFilter","Object","filterKeys","Array","String","filterMode","type","default","noFilter","Boolean","filterItems","items","options","array","filter","keys","customFiltersLength","length","loop","i","customMatches","defaultMatches","match","key","keyFilter","title","defaultMatchesLength","customMatchesLength","push","index","matches","useFilter","props","strQuery","filteredItems","filteredMatches","Map","transformedItems","transform","map","results","originalItems","_filteredItems","_filteredMatches","forEach","_ref","set","getMatches","get"],"sources":["../../src/composables/filter.ts"],"sourcesContent":["/* eslint-disable max-statements */\n/* eslint-disable no-labels */\n\n// Utilities\nimport { computed, ref, unref, watchEffect } from 'vue'\nimport { getPropertyFromItem, propsFactory, wrapInArray } from '@/util'\n\n// Types\nimport type { PropType, Ref } from 'vue'\nimport type { MaybeRef } from '@/util'\n\n/**\n * - match without highlight\n * - single match (index), length already known\n * - single match (start, end)\n * - multiple matches (start, end), probably shouldn't overlap\n */\nexport type FilterMatch = boolean | number | [number, number] | [number, number][]\nexport type FilterFunction = (value: string, query: string, item?: any) => FilterMatch\nexport type FilterKeyFunctions = Record<string, FilterFunction>\nexport type FilterKeys = string | string[]\nexport type FilterMode = 'some' | 'every' | 'union' | 'intersection'\n\nexport interface FilterProps {\n  customFilter?: FilterFunction\n  customKeyFilter?: FilterKeyFunctions\n  filterKeys?: FilterKeys\n  filterMode?: FilterMode\n  noFilter?: boolean\n}\n\n// Composables\nexport const defaultFilter: FilterFunction = (value, query, item) => {\n  if (value == null || query == null) return -1\n\n  return value.toString().toLocaleLowerCase().indexOf(query.toString().toLocaleLowerCase())\n}\n\nexport const makeFilterProps = propsFactory({\n  customFilter: Function as PropType<FilterFunction>,\n  customKeyFilter: Object as PropType<FilterKeyFunctions>,\n  filterKeys: [Array, String] as PropType<FilterKeys>,\n  filterMode: {\n    type: String as PropType<FilterMode>,\n    default: 'intersection',\n  },\n  noFilter: Boolean,\n}, 'filter')\n\nexport function filterItems (\n  items: any[],\n  query: string,\n  options?: {\n    customKeyFilter?: FilterKeyFunctions\n    default?: FilterFunction\n    filterKeys?: FilterKeys\n    filterMode?: FilterMode\n    noFilter?: boolean\n  },\n) {\n  const array: { index: number, matches: Record<string, FilterMatch> }[] = []\n  // always ensure we fall back to a functioning filter\n  const filter = options?.default ?? defaultFilter\n  const keys = options?.filterKeys ? wrapInArray(options.filterKeys) : false\n  const customFiltersLength = Object.keys(options?.customKeyFilter ?? {}).length\n\n  if (!items?.length) return array\n\n  loop:\n  for (let i = 0; i < items.length; i++) {\n    const item = items[i]\n    const customMatches: Record<string, FilterMatch> = {}\n    const defaultMatches: Record<string, FilterMatch> = {}\n    let match: FilterMatch = -1\n\n    if (query && !options?.noFilter) {\n      if (typeof item === 'object') {\n        const filterKeys = keys || Object.keys(item)\n\n        for (const key of filterKeys) {\n          const value = getPropertyFromItem(item as any, key, item)\n          const keyFilter = options?.customKeyFilter?.[key]\n\n          match = keyFilter\n            ? keyFilter(value, query, item)\n            : filter(value, query, item)\n\n          if (match !== -1 && match !== false) {\n            if (keyFilter) customMatches[key] = match\n            else defaultMatches[key] = match\n          } else if (options?.filterMode === 'every') {\n            continue loop\n          }\n        }\n      } else {\n        match = filter(item, query, item)\n        if (match !== -1 && match !== false) {\n          defaultMatches.title = match\n        }\n      }\n\n      const defaultMatchesLength = Object.keys(defaultMatches).length\n      const customMatchesLength = Object.keys(customMatches).length\n\n      if (!defaultMatchesLength && !customMatchesLength) continue\n\n      if (\n        options?.filterMode === 'union' &&\n        customMatchesLength !== customFiltersLength &&\n        !defaultMatchesLength\n      ) continue\n\n      if (\n        options?.filterMode === 'intersection' &&\n        (\n          customMatchesLength !== customFiltersLength ||\n          !defaultMatchesLength\n        )\n      ) continue\n    }\n\n    array.push({ index: i, matches: { ...defaultMatches, ...customMatches } })\n  }\n\n  return array\n}\n\nexport function useFilter <T extends { value: unknown }> (\n  props: FilterProps,\n  items: MaybeRef<T[]>,\n  query: Ref<string | undefined>,\n  options?: {\n    transform?: (item: T) => any\n  }\n) {\n  const strQuery = computed(() => (\n    typeof query?.value !== 'string' &&\n    typeof query?.value !== 'number'\n  ) ? '' : String(query.value))\n\n  const filteredItems: Ref<T[]> = ref([])\n  const filteredMatches: Ref<Map<unknown, Record<string, FilterMatch>>> = ref(new Map())\n  const transformedItems = computed(() => options?.transform ? unref(items).map(options?.transform) : unref(items))\n\n  watchEffect(() => {\n    const results = filterItems(\n      transformedItems.value,\n      strQuery.value,\n      {\n        customKeyFilter: props.customKeyFilter,\n        default: props.customFilter,\n        filterKeys: props.filterKeys,\n        filterMode: props.filterMode,\n        noFilter: props.noFilter,\n      },\n    )\n\n    const originalItems = unref(items)\n\n    const _filteredItems: typeof filteredItems['value'] = []\n    const _filteredMatches: typeof filteredMatches['value'] = new Map()\n    results.forEach(({ index, matches }) => {\n      const item = originalItems[index]\n      _filteredItems.push(item)\n      _filteredMatches.set(item.value, matches)\n    })\n    filteredItems.value = _filteredItems\n    filteredMatches.value = _filteredMatches\n  })\n\n  function getMatches (item: T) {\n    return filteredMatches.value.get(item.value)\n  }\n\n  return { filteredItems, filteredMatches, getMatches }\n}\n"],"mappings":"AAAA;AACA;;AAEA;AACA,SAASA,QAAQ,EAAEC,GAAG,EAAEC,KAAK,EAAEC,WAAW,QAAQ,KAAK;AAAA,SAC9CC,mBAAmB,EAAEC,YAAY,EAAEC,WAAW,6BAEvD;AAwBA;AACA,OAAO,MAAMC,aAA6B,GAAGA,CAACC,KAAK,EAAEC,KAAK,EAAEC,IAAI,KAAK;EACnE,IAAIF,KAAK,IAAI,IAAI,IAAIC,KAAK,IAAI,IAAI,EAAE,OAAO,CAAC,CAAC;EAE7C,OAAOD,KAAK,CAACG,QAAQ,EAAE,CAACC,iBAAiB,EAAE,CAACC,OAAO,CAACJ,KAAK,CAACE,QAAQ,EAAE,CAACC,iBAAiB,EAAE,CAAC;AAC3F,CAAC;AAED,OAAO,MAAME,eAAe,GAAGT,YAAY,CAAC;EAC1CU,YAAY,EAAEC,QAAoC;EAClDC,eAAe,EAAEC,MAAsC;EACvDC,UAAU,EAAE,CAACC,KAAK,EAAEC,MAAM,CAAyB;EACnDC,UAAU,EAAE;IACVC,IAAI,EAAEF,MAA8B;IACpCG,OAAO,EAAE;EACX,CAAC;EACDC,QAAQ,EAAEC;AACZ,CAAC,EAAE,QAAQ,CAAC;AAEZ,OAAO,SAASC,WAAWA,CACzBC,KAAY,EACZnB,KAAa,EACboB,OAMC,EACD;EACA,MAAMC,KAAgE,GAAG,EAAE;EAC3E;EACA,MAAMC,MAAM,GAAGF,OAAO,EAAEL,OAAO,IAAIjB,aAAa;EAChD,MAAMyB,IAAI,GAAGH,OAAO,EAAEV,UAAU,GAAGb,WAAW,CAACuB,OAAO,CAACV,UAAU,CAAC,GAAG,KAAK;EAC1E,MAAMc,mBAAmB,GAAGf,MAAM,CAACc,IAAI,CAACH,OAAO,EAAEZ,eAAe,IAAI,CAAC,CAAC,CAAC,CAACiB,MAAM;EAE9E,IAAI,CAACN,KAAK,EAAEM,MAAM,EAAE,OAAOJ,KAAK;EAEhCK,IAAI,EACJ,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGR,KAAK,CAACM,MAAM,EAAEE,CAAC,EAAE,EAAE;IACrC,MAAM1B,IAAI,GAAGkB,KAAK,CAACQ,CAAC,CAAC;IACrB,MAAMC,aAA0C,GAAG,CAAC,CAAC;IACrD,MAAMC,cAA2C,GAAG,CAAC,CAAC;IACtD,IAAIC,KAAkB,GAAG,CAAC,CAAC;IAE3B,IAAI9B,KAAK,IAAI,CAACoB,OAAO,EAAEJ,QAAQ,EAAE;MAC/B,IAAI,OAAOf,IAAI,KAAK,QAAQ,EAAE;QAC5B,MAAMS,UAAU,GAAGa,IAAI,IAAId,MAAM,CAACc,IAAI,CAACtB,IAAI,CAAC;QAE5C,KAAK,MAAM8B,GAAG,IAAIrB,UAAU,EAAE;UAC5B,MAAMX,KAAK,GAAGJ,mBAAmB,CAACM,IAAI,EAAS8B,GAAG,EAAE9B,IAAI,CAAC;UACzD,MAAM+B,SAAS,GAAGZ,OAAO,EAAEZ,eAAe,GAAGuB,GAAG,CAAC;UAEjDD,KAAK,GAAGE,SAAS,GACbA,SAAS,CAACjC,KAAK,EAAEC,KAAK,EAAEC,IAAI,CAAC,GAC7BqB,MAAM,CAACvB,KAAK,EAAEC,KAAK,EAAEC,IAAI,CAAC;UAE9B,IAAI6B,KAAK,KAAK,CAAC,CAAC,IAAIA,KAAK,KAAK,KAAK,EAAE;YACnC,IAAIE,SAAS,EAAEJ,aAAa,CAACG,GAAG,CAAC,GAAGD,KAAK,MACpCD,cAAc,CAACE,GAAG,CAAC,GAAGD,KAAK;UAClC,CAAC,MAAM,IAAIV,OAAO,EAAEP,UAAU,KAAK,OAAO,EAAE;YAC1C,SAASa,IAAI;UACf;QACF;MACF,CAAC,MAAM;QACLI,KAAK,GAAGR,MAAM,CAACrB,IAAI,EAAED,KAAK,EAAEC,IAAI,CAAC;QACjC,IAAI6B,KAAK,KAAK,CAAC,CAAC,IAAIA,KAAK,KAAK,KAAK,EAAE;UACnCD,cAAc,CAACI,KAAK,GAAGH,KAAK;QAC9B;MACF;MAEA,MAAMI,oBAAoB,GAAGzB,MAAM,CAACc,IAAI,CAACM,cAAc,CAAC,CAACJ,MAAM;MAC/D,MAAMU,mBAAmB,GAAG1B,MAAM,CAACc,IAAI,CAACK,aAAa,CAAC,CAACH,MAAM;MAE7D,IAAI,CAACS,oBAAoB,IAAI,CAACC,mBAAmB,EAAE;MAEnD,IACEf,OAAO,EAAEP,UAAU,KAAK,OAAO,IAC/BsB,mBAAmB,KAAKX,mBAAmB,IAC3C,CAACU,oBAAoB,EACrB;MAEF,IACEd,OAAO,EAAEP,UAAU,KAAK,cAAc,KAEpCsB,mBAAmB,KAAKX,mBAAmB,IAC3C,CAACU,oBAAoB,CACtB,EACD;IACJ;IAEAb,KAAK,CAACe,IAAI,CAAC;MAAEC,KAAK,EAAEV,CAAC;MAAEW,OAAO,EAAE;QAAE,GAAGT,cAAc;QAAE,GAAGD;MAAc;IAAE,CAAC,CAAC;EAC5E;EAEA,OAAOP,KAAK;AACd;AAEA,OAAO,SAASkB,SAASA,CACvBC,KAAkB,EAClBrB,KAAoB,EACpBnB,KAA8B,EAC9BoB,OAEC,EACD;EACA,MAAMqB,QAAQ,GAAGlD,QAAQ,CAAC,MACxB,OAAOS,KAAK,EAAED,KAAK,KAAK,QAAQ,IAChC,OAAOC,KAAK,EAAED,KAAK,KAAK,QAAQ,GAC9B,EAAE,GAAGa,MAAM,CAACZ,KAAK,CAACD,KAAK,CAAC,CAAC;EAE7B,MAAM2C,aAAuB,GAAGlD,GAAG,CAAC,EAAE,CAAC;EACvC,MAAMmD,eAA+D,GAAGnD,GAAG,CAAC,IAAIoD,GAAG,EAAE,CAAC;EACtF,MAAMC,gBAAgB,GAAGtD,QAAQ,CAAC,MAAM6B,OAAO,EAAE0B,SAAS,GAAGrD,KAAK,CAAC0B,KAAK,CAAC,CAAC4B,GAAG,CAAC3B,OAAO,EAAE0B,SAAS,CAAC,GAAGrD,KAAK,CAAC0B,KAAK,CAAC,CAAC;EAEjHzB,WAAW,CAAC,MAAM;IAChB,MAAMsD,OAAO,GAAG9B,WAAW,CACzB2B,gBAAgB,CAAC9C,KAAK,EACtB0C,QAAQ,CAAC1C,KAAK,EACd;MACES,eAAe,EAAEgC,KAAK,CAAChC,eAAe;MACtCO,OAAO,EAAEyB,KAAK,CAAClC,YAAY;MAC3BI,UAAU,EAAE8B,KAAK,CAAC9B,UAAU;MAC5BG,UAAU,EAAE2B,KAAK,CAAC3B,UAAU;MAC5BG,QAAQ,EAAEwB,KAAK,CAACxB;IAClB,CAAC,CACF;IAED,MAAMiC,aAAa,GAAGxD,KAAK,CAAC0B,KAAK,CAAC;IAElC,MAAM+B,cAA6C,GAAG,EAAE;IACxD,MAAMC,gBAAiD,GAAG,IAAIP,GAAG,EAAE;IACnEI,OAAO,CAACI,OAAO,CAACC,IAAA,IAAwB;MAAA,IAAvB;QAAEhB,KAAK;QAAEC;MAAQ,CAAC,GAAAe,IAAA;MACjC,MAAMpD,IAAI,GAAGgD,aAAa,CAACZ,KAAK,CAAC;MACjCa,cAAc,CAACd,IAAI,CAACnC,IAAI,CAAC;MACzBkD,gBAAgB,CAACG,GAAG,CAACrD,IAAI,CAACF,KAAK,EAAEuC,OAAO,CAAC;IAC3C,CAAC,CAAC;IACFI,aAAa,CAAC3C,KAAK,GAAGmD,cAAc;IACpCP,eAAe,CAAC5C,KAAK,GAAGoD,gBAAgB;EAC1C,CAAC,CAAC;EAEF,SAASI,UAAUA,CAAEtD,IAAO,EAAE;IAC5B,OAAO0C,eAAe,CAAC5C,KAAK,CAACyD,GAAG,CAACvD,IAAI,CAACF,KAAK,CAAC;EAC9C;EAEA,OAAO;IAAE2C,aAAa;IAAEC,eAAe;IAAEY;EAAW,CAAC;AACvD"}

package/lib/composables/resizeObserver.mjs

@@ -3,13 +3,18 @@ import { onBeforeUnmount, readonly, ref, watch } from 'vue';
 import { refElement } from "../util/index.mjs";
 import { IN_BROWSER } from "../util/globals.mjs"; // Types
 export function useResizeObserver(callback) {
+  let box = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'content';
   const resizeRef = ref();
   const contentRect = ref();
   if (IN_BROWSER) {
     const observer = new ResizeObserver(entries => {
       callback?.(entries, observer);
       if (!entries.length) return;
-      contentRect.value = entries[0].contentRect;
+      if (box === 'content') {
+        contentRect.value = entries[0].contentRect;
+      } else {
+        contentRect.value = entries[0].target.getBoundingClientRect();
+      }
     });
     onBeforeUnmount(() => {
       observer.disconnect();