1 line
9.7 KiB
Plaintext
1 line
9.7 KiB
Plaintext
|
{"version":3,"file":"VProgressCircular.mjs","names":["useTextColor","makeComponentProps","useIntersectionObserver","useResizeObserver","makeSizeProps","useSize","makeTagProps","makeThemeProps","provideTheme","computed","ref","toRef","watchEffect","convertToUnit","genericComponent","propsFactory","useRender","makeVProgressCircularProps","bgColor","String","color","indeterminate","Boolean","modelValue","type","Number","default","rotate","width","tag","VProgressCircular","name","props","setup","_ref","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","_createVNode","class","style","undefined","transform"],"sources":["../../../src/components/VProgressCircular/VProgressCircular.tsx"],"sourcesContent":["// Styles\nimport './VProgressCircular.sass'\n\n// Composables\nimport { useTextColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { useIntersectionObserver } from '@/composables/intersectionObserver'\nimport { useResizeObserver } from '@/composables/resizeObserver'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { computed, ref, toRef, watchEffect } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const makeVProgressCircularProps = propsFactory({\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 ...makeComponentProps(),\n ...makeSizeProps(),\n ...makeTagProps({ tag: 'div' }),\n ...makeThemeProps(),\n}, 'VProgressCircular')\n\ntype VProgressCircularSlots = {\n default: { value: number }\n}\n\nexport const VProgressCircular = genericComponent<VProgressCircularSlots>()({\n name: 'VProgressCircular',\n\n props: makeVProgressCircularProps(),\n\n setup (props, { slots }) {\n const MAGIC_RADIUS_CONSTANT = 20\n const CIRCUMFERENCE = 2 * Math.PI * MAGIC_RADIUS_CONSTANT\n\n const root = ref<HTMLElement>()\n\n const { themeClasses } = provideTheme(props)\n const { sizeClasses, sizeStyles } = useSize(props)\n const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))\n const { textColorClasses: underlayColorClasses, textColorStyles: underlayColorStyles } = useTextColor(toRef(props, 'bgColor'))\n const { intersectionRef, isIntersecting } = useIntersectionObserver()\n const { resizeRef, contentRect } = useResizeObserver()\n\n const normalizedValue = computed(() => Math.max(0, Math.min(100, parseFloat(props.modelValue))))\n const width = computed(() => Number(props.width))\n const size = computed(() => {\n // Get size from element if size prop value is small, large etc\n return sizeStyles.value\n ? Number(props.size)\n : contentRect.value\n ? contentRect.value.width\n : Math.max(width.value, 32)\n })\n const diameter = computed(() => (MAGIC_RADIUS_CONSTANT / (1 - width.value / size.value)) * 2)\n const strokeWidth = computed(() => width.value / size.value * diameter.value)\n const strokeDashOffset = computed(() => convertToUnit(((100 - normalizedValue.value) / 100) * CIRCUMFERENCE))\n\n watchEffect(() => {\n intersectionRef.value = root.value\n resizeRef.value = root.value\n })\n\n useRender(() => (\n <props.tag\n ref={ root }\n class={[\n 'v-progress-circular',\n {\n 'v-progress-circular--
|