routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
Generated
Vendored
+104
@@ -0,0 +1,104 @@
|
||||
@layer vuetify-components {
|
||||
.v-progress-circular {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
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--revealing {
|
||||
--progress-reveal-duration: $progress-circular-reveal-duration;
|
||||
}
|
||||
.v-progress-circular--revealing .v-progress-circular__overlay {
|
||||
transition-duration: var(--progress-reveal-duration), 0s;
|
||||
}
|
||||
.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, progress-circular-rotate 1.4s linear infinite;
|
||||
stroke-dasharray: 25, 200;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-linecap: round;
|
||||
transform-origin: center center;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
Generated
Vendored
+377
@@ -0,0 +1,377 @@
|
||||
|
||||
import type { PropType } from 'vue';
|
||||
export declare const makeVProgressCircularProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
tag?: unknown;
|
||||
size?: unknown;
|
||||
reveal?: unknown;
|
||||
bgColor?: unknown;
|
||||
color?: unknown;
|
||||
indeterminate?: unknown;
|
||||
rounded?: unknown;
|
||||
modelValue?: unknown;
|
||||
rotate?: unknown;
|
||||
width?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
class: unknown extends Defaults["class"] ? PropType<any> : {
|
||||
type: PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
} : Omit<Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | Defaults["tag"] | import("../../util/index.js").JSXComponent>;
|
||||
default: unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : Defaults["tag"] | NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
size: unknown extends Defaults["size"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["size"] ? string | number : string | number | Defaults["size"]>;
|
||||
default: unknown extends Defaults["size"] ? string | number : Defaults["size"] | NonNullable<string | number>;
|
||||
};
|
||||
reveal: unknown extends Defaults["reveal"] ? {
|
||||
type: PropType<boolean | {
|
||||
duration?: number;
|
||||
}>;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: PropType<boolean | {
|
||||
duration?: number;
|
||||
}>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["reveal"] ? boolean | {
|
||||
duration?: number;
|
||||
} : boolean | {
|
||||
duration?: number;
|
||||
} | Defaults["reveal"]>;
|
||||
default: unknown extends Defaults["reveal"] ? boolean | {
|
||||
duration?: number;
|
||||
} : Defaults["reveal"] | NonNullable<boolean | {
|
||||
duration?: number;
|
||||
}>;
|
||||
};
|
||||
bgColor: unknown extends Defaults["bgColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"]>;
|
||||
default: unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"];
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
indeterminate: unknown extends Defaults["indeterminate"] ? PropType<"disable-shrink" | boolean> : {
|
||||
type: PropType<unknown extends Defaults["indeterminate"] ? "disable-shrink" | boolean : "disable-shrink" | boolean | Defaults["indeterminate"]>;
|
||||
default: unknown extends Defaults["indeterminate"] ? "disable-shrink" | boolean : Defaults["indeterminate"] | NonNullable<"disable-shrink" | boolean>;
|
||||
};
|
||||
rounded: unknown extends Defaults["rounded"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["rounded"] ? boolean : boolean | Defaults["rounded"]>;
|
||||
default: unknown extends Defaults["rounded"] ? boolean : boolean | Defaults["rounded"];
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["modelValue"] ? string | number : string | number | Defaults["modelValue"]>;
|
||||
default: unknown extends Defaults["modelValue"] ? string | number : Defaults["modelValue"] | NonNullable<string | number>;
|
||||
};
|
||||
rotate: unknown extends Defaults["rotate"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["rotate"] ? string | number : string | number | Defaults["rotate"]>;
|
||||
default: unknown extends Defaults["rotate"] ? string | number : Defaults["rotate"] | NonNullable<string | number>;
|
||||
};
|
||||
width: unknown extends Defaults["width"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
};
|
||||
export declare const VProgressCircular: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
reveal: boolean | {
|
||||
duration?: number;
|
||||
};
|
||||
rounded: boolean;
|
||||
modelValue: string | number;
|
||||
rotate: string | number;
|
||||
width: string | number;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
bgColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
indeterminate?: "disable-shrink" | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: {
|
||||
value: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: {
|
||||
value: number;
|
||||
}) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: {
|
||||
value: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: {
|
||||
value: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
reveal: boolean | {
|
||||
duration?: number;
|
||||
};
|
||||
rounded: boolean;
|
||||
modelValue: string | number;
|
||||
rotate: string | number;
|
||||
width: string | number;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: (arg: {
|
||||
value: number;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
reveal: boolean | {
|
||||
duration?: number;
|
||||
};
|
||||
rounded: boolean;
|
||||
modelValue: string | number;
|
||||
rotate: string | number;
|
||||
width: string | number;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
bgColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
indeterminate?: "disable-shrink" | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: {
|
||||
value: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: {
|
||||
value: number;
|
||||
}) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: {
|
||||
value: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: {
|
||||
value: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
reveal: boolean | {
|
||||
duration?: number;
|
||||
};
|
||||
rounded: boolean;
|
||||
modelValue: string | number;
|
||||
rotate: string | number;
|
||||
width: string | number;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
reveal: boolean | {
|
||||
duration?: number;
|
||||
};
|
||||
rounded: boolean;
|
||||
modelValue: string | number;
|
||||
rotate: string | number;
|
||||
width: string | number;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
bgColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
indeterminate?: "disable-shrink" | boolean | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: {
|
||||
value: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: {
|
||||
value: number;
|
||||
}) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: {
|
||||
value: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: {
|
||||
value: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
size: string | number;
|
||||
reveal: boolean | {
|
||||
duration?: number;
|
||||
};
|
||||
rounded: boolean;
|
||||
modelValue: string | number;
|
||||
rotate: string | number;
|
||||
width: string | number;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: (arg: {
|
||||
value: number;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
reveal: {
|
||||
type: PropType<boolean | {
|
||||
duration?: number;
|
||||
}>;
|
||||
default: boolean;
|
||||
};
|
||||
bgColor: StringConstructor;
|
||||
color: StringConstructor;
|
||||
indeterminate: PropType<boolean | 'disable-shrink'>;
|
||||
rounded: BooleanConstructor;
|
||||
modelValue: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
rotate: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
width: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
size: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: string;
|
||||
};
|
||||
reveal: {
|
||||
type: PropType<boolean | {
|
||||
duration?: number;
|
||||
}>;
|
||||
default: boolean;
|
||||
};
|
||||
bgColor: StringConstructor;
|
||||
color: StringConstructor;
|
||||
indeterminate: PropType<boolean | 'disable-shrink'>;
|
||||
rounded: BooleanConstructor;
|
||||
modelValue: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
rotate: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
width: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
}>>;
|
||||
export type VProgressCircular = InstanceType<typeof VProgressCircular>;
|
||||
Generated
Vendored
+148
@@ -0,0 +1,148 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, createVNode as _createVNode } from "vue";
|
||||
// Styles
|
||||
import "./VProgressCircular.css";
|
||||
|
||||
// Composables
|
||||
import { useTextColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { useIntersectionObserver } from "../../composables/intersectionObserver.js";
|
||||
import { useResizeObserver } from "../../composables/resizeObserver.js";
|
||||
import { makeRevealProps, useReveal } from "../../composables/reveal.js";
|
||||
import { makeSizeProps, useSize } from "../../composables/size.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Utilities
|
||||
import { computed, ref, toRef, watchEffect } from 'vue';
|
||||
import { clamp, convertToUnit, genericComponent, PREFERS_REDUCED_MOTION, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVProgressCircularProps = propsFactory({
|
||||
bgColor: String,
|
||||
color: String,
|
||||
indeterminate: [Boolean, String],
|
||||
rounded: Boolean,
|
||||
modelValue: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
rotate: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: 4
|
||||
},
|
||||
...makeComponentProps(),
|
||||
...makeRevealProps(),
|
||||
...makeSizeProps(),
|
||||
...makeTagProps({
|
||||
tag: 'div'
|
||||
}),
|
||||
...makeThemeProps()
|
||||
}, 'VProgressCircular');
|
||||
export const VProgressCircular = genericComponent()({
|
||||
name: 'VProgressCircular',
|
||||
props: makeVProgressCircularProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
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(() => props.color);
|
||||
const {
|
||||
textColorClasses: underlayColorClasses,
|
||||
textColorStyles: underlayColorStyles
|
||||
} = useTextColor(() => props.bgColor);
|
||||
const {
|
||||
intersectionRef,
|
||||
isIntersecting
|
||||
} = useIntersectionObserver();
|
||||
const {
|
||||
resizeRef,
|
||||
contentRect
|
||||
} = useResizeObserver();
|
||||
const {
|
||||
state: revealState,
|
||||
duration: revealDuration
|
||||
} = useReveal(props);
|
||||
const normalizedValue = toRef(() => revealState.value === 'initial' ? 0 : clamp(parseFloat(props.modelValue), 0, 100));
|
||||
const width = toRef(() => Number(props.width));
|
||||
const size = toRef(() => {
|
||||
// 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 = toRef(() => MAGIC_RADIUS_CONSTANT / (1 - width.value / size.value) * 2);
|
||||
const strokeWidth = toRef(() => width.value / size.value * diameter.value);
|
||||
const strokeDashOffset = toRef(() => {
|
||||
const baseLength = (100 - normalizedValue.value) / 100 * CIRCUMFERENCE;
|
||||
return props.rounded && normalizedValue.value > 0 && normalizedValue.value < 100 ? convertToUnit(Math.min(CIRCUMFERENCE - 0.01, baseLength + strokeWidth.value)) : convertToUnit(baseLength);
|
||||
});
|
||||
const startAngle = computed(() => {
|
||||
const baseAngle = Number(props.rotate);
|
||||
return props.rounded ? baseAngle + strokeWidth.value / 2 / CIRCUMFERENCE * 360 : baseAngle;
|
||||
});
|
||||
watchEffect(() => {
|
||||
intersectionRef.value = root.value;
|
||||
resizeRef.value = root.value;
|
||||
});
|
||||
useRender(() => _createVNode(props.tag, {
|
||||
"ref": root,
|
||||
"class": _normalizeClass(['v-progress-circular', {
|
||||
'v-progress-circular--indeterminate': !!props.indeterminate,
|
||||
'v-progress-circular--visible': isIntersecting.value,
|
||||
'v-progress-circular--disable-shrink': props.indeterminate && (props.indeterminate === 'disable-shrink' || PREFERS_REDUCED_MOTION()),
|
||||
'v-progress-circular--revealing': ['initial', 'pending'].includes(revealState.value)
|
||||
}, themeClasses.value, sizeClasses.value, textColorClasses.value, props.class]),
|
||||
"style": _normalizeStyle([sizeStyles.value, textColorStyles.value, {
|
||||
'--progress-reveal-duration': `${revealDuration.value}ms`
|
||||
}, props.style]),
|
||||
"role": "progressbar",
|
||||
"aria-valuemin": "0",
|
||||
"aria-valuemax": "100",
|
||||
"aria-valuenow": props.indeterminate ? undefined : normalizedValue.value
|
||||
}, {
|
||||
default: () => [_createElementVNode("svg", {
|
||||
"style": {
|
||||
transform: `rotate(calc(-90deg + ${startAngle.value}deg))`
|
||||
},
|
||||
"xmlns": "http://www.w3.org/2000/svg",
|
||||
"viewBox": `0 0 ${diameter.value} ${diameter.value}`
|
||||
}, [_createElementVNode("circle", {
|
||||
"class": _normalizeClass(['v-progress-circular__underlay', underlayColorClasses.value]),
|
||||
"style": _normalizeStyle(underlayColorStyles.value),
|
||||
"fill": "transparent",
|
||||
"cx": "50%",
|
||||
"cy": "50%",
|
||||
"r": MAGIC_RADIUS_CONSTANT,
|
||||
"stroke-width": strokeWidth.value,
|
||||
"stroke-dasharray": CIRCUMFERENCE,
|
||||
"stroke-dashoffset": 0
|
||||
}, null), _createElementVNode("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,
|
||||
"stroke-linecap": props.rounded ? 'round' : undefined
|
||||
}, null)]), slots.default && _createElementVNode("div", {
|
||||
"class": "v-progress-circular__content"
|
||||
}, [slots.default({
|
||||
value: normalizedValue.value
|
||||
})])]
|
||||
}));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VProgressCircular.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+98
@@ -0,0 +1,98 @@
|
||||
@use 'sass:list'
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
// Elements
|
||||
.v-progress-circular
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
justify-content: center
|
||||
overflow: hidden
|
||||
position: relative
|
||||
vertical-align: middle
|
||||
|
||||
> 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: $progress-circular-underlay-color
|
||||
stroke: currentColor
|
||||
z-index: 1
|
||||
|
||||
.v-progress-circular__overlay
|
||||
stroke: currentColor
|
||||
transition: $progress-circular-overlay-transition
|
||||
z-index: 2
|
||||
|
||||
.v-progress-circular--revealing
|
||||
--progress-reveal-duration: $progress-circular-reveal-duration
|
||||
|
||||
.v-progress-circular__overlay
|
||||
transition-duration: var(--progress-reveal-duration), 0s
|
||||
|
||||
// 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, $progress-circular-rotate-animation
|
||||
stroke-dasharray: 25, 200
|
||||
stroke-dashoffset: 0
|
||||
stroke-linecap: round
|
||||
transform-origin: center center
|
||||
transform: $progress-circular-overlay-transform
|
||||
|
||||
.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
|
||||
|
||||
@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)
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
// VProgressCircular
|
||||
$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-overlay-transform: rotate(calc(-90deg)) !default;
|
||||
$progress-circular-reveal-duration: 900ms;
|
||||
$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;
|
||||
$progress-circular-underlay-color: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
|
||||
|
||||
// Lists
|
||||
$progress-circular-sizes: (
|
||||
'x-small': -2,
|
||||
'small': -1,
|
||||
'default': 0,
|
||||
'large': 2,
|
||||
'x-large': 4
|
||||
) !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VProgressCircular } from './VProgressCircular.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VProgressCircular } from "./VProgressCircular.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VProgressCircular"],"sources":["../../../src/components/VProgressCircular/index.ts"],"sourcesContent":["export { VProgressCircular } from './VProgressCircular'\n"],"mappings":"SAASA,iBAAiB","ignoreList":[]}
|
||||
Reference in New Issue
Block a user