@resee-movies/nuxt-ux 0.18.0 → 0.19.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/GlobalHeader.vue +1 -1
- package/dist/runtime/components/Image.vue +4 -0
- package/dist/runtime/components/Image.vue.d.ts +9 -1
- package/dist/runtime/components/ImageBackdrop.vue +66 -0
- package/dist/runtime/components/ImageBackdrop.vue.d.ts +29 -0
- package/dist/runtime/components/ImageTiler.vue.d.ts +1 -2
- package/dist/runtime/components/LayoutPageContainer.vue +1 -1
- package/dist/runtime/components/MotionArt.vue +23 -0
- package/dist/runtime/components/MotionArt.vue.d.ts +8 -0
- package/dist/runtime/types/index.d.ts +6 -0
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -135,5 +135,5 @@ watch(
|
|
|
135
135
|
</script>
|
|
136
136
|
|
|
137
137
|
<style scoped>
|
|
138
|
-
.placeholder{height:calc(v-bind(headerHeight)*1px)}.header-affixed{box-shadow:var(--shadow-heavy);left:0;position:fixed;right:0;top:0;transform:translateY(0)
|
|
138
|
+
.placeholder{height:calc(v-bind(headerHeight)*1px)}header{position:relative;z-index:100}.header-affixed{box-shadow:var(--shadow-heavy);left:0;position:fixed;right:0;top:0;transform:translateY(0)}.header-affixed.header-transit{transition-duration:calc(var(--default-transition-duration)*2);transition-property:transform,box-shadow;transition-timing-function:var(--default-transition-timing-function)}.header-affixed.header-hidden{box-shadow:none;transform:translateY(calc(v-bind(drawerHeight)*-1px))}.subheader :deep(.btn){background:transparent;transition:background-color;transition-duration:var(--default-transition-duration);transition-timing-function:var(--default-transition-timing-function)}.subheader :deep(.btn).active{background:var(--color-global-background-accent)}
|
|
139
139
|
</style>
|
|
@@ -72,18 +72,22 @@ const props = defineProps({
|
|
|
72
72
|
beveled: { type: Boolean, required: false },
|
|
73
73
|
raised: { type: Boolean, required: false }
|
|
74
74
|
});
|
|
75
|
+
const emits = defineEmits(["loading", "load", "error"]);
|
|
75
76
|
const isImgLoading = ref(true);
|
|
76
77
|
const imgHasError = ref(null);
|
|
77
78
|
function handleLoading() {
|
|
78
79
|
isImgLoading.value = true;
|
|
80
|
+
emits("loading");
|
|
79
81
|
}
|
|
80
82
|
function handleLoaded(src) {
|
|
81
83
|
isImgLoading.value = false;
|
|
82
84
|
imgHasError.value = null;
|
|
85
|
+
emits("load", src);
|
|
83
86
|
}
|
|
84
87
|
function handleError(err) {
|
|
85
88
|
isImgLoading.value = false;
|
|
86
89
|
imgHasError.value = err;
|
|
90
|
+
emits("error", err);
|
|
87
91
|
}
|
|
88
92
|
</script>
|
|
89
93
|
|
|
@@ -7,6 +7,14 @@ export interface ImageProps extends ImageBaseProps, CardProps {
|
|
|
7
7
|
glassy?: boolean;
|
|
8
8
|
scaleToParent?: boolean;
|
|
9
9
|
}
|
|
10
|
-
declare const __VLS_export: import("vue").DefineComponent<ImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}
|
|
10
|
+
declare const __VLS_export: import("vue").DefineComponent<ImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
11
|
+
error: (err: unknown) => any;
|
|
12
|
+
load: (src: string | undefined) => any;
|
|
13
|
+
loading: () => any;
|
|
14
|
+
}, string, import("vue").PublicProps, Readonly<ImageProps> & Readonly<{
|
|
15
|
+
onError?: ((err: unknown) => any) | undefined;
|
|
16
|
+
onLoad?: ((src: string | undefined) => any) | undefined;
|
|
17
|
+
onLoading?: (() => any) | undefined;
|
|
18
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
11
19
|
declare const _default: typeof __VLS_export;
|
|
12
20
|
export default _default;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="image-backdrop" :style="offsetStyles">
|
|
3
|
+
<div :class="['background', props.maskPreset]">
|
|
4
|
+
<slot name="background">
|
|
5
|
+
<Transition name="fade" mode="out-in">
|
|
6
|
+
<LazyImage
|
|
7
|
+
v-if = "props.src && !Array.isArray(props.src)"
|
|
8
|
+
v-bind = "props.singleImageOptions"
|
|
9
|
+
:src = "props.src"
|
|
10
|
+
:width = "props.singleImageOptions?.width ?? 'original'"
|
|
11
|
+
:aspect = "props.singleImageOptions?.aspect ?? 'video'"
|
|
12
|
+
/>
|
|
13
|
+
|
|
14
|
+
<LazyImageTiler
|
|
15
|
+
v-else-if = "Array.isArray(props.src)"
|
|
16
|
+
v-bind = "props.multiImageOptions"
|
|
17
|
+
:images = "props.src"
|
|
18
|
+
class = "bg-global-background"
|
|
19
|
+
/>
|
|
20
|
+
|
|
21
|
+
<LazyMotionArt
|
|
22
|
+
v-else-if = "!props.src && props.motionArt"
|
|
23
|
+
v-bind = "props.motionArtOptions"
|
|
24
|
+
class = "aspect-video sm:aspect-auto sm:h-screen"
|
|
25
|
+
/>
|
|
26
|
+
</Transition>
|
|
27
|
+
</slot>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<div class="foreground">
|
|
31
|
+
<slot name="default" />
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
</template>
|
|
35
|
+
|
|
36
|
+
<script>
|
|
37
|
+
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
<script setup>
|
|
41
|
+
import { computed } from "vue";
|
|
42
|
+
import { useGlobalHeaderState } from "../composables/use-global-header-state";
|
|
43
|
+
import LazyImage from "./Image.vue";
|
|
44
|
+
import LazyImageTiler from "./ImageTiler.vue";
|
|
45
|
+
import LazyMotionArt from "./MotionArt.vue";
|
|
46
|
+
const props = defineProps({
|
|
47
|
+
src: { type: null, required: false, default: void 0 },
|
|
48
|
+
behindHeader: { type: Boolean, required: false, default: true },
|
|
49
|
+
motionArt: { type: Boolean, required: false, default: true },
|
|
50
|
+
maskPreset: { type: [String, Array], required: false, default: void 0 },
|
|
51
|
+
singleImageOptions: { type: Object, required: false, default: void 0 },
|
|
52
|
+
multiImageOptions: { type: Object, required: false, default: void 0 },
|
|
53
|
+
motionArtOptions: { type: Object, required: false }
|
|
54
|
+
});
|
|
55
|
+
const headerState = useGlobalHeaderState();
|
|
56
|
+
const offsetStyles = computed(() => {
|
|
57
|
+
return props.behindHeader ? headerState.offsetFromHeaderStyles.value : void 0;
|
|
58
|
+
});
|
|
59
|
+
const headerOffset = computed(() => {
|
|
60
|
+
return props.behindHeader ? `0px` : `${headerState.headerHeight.value}px`;
|
|
61
|
+
});
|
|
62
|
+
</script>
|
|
63
|
+
|
|
64
|
+
<style scoped>
|
|
65
|
+
.image-backdrop{position:relative}.image-backdrop .foreground{position:relative;z-index:1}.image-backdrop .background{max-height:calc(99vh - v-bind(headerOffset));overflow:clip;position:absolute;top:0;width:100%;z-index:0}
|
|
66
|
+
</style>
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { ImageFileDescriptor } from '@resee-movies/utilities/images/normalize-image-file-descriptor';
|
|
2
|
+
import type { ImageMaskPreset } from '../types/index.js';
|
|
3
|
+
import type { ImageProps } from './Image.vue.js';
|
|
4
|
+
import type { ImageBaseProps } from './ImageBase.vue.js';
|
|
5
|
+
import type { ImageTilerProps } from './ImageTiler.vue.js';
|
|
6
|
+
import type { MotionArtProps } from './MotionArt.vue.js';
|
|
7
|
+
export type SingleImageProps = Omit<ImageBaseProps, 'src' | 'alt' | 'loadStyle'> & Pick<ImageProps, 'defaultIcon' | 'iconSize'>;
|
|
8
|
+
export type MultiImageProps = Omit<ImageTilerProps, 'images' | 'maskPreset'>;
|
|
9
|
+
export interface ImageBackdropProps {
|
|
10
|
+
src?: ImageFileDescriptor | ImageFileDescriptor[] | null | undefined;
|
|
11
|
+
behindHeader?: boolean;
|
|
12
|
+
motionArt?: boolean;
|
|
13
|
+
maskPreset?: ImageMaskPreset | ImageMaskPreset[];
|
|
14
|
+
singleImageOptions?: SingleImageProps;
|
|
15
|
+
multiImageOptions?: MultiImageProps;
|
|
16
|
+
motionArtOptions?: MotionArtProps;
|
|
17
|
+
}
|
|
18
|
+
declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ImageBackdropProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageBackdropProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
|
|
19
|
+
background?: (props: {}) => any;
|
|
20
|
+
} & {
|
|
21
|
+
default?: (props: {}) => any;
|
|
22
|
+
}>;
|
|
23
|
+
declare const _default: typeof __VLS_export;
|
|
24
|
+
export default _default;
|
|
25
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
26
|
+
new (): {
|
|
27
|
+
$slots: S;
|
|
28
|
+
};
|
|
29
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ImageFileDescriptor } from '@resee-movies/utilities/images/normalize-image-file-descriptor';
|
|
2
2
|
import type { BreakpointSettings } from '../composables/use-settings-for-breakpoint.js';
|
|
3
|
-
import type { HTMLElementClassNames } from '../types/index.js';
|
|
3
|
+
import type { HTMLElementClassNames, ImageMaskPreset } from '../types/index.js';
|
|
4
4
|
export type ValueOrRange = string | number | [min: number, max: number];
|
|
5
5
|
export type ImageTilerGridSizeDefinition = {
|
|
6
6
|
cols: number;
|
|
@@ -9,7 +9,6 @@ export type ImageTilerGridSizeDefinition = {
|
|
|
9
9
|
gapX?: number;
|
|
10
10
|
gapY?: number;
|
|
11
11
|
};
|
|
12
|
-
export type ImageMaskPreset = 'image-mask-washout' | 'image-mask-gradient-washout' | 'image-mask-gradient-washout-lite' | 'image-mask-gradient-opacity' | 'image-mask-hero';
|
|
13
12
|
export declare const DefaultImageTilerGridSizeFallback: {
|
|
14
13
|
cols: number;
|
|
15
14
|
rows: number;
|
|
@@ -80,5 +80,5 @@ const showTitleBar = computed(
|
|
|
80
80
|
</script>
|
|
81
81
|
|
|
82
82
|
<style scoped>
|
|
83
|
-
@reference "tailwindcss";@layer components{:global(:root){--page-container-pad-y:calc(var(--page-column-gutter)*2);--page-container-pad-x:var(--page-container-pad-y);--page-container-radius:calc(var(--spacing)*1)}.page-container{--custom-accent-color:v-bind(accentColor);--page-container-accent-color:var(--custom-accent-color,var(--color-global-foreground-accent));background-color:var(--color-global-background);border:1px solid var(--page-container-accent-color);border-radius:var(--page-container-radius);box-shadow:var(--shadow-heavy);padding:var(--page-container-pad-y) var(--page-container-pad-x);transition:border-color;transition-duration:var(--default-transition-duration)}@variant sm{.page-container.glass-effect{backdrop-filter:blur(var(--blur-sm));background-color:color-mix(in srgb-linear,transparent
|
|
83
|
+
@reference "tailwindcss";@layer components{:global(:root){--page-container-pad-y:calc(var(--page-column-gutter)*2);--page-container-pad-x:var(--page-container-pad-y);--page-container-radius:calc(var(--spacing)*1)}.page-container{--custom-accent-color:v-bind(accentColor);--page-container-accent-color:var(--custom-accent-color,var(--color-global-foreground-accent));background-color:var(--color-global-background);border:1px solid var(--page-container-accent-color);border-radius:var(--page-container-radius);box-shadow:var(--shadow-heavy);padding:var(--page-container-pad-y) var(--page-container-pad-x);transition:border-color;transition-duration:var(--default-transition-duration)}@variant sm{.page-container.glass-effect{backdrop-filter:blur(var(--blur-sm));background-color:color-mix(in srgb-linear,transparent 20%,var(--color-global-background))}}@variant max-sm{.page-container:where(.page-column>.page-container){border-bottom:none;border-left:none;border-radius:0;border-right:none;box-shadow:none;margin-left:calc(var(--page-column-gutter)*-1);margin-right:calc(var(--page-column-gutter)*-1);padding-left:var(--page-column-gutter);padding-right:var(--page-column-gutter)}.page-container:not(.page-container+.page-container):where(.page-column:not(.layout-vista)>.page-container){border-top:none}}}
|
|
84
84
|
</style>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="motion-art">
|
|
3
|
+
<div class="spotlight spotlight-1"><div /></div>
|
|
4
|
+
<div class="spotlight spotlight-2"><div /></div>
|
|
5
|
+
<div class="spotlight spotlight-3"><div /></div>
|
|
6
|
+
</div>
|
|
7
|
+
</template>
|
|
8
|
+
|
|
9
|
+
<script>
|
|
10
|
+
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<script setup>
|
|
14
|
+
defineProps({
|
|
15
|
+
primaryColor: { type: String, required: false, default: "var(--color-resee-violet)" },
|
|
16
|
+
secondaryColor: { type: String, required: false, default: "var(--color-resee-orange)" },
|
|
17
|
+
tertiaryColor: { type: String, required: false, default: "var(--color-resee-aqua)" }
|
|
18
|
+
});
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<style scoped>
|
|
22
|
+
@reference "tailwindcss";.motion-art{container-type:size}.spotlight{animation:x var(--speed) linear infinite var(--direction);animation-delay:var(--delay-x);filter:blur(3px);position:absolute}.spotlight>div{animation:y calc(var(--speed)*.7) linear infinite var(--direction),c var(--speed) linear infinite var(--direction);animation-delay:var(--delay-y);background:var(--color);border-radius:100%;height:var(--size);opacity:.5;width:var(--size)}@variant motion-reduce{.spotlight,.spotlight>div{animation-play-state:paused}}@keyframes x{to{filter:blur(10px);transform:translateX(calc(100cqw - var(--size)))}}@keyframes y{to{opacity:.3;transform:translateY(calc(100cqh - var(--size)))}}@keyframes c{33%{background:var(--color-2)}66%{background:var(--color-3)}to{background:var(--color)}}.spotlight-1{--size:20vw;--speed:50s;--direction:alternate;--color:v-bind(primaryColor);--color-2:v-bind(secondaryColor);--color-3:v-bind(tertiaryColor);--delay-x:-7s;--delay-y:-8s}.spotlight-2{--size:10vw;--speed:40s;--direction:alternate;--color:v-bind(secondaryColor);--color-2:v-bind(primaryColor);--color-3:v-bind(tertiaryColor);--delay-x:-30s;--delay-y:-1s}.spotlight-3{--size:30vw;--speed:60s;--direction:alternate-reverse;--color:v-bind(tertiaryColor);--color-2:v-bind(primaryColor);--color-3:v-bind(secondaryColor);--delay-x:-13s;--delay-y:0}
|
|
23
|
+
</style>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export interface MotionArtProps {
|
|
2
|
+
primaryColor?: string;
|
|
3
|
+
secondaryColor?: string;
|
|
4
|
+
tertiaryColor?: string;
|
|
5
|
+
}
|
|
6
|
+
declare const __VLS_export: import("vue").DefineComponent<MotionArtProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MotionArtProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
7
|
+
declare const _default: typeof __VLS_export;
|
|
8
|
+
export default _default;
|
|
@@ -40,3 +40,9 @@ export type StatusLevel = 'info' | 'help' | 'success' | 'warn' | 'error';
|
|
|
40
40
|
* separately.
|
|
41
41
|
*/
|
|
42
42
|
export type StyleStatusLevel = 'default' | 'inverted' | StatusLevel;
|
|
43
|
+
/**
|
|
44
|
+
* CSS classnames that apply pre-configured gradients over their target
|
|
45
|
+
* element. As the type's name suggest, these are intended to be used
|
|
46
|
+
* with images.
|
|
47
|
+
*/
|
|
48
|
+
export type ImageMaskPreset = 'image-mask-washout' | 'image-mask-gradient-washout' | 'image-mask-gradient-washout-lite' | 'image-mask-gradient-opacity' | 'image-mask-hero';
|
package/package.json
CHANGED