vuetify 3.2.2 → 3.2.3

package/lib/labs/VInfiniteScroll/VInfiniteScroll.mjs

@@ -7,9 +7,39 @@ import { VBtn } from "../../components/VBtn/index.mjs";
 import { VProgressCircular } from "../../components/VProgressCircular/index.mjs"; // Composables
 import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
 import { useIntersectionObserver } from "../../composables/intersectionObserver.mjs";
-import { useLocale } from "../../composables/locale.mjs"; // Utilities
+import { useLocale } from "../../composables/locale.mjs";
+import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
-import { convertToUnit, defineComponent, genericComponent, useRender } from "../../util/index.mjs"; // Types
+import { convertToUnit, defineComponent, genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
+export const makeVInfiniteScrollProps = propsFactory({
+  color: String,
+  direction: {
+    type: String,
+    default: 'vertical',
+    validator: v => ['vertical', 'horizontal'].includes(v)
+  },
+  side: {
+    type: String,
+    default: 'end',
+    validator: v => ['start', 'end', 'both'].includes(v)
+  },
+  mode: {
+    type: String,
+    default: 'intersect',
+    validator: v => ['intersect', 'manual'].includes(v)
+  },
+  margin: [Number, String],
+  loadMoreText: {
+    type: String,
+    default: '$vuetify.infiniteScroll.loadMore'
+  },
+  emptyText: {
+    type: String,
+    default: '$vuetify.infiniteScroll.empty'
+  },
+  ...makeDimensionProps(),
+  ...makeTagProps()
+}, 'v-infinite-scroll');
 export const VInfiniteScrollIntersect = defineComponent({
   name: 'VInfiniteScrollIntersect',
   props: {
@@ -46,34 +76,7 @@ export const VInfiniteScrollIntersect = defineComponent({
 });
 export const VInfiniteScroll = genericComponent()({
   name: 'VInfiniteScroll',
-  props: {
-    color: String,
-    direction: {
-      type: String,
-      default: 'vertical',
-      validator: v => ['vertical', 'horizontal'].includes(v)
-    },
-    side: {
-      type: String,
-      default: 'end',
-      validator: v => ['start', 'end', 'both'].includes(v)
-    },
-    mode: {
-      type: String,
-      default: 'intersect',
-      validator: v => ['intersect', 'manual'].includes(v)
-    },
-    margin: [Number, String],
-    loadMoreText: {
-      type: String,
-      default: '$vuetify.infiniteScroll.loadMore'
-    },
-    emptyText: {
-      type: String,
-      default: '$vuetify.infiniteScroll.empty'
-    },
-    ...makeDimensionProps()
-  },
+  props: makeVInfiniteScrollProps(),
   emits: {
     load: options => true
   },
@@ -182,33 +185,36 @@ export const VInfiniteScroll = genericComponent()({
       dimensionStyles
     } = useDimension(props);
     useRender(() => {
+      const Tag = props.tag;
       const hasStartIntersect = props.side === 'start' || props.side === 'both';
       const hasEndIntersect = props.side === 'end' || props.side === 'both';
       const intersectMode = props.mode === 'intersect';
-      return _createVNode("div", {
+      return _createVNode(Tag, {
         "ref": rootEl,
         "class": ['v-infinite-scroll', `v-infinite-scroll--${props.direction}`, {
           'v-infinite-scroll--start': hasStartIntersect,
           'v-infinite-scroll--end': hasEndIntersect
         }],
         "style": dimensionStyles.value
-      }, [_createVNode("div", {
-        "class": "v-infinite-scroll__side"
-      }, [renderSide('start', startStatus.value)]), rootEl.value && hasStartIntersect && intersectMode && _createVNode(VInfiniteScrollIntersect, {
-        "key": "start",
-        "side": "start",
-        "onIntersect": handleIntersect,
-        "rootRef": rootEl.value,
-        "rootMargin": margin.value
-      }, null), slots.default?.(), rootEl.value && hasEndIntersect && intersectMode && _createVNode(VInfiniteScrollIntersect, {
-        "key": "end",
-        "side": "end",
-        "onIntersect": handleIntersect,
-        "rootRef": rootEl.value,
-        "rootMargin": margin.value
-      }, null), _createVNode("div", {
-        "class": "v-infinite-scroll__side"
-      }, [renderSide('end', endStatus.value)])]);
+      }, {
+        default: () => [_createVNode("div", {
+          "class": "v-infinite-scroll__side"
+        }, [renderSide('start', startStatus.value)]), rootEl.value && hasStartIntersect && intersectMode && _createVNode(VInfiniteScrollIntersect, {
+          "key": "start",
+          "side": "start",
+          "onIntersect": handleIntersect,
+          "rootRef": rootEl.value,
+          "rootMargin": margin.value
+        }, null), slots.default?.(), rootEl.value && hasEndIntersect && intersectMode && _createVNode(VInfiniteScrollIntersect, {
+          "key": "end",
+          "side": "end",
+          "onIntersect": handleIntersect,
+          "rootRef": rootEl.value,
+          "rootMargin": margin.value
+        }, null), _createVNode("div", {
+          "class": "v-infinite-scroll__side"
+        }, [renderSide('end', endStatus.value)])]
+      });
     });
   }
 });

package/lib/labs/VInfiniteScroll/VInfiniteScroll.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VInfiniteScroll.mjs","names":["VBtn","VProgressCircular","makeDimensionProps","useDimension","useIntersectionObserver","useLocale","computed","nextTick","onMounted","ref","watch","convertToUnit","defineComponent","genericComponent","useRender","VInfiniteScrollIntersect","name","props","side","type","String","required","rootRef","rootMargin","emits","intersect","setup","_ref","emit","intersectionRef","isIntersecting","entries","root","undefined","val","_createVNode","_createTextVNode","VInfiniteScroll","color","direction","default","validator","v","includes","mode","margin","Number","loadMoreText","emptyText","load","options","_ref2","slots","rootEl","startStatus","endStatus","setScrollAmount","amount","value","property","getScrollAmount","getScrollSize","getContainerSize","setStatus","status","getStatus","previousScrollSize","handleIntersect","done","t","renderSide","onClick","slotProps","error","empty","loading","dimensionStyles","hasStartIntersect","hasEndIntersect","intersectMode"],"sources":["../../../src/labs/VInfiniteScroll/VInfiniteScroll.tsx"],"sourcesContent":["// Styles\nimport './VInfiniteScroll.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VProgressCircular } from '@/components/VProgressCircular'\n\n// Composables\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { useIntersectionObserver } from '@/composables/intersectionObserver'\nimport { useLocale } from '@/composables/locale'\n\n// Utilities\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport { convertToUnit, defineComponent, genericComponent, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport type InfiniteScrollSide = 'start' | 'end' | 'both'\nexport type InfiniteScrollStatus = 'ok' | 'empty' | 'loading' | 'error'\n\ntype InfiniteScrollSlot = {\n  side: InfiniteScrollSide\n  props: {\n    onClick: () => (side: InfiniteScrollSide) => void\n    color: string | undefined\n  }\n}\n\ntype VInfiniteScrollSlots = {\n  default: [InfiniteScrollSlot]\n  loading: [InfiniteScrollSlot]\n  error: [InfiniteScrollSlot]\n  empty: [InfiniteScrollSlot]\n  'load-more': [InfiniteScrollSlot]\n}\n\nexport const VInfiniteScrollIntersect = defineComponent({\n  name: 'VInfiniteScrollIntersect',\n\n  props: {\n    side: {\n      type: String as PropType<InfiniteScrollSide>,\n      required: true,\n    },\n    rootRef: null,\n    rootMargin: String,\n  },\n\n  emits: {\n    intersect: (side: InfiniteScrollSide) => true,\n  },\n\n  setup (props, { emit }) {\n    const { intersectionRef, isIntersecting } = useIntersectionObserver(entries => {\n    }, props.rootMargin ? {\n      root: props.rootRef,\n      rootMargin: props.rootMargin,\n    } : undefined)\n\n    watch(isIntersecting, async val => {\n      if (val) emit('intersect', props.side)\n    })\n\n    useRender(() => (\n      <div class=\"v-infinite-scroll-intersect\" ref={ intersectionRef }>&nbsp;</div>\n    ))\n\n    return {}\n  },\n})\n\nexport const VInfiniteScroll = genericComponent<VInfiniteScrollSlots>()({\n  name: 'VInfiniteScroll',\n\n  props: {\n    color: String,\n    direction: {\n      type: String as PropType<'vertical' | 'horizontal'>,\n      default: 'vertical',\n      validator: (v: any) => ['vertical', 'horizontal'].includes(v),\n    },\n    side: {\n      type: String as PropType<InfiniteScrollSide>,\n      default: 'end',\n      validator: (v: any) => ['start', 'end', 'both'].includes(v),\n    },\n    mode: {\n      type: String as PropType<'intersect' | 'manual'>,\n      default: 'intersect',\n      validator: (v: any) => ['intersect', 'manual'].includes(v),\n    },\n    margin: [Number, String],\n    loadMoreText: {\n      type: String,\n      default: '$vuetify.infiniteScroll.loadMore',\n    },\n    emptyText: {\n      type: String,\n      default: '$vuetify.infiniteScroll.empty',\n    },\n\n    ...makeDimensionProps(),\n  },\n\n  emits: {\n    load: (options: { side: InfiniteScrollSide, done: (status: InfiniteScrollStatus) => void }) => true,\n  },\n\n  setup (props, { slots, emit }) {\n    const rootEl = ref<HTMLDivElement>()\n    const startStatus = ref<InfiniteScrollStatus>('ok')\n    const endStatus = ref<InfiniteScrollStatus>('ok')\n    const margin = computed(() => convertToUnit(props.margin))\n\n    function setScrollAmount (amount: number) {\n      if (!rootEl.value) return\n\n      const property = props.direction === 'vertical' ? 'scrollTop' : 'scrollLeft'\n      rootEl.value[property] = amount\n    }\n\n    function getScrollAmount () {\n      if (!rootEl.value) return 0\n\n      const property = props.direction === 'vertical' ? 'scrollTop' : 'scrollLeft'\n      return rootEl.value[property]\n    }\n\n    function getScrollSize () {\n      if (!rootEl.value) return 0\n\n      const property = props.direction === 'vertical' ? 'scrollHeight' : 'scrollWidth'\n      return rootEl.value[property]\n    }\n\n    function getContainerSize () {\n      if (!rootEl.value) return 0\n\n      const property = props.direction === 'vertical' ? 'clientHeight' : 'clientWidth'\n      return rootEl.value[property]\n    }\n\n    onMounted(() => {\n      if (!rootEl.value) return\n\n      if (props.side === 'start') {\n        setScrollAmount(getScrollSize())\n      } else if (props.side === 'both') {\n        setScrollAmount(getScrollSize() / 2 - getContainerSize() / 2)\n      }\n    })\n\n    function setStatus (side: InfiniteScrollSide, status: InfiniteScrollStatus) {\n      if (side === 'start') {\n        startStatus.value = status\n      } else if (side === 'end') {\n        endStatus.value = status\n      }\n    }\n\n    function getStatus (side: string) {\n      return side === 'start' ? startStatus.value : endStatus.value\n    }\n\n    let previousScrollSize = 0\n    function handleIntersect (side: InfiniteScrollSide) {\n      const status = getStatus(side)\n      if (!rootEl.value || status === 'loading') return\n\n      previousScrollSize = getScrollSize()\n      setStatus(side, 'loading')\n\n      function done (status: InfiniteScrollStatus) {\n        setStatus(side, status)\n\n        nextTick(() => {\n          if (status === 'ok' && side === 'start') {\n            setScrollAmount(getScrollSize() - previousScrollSize + getScrollAmount())\n          }\n        })\n      }\n\n      emit('load', { side, done })\n    }\n\n    const { t } = useLocale()\n\n    function renderSide (side: InfiniteScrollSide, status: InfiniteScrollStatus) {\n      if (props.side !== side && props.side !== 'both') return\n\n      const onClick = () => handleIntersect(side)\n      const slotProps = { side, props: { onClick, color: props.color } }\n\n      if (status === 'error') return slots.error?.(slotProps)\n\n      if (status === 'empty') return slots.empty?.(slotProps) ?? <div>{ t(props.emptyText) }</div>\n\n      if (props.mode === 'manual') {\n        if (status === 'loading') {\n          return slots.loading?.(slotProps) ?? (\n            <VProgressCircular indeterminate color={ props.color } />\n          )\n        }\n\n        return slots['load-more']?.(slotProps) ?? (\n          <VBtn variant=\"outlined\" color={ props.color } onClick={ onClick }>\n            { t(props.loadMoreText) }\n          </VBtn>\n        )\n      }\n\n      return slots.loading?.(slotProps) ?? (\n        <VProgressCircular indeterminate color={ props.color } />\n      )\n    }\n\n    const { dimensionStyles } = useDimension(props)\n\n    useRender(() => {\n      const hasStartIntersect = props.side === 'start' || props.side === 'both'\n      const hasEndIntersect = props.side === 'end' || props.side === 'both'\n      const intersectMode = props.mode === 'intersect'\n\n      return (\n        <div\n          ref={ rootEl }\n          class={[\n            'v-infinite-scroll',\n            `v-infinite-scroll--${props.direction}`,\n            {\n              'v-infinite-scroll--start': hasStartIntersect,\n              'v-infinite-scroll--end': hasEndIntersect,\n            },\n          ]}\n          style={ dimensionStyles.value }\n        >\n          <div class=\"v-infinite-scroll__side\">\n            { renderSide('start', startStatus.value) }\n          </div>\n\n          { rootEl.value && hasStartIntersect && intersectMode && (\n            <VInfiniteScrollIntersect\n              key=\"start\"\n              side=\"start\"\n              onIntersect={ handleIntersect }\n              rootRef={ rootEl.value }\n              rootMargin={ margin.value }\n            />\n          )}\n\n          { slots.default?.() }\n\n          { rootEl.value && hasEndIntersect && intersectMode && (\n            <VInfiniteScrollIntersect\n              key=\"end\"\n              side=\"end\"\n              onIntersect={ handleIntersect }\n              rootRef={ rootEl.value }\n              rootMargin={ margin.value }\n            />\n          )}\n\n          <div class=\"v-infinite-scroll__side\">\n            { renderSide('end', endStatus.value) }\n          </div>\n        </div>\n      )\n    })\n  },\n})\n\nexport type VInfiniteScroll = InstanceType<typeof VInfiniteScroll>\n"],"mappings":"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"}
+{"version":3,"file":"VInfiniteScroll.mjs","names":["VBtn","VProgressCircular","makeDimensionProps","useDimension","useIntersectionObserver","useLocale","makeTagProps","computed","nextTick","onMounted","ref","watch","convertToUnit","defineComponent","genericComponent","propsFactory","useRender","makeVInfiniteScrollProps","color","String","direction","type","default","validator","v","includes","side","mode","margin","Number","loadMoreText","emptyText","VInfiniteScrollIntersect","name","props","required","rootRef","rootMargin","emits","intersect","setup","_ref","emit","intersectionRef","isIntersecting","entries","root","undefined","val","_createVNode","_createTextVNode","VInfiniteScroll","load","options","_ref2","slots","rootEl","startStatus","endStatus","setScrollAmount","amount","value","property","getScrollAmount","getScrollSize","getContainerSize","setStatus","status","getStatus","previousScrollSize","handleIntersect","done","t","renderSide","onClick","slotProps","error","empty","loading","dimensionStyles","Tag","tag","hasStartIntersect","hasEndIntersect","intersectMode"],"sources":["../../../src/labs/VInfiniteScroll/VInfiniteScroll.tsx"],"sourcesContent":["// Styles\nimport './VInfiniteScroll.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VProgressCircular } from '@/components/VProgressCircular'\n\n// Composables\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { useIntersectionObserver } from '@/composables/intersectionObserver'\nimport { useLocale } from '@/composables/locale'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport { convertToUnit, defineComponent, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport type InfiniteScrollSide = 'start' | 'end' | 'both'\nexport type InfiniteScrollStatus = 'ok' | 'empty' | 'loading' | 'error'\n\ntype InfiniteScrollSlot = {\n  side: InfiniteScrollSide\n  props: {\n    onClick: () => (side: InfiniteScrollSide) => void\n    color: string | undefined\n  }\n}\n\ntype VInfiniteScrollSlots = {\n  default: [InfiniteScrollSlot]\n  loading: [InfiniteScrollSlot]\n  error: [InfiniteScrollSlot]\n  empty: [InfiniteScrollSlot]\n  'load-more': [InfiniteScrollSlot]\n}\n\nexport const makeVInfiniteScrollProps = propsFactory({\n  color: String,\n  direction: {\n    type: String as PropType<'vertical' | 'horizontal'>,\n    default: 'vertical',\n    validator: (v: any) => ['vertical', 'horizontal'].includes(v),\n  },\n  side: {\n    type: String as PropType<InfiniteScrollSide>,\n    default: 'end',\n    validator: (v: any) => ['start', 'end', 'both'].includes(v),\n  },\n  mode: {\n    type: String as PropType<'intersect' | 'manual'>,\n    default: 'intersect',\n    validator: (v: any) => ['intersect', 'manual'].includes(v),\n  },\n  margin: [Number, String],\n  loadMoreText: {\n    type: String,\n    default: '$vuetify.infiniteScroll.loadMore',\n  },\n  emptyText: {\n    type: String,\n    default: '$vuetify.infiniteScroll.empty',\n  },\n\n  ...makeDimensionProps(),\n  ...makeTagProps(),\n}, 'v-infinite-scroll')\n\nexport const VInfiniteScrollIntersect = defineComponent({\n  name: 'VInfiniteScrollIntersect',\n\n  props: {\n    side: {\n      type: String as PropType<InfiniteScrollSide>,\n      required: true,\n    },\n    rootRef: null,\n    rootMargin: String,\n  },\n\n  emits: {\n    intersect: (side: InfiniteScrollSide) => true,\n  },\n\n  setup (props, { emit }) {\n    const { intersectionRef, isIntersecting } = useIntersectionObserver(entries => {\n    }, props.rootMargin ? {\n      root: props.rootRef,\n      rootMargin: props.rootMargin,\n    } : undefined)\n\n    watch(isIntersecting, async val => {\n      if (val) emit('intersect', props.side)\n    })\n\n    useRender(() => (\n      <div class=\"v-infinite-scroll-intersect\" ref={ intersectionRef }>&nbsp;</div>\n    ))\n\n    return {}\n  },\n})\n\nexport const VInfiniteScroll = genericComponent<VInfiniteScrollSlots>()({\n  name: 'VInfiniteScroll',\n\n  props: makeVInfiniteScrollProps(),\n\n  emits: {\n    load: (options: { side: InfiniteScrollSide, done: (status: InfiniteScrollStatus) => void }) => true,\n  },\n\n  setup (props, { slots, emit }) {\n    const rootEl = ref<HTMLDivElement>()\n    const startStatus = ref<InfiniteScrollStatus>('ok')\n    const endStatus = ref<InfiniteScrollStatus>('ok')\n    const margin = computed(() => convertToUnit(props.margin))\n\n    function setScrollAmount (amount: number) {\n      if (!rootEl.value) return\n\n      const property = props.direction === 'vertical' ? 'scrollTop' : 'scrollLeft'\n      rootEl.value[property] = amount\n    }\n\n    function getScrollAmount () {\n      if (!rootEl.value) return 0\n\n      const property = props.direction === 'vertical' ? 'scrollTop' : 'scrollLeft'\n      return rootEl.value[property]\n    }\n\n    function getScrollSize () {\n      if (!rootEl.value) return 0\n\n      const property = props.direction === 'vertical' ? 'scrollHeight' : 'scrollWidth'\n      return rootEl.value[property]\n    }\n\n    function getContainerSize () {\n      if (!rootEl.value) return 0\n\n      const property = props.direction === 'vertical' ? 'clientHeight' : 'clientWidth'\n      return rootEl.value[property]\n    }\n\n    onMounted(() => {\n      if (!rootEl.value) return\n\n      if (props.side === 'start') {\n        setScrollAmount(getScrollSize())\n      } else if (props.side === 'both') {\n        setScrollAmount(getScrollSize() / 2 - getContainerSize() / 2)\n      }\n    })\n\n    function setStatus (side: InfiniteScrollSide, status: InfiniteScrollStatus) {\n      if (side === 'start') {\n        startStatus.value = status\n      } else if (side === 'end') {\n        endStatus.value = status\n      }\n    }\n\n    function getStatus (side: string) {\n      return side === 'start' ? startStatus.value : endStatus.value\n    }\n\n    let previousScrollSize = 0\n    function handleIntersect (side: InfiniteScrollSide) {\n      const status = getStatus(side)\n      if (!rootEl.value || status === 'loading') return\n\n      previousScrollSize = getScrollSize()\n      setStatus(side, 'loading')\n\n      function done (status: InfiniteScrollStatus) {\n        setStatus(side, status)\n\n        nextTick(() => {\n          if (status === 'ok' && side === 'start') {\n            setScrollAmount(getScrollSize() - previousScrollSize + getScrollAmount())\n          }\n        })\n      }\n\n      emit('load', { side, done })\n    }\n\n    const { t } = useLocale()\n\n    function renderSide (side: InfiniteScrollSide, status: InfiniteScrollStatus) {\n      if (props.side !== side && props.side !== 'both') return\n\n      const onClick = () => handleIntersect(side)\n      const slotProps = { side, props: { onClick, color: props.color } }\n\n      if (status === 'error') return slots.error?.(slotProps)\n\n      if (status === 'empty') return slots.empty?.(slotProps) ?? <div>{ t(props.emptyText) }</div>\n\n      if (props.mode === 'manual') {\n        if (status === 'loading') {\n          return slots.loading?.(slotProps) ?? (\n            <VProgressCircular indeterminate color={ props.color } />\n          )\n        }\n\n        return slots['load-more']?.(slotProps) ?? (\n          <VBtn variant=\"outlined\" color={ props.color } onClick={ onClick }>\n            { t(props.loadMoreText) }\n          </VBtn>\n        )\n      }\n\n      return slots.loading?.(slotProps) ?? (\n        <VProgressCircular indeterminate color={ props.color } />\n      )\n    }\n\n    const { dimensionStyles } = useDimension(props)\n\n    useRender(() => {\n      const Tag = props.tag\n      const hasStartIntersect = props.side === 'start' || props.side === 'both'\n      const hasEndIntersect = props.side === 'end' || props.side === 'both'\n      const intersectMode = props.mode === 'intersect'\n\n      return (\n        <Tag\n          ref={ rootEl }\n          class={[\n            'v-infinite-scroll',\n            `v-infinite-scroll--${props.direction}`,\n            {\n              'v-infinite-scroll--start': hasStartIntersect,\n              'v-infinite-scroll--end': hasEndIntersect,\n            },\n          ]}\n          style={ dimensionStyles.value }\n        >\n          <div class=\"v-infinite-scroll__side\">\n            { renderSide('start', startStatus.value) }\n          </div>\n\n          { rootEl.value && hasStartIntersect && intersectMode && (\n            <VInfiniteScrollIntersect\n              key=\"start\"\n              side=\"start\"\n              onIntersect={ handleIntersect }\n              rootRef={ rootEl.value }\n              rootMargin={ margin.value }\n            />\n          )}\n\n          { slots.default?.() }\n\n          { rootEl.value && hasEndIntersect && intersectMode && (\n            <VInfiniteScrollIntersect\n              key=\"end\"\n              side=\"end\"\n              onIntersect={ handleIntersect }\n              rootRef={ rootEl.value }\n              rootMargin={ margin.value }\n            />\n          )}\n\n          <div class=\"v-infinite-scroll__side\">\n            { renderSide('end', endStatus.value) }\n          </div>\n        </Tag>\n      )\n    })\n  },\n})\n\nexport type VInfiniteScroll = InstanceType<typeof VInfiniteScroll>\n"],"mappings":"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"}

package/lib/labs/VInfiniteScroll/index.d.ts

@@ -20,12 +20,14 @@ declare const VInfiniteScroll: {
         $data: {};
         $props: Partial<{
             direction: "horizontal" | "vertical";
+            tag: string;
             mode: "manual" | "intersect";
             side: InfiniteScrollSide;
             loadMoreText: string;
             emptyText: string;
         }> & Omit<{
             direction: "horizontal" | "vertical";
+            tag: string;
             mode: "manual" | "intersect";
             side: InfiniteScrollSide;
             loadMoreText: string;
@@ -65,7 +67,7 @@ declare const VInfiniteScroll: {
                 side: InfiniteScrollSide;
                 done: (status: InfiniteScrollStatus) => void;
             }) => any) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "direction" | "mode" | "side" | "loadMoreText" | "emptyText">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "direction" | "tag" | "mode" | "side" | "loadMoreText" | "emptyText">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -84,6 +86,7 @@ declare const VInfiniteScroll: {
         $el: any;
         $options: vue.ComponentOptionsBase<{
             direction: "horizontal" | "vertical";
+            tag: string;
             mode: "manual" | "intersect";
             side: InfiniteScrollSide;
             loadMoreText: string;
@@ -130,6 +133,7 @@ declare const VInfiniteScroll: {
             }) => true;
         }, string, {
             direction: "horizontal" | "vertical";
+            tag: string;
             mode: "manual" | "intersect";
             side: InfiniteScrollSide;
             loadMoreText: string;
@@ -156,6 +160,7 @@ declare const VInfiniteScroll: {
         $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;
     } & {
         direction: "horizontal" | "vertical";
+        tag: string;
         mode: "manual" | "intersect";
         side: InfiniteScrollSide;
         loadMoreText: string;
@@ -201,6 +206,7 @@ declare const VInfiniteScroll: {
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
     direction: "horizontal" | "vertical";
+    tag: string;
     mode: "manual" | "intersect";
     side: InfiniteScrollSide;
     loadMoreText: string;
@@ -247,11 +253,16 @@ declare const VInfiniteScroll: {
     }) => true;
 }, string, {
     direction: "horizontal" | "vertical";
+    tag: string;
     mode: "manual" | "intersect";
     side: InfiniteScrollSide;
     loadMoreText: string;
     emptyText: string;
 }, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
     height: (StringConstructor | NumberConstructor)[];
     maxHeight: (StringConstructor | NumberConstructor)[];
     maxWidth: (StringConstructor | NumberConstructor)[];
@@ -284,6 +295,10 @@ declare const VInfiniteScroll: {
         default: string;
     };
 }, vue.ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
     height: (StringConstructor | NumberConstructor)[];
     maxHeight: (StringConstructor | NumberConstructor)[];
     maxWidth: (StringConstructor | NumberConstructor)[];

package/lib/labs/VSkeletonLoader/VSkeletonLoader.mjs

@@ -9,7 +9,7 @@ import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
 import { useBackgroundColor } from "../../composables/color.mjs";
 import { useLocale } from "../../composables/locale.mjs"; // Utilities
 import { computed, toRef } from 'vue';
-import { genericComponent, useRender, wrapInArray } from "../../util/index.mjs"; // Types
+import { genericComponent, propsFactory, useRender, wrapInArray } from "../../util/index.mjs"; // Types
 export const rootTypes = {
   actions: 'button@2',
   article: 'heading, paragraph',
@@ -84,24 +84,25 @@ function mapBones(bones) {
   // Remove spaces and return array of structures
   return bones.replace(/\s/g, '').split(',').map(genStructure);
 }
+export const makeVSkeletonLoaderProps = propsFactory({
+  boilerplate: Boolean,
+  color: String,
+  loading: Boolean,
+  loadingText: {
+    type: String,
+    default: '$vuetify.loading'
+  },
+  type: {
+    type: [String, Array],
+    default: 'image'
+  },
+  ...makeDimensionProps(),
+  ...makeElevationProps(),
+  ...makeThemeProps()
+}, 'v-skeleton-loader');
 export const VSkeletonLoader = genericComponent()({
   name: 'VSkeletonLoader',
-  props: {
-    boilerplate: Boolean,
-    color: String,
-    loading: Boolean,
-    loadingText: {
-      type: String,
-      default: '$vuetify.loading'
-    },
-    type: {
-      type: [String, Array],
-      default: 'image'
-    },
-    ...makeDimensionProps(),
-    ...makeElevationProps(),
-    ...makeThemeProps()
-  },
+  props: makeVSkeletonLoaderProps(),
   setup(props, _ref) {
     let {
       slots

package/lib/labs/VSkeletonLoader/VSkeletonLoader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VSkeletonLoader.mjs","names":["makeDimensionProps","useDimension","makeElevationProps","useElevation","makeThemeProps","provideTheme","useBackgroundColor","useLocale","computed","toRef","genericComponent","useRender","wrapInArray","rootTypes","actions","article","avatar","button","card","chip","divider","heading","image","paragraph","sentences","subtitle","table","text","genBone","type","children","arguments","length","undefined","_createVNode","genBones","bone","split","Array","from","map","genStructure","includes","mapBones","push","bones","replace","VSkeletonLoader","name","props","boilerplate","Boolean","color","String","loading","loadingText","default","setup","_ref","slots","backgroundColorClasses","backgroundColorStyles","dimensionStyles","elevationClasses","themeClasses","t","items","join","isLoading","value"],"sources":["../../../src/labs/VSkeletonLoader/VSkeletonLoader.tsx"],"sourcesContent":["// Styles\nimport './VSkeletonLoader.sass'\n\n// Composables\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useLocale } from '@/composables/locale'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, useRender, wrapInArray } from '@/util'\n\n// Types\nimport type { PropType, VNode } from 'vue'\n\ntype VSkeletonBone<T> = T | VSkeletonBone<T>[]\n\nexport type VSkeletonBones = VSkeletonBone<VNode>\nexport type VSkeletonLoaderType = keyof typeof rootTypes\nexport type VSkeletonLoaderSlots = {\n  default: []\n}\n\nexport const rootTypes = {\n  actions: 'button@2',\n  article: 'heading, paragraph',\n  avatar: 'avatar',\n  button: 'button',\n  card: 'image, heading',\n  'card-avatar': 'image, list-item-avatar',\n  chip: 'chip',\n  'date-picker': 'list-item, heading, divider, date-picker-options, date-picker-days, actions',\n  'date-picker-options': 'text, avatar@2',\n  'date-picker-days': 'avatar@28',\n  divider: 'divider',\n  heading: 'heading',\n  image: 'image',\n  'list-item': 'text',\n  'list-item-avatar': 'avatar, text',\n  'list-item-two-line': 'sentences',\n  'list-item-avatar-two-line': 'avatar, sentences',\n  'list-item-three-line': 'paragraph',\n  'list-item-avatar-three-line': 'avatar, paragraph',\n  paragraph: 'text@3',\n  sentences: 'text@2',\n  subtitle: 'text',\n  table: 'table-heading, table-thead, table-tbody, table-tfoot',\n  'table-heading': 'chip, text',\n  'table-thead': 'heading@6',\n  'table-tbody': 'table-row-divider@6',\n  'table-row-divider': 'table-row, divider',\n  'table-row': 'text@6',\n  'table-tfoot': 'text@2, avatar@2',\n  text: 'text',\n} as const\n\nfunction genBone (type: string, children: VSkeletonBones = []) {\n  return (\n    <div\n      class={[\n        'v-skeleton-loader__bone',\n        `v-skeleton-loader__${type}`,\n      ]}\n    >\n      { children }\n    </div>\n  )\n}\n\nfunction genBones (bone: string) {\n  // e.g. 'text@3'\n  const [type, length] = bone.split('@') as [VSkeletonLoaderType, number]\n\n  // Generate a length array based upon\n  // value after @ in the bone string\n  return Array.from({ length }).map(() => genStructure(type))\n}\n\nfunction genStructure (type?: string): VSkeletonBones {\n  let children: VSkeletonBones = []\n\n  if (!type) return children\n\n  // TODO: figure out a better way to type this\n  const bone = (rootTypes as Record<string, string>)[type]\n\n  // End of recursion, do nothing\n  /* eslint-disable-next-line no-empty, brace-style */\n  if (type === bone) {}\n  // Array of values - e.g. 'heading, paragraph, text@2'\n  else if (type.includes(',')) return mapBones(type)\n  // Array of values - e.g. 'paragraph@4'\n  else if (type.includes('@')) return genBones(type)\n  // Array of values - e.g. 'card@2'\n  else if (bone.includes(',')) children = mapBones(bone)\n  // Array of values - e.g. 'list-item@2'\n  else if (bone.includes('@')) children = genBones(bone)\n  // Single value - e.g. 'card-heading'\n  else if (bone) children.push(genStructure(bone))\n\n  return [genBone(type, children)]\n}\n\nfunction mapBones (bones: string) {\n  // Remove spaces and return array of structures\n  return bones.replace(/\\s/g, '').split(',').map(genStructure)\n}\n\nexport const VSkeletonLoader = genericComponent<VSkeletonLoaderSlots>()({\n  name: 'VSkeletonLoader',\n\n  props: {\n    boilerplate: Boolean,\n    color: String,\n    loading: Boolean,\n    loadingText: {\n      type: String,\n      default: '$vuetify.loading',\n    },\n    type: {\n      type: [String, Array] as PropType<VSkeletonLoaderType | VSkeletonLoaderType[]>,\n      default: 'image',\n    },\n\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { themeClasses } = provideTheme(props)\n    const { t } = useLocale()\n\n    const items = computed(() => genStructure(wrapInArray(props.type).join(',')))\n\n    useRender(() => {\n      const isLoading = !slots.default || props.loading\n\n      return (\n        <div\n          class={[\n            'v-skeleton-loader',\n            {\n              'v-skeleton-loader--boilerplate': props.boilerplate,\n            },\n            themeClasses.value,\n            backgroundColorClasses.value,\n            elevationClasses.value,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            isLoading ? dimensionStyles.value : {},\n          ]}\n          aria-busy={ !props.boilerplate ? isLoading : undefined }\n          aria-live={ !props.boilerplate ? 'polite' : undefined }\n          aria-label={ !props.boilerplate ? t(props.loadingText) : undefined }\n          role={ !props.boilerplate ? 'alert' : undefined }\n        >\n          { isLoading ? items.value : slots.default?.() }\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSkeletonLoader = InstanceType<typeof VSkeletonLoader>\n"],"mappings":"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"}
+{"version":3,"file":"VSkeletonLoader.mjs","names":["makeDimensionProps","useDimension","makeElevationProps","useElevation","makeThemeProps","provideTheme","useBackgroundColor","useLocale","computed","toRef","genericComponent","propsFactory","useRender","wrapInArray","rootTypes","actions","article","avatar","button","card","chip","divider","heading","image","paragraph","sentences","subtitle","table","text","genBone","type","children","arguments","length","undefined","_createVNode","genBones","bone","split","Array","from","map","genStructure","includes","mapBones","push","bones","replace","makeVSkeletonLoaderProps","boilerplate","Boolean","color","String","loading","loadingText","default","VSkeletonLoader","name","props","setup","_ref","slots","backgroundColorClasses","backgroundColorStyles","dimensionStyles","elevationClasses","themeClasses","t","items","join","isLoading","value"],"sources":["../../../src/labs/VSkeletonLoader/VSkeletonLoader.tsx"],"sourcesContent":["// Styles\nimport './VSkeletonLoader.sass'\n\n// Composables\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useLocale } from '@/composables/locale'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender, wrapInArray } from '@/util'\n\n// Types\nimport type { PropType, VNode } from 'vue'\n\ntype VSkeletonBone<T> = T | VSkeletonBone<T>[]\n\nexport type VSkeletonBones = VSkeletonBone<VNode>\nexport type VSkeletonLoaderType = keyof typeof rootTypes\nexport type VSkeletonLoaderSlots = {\n  default: []\n}\n\nexport const rootTypes = {\n  actions: 'button@2',\n  article: 'heading, paragraph',\n  avatar: 'avatar',\n  button: 'button',\n  card: 'image, heading',\n  'card-avatar': 'image, list-item-avatar',\n  chip: 'chip',\n  'date-picker': 'list-item, heading, divider, date-picker-options, date-picker-days, actions',\n  'date-picker-options': 'text, avatar@2',\n  'date-picker-days': 'avatar@28',\n  divider: 'divider',\n  heading: 'heading',\n  image: 'image',\n  'list-item': 'text',\n  'list-item-avatar': 'avatar, text',\n  'list-item-two-line': 'sentences',\n  'list-item-avatar-two-line': 'avatar, sentences',\n  'list-item-three-line': 'paragraph',\n  'list-item-avatar-three-line': 'avatar, paragraph',\n  paragraph: 'text@3',\n  sentences: 'text@2',\n  subtitle: 'text',\n  table: 'table-heading, table-thead, table-tbody, table-tfoot',\n  'table-heading': 'chip, text',\n  'table-thead': 'heading@6',\n  'table-tbody': 'table-row-divider@6',\n  'table-row-divider': 'table-row, divider',\n  'table-row': 'text@6',\n  'table-tfoot': 'text@2, avatar@2',\n  text: 'text',\n} as const\n\nfunction genBone (type: string, children: VSkeletonBones = []) {\n  return (\n    <div\n      class={[\n        'v-skeleton-loader__bone',\n        `v-skeleton-loader__${type}`,\n      ]}\n    >\n      { children }\n    </div>\n  )\n}\n\nfunction genBones (bone: string) {\n  // e.g. 'text@3'\n  const [type, length] = bone.split('@') as [VSkeletonLoaderType, number]\n\n  // Generate a length array based upon\n  // value after @ in the bone string\n  return Array.from({ length }).map(() => genStructure(type))\n}\n\nfunction genStructure (type?: string): VSkeletonBones {\n  let children: VSkeletonBones = []\n\n  if (!type) return children\n\n  // TODO: figure out a better way to type this\n  const bone = (rootTypes as Record<string, string>)[type]\n\n  // End of recursion, do nothing\n  /* eslint-disable-next-line no-empty, brace-style */\n  if (type === bone) {}\n  // Array of values - e.g. 'heading, paragraph, text@2'\n  else if (type.includes(',')) return mapBones(type)\n  // Array of values - e.g. 'paragraph@4'\n  else if (type.includes('@')) return genBones(type)\n  // Array of values - e.g. 'card@2'\n  else if (bone.includes(',')) children = mapBones(bone)\n  // Array of values - e.g. 'list-item@2'\n  else if (bone.includes('@')) children = genBones(bone)\n  // Single value - e.g. 'card-heading'\n  else if (bone) children.push(genStructure(bone))\n\n  return [genBone(type, children)]\n}\n\nfunction mapBones (bones: string) {\n  // Remove spaces and return array of structures\n  return bones.replace(/\\s/g, '').split(',').map(genStructure)\n}\n\nexport const makeVSkeletonLoaderProps = propsFactory({\n  boilerplate: Boolean,\n  color: String,\n  loading: Boolean,\n  loadingText: {\n    type: String,\n    default: '$vuetify.loading',\n  },\n  type: {\n    type: [String, Array] as PropType<VSkeletonLoaderType | VSkeletonLoaderType[]>,\n    default: 'image',\n  },\n\n  ...makeDimensionProps(),\n  ...makeElevationProps(),\n  ...makeThemeProps(),\n}, 'v-skeleton-loader')\n\nexport const VSkeletonLoader = genericComponent<VSkeletonLoaderSlots>()({\n  name: 'VSkeletonLoader',\n\n  props: makeVSkeletonLoaderProps(),\n\n  setup (props, { slots }) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { themeClasses } = provideTheme(props)\n    const { t } = useLocale()\n\n    const items = computed(() => genStructure(wrapInArray(props.type).join(',')))\n\n    useRender(() => {\n      const isLoading = !slots.default || props.loading\n\n      return (\n        <div\n          class={[\n            'v-skeleton-loader',\n            {\n              'v-skeleton-loader--boilerplate': props.boilerplate,\n            },\n            themeClasses.value,\n            backgroundColorClasses.value,\n            elevationClasses.value,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            isLoading ? dimensionStyles.value : {},\n          ]}\n          aria-busy={ !props.boilerplate ? isLoading : undefined }\n          aria-live={ !props.boilerplate ? 'polite' : undefined }\n          aria-label={ !props.boilerplate ? t(props.loadingText) : undefined }\n          role={ !props.boilerplate ? 'alert' : undefined }\n        >\n          { isLoading ? items.value : slots.default?.() }\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSkeletonLoader = InstanceType<typeof VSkeletonLoader>\n"],"mappings":"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"}

package/lib/labs/VSkeletonLoader/index.d.ts

@@ -10,12 +10,12 @@ declare const VSkeletonLoader: {
         $: vue.ComponentInternalInstance;
         $data: {};
         $props: Partial<{
-            type: "button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "actions" | "avatar" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot" | ("button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "actions" | "avatar" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot")[];
+            type: "button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "avatar" | "actions" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot" | ("button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "avatar" | "actions" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot")[];
             loading: boolean;
             loadingText: string;
             boilerplate: boolean;
         }> & Omit<{
-            type: "button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "actions" | "avatar" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot" | ("button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "actions" | "avatar" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot")[];
+            type: "button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "avatar" | "actions" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot" | ("button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "avatar" | "actions" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot")[];
             loading: boolean;
             loadingText: string;
             boilerplate: boolean;
@@ -53,7 +53,7 @@ declare const VSkeletonLoader: {
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: vue.ComponentOptionsBase<{
-            type: "button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "actions" | "avatar" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot" | ("button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "actions" | "avatar" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot")[];
+            type: "button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "avatar" | "actions" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot" | ("button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "avatar" | "actions" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot")[];
             loading: boolean;
             loadingText: string;
             boilerplate: boolean;
@@ -77,7 +77,7 @@ declare const VSkeletonLoader: {
         } & {
             "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
         }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
-            type: "button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "actions" | "avatar" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot" | ("button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "actions" | "avatar" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot")[];
+            type: "button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "avatar" | "actions" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot" | ("button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "avatar" | "actions" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot")[];
             loading: boolean;
             loadingText: string;
             boilerplate: boolean;
@@ -102,7 +102,7 @@ declare const VSkeletonLoader: {
         $nextTick: typeof vue.nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
     } & {
-        type: "button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "actions" | "avatar" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot" | ("button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "actions" | "avatar" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot")[];
+        type: "button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "avatar" | "actions" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot" | ("button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "avatar" | "actions" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot")[];
         loading: boolean;
         loadingText: string;
         boilerplate: boolean;
@@ -130,7 +130,7 @@ declare const VSkeletonLoader: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
-    type: "button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "actions" | "avatar" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot" | ("button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "actions" | "avatar" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot")[];
+    type: "button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "avatar" | "actions" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot" | ("button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "avatar" | "actions" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot")[];
     loading: boolean;
     loadingText: string;
     boilerplate: boolean;
@@ -154,7 +154,7 @@ declare const VSkeletonLoader: {
 } & {
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
-    type: "button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "actions" | "avatar" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot" | ("button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "actions" | "avatar" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot")[];
+    type: "button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "avatar" | "actions" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot" | ("button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "avatar" | "actions" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot")[];
     loading: boolean;
     loadingText: string;
     boilerplate: boolean;
@@ -178,7 +178,7 @@ declare const VSkeletonLoader: {
         default: string;
     };
     type: {
-        type: PropType<"button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "actions" | "avatar" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot" | ("button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "actions" | "avatar" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot")[]>;
+        type: PropType<"button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "avatar" | "actions" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot" | ("button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "avatar" | "actions" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot")[]>;
         default: string;
     };
 }, vue.ExtractPropTypes<{
@@ -201,7 +201,7 @@ declare const VSkeletonLoader: {
         default: string;
     };
     type: {
-        type: PropType<"button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "actions" | "avatar" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot" | ("button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "actions" | "avatar" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot")[]>;
+        type: PropType<"button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "avatar" | "actions" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot" | ("button" | "article" | "table" | "image" | "text" | "table-row" | "list-item" | "sentences" | "heading" | "subtitle" | "divider" | "chip" | "avatar" | "actions" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-tfoot")[]>;
         default: string;
     };
 }>>;