@resee-movies/nuxt-ux 0.13.0 → 0.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/module.json +1 -1
- package/dist/runtime/components/Button.vue +11 -13
- package/dist/runtime/components/Card.vue +21 -5
- package/dist/runtime/components/Card.vue.d.ts +7 -1
- package/dist/runtime/components/Icon.vue +7 -33
- package/dist/runtime/components/Icon.vue.d.ts +8 -6
- package/dist/runtime/components/IconTextPair.vue +32 -24
- package/dist/runtime/components/IconTextPair.vue.d.ts +16 -4
- package/dist/runtime/components/IconTransition.vue +33 -0
- package/dist/runtime/components/IconTransition.vue.d.ts +9 -0
- package/dist/runtime/components/Image.vue +58 -128
- package/dist/runtime/components/Image.vue.d.ts +3 -35
- package/dist/runtime/components/ImageBase.vue +121 -0
- package/dist/runtime/components/ImageBase.vue.d.ts +42 -0
- package/dist/runtime/components/form/FormSubmitButton.vue +5 -6
- package/dist/runtime/composables/use-load-image.d.ts +3 -0
- package/dist/runtime/composables/use-load-image.js +11 -0
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -21,16 +21,16 @@
|
|
|
21
21
|
@click = "handleButtonClick"
|
|
22
22
|
>
|
|
23
23
|
<IconTextPair
|
|
24
|
-
:text
|
|
25
|
-
:icon
|
|
26
|
-
:icon-size
|
|
27
|
-
:trailing-icon
|
|
28
|
-
:spacing
|
|
29
|
-
:loading = "showLoading"
|
|
30
|
-
:icon-transition-name = "props.iconTransitionName"
|
|
31
|
-
:icon-transition-mode = "props.iconTransitionMode"
|
|
32
|
-
:icon-transition-on-appear = "props.iconTransitionOnAppear"
|
|
24
|
+
:text = "props.text"
|
|
25
|
+
:icon = "props.icon"
|
|
26
|
+
:icon-size = "props.iconSize ?? props.size"
|
|
27
|
+
:trailing-icon = "props.trailingIcon"
|
|
28
|
+
:spacing = "props.spacing ?? (iconOnly ? 'none' : 'wide')"
|
|
33
29
|
>
|
|
30
|
+
<template #leading="{ slotProps }">
|
|
31
|
+
<IconTransition v-bind="slotProps" :loading="showLoading" />
|
|
32
|
+
</template>
|
|
33
|
+
|
|
34
34
|
<template #default v-if="slots.default">
|
|
35
35
|
<slot />
|
|
36
36
|
</template>
|
|
@@ -47,6 +47,7 @@ import { computed, ref, useSlots } from "vue";
|
|
|
47
47
|
<script setup>
|
|
48
48
|
import vPrimeTooltip from "primevue/tooltip";
|
|
49
49
|
import IconTextPair from "./IconTextPair.vue";
|
|
50
|
+
import IconTransition from "./IconTransition.vue";
|
|
50
51
|
defineEmits(["click"]);
|
|
51
52
|
const props = defineProps({
|
|
52
53
|
is: { type: null, required: false, default: "button" },
|
|
@@ -66,10 +67,7 @@ const props = defineProps({
|
|
|
66
67
|
trailingIcon: { type: String, required: false },
|
|
67
68
|
iconSize: { type: String, required: false },
|
|
68
69
|
trailingIconSize: { type: String, required: false },
|
|
69
|
-
spacing: { type: String, required: false }
|
|
70
|
-
iconTransitionName: { type: String, required: false },
|
|
71
|
-
iconTransitionMode: { type: String, required: false },
|
|
72
|
-
iconTransitionOnAppear: { type: Boolean, required: false }
|
|
70
|
+
spacing: { type: String, required: false }
|
|
73
71
|
});
|
|
74
72
|
const slots = useSlots();
|
|
75
73
|
const shrink = computed(
|
|
@@ -1,6 +1,18 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<Component
|
|
3
|
-
|
|
2
|
+
<Component
|
|
3
|
+
:is = "props.is"
|
|
4
|
+
:class = "[
|
|
5
|
+
'card',
|
|
6
|
+
{
|
|
7
|
+
interactive: props.interactive,
|
|
8
|
+
colorful: props.colorful,
|
|
9
|
+
bordered: props.bordered,
|
|
10
|
+
beveled: props.beveled,
|
|
11
|
+
raised: props.raised
|
|
12
|
+
}
|
|
13
|
+
]"
|
|
14
|
+
>
|
|
15
|
+
<slot name="default">
|
|
4
16
|
<div v-if="slots.image" class="image">
|
|
5
17
|
<slot name="image" />
|
|
6
18
|
</div>
|
|
@@ -19,12 +31,16 @@
|
|
|
19
31
|
<script setup>
|
|
20
32
|
import { useSlots } from "#imports";
|
|
21
33
|
const props = defineProps({
|
|
22
|
-
is: { type:
|
|
23
|
-
interactive: { type: Boolean, required: false, default: false }
|
|
34
|
+
is: { type: null, required: false, default: "div" },
|
|
35
|
+
interactive: { type: Boolean, required: false, default: false },
|
|
36
|
+
colorful: { type: Boolean, required: false, default: false },
|
|
37
|
+
bordered: { type: Boolean, required: false, default: false },
|
|
38
|
+
beveled: { type: Boolean, required: false, default: false },
|
|
39
|
+
raised: { type: Boolean, required: false, default: false }
|
|
24
40
|
});
|
|
25
41
|
const slots = useSlots();
|
|
26
42
|
</script>
|
|
27
43
|
|
|
28
44
|
<style scoped>
|
|
29
|
-
@reference "tailwindcss";@layer components{
|
|
45
|
+
@reference "tailwindcss";@layer components{@property --resee-card-border-coverage{syntax:"<percentage>";inherits:false;initial-value:0%}.card .content{padding:--spacing(1.5)}.card.beveled{border-bottom-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl);overflow:clip}.card.raised{box-shadow:var(--shadow-heavy)}.card{--resee-card-bg-color:var(--color-global-background);--resee-card-border-color:var(--color-global-background-accent);--resee-card-border-highlight:var(--color-global-foreground-accent) 0% 100%;--resee-card-border-angle:225deg;--resee-card-border-coverage:100%}.card.bordered:not(.interactive){border:2px solid var(--resee-card-border-color)}.card.bordered.interactive{--resee-card-bg-gradient:linear-gradient(var(--resee-card-bg-color),var(--resee-card-bg-color));--resee-card-border-gradient:linear-gradient(225deg,var(--resee-card-border-color) 0 var(--resee-card-border-coverage),var(--resee-card-border-highlight))}.card.bordered.interactive.colorful{--resee-card-border-highlight:var(--colorscale-resee-linear);@variant dark{--resee-card-border-highlight:var(--colorscale-resee-lite-linear)}}.card.bordered.interactive{background-clip:padding-box,border-box;background-image:var(--resee-card-bg-gradient),var(--resee-card-border-gradient);background-origin:border-box;border:2px solid transparent}.card.interactive{transition-duration:.5s;transition-property:border-radius,box-shadow,--resee-card-border-coverage;transition-timing-function:var(--default-transition-timing-function);-webkit-user-select:none;-moz-user-select:none;user-select:none}.card.interactive:focus-within.bordered,.card.interactive:hover.bordered{--resee-card-border-coverage:0%}.card.interactive:focus-within.beveled,.card.interactive:hover.beveled{border-radius:0}.card.interactive:focus-within,.card.interactive:hover{box-shadow:var(--shadow-heavy)}}
|
|
30
46
|
</style>
|
|
@@ -1,6 +1,12 @@
|
|
|
1
|
+
import type { Component } from 'vue';
|
|
2
|
+
import type { HintedString } from '../types/index.js';
|
|
1
3
|
export interface CardProps {
|
|
2
|
-
is?:
|
|
4
|
+
is?: HintedString<'div'> | Component;
|
|
3
5
|
interactive?: boolean;
|
|
6
|
+
colorful?: boolean;
|
|
7
|
+
bordered?: boolean;
|
|
8
|
+
beveled?: boolean;
|
|
9
|
+
raised?: boolean;
|
|
4
10
|
}
|
|
5
11
|
declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
|
|
6
12
|
default?: (props: {}) => any;
|
|
@@ -1,26 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
>
|
|
7
|
-
<span
|
|
8
|
-
v-if = "props.loading"
|
|
9
|
-
v-bind = "$attrs"
|
|
10
|
-
class = "icon"
|
|
11
|
-
>
|
|
12
|
-
<ProgressSpinner :size="props.size" />
|
|
13
|
-
</span>
|
|
14
|
-
|
|
15
|
-
<span
|
|
16
|
-
v-else-if = "props.name"
|
|
17
|
-
v-bind = "$attrs"
|
|
18
|
-
role = "presentation"
|
|
19
|
-
:class = "['icon', props.size]"
|
|
20
|
-
>
|
|
21
|
-
<span :class="[props.name, { 'color-cycle': props.colorCycle }]" />
|
|
22
|
-
</span>
|
|
23
|
-
</Transition>
|
|
2
|
+
<span role="presentation" :class="['icon', props.size]">
|
|
3
|
+
<slot>
|
|
4
|
+
<span :class="props.name" />
|
|
5
|
+
</slot>
|
|
6
|
+
</span>
|
|
24
7
|
</template>
|
|
25
8
|
|
|
26
9
|
<script>
|
|
@@ -28,21 +11,12 @@
|
|
|
28
11
|
</script>
|
|
29
12
|
|
|
30
13
|
<script setup>
|
|
31
|
-
import ProgressSpinner from "./ProgressSpinner.vue";
|
|
32
|
-
defineOptions({
|
|
33
|
-
inheritAttrs: false
|
|
34
|
-
});
|
|
35
14
|
const props = defineProps({
|
|
36
15
|
name: { type: String, required: false, default: void 0 },
|
|
37
|
-
|
|
38
|
-
size: { type: String, required: false, default: void 0 },
|
|
39
|
-
colorCycle: { type: Boolean, required: false, default: false },
|
|
40
|
-
transitionName: { type: String, required: false, default: "fade" },
|
|
41
|
-
transitionMode: { type: String, required: false, default: "out-in" },
|
|
42
|
-
transitionOnAppear: { type: Boolean, required: false, default: false }
|
|
16
|
+
size: { type: String, required: false, default: void 0 }
|
|
43
17
|
});
|
|
44
18
|
</script>
|
|
45
19
|
|
|
46
20
|
<style scoped>
|
|
47
|
-
@layer components{.icon{align-items:center;display:inline-flex}.icon:before{content:var(--zero-width-space)}.icon
|
|
21
|
+
@layer components{.icon{align-items:center;display:inline-flex}.icon:before{content:var(--zero-width-space)}.icon>span{display:inline-block;height:1em;width:1em}.icon.sm>span{height:var(--icon-size-small)!important;width:var(--icon-size-small)!important}.icon.md>span{height:var(--icon-size-medium)!important;width:var(--icon-size-medium)!important}.icon.lg>span{height:var(--icon-size-large)!important;width:var(--icon-size-large)!important}.icon.xl>span{height:var(--icon-size-jumbo)!important;width:var(--icon-size-jumbo)!important}}
|
|
48
22
|
</style>
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
export interface IconProps {
|
|
2
2
|
name?: string;
|
|
3
|
-
loading?: boolean;
|
|
4
3
|
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
5
|
-
colorCycle?: boolean;
|
|
6
|
-
transitionName?: string;
|
|
7
|
-
transitionMode?: 'out-in' | 'in-out';
|
|
8
|
-
transitionOnAppear?: boolean;
|
|
9
4
|
}
|
|
10
|
-
declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any
|
|
5
|
+
declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
|
|
6
|
+
default?: (props: {}) => any;
|
|
7
|
+
}>;
|
|
11
8
|
declare const _default: typeof __VLS_export;
|
|
12
9
|
export default _default;
|
|
10
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
11
|
+
new (): {
|
|
12
|
+
$slots: S;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
@@ -1,30 +1,42 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<span :class="['pair', props.spacing ? `spacing-${props.spacing}` : void 0]">
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
:
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
3
|
+
<slot
|
|
4
|
+
name = "leading"
|
|
5
|
+
:slot-props = "{
|
|
6
|
+
class: 'leading-icon',
|
|
7
|
+
name: props.icon,
|
|
8
|
+
size: props.iconSize
|
|
9
|
+
}"
|
|
10
|
+
>
|
|
11
|
+
<Icon
|
|
12
|
+
v-if = "props.icon"
|
|
13
|
+
class = "leading-icon"
|
|
14
|
+
:name = "props.icon"
|
|
15
|
+
:size = "props.iconSize"
|
|
16
|
+
/>
|
|
17
|
+
</slot>
|
|
12
18
|
|
|
13
19
|
<span v-if="props.text || slots.default" class="label">
|
|
14
|
-
<slot>
|
|
20
|
+
<slot name="default">
|
|
15
21
|
{{ props.text }}
|
|
16
22
|
</slot>
|
|
17
23
|
</span>
|
|
18
24
|
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
<slot
|
|
26
|
+
name = "trailing"
|
|
27
|
+
:slot-props = "{
|
|
28
|
+
class: 'trailing-icon',
|
|
29
|
+
name: props.trailingIcon,
|
|
30
|
+
size: props.iconSize
|
|
31
|
+
}"
|
|
32
|
+
>
|
|
33
|
+
<Icon
|
|
34
|
+
v-if = "props.trailingIcon"
|
|
35
|
+
class = "trailing-icon"
|
|
36
|
+
:name = "props.trailingIcon"
|
|
37
|
+
:size = "props.iconSize"
|
|
38
|
+
/>
|
|
39
|
+
</slot>
|
|
28
40
|
</span>
|
|
29
41
|
</template>
|
|
30
42
|
|
|
@@ -40,11 +52,7 @@ const props = defineProps({
|
|
|
40
52
|
trailingIcon: { type: String, required: false, default: void 0 },
|
|
41
53
|
iconSize: { type: String, required: false, default: void 0 },
|
|
42
54
|
trailingIconSize: { type: String, required: false, default: void 0 },
|
|
43
|
-
spacing: { type: String, required: false, default: void 0 }
|
|
44
|
-
loading: { type: Boolean, required: false, default: false },
|
|
45
|
-
iconTransitionName: { type: String, required: false, default: void 0 },
|
|
46
|
-
iconTransitionMode: { type: String, required: false, default: void 0 },
|
|
47
|
-
iconTransitionOnAppear: { type: Boolean, required: false, default: false }
|
|
55
|
+
spacing: { type: String, required: false, default: void 0 }
|
|
48
56
|
});
|
|
49
57
|
const slots = useSlots();
|
|
50
58
|
</script>
|
|
@@ -6,13 +6,25 @@ export interface IconTextPairProps {
|
|
|
6
6
|
iconSize?: IconProps['size'];
|
|
7
7
|
trailingIconSize?: IconProps['size'];
|
|
8
8
|
spacing?: 'wide' | 'normal' | 'none';
|
|
9
|
-
loading?: boolean;
|
|
10
|
-
iconTransitionName?: IconProps['transitionName'];
|
|
11
|
-
iconTransitionMode?: IconProps['transitionMode'];
|
|
12
|
-
iconTransitionOnAppear?: IconProps['transitionOnAppear'];
|
|
13
9
|
}
|
|
14
10
|
declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<IconTextPairProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconTextPairProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
|
|
11
|
+
leading?: (props: {
|
|
12
|
+
slotProps: {
|
|
13
|
+
class: string;
|
|
14
|
+
name: string | undefined;
|
|
15
|
+
size: "sm" | "md" | "lg" | "xl" | undefined;
|
|
16
|
+
};
|
|
17
|
+
}) => any;
|
|
18
|
+
} & {
|
|
15
19
|
default?: (props: {}) => any;
|
|
20
|
+
} & {
|
|
21
|
+
trailing?: (props: {
|
|
22
|
+
slotProps: {
|
|
23
|
+
class: string;
|
|
24
|
+
name: string | undefined;
|
|
25
|
+
size: "sm" | "md" | "lg" | "xl" | undefined;
|
|
26
|
+
};
|
|
27
|
+
}) => any;
|
|
16
28
|
}>;
|
|
17
29
|
declare const _default: typeof __VLS_export;
|
|
18
30
|
export default _default;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<Transition :name="props.transitionName" mode="out-in">
|
|
3
|
+
<Icon
|
|
4
|
+
v-if = "props.loading || props.name"
|
|
5
|
+
v-bind = "$attrs"
|
|
6
|
+
:name = "props.name"
|
|
7
|
+
:key = "props.loading ? 'loading' : props.name"
|
|
8
|
+
:size = "props.size"
|
|
9
|
+
>
|
|
10
|
+
<template #default v-if="props.loading">
|
|
11
|
+
<ProgressSpinner :size="props.size" />
|
|
12
|
+
</template>
|
|
13
|
+
</Icon>
|
|
14
|
+
</Transition>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<script>
|
|
18
|
+
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<script setup>
|
|
22
|
+
import Icon from "./Icon.vue";
|
|
23
|
+
import ProgressSpinner from "./ProgressSpinner.vue";
|
|
24
|
+
defineOptions({
|
|
25
|
+
inheritAttrs: false
|
|
26
|
+
});
|
|
27
|
+
const props = defineProps({
|
|
28
|
+
loading: { type: Boolean, required: false, default: false },
|
|
29
|
+
transitionName: { type: String, required: false, default: "grow-x" },
|
|
30
|
+
name: { type: String, required: false },
|
|
31
|
+
size: { type: String, required: false }
|
|
32
|
+
});
|
|
33
|
+
</script>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { HintedString } from '../types/index.js';
|
|
2
|
+
import type { IconProps } from './Icon.vue.js';
|
|
3
|
+
export interface IconTransitionProps extends IconProps {
|
|
4
|
+
loading?: boolean;
|
|
5
|
+
transitionName?: HintedString<'fade' | 'grow-x' | 'grow-y'>;
|
|
6
|
+
}
|
|
7
|
+
declare const __VLS_export: import("vue").DefineComponent<IconTransitionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconTransitionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
8
|
+
declare const _default: typeof __VLS_export;
|
|
9
|
+
export default _default;
|
|
@@ -1,149 +1,79 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
:
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
2
|
+
<Card
|
|
3
|
+
:is = "props.is"
|
|
4
|
+
:interactive = "props.interactive"
|
|
5
|
+
:colorful = "props.colorful"
|
|
6
|
+
:beveled = "props.beveled"
|
|
7
|
+
:raised = "props.raised"
|
|
8
|
+
:bordered = "props.bordered"
|
|
9
|
+
:class = "[
|
|
10
|
+
'image',
|
|
11
|
+
{
|
|
12
|
+
loading: isImgLoading || props.showLoading,
|
|
13
|
+
glass: props.glassy && !(imgHasError || isImgLoading || props.showLoading)
|
|
14
|
+
}
|
|
15
|
+
]"
|
|
11
16
|
>
|
|
12
17
|
<Icon
|
|
13
|
-
v-if
|
|
14
|
-
:name
|
|
15
|
-
:size
|
|
16
|
-
|
|
18
|
+
v-if = "props.defaultIcon && imgHasError"
|
|
19
|
+
:name = "props.defaultIcon"
|
|
20
|
+
:size = "props.iconSize"
|
|
21
|
+
class = "transition-opacity duration-300"
|
|
22
|
+
:class = "{
|
|
23
|
+
'opacity-0': isImgLoading || props.showLoading
|
|
24
|
+
}"
|
|
17
25
|
/>
|
|
18
26
|
|
|
19
|
-
<
|
|
20
|
-
:src
|
|
21
|
-
:
|
|
22
|
-
:
|
|
23
|
-
:
|
|
24
|
-
:
|
|
25
|
-
|
|
26
|
-
:
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
27
|
+
<ImageBase
|
|
28
|
+
:src = "props.src"
|
|
29
|
+
:type = "props.type"
|
|
30
|
+
:alt = "props.alt"
|
|
31
|
+
:width = "props.width"
|
|
32
|
+
:height = "props.height"
|
|
33
|
+
:aspect = "props.aspect"
|
|
34
|
+
:fit = "props.fit"
|
|
35
|
+
:loading = "props.loading"
|
|
36
|
+
:show-loading = "props.showLoading"
|
|
37
|
+
@loading = "(state) => isImgLoading = state"
|
|
38
|
+
@load = "() => imgHasError = null"
|
|
39
|
+
@error = "(err) => imgHasError = err"
|
|
40
|
+
/>
|
|
41
|
+
</Card>
|
|
31
42
|
</template>
|
|
32
43
|
|
|
33
44
|
<script>
|
|
34
|
-
|
|
35
|
-
"1/1": "aspect-square",
|
|
36
|
-
"square": "aspect-square",
|
|
37
|
-
"2/3": "aspect-poster",
|
|
38
|
-
"poster": "aspect-poster",
|
|
39
|
-
"4/5": "aspect-tall",
|
|
40
|
-
"16/9": "aspect-video",
|
|
41
|
-
"video": "aspect-video"
|
|
42
|
-
};
|
|
43
|
-
export const ObjectFitClassNames = {
|
|
44
|
-
cover: "object-cover",
|
|
45
|
-
outside: "object-cover",
|
|
46
|
-
contain: "object-contain",
|
|
47
|
-
inside: "object-contain"
|
|
48
|
-
};
|
|
45
|
+
|
|
49
46
|
</script>
|
|
50
47
|
|
|
51
48
|
<script setup>
|
|
52
|
-
import {
|
|
53
|
-
import
|
|
54
|
-
import { fromTmdbImageSize } from "@resee-movies/utilities/tmdb/from-tmdb-image-size";
|
|
55
|
-
import { computed, ref } from "vue";
|
|
56
|
-
import { useLoadImage } from "../composables/use-load-image";
|
|
57
|
-
import { useSharedIntersectionObserver } from "../composables/use-shared-intersection-observer";
|
|
49
|
+
import { ref } from "vue";
|
|
50
|
+
import Card from "./Card.vue";
|
|
58
51
|
import Icon from "./Icon.vue";
|
|
52
|
+
import ImageBase from "./ImageBase.vue";
|
|
59
53
|
const props = defineProps({
|
|
60
|
-
src: { type: null, required: true },
|
|
61
|
-
alt: { type: [String, null, Function], required: false, default: "" },
|
|
62
|
-
type: { type: String, required: false, default: void 0 },
|
|
63
|
-
width: { type: null, required: false, default: "w185" },
|
|
64
|
-
height: { type: [String, Number], required: false, default: void 0 },
|
|
65
|
-
aspect: { type: String, required: false, default: void 0 },
|
|
66
|
-
fit: { type: String, required: false, default: "cover" },
|
|
67
|
-
showLoading: { type: Boolean, required: false, default: false },
|
|
68
54
|
defaultIcon: { type: String, required: false, default: "i-ph-image-thin" },
|
|
69
55
|
iconSize: { type: String, required: false, default: "xl" },
|
|
70
|
-
loading: { type: String, required: false, default: "lazy" },
|
|
71
56
|
glassy: { type: Boolean, required: false, default: false },
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
let intWidth = normalizedSource.value.width;
|
|
88
|
-
let intHeight = normalizedSource.value.height;
|
|
89
|
-
if (props.width || props.height) {
|
|
90
|
-
intWidth = fromTmdbImageSize(props.width);
|
|
91
|
-
intHeight = fromTmdbImageSize(props.height);
|
|
92
|
-
}
|
|
93
|
-
if (!props.aspect || props.aspect === "auto" || intWidth && intHeight) {
|
|
94
|
-
return { width: intWidth, height: intHeight };
|
|
95
|
-
}
|
|
96
|
-
if (intHeight) {
|
|
97
|
-
const aspect = getAspectRatio(intHeight, "y", props.aspect);
|
|
98
|
-
return { width: aspect.x, height: aspect.y };
|
|
99
|
-
}
|
|
100
|
-
if (intWidth) {
|
|
101
|
-
const aspect = getAspectRatio(intWidth, "x", props.aspect);
|
|
102
|
-
return { width: aspect.x, height: aspect.y };
|
|
103
|
-
}
|
|
104
|
-
return { width: void 0, height: void 0 };
|
|
105
|
-
});
|
|
106
|
-
const imgLoadInfo = useLoadImage(
|
|
107
|
-
() => normalizedSource.value.identifier,
|
|
108
|
-
{
|
|
109
|
-
deferLoad,
|
|
110
|
-
type: () => normalizedSource.value.sourceType,
|
|
111
|
-
width: () => props.width,
|
|
112
|
-
friendlyName: () => normalizedSource.value.friendlyName,
|
|
113
|
-
reseeConfig: () => ({
|
|
114
|
-
width: dimensions.value.width,
|
|
115
|
-
height: dimensions.value.height,
|
|
116
|
-
fit: props.fit
|
|
117
|
-
})
|
|
118
|
-
}
|
|
119
|
-
);
|
|
120
|
-
const {
|
|
121
|
-
src: imgSrc,
|
|
122
|
-
loading: imgLoading,
|
|
123
|
-
bgLoading: imgBgLoading,
|
|
124
|
-
error: imgError
|
|
125
|
-
} = imgLoadInfo;
|
|
126
|
-
if (deferLoad.value) {
|
|
127
|
-
useSharedIntersectionObserver(container, {
|
|
128
|
-
once: true,
|
|
129
|
-
onChange(isIntersecting) {
|
|
130
|
-
if (isIntersecting) {
|
|
131
|
-
deferLoad.value = false;
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
});
|
|
135
|
-
}
|
|
136
|
-
const aspectRatioClass = computed(() => {
|
|
137
|
-
return !props.aspect || props.aspect === "auto" ? void 0 : AspectRatioClassNames[props.aspect];
|
|
138
|
-
});
|
|
139
|
-
const objectFitClass = computed(() => {
|
|
140
|
-
return !props.fit ? void 0 : ObjectFitClassNames[props.fit];
|
|
141
|
-
});
|
|
142
|
-
const altText = computed(() => {
|
|
143
|
-
return typeof props.alt === "function" ? props.alt(imgError.value) : props.alt ?? normalizedSource.value.description ?? "";
|
|
57
|
+
src: { type: null, required: true },
|
|
58
|
+
alt: { type: [String, null, Function], required: false },
|
|
59
|
+
type: { type: String, required: false },
|
|
60
|
+
width: { type: null, required: false },
|
|
61
|
+
height: { type: [String, Number], required: false },
|
|
62
|
+
aspect: { type: String, required: false },
|
|
63
|
+
fit: { type: String, required: false },
|
|
64
|
+
showLoading: { type: Boolean, required: false },
|
|
65
|
+
loading: { type: String, required: false },
|
|
66
|
+
is: { type: null, required: false },
|
|
67
|
+
interactive: { type: Boolean, required: false },
|
|
68
|
+
colorful: { type: Boolean, required: false },
|
|
69
|
+
bordered: { type: Boolean, required: false },
|
|
70
|
+
beveled: { type: Boolean, required: false },
|
|
71
|
+
raised: { type: Boolean, required: false }
|
|
144
72
|
});
|
|
73
|
+
const isImgLoading = ref(true);
|
|
74
|
+
const imgHasError = ref(null);
|
|
145
75
|
</script>
|
|
146
76
|
|
|
147
77
|
<style scoped>
|
|
148
|
-
@reference "tailwindcss";@layer components{.image{
|
|
78
|
+
@reference "tailwindcss";@layer components{@keyframes color-pulse{0%{background-color:var(--bg-color-1)}50%{background-color:var(--bg-color-2)}to{background-color:var(--bg-color-1)}}.image{--bg-color-1:#fff;--bg-color-2:#f0f0f0;background-color:var(--bg-color-1);max-width:-moz-fit-content;max-width:fit-content;overflow:clip;position:relative;width:100%;@variant dark{--bg-color-1:#000;--bg-color-2:#0f0f0f}}.image.loading{animation-duration:2.5s;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:color-pulse;animation-timing-function:ease-out}.image.glass:after{background-image:linear-gradient(110deg,transparent 25%,hsla(0,0%,100%,.15) 80%,transparent);content:var(--zero-width-space);inset:0;position:absolute}.image :deep(.icon){color:var(--color-global-background-accent);left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}}
|
|
149
79
|
</style>
|
|
@@ -1,43 +1,11 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type { AspectRatio } from '@resee-movies/utilities/numbers/get-aspect-ratio';
|
|
3
|
-
import type { MediaAssetTransformConfig } from '@resee-movies/utilities/resee/get-media-asset-url';
|
|
4
|
-
import type { TmdbImageSize } from '@resee-movies/utilities/tmdb/get-tmdb-image-url';
|
|
5
|
-
import type { LoadImageType } from '../composables/use-load-image.js';
|
|
6
|
-
import type { HTMLElementClassNames } from '../types/index.js';
|
|
1
|
+
import type { CardProps } from './Card.vue.js';
|
|
7
2
|
import type { IconProps } from './Icon.vue.js';
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
alt?: string | null | ((error: unknown) => string);
|
|
11
|
-
type?: LoadImageType;
|
|
12
|
-
width?: TmdbImageSize | string | number;
|
|
13
|
-
height?: string | number;
|
|
14
|
-
aspect?: AspectRatio | 'auto';
|
|
15
|
-
fit?: MediaAssetTransformConfig['fit'];
|
|
16
|
-
showLoading?: boolean;
|
|
3
|
+
import type { ImageBaseProps } from './ImageBase.vue.js';
|
|
4
|
+
export interface ImageProps extends ImageBaseProps, CardProps {
|
|
17
5
|
defaultIcon?: string;
|
|
18
6
|
iconSize?: IconProps['size'];
|
|
19
|
-
loading?: 'lazy' | 'eager';
|
|
20
7
|
glassy?: boolean;
|
|
21
|
-
bordered?: boolean;
|
|
22
|
-
beveled?: boolean;
|
|
23
|
-
raised?: boolean;
|
|
24
|
-
overlayClasses?: HTMLElementClassNames;
|
|
25
8
|
}
|
|
26
|
-
export declare const AspectRatioClassNames: {
|
|
27
|
-
readonly '1/1': "aspect-square";
|
|
28
|
-
readonly square: "aspect-square";
|
|
29
|
-
readonly '2/3': "aspect-poster";
|
|
30
|
-
readonly poster: "aspect-poster";
|
|
31
|
-
readonly '4/5': "aspect-tall";
|
|
32
|
-
readonly '16/9': "aspect-video";
|
|
33
|
-
readonly video: "aspect-video";
|
|
34
|
-
};
|
|
35
|
-
export declare const ObjectFitClassNames: {
|
|
36
|
-
readonly cover: "object-cover";
|
|
37
|
-
readonly outside: "object-cover";
|
|
38
|
-
readonly contain: "object-contain";
|
|
39
|
-
readonly inside: "object-contain";
|
|
40
|
-
};
|
|
41
9
|
declare const __VLS_export: import("vue").DefineComponent<ImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
42
10
|
declare const _default: typeof __VLS_export;
|
|
43
11
|
export default _default;
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<img
|
|
3
|
+
ref = "container"
|
|
4
|
+
:src = "imgSrc"
|
|
5
|
+
:alt = "altText"
|
|
6
|
+
:width = "dimensions.width"
|
|
7
|
+
:height = "dimensions.height"
|
|
8
|
+
:loading = "props.loading"
|
|
9
|
+
class = "transition-opacity duration-300"
|
|
10
|
+
:class = "[aspectRatioClass, objectFitClass, { 'opacity-0': !imgSrc || imgLoading || props.showLoading }]"
|
|
11
|
+
>
|
|
12
|
+
</template>
|
|
13
|
+
|
|
14
|
+
<script>
|
|
15
|
+
export const AspectRatioClassNames = {
|
|
16
|
+
"1/1": "aspect-square",
|
|
17
|
+
"square": "aspect-square",
|
|
18
|
+
"2/3": "aspect-poster",
|
|
19
|
+
"poster": "aspect-poster",
|
|
20
|
+
"4/5": "aspect-tall",
|
|
21
|
+
"16/9": "aspect-video",
|
|
22
|
+
"video": "aspect-video"
|
|
23
|
+
};
|
|
24
|
+
export const ObjectFitClassNames = {
|
|
25
|
+
cover: "object-cover",
|
|
26
|
+
outside: "object-cover",
|
|
27
|
+
contain: "object-contain",
|
|
28
|
+
inside: "object-contain"
|
|
29
|
+
};
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
<script setup>
|
|
33
|
+
import { normalizeImageFileDescriptor } from "@resee-movies/utilities/images/normalize-image-file-descriptor";
|
|
34
|
+
import { getAspectRatio } from "@resee-movies/utilities/numbers/get-aspect-ratio";
|
|
35
|
+
import { fromTmdbImageSize } from "@resee-movies/utilities/tmdb/from-tmdb-image-size";
|
|
36
|
+
import { computed, ref } from "vue";
|
|
37
|
+
import { useLoadImage } from "../composables/use-load-image";
|
|
38
|
+
import { useSharedIntersectionObserver } from "../composables/use-shared-intersection-observer";
|
|
39
|
+
const props = defineProps({
|
|
40
|
+
src: { type: null, required: true },
|
|
41
|
+
alt: { type: [String, null, Function], required: false, default: "" },
|
|
42
|
+
type: { type: String, required: false, default: void 0 },
|
|
43
|
+
width: { type: null, required: false, default: "w185" },
|
|
44
|
+
height: { type: [String, Number], required: false, default: void 0 },
|
|
45
|
+
aspect: { type: String, required: false, default: void 0 },
|
|
46
|
+
fit: { type: String, required: false, default: "cover" },
|
|
47
|
+
showLoading: { type: Boolean, required: false, default: false },
|
|
48
|
+
loading: { type: String, required: false, default: "lazy" }
|
|
49
|
+
});
|
|
50
|
+
const emits = defineEmits(["loading", "load", "error"]);
|
|
51
|
+
const deferLoad = ref(props.loading === "lazy");
|
|
52
|
+
const container = ref();
|
|
53
|
+
const normalizedSource = computed(() => {
|
|
54
|
+
const result = normalizeImageFileDescriptor(props.src);
|
|
55
|
+
if (props.type) {
|
|
56
|
+
result.sourceType = props.type;
|
|
57
|
+
}
|
|
58
|
+
return result;
|
|
59
|
+
});
|
|
60
|
+
const dimensions = computed(() => {
|
|
61
|
+
let intWidth = normalizedSource.value.width;
|
|
62
|
+
let intHeight = normalizedSource.value.height;
|
|
63
|
+
if (props.width || props.height) {
|
|
64
|
+
intWidth = fromTmdbImageSize(props.width);
|
|
65
|
+
intHeight = fromTmdbImageSize(props.height);
|
|
66
|
+
}
|
|
67
|
+
if (!props.aspect || props.aspect === "auto" || intWidth && intHeight) {
|
|
68
|
+
return { width: intWidth, height: intHeight };
|
|
69
|
+
}
|
|
70
|
+
if (intHeight) {
|
|
71
|
+
const aspect = getAspectRatio(intHeight, "y", props.aspect);
|
|
72
|
+
return { width: aspect.x, height: aspect.y };
|
|
73
|
+
}
|
|
74
|
+
if (intWidth) {
|
|
75
|
+
const aspect = getAspectRatio(intWidth, "x", props.aspect);
|
|
76
|
+
return { width: aspect.x, height: aspect.y };
|
|
77
|
+
}
|
|
78
|
+
return { width: void 0, height: void 0 };
|
|
79
|
+
});
|
|
80
|
+
const imgLoadInfo = useLoadImage(
|
|
81
|
+
() => normalizedSource.value.identifier,
|
|
82
|
+
{
|
|
83
|
+
deferLoad,
|
|
84
|
+
type: () => normalizedSource.value.sourceType,
|
|
85
|
+
width: () => props.width,
|
|
86
|
+
friendlyName: () => normalizedSource.value.friendlyName,
|
|
87
|
+
onLoading: (isLoading) => emits("loading", isLoading),
|
|
88
|
+
onLoad: (src) => emits("load", src),
|
|
89
|
+
onError: (err) => emits("error", err),
|
|
90
|
+
reseeConfig: () => ({
|
|
91
|
+
width: dimensions.value.width,
|
|
92
|
+
height: dimensions.value.height,
|
|
93
|
+
fit: props.fit
|
|
94
|
+
})
|
|
95
|
+
}
|
|
96
|
+
);
|
|
97
|
+
const {
|
|
98
|
+
src: imgSrc,
|
|
99
|
+
loading: imgLoading,
|
|
100
|
+
error: imgError
|
|
101
|
+
} = imgLoadInfo;
|
|
102
|
+
if (deferLoad.value) {
|
|
103
|
+
useSharedIntersectionObserver(container, {
|
|
104
|
+
once: true,
|
|
105
|
+
onChange(isIntersecting) {
|
|
106
|
+
if (isIntersecting) {
|
|
107
|
+
deferLoad.value = false;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
const aspectRatioClass = computed(() => {
|
|
113
|
+
return !props.aspect || props.aspect === "auto" ? void 0 : AspectRatioClassNames[props.aspect];
|
|
114
|
+
});
|
|
115
|
+
const objectFitClass = computed(() => {
|
|
116
|
+
return !props.fit ? void 0 : ObjectFitClassNames[props.fit];
|
|
117
|
+
});
|
|
118
|
+
const altText = computed(() => {
|
|
119
|
+
return typeof props.alt === "function" ? props.alt(imgError.value) : props.alt ?? normalizedSource.value.description ?? "";
|
|
120
|
+
});
|
|
121
|
+
</script>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import type { ImageFileDescriptor } from '@resee-movies/utilities/images/normalize-image-file-descriptor';
|
|
2
|
+
import type { AspectRatio } from '@resee-movies/utilities/numbers/get-aspect-ratio';
|
|
3
|
+
import type { MediaAssetTransformConfig } from '@resee-movies/utilities/resee/get-media-asset-url';
|
|
4
|
+
import type { TmdbImageSize } from '@resee-movies/utilities/tmdb/get-tmdb-image-url';
|
|
5
|
+
import type { LoadImageType } from '../composables/use-load-image.js';
|
|
6
|
+
export interface ImageBaseProps {
|
|
7
|
+
src: ImageFileDescriptor | null | undefined;
|
|
8
|
+
alt?: string | null | ((error: unknown) => string);
|
|
9
|
+
type?: LoadImageType;
|
|
10
|
+
width?: TmdbImageSize | string | number;
|
|
11
|
+
height?: string | number;
|
|
12
|
+
aspect?: AspectRatio | 'auto';
|
|
13
|
+
fit?: MediaAssetTransformConfig['fit'];
|
|
14
|
+
showLoading?: boolean;
|
|
15
|
+
loading?: 'lazy' | 'eager';
|
|
16
|
+
}
|
|
17
|
+
export declare const AspectRatioClassNames: {
|
|
18
|
+
readonly '1/1': "aspect-square";
|
|
19
|
+
readonly square: "aspect-square";
|
|
20
|
+
readonly '2/3': "aspect-poster";
|
|
21
|
+
readonly poster: "aspect-poster";
|
|
22
|
+
readonly '4/5': "aspect-tall";
|
|
23
|
+
readonly '16/9': "aspect-video";
|
|
24
|
+
readonly video: "aspect-video";
|
|
25
|
+
};
|
|
26
|
+
export declare const ObjectFitClassNames: {
|
|
27
|
+
readonly cover: "object-cover";
|
|
28
|
+
readonly outside: "object-cover";
|
|
29
|
+
readonly contain: "object-contain";
|
|
30
|
+
readonly inside: "object-contain";
|
|
31
|
+
};
|
|
32
|
+
declare const __VLS_export: import("vue").DefineComponent<ImageBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
33
|
+
error: (err: unknown) => any;
|
|
34
|
+
load: (src: string | undefined) => any;
|
|
35
|
+
loading: (isLoading: boolean) => any;
|
|
36
|
+
}, string, import("vue").PublicProps, Readonly<ImageBaseProps> & Readonly<{
|
|
37
|
+
onError?: ((err: unknown) => any) | undefined;
|
|
38
|
+
onLoad?: ((src: string | undefined) => any) | undefined;
|
|
39
|
+
onLoading?: ((isLoading: boolean) => any) | undefined;
|
|
40
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
41
|
+
declare const _default: typeof __VLS_export;
|
|
42
|
+
export default _default;
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<Button
|
|
3
|
-
type
|
|
4
|
-
:text
|
|
5
|
-
:loading
|
|
6
|
-
:disabled
|
|
7
|
-
:bordered
|
|
8
|
-
icon-transition-name = "grow-x"
|
|
3
|
+
type = "submit"
|
|
4
|
+
:text = "props.text ?? locale.form.submitButtonLabel"
|
|
5
|
+
:loading = "formState.isSubmitting.value"
|
|
6
|
+
:disabled = "formState.isDisabled.value"
|
|
7
|
+
:bordered = "props.bordered"
|
|
9
8
|
/>
|
|
10
9
|
</template>
|
|
11
10
|
|
|
@@ -10,6 +10,9 @@ export type LoadImageOptions = {
|
|
|
10
10
|
type?: MaybeRefOrGetter<LoadImageType>;
|
|
11
11
|
reseeConfig?: MaybeRefOrGetter<MediaAssetTransformConfig | undefined>;
|
|
12
12
|
deferLoad?: Ref<boolean>;
|
|
13
|
+
onLoading?: (isLoading: boolean) => void;
|
|
14
|
+
onLoad?: (src: string | undefined) => void;
|
|
15
|
+
onError?: (err: unknown) => void;
|
|
13
16
|
};
|
|
14
17
|
/**
|
|
15
18
|
* Exposes the {@link loadImage} utility as a set of reactive properties.
|
|
@@ -31,6 +31,8 @@ export function useLoadImage(source, config = {}) {
|
|
|
31
31
|
src.value = toValue(config.errorSrc);
|
|
32
32
|
key.value = src.value;
|
|
33
33
|
error.value = new Error('"src" is not defined');
|
|
34
|
+
config.onLoading?.(false);
|
|
35
|
+
config.onError?.(error.value);
|
|
34
36
|
return;
|
|
35
37
|
}
|
|
36
38
|
const loadType = toValue(config.type);
|
|
@@ -54,6 +56,8 @@ export function useLoadImage(source, config = {}) {
|
|
|
54
56
|
}
|
|
55
57
|
loading.value = true;
|
|
56
58
|
key.value = sourceUnwrapped;
|
|
59
|
+
config.onLoading?.(true);
|
|
60
|
+
config.onLoad?.(src.value);
|
|
57
61
|
return;
|
|
58
62
|
}
|
|
59
63
|
if (toValue(config.deferLoad)) {
|
|
@@ -81,12 +85,15 @@ export function useLoadImage(source, config = {}) {
|
|
|
81
85
|
loading.value = false;
|
|
82
86
|
bgLoading.value = false;
|
|
83
87
|
error.value = void 0;
|
|
88
|
+
config.onLoading?.(false);
|
|
89
|
+
config.onLoad?.(src.value);
|
|
84
90
|
return;
|
|
85
91
|
}
|
|
86
92
|
src.value = pendingSource ?? toValue(config.placeholderSrc) ?? src.value;
|
|
87
93
|
key.value = pendingSource ? sourceUnwrapped : void 0;
|
|
88
94
|
loading.value = !pendingSource;
|
|
89
95
|
bgLoading.value = !!pendingSource;
|
|
96
|
+
config.onLoading?.(true);
|
|
90
97
|
pendingLoader.then(
|
|
91
98
|
(loadedSrc) => {
|
|
92
99
|
src.value = loadedSrc;
|
|
@@ -94,6 +101,8 @@ export function useLoadImage(source, config = {}) {
|
|
|
94
101
|
loading.value = false;
|
|
95
102
|
bgLoading.value = false;
|
|
96
103
|
error.value = void 0;
|
|
104
|
+
config.onLoading?.(false);
|
|
105
|
+
config.onLoad?.(src.value);
|
|
97
106
|
},
|
|
98
107
|
(e) => {
|
|
99
108
|
src.value = toValue(config.errorSrc) ?? toValue(config.placeholderSrc);
|
|
@@ -101,6 +110,8 @@ export function useLoadImage(source, config = {}) {
|
|
|
101
110
|
loading.value = false;
|
|
102
111
|
bgLoading.value = false;
|
|
103
112
|
error.value = e;
|
|
113
|
+
config.onLoading?.(false);
|
|
114
|
+
config.onError?.(e);
|
|
104
115
|
}
|
|
105
116
|
);
|
|
106
117
|
},
|
package/package.json
CHANGED