routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+60
@@ -0,0 +1,60 @@
|
||||
@layer vuetify-components {
|
||||
.v-img {
|
||||
--v-theme-overlay-multiplier: 3;
|
||||
z-index: 0;
|
||||
}
|
||||
.v-img.v-img--absolute {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
.v-img.v-img--fit-content {
|
||||
max-width: fit-content;
|
||||
}
|
||||
.v-img.v-img--fit-content > .v-img__img {
|
||||
position: relative;
|
||||
}
|
||||
.v-img.v-img--fit-content > .v-responsive__sizer {
|
||||
display: none;
|
||||
}
|
||||
.v-img--booting .v-responsive__sizer {
|
||||
transition: none;
|
||||
}
|
||||
.v-img--rounded {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.v-img__img,
|
||||
.v-img__picture,
|
||||
.v-img__gradient,
|
||||
.v-img__placeholder,
|
||||
.v-img__error {
|
||||
z-index: -1;
|
||||
}
|
||||
.v-img__img,
|
||||
.v-img__picture,
|
||||
.v-img__gradient,
|
||||
.v-img__placeholder,
|
||||
.v-img__error {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.v-img__img--preload {
|
||||
filter: blur(4px);
|
||||
}
|
||||
.v-img__img--contain {
|
||||
object-fit: contain;
|
||||
}
|
||||
.v-img__img--cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
.v-img__gradient {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
+592
@@ -0,0 +1,592 @@
|
||||
|
||||
import type { PropType } from 'vue';
|
||||
export interface srcObject {
|
||||
src?: string;
|
||||
srcset?: string;
|
||||
lazySrc?: string;
|
||||
aspect: number;
|
||||
}
|
||||
export type VImgSlots = {
|
||||
default: never;
|
||||
placeholder: never;
|
||||
error: never;
|
||||
sources: never;
|
||||
};
|
||||
export declare const makeVImgProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
height?: unknown;
|
||||
maxHeight?: unknown;
|
||||
maxWidth?: unknown;
|
||||
minHeight?: unknown;
|
||||
minWidth?: unknown;
|
||||
width?: unknown;
|
||||
transition?: unknown;
|
||||
aspectRatio?: unknown;
|
||||
contentClass?: unknown;
|
||||
inline?: unknown;
|
||||
absolute?: unknown;
|
||||
alt?: unknown;
|
||||
cover?: unknown;
|
||||
color?: unknown;
|
||||
draggable?: unknown;
|
||||
eager?: unknown;
|
||||
gradient?: unknown;
|
||||
imageClass?: unknown;
|
||||
lazySrc?: unknown;
|
||||
options?: unknown;
|
||||
sizes?: unknown;
|
||||
src?: unknown;
|
||||
crossorigin?: unknown;
|
||||
referrerpolicy?: unknown;
|
||||
srcset?: unknown;
|
||||
position?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
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>;
|
||||
};
|
||||
rounded: unknown extends Defaults["rounded"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: 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: PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
maxHeight: unknown extends Defaults["maxHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["maxHeight"] ? string | number : string | number | Defaults["maxHeight"]>;
|
||||
default: unknown extends Defaults["maxHeight"] ? string | number : Defaults["maxHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
maxWidth: unknown extends Defaults["maxWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["maxWidth"] ? string | number : string | number | Defaults["maxWidth"]>;
|
||||
default: unknown extends Defaults["maxWidth"] ? string | number : Defaults["maxWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
minHeight: unknown extends Defaults["minHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["minHeight"] ? string | number : string | number | Defaults["minHeight"]>;
|
||||
default: unknown extends Defaults["minHeight"] ? string | number : Defaults["minHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
minWidth: unknown extends Defaults["minWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["minWidth"] ? string | number : string | number | Defaults["minWidth"]>;
|
||||
default: unknown extends Defaults["minWidth"] ? string | number : Defaults["minWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
width: unknown extends Defaults["width"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
transition: unknown extends Defaults["transition"] ? import("vue").Prop<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null> : {
|
||||
type: PropType<unknown extends Defaults["transition"] ? string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null : string | boolean | Defaults["transition"] | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
default: unknown extends Defaults["transition"] ? string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null : Defaults["transition"] | NonNullable<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
};
|
||||
aspectRatio: unknown extends Defaults["aspectRatio"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["aspectRatio"] ? string | number : string | number | Defaults["aspectRatio"]>;
|
||||
default: unknown extends Defaults["aspectRatio"] ? string | number : Defaults["aspectRatio"] | NonNullable<string | number>;
|
||||
};
|
||||
contentClass: unknown extends Defaults["contentClass"] ? null : {
|
||||
type: PropType<unknown extends Defaults["contentClass"] ? any : any>;
|
||||
default: unknown extends Defaults["contentClass"] ? any : any;
|
||||
};
|
||||
inline: unknown extends Defaults["inline"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["inline"] ? boolean : boolean | Defaults["inline"]>;
|
||||
default: unknown extends Defaults["inline"] ? boolean : boolean | Defaults["inline"];
|
||||
};
|
||||
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"];
|
||||
};
|
||||
alt: unknown extends Defaults["alt"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["alt"] ? string : string | Defaults["alt"]>;
|
||||
default: unknown extends Defaults["alt"] ? string : string | Defaults["alt"];
|
||||
};
|
||||
cover: unknown extends Defaults["cover"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["cover"] ? boolean : boolean | Defaults["cover"]>;
|
||||
default: unknown extends Defaults["cover"] ? boolean : boolean | Defaults["cover"];
|
||||
};
|
||||
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"];
|
||||
};
|
||||
draggable: unknown extends Defaults["draggable"] ? {
|
||||
type: PropType<boolean | 'true' | 'false'>;
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: PropType<boolean | 'true' | 'false'>;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["draggable"] ? "false" | "true" | boolean : "false" | "true" | boolean | Defaults["draggable"]>;
|
||||
default: unknown extends Defaults["draggable"] ? "false" | "true" | boolean : Defaults["draggable"] | NonNullable<"false" | "true" | boolean>;
|
||||
};
|
||||
eager: unknown extends Defaults["eager"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["eager"] ? boolean : boolean | Defaults["eager"]>;
|
||||
default: unknown extends Defaults["eager"] ? boolean : boolean | Defaults["eager"];
|
||||
};
|
||||
gradient: unknown extends Defaults["gradient"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["gradient"] ? string : string | Defaults["gradient"]>;
|
||||
default: unknown extends Defaults["gradient"] ? string : string | Defaults["gradient"];
|
||||
};
|
||||
imageClass: unknown extends Defaults["imageClass"] ? null : {
|
||||
type: PropType<unknown extends Defaults["imageClass"] ? any : any>;
|
||||
default: unknown extends Defaults["imageClass"] ? any : any;
|
||||
};
|
||||
lazySrc: unknown extends Defaults["lazySrc"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["lazySrc"] ? string : string | Defaults["lazySrc"]>;
|
||||
default: unknown extends Defaults["lazySrc"] ? string : string | Defaults["lazySrc"];
|
||||
};
|
||||
options: unknown extends Defaults["options"] ? {
|
||||
type: PropType<IntersectionObserverInit>;
|
||||
default: () => {
|
||||
root: undefined;
|
||||
rootMargin: undefined;
|
||||
threshold: undefined;
|
||||
};
|
||||
} : Omit<{
|
||||
type: PropType<IntersectionObserverInit>;
|
||||
default: () => {
|
||||
root: undefined;
|
||||
rootMargin: undefined;
|
||||
threshold: undefined;
|
||||
};
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["options"] ? IntersectionObserverInit : IntersectionObserverInit | Defaults["options"]>;
|
||||
default: unknown extends Defaults["options"] ? IntersectionObserverInit : IntersectionObserverInit | Defaults["options"];
|
||||
};
|
||||
sizes: unknown extends Defaults["sizes"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["sizes"] ? string : string | Defaults["sizes"]>;
|
||||
default: unknown extends Defaults["sizes"] ? string : string | Defaults["sizes"];
|
||||
};
|
||||
src: unknown extends Defaults["src"] ? {
|
||||
type: PropType<string | srcObject>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<string | srcObject>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["src"] ? string | srcObject : string | srcObject | Defaults["src"]>;
|
||||
default: unknown extends Defaults["src"] ? string | srcObject : Defaults["src"] | NonNullable<string | srcObject>;
|
||||
};
|
||||
crossorigin: unknown extends Defaults["crossorigin"] ? PropType<"" | "anonymous" | "use-credentials"> : {
|
||||
type: PropType<unknown extends Defaults["crossorigin"] ? "" | "anonymous" | "use-credentials" : "" | "anonymous" | "use-credentials" | Defaults["crossorigin"]>;
|
||||
default: unknown extends Defaults["crossorigin"] ? "" | "anonymous" | "use-credentials" : Defaults["crossorigin"] | NonNullable<"" | "anonymous" | "use-credentials">;
|
||||
};
|
||||
referrerpolicy: unknown extends Defaults["referrerpolicy"] ? PropType<"no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"> : {
|
||||
type: PropType<unknown extends Defaults["referrerpolicy"] ? "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" : "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | Defaults["referrerpolicy"]>;
|
||||
default: unknown extends Defaults["referrerpolicy"] ? "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" : Defaults["referrerpolicy"] | NonNullable<"no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url">;
|
||||
};
|
||||
srcset: unknown extends Defaults["srcset"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["srcset"] ? string : string | Defaults["srcset"]>;
|
||||
default: unknown extends Defaults["srcset"] ? string : string | Defaults["srcset"];
|
||||
};
|
||||
position: unknown extends Defaults["position"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["position"] ? string : string | Defaults["position"]>;
|
||||
default: unknown extends Defaults["position"] ? string : string | Defaults["position"];
|
||||
};
|
||||
};
|
||||
export declare const VImg: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
inline: boolean;
|
||||
absolute: boolean;
|
||||
cover: boolean;
|
||||
eager: boolean;
|
||||
options: IntersectionObserverInit;
|
||||
src: string | srcObject;
|
||||
} & {
|
||||
class?: any;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
transition?: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null | undefined;
|
||||
aspectRatio?: string | number | undefined;
|
||||
contentClass?: any;
|
||||
alt?: string | undefined;
|
||||
color?: string | undefined;
|
||||
draggable?: "false" | "true" | boolean | undefined;
|
||||
gradient?: string | undefined;
|
||||
imageClass?: any;
|
||||
lazySrc?: string | undefined;
|
||||
sizes?: string | undefined;
|
||||
crossorigin?: "" | "anonymous" | "use-credentials" | undefined;
|
||||
referrerpolicy?: "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | undefined;
|
||||
srcset?: string | undefined;
|
||||
position?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
placeholder?: (() => import("vue").VNodeChild) | undefined;
|
||||
error?: (() => import("vue").VNodeChild) | undefined;
|
||||
sources?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
placeholder?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
error?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
sources?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:error"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:placeholder"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:sources"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
onError?: ((value: string | undefined) => any) | undefined;
|
||||
onLoad?: ((value: string | undefined) => any) | undefined;
|
||||
onLoadstart?: ((value: string | undefined) => any) | undefined;
|
||||
}, {
|
||||
currentSrc: import("vue").ShallowRef<string, string>;
|
||||
image: import("vue").Ref<HTMLImageElement | undefined, HTMLImageElement | undefined>;
|
||||
state: import("vue").ShallowRef<"error" | "idle" | "loaded" | "loading", "error" | "idle" | "loaded" | "loading">;
|
||||
naturalWidth: import("vue").ShallowRef<number | undefined, number | undefined>;
|
||||
naturalHeight: import("vue").ShallowRef<number | undefined, number | undefined>;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
loadstart: (value: string | undefined) => true;
|
||||
load: (value: string | undefined) => true;
|
||||
error: (value: string | undefined) => true;
|
||||
}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
inline: boolean;
|
||||
absolute: boolean;
|
||||
cover: boolean;
|
||||
draggable: "false" | "true" | boolean;
|
||||
eager: boolean;
|
||||
options: IntersectionObserverInit;
|
||||
src: string | srcObject;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
placeholder: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
error: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
sources: () => 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;
|
||||
inline: boolean;
|
||||
absolute: boolean;
|
||||
cover: boolean;
|
||||
eager: boolean;
|
||||
options: IntersectionObserverInit;
|
||||
src: string | srcObject;
|
||||
} & {
|
||||
class?: any;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
transition?: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null | undefined;
|
||||
aspectRatio?: string | number | undefined;
|
||||
contentClass?: any;
|
||||
alt?: string | undefined;
|
||||
color?: string | undefined;
|
||||
draggable?: "false" | "true" | boolean | undefined;
|
||||
gradient?: string | undefined;
|
||||
imageClass?: any;
|
||||
lazySrc?: string | undefined;
|
||||
sizes?: string | undefined;
|
||||
crossorigin?: "" | "anonymous" | "use-credentials" | undefined;
|
||||
referrerpolicy?: "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | undefined;
|
||||
srcset?: string | undefined;
|
||||
position?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
placeholder?: (() => import("vue").VNodeChild) | undefined;
|
||||
error?: (() => import("vue").VNodeChild) | undefined;
|
||||
sources?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
placeholder?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
error?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
sources?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:error"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:placeholder"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:sources"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
onError?: ((value: string | undefined) => any) | undefined;
|
||||
onLoad?: ((value: string | undefined) => any) | undefined;
|
||||
onLoadstart?: ((value: string | undefined) => any) | undefined;
|
||||
}, {
|
||||
currentSrc: import("vue").ShallowRef<string, string>;
|
||||
image: import("vue").Ref<HTMLImageElement | undefined, HTMLImageElement | undefined>;
|
||||
state: import("vue").ShallowRef<"error" | "idle" | "loaded" | "loading", "error" | "idle" | "loaded" | "loading">;
|
||||
naturalWidth: import("vue").ShallowRef<number | undefined, number | undefined>;
|
||||
naturalHeight: import("vue").ShallowRef<number | undefined, number | undefined>;
|
||||
}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
inline: boolean;
|
||||
absolute: boolean;
|
||||
cover: boolean;
|
||||
draggable: "false" | "true" | boolean;
|
||||
eager: boolean;
|
||||
options: IntersectionObserverInit;
|
||||
src: string | srcObject;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
inline: boolean;
|
||||
absolute: boolean;
|
||||
cover: boolean;
|
||||
eager: boolean;
|
||||
options: IntersectionObserverInit;
|
||||
src: string | srcObject;
|
||||
} & {
|
||||
class?: any;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
transition?: string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null | undefined;
|
||||
aspectRatio?: string | number | undefined;
|
||||
contentClass?: any;
|
||||
alt?: string | undefined;
|
||||
color?: string | undefined;
|
||||
draggable?: "false" | "true" | boolean | undefined;
|
||||
gradient?: string | undefined;
|
||||
imageClass?: any;
|
||||
lazySrc?: string | undefined;
|
||||
sizes?: string | undefined;
|
||||
crossorigin?: "" | "anonymous" | "use-credentials" | undefined;
|
||||
referrerpolicy?: "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | undefined;
|
||||
srcset?: string | undefined;
|
||||
position?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
placeholder?: (() => import("vue").VNodeChild) | undefined;
|
||||
error?: (() => import("vue").VNodeChild) | undefined;
|
||||
sources?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
placeholder?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
error?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
sources?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:error"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:placeholder"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:sources"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
onError?: ((value: string | undefined) => any) | undefined;
|
||||
onLoad?: ((value: string | undefined) => any) | undefined;
|
||||
onLoadstart?: ((value: string | undefined) => any) | undefined;
|
||||
}, {
|
||||
currentSrc: import("vue").ShallowRef<string, string>;
|
||||
image: import("vue").Ref<HTMLImageElement | undefined, HTMLImageElement | undefined>;
|
||||
state: import("vue").ShallowRef<"error" | "idle" | "loaded" | "loading", "error" | "idle" | "loaded" | "loading">;
|
||||
naturalWidth: import("vue").ShallowRef<number | undefined, number | undefined>;
|
||||
naturalHeight: import("vue").ShallowRef<number | undefined, number | undefined>;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
loadstart: (value: string | undefined) => true;
|
||||
load: (value: string | undefined) => true;
|
||||
error: (value: string | undefined) => true;
|
||||
}, string, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
inline: boolean;
|
||||
absolute: boolean;
|
||||
cover: boolean;
|
||||
draggable: "false" | "true" | boolean;
|
||||
eager: boolean;
|
||||
options: IntersectionObserverInit;
|
||||
src: string | srcObject;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
placeholder: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
error: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
sources: () => 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<{
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
transition: import("vue").Prop<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
aspectRatio: (NumberConstructor | StringConstructor)[];
|
||||
contentClass: null;
|
||||
inline: BooleanConstructor;
|
||||
absolute: BooleanConstructor;
|
||||
alt: StringConstructor;
|
||||
cover: BooleanConstructor;
|
||||
color: StringConstructor;
|
||||
draggable: {
|
||||
type: PropType<boolean | 'true' | 'false'>;
|
||||
default: undefined;
|
||||
};
|
||||
eager: BooleanConstructor;
|
||||
gradient: StringConstructor;
|
||||
imageClass: null;
|
||||
lazySrc: StringConstructor;
|
||||
options: {
|
||||
type: PropType<IntersectionObserverInit>;
|
||||
default: () => {
|
||||
root: undefined;
|
||||
rootMargin: undefined;
|
||||
threshold: undefined;
|
||||
};
|
||||
};
|
||||
sizes: StringConstructor;
|
||||
src: {
|
||||
type: PropType<string | srcObject>;
|
||||
default: string;
|
||||
};
|
||||
crossorigin: PropType<'' | 'anonymous' | 'use-credentials'>;
|
||||
referrerpolicy: PropType<'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url'>;
|
||||
srcset: StringConstructor;
|
||||
position: StringConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
transition: import("vue").Prop<string | boolean | (import("vue").TransitionProps & {
|
||||
component?: import("vue").Component;
|
||||
}) | null>;
|
||||
aspectRatio: (NumberConstructor | StringConstructor)[];
|
||||
contentClass: null;
|
||||
inline: BooleanConstructor;
|
||||
absolute: BooleanConstructor;
|
||||
alt: StringConstructor;
|
||||
cover: BooleanConstructor;
|
||||
color: StringConstructor;
|
||||
draggable: {
|
||||
type: PropType<boolean | 'true' | 'false'>;
|
||||
default: undefined;
|
||||
};
|
||||
eager: BooleanConstructor;
|
||||
gradient: StringConstructor;
|
||||
imageClass: null;
|
||||
lazySrc: StringConstructor;
|
||||
options: {
|
||||
type: PropType<IntersectionObserverInit>;
|
||||
default: () => {
|
||||
root: undefined;
|
||||
rootMargin: undefined;
|
||||
threshold: undefined;
|
||||
};
|
||||
};
|
||||
sizes: StringConstructor;
|
||||
src: {
|
||||
type: PropType<string | srcObject>;
|
||||
default: string;
|
||||
};
|
||||
crossorigin: PropType<'' | 'anonymous' | 'use-credentials'>;
|
||||
referrerpolicy: PropType<'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url'>;
|
||||
srcset: StringConstructor;
|
||||
position: StringConstructor;
|
||||
}>>;
|
||||
export type VImg = InstanceType<typeof VImg>;
|
||||
+305
@@ -0,0 +1,305 @@
|
||||
import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, createVNode as _createVNode, Fragment as _Fragment, mergeProps as _mergeProps, withDirectives as _withDirectives } from "vue";
|
||||
// Styles
|
||||
import "./VImg.css";
|
||||
|
||||
// Components
|
||||
import { makeVResponsiveProps, VResponsive } from "../VResponsive/VResponsive.js"; // Composables
|
||||
import { useBackgroundColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { makeTransitionProps, MaybeTransition } from "../../composables/transition.js"; // Directives
|
||||
import vIntersect from "../../directives/intersect/index.js"; // Utilities
|
||||
import { computed, nextTick, onBeforeMount, onBeforeUnmount, ref, shallowRef, toRef, vShow, watch, withDirectives } from 'vue';
|
||||
import { convertToUnit, filterInputAttrs, genericComponent, getCurrentInstance, propsFactory, SUPPORTS_INTERSECTION, useRender } from "../../util/index.js"; // Types
|
||||
// not intended for public use, this is passed in by vuetify-loader
|
||||
export const makeVImgProps = propsFactory({
|
||||
absolute: Boolean,
|
||||
alt: String,
|
||||
cover: Boolean,
|
||||
color: String,
|
||||
draggable: {
|
||||
type: [Boolean, String],
|
||||
default: undefined
|
||||
},
|
||||
eager: Boolean,
|
||||
gradient: String,
|
||||
imageClass: null,
|
||||
lazySrc: String,
|
||||
options: {
|
||||
type: Object,
|
||||
// For more information on types, navigate to:
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
|
||||
default: () => ({
|
||||
root: undefined,
|
||||
rootMargin: undefined,
|
||||
threshold: undefined
|
||||
})
|
||||
},
|
||||
sizes: String,
|
||||
src: {
|
||||
type: [String, Object],
|
||||
default: ''
|
||||
},
|
||||
crossorigin: String,
|
||||
referrerpolicy: String,
|
||||
srcset: String,
|
||||
position: String,
|
||||
...makeVResponsiveProps(),
|
||||
...makeComponentProps(),
|
||||
...makeRoundedProps(),
|
||||
...makeTransitionProps()
|
||||
}, 'VImg');
|
||||
export const VImg = genericComponent()({
|
||||
name: 'VImg',
|
||||
directives: {
|
||||
vIntersect
|
||||
},
|
||||
inheritAttrs: false,
|
||||
props: makeVImgProps(),
|
||||
emits: {
|
||||
loadstart: value => true,
|
||||
load: value => true,
|
||||
error: value => true
|
||||
},
|
||||
setup(props, {
|
||||
attrs,
|
||||
emit,
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles
|
||||
} = useBackgroundColor(() => props.color);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props);
|
||||
const vm = getCurrentInstance('VImg');
|
||||
const currentSrc = shallowRef(''); // Set from srcset
|
||||
const image = ref();
|
||||
const state = shallowRef(props.eager ? 'loading' : 'idle');
|
||||
const naturalWidth = shallowRef();
|
||||
const naturalHeight = shallowRef();
|
||||
const normalisedSrc = computed(() => {
|
||||
return props.src && typeof props.src === 'object' ? {
|
||||
src: props.src.src,
|
||||
srcset: props.srcset || props.src.srcset,
|
||||
lazySrc: props.lazySrc || props.src.lazySrc,
|
||||
aspect: Number(props.aspectRatio || props.src.aspect || 0)
|
||||
} : {
|
||||
src: props.src,
|
||||
srcset: props.srcset,
|
||||
lazySrc: props.lazySrc,
|
||||
aspect: Number(props.aspectRatio || 0)
|
||||
};
|
||||
});
|
||||
const aspectRatio = computed(() => {
|
||||
return normalisedSrc.value.aspect || naturalWidth.value / naturalHeight.value || 0;
|
||||
});
|
||||
watch(() => props.src, () => {
|
||||
init(state.value !== 'idle');
|
||||
});
|
||||
watch(aspectRatio, (val, oldVal) => {
|
||||
if (!val && oldVal && image.value) {
|
||||
pollForSize(image.value);
|
||||
}
|
||||
});
|
||||
|
||||
// TODO: getSrc when window width changes
|
||||
|
||||
onBeforeMount(() => init());
|
||||
function init(isIntersecting) {
|
||||
if (props.eager && isIntersecting) return;
|
||||
if (SUPPORTS_INTERSECTION && !isIntersecting && !props.eager) return;
|
||||
state.value = 'loading';
|
||||
if (normalisedSrc.value.lazySrc) {
|
||||
const lazyImg = new Image();
|
||||
lazyImg.src = normalisedSrc.value.lazySrc;
|
||||
pollForSize(lazyImg, null);
|
||||
}
|
||||
if (!normalisedSrc.value.src) return;
|
||||
nextTick(() => {
|
||||
emit('loadstart', image.value?.currentSrc || normalisedSrc.value.src);
|
||||
setTimeout(() => {
|
||||
if (vm.isUnmounted) return;
|
||||
if (image.value?.complete) {
|
||||
if (!image.value.naturalWidth) {
|
||||
onError();
|
||||
}
|
||||
if (state.value === 'error') return;
|
||||
if (!aspectRatio.value) pollForSize(image.value, null);
|
||||
if (state.value === 'loading') onLoad();
|
||||
} else {
|
||||
if (!aspectRatio.value) pollForSize(image.value);
|
||||
getSrc();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
function onLoad() {
|
||||
if (vm.isUnmounted) return;
|
||||
getSrc();
|
||||
pollForSize(image.value);
|
||||
state.value = 'loaded';
|
||||
emit('load', image.value?.currentSrc || normalisedSrc.value.src);
|
||||
}
|
||||
function onError() {
|
||||
if (vm.isUnmounted) return;
|
||||
state.value = 'error';
|
||||
emit('error', image.value?.currentSrc || normalisedSrc.value.src);
|
||||
}
|
||||
function getSrc() {
|
||||
const img = image.value;
|
||||
if (img) currentSrc.value = img.currentSrc || img.src;
|
||||
}
|
||||
let timer = -1;
|
||||
onBeforeUnmount(() => {
|
||||
clearTimeout(timer);
|
||||
});
|
||||
function pollForSize(img, timeout = 100) {
|
||||
const poll = () => {
|
||||
clearTimeout(timer);
|
||||
if (vm.isUnmounted) return;
|
||||
const {
|
||||
naturalHeight: imgHeight,
|
||||
naturalWidth: imgWidth
|
||||
} = img;
|
||||
if (imgHeight || imgWidth) {
|
||||
naturalWidth.value = imgWidth;
|
||||
naturalHeight.value = imgHeight;
|
||||
} else if (!img.complete && state.value === 'loading' && timeout != null) {
|
||||
timer = window.setTimeout(poll, timeout);
|
||||
} else if (img.currentSrc.endsWith('.svg') || img.currentSrc.startsWith('data:image/svg+xml')) {
|
||||
naturalWidth.value = 1;
|
||||
naturalHeight.value = 1;
|
||||
}
|
||||
};
|
||||
poll();
|
||||
}
|
||||
const containClasses = toRef(() => ({
|
||||
'v-img__img--cover': props.cover,
|
||||
'v-img__img--contain': !props.cover
|
||||
}));
|
||||
const __image = () => {
|
||||
if (!normalisedSrc.value.src || state.value === 'idle') return null;
|
||||
const img = _createElementVNode("img", {
|
||||
"class": _normalizeClass(['v-img__img', containClasses.value, props.imageClass]),
|
||||
"style": {
|
||||
objectPosition: props.position
|
||||
},
|
||||
"crossorigin": props.crossorigin,
|
||||
"src": normalisedSrc.value.src,
|
||||
"srcset": normalisedSrc.value.srcset,
|
||||
"alt": props.alt,
|
||||
"referrerpolicy": props.referrerpolicy,
|
||||
"draggable": props.draggable,
|
||||
"sizes": props.sizes,
|
||||
"ref": image,
|
||||
"onLoad": onLoad,
|
||||
"onError": onError
|
||||
}, null);
|
||||
const sources = slots.sources?.();
|
||||
return _createVNode(MaybeTransition, {
|
||||
"transition": props.transition,
|
||||
"appear": true
|
||||
}, {
|
||||
default: () => [withDirectives(sources ? _createElementVNode("picture", {
|
||||
"class": "v-img__picture"
|
||||
}, [sources, img]) : img, [[vShow, state.value === 'loaded']])]
|
||||
});
|
||||
};
|
||||
const __preloadImage = () => _createVNode(MaybeTransition, {
|
||||
"transition": props.transition
|
||||
}, {
|
||||
default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && _createElementVNode("img", {
|
||||
"class": _normalizeClass(['v-img__img', 'v-img__img--preload', containClasses.value]),
|
||||
"style": {
|
||||
objectPosition: props.position
|
||||
},
|
||||
"crossorigin": props.crossorigin,
|
||||
"src": normalisedSrc.value.lazySrc,
|
||||
"alt": props.alt,
|
||||
"referrerpolicy": props.referrerpolicy,
|
||||
"draggable": props.draggable
|
||||
}, null)]
|
||||
});
|
||||
const __placeholder = () => {
|
||||
if (!slots.placeholder) return null;
|
||||
return _createVNode(MaybeTransition, {
|
||||
"transition": props.transition,
|
||||
"appear": true
|
||||
}, {
|
||||
default: () => [(state.value === 'loading' || state.value === 'error' && !slots.error) && _createElementVNode("div", {
|
||||
"class": "v-img__placeholder"
|
||||
}, [slots.placeholder()])]
|
||||
});
|
||||
};
|
||||
const __error = () => {
|
||||
if (!slots.error) return null;
|
||||
return _createVNode(MaybeTransition, {
|
||||
"transition": props.transition,
|
||||
"appear": true
|
||||
}, {
|
||||
default: () => [state.value === 'error' && _createElementVNode("div", {
|
||||
"class": "v-img__error"
|
||||
}, [slots.error()])]
|
||||
});
|
||||
};
|
||||
const __gradient = () => {
|
||||
if (!props.gradient) return null;
|
||||
return _createElementVNode("div", {
|
||||
"class": "v-img__gradient",
|
||||
"style": {
|
||||
backgroundImage: `linear-gradient(${props.gradient})`
|
||||
}
|
||||
}, null);
|
||||
};
|
||||
const isBooted = shallowRef(false);
|
||||
{
|
||||
const stop = watch(aspectRatio, val => {
|
||||
if (val) {
|
||||
// Doesn't work with nextTick, idk why
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
isBooted.value = true;
|
||||
});
|
||||
});
|
||||
stop();
|
||||
}
|
||||
});
|
||||
}
|
||||
useRender(() => {
|
||||
const responsiveProps = VResponsive.filterProps(props);
|
||||
const [rootAttrs, imageAttrs] = filterInputAttrs(attrs);
|
||||
return _withDirectives(_createVNode(VResponsive, _mergeProps({
|
||||
"class": ['v-img', {
|
||||
'v-img--absolute': props.absolute,
|
||||
'v-img--booting': !isBooted.value,
|
||||
'v-img--fit-content': props.width === 'fit-content'
|
||||
}, backgroundColorClasses.value, roundedClasses.value, props.class],
|
||||
"style": [{
|
||||
width: convertToUnit(props.width === 'auto' ? naturalWidth.value : props.width)
|
||||
}, backgroundColorStyles.value, props.style]
|
||||
}, responsiveProps, rootAttrs, {
|
||||
"aspectRatio": aspectRatio.value,
|
||||
"aria-label": props.alt,
|
||||
"role": props.alt ? 'img' : undefined
|
||||
}), {
|
||||
additional: () => _createElementVNode(_Fragment, null, [_createVNode(__image, imageAttrs, null), _createVNode(__preloadImage, null, null), _createVNode(__gradient, null, null), _createVNode(__placeholder, null, null), _createVNode(__error, null, null)]),
|
||||
default: slots.default
|
||||
}), [[vIntersect, {
|
||||
handler: init,
|
||||
options: props.options
|
||||
}, null, {
|
||||
once: true
|
||||
}]]);
|
||||
});
|
||||
return {
|
||||
currentSrc,
|
||||
image,
|
||||
state,
|
||||
naturalWidth,
|
||||
naturalHeight
|
||||
};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VImg.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+53
@@ -0,0 +1,53 @@
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-img
|
||||
--v-theme-overlay-multiplier: 3
|
||||
z-index: 0
|
||||
|
||||
&.v-img--absolute
|
||||
height: 100%
|
||||
left: 0
|
||||
overflow: hidden
|
||||
position: absolute
|
||||
top: 0
|
||||
width: 100%
|
||||
z-index: -1
|
||||
|
||||
&.v-img--fit-content
|
||||
max-width: fit-content
|
||||
|
||||
> .v-img__img
|
||||
position: relative
|
||||
|
||||
> .v-responsive__sizer
|
||||
display: none
|
||||
|
||||
&--booting .v-responsive__sizer
|
||||
transition: none
|
||||
|
||||
&--rounded
|
||||
@include tools.rounded($img-rounded-border-radius)
|
||||
|
||||
.v-img__img,
|
||||
.v-img__picture,
|
||||
.v-img__gradient,
|
||||
.v-img__placeholder,
|
||||
.v-img__error
|
||||
z-index: -1
|
||||
|
||||
@include tools.absolute()
|
||||
|
||||
.v-img__img
|
||||
&--preload
|
||||
filter: $img-preload-filter
|
||||
|
||||
&--contain
|
||||
object-fit: contain
|
||||
|
||||
&--cover
|
||||
object-fit: cover
|
||||
|
||||
.v-img__gradient
|
||||
background-repeat: no-repeat
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@use '../../styles/settings';
|
||||
|
||||
// Defaults
|
||||
$img-rounded-border-radius: settings.$border-radius-root !default;
|
||||
$img-preload-filter: blur(4px) !default;
|
||||
$img-card-media-height: 200px !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VImg } from './VImg.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VImg } from "./VImg.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VImg"],"sources":["../../../src/components/VImg/index.ts"],"sourcesContent":["export { VImg } from './VImg'\n"],"mappings":"SAASA,IAAI","ignoreList":[]}
|
||||
Reference in New Issue
Block a user