routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+226
@@ -0,0 +1,226 @@
|
||||
@layer vuetify-components {
|
||||
.v-progress-linear {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1), mask-size 0s;
|
||||
width: 100%;
|
||||
}
|
||||
.v-progress-linear--rounded {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
@media (forced-colors: active) {
|
||||
.v-progress-linear {
|
||||
border: thin solid buttontext;
|
||||
}
|
||||
}
|
||||
.v-progress-linear__background,
|
||||
.v-progress-linear__buffer {
|
||||
background: currentColor;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: var(--v-border-opacity);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
transition-property: width, left, right;
|
||||
transition: inherit;
|
||||
}
|
||||
}
|
||||
@layer vuetify-final.trumps {
|
||||
@media (forced-colors: active) {
|
||||
.v-progress-linear__buffer {
|
||||
background-color: highlight;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@layer vuetify-components {
|
||||
.v-progress-linear__content {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.v-progress-linear--clickable .v-progress-linear__content {
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-progress-linear__determinate,
|
||||
.v-progress-linear__indeterminate {
|
||||
background: currentColor;
|
||||
}
|
||||
}
|
||||
@layer vuetify-final.trumps {
|
||||
@media (forced-colors: active) {
|
||||
.v-progress-linear__determinate,
|
||||
.v-progress-linear__indeterminate {
|
||||
background-color: highlight;
|
||||
}
|
||||
}
|
||||
}
|
||||
@layer vuetify-components {
|
||||
.v-progress-linear__determinate {
|
||||
height: inherit;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
transition: inherit;
|
||||
transition-property: width, left, right;
|
||||
}
|
||||
.v-progress-linear__indeterminate .long, .v-progress-linear__indeterminate .short {
|
||||
animation-play-state: paused;
|
||||
animation-duration: 2.2s;
|
||||
animation-iteration-count: infinite;
|
||||
bottom: 0;
|
||||
height: inherit;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
top: 0;
|
||||
width: auto;
|
||||
}
|
||||
.v-progress-linear__indeterminate .long {
|
||||
animation-name: indeterminate-ltr;
|
||||
}
|
||||
.v-progress-linear__indeterminate .short {
|
||||
animation-name: indeterminate-short-ltr;
|
||||
}
|
||||
.v-progress-linear__stream {
|
||||
animation: stream 0.25s infinite linear;
|
||||
animation-play-state: paused;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
transition: inherit;
|
||||
transition-property: width, left, right;
|
||||
}
|
||||
.v-progress-linear--reverse .v-progress-linear__background,
|
||||
.v-progress-linear--reverse .v-progress-linear__determinate,
|
||||
.v-progress-linear--reverse .v-progress-linear__content {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.v-progress-linear--reverse .v-progress-linear__indeterminate .long, .v-progress-linear--reverse .v-progress-linear__indeterminate .short {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.v-progress-linear--reverse .v-progress-linear__indeterminate .long {
|
||||
animation-name: indeterminate-rtl;
|
||||
}
|
||||
.v-progress-linear--reverse .v-progress-linear__indeterminate .short {
|
||||
animation-name: indeterminate-short-rtl;
|
||||
}
|
||||
.v-progress-linear--reverse .v-progress-linear__stream {
|
||||
right: auto;
|
||||
}
|
||||
.v-progress-linear--absolute,
|
||||
.v-progress-linear--fixed {
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.v-progress-linear--absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.v-progress-linear--fixed {
|
||||
position: fixed;
|
||||
}
|
||||
.v-progress-linear--rounded {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.v-progress-linear--rounded.v-progress-linear--rounded-bar .v-progress-linear__determinate,
|
||||
.v-progress-linear--rounded.v-progress-linear--rounded-bar .v-progress-linear__indeterminate {
|
||||
border-radius: inherit;
|
||||
}
|
||||
.v-progress-linear--striped .v-progress-linear__determinate {
|
||||
animation: progress-linear-stripes 1s infinite linear;
|
||||
background-image: linear-gradient(135deg, hsla(0, 0%, 100%, 0.25) 25%, transparent 0, transparent 50%, hsla(0, 0%, 100%, 0.25) 0, hsla(0, 0%, 100%, 0.25) 75%, transparent 0, transparent);
|
||||
background-repeat: repeat;
|
||||
background-size: var(--v-progress-linear-height);
|
||||
}
|
||||
.v-progress-linear--active .v-progress-linear__indeterminate .long, .v-progress-linear--active .v-progress-linear__indeterminate .short {
|
||||
animation-play-state: running;
|
||||
}
|
||||
.v-progress-linear--active .v-progress-linear__stream {
|
||||
animation-play-state: running;
|
||||
}
|
||||
.v-progress-linear--rounded-bar .v-progress-linear__determinate,
|
||||
.v-progress-linear--rounded-bar .v-progress-linear__indeterminate,
|
||||
.v-progress-linear--rounded-bar .v-progress-linear__stream + .v-progress-linear__background {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.v-progress-linear--rounded-bar .v-progress-linear__determinate {
|
||||
border-start-start-radius: 0;
|
||||
border-end-start-radius: 0;
|
||||
}
|
||||
@keyframes indeterminate-ltr {
|
||||
0% {
|
||||
left: -90%;
|
||||
right: 100%;
|
||||
}
|
||||
60% {
|
||||
left: -90%;
|
||||
right: 100%;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
right: -35%;
|
||||
}
|
||||
}
|
||||
@keyframes indeterminate-rtl {
|
||||
0% {
|
||||
left: 100%;
|
||||
right: -90%;
|
||||
}
|
||||
60% {
|
||||
left: 100%;
|
||||
right: -90%;
|
||||
}
|
||||
100% {
|
||||
left: -35%;
|
||||
right: 100%;
|
||||
}
|
||||
}
|
||||
@keyframes indeterminate-short-ltr {
|
||||
0% {
|
||||
left: -200%;
|
||||
right: 100%;
|
||||
}
|
||||
60% {
|
||||
left: 107%;
|
||||
right: -8%;
|
||||
}
|
||||
100% {
|
||||
left: 107%;
|
||||
right: -8%;
|
||||
}
|
||||
}
|
||||
@keyframes indeterminate-short-rtl {
|
||||
0% {
|
||||
left: 100%;
|
||||
right: -200%;
|
||||
}
|
||||
60% {
|
||||
left: -8%;
|
||||
right: 107%;
|
||||
}
|
||||
100% {
|
||||
left: -8%;
|
||||
right: 107%;
|
||||
}
|
||||
}
|
||||
@keyframes stream {
|
||||
to {
|
||||
transform: translateX(var(--v-progress-linear-stream-to));
|
||||
}
|
||||
}
|
||||
@keyframes progress-linear-stripes {
|
||||
0% {
|
||||
background-position-x: var(--v-progress-linear-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
Generated
Vendored
+606
@@ -0,0 +1,606 @@
|
||||
|
||||
export declare const makeVProgressLinearProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
location?: unknown;
|
||||
chunkCount?: unknown;
|
||||
chunkWidth?: unknown;
|
||||
chunkGap?: unknown;
|
||||
absolute?: unknown;
|
||||
active?: unknown;
|
||||
bgColor?: unknown;
|
||||
bgOpacity?: unknown;
|
||||
bufferValue?: unknown;
|
||||
bufferColor?: unknown;
|
||||
bufferOpacity?: unknown;
|
||||
clickable?: unknown;
|
||||
color?: unknown;
|
||||
height?: unknown;
|
||||
indeterminate?: unknown;
|
||||
max?: unknown;
|
||||
modelValue?: unknown;
|
||||
opacity?: unknown;
|
||||
reverse?: unknown;
|
||||
stream?: unknown;
|
||||
striped?: unknown;
|
||||
roundedBar?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
class: unknown extends Defaults["class"] ? import("vue").PropType<any> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").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>;
|
||||
};
|
||||
rounded: unknown extends Defaults["rounded"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
|
||||
default: unknown extends Defaults["rounded"] ? string | number | boolean : Defaults["rounded"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
tile: unknown extends Defaults["tile"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").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>;
|
||||
};
|
||||
location: unknown extends Defaults["location"] ? {
|
||||
type: import("vue").PropType<import("../../util/index.js").Anchor | null>;
|
||||
default: NonNullable<import("../../util/index.js").Anchor | null>;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("../../util/index.js").Anchor | null>;
|
||||
default: NonNullable<import("../../util/index.js").Anchor | null>;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["location"] ? import("../../util/index.js").Anchor | null : Defaults["location"] | import("../../util/index.js").Anchor | null>;
|
||||
default: unknown extends Defaults["location"] ? import("../../util/index.js").Anchor | null : Defaults["location"] | NonNullable<import("../../util/index.js").Anchor | null>;
|
||||
};
|
||||
chunkCount: unknown extends Defaults["chunkCount"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["chunkCount"] ? string | number : string | number | Defaults["chunkCount"]>;
|
||||
default: unknown extends Defaults["chunkCount"] ? string | number : Defaults["chunkCount"] | NonNullable<string | number>;
|
||||
};
|
||||
chunkWidth: unknown extends Defaults["chunkWidth"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["chunkWidth"] ? string | number : string | number | Defaults["chunkWidth"]>;
|
||||
default: unknown extends Defaults["chunkWidth"] ? string | number : Defaults["chunkWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
chunkGap: unknown extends Defaults["chunkGap"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["chunkGap"] ? string | number : string | number | Defaults["chunkGap"]>;
|
||||
default: unknown extends Defaults["chunkGap"] ? string | number : Defaults["chunkGap"] | NonNullable<string | number>;
|
||||
};
|
||||
absolute: unknown extends Defaults["absolute"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["absolute"] ? boolean : boolean | Defaults["absolute"]>;
|
||||
default: unknown extends Defaults["absolute"] ? boolean : boolean | Defaults["absolute"];
|
||||
};
|
||||
active: unknown extends Defaults["active"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["active"] ? boolean : boolean | Defaults["active"]>;
|
||||
default: unknown extends Defaults["active"] ? boolean : boolean | Defaults["active"];
|
||||
};
|
||||
bgColor: unknown extends Defaults["bgColor"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"]>;
|
||||
default: unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"];
|
||||
};
|
||||
bgOpacity: unknown extends Defaults["bgOpacity"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["bgOpacity"] ? string | number : string | number | Defaults["bgOpacity"]>;
|
||||
default: unknown extends Defaults["bgOpacity"] ? string | number : Defaults["bgOpacity"] | NonNullable<string | number>;
|
||||
};
|
||||
bufferValue: unknown extends Defaults["bufferValue"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["bufferValue"] ? string | number : string | number | Defaults["bufferValue"]>;
|
||||
default: unknown extends Defaults["bufferValue"] ? string | number : Defaults["bufferValue"] | NonNullable<string | number>;
|
||||
};
|
||||
bufferColor: unknown extends Defaults["bufferColor"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["bufferColor"] ? string : string | Defaults["bufferColor"]>;
|
||||
default: unknown extends Defaults["bufferColor"] ? string : string | Defaults["bufferColor"];
|
||||
};
|
||||
bufferOpacity: unknown extends Defaults["bufferOpacity"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["bufferOpacity"] ? string | number : string | number | Defaults["bufferOpacity"]>;
|
||||
default: unknown extends Defaults["bufferOpacity"] ? string | number : Defaults["bufferOpacity"] | NonNullable<string | number>;
|
||||
};
|
||||
clickable: unknown extends Defaults["clickable"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["clickable"] ? boolean : boolean | Defaults["clickable"]>;
|
||||
default: unknown extends Defaults["clickable"] ? boolean : boolean | Defaults["clickable"];
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
indeterminate: unknown extends Defaults["indeterminate"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["indeterminate"] ? boolean : boolean | Defaults["indeterminate"]>;
|
||||
default: unknown extends Defaults["indeterminate"] ? boolean : boolean | Defaults["indeterminate"];
|
||||
};
|
||||
max: unknown extends Defaults["max"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["max"] ? string | number : string | number | Defaults["max"]>;
|
||||
default: unknown extends Defaults["max"] ? string | number : Defaults["max"] | NonNullable<string | number>;
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["modelValue"] ? string | number : string | number | Defaults["modelValue"]>;
|
||||
default: unknown extends Defaults["modelValue"] ? string | number : Defaults["modelValue"] | NonNullable<string | number>;
|
||||
};
|
||||
opacity: unknown extends Defaults["opacity"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["opacity"] ? string | number : string | number | Defaults["opacity"]>;
|
||||
default: unknown extends Defaults["opacity"] ? string | number : Defaults["opacity"] | NonNullable<string | number>;
|
||||
};
|
||||
reverse: unknown extends Defaults["reverse"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["reverse"] ? boolean : boolean | Defaults["reverse"]>;
|
||||
default: unknown extends Defaults["reverse"] ? boolean : boolean | Defaults["reverse"];
|
||||
};
|
||||
stream: unknown extends Defaults["stream"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["stream"] ? boolean : boolean | Defaults["stream"]>;
|
||||
default: unknown extends Defaults["stream"] ? boolean : boolean | Defaults["stream"];
|
||||
};
|
||||
striped: unknown extends Defaults["striped"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["striped"] ? boolean : boolean | Defaults["striped"]>;
|
||||
default: unknown extends Defaults["striped"] ? boolean : boolean | Defaults["striped"];
|
||||
};
|
||||
roundedBar: unknown extends Defaults["roundedBar"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["roundedBar"] ? boolean : boolean | Defaults["roundedBar"]>;
|
||||
default: unknown extends Defaults["roundedBar"] ? boolean : boolean | Defaults["roundedBar"];
|
||||
};
|
||||
};
|
||||
export declare const VProgressLinear: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
chunkCount: string | number;
|
||||
chunkWidth: string | number;
|
||||
chunkGap: string | number;
|
||||
absolute: boolean;
|
||||
active: boolean;
|
||||
bufferValue: string | number;
|
||||
clickable: boolean;
|
||||
height: string | number;
|
||||
indeterminate: boolean;
|
||||
max: string | number;
|
||||
modelValue: string | number;
|
||||
reverse: boolean;
|
||||
stream: boolean;
|
||||
striped: boolean;
|
||||
roundedBar: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
bgColor?: string | undefined;
|
||||
bgOpacity?: string | number | undefined;
|
||||
bufferColor?: string | undefined;
|
||||
bufferOpacity?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
opacity?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: {
|
||||
value: number;
|
||||
buffer: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: {
|
||||
value: number;
|
||||
buffer: number;
|
||||
}) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: {
|
||||
value: number;
|
||||
buffer: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: {
|
||||
value: number;
|
||||
buffer: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onUpdate:modelValue"?: ((value: number) => any) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'update:modelValue': (value: number) => true;
|
||||
}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
chunkCount: string | number;
|
||||
chunkWidth: string | number;
|
||||
chunkGap: string | number;
|
||||
absolute: boolean;
|
||||
active: boolean;
|
||||
bufferValue: string | number;
|
||||
clickable: boolean;
|
||||
height: string | number;
|
||||
indeterminate: boolean;
|
||||
max: string | number;
|
||||
modelValue: string | number;
|
||||
reverse: boolean;
|
||||
stream: boolean;
|
||||
striped: boolean;
|
||||
roundedBar: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: (arg: {
|
||||
value: number;
|
||||
buffer: 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;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
chunkCount: string | number;
|
||||
chunkWidth: string | number;
|
||||
chunkGap: string | number;
|
||||
absolute: boolean;
|
||||
active: boolean;
|
||||
bufferValue: string | number;
|
||||
clickable: boolean;
|
||||
height: string | number;
|
||||
indeterminate: boolean;
|
||||
max: string | number;
|
||||
modelValue: string | number;
|
||||
reverse: boolean;
|
||||
stream: boolean;
|
||||
striped: boolean;
|
||||
roundedBar: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
bgColor?: string | undefined;
|
||||
bgOpacity?: string | number | undefined;
|
||||
bufferColor?: string | undefined;
|
||||
bufferOpacity?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
opacity?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: {
|
||||
value: number;
|
||||
buffer: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: {
|
||||
value: number;
|
||||
buffer: number;
|
||||
}) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: {
|
||||
value: number;
|
||||
buffer: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: {
|
||||
value: number;
|
||||
buffer: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onUpdate:modelValue"?: ((value: number) => any) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
chunkCount: string | number;
|
||||
chunkWidth: string | number;
|
||||
chunkGap: string | number;
|
||||
absolute: boolean;
|
||||
active: boolean;
|
||||
bufferValue: string | number;
|
||||
clickable: boolean;
|
||||
height: string | number;
|
||||
indeterminate: boolean;
|
||||
max: string | number;
|
||||
modelValue: string | number;
|
||||
reverse: boolean;
|
||||
stream: boolean;
|
||||
striped: boolean;
|
||||
roundedBar: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
chunkCount: string | number;
|
||||
chunkWidth: string | number;
|
||||
chunkGap: string | number;
|
||||
absolute: boolean;
|
||||
active: boolean;
|
||||
bufferValue: string | number;
|
||||
clickable: boolean;
|
||||
height: string | number;
|
||||
indeterminate: boolean;
|
||||
max: string | number;
|
||||
modelValue: string | number;
|
||||
reverse: boolean;
|
||||
stream: boolean;
|
||||
striped: boolean;
|
||||
roundedBar: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
bgColor?: string | undefined;
|
||||
bgOpacity?: string | number | undefined;
|
||||
bufferColor?: string | undefined;
|
||||
bufferOpacity?: string | number | undefined;
|
||||
color?: string | undefined;
|
||||
opacity?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: {
|
||||
value: number;
|
||||
buffer: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: {
|
||||
value: number;
|
||||
buffer: number;
|
||||
}) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: {
|
||||
value: number;
|
||||
buffer: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: {
|
||||
value: number;
|
||||
buffer: number;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onUpdate:modelValue"?: ((value: number) => any) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'update:modelValue': (value: number) => true;
|
||||
}, string, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
location: import("../../util/index.js").Anchor | null;
|
||||
chunkCount: string | number;
|
||||
chunkWidth: string | number;
|
||||
chunkGap: string | number;
|
||||
absolute: boolean;
|
||||
active: boolean;
|
||||
bufferValue: string | number;
|
||||
clickable: boolean;
|
||||
height: string | number;
|
||||
indeterminate: boolean;
|
||||
max: string | number;
|
||||
modelValue: string | number;
|
||||
reverse: boolean;
|
||||
stream: boolean;
|
||||
striped: boolean;
|
||||
roundedBar: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: (arg: {
|
||||
value: number;
|
||||
buffer: 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: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
location: {
|
||||
type: import("vue").PropType<import("../../util/index.js").Anchor | null>;
|
||||
default: NonNullable<import("../../util/index.js").Anchor | null>;
|
||||
};
|
||||
chunkCount: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: null;
|
||||
};
|
||||
chunkWidth: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: null;
|
||||
};
|
||||
chunkGap: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
absolute: BooleanConstructor;
|
||||
active: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
bgColor: StringConstructor;
|
||||
bgOpacity: (NumberConstructor | StringConstructor)[];
|
||||
bufferValue: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
bufferColor: StringConstructor;
|
||||
bufferOpacity: (NumberConstructor | StringConstructor)[];
|
||||
clickable: BooleanConstructor;
|
||||
color: StringConstructor;
|
||||
height: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
indeterminate: BooleanConstructor;
|
||||
max: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
modelValue: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
opacity: (NumberConstructor | StringConstructor)[];
|
||||
reverse: BooleanConstructor;
|
||||
stream: BooleanConstructor;
|
||||
striped: BooleanConstructor;
|
||||
roundedBar: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
location: {
|
||||
type: import("vue").PropType<import("../../util/index.js").Anchor | null>;
|
||||
default: NonNullable<import("../../util/index.js").Anchor | null>;
|
||||
};
|
||||
chunkCount: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: null;
|
||||
};
|
||||
chunkWidth: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: null;
|
||||
};
|
||||
chunkGap: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
absolute: BooleanConstructor;
|
||||
active: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
bgColor: StringConstructor;
|
||||
bgOpacity: (NumberConstructor | StringConstructor)[];
|
||||
bufferValue: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
bufferColor: StringConstructor;
|
||||
bufferOpacity: (NumberConstructor | StringConstructor)[];
|
||||
clickable: BooleanConstructor;
|
||||
color: StringConstructor;
|
||||
height: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
indeterminate: BooleanConstructor;
|
||||
max: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
modelValue: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
opacity: (NumberConstructor | StringConstructor)[];
|
||||
reverse: BooleanConstructor;
|
||||
stream: BooleanConstructor;
|
||||
striped: BooleanConstructor;
|
||||
roundedBar: BooleanConstructor;
|
||||
}>>;
|
||||
export type VProgressLinear = InstanceType<typeof VProgressLinear>;
|
||||
+218
@@ -0,0 +1,218 @@
|
||||
import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
|
||||
// Styles
|
||||
import "./VProgressLinear.css";
|
||||
|
||||
// Composables
|
||||
import { useBackgroundColor, useTextColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { useIntersectionObserver } from "../../composables/intersectionObserver.js";
|
||||
import { useRtl } from "../../composables/locale.js";
|
||||
import { makeLocationProps, useLocation } from "../../composables/location.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js";
|
||||
import { useResizeObserver } from "../../composables/resizeObserver.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js";
|
||||
import { useToggleScope } from "../../composables/toggleScope.js"; // Utilities
|
||||
import { computed, ref, shallowRef, Transition, watchEffect } from 'vue';
|
||||
import { makeChunksProps, useChunks } from "./chunks.js";
|
||||
import { clamp, convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVProgressLinearProps = propsFactory({
|
||||
absolute: Boolean,
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
bgColor: String,
|
||||
bgOpacity: [Number, String],
|
||||
bufferValue: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
bufferColor: String,
|
||||
bufferOpacity: [Number, String],
|
||||
clickable: Boolean,
|
||||
color: String,
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 4
|
||||
},
|
||||
indeterminate: Boolean,
|
||||
max: {
|
||||
type: [Number, String],
|
||||
default: 100
|
||||
},
|
||||
modelValue: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
opacity: [Number, String],
|
||||
reverse: Boolean,
|
||||
stream: Boolean,
|
||||
striped: Boolean,
|
||||
roundedBar: Boolean,
|
||||
...makeChunksProps(),
|
||||
...makeComponentProps(),
|
||||
...makeLocationProps({
|
||||
location: 'top'
|
||||
}),
|
||||
...makeRoundedProps(),
|
||||
...makeTagProps(),
|
||||
...makeThemeProps()
|
||||
}, 'VProgressLinear');
|
||||
export const VProgressLinear = genericComponent()({
|
||||
name: 'VProgressLinear',
|
||||
props: makeVProgressLinearProps(),
|
||||
emits: {
|
||||
'update:modelValue': value => true
|
||||
},
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const root = ref();
|
||||
const progress = useProxiedModel(props, 'modelValue');
|
||||
const {
|
||||
isRtl,
|
||||
rtlClasses
|
||||
} = useRtl();
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
locationStyles
|
||||
} = useLocation(props);
|
||||
const {
|
||||
textColorClasses,
|
||||
textColorStyles
|
||||
} = useTextColor(() => props.color);
|
||||
const {
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles
|
||||
} = useBackgroundColor(() => props.bgColor || props.color);
|
||||
const {
|
||||
backgroundColorClasses: bufferColorClasses,
|
||||
backgroundColorStyles: bufferColorStyles
|
||||
} = useBackgroundColor(() => props.bufferColor || props.bgColor || props.color);
|
||||
const {
|
||||
backgroundColorClasses: barColorClasses,
|
||||
backgroundColorStyles: barColorStyles
|
||||
} = useBackgroundColor(() => props.color);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props);
|
||||
const {
|
||||
intersectionRef,
|
||||
isIntersecting
|
||||
} = useIntersectionObserver();
|
||||
const max = computed(() => parseFloat(props.max));
|
||||
const height = computed(() => parseFloat(props.height));
|
||||
const normalizedBuffer = computed(() => clamp(parseFloat(props.bufferValue) / max.value * 100, 0, 100));
|
||||
const normalizedValue = computed(() => clamp(parseFloat(progress.value) / max.value * 100, 0, 100));
|
||||
const isReversed = computed(() => isRtl.value !== props.reverse);
|
||||
const transition = computed(() => props.indeterminate ? 'fade-transition' : 'slide-x-transition');
|
||||
const containerWidth = shallowRef(0);
|
||||
const {
|
||||
hasChunks,
|
||||
chunksMaskStyles,
|
||||
snapValueToChunk
|
||||
} = useChunks(props, containerWidth);
|
||||
useToggleScope(hasChunks, () => {
|
||||
const {
|
||||
resizeRef
|
||||
} = useResizeObserver(entries => containerWidth.value = entries[0].contentRect.width);
|
||||
watchEffect(() => resizeRef.value = root.value);
|
||||
});
|
||||
const bufferWidth = computed(() => {
|
||||
return hasChunks.value ? snapValueToChunk(normalizedBuffer.value) : normalizedBuffer.value;
|
||||
});
|
||||
const barWidth = computed(() => {
|
||||
return hasChunks.value ? snapValueToChunk(normalizedValue.value) : normalizedValue.value;
|
||||
});
|
||||
function handleClick(e) {
|
||||
if (!intersectionRef.value) return;
|
||||
const {
|
||||
left,
|
||||
right,
|
||||
width
|
||||
} = intersectionRef.value.getBoundingClientRect();
|
||||
const value = isReversed.value ? width - e.clientX + (right - width) : e.clientX - left;
|
||||
progress.value = Math.round(value / width * max.value);
|
||||
}
|
||||
watchEffect(() => {
|
||||
intersectionRef.value = root.value;
|
||||
});
|
||||
useRender(() => _createVNode(props.tag, {
|
||||
"ref": root,
|
||||
"class": _normalizeClass(['v-progress-linear', {
|
||||
'v-progress-linear--absolute': props.absolute,
|
||||
'v-progress-linear--active': props.active && isIntersecting.value,
|
||||
'v-progress-linear--reverse': isReversed.value,
|
||||
'v-progress-linear--rounded': props.rounded,
|
||||
'v-progress-linear--rounded-bar': props.roundedBar,
|
||||
'v-progress-linear--striped': props.striped,
|
||||
'v-progress-linear--clickable': props.clickable
|
||||
}, roundedClasses.value, themeClasses.value, rtlClasses.value, props.class]),
|
||||
"style": _normalizeStyle([{
|
||||
bottom: props.location === 'bottom' ? 0 : undefined,
|
||||
top: props.location === 'top' ? 0 : undefined,
|
||||
height: props.active ? convertToUnit(height.value) : 0,
|
||||
'--v-progress-linear-height': convertToUnit(height.value),
|
||||
...(props.absolute ? locationStyles.value : {})
|
||||
}, chunksMaskStyles.value, props.style]),
|
||||
"role": "progressbar",
|
||||
"aria-hidden": props.active ? 'false' : 'true',
|
||||
"aria-valuemin": "0",
|
||||
"aria-valuemax": props.max,
|
||||
"aria-valuenow": props.indeterminate ? undefined : Math.min(parseFloat(progress.value), max.value),
|
||||
"onClick": props.clickable && handleClick
|
||||
}, {
|
||||
default: () => [props.stream && _createElementVNode("div", {
|
||||
"key": "stream",
|
||||
"class": _normalizeClass(['v-progress-linear__stream', textColorClasses.value]),
|
||||
"style": {
|
||||
...textColorStyles.value,
|
||||
[isReversed.value ? 'left' : 'right']: convertToUnit(-height.value),
|
||||
borderTop: `${convertToUnit(height.value / 2)} dotted`,
|
||||
opacity: parseFloat(props.bufferOpacity),
|
||||
top: `calc(50% - ${convertToUnit(height.value / 4)})`,
|
||||
width: convertToUnit(100 - normalizedBuffer.value, '%'),
|
||||
'--v-progress-linear-stream-to': convertToUnit(height.value * (isReversed.value ? 1 : -1))
|
||||
}
|
||||
}, null), _createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-progress-linear__background', backgroundColorClasses.value]),
|
||||
"style": _normalizeStyle([backgroundColorStyles.value, {
|
||||
opacity: parseFloat(props.bgOpacity),
|
||||
width: props.stream ? 0 : undefined
|
||||
}])
|
||||
}, null), _createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-progress-linear__buffer', bufferColorClasses.value]),
|
||||
"style": _normalizeStyle([bufferColorStyles.value, {
|
||||
opacity: parseFloat(props.bufferOpacity),
|
||||
width: convertToUnit(bufferWidth.value, '%')
|
||||
}])
|
||||
}, null), _createVNode(Transition, {
|
||||
"name": transition.value
|
||||
}, {
|
||||
default: () => [!props.indeterminate ? _createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-progress-linear__determinate', barColorClasses.value]),
|
||||
"style": _normalizeStyle([barColorStyles.value, {
|
||||
width: convertToUnit(barWidth.value, '%')
|
||||
}])
|
||||
}, null) : _createElementVNode("div", {
|
||||
"class": "v-progress-linear__indeterminate"
|
||||
}, [['long', 'short'].map(bar => _createElementVNode("div", {
|
||||
"key": bar,
|
||||
"class": _normalizeClass(['v-progress-linear__indeterminate', bar, barColorClasses.value]),
|
||||
"style": _normalizeStyle(barColorStyles.value)
|
||||
}, null))])]
|
||||
}), slots.default && _createElementVNode("div", {
|
||||
"class": "v-progress-linear__content"
|
||||
}, [slots.default({
|
||||
value: normalizedValue.value,
|
||||
buffer: normalizedBuffer.value
|
||||
})])]
|
||||
}));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VProgressLinear.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+214
@@ -0,0 +1,214 @@
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
// Block
|
||||
.v-progress-linear
|
||||
background: transparent
|
||||
overflow: hidden
|
||||
position: relative
|
||||
transition: $progress-linear-transition, mask-size 0s
|
||||
width: 100%
|
||||
|
||||
&--rounded
|
||||
@include tools.rounded($progress-linear-border-radius)
|
||||
|
||||
@media (forced-colors: active)
|
||||
border: thin solid buttontext
|
||||
|
||||
// Elements
|
||||
.v-progress-linear__background,
|
||||
.v-progress-linear__buffer
|
||||
background: $progress-linear-background
|
||||
bottom: 0
|
||||
left: 0
|
||||
opacity: $progress-linear-background-opacity
|
||||
position: absolute
|
||||
top: 0
|
||||
width: 100%
|
||||
transition-property: width, left, right
|
||||
transition: inherit
|
||||
|
||||
@include tools.layer('trumps')
|
||||
@media (forced-colors: active)
|
||||
.v-progress-linear__buffer
|
||||
background-color: highlight
|
||||
opacity: .5
|
||||
|
||||
.v-progress-linear__content
|
||||
align-items: center
|
||||
display: flex
|
||||
height: 100%
|
||||
justify-content: center
|
||||
left: 0
|
||||
position: absolute
|
||||
top: 0
|
||||
width: 100%
|
||||
|
||||
.v-progress-linear--clickable
|
||||
.v-progress-linear__content
|
||||
pointer-events: none
|
||||
|
||||
.v-progress-linear__determinate,
|
||||
.v-progress-linear__indeterminate
|
||||
background: $progress-linear-background
|
||||
|
||||
@include tools.layer('trumps')
|
||||
@media (forced-colors: active)
|
||||
background-color: highlight
|
||||
|
||||
.v-progress-linear__determinate
|
||||
height: inherit
|
||||
left: 0
|
||||
position: absolute
|
||||
transition: inherit
|
||||
transition-property: width, left, right
|
||||
|
||||
.v-progress-linear__indeterminate
|
||||
.long, .short
|
||||
animation-play-state: paused
|
||||
animation-duration: $progress-linear-indeterminate-animation-duration
|
||||
animation-iteration-count: infinite
|
||||
bottom: 0
|
||||
height: inherit
|
||||
left: 0
|
||||
position: absolute
|
||||
right: auto
|
||||
top: 0
|
||||
width: auto
|
||||
|
||||
.long
|
||||
animation-name: indeterminate-ltr
|
||||
|
||||
.short
|
||||
animation-name: indeterminate-short-ltr
|
||||
|
||||
.v-progress-linear__stream
|
||||
animation: $progress-linear-stream-animation
|
||||
animation-play-state: paused
|
||||
bottom: 0
|
||||
left: auto
|
||||
opacity: $progress-linear-stream-opacity
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
transition: inherit
|
||||
transition-property: width, left, right
|
||||
|
||||
// Modifiers
|
||||
.v-progress-linear--reverse
|
||||
.v-progress-linear__background,
|
||||
.v-progress-linear__determinate,
|
||||
.v-progress-linear__content
|
||||
left: auto
|
||||
right: 0
|
||||
|
||||
.v-progress-linear__indeterminate
|
||||
.long, .short
|
||||
left: auto
|
||||
right: 0
|
||||
|
||||
.long
|
||||
animation-name: indeterminate-rtl
|
||||
|
||||
.short
|
||||
animation-name: indeterminate-short-rtl
|
||||
|
||||
.v-progress-linear__stream
|
||||
right: auto
|
||||
|
||||
.v-progress-linear--absolute,
|
||||
.v-progress-linear--fixed
|
||||
left: 0
|
||||
z-index: 1
|
||||
|
||||
.v-progress-linear--absolute
|
||||
position: absolute
|
||||
|
||||
.v-progress-linear--fixed
|
||||
position: fixed
|
||||
|
||||
.v-progress-linear--rounded
|
||||
@include tools.rounded($progress-linear-border-radius)
|
||||
|
||||
&.v-progress-linear--rounded-bar
|
||||
.v-progress-linear__determinate,
|
||||
.v-progress-linear__indeterminate
|
||||
border-radius: inherit
|
||||
|
||||
.v-progress-linear--striped
|
||||
.v-progress-linear__determinate
|
||||
animation: $progress-linear-striped-animation
|
||||
background-image: $progress-linear-stripe-gradient
|
||||
background-repeat: repeat
|
||||
background-size: $progress-linear-striped-size
|
||||
|
||||
.v-progress-linear--active
|
||||
.v-progress-linear__indeterminate
|
||||
.long, .short
|
||||
animation-play-state: running
|
||||
|
||||
.v-progress-linear__stream
|
||||
animation-play-state: running
|
||||
|
||||
.v-progress-linear--rounded-bar
|
||||
.v-progress-linear__determinate,
|
||||
.v-progress-linear__indeterminate,
|
||||
.v-progress-linear__stream + .v-progress-linear__background
|
||||
@include tools.rounded($progress-linear-border-radius)
|
||||
|
||||
.v-progress-linear__determinate
|
||||
border-start-start-radius: 0
|
||||
border-end-start-radius: 0
|
||||
|
||||
// Keyframes
|
||||
@keyframes indeterminate-ltr
|
||||
0%
|
||||
left: -90%
|
||||
right: 100%
|
||||
60%
|
||||
left: -90%
|
||||
right: 100%
|
||||
100%
|
||||
left: 100%
|
||||
right: -35%
|
||||
|
||||
@keyframes indeterminate-rtl
|
||||
0%
|
||||
left: 100%
|
||||
right: -90%
|
||||
60%
|
||||
left: 100%
|
||||
right: -90%
|
||||
100%
|
||||
left: -35%
|
||||
right: 100%
|
||||
|
||||
@keyframes indeterminate-short-ltr
|
||||
0%
|
||||
left: -200%
|
||||
right: 100%
|
||||
60%
|
||||
left: 107%
|
||||
right: -8%
|
||||
100%
|
||||
left: 107%
|
||||
right: -8%
|
||||
|
||||
@keyframes indeterminate-short-rtl
|
||||
0%
|
||||
left: 100%
|
||||
right: -200%
|
||||
60%
|
||||
left: -8%
|
||||
right: 107%
|
||||
100%
|
||||
left: -8%
|
||||
right: 107%
|
||||
|
||||
@keyframes stream
|
||||
to
|
||||
transform: translateX(var(--v-progress-linear-stream-to))
|
||||
|
||||
@keyframes progress-linear-stripes
|
||||
0%
|
||||
background-position-x: $progress-linear-striped-size
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
@use 'sass:map';
|
||||
@use '../../styles/settings';
|
||||
|
||||
// VProgressLinear
|
||||
$progress-linear-background: currentColor !default;
|
||||
$progress-linear-background-background: $progress-linear-background !default;
|
||||
$progress-linear-background-opacity: var(--v-border-opacity) !default;
|
||||
$progress-linear-border-radius: map.get(settings.$rounded, 'pill') !default;
|
||||
$progress-linear-stream-opacity: 0.3 !default;
|
||||
$progress-linear-stripe-background-size: 40px 40px !default;
|
||||
$progress-linear-stream-border-width: 4px !default;
|
||||
$progress-linear-stripe-gradient: linear-gradient(
|
||||
135deg,
|
||||
hsla(0, 0%, 100%, .25) 25%,
|
||||
transparent 0,
|
||||
transparent 50%,
|
||||
hsla(0, 0%, 100%, .25) 0,
|
||||
hsla(0, 0%, 100%, .25) 75%,
|
||||
transparent 0,
|
||||
transparent
|
||||
) !default;
|
||||
$progress-linear-indeterminate-animation-duration: 2.2s !default;
|
||||
$progress-linear-stream-animation: stream .25s infinite linear !default;
|
||||
$progress-linear-striped-animation: progress-linear-stripes 1s infinite linear !default;
|
||||
$progress-linear-striped-size: var(--v-progress-linear-height) !default;
|
||||
$progress-linear-transition: .2s settings.$standard-easing !default;
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
import type { MaybeRefOrGetter } from 'vue';
|
||||
export interface ChunksProps {
|
||||
chunkCount: number | string;
|
||||
chunkWidth: number | string;
|
||||
chunkGap: number | string;
|
||||
}
|
||||
export declare const makeChunksProps: <Defaults extends {
|
||||
chunkCount?: unknown;
|
||||
chunkWidth?: unknown;
|
||||
chunkGap?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
chunkCount: unknown extends Defaults["chunkCount"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["chunkCount"] ? string | number : string | number | Defaults["chunkCount"]>;
|
||||
default: unknown extends Defaults["chunkCount"] ? string | number : Defaults["chunkCount"] | NonNullable<string | number>;
|
||||
};
|
||||
chunkWidth: unknown extends Defaults["chunkWidth"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["chunkWidth"] ? string | number : string | number | Defaults["chunkWidth"]>;
|
||||
default: unknown extends Defaults["chunkWidth"] ? string | number : Defaults["chunkWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
chunkGap: unknown extends Defaults["chunkGap"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["chunkGap"] ? string | number : string | number | Defaults["chunkGap"]>;
|
||||
default: unknown extends Defaults["chunkGap"] ? string | number : Defaults["chunkGap"] | NonNullable<string | number>;
|
||||
};
|
||||
};
|
||||
export declare function useChunks(props: ChunksProps, containerWidth: MaybeRefOrGetter<number | undefined>): {
|
||||
hasChunks: Readonly<import("vue").Ref<boolean, boolean>>;
|
||||
chunksMaskStyles: import("vue").ComputedRef<{
|
||||
maskRepeat?: undefined;
|
||||
maskImage?: undefined;
|
||||
maskSize?: undefined;
|
||||
} | {
|
||||
maskRepeat: string;
|
||||
maskImage: string;
|
||||
maskSize: string;
|
||||
}>;
|
||||
snapValueToChunk: (val: number) => number;
|
||||
};
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
// Utilities
|
||||
import { computed, toRef, toValue } from 'vue';
|
||||
import { clamp, convertToUnit, propsFactory } from "../../util/index.js"; // Types
|
||||
// Composables
|
||||
export const makeChunksProps = propsFactory({
|
||||
chunkCount: {
|
||||
type: [Number, String],
|
||||
default: null
|
||||
},
|
||||
chunkWidth: {
|
||||
type: [Number, String],
|
||||
default: null
|
||||
},
|
||||
chunkGap: {
|
||||
type: [Number, String],
|
||||
default: 4
|
||||
}
|
||||
}, 'chunks');
|
||||
export function useChunks(props, containerWidth) {
|
||||
const hasChunks = toRef(() => !!props.chunkCount || !!props.chunkWidth);
|
||||
const chunkWidth = computed(() => {
|
||||
const containerSize = toValue(containerWidth);
|
||||
if (!containerSize) {
|
||||
return 0;
|
||||
}
|
||||
if (!props.chunkCount) {
|
||||
return Number(props.chunkWidth);
|
||||
}
|
||||
const count = Number(props.chunkCount);
|
||||
const availableWidth = containerSize - Number(props.chunkGap) * (count - 1);
|
||||
return availableWidth / count;
|
||||
});
|
||||
const chunkGap = toRef(() => Number(props.chunkGap));
|
||||
const chunksMaskStyles = computed(() => {
|
||||
if (!hasChunks.value) {
|
||||
return {};
|
||||
}
|
||||
const chunkGapPx = convertToUnit(chunkGap.value);
|
||||
const chunkWidthPx = convertToUnit(chunkWidth.value);
|
||||
return {
|
||||
maskRepeat: 'repeat-x',
|
||||
maskImage: `linear-gradient(90deg, #000, #000 ${chunkWidthPx}, transparent ${chunkWidthPx}, transparent)`,
|
||||
maskSize: `calc(${chunkWidthPx} + ${chunkGapPx}) 100%`
|
||||
};
|
||||
});
|
||||
function snapValueToChunk(val) {
|
||||
const containerSize = toValue(containerWidth);
|
||||
if (!containerSize) {
|
||||
return val;
|
||||
}
|
||||
const gapRelativeSize = 100 * chunkGap.value / containerSize;
|
||||
const chunkRelativeSize = 100 * (chunkWidth.value + chunkGap.value) / containerSize;
|
||||
const filledChunks = Math.floor((val + gapRelativeSize) / chunkRelativeSize);
|
||||
return clamp(0, filledChunks * chunkRelativeSize - gapRelativeSize / 2, 100);
|
||||
}
|
||||
return {
|
||||
hasChunks,
|
||||
chunksMaskStyles,
|
||||
snapValueToChunk
|
||||
};
|
||||
}
|
||||
//# sourceMappingURL=chunks.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"chunks.js","names":["computed","toRef","toValue","clamp","convertToUnit","propsFactory","makeChunksProps","chunkCount","type","Number","String","default","chunkWidth","chunkGap","useChunks","props","containerWidth","hasChunks","containerSize","count","availableWidth","chunksMaskStyles","value","chunkGapPx","chunkWidthPx","maskRepeat","maskImage","maskSize","snapValueToChunk","val","gapRelativeSize","chunkRelativeSize","filledChunks","Math","floor"],"sources":["../../../src/components/VProgressLinear/chunks.ts"],"sourcesContent":["// Utilities\nimport { computed, toRef, toValue } from 'vue'\nimport { clamp, convertToUnit, propsFactory } from '@/util'\n\n// Types\nimport type { MaybeRefOrGetter } from 'vue'\n\nexport interface ChunksProps {\n chunkCount: number | string\n chunkWidth: number | string\n chunkGap: number | string\n}\n\n// Composables\nexport const makeChunksProps = propsFactory({\n chunkCount: {\n type: [Number, String],\n default: null,\n },\n chunkWidth: {\n type: [Number, String],\n default: null,\n },\n chunkGap: {\n type: [Number, String],\n default: 4,\n },\n}, 'chunks')\n\nexport function useChunks (\n props: ChunksProps,\n containerWidth: MaybeRefOrGetter<number | undefined>,\n) {\n const hasChunks = toRef(() => !!props.chunkCount || !!props.chunkWidth)\n\n const chunkWidth = computed(() => {\n const containerSize = toValue(containerWidth)\n if (!containerSize) {\n return 0\n }\n\n if (!props.chunkCount) {\n return Number(props.chunkWidth)\n }\n\n const count = Number(props.chunkCount)\n const availableWidth = containerSize - Number(props.chunkGap) * (count - 1)\n return availableWidth / count\n })\n\n const chunkGap = toRef(() => Number(props.chunkGap))\n const chunksMaskStyles = computed(() => {\n if (!hasChunks.value) {\n return {}\n }\n\n const chunkGapPx = convertToUnit(chunkGap.value)\n const chunkWidthPx = convertToUnit(chunkWidth.value)\n\n return {\n maskRepeat: 'repeat-x',\n maskImage: `linear-gradient(90deg, #000, #000 ${chunkWidthPx}, transparent ${chunkWidthPx}, transparent)`,\n maskSize: `calc(${chunkWidthPx} + ${chunkGapPx}) 100%`,\n }\n })\n\n function snapValueToChunk (val: number) {\n const containerSize = toValue(containerWidth)\n if (!containerSize) {\n return val\n }\n\n const gapRelativeSize = 100 * chunkGap.value / containerSize\n const chunkRelativeSize = 100 * (chunkWidth.value + chunkGap.value) / containerSize\n const filledChunks = Math.floor((val + gapRelativeSize) / chunkRelativeSize)\n return clamp(0, filledChunks * chunkRelativeSize - gapRelativeSize / 2, 100)\n }\n\n return {\n hasChunks,\n chunksMaskStyles,\n snapValueToChunk,\n }\n}\n"],"mappings":"AAAA;AACA,SAASA,QAAQ,EAAEC,KAAK,EAAEC,OAAO,QAAQ,KAAK;AAAA,SACrCC,KAAK,EAAEC,aAAa,EAAEC,YAAY,+BAE3C;AASA;AACA,OAAO,MAAMC,eAAe,GAAGD,YAAY,CAAC;EAC1CE,UAAU,EAAE;IACVC,IAAI,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;IACtBC,OAAO,EAAE;EACX,CAAC;EACDC,UAAU,EAAE;IACVJ,IAAI,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;IACtBC,OAAO,EAAE;EACX,CAAC;EACDE,QAAQ,EAAE;IACRL,IAAI,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;IACtBC,OAAO,EAAE;EACX;AACF,CAAC,EAAE,QAAQ,CAAC;AAEZ,OAAO,SAASG,SAASA,CACvBC,KAAkB,EAClBC,cAAoD,EACpD;EACA,MAAMC,SAAS,GAAGhB,KAAK,CAAC,MAAM,CAAC,CAACc,KAAK,CAACR,UAAU,IAAI,CAAC,CAACQ,KAAK,CAACH,UAAU,CAAC;EAEvE,MAAMA,UAAU,GAAGZ,QAAQ,CAAC,MAAM;IAChC,MAAMkB,aAAa,GAAGhB,OAAO,CAACc,cAAc,CAAC;IAC7C,IAAI,CAACE,aAAa,EAAE;MAClB,OAAO,CAAC;IACV;IAEA,IAAI,CAACH,KAAK,CAACR,UAAU,EAAE;MACrB,OAAOE,MAAM,CAACM,KAAK,CAACH,UAAU,CAAC;IACjC;IAEA,MAAMO,KAAK,GAAGV,MAAM,CAACM,KAAK,CAACR,UAAU,CAAC;IACtC,MAAMa,cAAc,GAAGF,aAAa,GAAGT,MAAM,CAACM,KAAK,CAACF,QAAQ,CAAC,IAAIM,KAAK,GAAG,CAAC,CAAC;IAC3E,OAAOC,cAAc,GAAGD,KAAK;EAC/B,CAAC,CAAC;EAEF,MAAMN,QAAQ,GAAGZ,KAAK,CAAC,MAAMQ,MAAM,CAACM,KAAK,CAACF,QAAQ,CAAC,CAAC;EACpD,MAAMQ,gBAAgB,GAAGrB,QAAQ,CAAC,MAAM;IACtC,IAAI,CAACiB,SAAS,CAACK,KAAK,EAAE;MACpB,OAAO,CAAC,CAAC;IACX;IAEA,MAAMC,UAAU,GAAGnB,aAAa,CAACS,QAAQ,CAACS,KAAK,CAAC;IAChD,MAAME,YAAY,GAAGpB,aAAa,CAACQ,UAAU,CAACU,KAAK,CAAC;IAEpD,OAAO;MACLG,UAAU,EAAE,UAAU;MACtBC,SAAS,EAAE,qCAAqCF,YAAY,iBAAiBA,YAAY,gBAAgB;MACzGG,QAAQ,EAAE,QAAQH,YAAY,MAAMD,UAAU;IAChD,CAAC;EACH,CAAC,CAAC;EAEF,SAASK,gBAAgBA,CAAEC,GAAW,EAAE;IACtC,MAAMX,aAAa,GAAGhB,OAAO,CAACc,cAAc,CAAC;IAC7C,IAAI,CAACE,aAAa,EAAE;MAClB,OAAOW,GAAG;IACZ;IAEA,MAAMC,eAAe,GAAG,GAAG,GAAGjB,QAAQ,CAACS,KAAK,GAAGJ,aAAa;IAC5D,MAAMa,iBAAiB,GAAG,GAAG,IAAInB,UAAU,CAACU,KAAK,GAAGT,QAAQ,CAACS,KAAK,CAAC,GAAGJ,aAAa;IACnF,MAAMc,YAAY,GAAGC,IAAI,CAACC,KAAK,CAAC,CAACL,GAAG,GAAGC,eAAe,IAAIC,iBAAiB,CAAC;IAC5E,OAAO5B,KAAK,CAAC,CAAC,EAAE6B,YAAY,GAAGD,iBAAiB,GAAGD,eAAe,GAAG,CAAC,EAAE,GAAG,CAAC;EAC9E;EAEA,OAAO;IACLb,SAAS;IACTI,gBAAgB;IAChBO;EACF,CAAC;AACH","ignoreList":[]}
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VProgressLinear } from './VProgressLinear.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VProgressLinear } from "./VProgressLinear.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VProgressLinear"],"sources":["../../../src/components/VProgressLinear/index.ts"],"sourcesContent":["export { VProgressLinear } from './VProgressLinear'\n"],"mappings":"SAASA,eAAe","ignoreList":[]}
|
||||
Reference in New Issue
Block a user