routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+43
@@ -0,0 +1,43 @@
|
||||
@layer vuetify-components {
|
||||
.v-progress {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.v-progress > .v-progress-circular {
|
||||
align-self: center;
|
||||
}
|
||||
.v-progress:has(> .v-progress-circular) > .v-progress__details > *:only-child {
|
||||
margin-inline: auto;
|
||||
}
|
||||
.v-progress__label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.v-progress__label + .v-progress__value {
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
.v-progress__details {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
.v-progress__details--location-bottom {
|
||||
align-items: flex-start;
|
||||
order: 1;
|
||||
}
|
||||
.v-progress--absolute {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.v-progress--absolute > .v-progress__details {
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
.v-progress--absolute > .v-progress__spacer {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
+378
@@ -0,0 +1,378 @@
|
||||
|
||||
import type { PropType } from 'vue';
|
||||
export type ValueFormat = string | ((ctx: {
|
||||
value: number;
|
||||
max: number;
|
||||
percent: number;
|
||||
}) => string);
|
||||
type VProgressSlotsProps = {
|
||||
max: number;
|
||||
percent: number;
|
||||
value: number;
|
||||
formattedValue: string;
|
||||
};
|
||||
export declare const makeVProgressProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
bgColor?: unknown;
|
||||
color?: unknown;
|
||||
modelValue?: unknown;
|
||||
type?: unknown;
|
||||
label?: unknown;
|
||||
detailsPosition?: unknown;
|
||||
valueFormat?: unknown;
|
||||
max?: unknown;
|
||||
absolute?: unknown;
|
||||
hideLabel?: unknown;
|
||||
hideValue?: unknown;
|
||||
indeterminate?: unknown;
|
||||
rounded?: 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>;
|
||||
};
|
||||
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"];
|
||||
};
|
||||
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>;
|
||||
};
|
||||
type: unknown extends Defaults["type"] ? {
|
||||
type: PropType<'linear' | 'circular'>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<'linear' | 'circular'>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["type"] ? "circular" | "linear" : "circular" | "linear" | Defaults["type"]>;
|
||||
default: unknown extends Defaults["type"] ? "circular" | "linear" : Defaults["type"] | NonNullable<"circular" | "linear">;
|
||||
};
|
||||
label: unknown extends Defaults["label"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["label"] ? string : string | Defaults["label"]>;
|
||||
default: unknown extends Defaults["label"] ? string : string | Defaults["label"];
|
||||
};
|
||||
detailsPosition: unknown extends Defaults["detailsPosition"] ? {
|
||||
type: PropType<'top' | 'bottom'>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<'top' | 'bottom'>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["detailsPosition"] ? "bottom" | "top" : "bottom" | "top" | Defaults["detailsPosition"]>;
|
||||
default: unknown extends Defaults["detailsPosition"] ? "bottom" | "top" : Defaults["detailsPosition"] | NonNullable<"bottom" | "top">;
|
||||
};
|
||||
valueFormat: unknown extends Defaults["valueFormat"] ? {
|
||||
type: PropType<ValueFormat>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<ValueFormat>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["valueFormat"] ? ValueFormat : Defaults["valueFormat"] | ValueFormat>;
|
||||
default: unknown extends Defaults["valueFormat"] ? ValueFormat : Defaults["valueFormat"] | NonNullable<ValueFormat>;
|
||||
};
|
||||
max: unknown extends Defaults["max"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["max"] ? string | number : string | number | Defaults["max"]>;
|
||||
default: unknown extends Defaults["max"] ? string | number : Defaults["max"] | NonNullable<string | number>;
|
||||
};
|
||||
absolute: unknown extends Defaults["absolute"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["absolute"] ? boolean : boolean | Defaults["absolute"]>;
|
||||
default: unknown extends Defaults["absolute"] ? boolean : boolean | Defaults["absolute"];
|
||||
};
|
||||
hideLabel: unknown extends Defaults["hideLabel"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["hideLabel"] ? boolean : boolean | Defaults["hideLabel"]>;
|
||||
default: unknown extends Defaults["hideLabel"] ? boolean : boolean | Defaults["hideLabel"];
|
||||
};
|
||||
hideValue: unknown extends Defaults["hideValue"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["hideValue"] ? boolean : boolean | Defaults["hideValue"]>;
|
||||
default: unknown extends Defaults["hideValue"] ? boolean : boolean | Defaults["hideValue"];
|
||||
};
|
||||
indeterminate: unknown extends Defaults["indeterminate"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["indeterminate"] ? boolean : boolean | Defaults["indeterminate"]>;
|
||||
default: unknown extends Defaults["indeterminate"] ? boolean : boolean | Defaults["indeterminate"];
|
||||
};
|
||||
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"];
|
||||
};
|
||||
};
|
||||
export declare const VProgress: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
modelValue: string | number;
|
||||
type: "circular" | "linear";
|
||||
detailsPosition: "bottom" | "top";
|
||||
valueFormat: ValueFormat;
|
||||
max: string | number;
|
||||
absolute: boolean;
|
||||
hideLabel: boolean;
|
||||
hideValue: boolean;
|
||||
indeterminate: boolean;
|
||||
rounded: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
bgColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
label?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
label?: ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
value?: ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
label?: false | ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
value?: false | ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:label"?: false | ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:value"?: false | ((arg: VProgressSlotsProps) => 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;
|
||||
modelValue: string | number;
|
||||
type: "circular" | "linear";
|
||||
detailsPosition: "bottom" | "top";
|
||||
valueFormat: ValueFormat;
|
||||
max: string | number;
|
||||
absolute: boolean;
|
||||
hideLabel: boolean;
|
||||
hideValue: boolean;
|
||||
indeterminate: boolean;
|
||||
rounded: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: (arg: VProgressSlotsProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
label: (arg: VProgressSlotsProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
value: (arg: VProgressSlotsProps) => 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;
|
||||
modelValue: string | number;
|
||||
type: "circular" | "linear";
|
||||
detailsPosition: "bottom" | "top";
|
||||
valueFormat: ValueFormat;
|
||||
max: string | number;
|
||||
absolute: boolean;
|
||||
hideLabel: boolean;
|
||||
hideValue: boolean;
|
||||
indeterminate: boolean;
|
||||
rounded: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
bgColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
label?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
label?: ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
value?: ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
label?: false | ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
value?: false | ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:label"?: false | ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:value"?: false | ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
modelValue: string | number;
|
||||
type: "circular" | "linear";
|
||||
detailsPosition: "bottom" | "top";
|
||||
valueFormat: ValueFormat;
|
||||
max: string | number;
|
||||
absolute: boolean;
|
||||
hideLabel: boolean;
|
||||
hideValue: boolean;
|
||||
indeterminate: boolean;
|
||||
rounded: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
modelValue: string | number;
|
||||
type: "circular" | "linear";
|
||||
detailsPosition: "bottom" | "top";
|
||||
valueFormat: ValueFormat;
|
||||
max: string | number;
|
||||
absolute: boolean;
|
||||
hideLabel: boolean;
|
||||
hideValue: boolean;
|
||||
indeterminate: boolean;
|
||||
rounded: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
bgColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
label?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
label?: ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
value?: ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
label?: false | ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
value?: false | ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:label"?: false | ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:value"?: false | ((arg: VProgressSlotsProps) => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
modelValue: string | number;
|
||||
type: "circular" | "linear";
|
||||
detailsPosition: "bottom" | "top";
|
||||
valueFormat: ValueFormat;
|
||||
max: string | number;
|
||||
absolute: boolean;
|
||||
hideLabel: boolean;
|
||||
hideValue: boolean;
|
||||
indeterminate: boolean;
|
||||
rounded: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: (arg: VProgressSlotsProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
label: (arg: VProgressSlotsProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
value: (arg: VProgressSlotsProps) => 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;
|
||||
};
|
||||
bgColor: StringConstructor;
|
||||
color: StringConstructor;
|
||||
modelValue: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
type: {
|
||||
type: PropType<'linear' | 'circular'>;
|
||||
default: string;
|
||||
};
|
||||
label: StringConstructor;
|
||||
detailsPosition: {
|
||||
type: PropType<'top' | 'bottom'>;
|
||||
default: string;
|
||||
};
|
||||
valueFormat: {
|
||||
type: PropType<ValueFormat>;
|
||||
default: string;
|
||||
};
|
||||
max: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
absolute: BooleanConstructor;
|
||||
hideLabel: BooleanConstructor;
|
||||
hideValue: BooleanConstructor;
|
||||
indeterminate: BooleanConstructor;
|
||||
rounded: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
bgColor: StringConstructor;
|
||||
color: StringConstructor;
|
||||
modelValue: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
type: {
|
||||
type: PropType<'linear' | 'circular'>;
|
||||
default: string;
|
||||
};
|
||||
label: StringConstructor;
|
||||
detailsPosition: {
|
||||
type: PropType<'top' | 'bottom'>;
|
||||
default: string;
|
||||
};
|
||||
valueFormat: {
|
||||
type: PropType<ValueFormat>;
|
||||
default: string;
|
||||
};
|
||||
max: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
absolute: BooleanConstructor;
|
||||
hideLabel: BooleanConstructor;
|
||||
hideValue: BooleanConstructor;
|
||||
indeterminate: BooleanConstructor;
|
||||
rounded: BooleanConstructor;
|
||||
}>>;
|
||||
export type VProgress = InstanceType<typeof VProgress>;
|
||||
|
||||
+115
@@ -0,0 +1,115 @@
|
||||
import { mergeProps as _mergeProps, createVNode as _createVNode, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue";
|
||||
// Styles
|
||||
import "./VProgress.css";
|
||||
|
||||
// Components
|
||||
import { VProgressCircular } from "../../components/VProgressCircular/VProgressCircular.js";
|
||||
import { makeVProgressLinearProps, VProgressLinear } from "../../components/VProgressLinear/VProgressLinear.js"; // Composables
|
||||
import { makeComponentProps } from "../../composables/component.js"; // Utilities
|
||||
import { computed, toRef } from 'vue';
|
||||
import { clamp, genericComponent, omit, pick, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVProgressProps = propsFactory({
|
||||
type: {
|
||||
type: String,
|
||||
default: 'linear'
|
||||
},
|
||||
label: String,
|
||||
detailsPosition: {
|
||||
type: String,
|
||||
default: 'top'
|
||||
},
|
||||
valueFormat: {
|
||||
type: [String, Function],
|
||||
default: '[percent]%'
|
||||
},
|
||||
max: {
|
||||
type: [Number, String],
|
||||
default: 100
|
||||
},
|
||||
absolute: Boolean,
|
||||
hideLabel: Boolean,
|
||||
hideValue: Boolean,
|
||||
indeterminate: Boolean,
|
||||
rounded: Boolean,
|
||||
...pick(makeVProgressLinearProps(), [
|
||||
// relevant props shared between linear and circular
|
||||
'modelValue', 'color', 'bgColor', 'theme']),
|
||||
...makeComponentProps()
|
||||
}, 'VProgress');
|
||||
function formatValue(format, value, max, percent) {
|
||||
if (typeof format === 'function') return format({
|
||||
value,
|
||||
max,
|
||||
percent
|
||||
});
|
||||
return format.replaceAll('[value]', String(value)).replaceAll('[max]', String(max)).replaceAll('[percent]', String(Math.round(percent)));
|
||||
}
|
||||
export const VProgress = genericComponent()({
|
||||
name: 'VProgress',
|
||||
props: makeVProgressProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const isLinear = toRef(() => props.type === 'linear');
|
||||
const max = toRef(() => parseFloat(props.max) || 100);
|
||||
const normalizedValue = computed(() => clamp(parseFloat(props.modelValue), 0, max.value));
|
||||
const percent = computed(() => normalizedValue.value / max.value * 100);
|
||||
const formattedValue = toRef(() => formatValue(props.valueFormat, normalizedValue.value, max.value, percent.value));
|
||||
useRender(() => {
|
||||
const hasDetails = !!(props.label || slots.label) && !(props.hideLabel && props.hideValue);
|
||||
const scopeProps = {
|
||||
max: max.value,
|
||||
percent: percent.value,
|
||||
value: normalizedValue.value,
|
||||
formattedValue: formattedValue.value
|
||||
};
|
||||
const progressProps = {
|
||||
role: 'progressbar',
|
||||
'aria-label': props.label,
|
||||
'aria-valuenow': props.indeterminate ? undefined : normalizedValue.value,
|
||||
'aria-valuemin': 0,
|
||||
'aria-valuemax': max.value,
|
||||
'aria-valuetext': props.indeterminate ? undefined : formattedValue.value
|
||||
};
|
||||
function progressComponent() {
|
||||
if (isLinear.value) {
|
||||
const linearProps = VProgressLinear.filterProps(props);
|
||||
return _createVNode(VProgressLinear, _mergeProps(linearProps, {
|
||||
"modelValue": props.modelValue,
|
||||
"aria-hidden": "true"
|
||||
}), null);
|
||||
}
|
||||
const circularProps = VProgressCircular.filterProps(omit(props, ['indeterminate']));
|
||||
return _createVNode(VProgressCircular, _mergeProps(circularProps, {
|
||||
"modelValue": percent.value,
|
||||
"aria-hidden": "true",
|
||||
"indeterminate": props.indeterminate
|
||||
}), null);
|
||||
}
|
||||
return _createElementVNode("div", _mergeProps({
|
||||
"class": ['v-progress', {
|
||||
'v-progress--absolute': props.absolute
|
||||
}, props.class],
|
||||
"style": props.style
|
||||
}, progressProps), [hasDetails && _createElementVNode("div", {
|
||||
"key": "details",
|
||||
"class": _normalizeClass(['v-progress__details', `v-progress__details--location-${props.detailsPosition}`]),
|
||||
"aria-hidden": "true"
|
||||
}, [!props.hideLabel && _createElementVNode("div", {
|
||||
"key": "label",
|
||||
"class": "v-progress__label"
|
||||
}, [slots.label?.(scopeProps) ?? props.label]), !props.hideValue && _createElementVNode("div", {
|
||||
"key": "value",
|
||||
"class": "v-progress__value"
|
||||
}, [slots.value?.(scopeProps) ?? formattedValue.value])]), slots.default?.(scopeProps) ?? progressComponent(), props.absolute && hasDetails && _createElementVNode("div", {
|
||||
"key": "spacer",
|
||||
"class": "v-progress__spacer",
|
||||
"style": {
|
||||
order: props.detailsPosition === 'bottom' ? -1 : 2
|
||||
}
|
||||
}, null)]);
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VProgress.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+43
@@ -0,0 +1,43 @@
|
||||
@use '../../styles/tools'
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-progress
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 8px
|
||||
|
||||
> .v-progress-circular
|
||||
align-self: center
|
||||
|
||||
&:has(> .v-progress-circular) > .v-progress__details > *:only-child
|
||||
margin-inline: auto
|
||||
|
||||
&__label
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
white-space: nowrap
|
||||
|
||||
+ .v-progress__value
|
||||
margin-inline-start: auto
|
||||
|
||||
&__details
|
||||
display: flex
|
||||
align-items: flex-end
|
||||
gap: 8px
|
||||
|
||||
&--location-bottom
|
||||
align-items: flex-start
|
||||
order: 1
|
||||
|
||||
&--absolute
|
||||
position: absolute
|
||||
inset: 0
|
||||
align-items: center
|
||||
justify-content: center
|
||||
|
||||
> .v-progress__details
|
||||
height: 0
|
||||
overflow: visible
|
||||
|
||||
> .v-progress__spacer
|
||||
height: 0
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VProgress } from './VProgress.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VProgress } from "./VProgress.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VProgress"],"sources":["../../../src/labs/VProgress/index.ts"],"sourcesContent":["export { VProgress } from './VProgress'\n"],"mappings":"SAASA,SAAS","ignoreList":[]}
|
||||
Reference in New Issue
Block a user