@vuetify/nightly 3.0.0-alpha.8 → 3.0.0-beta.0

package/lib/components/VParallax/VParallax.mjs

@@ -1,95 +1,89 @@
-// @ts-nocheck
+import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
+// Styles
+import "./VParallax.css"; // Components
 
-/* eslint-disable */
-// Style
-import "./VParallax.sass"; // Mixins
+import { VImg } from "../VImg/index.mjs"; // Composables
 
-import Translatable from "../../mixins/translatable/index.mjs"; // Types
+import { useIntersectionObserver } from "../../composables/intersectionObserver.mjs"; // Utilities
 
-import mixins from "../../util/mixins.mjs";
-const baseMixins = mixins(Translatable);
+import { onBeforeUnmount, ref, watch, watchEffect } from 'vue';
+import { defineComponent, getScrollParent } from "../../util/index.mjs";
 
-/* @vue/component */
-export default baseMixins.extend().extend({
-  name: 'v-parallax',
+function floor(val) {
+  return Math.floor(Math.abs(val)) * Math.sign(val);
+}
+
+export const VParallax = defineComponent({
+  name: 'VParallax',
   props: {
-    alt: {
-      type: String,
-      default: ''
-    },
-    height: {
-      type: [String, Number],
-      default: 500
-    },
-    src: String,
-    srcset: String
-  },
-  data: () => ({
-    isBooted: false
-  }),
-  computed: {
-    styles() {
-      return {
-        display: 'block',
-        opacity: this.isBooted ? 1 : 0,
-        transform: `translate(-50%, ${this.parallax}px)`
-      };
+    scale: {
+      type: [Number, String],
+      default: 1.3
     }
-
-  },
-
-  mounted() {
-    this.init();
   },
 
-  methods: {
-    init() {
-      const img = this.$refs.img;
-      if (!img) return;
+  setup(props, _ref) {
+    let {
+      attrs,
+      slots
+    } = _ref;
+    const root = ref();
+    const {
+      intersectionRef,
+      isIntersecting
+    } = useIntersectionObserver();
+    watchEffect(() => {
+      var _root$value;
 
-      if (img.complete) {
-        this.translate();
-        this.listeners();
+      intersectionRef.value = (_root$value = root.value) == null ? void 0 : _root$value.$el;
+    });
+    let scrollParent;
+    watch(isIntersecting, val => {
+      if (val) {
+        scrollParent = getScrollParent(intersectionRef.value);
+        scrollParent = scrollParent === document.scrollingElement ? document : scrollParent;
+        scrollParent.addEventListener('scroll', onScroll, {
+          passive: true
+        });
+        onScroll();
       } else {
-        img.addEventListener('load', () => {
-          this.translate();
-          this.listeners();
-        }, false);
+        scrollParent.removeEventListener('scroll', onScroll);
       }
+    });
+    onBeforeUnmount(() => {
+      var _scrollParent;
 
-      this.isBooted = true;
-    },
+      (_scrollParent = scrollParent) == null ? void 0 : _scrollParent.removeEventListener('scroll', onScroll);
+    });
+    let frame = -1;
 
-    objHeight() {
-      return this.$refs.img.naturalHeight;
-    }
+    function onScroll() {
+      if (!isIntersecting.value) return;
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        var _root$value2, _scrollParent$clientH, _scrollParent$scrollT;
 
-  },
+        const el = ((_root$value2 = root.value) == null ? void 0 : _root$value2.$el).querySelector('.v-img__img');
+        if (!el) return;
+        const rect = intersectionRef.value.getBoundingClientRect();
+        const scrollHeight = (_scrollParent$clientH = scrollParent.clientHeight) != null ? _scrollParent$clientH : window.innerHeight;
+        const scrollPos = (_scrollParent$scrollT = scrollParent.scrollTop) != null ? _scrollParent$scrollT : window.scrollY;
+        const top = rect.top + scrollPos;
+        const progress = (scrollPos + scrollHeight - top) / (rect.height + scrollHeight);
+        const translate = floor((rect.height * +props.scale - rect.height) * (-progress + 0.5));
+        el.style.setProperty('transform', `translateY(${translate}px) scale(${props.scale})`);
+      });
+    }
 
-  render(h) {
-    const imgData = {
-      staticClass: 'v-parallax__image',
-      style: this.styles,
-      attrs: {
-        src: this.src,
-        srcset: this.srcset,
-        alt: this.alt
-      },
-      ref: 'img'
-    };
-    const container = h('div', {
-      staticClass: 'v-parallax__image-container'
-    }, [h('img', imgData)]);
-    const content = h('div', {
-      staticClass: 'v-parallax__content'
-    }, this.$slots.default);
-    return h('div', {
-      staticClass: 'v-parallax',
-      style: {
-        height: `${this.height}px`
-      },
-      on: this.$listeners
-    }, [container, content]);
+    return () => _createVNode(VImg, {
+      "class": ['v-parallax', {
+        'v-parallax--active': isIntersecting.value
+      }],
+      "ref": root,
+      "cover": true,
+      "onLoadstart": onScroll,
+      "onLoad": onScroll
+    }, slots);
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VParallax/VParallax.ts"],"names":["Translatable","mixins","baseMixins","extend","name","props","alt","type","String","default","height","Number","src","srcset","data","isBooted","computed","styles","display","opacity","transform","parallax","mounted","init","methods","img","$refs","complete","translate","listeners","addEventListener","objHeight","naturalHeight","render","h","imgData","staticClass","style","attrs","ref","container","content","$slots","on","$listeners"],"mappings":"AAAA;;AACA;AAEA;AACA,0B,CAEA;;OACOA,Y,6CAEP;;OAEOC,M;AAEP,MAAMC,UAAU,GAAGD,MAAM,CACvBD,YADuB,CAAzB;;AASA;AACA,eAAeE,UAAU,CAACC,MAAX,GAA6BA,MAA7B,CAAoC;AACjDC,EAAAA,IAAI,EAAE,YAD2C;AAGjDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,GAAG,EAAE;AACHC,MAAAA,IAAI,EAAEC,MADH;AAEHC,MAAAA,OAAO,EAAE;AAFN,KADA;AAKLC,IAAAA,MAAM,EAAE;AACNH,MAAAA,IAAI,EAAE,CAACC,MAAD,EAASG,MAAT,CADA;AAENF,MAAAA,OAAO,EAAE;AAFH,KALH;AASLG,IAAAA,GAAG,EAAEJ,MATA;AAULK,IAAAA,MAAM,EAAEL;AAVH,GAH0C;AAgBjDM,EAAAA,IAAI,EAAE,OAAO;AACXC,IAAAA,QAAQ,EAAE;AADC,GAAP,CAhB2C;AAoBjDC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,MAAM,GAAY;AAChB,aAAO;AACLC,QAAAA,OAAO,EAAE,OADJ;AAELC,QAAAA,OAAO,EAAE,KAAKJ,QAAL,GAAgB,CAAhB,GAAoB,CAFxB;AAGLK,QAAAA,SAAS,EAAG,mBAAkB,KAAKC,QAAS;AAHvC,OAAP;AAKD;;AAPO,GApBuC;;AA8BjDC,EAAAA,OAAO,GAAI;AACT,SAAKC,IAAL;AACD,GAhCgD;;AAkCjDC,EAAAA,OAAO,EAAE;AACPD,IAAAA,IAAI,GAAI;AACN,YAAME,GAAG,GAAG,KAAKC,KAAL,CAAWD,GAAvB;AAEA,UAAI,CAACA,GAAL,EAAU;;AAEV,UAAIA,GAAG,CAACE,QAAR,EAAkB;AAChB,aAAKC,SAAL;AACA,aAAKC,SAAL;AACD,OAHD,MAGO;AACLJ,QAAAA,GAAG,CAACK,gBAAJ,CAAqB,MAArB,EAA6B,MAAM;AACjC,eAAKF,SAAL;AACA,eAAKC,SAAL;AACD,SAHD,EAGG,KAHH;AAID;;AAED,WAAKd,QAAL,GAAgB,IAAhB;AACD,KAjBM;;AAkBPgB,IAAAA,SAAS,GAAI;AACX,aAAO,KAAKL,KAAL,CAAWD,GAAX,CAAeO,aAAtB;AACD;;AApBM,GAlCwC;;AAyDjDC,EAAAA,MAAM,CAAEC,CAAF,EAAY;AAChB,UAAMC,OAAkB,GAAG;AACzBC,MAAAA,WAAW,EAAE,mBADY;AAEzBC,MAAAA,KAAK,EAAE,KAAKpB,MAFa;AAGzBqB,MAAAA,KAAK,EAAE;AACL1B,QAAAA,GAAG,EAAE,KAAKA,GADL;AAELC,QAAAA,MAAM,EAAE,KAAKA,MAFR;AAGLP,QAAAA,GAAG,EAAE,KAAKA;AAHL,OAHkB;AAQzBiC,MAAAA,GAAG,EAAE;AARoB,KAA3B;AAWA,UAAMC,SAAS,GAAGN,CAAC,CAAC,KAAD,EAAQ;AACzBE,MAAAA,WAAW,EAAE;AADY,KAAR,EAEhB,CACDF,CAAC,CAAC,KAAD,EAAQC,OAAR,CADA,CAFgB,CAAnB;AAMA,UAAMM,OAAO,GAAGP,CAAC,CAAC,KAAD,EAAQ;AACvBE,MAAAA,WAAW,EAAE;AADU,KAAR,EAEd,KAAKM,MAAL,CAAYjC,OAFE,CAAjB;AAIA,WAAOyB,CAAC,CAAC,KAAD,EAAQ;AACdE,MAAAA,WAAW,EAAE,YADC;AAEdC,MAAAA,KAAK,EAAE;AACL3B,QAAAA,MAAM,EAAG,GAAE,KAAKA,MAAO;AADlB,OAFO;AAKdiC,MAAAA,EAAE,EAAE,KAAKC;AALK,KAAR,EAML,CAACJ,SAAD,EAAYC,OAAZ,CANK,CAAR;AAOD;;AAtFgD,CAApC,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Style\nimport './VParallax.sass'\n\n// Mixins\nimport Translatable from '../../mixins/translatable'\n\n// Types\nimport { VNode, VNodeData } from 'vue/types/vnode'\nimport mixins from '../../util/mixins'\n\nconst baseMixins = mixins(\n  Translatable\n)\ninterface options extends InstanceType<typeof baseMixins> {\n  $refs: {\n    img: HTMLImageElement\n  }\n}\n\n/* @vue/component */\nexport default baseMixins.extend<options>().extend({\n  name: 'v-parallax',\n\n  props: {\n    alt: {\n      type: String,\n      default: '',\n    },\n    height: {\n      type: [String, Number],\n      default: 500,\n    },\n    src: String,\n    srcset: String,\n  },\n\n  data: () => ({\n    isBooted: false,\n  }),\n\n  computed: {\n    styles (): object {\n      return {\n        display: 'block',\n        opacity: this.isBooted ? 1 : 0,\n        transform: `translate(-50%, ${this.parallax}px)`,\n      }\n    },\n  },\n\n  mounted () {\n    this.init()\n  },\n\n  methods: {\n    init () {\n      const img = this.$refs.img\n\n      if (!img) return\n\n      if (img.complete) {\n        this.translate()\n        this.listeners()\n      } else {\n        img.addEventListener('load', () => {\n          this.translate()\n          this.listeners()\n        }, false)\n      }\n\n      this.isBooted = true\n    },\n    objHeight () {\n      return this.$refs.img.naturalHeight\n    },\n  },\n\n  render (h): VNode {\n    const imgData: VNodeData = {\n      staticClass: 'v-parallax__image',\n      style: this.styles,\n      attrs: {\n        src: this.src,\n        srcset: this.srcset,\n        alt: this.alt,\n      },\n      ref: 'img',\n    }\n\n    const container = h('div', {\n      staticClass: 'v-parallax__image-container',\n    }, [\n      h('img', imgData),\n    ])\n\n    const content = h('div', {\n      staticClass: 'v-parallax__content',\n    }, this.$slots.default)\n\n    return h('div', {\n      staticClass: 'v-parallax',\n      style: {\n        height: `${this.height}px`,\n      },\n      on: this.$listeners,\n    }, [container, content])\n  },\n})\n"],"file":"VParallax.mjs"}
+{"version":3,"sources":["../../../src/components/VParallax/VParallax.tsx"],"names":["VImg","useIntersectionObserver","onBeforeUnmount","ref","watch","watchEffect","defineComponent","getScrollParent","floor","val","Math","abs","sign","VParallax","name","props","scale","type","Number","String","default","setup","attrs","slots","root","intersectionRef","isIntersecting","value","$el","scrollParent","document","scrollingElement","addEventListener","onScroll","passive","removeEventListener","frame","cancelAnimationFrame","requestAnimationFrame","el","querySelector","rect","getBoundingClientRect","scrollHeight","clientHeight","window","innerHeight","scrollPos","scrollTop","scrollY","top","progress","height","translate","style","setProperty"],"mappings":"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","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 { onBeforeUnmount, ref, watch, watchEffect } from 'vue'\nimport { defineComponent, getScrollParent } from '@/util'\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: 1.3,\n    },\n  },\n\n  setup (props, { attrs, slots }) {\n    const root = ref<VImg>()\n    const { intersectionRef, isIntersecting } = useIntersectionObserver()\n\n    watchEffect(() => {\n      intersectionRef.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    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 rect = intersectionRef.value!.getBoundingClientRect()\n        const scrollHeight = scrollParent.clientHeight ?? window.innerHeight\n        const scrollPos = scrollParent.scrollTop ?? window.scrollY\n        const top = rect.top + scrollPos\n        const progress = (scrollPos + scrollHeight - top) / (rect.height + scrollHeight)\n        const translate = floor((rect.height * +props.scale - rect.height) * (-progress + 0.5))\n\n        el.style.setProperty('transform', `translateY(${translate}px) scale(${props.scale})`)\n      })\n    }\n\n    return () => (\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})\n\nexport type VParallax = InstanceType<typeof VParallax>\n"],"file":"VParallax.mjs"}

package/lib/components/VParallax/VParallax.sass

@@ -1,37 +1,6 @@
-@import './_variables.scss'
-
 .v-parallax
   position: relative
   overflow: hidden
-  z-index: 0
-
-  &__image-container
-    position: absolute
-    top: 0
-    left: 0
-    right: 0
-    bottom: 0
-    z-index: 1
-    contain: strict
 
-  &__image
-    position: absolute
-    bottom: 0
-    left: 50%
-    min-width: 100%
-    min-height: 100%
-    display: none
-    transform: translate(-50%, 0)
+  &--active > .v-img__img
     will-change: transform
-    transition: $parallax-transition
-    z-index: 1
-
-  &__content
-    color: map-get($shades, 'white')
-    height: 100%
-    z-index: 2
-    position: relative
-    display: flex
-    flex-direction: column
-    justify-content: center
-    padding: $parallax-padding

package/lib/components/VParallax/index.mjs

@@ -1,4 +1,2 @@
-import VParallax from "./VParallax.mjs";
-export { VParallax };
-export default VParallax;
+export { VParallax } from "./VParallax.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VParallax/index.ts"],"names":["VParallax"],"mappings":"OAAOA,S;AAEP,SAASA,SAAT;AACA,eAAeA,SAAf","sourcesContent":["import VParallax from './VParallax'\n\nexport { VParallax }\nexport default VParallax\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VParallax/index.ts"],"names":["VParallax"],"mappings":"SAASA,S","sourcesContent":["export { VParallax } from './VParallax'\n"],"file":"index.mjs"}

package/lib/components/VPicker/VPicker.mjs

@@ -1,12 +1,12 @@
 // @ts-nocheck
 
 /* eslint-disable */
-import "./VPicker.sass";
-import "../VCard/VCard.sass"; // Mixins
+import "./VPicker.css";
+import "../VCard/VCard.css"; // Mixins
 
-import Colorable from "../../mixins/colorable/index.mjs";
-import Elevatable from "../../mixins/elevatable/index.mjs";
-import Themeable from "../../mixins/themeable/index.mjs"; // Helpers
+import Colorable from "../../mixins/colorable.mjs";
+import Elevatable from "../../mixins/elevatable.mjs";
+import Themeable from "../../mixins/themeable.mjs"; // Helpers
 
 import { convertToUnit } from "../../util/helpers.mjs"; // Types
 

package/lib/components/VPicker/VPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VPicker/VPicker.ts"],"names":["Colorable","Elevatable","Themeable","convertToUnit","mixins","extend","name","props","flat","Boolean","fullWidth","landscape","noTitle","transition","type","String","default","width","Number","computed","computedTitleColor","defaultTitleColor","isDark","color","methods","genTitle","$createElement","setBackgroundColor","staticClass","class","$slots","title","genBodyTransition","genBody","themeClasses","style","undefined","genActions","actions","render","h","elevationClasses"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\nimport './VPicker.sass'\nimport '../VCard/VCard.sass'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\nimport Elevatable from '../../mixins/elevatable'\nimport Themeable from '../../mixins/themeable'\n\n// Helpers\nimport { convertToUnit } from '../../util/helpers'\n\n// Types\nimport { VNode } from 'vue/types'\nimport mixins from '../../util/mixins'\n\n/* @vue/component */\nexport default mixins(\n  Colorable,\n  Elevatable,\n  Themeable\n).extend({\n  name: 'v-picker',\n\n  props: {\n    flat: Boolean,\n    fullWidth: Boolean,\n    landscape: Boolean,\n    noTitle: Boolean,\n    transition: {\n      type: String,\n      default: 'fade-transition',\n    },\n    width: {\n      type: [Number, String],\n      default: 290,\n    },\n  },\n\n  computed: {\n    computedTitleColor (): string | false {\n      const defaultTitleColor = this.isDark ? false : (this.color || 'primary')\n      return this.color || defaultTitleColor\n    },\n  },\n\n  methods: {\n    genTitle () {\n      return this.$createElement('div', this.setBackgroundColor(this.computedTitleColor, {\n        staticClass: 'v-picker__title',\n        class: {\n          'v-picker__title--landscape': this.landscape,\n        },\n      }), this.$slots.title)\n    },\n    genBodyTransition () {\n      return this.$createElement('transition', {\n        props: {\n          name: this.transition,\n        },\n      }, this.$slots.default)\n    },\n    genBody () {\n      return this.$createElement('div', {\n        staticClass: 'v-picker__body',\n        class: {\n          'v-picker__body--no-title': this.noTitle,\n          ...this.themeClasses,\n        },\n        style: this.fullWidth ? undefined : {\n          width: convertToUnit(this.width),\n        },\n      }, [\n        this.genBodyTransition(),\n      ])\n    },\n    genActions () {\n      return this.$createElement('div', {\n        staticClass: 'v-picker__actions v-card__actions',\n        class: {\n          'v-picker__actions--no-title': this.noTitle,\n        },\n      }, this.$slots.actions)\n    },\n  },\n\n  render (h): VNode {\n    return h('div', {\n      staticClass: 'v-picker v-card',\n      class: {\n        'v-picker--flat': this.flat,\n        'v-picker--landscape': this.landscape,\n        'v-picker--full-width': this.fullWidth,\n        ...this.themeClasses,\n        ...this.elevationClasses,\n      },\n    }, [\n      this.$slots.title ? this.genTitle() : null,\n      this.genBody(),\n      this.$slots.actions ? this.genActions() : null,\n    ])\n  },\n})\n"],"file":"VPicker.mjs"}
+{"version":3,"sources":["../../../src/components/VPicker/VPicker.ts"],"names":["Colorable","Elevatable","Themeable","convertToUnit","mixins","extend","name","props","flat","Boolean","fullWidth","landscape","noTitle","transition","type","String","default","width","Number","computed","computedTitleColor","defaultTitleColor","isDark","color","methods","genTitle","$createElement","setBackgroundColor","staticClass","class","$slots","title","genBodyTransition","genBody","themeClasses","style","undefined","genActions","actions","render","h","elevationClasses"],"mappings":"AAAA;;AACA;AAEA;AACA,4B,CAEA;;OACOA,S;OACAC,U;OACAC,S,oCAEP;;SACSC,a,kCAET;;OAEOC,M;AAEP;;AACA,eAAeA,MAAM,CACnBJ,SADmB,EAEnBC,UAFmB,EAGnBC,SAHmB,CAAN,CAIbG,MAJa,CAIN;AACPC,EAAAA,IAAI,EAAE,UADC;AAGPC,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAEC,OADD;AAELC,IAAAA,SAAS,EAAED,OAFN;AAGLE,IAAAA,SAAS,EAAEF,OAHN;AAILG,IAAAA,OAAO,EAAEH,OAJJ;AAKLI,IAAAA,UAAU,EAAE;AACVC,MAAAA,IAAI,EAAEC,MADI;AAEVC,MAAAA,OAAO,EAAE;AAFC,KALP;AASLC,IAAAA,KAAK,EAAE;AACLH,MAAAA,IAAI,EAAE,CAACI,MAAD,EAASH,MAAT,CADD;AAELC,MAAAA,OAAO,EAAE;AAFJ;AATF,GAHA;AAkBPG,EAAAA,QAAQ,EAAE;AACRC,IAAAA,kBAAkB,GAAoB;AACpC,YAAMC,iBAAiB,GAAG,KAAKC,MAAL,GAAc,KAAd,GAAuB,KAAKC,KAAL,IAAc,SAA/D;AACA,aAAO,KAAKA,KAAL,IAAcF,iBAArB;AACD;;AAJO,GAlBH;AAyBPG,EAAAA,OAAO,EAAE;AACPC,IAAAA,QAAQ,GAAI;AACV,aAAO,KAAKC,cAAL,CAAoB,KAApB,EAA2B,KAAKC,kBAAL,CAAwB,KAAKP,kBAA7B,EAAiD;AACjFQ,QAAAA,WAAW,EAAE,iBADoE;AAEjFC,QAAAA,KAAK,EAAE;AACL,wCAA8B,KAAKlB;AAD9B;AAF0E,OAAjD,CAA3B,EAKH,KAAKmB,MAAL,CAAYC,KALT,CAAP;AAMD,KARM;;AASPC,IAAAA,iBAAiB,GAAI;AACnB,aAAO,KAAKN,cAAL,CAAoB,YAApB,EAAkC;AACvCnB,QAAAA,KAAK,EAAE;AACLD,UAAAA,IAAI,EAAE,KAAKO;AADN;AADgC,OAAlC,EAIJ,KAAKiB,MAAL,CAAYd,OAJR,CAAP;AAKD,KAfM;;AAgBPiB,IAAAA,OAAO,GAAI;AACT,aAAO,KAAKP,cAAL,CAAoB,KAApB,EAA2B;AAChCE,QAAAA,WAAW,EAAE,gBADmB;AAEhCC,QAAAA,KAAK,EAAE;AACL,sCAA4B,KAAKjB,OAD5B;AAEL,aAAG,KAAKsB;AAFH,SAFyB;AAMhCC,QAAAA,KAAK,EAAE,KAAKzB,SAAL,GAAiB0B,SAAjB,GAA6B;AAClCnB,UAAAA,KAAK,EAAEd,aAAa,CAAC,KAAKc,KAAN;AADc;AANJ,OAA3B,EASJ,CACD,KAAKe,iBAAL,EADC,CATI,CAAP;AAYD,KA7BM;;AA8BPK,IAAAA,UAAU,GAAI;AACZ,aAAO,KAAKX,cAAL,CAAoB,KAApB,EAA2B;AAChCE,QAAAA,WAAW,EAAE,mCADmB;AAEhCC,QAAAA,KAAK,EAAE;AACL,yCAA+B,KAAKjB;AAD/B;AAFyB,OAA3B,EAKJ,KAAKkB,MAAL,CAAYQ,OALR,CAAP;AAMD;;AArCM,GAzBF;;AAiEPC,EAAAA,MAAM,CAAEC,CAAF,EAAY;AAChB,WAAOA,CAAC,CAAC,KAAD,EAAQ;AACdZ,MAAAA,WAAW,EAAE,iBADC;AAEdC,MAAAA,KAAK,EAAE;AACL,0BAAkB,KAAKrB,IADlB;AAEL,+BAAuB,KAAKG,SAFvB;AAGL,gCAAwB,KAAKD,SAHxB;AAIL,WAAG,KAAKwB,YAJH;AAKL,WAAG,KAAKO;AALH;AAFO,KAAR,EASL,CACD,KAAKX,MAAL,CAAYC,KAAZ,GAAoB,KAAKN,QAAL,EAApB,GAAsC,IADrC,EAED,KAAKQ,OAAL,EAFC,EAGD,KAAKH,MAAL,CAAYQ,OAAZ,GAAsB,KAAKD,UAAL,EAAtB,GAA0C,IAHzC,CATK,CAAR;AAcD;;AAhFM,CAJM,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\nimport './VPicker.sass'\nimport '../VCard/VCard.sass'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\nimport Elevatable from '../../mixins/elevatable'\nimport Themeable from '../../mixins/themeable'\n\n// Helpers\nimport { convertToUnit } from '../../util/helpers'\n\n// Types\nimport { VNode } from 'vue/types'\nimport mixins from '../../util/mixins'\n\n/* @vue/component */\nexport default mixins(\n  Colorable,\n  Elevatable,\n  Themeable\n).extend({\n  name: 'v-picker',\n\n  props: {\n    flat: Boolean,\n    fullWidth: Boolean,\n    landscape: Boolean,\n    noTitle: Boolean,\n    transition: {\n      type: String,\n      default: 'fade-transition',\n    },\n    width: {\n      type: [Number, String],\n      default: 290,\n    },\n  },\n\n  computed: {\n    computedTitleColor (): string | false {\n      const defaultTitleColor = this.isDark ? false : (this.color || 'primary')\n      return this.color || defaultTitleColor\n    },\n  },\n\n  methods: {\n    genTitle () {\n      return this.$createElement('div', this.setBackgroundColor(this.computedTitleColor, {\n        staticClass: 'v-picker__title',\n        class: {\n          'v-picker__title--landscape': this.landscape,\n        },\n      }), this.$slots.title)\n    },\n    genBodyTransition () {\n      return this.$createElement('transition', {\n        props: {\n          name: this.transition,\n        },\n      }, this.$slots.default)\n    },\n    genBody () {\n      return this.$createElement('div', {\n        staticClass: 'v-picker__body',\n        class: {\n          'v-picker__body--no-title': this.noTitle,\n          ...this.themeClasses,\n        },\n        style: this.fullWidth ? undefined : {\n          width: convertToUnit(this.width),\n        },\n      }, [\n        this.genBodyTransition(),\n      ])\n    },\n    genActions () {\n      return this.$createElement('div', {\n        staticClass: 'v-picker__actions v-card__actions',\n        class: {\n          'v-picker__actions--no-title': this.noTitle,\n        },\n      }, this.$slots.actions)\n    },\n  },\n\n  render (h): VNode {\n    return h('div', {\n      staticClass: 'v-picker v-card',\n      class: {\n        'v-picker--flat': this.flat,\n        'v-picker--landscape': this.landscape,\n        'v-picker--full-width': this.fullWidth,\n        ...this.themeClasses,\n        ...this.elevationClasses,\n      },\n    }, [\n      this.$slots.title ? this.genTitle() : null,\n      this.genBody(),\n      this.$slots.actions ? this.genActions() : null,\n    ])\n  },\n})\n"],"file":"VPicker.mjs"}

package/lib/components/VProgressCircular/VProgressCircular.css

@@ -0,0 +1,101 @@
+.v-progress-circular {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  position: relative;
+  vertical-align: middle;
+}
+.v-progress-circular > svg {
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 0;
+}
+
+.v-progress-circular__content {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.v-progress-circular__underlay {
+  color: rgba(var(--v-border-color), var(--v-border-opacity));
+  stroke: currentColor;
+  z-index: 1;
+}
+
+.v-progress-circular__overlay {
+  stroke: currentColor;
+  transition: all 0.2s ease-in-out, stroke-width 0s;
+  z-index: 2;
+}
+
+.v-progress-circular--size-x-small {
+  height: 16px;
+  width: 16px;
+}
+.v-progress-circular--size-small {
+  height: 24px;
+  width: 24px;
+}
+.v-progress-circular--size-default {
+  height: 32px;
+  width: 32px;
+}
+.v-progress-circular--size-large {
+  height: 48px;
+  width: 48px;
+}
+.v-progress-circular--size-x-large {
+  height: 64px;
+  width: 64px;
+}
+
+.v-progress-circular--indeterminate > svg {
+  animation: progress-circular-rotate 1.4s linear infinite;
+  transform-origin: center center;
+  transition: all 0.2s ease-in-out;
+}
+.v-progress-circular--indeterminate .v-progress-circular__overlay {
+  animation: progress-circular-dash 1.4s ease-in-out infinite;
+  stroke-dasharray: 25, 200;
+  stroke-dashoffset: 0;
+  stroke-linecap: round;
+}
+
+.v-progress-circular--disable-shrink > svg {
+  animation-duration: 0.7s;
+}
+.v-progress-circular--disable-shrink .v-progress-circular__overlay {
+  animation: none;
+}
+
+.v-progress-circular--indeterminate:not(.v-progress-circular--visible) > svg,
+.v-progress-circular--indeterminate:not(.v-progress-circular--visible) .v-progress-circular__overlay {
+  animation-play-state: paused !important;
+}
+
+@keyframes progress-circular-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0px;
+  }
+  50% {
+    stroke-dasharray: 100, 200;
+    stroke-dashoffset: -15px;
+  }
+  100% {
+    stroke-dasharray: 100, 200;
+    stroke-dashoffset: -124px;
+  }
+}
+@keyframes progress-circular-rotate {
+  100% {
+    transform: rotate(270deg);
+  }
+}

package/lib/components/VProgressCircular/VProgressCircular.mjs

@@ -1,19 +1,20 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VProgressCircular.sass"; // Composables
+import "./VProgressCircular.css"; // Composables
 
 import { makeSizeProps, useSize } from "../../composables/size.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
-import { makeThemeProps, useTheme } from "../../composables/theme.mjs";
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
 import { useIntersectionObserver } from "../../composables/intersectionObserver.mjs";
-import { useTextColor } from "../../composables/color.mjs"; // Utilities
+import { useTextColor } from "../../composables/color.mjs";
+import { useResizeObserver } from "../../composables/resizeObserver.mjs"; // Utilities
 
-import { computed, defineComponent, toRef } from 'vue';
-import { convertToUnit, makeProps } from "../../util/index.mjs"; // Types
+import { computed, ref, toRef, watchEffect } from 'vue';
+import { convertToUnit, defineComponent } from "../../util/index.mjs"; // Types
 
-export default defineComponent({
+export const VProgressCircular = defineComponent({
   name: 'VProgressCircular',
-  props: makeProps({
+  props: {
     bgColor: String,
     color: String,
     indeterminate: [Boolean, String],
@@ -34,20 +35,22 @@ export default defineComponent({
       tag: 'div'
     }),
     ...makeThemeProps()
-  }),
+  },
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
     const MAGIC_RADIUS_CONSTANT = 20;
     const CIRCUMFERENCE = 2 * Math.PI * MAGIC_RADIUS_CONSTANT;
+    const root = ref();
     const {
       themeClasses
-    } = useTheme(props);
+    } = provideTheme(props);
     const {
       sizeClasses,
       sizeStyles
-    } = useSize(props, 'v-progress-circular');
+    } = useSize(props);
     const {
       textColorClasses,
       textColorStyles
@@ -60,17 +63,25 @@ export default defineComponent({
       intersectionRef,
       isIntersecting
     } = useIntersectionObserver();
+    const {
+      resizeRef,
+      contentRect
+    } = useResizeObserver();
     const normalizedValue = computed(() => Math.max(0, Math.min(100, parseFloat(props.modelValue))));
     const width = computed(() => Number(props.width));
     const size = computed(() => {
       // Get size from element if size prop value is small, large etc
-      return sizeStyles.value ? Number(props.size) : intersectionRef.value ? intersectionRef.value.getBoundingClientRect().width : Math.max(width.value, 32);
+      return sizeStyles.value ? Number(props.size) : contentRect.value ? contentRect.value.width : Math.max(width.value, 32);
     });
     const diameter = computed(() => MAGIC_RADIUS_CONSTANT / (1 - width.value / size.value) * 2);
     const strokeWidth = computed(() => width.value / size.value * diameter.value);
     const strokeDashOffset = computed(() => convertToUnit((100 - normalizedValue.value) / 100 * CIRCUMFERENCE));
+    watchEffect(() => {
+      intersectionRef.value = root.value;
+      resizeRef.value = root.value;
+    });
     return () => _createVNode(props.tag, {
-      "ref": intersectionRef,
+      "ref": root,
       "class": ['v-progress-circular', {
         'v-progress-circular--indeterminate': !!props.indeterminate,
         'v-progress-circular--visible': isIntersecting.value,
@@ -98,7 +109,7 @@ export default defineComponent({
         "stroke-width": strokeWidth.value,
         "stroke-dasharray": CIRCUMFERENCE,
         "stroke-dashoffset": 0
-      }, null, 14, ["r", "stroke-width", "stroke-dasharray"]), _createVNode("circle", {
+      }, null), _createVNode("circle", {
         "class": "v-progress-circular__overlay",
         "fill": "transparent",
         "cx": "50%",
@@ -107,13 +118,12 @@ export default defineComponent({
         "stroke-width": strokeWidth.value,
         "stroke-dasharray": CIRCUMFERENCE,
         "stroke-dashoffset": strokeDashOffset.value
-      }, null, 8, ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"])]), slots.default && _createVNode("div", {
+      }, null)]), slots.default && _createVNode("div", {
         "class": "v-progress-circular__content"
       }, [slots.default({
         value: normalizedValue.value
-      })])],
-      _: 1
-    }, 8, ["class", "style", "aria-valuenow"]);
+      })])]
+    });
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VProgressCircular/VProgressCircular.tsx"],"names":["makeSizeProps","useSize","makeTagProps","makeThemeProps","useTheme","useIntersectionObserver","useTextColor","computed","defineComponent","toRef","convertToUnit","makeProps","name","props","bgColor","String","color","indeterminate","Boolean","modelValue","type","Number","default","rotate","width","tag","setup","slots","MAGIC_RADIUS_CONSTANT","CIRCUMFERENCE","Math","PI","themeClasses","sizeClasses","sizeStyles","textColorClasses","textColorStyles","underlayColorClasses","underlayColorStyles","intersectionRef","isIntersecting","normalizedValue","max","min","parseFloat","size","value","getBoundingClientRect","diameter","strokeWidth","strokeDashOffset","undefined","transform"],"mappings":"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","sourcesContent":["// Styles\nimport './VProgressCircular.sass'\n\n// Composables\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, useTheme } from '@/composables/theme'\nimport { useIntersectionObserver } from '@/composables/intersectionObserver'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, defineComponent, toRef } from 'vue'\nimport { convertToUnit, makeProps } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'VProgressCircular',\n\n  props: makeProps({\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 { themeClasses } = useTheme(props)\n    const { sizeClasses, sizeStyles } = useSize(props, 'v-progress-circular')\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))\n    const { textColorClasses: underlayColorClasses, textColorStyles: underlayColorStyles } = useTextColor(toRef(props, 'bgColor'))\n    const { intersectionRef, isIntersecting } = useIntersectionObserver()\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 ? Number(props.size) : intersectionRef.value\n        ? intersectionRef.value.getBoundingClientRect().width : 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    return () => (\n      <props.tag\n        ref={ intersectionRef }\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        { slots.default && (\n          <div class=\"v-progress-circular__content\">\n            { slots.default({ value: normalizedValue.value }) }\n          </div>\n        ) }\n      </props.tag>\n    )\n  },\n})\n"],"file":"VProgressCircular.mjs"}
+{"version":3,"sources":["../../../src/components/VProgressCircular/VProgressCircular.tsx"],"names":["makeSizeProps","useSize","makeTagProps","makeThemeProps","provideTheme","useIntersectionObserver","useTextColor","useResizeObserver","computed","ref","toRef","watchEffect","convertToUnit","defineComponent","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"],"mappings":"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","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 { useTextColor } from '@/composables/color'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { computed, ref, toRef, watchEffect } from 'vue'\nimport { convertToUnit, defineComponent } 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    return () => (\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        { slots.default && (\n          <div class=\"v-progress-circular__content\">\n            { slots.default({ value: normalizedValue.value }) }\n          </div>\n        ) }\n      </props.tag>\n    )\n  },\n})\n"],"file":"VProgressCircular.mjs"}

package/lib/components/VProgressCircular/VProgressCircular.sass

@@ -1,5 +1,7 @@
-// Imports
-@import ./index
+@forward './variables'
+@use 'sass:list'
+@use '../../styles/settings'
+@use './variables' as *
 
 // Elements
 .v-progress-circular
@@ -38,7 +40,7 @@
 // Modifiers
 .v-progress-circular
   @each $name, $multiplier in $progress-circular-sizes
-    $size: $progress-circular-size + ($size-scale * $multiplier)
+    $size: $progress-circular-size + (settings.$size-scale * $multiplier)
 
     &--size-#{$name}
       height: $size
@@ -58,7 +60,7 @@
 
 .v-progress-circular--disable-shrink
   > svg
-    animation-duration: nth($progress-circular-rotate-animation, 2) / 2
+    animation-duration: list.nth($progress-circular-rotate-animation, 2) * .5
 
   .v-progress-circular__overlay
     animation: none

package/lib/components/VProgressCircular/_variables.scss

@@ -1,5 +1,5 @@
 $progress-circular-intermediate-svg-transition: all 0.2s ease-in-out !default;
-$progress-circular-overlay-transition: all 0.6s ease-in-out, stroke-width 0s !default;
+$progress-circular-overlay-transition: all 0.2s ease-in-out, stroke-width 0s !default;
 $progress-circular-rotate-animation: progress-circular-rotate 1.4s linear infinite !default;
 $progress-circular-rotate-dash: progress-circular-dash 1.4s ease-in-out infinite !default;
 $progress-circular-size: 32px !default;

package/lib/components/VProgressCircular/index.mjs

@@ -1,2 +1,2 @@
-export { default as VProgressCircular } from "./VProgressCircular.mjs";
+export { VProgressCircular } from "./VProgressCircular.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VProgressCircular/index.ts"],"names":["default","VProgressCircular"],"mappings":"SAASA,OAAO,IAAIC,iB","sourcesContent":["export { default as VProgressCircular } from './VProgressCircular'\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VProgressCircular/index.ts"],"names":["VProgressCircular"],"mappings":"SAASA,iB","sourcesContent":["export { VProgressCircular } from './VProgressCircular'\n"],"file":"index.mjs"}