@vuetify/nightly 3.0.0-alpha.3 → 3.0.0-beta.2

package/lib/components/VPagination/VPagination.sass

@@ -1,82 +1,16 @@
-@import './_variables.scss'
-
-// Theme
-+theme(v-pagination) using ($material)
-  .v-pagination__item
-    background: map-get($material, 'cards')
-    color: map-deep-get($material, 'text', 'primary')
-
-    &--active
-      color: map-deep-get($material, 'text', 'theme')
-
-  .v-pagination__navigation
-    background: map-get($material, 'cards')
+@forward './variables'
+@use './variables' as *
 
 .v-pagination
-  align-items: center
-  display: inline-flex
-  list-style-type: none
-  justify-content: center
-  margin: 0
-  max-width: 100%
-  width: 100%
-
-  &#{&}
-    padding-left: 0
-
-  > li
-    align-items: center
-    display: flex
-
-  &--circle
-    .v-pagination__item,
-    .v-pagination__more,
-    .v-pagination__navigation
-      border-radius: 50%
-
-  &--disabled
-    pointer-events: none
-    opacity: $pagination-disabled-opacity
-
-  &__item
-    background: transparent
-    border-radius: $pagination-border-radius
-    font-size: $pagination-item-font-size
-    height: $pagination-item-height
-    margin: $pagination-item-margin
-    min-width: $pagination-item-min-width
-    padding: $pagination-item-padding
-    text-decoration: none
-    transition: .3s map-get($transition, 'linear-out-slow-in')
-    width: auto
-    +elevation(2)
-
-    &--active
-      +elevation(4)
-
-  &__navigation
-    +elevation(2)
-    border-radius: $pagination-border-radius
+  &__list
     display: inline-flex
+    list-style-type: none
     justify-content: center
-    align-items: center
-    text-decoration: none
-    height: $pagination-navigation-height
-    width: $pagination-navigation-width
-    margin: $pagination-navigation-margin
-
-    .v-icon
-      transition: $secondary-transition
-      vertical-align: middle
+    width: 100%
 
-    &--disabled
-      opacity: $pagination-navigation-disabled-opacity
-      pointer-events: none
-
-  &__more
-    margin: $pagination-more-margin
-    display: inline-flex
-    align-items: flex-end
-    justify-content: center
-    height: $pagination-more-height
-    width: $pagination-more-width
+  &__item,
+  &__first,
+  &__prev,
+  &__next,
+  &__last
+    margin: $pagination-item-margin

package/lib/components/VPagination/_variables.scss

@@ -1,16 +1,2 @@
-@import '../../styles/styles.sass';
-
-$pagination-border-radius: $border-radius-root !default;
-$pagination-disabled-opacity: 0.6 !default;
-$pagination-item-font-size: map-deep-get($headings, 'subtitle-1', 'size') !default;
-$pagination-item-height: 34px !default;
+// Defaults
 $pagination-item-margin: .3rem !default;
-$pagination-item-min-width: 34px !default;
-$pagination-item-padding: 0 5px !default;
-$pagination-more-height: 32px !default;
-$pagination-more-margin: .3rem !default;
-$pagination-more-width: 32px !default;
-$pagination-navigation-disabled-opacity: 0.6 !default;
-$pagination-navigation-height: 32px !default;
-$pagination-navigation-margin: .3rem 10px !default;
-$pagination-navigation-width: 32px !default;

package/lib/components/VPagination/index.mjs

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

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

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

package/lib/components/VParallax/VParallax.css

@@ -0,0 +1,7 @@
+.v-parallax {
+  position: relative;
+  overflow: hidden;
+}
+.v-parallax--active > .v-img__img {
+  will-change: transform;
+}

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%, ".concat(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: "".concat(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,4BAAqB,KAAKC,QAA1B;AAHJ,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,YAAK,KAAKA,MAAV;AADD,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":";AAAA;AACA,yB,CAEA;;SACSA,I,6BAET;;SACSC,uB,sDAET;;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,KAA/B,EAAsCC,WAAtC,QAAyD,KAAzD;SACSC,e,EAAiBC,e;;AAE1B,SAASC,KAAT,CAAgBC,GAAhB,EAA6B;AAC3B,SAAOC,IAAI,CAACF,KAAL,CAAWE,IAAI,CAACC,GAAL,CAASF,GAAT,CAAX,IAA4BC,IAAI,CAACE,IAAL,CAAUH,GAAV,CAAnC;AACD;;AAED,OAAO,MAAMI,SAAS,GAAGP,eAAe,CAAC;AACvCQ,EAAAA,IAAI,EAAE,WADiC;AAGvCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE;AACLC,MAAAA,IAAI,EAAE,CAACC,MAAD,EAASC,MAAT,CADD;AAELC,MAAAA,OAAO,EAAE;AAFJ;AADF,GAHgC;;AAUvCC,EAAAA,KAAK,CAAEN,KAAF,QAA2B;AAAA,QAAlB;AAAEO,MAAAA,KAAF;AAASC,MAAAA;AAAT,KAAkB;AAC9B,UAAMC,IAAI,GAAGrB,GAAG,EAAhB;AACA,UAAM;AAAEsB,MAAAA,eAAF;AAAmBC,MAAAA;AAAnB,QAAsCzB,uBAAuB,EAAnE;AAEAI,IAAAA,WAAW,CAAC,MAAM;AAAA;;AAChBoB,MAAAA,eAAe,CAACE,KAAhB,kBAAwBH,IAAI,CAACG,KAA7B,qBAAwB,YAAYC,GAApC;AACD,KAFU,CAAX;AAIA,QAAIC,YAAJ;AACAzB,IAAAA,KAAK,CAACsB,cAAD,EAAiBjB,GAAG,IAAI;AAC3B,UAAIA,GAAJ,EAAS;AACPoB,QAAAA,YAAY,GAAGtB,eAAe,CAACkB,eAAe,CAACE,KAAjB,CAA9B;AACAE,QAAAA,YAAY,GAAGA,YAAY,KAAKC,QAAQ,CAACC,gBAA1B,GAA6CD,QAA7C,GAA+DD,YAA9E;AACAA,QAAAA,YAAY,CAACG,gBAAb,CAA8B,QAA9B,EAAwCC,QAAxC,EAAkD;AAAEC,UAAAA,OAAO,EAAE;AAAX,SAAlD;AACAD,QAAAA,QAAQ;AACT,OALD,MAKO;AACLJ,QAAAA,YAAY,CAACM,mBAAb,CAAiC,QAAjC,EAA2CF,QAA3C;AACD;AACF,KATI,CAAL;AAWA/B,IAAAA,eAAe,CAAC,MAAM;AAAA;;AACpB,uBAAA2B,YAAY,SAAZ,0BAAcM,mBAAd,CAAkC,QAAlC,EAA4CF,QAA5C;AACD,KAFc,CAAf;AAIA,QAAIG,KAAK,GAAG,CAAC,CAAb;;AACA,aAASH,QAAT,GAAqB;AACnB,UAAI,CAACP,cAAc,CAACC,KAApB,EAA2B;AAE3BU,MAAAA,oBAAoB,CAACD,KAAD,CAApB;AACAA,MAAAA,KAAK,GAAGE,qBAAqB,CAAC,MAAM;AAAA;;AAClC,cAAMC,EAAsB,GAAG,iBAACf,IAAI,CAACG,KAAN,qBAAC,aAAYC,GAAb,EAA6BY,aAA7B,CAA2C,aAA3C,CAA/B;AACA,YAAI,CAACD,EAAL,EAAS;AAET,cAAME,IAAI,GAAGhB,eAAe,CAACE,KAAhB,CAAuBe,qBAAvB,EAAb;AACA,cAAMC,YAAY,4BAAGd,YAAY,CAACe,YAAhB,oCAAgCC,MAAM,CAACC,WAAzD;AACA,cAAMC,SAAS,4BAAGlB,YAAY,CAACmB,SAAhB,oCAA6BH,MAAM,CAACI,OAAnD;AACA,cAAMC,GAAG,GAAGT,IAAI,CAACS,GAAL,GAAWH,SAAvB;AACA,cAAMI,QAAQ,GAAG,CAACJ,SAAS,GAAGJ,YAAZ,GAA2BO,GAA5B,KAAoCT,IAAI,CAACW,MAAL,GAAcT,YAAlD,CAAjB;AACA,cAAMU,SAAS,GAAG7C,KAAK,CAAC,CAACiC,IAAI,CAACW,MAAL,GAAc,CAACrC,KAAK,CAACC,KAArB,GAA6ByB,IAAI,CAACW,MAAnC,KAA8C,CAACD,QAAD,GAAY,GAA1D,CAAD,CAAvB;AAEAZ,QAAAA,EAAE,CAACe,KAAH,CAASC,WAAT,CAAqB,WAArB,EAAmC,cAAaF,SAAU,aAAYtC,KAAK,CAACC,KAAM,GAAlF;AACD,OAZ4B,CAA7B;AAaD;;AAED,WAAO;AAAA,eAEI,CACL,YADK,EAEL;AAAE,8BAAsBU,cAAc,CAACC;AAAvC,OAFK,CAFJ;AAAA,aAMGH,IANH;AAAA;AAAA,qBAQWS,QARX;AAAA,gBASMA;AATN,OAUOV,KAVP,CAAP;AAaD;;AAnEsC,CAAD,CAAjC","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":"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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"}

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);
+  }
+}