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

package/lib/components/VProgressCircular/VProgressCircular.mjs

@@ -1,160 +1,129 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VProgressCircular.sass"; // Directives
-
-import intersect from "../../directives/intersect/index.mjs"; // Mixins
+import "./VProgressCircular.css"; // Composables
 
-import Colorable from "../../mixins/colorable/index.mjs"; // Utils
+import { makeSizeProps, useSize } from "../../composables/size.mjs";
+import { makeTagProps } from "../../composables/tag.mjs";
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
+import { useIntersectionObserver } from "../../composables/intersectionObserver.mjs";
+import { useTextColor } from "../../composables/color.mjs";
+import { useResizeObserver } from "../../composables/resizeObserver.mjs"; // Utilities
 
-import { convertToUnit } from "../../util/helpers.mjs"; // Types
+import { computed, ref, toRef, watchEffect } from 'vue';
+import { convertToUnit, defineComponent } from "../../util/index.mjs"; // Types
 
-/* @vue/component */
-export default Colorable.extend({
-  name: 'v-progress-circular',
-  directives: {
-    intersect
-  },
+export const VProgressCircular = defineComponent({
+  name: 'VProgressCircular',
   props: {
-    button: Boolean,
-    indeterminate: Boolean,
-    rotate: {
+    bgColor: String,
+    color: String,
+    indeterminate: [Boolean, String],
+    modelValue: {
       type: [Number, String],
       default: 0
     },
-    size: {
+    rotate: {
       type: [Number, String],
-      default: 32
+      default: 0
     },
     width: {
       type: [Number, String],
       default: 4
     },
-    value: {
-      type: [Number, String],
-      default: 0
-    }
-  },
-  data: () => ({
-    radius: 20,
-    isVisible: true
-  }),
-  computed: {
-    calculatedSize() {
-      return Number(this.size) + (this.button ? 8 : 0);
-    },
-
-    circumference() {
-      return 2 * Math.PI * this.radius;
-    },
-
-    classes() {
-      return {
-        'v-progress-circular--visible': this.isVisible,
-        'v-progress-circular--indeterminate': this.indeterminate,
-        'v-progress-circular--button': this.button
-      };
-    },
-
-    normalizedValue() {
-      if (this.value < 0) {
-        return 0;
-      }
-
-      if (this.value > 100) {
-        return 100;
-      }
-
-      return parseFloat(this.value);
-    },
-
-    strokeDashArray() {
-      return Math.round(this.circumference * 1000) / 1000;
-    },
-
-    strokeDashOffset() {
-      return (100 - this.normalizedValue) / 100 * this.circumference + 'px';
-    },
-
-    strokeWidth() {
-      return Number(this.width) / +this.size * this.viewBoxSize * 2;
-    },
-
-    styles() {
-      return {
-        height: convertToUnit(this.calculatedSize),
-        width: convertToUnit(this.calculatedSize)
-      };
-    },
-
-    svgStyles() {
-      return {
-        transform: "rotate(".concat(Number(this.rotate), "deg)")
-      };
-    },
-
-    viewBoxSize() {
-      return this.radius / (1 - Number(this.width) / +this.size);
-    }
-
-  },
-  methods: {
-    genCircle(name, offset) {
-      return this.$createElement('circle', {
-        class: "v-progress-circular__".concat(name),
-        attrs: {
-          fill: 'transparent',
-          cx: 2 * this.viewBoxSize,
-          cy: 2 * this.viewBoxSize,
-          r: this.radius,
-          'stroke-width': this.strokeWidth,
-          'stroke-dasharray': this.strokeDashArray,
-          'stroke-dashoffset': offset
-        }
-      });
-    },
-
-    genSvg() {
-      const children = [this.indeterminate || this.genCircle('underlay', 0), this.genCircle('overlay', this.strokeDashOffset)];
-      return this.$createElement('svg', {
-        style: this.svgStyles,
-        attrs: {
-          xmlns: 'http://www.w3.org/2000/svg',
-          viewBox: "".concat(this.viewBoxSize, " ").concat(this.viewBoxSize, " ").concat(2 * this.viewBoxSize, " ").concat(2 * this.viewBoxSize)
-        }
-      }, children);
-    },
-
-    genInfo() {
-      return this.$createElement('div', {
-        staticClass: 'v-progress-circular__info'
-      }, this.$slots.default);
-    },
-
-    onObserve(entries, observer, isIntersecting) {
-      this.isVisible = isIntersecting;
-    }
-
+    ...makeSizeProps(),
+    ...makeTagProps({
+      tag: 'div'
+    }),
+    ...makeThemeProps()
   },
 
-  render(h) {
-    return h('div', this.setTextColor(this.color, {
-      staticClass: 'v-progress-circular',
-      attrs: {
-        role: 'progressbar',
-        'aria-valuemin': 0,
-        'aria-valuemax': 100,
-        'aria-valuenow': this.indeterminate ? undefined : this.normalizedValue
-      },
-      class: this.classes,
-      directives: [{
-        name: 'intersect',
-        value: this.onObserve
-      }],
-      style: this.styles,
-      on: this.$listeners
-    }), [this.genSvg(), this.genInfo()]);
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const MAGIC_RADIUS_CONSTANT = 20;
+    const CIRCUMFERENCE = 2 * Math.PI * MAGIC_RADIUS_CONSTANT;
+    const root = ref();
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      sizeClasses,
+      sizeStyles
+    } = useSize(props);
+    const {
+      textColorClasses,
+      textColorStyles
+    } = useTextColor(toRef(props, 'color'));
+    const {
+      textColorClasses: underlayColorClasses,
+      textColorStyles: underlayColorStyles
+    } = useTextColor(toRef(props, 'bgColor'));
+    const {
+      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) : 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": root,
+      "class": ['v-progress-circular', {
+        'v-progress-circular--indeterminate': !!props.indeterminate,
+        'v-progress-circular--visible': isIntersecting.value,
+        'v-progress-circular--disable-shrink': props.indeterminate === 'disable-shrink'
+      }, themeClasses.value, sizeClasses.value, textColorClasses.value],
+      "style": [sizeStyles.value, textColorStyles.value],
+      "role": "progressbar",
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+      "aria-valuenow": props.indeterminate ? undefined : normalizedValue.value
+    }, {
+      default: () => [_createVNode("svg", {
+        "style": {
+          transform: `rotate(calc(-90deg + ${Number(props.rotate)}deg))`
+        },
+        "xmlns": "http://www.w3.org/2000/svg",
+        "viewBox": `0 0 ${diameter.value} ${diameter.value}`
+      }, [_createVNode("circle", {
+        "class": ['v-progress-circular__underlay', underlayColorClasses.value],
+        "style": underlayColorStyles.value,
+        "fill": "transparent",
+        "cx": "50%",
+        "cy": "50%",
+        "r": MAGIC_RADIUS_CONSTANT,
+        "stroke-width": strokeWidth.value,
+        "stroke-dasharray": CIRCUMFERENCE,
+        "stroke-dashoffset": 0
+      }, null), _createVNode("circle", {
+        "class": "v-progress-circular__overlay",
+        "fill": "transparent",
+        "cx": "50%",
+        "cy": "50%",
+        "r": MAGIC_RADIUS_CONSTANT,
+        "stroke-width": strokeWidth.value,
+        "stroke-dasharray": CIRCUMFERENCE,
+        "stroke-dashoffset": strokeDashOffset.value
+      }, null)]), slots.default && _createVNode("div", {
+        "class": "v-progress-circular__content"
+      }, [slots.default({
+        value: normalizedValue.value
+      })])]
+    });
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VProgressCircular/VProgressCircular.ts"],"names":["intersect","Colorable","convertToUnit","extend","name","directives","props","button","Boolean","indeterminate","rotate","type","Number","String","default","size","width","value","data","radius","isVisible","computed","calculatedSize","circumference","Math","PI","classes","normalizedValue","parseFloat","strokeDashArray","round","strokeDashOffset","strokeWidth","viewBoxSize","styles","height","svgStyles","transform","methods","genCircle","offset","$createElement","class","attrs","fill","cx","cy","r","genSvg","children","style","xmlns","viewBox","genInfo","staticClass","$slots","onObserve","entries","observer","isIntersecting","render","h","setTextColor","color","role","undefined","on","$listeners"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VProgressCircular.sass'\n\n// Directives\nimport intersect from '../../directives/intersect'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\n\n// Utils\nimport { convertToUnit } from '../../util/helpers'\n\n// Types\nimport { VNode, VNodeChildren } from 'vue'\n\n/* @vue/component */\nexport default Colorable.extend({\n  name: 'v-progress-circular',\n\n  directives: { intersect },\n\n  props: {\n    button: Boolean,\n    indeterminate: Boolean,\n    rotate: {\n      type: [Number, String],\n      default: 0,\n    },\n    size: {\n      type: [Number, String],\n      default: 32,\n    },\n    width: {\n      type: [Number, String],\n      default: 4,\n    },\n    value: {\n      type: [Number, String],\n      default: 0,\n    },\n  },\n\n  data: () => ({\n    radius: 20,\n    isVisible: true,\n  }),\n\n  computed: {\n    calculatedSize (): number {\n      return Number(this.size) + (this.button ? 8 : 0)\n    },\n\n    circumference (): number {\n      return 2 * Math.PI * this.radius\n    },\n\n    classes (): object {\n      return {\n        'v-progress-circular--visible': this.isVisible,\n        'v-progress-circular--indeterminate': this.indeterminate,\n        'v-progress-circular--button': this.button,\n      }\n    },\n\n    normalizedValue (): number {\n      if (this.value < 0) {\n        return 0\n      }\n\n      if (this.value > 100) {\n        return 100\n      }\n\n      return parseFloat(this.value)\n    },\n\n    strokeDashArray (): number {\n      return Math.round(this.circumference * 1000) / 1000\n    },\n\n    strokeDashOffset (): string {\n      return ((100 - this.normalizedValue) / 100) * this.circumference + 'px'\n    },\n\n    strokeWidth (): number {\n      return Number(this.width) / +this.size * this.viewBoxSize * 2\n    },\n\n    styles (): object {\n      return {\n        height: convertToUnit(this.calculatedSize),\n        width: convertToUnit(this.calculatedSize),\n      }\n    },\n\n    svgStyles (): object {\n      return {\n        transform: `rotate(${Number(this.rotate)}deg)`,\n      }\n    },\n\n    viewBoxSize (): number {\n      return this.radius / (1 - Number(this.width) / +this.size)\n    },\n  },\n\n  methods: {\n    genCircle (name: string, offset: string | number): VNode {\n      return this.$createElement('circle', {\n        class: `v-progress-circular__${name}`,\n        attrs: {\n          fill: 'transparent',\n          cx: 2 * this.viewBoxSize,\n          cy: 2 * this.viewBoxSize,\n          r: this.radius,\n          'stroke-width': this.strokeWidth,\n          'stroke-dasharray': this.strokeDashArray,\n          'stroke-dashoffset': offset,\n        },\n      })\n    },\n    genSvg (): VNode {\n      const children = [\n        this.indeterminate || this.genCircle('underlay', 0),\n        this.genCircle('overlay', this.strokeDashOffset),\n      ] as VNodeChildren\n\n      return this.$createElement('svg', {\n        style: this.svgStyles,\n        attrs: {\n          xmlns: 'http://www.w3.org/2000/svg',\n          viewBox: `${this.viewBoxSize} ${this.viewBoxSize} ${2 * this.viewBoxSize} ${2 * this.viewBoxSize}`,\n        },\n      }, children)\n    },\n    genInfo (): VNode {\n      return this.$createElement('div', {\n        staticClass: 'v-progress-circular__info',\n      }, this.$slots.default)\n    },\n    onObserve (entries: IntersectionObserverEntry[], observer: IntersectionObserver, isIntersecting: boolean) {\n      this.isVisible = isIntersecting\n    },\n  },\n\n  render (h): VNode {\n    return h('div', this.setTextColor(this.color, {\n      staticClass: 'v-progress-circular',\n      attrs: {\n        role: 'progressbar',\n        'aria-valuemin': 0,\n        'aria-valuemax': 100,\n        'aria-valuenow': this.indeterminate ? undefined : this.normalizedValue,\n      },\n      class: this.classes,\n      directives: [{\n        name: 'intersect',\n        value: this.onObserve,\n      }],\n      style: this.styles,\n      on: this.$listeners,\n    }), [\n      this.genSvg(),\n      this.genInfo(),\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,11 +1,15 @@
-@import './_variables.scss'
+@forward './variables'
+@use 'sass:list'
+@use '../../styles/settings'
+@use './variables' as *
 
+// Elements
 .v-progress-circular
-  position: relative
+  align-items: center
   display: inline-flex
-  vertical-align: middle
   justify-content: center
-  align-items: center
+  position: relative
+  vertical-align: middle
 
   > svg
     width: 100%
@@ -18,36 +22,53 @@
     right: 0
     z-index: 0
 
-  &--indeterminate
-    > svg
-      animation: $progress-circular-rotate-animation
-      transform-origin: center center
-      transition: $process-circular-intermediate-svg-transition
-
-    .v-progress-circular__overlay
-      animation: $progress-circular-rotate-dash
-      stroke-linecap: round
-      stroke-dasharray: 80, 200
-      stroke-dashoffset: 0px
-
-  &--indeterminate:not(&--visible)
-    > svg,
-    .v-progress-circular__overlay
-      animation-play-state: paused !important
-
-  &__info
-    align-items: center
-    display: flex
-    justify-content: center
-
-  &__underlay
-    stroke: $progress-circular-underlay-stroke
-    z-index: 1
-
-  &__overlay
-    stroke: currentColor
-    z-index: 2
-    transition: $progress-circular-overlay-transition
+.v-progress-circular__content
+  align-items: center
+  display: flex
+  justify-content: center
+
+.v-progress-circular__underlay
+  color: $progress-circular-underlay-color
+  stroke: currentColor
+  z-index: 1
+
+.v-progress-circular__overlay
+  stroke: currentColor
+  transition: $progress-circular-overlay-transition
+  z-index: 2
+
+// Modifiers
+.v-progress-circular
+  @each $name, $multiplier in $progress-circular-sizes
+    $size: $progress-circular-size + (settings.$size-scale * $multiplier)
+
+    &--size-#{$name}
+      height: $size
+      width: $size
+
+.v-progress-circular--indeterminate
+  > svg
+    animation: $progress-circular-rotate-animation
+    transform-origin: center center
+    transition: $progress-circular-intermediate-svg-transition
+
+  .v-progress-circular__overlay
+    animation: $progress-circular-rotate-dash
+    stroke-dasharray: 25, 200
+    stroke-dashoffset: 0
+    stroke-linecap: round
+
+.v-progress-circular--disable-shrink
+  > svg
+    animation-duration: list.nth($progress-circular-rotate-animation, 2) * .5
+
+  .v-progress-circular__overlay
+    animation: none
+
+.v-progress-circular--indeterminate:not(.v-progress-circular--visible)
+  > svg,
+  .v-progress-circular__overlay
+    animation-play-state: paused !important
 
 @keyframes progress-circular-dash
   0%
@@ -60,8 +81,8 @@
 
   100%
     stroke-dasharray: 100, 200
-    stroke-dashoffset: -125px
+    stroke-dashoffset: -124px
 
 @keyframes progress-circular-rotate
   100%
-    transform: rotate(360deg)
+    transform: rotate(270deg)

package/lib/components/VProgressCircular/_variables.scss

@@ -1,7 +1,14 @@
-@import '../../styles/styles.sass';
-
+$progress-circular-intermediate-svg-transition: all 0.2s ease-in-out !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;
-$process-circular-intermediate-svg-transition: all .2s ease-in-out !default;
-$progress-circular-underlay-stroke: rgba(map-get($grey, 'base'), 0.4) !default;
-$progress-circular-overlay-transition: all .6s ease-in-out !default;
+$progress-circular-size: 32px !default;
+$progress-circular-underlay-color: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
+
+$progress-circular-sizes: (
+  'x-small': -2,
+  'small': -1,
+  'default': 0,
+  'large': 2,
+  'x-large': 4
+) !default;

package/lib/components/VProgressCircular/index.mjs

@@ -1,4 +1,2 @@
-import VProgressCircular from "./VProgressCircular.mjs";
-export { VProgressCircular };
-export default VProgressCircular;
+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":["VProgressCircular"],"mappings":"OAAOA,iB;AAEP,SAASA,iBAAT;AACA,eAAeA,iBAAf","sourcesContent":["import VProgressCircular from './VProgressCircular'\n\nexport { VProgressCircular }\nexport default 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"}