vuetify 3.1.4 → 3.1.6

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

@@ -1,220 +1,120 @@
 import * as vue from 'vue';
 import { JSXComponent, PropType } from 'vue';
 
-declare type Density = null | 'default' | 'comfortable' | 'compact';
+type Density = null | 'default' | 'comfortable' | 'compact';
 
-declare type IconValue = string | JSXComponent;
+type IconValue = string | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 
 declare const VPagination: vue.DefineComponent<{
-    color: StringConstructor;
-    variant: Omit<{
-        type: vue.PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
-        default: string;
-        validator: (v: any) => boolean;
-    }, "type" | "default"> & {
-        type: vue.PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
-        default: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
-    };
-    theme: StringConstructor;
-    tag: Omit<{
-        type: StringConstructor;
-        default: string;
-    }, "type" | "default"> & {
-        type: vue.PropType<string>;
-        default: string;
-    };
-    size: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: string;
-    };
-    rounded: {
-        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
-        default: undefined;
-    };
-    elevation: {
-        type: (StringConstructor | NumberConstructor)[];
-        validator(v: any): boolean;
-    };
-    density: {
-        type: vue.PropType<Density>;
-        default: string;
-        validator: (v: any) => boolean;
-    };
-    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
-    activeColor: StringConstructor;
-    start: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-    modelValue: {
-        type: NumberConstructor;
-        default: (props: any) => any;
-    };
-    disabled: BooleanConstructor;
-    length: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-        validator: (val: number) => boolean;
-    };
-    totalVisible: (StringConstructor | NumberConstructor)[];
-    firstIcon: {
-        type: vue.PropType<IconValue>;
-        default: string;
-    };
-    prevIcon: {
-        type: vue.PropType<IconValue>;
-        default: string;
-    };
-    nextIcon: {
-        type: vue.PropType<IconValue>;
-        default: string;
-    };
-    lastIcon: {
-        type: vue.PropType<IconValue>;
-        default: string;
-    };
-    ariaLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    pageAriaLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    currentPageAriaLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    firstAriaLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    previousAriaLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    nextAriaLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    lastAriaLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    ellipsis: {
-        type: StringConstructor;
-        default: string;
-    };
-    showFirstLastPage: BooleanConstructor;
+    length: string | number;
+    start: string | number;
+    ariaLabel: string;
+    disabled: boolean;
+    size: string | number;
+    tag: string;
+    ellipsis: string;
+    density: Density;
+    variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+    modelValue: number;
+    nextIcon: IconValue;
+    prevIcon: IconValue;
+    showFirstLastPage: boolean;
+    firstIcon: IconValue;
+    lastIcon: IconValue;
+    pageAriaLabel: string;
+    currentPageAriaLabel: string;
+    firstAriaLabel: string;
+    previousAriaLabel: string;
+    nextAriaLabel: string;
+    lastAriaLabel: string;
+} & {
+    border?: string | number | boolean | undefined;
+    color?: string | undefined;
+    elevation?: string | number | undefined;
+    theme?: string | undefined;
+    rounded?: string | number | boolean | undefined;
+    activeColor?: string | undefined;
+    totalVisible?: string | number | undefined;
+} & {
+    $children?: {} | vue.VNodeChild | {
+        item?: (() => vue.VNodeChild) | undefined;
+        first?: (() => vue.VNodeChild) | undefined;
+        next?: (() => vue.VNodeChild) | undefined;
+        prev?: (() => vue.VNodeChild) | undefined;
+        last?: (() => vue.VNodeChild) | undefined;
+    };
+    'v-slots'?: {
+        item?: false | (() => vue.VNodeChild) | undefined;
+        first?: false | (() => vue.VNodeChild) | undefined;
+        next?: false | (() => vue.VNodeChild) | undefined;
+        prev?: false | (() => vue.VNodeChild) | undefined;
+        last?: false | (() => vue.VNodeChild) | undefined;
+    } | undefined;
+} & {
+    "v-slot:item"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:first"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:next"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:prev"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:last"?: false | (() => vue.VNodeChild) | undefined;
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
     'update:modelValue': (value: number) => true;
     first: (value: number) => true;
     prev: (value: number) => true;
     next: (value: number) => true;
     last: (value: number) => true;
-}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
-    color: StringConstructor;
-    variant: Omit<{
-        type: vue.PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
-        default: string;
-        validator: (v: any) => boolean;
-    }, "type" | "default"> & {
-        type: vue.PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
-        default: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
-    };
-    theme: StringConstructor;
-    tag: Omit<{
-        type: StringConstructor;
-        default: string;
-    }, "type" | "default"> & {
-        type: vue.PropType<string>;
-        default: string;
-    };
-    size: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: string;
-    };
-    rounded: {
-        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
-        default: undefined;
-    };
-    elevation: {
-        type: (StringConstructor | NumberConstructor)[];
-        validator(v: any): boolean;
-    };
-    density: {
-        type: vue.PropType<Density>;
-        default: string;
-        validator: (v: any) => boolean;
-    };
-    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
-    activeColor: StringConstructor;
-    start: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-    modelValue: {
-        type: NumberConstructor;
-        default: (props: any) => any;
-    };
-    disabled: BooleanConstructor;
-    length: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-        validator: (val: number) => boolean;
-    };
-    totalVisible: (StringConstructor | NumberConstructor)[];
-    firstIcon: {
-        type: vue.PropType<IconValue>;
-        default: string;
-    };
-    prevIcon: {
-        type: vue.PropType<IconValue>;
-        default: string;
-    };
-    nextIcon: {
-        type: vue.PropType<IconValue>;
-        default: string;
-    };
-    lastIcon: {
-        type: vue.PropType<IconValue>;
-        default: string;
-    };
-    ariaLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    pageAriaLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    currentPageAriaLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    firstAriaLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    previousAriaLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    nextAriaLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    lastAriaLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    ellipsis: {
-        type: StringConstructor;
-        default: string;
-    };
-    showFirstLastPage: BooleanConstructor;
-}>> & {
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
+    length: string | number;
+    start: string | number;
+    ariaLabel: string;
+    disabled: boolean;
+    size: string | number;
+    tag: string;
+    ellipsis: string;
+    density: Density;
+    variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+    modelValue: number;
+    nextIcon: IconValue;
+    prevIcon: IconValue;
+    showFirstLastPage: boolean;
+    firstIcon: IconValue;
+    lastIcon: IconValue;
+    pageAriaLabel: string;
+    currentPageAriaLabel: string;
+    firstAriaLabel: string;
+    previousAriaLabel: string;
+    nextAriaLabel: string;
+    lastAriaLabel: string;
+} & {
+    border?: string | number | boolean | undefined;
+    color?: string | undefined;
+    elevation?: string | number | undefined;
+    theme?: string | undefined;
+    rounded?: string | number | boolean | undefined;
+    activeColor?: string | undefined;
+    totalVisible?: string | number | undefined;
+} & {
+    $children?: {} | vue.VNodeChild | {
+        item?: (() => vue.VNodeChild) | undefined;
+        first?: (() => vue.VNodeChild) | undefined;
+        next?: (() => vue.VNodeChild) | undefined;
+        prev?: (() => vue.VNodeChild) | undefined;
+        last?: (() => vue.VNodeChild) | undefined;
+    };
+    'v-slots'?: {
+        item?: false | (() => vue.VNodeChild) | undefined;
+        first?: false | (() => vue.VNodeChild) | undefined;
+        next?: false | (() => vue.VNodeChild) | undefined;
+        prev?: false | (() => vue.VNodeChild) | undefined;
+        last?: false | (() => vue.VNodeChild) | undefined;
+    } | undefined;
+} & {
+    "v-slot:item"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:first"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:next"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:prev"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:last"?: false | (() => vue.VNodeChild) | undefined;
+} & {
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
     onNext?: ((value: number) => any) | undefined;
     onPrev?: ((value: number) => any) | undefined;
@@ -230,10 +130,11 @@ declare const VPagination: vue.DefineComponent<{
     ellipsis: string;
     rounded: string | number | boolean;
     density: Density;
-    variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
+    variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
     modelValue: number;
     nextIcon: IconValue;
     prevIcon: IconValue;
+    showFirstLastPage: boolean;
     firstIcon: IconValue;
     lastIcon: IconValue;
     pageAriaLabel: string;
@@ -242,8 +143,7 @@ declare const VPagination: vue.DefineComponent<{
     previousAriaLabel: string;
     nextAriaLabel: string;
     lastAriaLabel: string;
-    showFirstLastPage: boolean;
 }>;
-declare type VPagination = InstanceType<typeof VPagination>;
+type VPagination = InstanceType<typeof VPagination>;
 
 export { VPagination };

package/lib/components/VParallax/VParallax.mjs

@@ -4,15 +4,18 @@ import "./VParallax.css";
 
 // Components
 import { VImg } from "../VImg/index.mjs"; // Composables
-import { useIntersectionObserver } from "../../composables/intersectionObserver.mjs"; // Utilities
-import { clamp, defineComponent, getScrollParent, useRender } from "../../util/index.mjs";
-import { computed, onBeforeUnmount, ref, watch, watchEffect } from 'vue';
-import { useResizeObserver } from "../../composables/resizeObserver.mjs";
 import { useDisplay } from "../../composables/index.mjs";
+import { useIntersectionObserver } from "../../composables/intersectionObserver.mjs";
+import { useResizeObserver } from "../../composables/resizeObserver.mjs"; // Utilities
+import { clamp, genericComponent, getScrollParent, useRender } from "../../util/index.mjs";
+import { computed, onBeforeUnmount, ref, watch, watchEffect } from 'vue';
+
+// Types
+
 function floor(val) {
   return Math.floor(Math.abs(val)) * Math.sign(val);
 }
-export const VParallax = defineComponent({
+export const VParallax = genericComponent()({
   name: 'VParallax',
   props: {
     scale: {
@@ -37,8 +40,7 @@ export const VParallax = defineComponent({
     } = useDisplay();
     const root = ref();
     watchEffect(() => {
-      var _root$value;
-      intersectionRef.value = resizeRef.value = (_root$value = root.value) == null ? void 0 : _root$value.$el;
+      intersectionRef.value = resizeRef.value = root.value?.$el;
     });
     let scrollParent;
     watch(isIntersecting, val => {
@@ -54,14 +56,10 @@ export const VParallax = defineComponent({
       }
     });
     onBeforeUnmount(() => {
-      var _scrollParent;
-      (_scrollParent = scrollParent) == null ? void 0 : _scrollParent.removeEventListener('scroll', onScroll);
+      scrollParent?.removeEventListener('scroll', onScroll);
     });
     watch(displayHeight, onScroll);
-    watch(() => {
-      var _contentRect$value;
-      return (_contentRect$value = contentRect.value) == null ? void 0 : _contentRect$value.height;
-    }, onScroll);
+    watch(() => contentRect.value?.height, onScroll);
     const scale = computed(() => {
       return 1 - clamp(+props.scale);
     });
@@ -70,8 +68,7 @@ export const VParallax = defineComponent({
       if (!isIntersecting.value) return;
       cancelAnimationFrame(frame);
       frame = requestAnimationFrame(() => {
-        var _root$value2;
-        const el = ((_root$value2 = root.value) == null ? void 0 : _root$value2.$el).querySelector('.v-img__img');
+        const el = (root.value?.$el).querySelector('.v-img__img');
         if (!el) return;
         const scrollHeight = scrollParent.clientHeight ?? document.documentElement.clientHeight;
         const scrollPos = scrollParent.scrollTop ?? window.scrollY;

package/lib/components/VParallax/VParallax.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VParallax.mjs","names":["VImg","useIntersectionObserver","clamp","defineComponent","getScrollParent","useRender","computed","onBeforeUnmount","ref","watch","watchEffect","useResizeObserver","useDisplay","floor","val","Math","abs","sign","VParallax","name","props","scale","type","Number","String","default","setup","slots","intersectionRef","isIntersecting","resizeRef","contentRect","height","displayHeight","root","value","$el","scrollParent","document","scrollingElement","addEventListener","onScroll","passive","removeEventListener","frame","cancelAnimationFrame","requestAnimationFrame","el","querySelector","scrollHeight","clientHeight","documentElement","scrollPos","scrollTop","window","scrollY","top","offsetTop","center","translate","sizeScale","max","style","setProperty"],"sources":["../../../src/components/VParallax/VParallax.tsx"],"sourcesContent":["// Styles\nimport './VParallax.sass'\n\n// Components\nimport { VImg } from '@/components/VImg'\n\n// Composables\nimport { useIntersectionObserver } from '@/composables/intersectionObserver'\n\n// Utilities\nimport { clamp, defineComponent, getScrollParent, useRender } from '@/util'\nimport { computed, onBeforeUnmount, ref, watch, watchEffect } from 'vue'\nimport { useResizeObserver } from '@/composables/resizeObserver'\nimport { useDisplay } from '@/composables'\n\nfunction floor (val: number) {\n  return Math.floor(Math.abs(val)) * Math.sign(val)\n}\n\nexport const VParallax = defineComponent({\n  name: 'VParallax',\n\n  props: {\n    scale: {\n      type: [Number, String],\n      default: 0.5,\n    },\n  },\n\n  setup (props, { slots }) {\n    const { intersectionRef, isIntersecting } = useIntersectionObserver()\n    const { resizeRef, contentRect } = useResizeObserver()\n    const { height: displayHeight } = useDisplay()\n\n    const root = ref<VImg>()\n\n    watchEffect(() => {\n      intersectionRef.value = resizeRef.value = root.value?.$el\n    })\n\n    let scrollParent: Element\n    watch(isIntersecting, val => {\n      if (val) {\n        scrollParent = getScrollParent(intersectionRef.value)\n        scrollParent = scrollParent === document.scrollingElement ? document as any : scrollParent\n        scrollParent.addEventListener('scroll', onScroll, { passive: true })\n        onScroll()\n      } else {\n        scrollParent.removeEventListener('scroll', onScroll)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      scrollParent?.removeEventListener('scroll', onScroll)\n    })\n\n    watch(displayHeight, onScroll)\n    watch(() => contentRect.value?.height, onScroll)\n\n    const scale = computed(() => {\n      return 1 - clamp(+props.scale)\n    })\n\n    let frame = -1\n    function onScroll () {\n      if (!isIntersecting.value) return\n\n      cancelAnimationFrame(frame)\n      frame = requestAnimationFrame(() => {\n        const el: HTMLElement | null = (root.value?.$el as Element).querySelector('.v-img__img')\n        if (!el) return\n\n        const scrollHeight = scrollParent.clientHeight ?? document.documentElement.clientHeight\n        const scrollPos = scrollParent.scrollTop ?? window.scrollY\n        const top = intersectionRef.value!.offsetTop\n        const height = contentRect.value!.height\n\n        const center = top + (height - scrollHeight) / 2\n        const translate = floor((scrollPos - center) * scale.value)\n        const sizeScale = Math.max(1, (scale.value * (scrollHeight - height) + height) / height)\n\n        el.style.setProperty('transform', `translateY(${translate}px) scale(${sizeScale})`)\n      })\n    }\n\n    useRender(() => (\n      <VImg\n        class={[\n          'v-parallax',\n          { 'v-parallax--active': isIntersecting.value },\n        ]}\n        ref={ root }\n        cover\n        onLoadstart={ onScroll }\n        onLoad={ onScroll }\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VParallax = InstanceType<typeof VParallax>\n"],"mappings":"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"}
+{"version":3,"file":"VParallax.mjs","names":["VImg","useDisplay","useIntersectionObserver","useResizeObserver","clamp","genericComponent","getScrollParent","useRender","computed","onBeforeUnmount","ref","watch","watchEffect","floor","val","Math","abs","sign","VParallax","name","props","scale","type","Number","String","default","setup","slots","intersectionRef","isIntersecting","resizeRef","contentRect","height","displayHeight","root","value","$el","scrollParent","document","scrollingElement","addEventListener","onScroll","passive","removeEventListener","frame","cancelAnimationFrame","requestAnimationFrame","el","querySelector","scrollHeight","clientHeight","documentElement","scrollPos","scrollTop","window","scrollY","top","offsetTop","center","translate","sizeScale","max","style","setProperty"],"sources":["../../../src/components/VParallax/VParallax.tsx"],"sourcesContent":["// Styles\nimport './VParallax.sass'\n\n// Components\nimport { VImg } from '@/components/VImg'\n\n// Composables\nimport { useDisplay } from '@/composables'\nimport { useIntersectionObserver } from '@/composables/intersectionObserver'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { clamp, genericComponent, getScrollParent, useRender } from '@/util'\nimport { computed, onBeforeUnmount, ref, watch, watchEffect } from 'vue'\n\n// Types\nimport type { VImgSlots } from '../VImg/VImg'\n\nfunction floor (val: number) {\n  return Math.floor(Math.abs(val)) * Math.sign(val)\n}\n\nexport const VParallax = genericComponent<VImgSlots>()({\n  name: 'VParallax',\n\n  props: {\n    scale: {\n      type: [Number, String],\n      default: 0.5,\n    },\n  },\n\n  setup (props, { slots }) {\n    const { intersectionRef, isIntersecting } = useIntersectionObserver()\n    const { resizeRef, contentRect } = useResizeObserver()\n    const { height: displayHeight } = useDisplay()\n\n    const root = ref<VImg>()\n\n    watchEffect(() => {\n      intersectionRef.value = resizeRef.value = root.value?.$el\n    })\n\n    let scrollParent: Element\n    watch(isIntersecting, val => {\n      if (val) {\n        scrollParent = getScrollParent(intersectionRef.value)\n        scrollParent = scrollParent === document.scrollingElement ? document as any : scrollParent\n        scrollParent.addEventListener('scroll', onScroll, { passive: true })\n        onScroll()\n      } else {\n        scrollParent.removeEventListener('scroll', onScroll)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      scrollParent?.removeEventListener('scroll', onScroll)\n    })\n\n    watch(displayHeight, onScroll)\n    watch(() => contentRect.value?.height, onScroll)\n\n    const scale = computed(() => {\n      return 1 - clamp(+props.scale)\n    })\n\n    let frame = -1\n    function onScroll () {\n      if (!isIntersecting.value) return\n\n      cancelAnimationFrame(frame)\n      frame = requestAnimationFrame(() => {\n        const el: HTMLElement | null = (root.value?.$el as Element).querySelector('.v-img__img')\n        if (!el) return\n\n        const scrollHeight = scrollParent.clientHeight ?? document.documentElement.clientHeight\n        const scrollPos = scrollParent.scrollTop ?? window.scrollY\n        const top = intersectionRef.value!.offsetTop\n        const height = contentRect.value!.height\n\n        const center = top + (height - scrollHeight) / 2\n        const translate = floor((scrollPos - center) * scale.value)\n        const sizeScale = Math.max(1, (scale.value * (scrollHeight - height) + height) / height)\n\n        el.style.setProperty('transform', `translateY(${translate}px) scale(${sizeScale})`)\n      })\n    }\n\n    useRender(() => (\n      <VImg\n        class={[\n          'v-parallax',\n          { 'v-parallax--active': isIntersecting.value },\n        ]}\n        ref={ root }\n        cover\n        onLoadstart={ onScroll }\n        onLoad={ onScroll }\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VParallax = InstanceType<typeof VParallax>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,IAAI,6BAEb;AAAA,SACSC,UAAU;AAAA,SACVC,uBAAuB;AAAA,SACvBC,iBAAiB,gDAE1B;AAAA,SACSC,KAAK,EAAEC,gBAAgB,EAAEC,eAAe,EAAEC,SAAS;AAC5D,SAASC,QAAQ,EAAEC,eAAe,EAAEC,GAAG,EAAEC,KAAK,EAAEC,WAAW,QAAQ,KAAK;;AAExE;;AAGA,SAASC,KAAK,CAAEC,GAAW,EAAE;EAC3B,OAAOC,IAAI,CAACF,KAAK,CAACE,IAAI,CAACC,GAAG,CAACF,GAAG,CAAC,CAAC,GAAGC,IAAI,CAACE,IAAI,CAACH,GAAG,CAAC;AACnD;AAEA,OAAO,MAAMI,SAAS,GAAGb,gBAAgB,EAAa,CAAC;EACrDc,IAAI,EAAE,WAAW;EAEjBC,KAAK,EAAE;IACLC,KAAK,EAAE;MACLC,IAAI,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;MACtBC,OAAO,EAAE;IACX;EACF,CAAC;EAEDC,KAAK,CAAEN,KAAK,QAAa;IAAA,IAAX;MAAEO;IAAM,CAAC;IACrB,MAAM;MAAEC,eAAe;MAAEC;IAAe,CAAC,GAAG3B,uBAAuB,EAAE;IACrE,MAAM;MAAE4B,SAAS;MAAEC;IAAY,CAAC,GAAG5B,iBAAiB,EAAE;IACtD,MAAM;MAAE6B,MAAM,EAAEC;IAAc,CAAC,GAAGhC,UAAU,EAAE;IAE9C,MAAMiC,IAAI,GAAGxB,GAAG,EAAQ;IAExBE,WAAW,CAAC,MAAM;MAChBgB,eAAe,CAACO,KAAK,GAAGL,SAAS,CAACK,KAAK,GAAGD,IAAI,CAACC,KAAK,EAAEC,GAAG;IAC3D,CAAC,CAAC;IAEF,IAAIC,YAAqB;IACzB1B,KAAK,CAACkB,cAAc,EAAEf,GAAG,IAAI;MAC3B,IAAIA,GAAG,EAAE;QACPuB,YAAY,GAAG/B,eAAe,CAACsB,eAAe,CAACO,KAAK,CAAC;QACrDE,YAAY,GAAGA,YAAY,KAAKC,QAAQ,CAACC,gBAAgB,GAAGD,QAAQ,GAAUD,YAAY;QAC1FA,YAAY,CAACG,gBAAgB,CAAC,QAAQ,EAAEC,QAAQ,EAAE;UAAEC,OAAO,EAAE;QAAK,CAAC,CAAC;QACpED,QAAQ,EAAE;MACZ,CAAC,MAAM;QACLJ,YAAY,CAACM,mBAAmB,CAAC,QAAQ,EAAEF,QAAQ,CAAC;MACtD;IACF,CAAC,CAAC;IAEFhC,eAAe,CAAC,MAAM;MACpB4B,YAAY,EAAEM,mBAAmB,CAAC,QAAQ,EAAEF,QAAQ,CAAC;IACvD,CAAC,CAAC;IAEF9B,KAAK,CAACsB,aAAa,EAAEQ,QAAQ,CAAC;IAC9B9B,KAAK,CAAC,MAAMoB,WAAW,CAACI,KAAK,EAAEH,MAAM,EAAES,QAAQ,CAAC;IAEhD,MAAMpB,KAAK,GAAGb,QAAQ,CAAC,MAAM;MAC3B,OAAO,CAAC,GAAGJ,KAAK,CAAC,CAACgB,KAAK,CAACC,KAAK,CAAC;IAChC,CAAC,CAAC;IAEF,IAAIuB,KAAK,GAAG,CAAC,CAAC;IACd,SAASH,QAAQ,GAAI;MACnB,IAAI,CAACZ,cAAc,CAACM,KAAK,EAAE;MAE3BU,oBAAoB,CAACD,KAAK,CAAC;MAC3BA,KAAK,GAAGE,qBAAqB,CAAC,MAAM;QAClC,MAAMC,EAAsB,GAAG,CAACb,IAAI,CAACC,KAAK,EAAEC,GAAG,EAAaY,aAAa,CAAC,aAAa,CAAC;QACxF,IAAI,CAACD,EAAE,EAAE;QAET,MAAME,YAAY,GAAGZ,YAAY,CAACa,YAAY,IAAIZ,QAAQ,CAACa,eAAe,CAACD,YAAY;QACvF,MAAME,SAAS,GAAGf,YAAY,CAACgB,SAAS,IAAIC,MAAM,CAACC,OAAO;QAC1D,MAAMC,GAAG,GAAG5B,eAAe,CAACO,KAAK,CAAEsB,SAAS;QAC5C,MAAMzB,MAAM,GAAGD,WAAW,CAACI,KAAK,CAAEH,MAAM;QAExC,MAAM0B,MAAM,GAAGF,GAAG,GAAG,CAACxB,MAAM,GAAGiB,YAAY,IAAI,CAAC;QAChD,MAAMU,SAAS,GAAG9C,KAAK,CAAC,CAACuC,SAAS,GAAGM,MAAM,IAAIrC,KAAK,CAACc,KAAK,CAAC;QAC3D,MAAMyB,SAAS,GAAG7C,IAAI,CAAC8C,GAAG,CAAC,CAAC,EAAE,CAACxC,KAAK,CAACc,KAAK,IAAIc,YAAY,GAAGjB,MAAM,CAAC,GAAGA,MAAM,IAAIA,MAAM,CAAC;QAExFe,EAAE,CAACe,KAAK,CAACC,WAAW,CAAC,WAAW,EAAG,cAAaJ,SAAU,aAAYC,SAAU,GAAE,CAAC;MACrF,CAAC,CAAC;IACJ;IAEArD,SAAS,CAAC;MAAA,SAEC,CACL,YAAY,EACZ;QAAE,oBAAoB,EAAEsB,cAAc,CAACM;MAAM,CAAC,CAC/C;MAAA,OACKD,IAAI;MAAA;MAAA,eAEIO,QAAQ;MAAA,UACbA;IAAQ,GACPd,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

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

@@ -1,18 +1,48 @@
 import * as vue from 'vue';
 
 declare const VParallax: vue.DefineComponent<{
-    scale: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
+    scale: string | number;
+} & {} & {
+    $children?: {} | vue.VNodeChild | {
+        default?: (() => vue.VNodeChild) | undefined;
+        placeholder?: (() => vue.VNodeChild) | undefined;
+        error?: (() => vue.VNodeChild) | undefined;
+        sources?: (() => vue.VNodeChild) | undefined;
     };
-}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
-    scale: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
+    'v-slots'?: {
+        default?: false | (() => vue.VNodeChild) | undefined;
+        placeholder?: false | (() => vue.VNodeChild) | undefined;
+        error?: false | (() => vue.VNodeChild) | undefined;
+        sources?: false | (() => vue.VNodeChild) | undefined;
+    } | undefined;
+} & {
+    "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:placeholder"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:error"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:sources"?: false | (() => vue.VNodeChild) | undefined;
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
+    scale: string | number;
+} & {} & {
+    $children?: {} | vue.VNodeChild | {
+        default?: (() => vue.VNodeChild) | undefined;
+        placeholder?: (() => vue.VNodeChild) | undefined;
+        error?: (() => vue.VNodeChild) | undefined;
+        sources?: (() => vue.VNodeChild) | undefined;
     };
-}>>, {
+    'v-slots'?: {
+        default?: false | (() => vue.VNodeChild) | undefined;
+        placeholder?: false | (() => vue.VNodeChild) | undefined;
+        error?: false | (() => vue.VNodeChild) | undefined;
+        sources?: false | (() => vue.VNodeChild) | undefined;
+    } | undefined;
+} & {
+    "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:placeholder"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:error"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:sources"?: false | (() => vue.VNodeChild) | undefined;
+}, {
     scale: string | number;
 }>;
-declare type VParallax = InstanceType<typeof VParallax>;
+type VParallax = InstanceType<typeof VParallax>;
 
 export { VParallax };

package/lib/components/VProgressCircular/VProgressCircular.mjs

@@ -10,8 +10,8 @@ import { useIntersectionObserver } from "../../composables/intersectionObserver.
 import { useResizeObserver } from "../../composables/resizeObserver.mjs";
 import { useTextColor } from "../../composables/color.mjs"; // Utilities
 import { computed, ref, toRef, watchEffect } from 'vue';
-import { convertToUnit, defineComponent, useRender } from "../../util/index.mjs"; // Types
-export const VProgressCircular = defineComponent({
+import { convertToUnit, genericComponent, useRender } from "../../util/index.mjs"; // Types
+export const VProgressCircular = genericComponent()({
   name: 'VProgressCircular',
   props: {
     bgColor: String,

package/lib/components/VProgressCircular/VProgressCircular.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VProgressCircular.mjs","names":["makeSizeProps","useSize","makeTagProps","makeThemeProps","provideTheme","useIntersectionObserver","useResizeObserver","useTextColor","computed","ref","toRef","watchEffect","convertToUnit","defineComponent","useRender","VProgressCircular","name","props","bgColor","String","color","indeterminate","Boolean","modelValue","type","Number","default","rotate","width","tag","setup","slots","MAGIC_RADIUS_CONSTANT","CIRCUMFERENCE","Math","PI","root","themeClasses","sizeClasses","sizeStyles","textColorClasses","textColorStyles","underlayColorClasses","underlayColorStyles","intersectionRef","isIntersecting","resizeRef","contentRect","normalizedValue","max","min","parseFloat","size","value","diameter","strokeWidth","strokeDashOffset","undefined","transform"],"sources":["../../../src/components/VProgressCircular/VProgressCircular.tsx"],"sourcesContent":["// Styles\nimport './VProgressCircular.sass'\n\n// Composables\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useIntersectionObserver } from '@/composables/intersectionObserver'\nimport { useResizeObserver } from '@/composables/resizeObserver'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, ref, toRef, watchEffect } from 'vue'\nimport { convertToUnit, defineComponent, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VProgressCircular = defineComponent({\n  name: 'VProgressCircular',\n\n  props: {\n    bgColor: String,\n    color: String,\n    indeterminate: [Boolean, String] as PropType<boolean | 'disable-shrink'>,\n    modelValue: {\n      type: [Number, String],\n      default: 0,\n    },\n    rotate: {\n      type: [Number, String],\n      default: 0,\n    },\n    width: {\n      type: [Number, String],\n      default: 4,\n    },\n\n    ...makeSizeProps(),\n    ...makeTagProps({ tag: 'div' }),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const MAGIC_RADIUS_CONSTANT = 20\n    const CIRCUMFERENCE = 2 * Math.PI * MAGIC_RADIUS_CONSTANT\n\n    const root = ref<HTMLElement>()\n\n    const { themeClasses } = provideTheme(props)\n    const { sizeClasses, sizeStyles } = useSize(props)\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))\n    const { textColorClasses: underlayColorClasses, textColorStyles: underlayColorStyles } = useTextColor(toRef(props, 'bgColor'))\n    const { intersectionRef, isIntersecting } = useIntersectionObserver()\n    const { resizeRef, contentRect } = useResizeObserver()\n\n    const normalizedValue = computed(() => Math.max(0, Math.min(100, parseFloat(props.modelValue))))\n    const width = computed(() => Number(props.width))\n    const size = computed(() => {\n      // Get size from element if size prop value is small, large etc\n      return sizeStyles.value\n        ? Number(props.size)\n        : contentRect.value\n          ? contentRect.value.width\n          : Math.max(width.value, 32)\n    })\n    const diameter = computed(() => (MAGIC_RADIUS_CONSTANT / (1 - width.value / size.value)) * 2)\n    const strokeWidth = computed(() => width.value / size.value * diameter.value)\n    const strokeDashOffset = computed(() => convertToUnit(((100 - normalizedValue.value) / 100) * CIRCUMFERENCE))\n\n    watchEffect(() => {\n      intersectionRef.value = root.value\n      resizeRef.value = root.value\n    })\n\n    useRender(() => (\n      <props.tag\n        ref={ root }\n        class={[\n          'v-progress-circular',\n          {\n            'v-progress-circular--indeterminate': !!props.indeterminate,\n            'v-progress-circular--visible': isIntersecting.value,\n            'v-progress-circular--disable-shrink': props.indeterminate === 'disable-shrink',\n          },\n          themeClasses.value,\n          sizeClasses.value,\n          textColorClasses.value,\n        ]}\n        style={[\n          sizeStyles.value,\n          textColorStyles.value,\n        ]}\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={ props.indeterminate ? undefined : normalizedValue.value }\n      >\n        <svg\n          style={{\n            transform: `rotate(calc(-90deg + ${Number(props.rotate)}deg))`,\n          }}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox={ `0 0 ${diameter.value} ${diameter.value}` }\n        >\n          <circle\n            class={[\n              'v-progress-circular__underlay',\n              underlayColorClasses.value,\n            ]}\n            style={ underlayColorStyles.value }\n            fill=\"transparent\"\n            cx=\"50%\"\n            cy=\"50%\"\n            r={ MAGIC_RADIUS_CONSTANT }\n            stroke-width={ strokeWidth.value }\n            stroke-dasharray={ CIRCUMFERENCE }\n            stroke-dashoffset={ 0 }\n          />\n\n          <circle\n            class=\"v-progress-circular__overlay\"\n            fill=\"transparent\"\n            cx=\"50%\"\n            cy=\"50%\"\n            r={ MAGIC_RADIUS_CONSTANT }\n            stroke-width={ strokeWidth.value }\n            stroke-dasharray={ CIRCUMFERENCE }\n            stroke-dashoffset={ strokeDashOffset.value }\n          />\n        </svg>\n\n        { slots.default && (\n          <div class=\"v-progress-circular__content\">\n            { slots.default({ value: normalizedValue.value }) }\n          </div>\n        ) }\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n\nexport type VProgressCircular = InstanceType<typeof VProgressCircular>\n"],"mappings":"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"}
+{"version":3,"file":"VProgressCircular.mjs","names":["makeSizeProps","useSize","makeTagProps","makeThemeProps","provideTheme","useIntersectionObserver","useResizeObserver","useTextColor","computed","ref","toRef","watchEffect","convertToUnit","genericComponent","useRender","VProgressCircular","name","props","bgColor","String","color","indeterminate","Boolean","modelValue","type","Number","default","rotate","width","tag","setup","slots","MAGIC_RADIUS_CONSTANT","CIRCUMFERENCE","Math","PI","root","themeClasses","sizeClasses","sizeStyles","textColorClasses","textColorStyles","underlayColorClasses","underlayColorStyles","intersectionRef","isIntersecting","resizeRef","contentRect","normalizedValue","max","min","parseFloat","size","value","diameter","strokeWidth","strokeDashOffset","undefined","transform"],"sources":["../../../src/components/VProgressCircular/VProgressCircular.tsx"],"sourcesContent":["// Styles\nimport './VProgressCircular.sass'\n\n// Composables\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useIntersectionObserver } from '@/composables/intersectionObserver'\nimport { useResizeObserver } from '@/composables/resizeObserver'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, ref, toRef, watchEffect } from 'vue'\nimport { convertToUnit, genericComponent, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VProgressCircular = genericComponent()({\n  name: 'VProgressCircular',\n\n  props: {\n    bgColor: String,\n    color: String,\n    indeterminate: [Boolean, String] as PropType<boolean | 'disable-shrink'>,\n    modelValue: {\n      type: [Number, String],\n      default: 0,\n    },\n    rotate: {\n      type: [Number, String],\n      default: 0,\n    },\n    width: {\n      type: [Number, String],\n      default: 4,\n    },\n\n    ...makeSizeProps(),\n    ...makeTagProps({ tag: 'div' }),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const MAGIC_RADIUS_CONSTANT = 20\n    const CIRCUMFERENCE = 2 * Math.PI * MAGIC_RADIUS_CONSTANT\n\n    const root = ref<HTMLElement>()\n\n    const { themeClasses } = provideTheme(props)\n    const { sizeClasses, sizeStyles } = useSize(props)\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))\n    const { textColorClasses: underlayColorClasses, textColorStyles: underlayColorStyles } = useTextColor(toRef(props, 'bgColor'))\n    const { intersectionRef, isIntersecting } = useIntersectionObserver()\n    const { resizeRef, contentRect } = useResizeObserver()\n\n    const normalizedValue = computed(() => Math.max(0, Math.min(100, parseFloat(props.modelValue))))\n    const width = computed(() => Number(props.width))\n    const size = computed(() => {\n      // Get size from element if size prop value is small, large etc\n      return sizeStyles.value\n        ? Number(props.size)\n        : contentRect.value\n          ? contentRect.value.width\n          : Math.max(width.value, 32)\n    })\n    const diameter = computed(() => (MAGIC_RADIUS_CONSTANT / (1 - width.value / size.value)) * 2)\n    const strokeWidth = computed(() => width.value / size.value * diameter.value)\n    const strokeDashOffset = computed(() => convertToUnit(((100 - normalizedValue.value) / 100) * CIRCUMFERENCE))\n\n    watchEffect(() => {\n      intersectionRef.value = root.value\n      resizeRef.value = root.value\n    })\n\n    useRender(() => (\n      <props.tag\n        ref={ root }\n        class={[\n          'v-progress-circular',\n          {\n            'v-progress-circular--indeterminate': !!props.indeterminate,\n            'v-progress-circular--visible': isIntersecting.value,\n            'v-progress-circular--disable-shrink': props.indeterminate === 'disable-shrink',\n          },\n          themeClasses.value,\n          sizeClasses.value,\n          textColorClasses.value,\n        ]}\n        style={[\n          sizeStyles.value,\n          textColorStyles.value,\n        ]}\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={ props.indeterminate ? undefined : normalizedValue.value }\n      >\n        <svg\n          style={{\n            transform: `rotate(calc(-90deg + ${Number(props.rotate)}deg))`,\n          }}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox={ `0 0 ${diameter.value} ${diameter.value}` }\n        >\n          <circle\n            class={[\n              'v-progress-circular__underlay',\n              underlayColorClasses.value,\n            ]}\n            style={ underlayColorStyles.value }\n            fill=\"transparent\"\n            cx=\"50%\"\n            cy=\"50%\"\n            r={ MAGIC_RADIUS_CONSTANT }\n            stroke-width={ strokeWidth.value }\n            stroke-dasharray={ CIRCUMFERENCE }\n            stroke-dashoffset={ 0 }\n          />\n\n          <circle\n            class=\"v-progress-circular__overlay\"\n            fill=\"transparent\"\n            cx=\"50%\"\n            cy=\"50%\"\n            r={ MAGIC_RADIUS_CONSTANT }\n            stroke-width={ strokeWidth.value }\n            stroke-dasharray={ CIRCUMFERENCE }\n            stroke-dashoffset={ strokeDashOffset.value }\n          />\n        </svg>\n\n        { slots.default && (\n          <div class=\"v-progress-circular__content\">\n            { slots.default({ value: normalizedValue.value }) }\n          </div>\n        ) }\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n\nexport type VProgressCircular = InstanceType<typeof VProgressCircular>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,aAAa,EAAEC,OAAO;AAAA,SACtBC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY;AAAA,SAC5BC,uBAAuB;AAAA,SACvBC,iBAAiB;AAAA,SACjBC,YAAY,uCAErB;AACA,SAASC,QAAQ,EAAEC,GAAG,EAAEC,KAAK,EAAEC,WAAW,QAAQ,KAAK;AAAA,SAC9CC,aAAa,EAAEC,gBAAgB,EAAEC,SAAS,gCAEnD;AAGA,OAAO,MAAMC,iBAAiB,GAAGF,gBAAgB,EAAE,CAAC;EAClDG,IAAI,EAAE,mBAAmB;EAEzBC,KAAK,EAAE;IACLC,OAAO,EAAEC,MAAM;IACfC,KAAK,EAAED,MAAM;IACbE,aAAa,EAAE,CAACC,OAAO,EAAEH,MAAM,CAAyC;IACxEI,UAAU,EAAE;MACVC,IAAI,EAAE,CAACC,MAAM,EAAEN,MAAM,CAAC;MACtBO,OAAO,EAAE;IACX,CAAC;IACDC,MAAM,EAAE;MACNH,IAAI,EAAE,CAACC,MAAM,EAAEN,MAAM,CAAC;MACtBO,OAAO,EAAE;IACX,CAAC;IACDE,KAAK,EAAE;MACLJ,IAAI,EAAE,CAACC,MAAM,EAAEN,MAAM,CAAC;MACtBO,OAAO,EAAE;IACX,CAAC;IAED,GAAG1B,aAAa,EAAE;IAClB,GAAGE,YAAY,CAAC;MAAE2B,GAAG,EAAE;IAAM,CAAC,CAAC;IAC/B,GAAG1B,cAAc;EACnB,CAAC;EAED2B,KAAK,CAAEb,KAAK,QAAa;IAAA,IAAX;MAAEc;IAAM,CAAC;IACrB,MAAMC,qBAAqB,GAAG,EAAE;IAChC,MAAMC,aAAa,GAAG,CAAC,GAAGC,IAAI,CAACC,EAAE,GAAGH,qBAAqB;IAEzD,MAAMI,IAAI,GAAG3B,GAAG,EAAe;IAE/B,MAAM;MAAE4B;IAAa,CAAC,GAAGjC,YAAY,CAACa,KAAK,CAAC;IAC5C,MAAM;MAAEqB,WAAW;MAAEC;IAAW,CAAC,GAAGtC,OAAO,CAACgB,KAAK,CAAC;IAClD,MAAM;MAAEuB,gBAAgB;MAAEC;IAAgB,CAAC,GAAGlC,YAAY,CAACG,KAAK,CAACO,KAAK,EAAE,OAAO,CAAC,CAAC;IACjF,MAAM;MAAEuB,gBAAgB,EAAEE,oBAAoB;MAAED,eAAe,EAAEE;IAAoB,CAAC,GAAGpC,YAAY,CAACG,KAAK,CAACO,KAAK,EAAE,SAAS,CAAC,CAAC;IAC9H,MAAM;MAAE2B,eAAe;MAAEC;IAAe,CAAC,GAAGxC,uBAAuB,EAAE;IACrE,MAAM;MAAEyC,SAAS;MAAEC;IAAY,CAAC,GAAGzC,iBAAiB,EAAE;IAEtD,MAAM0C,eAAe,GAAGxC,QAAQ,CAAC,MAAM0B,IAAI,CAACe,GAAG,CAAC,CAAC,EAAEf,IAAI,CAACgB,GAAG,CAAC,GAAG,EAAEC,UAAU,CAAClC,KAAK,CAACM,UAAU,CAAC,CAAC,CAAC,CAAC;IAChG,MAAMK,KAAK,GAAGpB,QAAQ,CAAC,MAAMiB,MAAM,CAACR,KAAK,CAACW,KAAK,CAAC,CAAC;IACjD,MAAMwB,IAAI,GAAG5C,QAAQ,CAAC,MAAM;MAC1B;MACA,OAAO+B,UAAU,CAACc,KAAK,GACnB5B,MAAM,CAACR,KAAK,CAACmC,IAAI,CAAC,GAClBL,WAAW,CAACM,KAAK,GACfN,WAAW,CAACM,KAAK,CAACzB,KAAK,GACvBM,IAAI,CAACe,GAAG,CAACrB,KAAK,CAACyB,KAAK,EAAE,EAAE,CAAC;IACjC,CAAC,CAAC;IACF,MAAMC,QAAQ,GAAG9C,QAAQ,CAAC,MAAOwB,qBAAqB,IAAI,CAAC,GAAGJ,KAAK,CAACyB,KAAK,GAAGD,IAAI,CAACC,KAAK,CAAC,GAAI,CAAC,CAAC;IAC7F,MAAME,WAAW,GAAG/C,QAAQ,CAAC,MAAMoB,KAAK,CAACyB,KAAK,GAAGD,IAAI,CAACC,KAAK,GAAGC,QAAQ,CAACD,KAAK,CAAC;IAC7E,MAAMG,gBAAgB,GAAGhD,QAAQ,CAAC,MAAMI,aAAa,CAAE,CAAC,GAAG,GAAGoC,eAAe,CAACK,KAAK,IAAI,GAAG,GAAIpB,aAAa,CAAC,CAAC;IAE7GtB,WAAW,CAAC,MAAM;MAChBiC,eAAe,CAACS,KAAK,GAAGjB,IAAI,CAACiB,KAAK;MAClCP,SAAS,CAACO,KAAK,GAAGjB,IAAI,CAACiB,KAAK;IAC9B,CAAC,CAAC;IAEFvC,SAAS,CAAC;MAAA,OAEAsB,IAAI;MAAA,SACH,CACL,qBAAqB,EACrB;QACE,oCAAoC,EAAE,CAAC,CAACnB,KAAK,CAACI,aAAa;QAC3D,8BAA8B,EAAEwB,cAAc,CAACQ,KAAK;QACpD,qCAAqC,EAAEpC,KAAK,CAACI,aAAa,KAAK;MACjE,CAAC,EACDgB,YAAY,CAACgB,KAAK,EAClBf,WAAW,CAACe,KAAK,EACjBb,gBAAgB,CAACa,KAAK,CACvB;MAAA,SACM,CACLd,UAAU,CAACc,KAAK,EAChBZ,eAAe,CAACY,KAAK,CACtB;MAAA,QACI,aAAa;MAAA,iBACJ,GAAG;MAAA,iBACH,KAAK;MAAA,iBACHpC,KAAK,CAACI,aAAa,GAAGoC,SAAS,GAAGT,eAAe,CAACK;IAAK;MAAA;QAAA,SAG9D;UACLK,SAAS,EAAG,wBAAuBjC,MAAM,CAACR,KAAK,CAACU,MAAM,CAAE;QAC1D,CAAC;QAAA,SACK,4BAA4B;QAAA,WACvB,OAAM2B,QAAQ,CAACD,KAAM,IAAGC,QAAQ,CAACD,KAAM;MAAC;QAAA,SAG1C,CACL,+BAA+B,EAC/BX,oBAAoB,CAACW,KAAK,CAC3B;QAAA,SACOV,mBAAmB,CAACU,KAAK;QAAA,QAC5B,aAAa;QAAA,MACf,KAAK;QAAA,MACL,KAAK;QAAA,KACJrB,qBAAqB;QAAA,gBACVuB,WAAW,CAACF,KAAK;QAAA,oBACbpB,aAAa;QAAA,qBACZ;MAAC;QAAA,SAIf,8BAA8B;QAAA,QAC/B,aAAa;QAAA,MACf,KAAK;QAAA,MACL,KAAK;QAAA,KACJD,qBAAqB;QAAA,gBACVuB,WAAW,CAACF,KAAK;QAAA,oBACbpB,aAAa;QAAA,qBACZuB,gBAAgB,CAACH;MAAK,YAI5CtB,KAAK,CAACL,OAAO;QAAA,SACF;MAA8B,IACrCK,KAAK,CAACL,OAAO,CAAC;QAAE2B,KAAK,EAAEL,eAAe,CAACK;MAAM,CAAC,CAAC,EAEpD;IAAA,EAEJ,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}