pukaad-ui-lib 1.397.0 → 1.398.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.d.vue.ts +1 -1
- package/dist/runtime/components/button.vue.d.ts +1 -1
- package/dist/runtime/components/display/display-video.d.vue.ts +126 -0
- package/dist/runtime/components/display/display-video.vue +250 -0
- package/dist/runtime/components/display/display-video.vue.d.ts +126 -0
- package/dist/runtime/components/image/image-cropper.d.vue.ts +3 -3
- package/dist/runtime/components/image/image-cropper.vue.d.ts +3 -3
- package/dist/runtime/components/input/input-autocomplete.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-autocomplete.vue.d.ts +1 -1
- package/dist/runtime/components/input/input-combobox.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-combobox.vue.d.ts +1 -1
- package/dist/runtime/components/input/input-localized-name.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-localized-name.vue.d.ts +1 -1
- package/dist/runtime/components/input/input-search.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-search.vue.d.ts +1 -1
- package/dist/runtime/components/input/input-suggest.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-suggest.vue.d.ts +1 -1
- package/dist/runtime/components/input/input-tag.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-tag.vue.d.ts +1 -1
- package/dist/runtime/components/input/input-text-field.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-text-field.vue.d.ts +1 -1
- package/dist/runtime/components/input/input-textarea.d.vue.ts +2 -2
- package/dist/runtime/components/input/input-textarea.vue.d.ts +2 -2
- package/dist/runtime/components/modal/modal-secure.d.vue.ts +1 -1
- package/dist/runtime/components/modal/modal-secure.vue.d.ts +1 -1
- package/dist/runtime/components/ui/alert-dialog/AlertDialogContent.d.vue.ts +4 -4
- package/dist/runtime/components/ui/alert-dialog/AlertDialogContent.vue.d.ts +4 -4
- package/dist/runtime/components/ui/button/index.d.ts +1 -1
- package/dist/runtime/components/ui/button/index.js +37 -1
- package/dist/runtime/components/ui/dialog/DialogContent.d.vue.ts +4 -4
- package/dist/runtime/components/ui/dialog/DialogContent.vue.d.ts +4 -4
- package/dist/runtime/components/ui/dialog/DialogScrollContent.d.vue.ts +4 -4
- package/dist/runtime/components/ui/dialog/DialogScrollContent.vue.d.ts +4 -4
- package/dist/runtime/components/ui/dropdown-menu/DropdownMenuContent.d.vue.ts +2 -2
- package/dist/runtime/components/ui/dropdown-menu/DropdownMenuContent.vue.d.ts +2 -2
- package/dist/runtime/components/ui/dropdown-menu/DropdownMenuSubContent.d.vue.ts +4 -4
- package/dist/runtime/components/ui/dropdown-menu/DropdownMenuSubContent.vue.d.ts +4 -4
- package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.d.vue.ts +4 -4
- package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.vue.d.ts +4 -4
- package/dist/runtime/components/ui/native-select/NativeSelectOption.d.vue.ts +4 -4
- package/dist/runtime/components/ui/native-select/NativeSelectOption.vue.d.ts +4 -4
- package/dist/runtime/components/ui/popover/PopoverContent.d.vue.ts +4 -4
- package/dist/runtime/components/ui/popover/PopoverContent.vue.d.ts +4 -4
- package/dist/runtime/components/ui/select/SelectContent.d.vue.ts +2 -2
- package/dist/runtime/components/ui/select/SelectContent.vue.d.ts +2 -2
- package/dist/runtime/components/ui/sheet/SheetContent.d.vue.ts +4 -4
- package/dist/runtime/components/ui/sheet/SheetContent.vue.d.ts +4 -4
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -2,7 +2,7 @@ import type { HTMLAttributes } from "vue";
|
|
|
2
2
|
import type { ButtonVariants } from "./ui/button/index.js";
|
|
3
3
|
export type ButtonType = "button" | "submit" | "reset";
|
|
4
4
|
export type ButtonVariant = "default" | "outline" | "ghost" | "link" | "text" | "icon" | "glass";
|
|
5
|
-
export type ButtonColor = "default" | "primary" | "secondary" | "destructive" | "info" | "warning" | "success";
|
|
5
|
+
export type ButtonColor = "default" | "primary" | "secondary" | "destructive" | "info" | "warning" | "success" | "dark";
|
|
6
6
|
export type ButtonSize = ButtonVariants["size"];
|
|
7
7
|
export interface ButtonProps {
|
|
8
8
|
type?: ButtonType;
|
|
@@ -2,7 +2,7 @@ import type { HTMLAttributes } from "vue";
|
|
|
2
2
|
import type { ButtonVariants } from "./ui/button/index.js";
|
|
3
3
|
export type ButtonType = "button" | "submit" | "reset";
|
|
4
4
|
export type ButtonVariant = "default" | "outline" | "ghost" | "link" | "text" | "icon" | "glass";
|
|
5
|
-
export type ButtonColor = "default" | "primary" | "secondary" | "destructive" | "info" | "warning" | "success";
|
|
5
|
+
export type ButtonColor = "default" | "primary" | "secondary" | "destructive" | "info" | "warning" | "success" | "dark";
|
|
6
6
|
export type ButtonSize = ButtonVariants["size"];
|
|
7
7
|
export interface ButtonProps {
|
|
8
8
|
type?: ButtonType;
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
export interface DisplayVideoSource {
|
|
2
|
+
src: string;
|
|
3
|
+
type?: string;
|
|
4
|
+
media?: string;
|
|
5
|
+
}
|
|
6
|
+
export interface DisplayVideoTrack {
|
|
7
|
+
src: string;
|
|
8
|
+
kind?: "subtitles" | "captions" | "descriptions" | "chapters" | "metadata";
|
|
9
|
+
srclang?: string;
|
|
10
|
+
label?: string;
|
|
11
|
+
default?: boolean;
|
|
12
|
+
}
|
|
13
|
+
export interface DisplayVideoProps {
|
|
14
|
+
src?: string;
|
|
15
|
+
sources?: DisplayVideoSource[];
|
|
16
|
+
tracks?: DisplayVideoTrack[];
|
|
17
|
+
poster?: string;
|
|
18
|
+
width?: string | number;
|
|
19
|
+
height?: string | number;
|
|
20
|
+
fullWidth?: boolean;
|
|
21
|
+
fullHeight?: boolean;
|
|
22
|
+
fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
|
|
23
|
+
controls?: boolean;
|
|
24
|
+
autoplay?: boolean;
|
|
25
|
+
loop?: boolean;
|
|
26
|
+
muted?: boolean;
|
|
27
|
+
playsinline?: boolean;
|
|
28
|
+
preload?: "none" | "metadata" | "auto";
|
|
29
|
+
crossorigin?: "anonymous" | "use-credentials";
|
|
30
|
+
controlsList?: string;
|
|
31
|
+
disablePictureInPicture?: boolean;
|
|
32
|
+
disableRemotePlayback?: boolean;
|
|
33
|
+
volume?: number;
|
|
34
|
+
playbackRate?: number;
|
|
35
|
+
startTime?: number;
|
|
36
|
+
fullscreenButton?: boolean;
|
|
37
|
+
closeButton?: boolean;
|
|
38
|
+
playButton?: boolean;
|
|
39
|
+
playButtonAutoHide?: boolean;
|
|
40
|
+
playButtonHideDelay?: number;
|
|
41
|
+
clickToPlay?: boolean;
|
|
42
|
+
controlsHeight?: number;
|
|
43
|
+
navButton?: boolean;
|
|
44
|
+
}
|
|
45
|
+
type DisplayVideoAction = {
|
|
46
|
+
video: HTMLVideoElement | null;
|
|
47
|
+
currentTime: number;
|
|
48
|
+
paused: boolean;
|
|
49
|
+
};
|
|
50
|
+
declare var __VLS_1: {
|
|
51
|
+
click: () => void;
|
|
52
|
+
}, __VLS_16: {
|
|
53
|
+
click: () => void;
|
|
54
|
+
paused: boolean;
|
|
55
|
+
}, __VLS_43: {
|
|
56
|
+
click: () => void;
|
|
57
|
+
}, __VLS_58: {
|
|
58
|
+
prev: () => void;
|
|
59
|
+
next: () => void;
|
|
60
|
+
}, __VLS_86: {};
|
|
61
|
+
type __VLS_Slots = {} & {
|
|
62
|
+
close?: (props: typeof __VLS_1) => any;
|
|
63
|
+
} & {
|
|
64
|
+
play?: (props: typeof __VLS_16) => any;
|
|
65
|
+
} & {
|
|
66
|
+
fullscreen?: (props: typeof __VLS_43) => any;
|
|
67
|
+
} & {
|
|
68
|
+
nav?: (props: typeof __VLS_58) => any;
|
|
69
|
+
} & {
|
|
70
|
+
default?: (props: typeof __VLS_86) => any;
|
|
71
|
+
};
|
|
72
|
+
declare const __VLS_base: import("vue").DefineComponent<DisplayVideoProps, {
|
|
73
|
+
videoRef: import("vue").Ref<HTMLVideoElement | null, HTMLVideoElement | null>;
|
|
74
|
+
paused: import("vue").Ref<boolean, boolean>;
|
|
75
|
+
play: () => Promise<void> | undefined;
|
|
76
|
+
pause: () => void | undefined;
|
|
77
|
+
load: () => void | undefined;
|
|
78
|
+
toggle: () => void;
|
|
79
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
80
|
+
close: (payload: DisplayVideoAction) => any;
|
|
81
|
+
prev: (payload: DisplayVideoAction) => any;
|
|
82
|
+
next: (payload: DisplayVideoAction) => any;
|
|
83
|
+
fullscreen: (payload: DisplayVideoAction) => any;
|
|
84
|
+
"play-click": (payload: DisplayVideoAction) => any;
|
|
85
|
+
}, string, import("vue").PublicProps, Readonly<DisplayVideoProps> & Readonly<{
|
|
86
|
+
onClose?: ((payload: DisplayVideoAction) => any) | undefined;
|
|
87
|
+
onPrev?: ((payload: DisplayVideoAction) => any) | undefined;
|
|
88
|
+
onNext?: ((payload: DisplayVideoAction) => any) | undefined;
|
|
89
|
+
onFullscreen?: ((payload: DisplayVideoAction) => any) | undefined;
|
|
90
|
+
"onPlay-click"?: ((payload: DisplayVideoAction) => any) | undefined;
|
|
91
|
+
}>, {
|
|
92
|
+
src: string;
|
|
93
|
+
fullHeight: boolean;
|
|
94
|
+
fullWidth: boolean;
|
|
95
|
+
fit: "cover" | "contain" | "fill" | "none" | "scale-down";
|
|
96
|
+
poster: string;
|
|
97
|
+
autoplay: boolean;
|
|
98
|
+
muted: boolean;
|
|
99
|
+
loop: boolean;
|
|
100
|
+
controls: boolean;
|
|
101
|
+
preload: "none" | "metadata" | "auto";
|
|
102
|
+
sources: DisplayVideoSource[];
|
|
103
|
+
tracks: DisplayVideoTrack[];
|
|
104
|
+
playsinline: boolean;
|
|
105
|
+
disablePictureInPicture: boolean;
|
|
106
|
+
disableRemotePlayback: boolean;
|
|
107
|
+
volume: number;
|
|
108
|
+
playbackRate: number;
|
|
109
|
+
startTime: number;
|
|
110
|
+
fullscreenButton: boolean;
|
|
111
|
+
closeButton: boolean;
|
|
112
|
+
playButton: boolean;
|
|
113
|
+
playButtonAutoHide: boolean;
|
|
114
|
+
playButtonHideDelay: number;
|
|
115
|
+
clickToPlay: boolean;
|
|
116
|
+
controlsHeight: number;
|
|
117
|
+
navButton: boolean;
|
|
118
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
119
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
120
|
+
declare const _default: typeof __VLS_export;
|
|
121
|
+
export default _default;
|
|
122
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
123
|
+
new (): {
|
|
124
|
+
$slots: S;
|
|
125
|
+
};
|
|
126
|
+
};
|
|
@@ -0,0 +1,250 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
class="relative inline-flex"
|
|
4
|
+
:class="[props.fullWidth && 'w-full', props.fullHeight && 'h-full']"
|
|
5
|
+
>
|
|
6
|
+
<!-- ปุ่มปิด -->
|
|
7
|
+
<slot v-if="props.closeButton" name="close" :click="onClose">
|
|
8
|
+
<div class="absolute top-[24px] left-[24px] z-10">
|
|
9
|
+
<Button circle color="dark" @click="onClose">
|
|
10
|
+
<Icon name="lucide:x" />
|
|
11
|
+
</Button>
|
|
12
|
+
</div>
|
|
13
|
+
</slot>
|
|
14
|
+
|
|
15
|
+
<!-- ปุ่มเล่น / หยุด -->
|
|
16
|
+
<slot
|
|
17
|
+
v-if="props.playButton"
|
|
18
|
+
name="play"
|
|
19
|
+
:click="onPlayClick"
|
|
20
|
+
:paused="paused"
|
|
21
|
+
>
|
|
22
|
+
<Transition
|
|
23
|
+
enter-active-class="transition duration-200 ease-out"
|
|
24
|
+
enter-from-class="opacity-0 scale-75"
|
|
25
|
+
enter-to-class="opacity-100 scale-100"
|
|
26
|
+
leave-active-class="transition duration-300 ease-out"
|
|
27
|
+
leave-from-class="opacity-100 scale-100"
|
|
28
|
+
leave-to-class="opacity-0 scale-150"
|
|
29
|
+
>
|
|
30
|
+
<div
|
|
31
|
+
v-show="showPlayButton"
|
|
32
|
+
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10"
|
|
33
|
+
>
|
|
34
|
+
<Button
|
|
35
|
+
circle
|
|
36
|
+
color="dark"
|
|
37
|
+
class="w-[80px] h-[80px]"
|
|
38
|
+
:aria-label="paused ? '\u0E40\u0E25\u0E48\u0E19' : '\u0E2B\u0E22\u0E38\u0E14'"
|
|
39
|
+
@click="onPlayClick"
|
|
40
|
+
>
|
|
41
|
+
<Transition
|
|
42
|
+
mode="out-in"
|
|
43
|
+
enter-active-class="transition duration-150 ease-out"
|
|
44
|
+
enter-from-class="opacity-0 scale-75"
|
|
45
|
+
enter-to-class="opacity-100 scale-100"
|
|
46
|
+
leave-active-class="transition duration-100 ease-in"
|
|
47
|
+
leave-from-class="opacity-100 scale-100"
|
|
48
|
+
leave-to-class="opacity-0 scale-125"
|
|
49
|
+
>
|
|
50
|
+
<Icon
|
|
51
|
+
:key="paused ? 'play' : 'pause'"
|
|
52
|
+
:name="paused ? 'lucide:play' : 'lucide:pause'"
|
|
53
|
+
class="w-[56px] h-[56px]"
|
|
54
|
+
/>
|
|
55
|
+
</Transition>
|
|
56
|
+
</Button>
|
|
57
|
+
</div>
|
|
58
|
+
</Transition>
|
|
59
|
+
</slot>
|
|
60
|
+
|
|
61
|
+
<!-- ปุ่มขยายเต็มจอ -->
|
|
62
|
+
<slot v-if="props.fullscreenButton" name="fullscreen" :click="onFullscreen">
|
|
63
|
+
<div class="absolute top-[16px] right-[16px] z-10">
|
|
64
|
+
<Button circle color="dark" @click="onFullscreen">
|
|
65
|
+
<Icon name="lucide:maximize" />
|
|
66
|
+
</Button>
|
|
67
|
+
</div>
|
|
68
|
+
</slot>
|
|
69
|
+
|
|
70
|
+
<!-- ปุ่มเลื่อนขึ้นลงวีดีโอ -->
|
|
71
|
+
<slot
|
|
72
|
+
v-if="props.navButton"
|
|
73
|
+
name="nav"
|
|
74
|
+
:prev="onPrev"
|
|
75
|
+
:next="onNext"
|
|
76
|
+
>
|
|
77
|
+
<div class="absolute top-1/2 right-[16px] -translate-y-1/2 z-10">
|
|
78
|
+
<div class="flex flex-col gap-[32px] items-center">
|
|
79
|
+
<Button circle color="dark" class="w-[50px] h-[50px]" @click="onPrev">
|
|
80
|
+
<Icon name="lucide:chevron-up" class="w-[32px] h-[32px]" />
|
|
81
|
+
</Button>
|
|
82
|
+
<Button circle color="dark" class="w-[50px] h-[50px]" @click="onNext">
|
|
83
|
+
<Icon name="lucide:chevron-down" class="w-[32px] h-[32px]" />
|
|
84
|
+
</Button>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
</slot>
|
|
88
|
+
|
|
89
|
+
<video
|
|
90
|
+
ref="videoRef"
|
|
91
|
+
v-bind="$attrs"
|
|
92
|
+
:class="props.clickToPlay && 'cursor-pointer'"
|
|
93
|
+
:src="props.src || void 0"
|
|
94
|
+
:poster="props.poster || void 0"
|
|
95
|
+
:preload="props.preload"
|
|
96
|
+
:controls="props.controls"
|
|
97
|
+
:autoplay="props.autoplay"
|
|
98
|
+
:loop="props.loop"
|
|
99
|
+
:muted="props.muted"
|
|
100
|
+
:playsinline="props.playsinline"
|
|
101
|
+
:crossorigin="props.crossorigin || void 0"
|
|
102
|
+
:controlslist="controlsList || void 0"
|
|
103
|
+
:disablepictureinpicture="props.disablePictureInPicture"
|
|
104
|
+
:disableremoteplayback="props.disableRemotePlayback"
|
|
105
|
+
:style="{
|
|
106
|
+
width: props.fullWidth ? '100%' : toSize(props.width),
|
|
107
|
+
height: props.fullHeight ? '100%' : toSize(props.height),
|
|
108
|
+
objectFit: props.fit
|
|
109
|
+
}"
|
|
110
|
+
@click="onSurfaceClick"
|
|
111
|
+
@play="onPaused(false)"
|
|
112
|
+
@pause="onPaused(true)"
|
|
113
|
+
@ended="onPaused(true)"
|
|
114
|
+
>
|
|
115
|
+
<source
|
|
116
|
+
v-for="(source, i_source) in props.sources"
|
|
117
|
+
:key="i_source"
|
|
118
|
+
:src="source.src"
|
|
119
|
+
:type="source.type"
|
|
120
|
+
:media="source.media"
|
|
121
|
+
/>
|
|
122
|
+
<track
|
|
123
|
+
v-for="(track, i_track) in props.tracks"
|
|
124
|
+
:key="i_track"
|
|
125
|
+
:src="track.src"
|
|
126
|
+
:kind="track.kind"
|
|
127
|
+
:srclang="track.srclang"
|
|
128
|
+
:label="track.label"
|
|
129
|
+
:default="track.default"
|
|
130
|
+
/>
|
|
131
|
+
<slot />
|
|
132
|
+
</video>
|
|
133
|
+
</div>
|
|
134
|
+
</template>
|
|
135
|
+
|
|
136
|
+
<script setup>
|
|
137
|
+
import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
|
|
138
|
+
defineOptions({ inheritAttrs: false });
|
|
139
|
+
const emit = defineEmits(["fullscreen", "close", "play-click", "prev", "next"]);
|
|
140
|
+
const props = defineProps({
|
|
141
|
+
src: { type: String, required: false, default: "" },
|
|
142
|
+
sources: { type: Array, required: false, default: () => [] },
|
|
143
|
+
tracks: { type: Array, required: false, default: () => [] },
|
|
144
|
+
poster: { type: String, required: false, default: "" },
|
|
145
|
+
width: { type: [String, Number], required: false },
|
|
146
|
+
height: { type: [String, Number], required: false },
|
|
147
|
+
fullWidth: { type: Boolean, required: false, default: false },
|
|
148
|
+
fullHeight: { type: Boolean, required: false, default: false },
|
|
149
|
+
fit: { type: String, required: false, default: "contain" },
|
|
150
|
+
controls: { type: Boolean, required: false, default: true },
|
|
151
|
+
autoplay: { type: Boolean, required: false, default: false },
|
|
152
|
+
loop: { type: Boolean, required: false, default: false },
|
|
153
|
+
muted: { type: Boolean, required: false, default: false },
|
|
154
|
+
playsinline: { type: Boolean, required: false, default: true },
|
|
155
|
+
preload: { type: String, required: false, default: "metadata" },
|
|
156
|
+
crossorigin: { type: String, required: false },
|
|
157
|
+
controlsList: { type: String, required: false },
|
|
158
|
+
disablePictureInPicture: { type: Boolean, required: false, default: false },
|
|
159
|
+
disableRemotePlayback: { type: Boolean, required: false, default: false },
|
|
160
|
+
volume: { type: Number, required: false, default: 1 },
|
|
161
|
+
playbackRate: { type: Number, required: false, default: 1 },
|
|
162
|
+
startTime: { type: Number, required: false, default: 0 },
|
|
163
|
+
fullscreenButton: { type: Boolean, required: false, default: false },
|
|
164
|
+
closeButton: { type: Boolean, required: false, default: false },
|
|
165
|
+
playButton: { type: Boolean, required: false, default: false },
|
|
166
|
+
playButtonAutoHide: { type: Boolean, required: false, default: true },
|
|
167
|
+
playButtonHideDelay: { type: Number, required: false, default: 600 },
|
|
168
|
+
clickToPlay: { type: Boolean, required: false, default: false },
|
|
169
|
+
controlsHeight: { type: Number, required: false, default: 56 },
|
|
170
|
+
navButton: { type: Boolean, required: false, default: false }
|
|
171
|
+
});
|
|
172
|
+
const videoRef = ref(null);
|
|
173
|
+
const paused = ref(true);
|
|
174
|
+
const showPlayButton = ref(true);
|
|
175
|
+
let hideTimer;
|
|
176
|
+
const clearHideTimer = () => {
|
|
177
|
+
if (hideTimer) clearTimeout(hideTimer);
|
|
178
|
+
hideTimer = void 0;
|
|
179
|
+
};
|
|
180
|
+
const controlsList = computed(() => {
|
|
181
|
+
const list = (props.controlsList ?? "").split(" ").filter(Boolean);
|
|
182
|
+
if (props.fullscreenButton && !list.includes("nofullscreen")) {
|
|
183
|
+
list.push("nofullscreen");
|
|
184
|
+
}
|
|
185
|
+
return list.join(" ");
|
|
186
|
+
});
|
|
187
|
+
const toSize = (value) => {
|
|
188
|
+
if (value === void 0 || value === null || value === "") return void 0;
|
|
189
|
+
return typeof value === "number" || /^\d+(\.\d+)?$/.test(String(value)) ? `${value}px` : String(value);
|
|
190
|
+
};
|
|
191
|
+
const syncPlayback = () => {
|
|
192
|
+
const el = videoRef.value;
|
|
193
|
+
if (!el) return;
|
|
194
|
+
el.muted = props.muted;
|
|
195
|
+
el.volume = props.volume;
|
|
196
|
+
el.playbackRate = props.playbackRate;
|
|
197
|
+
};
|
|
198
|
+
onMounted(() => {
|
|
199
|
+
syncPlayback();
|
|
200
|
+
const el = videoRef.value;
|
|
201
|
+
if (!el) return;
|
|
202
|
+
if (props.startTime) el.currentTime = props.startTime;
|
|
203
|
+
onPaused(el.paused);
|
|
204
|
+
});
|
|
205
|
+
onBeforeUnmount(clearHideTimer);
|
|
206
|
+
watch(() => [props.muted, props.volume, props.playbackRate], syncPlayback);
|
|
207
|
+
const actionPayload = () => ({
|
|
208
|
+
video: videoRef.value,
|
|
209
|
+
currentTime: videoRef.value?.currentTime ?? 0,
|
|
210
|
+
paused: paused.value
|
|
211
|
+
});
|
|
212
|
+
const onPaused = (value) => {
|
|
213
|
+
paused.value = value;
|
|
214
|
+
clearHideTimer();
|
|
215
|
+
if (value || !props.playButtonAutoHide) {
|
|
216
|
+
showPlayButton.value = true;
|
|
217
|
+
return;
|
|
218
|
+
}
|
|
219
|
+
showPlayButton.value = true;
|
|
220
|
+
hideTimer = setTimeout(() => {
|
|
221
|
+
showPlayButton.value = false;
|
|
222
|
+
}, props.playButtonHideDelay);
|
|
223
|
+
};
|
|
224
|
+
const onSurfaceClick = (event) => {
|
|
225
|
+
if (!props.clickToPlay) return;
|
|
226
|
+
const el = videoRef.value;
|
|
227
|
+
if (props.controls && el) {
|
|
228
|
+
const rect = el.getBoundingClientRect();
|
|
229
|
+
if (event.clientY > rect.bottom - props.controlsHeight) return;
|
|
230
|
+
}
|
|
231
|
+
onPlayClick();
|
|
232
|
+
};
|
|
233
|
+
const onPlayClick = () => {
|
|
234
|
+
const el = videoRef.value;
|
|
235
|
+
if (el) {
|
|
236
|
+
if (el.paused) el.play();
|
|
237
|
+
else el.pause();
|
|
238
|
+
}
|
|
239
|
+
emit("play-click", actionPayload());
|
|
240
|
+
};
|
|
241
|
+
const onFullscreen = () => emit("fullscreen", actionPayload());
|
|
242
|
+
const onClose = () => emit("close", actionPayload());
|
|
243
|
+
const onPrev = () => emit("prev", actionPayload());
|
|
244
|
+
const onNext = () => emit("next", actionPayload());
|
|
245
|
+
const play = () => videoRef.value?.play();
|
|
246
|
+
const pause = () => videoRef.value?.pause();
|
|
247
|
+
const load = () => videoRef.value?.load();
|
|
248
|
+
const toggle = () => onPlayClick();
|
|
249
|
+
defineExpose({ videoRef, paused, play, pause, load, toggle });
|
|
250
|
+
</script>
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
export interface DisplayVideoSource {
|
|
2
|
+
src: string;
|
|
3
|
+
type?: string;
|
|
4
|
+
media?: string;
|
|
5
|
+
}
|
|
6
|
+
export interface DisplayVideoTrack {
|
|
7
|
+
src: string;
|
|
8
|
+
kind?: "subtitles" | "captions" | "descriptions" | "chapters" | "metadata";
|
|
9
|
+
srclang?: string;
|
|
10
|
+
label?: string;
|
|
11
|
+
default?: boolean;
|
|
12
|
+
}
|
|
13
|
+
export interface DisplayVideoProps {
|
|
14
|
+
src?: string;
|
|
15
|
+
sources?: DisplayVideoSource[];
|
|
16
|
+
tracks?: DisplayVideoTrack[];
|
|
17
|
+
poster?: string;
|
|
18
|
+
width?: string | number;
|
|
19
|
+
height?: string | number;
|
|
20
|
+
fullWidth?: boolean;
|
|
21
|
+
fullHeight?: boolean;
|
|
22
|
+
fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
|
|
23
|
+
controls?: boolean;
|
|
24
|
+
autoplay?: boolean;
|
|
25
|
+
loop?: boolean;
|
|
26
|
+
muted?: boolean;
|
|
27
|
+
playsinline?: boolean;
|
|
28
|
+
preload?: "none" | "metadata" | "auto";
|
|
29
|
+
crossorigin?: "anonymous" | "use-credentials";
|
|
30
|
+
controlsList?: string;
|
|
31
|
+
disablePictureInPicture?: boolean;
|
|
32
|
+
disableRemotePlayback?: boolean;
|
|
33
|
+
volume?: number;
|
|
34
|
+
playbackRate?: number;
|
|
35
|
+
startTime?: number;
|
|
36
|
+
fullscreenButton?: boolean;
|
|
37
|
+
closeButton?: boolean;
|
|
38
|
+
playButton?: boolean;
|
|
39
|
+
playButtonAutoHide?: boolean;
|
|
40
|
+
playButtonHideDelay?: number;
|
|
41
|
+
clickToPlay?: boolean;
|
|
42
|
+
controlsHeight?: number;
|
|
43
|
+
navButton?: boolean;
|
|
44
|
+
}
|
|
45
|
+
type DisplayVideoAction = {
|
|
46
|
+
video: HTMLVideoElement | null;
|
|
47
|
+
currentTime: number;
|
|
48
|
+
paused: boolean;
|
|
49
|
+
};
|
|
50
|
+
declare var __VLS_1: {
|
|
51
|
+
click: () => void;
|
|
52
|
+
}, __VLS_16: {
|
|
53
|
+
click: () => void;
|
|
54
|
+
paused: boolean;
|
|
55
|
+
}, __VLS_43: {
|
|
56
|
+
click: () => void;
|
|
57
|
+
}, __VLS_58: {
|
|
58
|
+
prev: () => void;
|
|
59
|
+
next: () => void;
|
|
60
|
+
}, __VLS_86: {};
|
|
61
|
+
type __VLS_Slots = {} & {
|
|
62
|
+
close?: (props: typeof __VLS_1) => any;
|
|
63
|
+
} & {
|
|
64
|
+
play?: (props: typeof __VLS_16) => any;
|
|
65
|
+
} & {
|
|
66
|
+
fullscreen?: (props: typeof __VLS_43) => any;
|
|
67
|
+
} & {
|
|
68
|
+
nav?: (props: typeof __VLS_58) => any;
|
|
69
|
+
} & {
|
|
70
|
+
default?: (props: typeof __VLS_86) => any;
|
|
71
|
+
};
|
|
72
|
+
declare const __VLS_base: import("vue").DefineComponent<DisplayVideoProps, {
|
|
73
|
+
videoRef: import("vue").Ref<HTMLVideoElement | null, HTMLVideoElement | null>;
|
|
74
|
+
paused: import("vue").Ref<boolean, boolean>;
|
|
75
|
+
play: () => Promise<void> | undefined;
|
|
76
|
+
pause: () => void | undefined;
|
|
77
|
+
load: () => void | undefined;
|
|
78
|
+
toggle: () => void;
|
|
79
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
80
|
+
close: (payload: DisplayVideoAction) => any;
|
|
81
|
+
prev: (payload: DisplayVideoAction) => any;
|
|
82
|
+
next: (payload: DisplayVideoAction) => any;
|
|
83
|
+
fullscreen: (payload: DisplayVideoAction) => any;
|
|
84
|
+
"play-click": (payload: DisplayVideoAction) => any;
|
|
85
|
+
}, string, import("vue").PublicProps, Readonly<DisplayVideoProps> & Readonly<{
|
|
86
|
+
onClose?: ((payload: DisplayVideoAction) => any) | undefined;
|
|
87
|
+
onPrev?: ((payload: DisplayVideoAction) => any) | undefined;
|
|
88
|
+
onNext?: ((payload: DisplayVideoAction) => any) | undefined;
|
|
89
|
+
onFullscreen?: ((payload: DisplayVideoAction) => any) | undefined;
|
|
90
|
+
"onPlay-click"?: ((payload: DisplayVideoAction) => any) | undefined;
|
|
91
|
+
}>, {
|
|
92
|
+
src: string;
|
|
93
|
+
fullHeight: boolean;
|
|
94
|
+
fullWidth: boolean;
|
|
95
|
+
fit: "cover" | "contain" | "fill" | "none" | "scale-down";
|
|
96
|
+
poster: string;
|
|
97
|
+
autoplay: boolean;
|
|
98
|
+
muted: boolean;
|
|
99
|
+
loop: boolean;
|
|
100
|
+
controls: boolean;
|
|
101
|
+
preload: "none" | "metadata" | "auto";
|
|
102
|
+
sources: DisplayVideoSource[];
|
|
103
|
+
tracks: DisplayVideoTrack[];
|
|
104
|
+
playsinline: boolean;
|
|
105
|
+
disablePictureInPicture: boolean;
|
|
106
|
+
disableRemotePlayback: boolean;
|
|
107
|
+
volume: number;
|
|
108
|
+
playbackRate: number;
|
|
109
|
+
startTime: number;
|
|
110
|
+
fullscreenButton: boolean;
|
|
111
|
+
closeButton: boolean;
|
|
112
|
+
playButton: boolean;
|
|
113
|
+
playButtonAutoHide: boolean;
|
|
114
|
+
playButtonHideDelay: number;
|
|
115
|
+
clickToPlay: boolean;
|
|
116
|
+
controlsHeight: number;
|
|
117
|
+
navButton: boolean;
|
|
118
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
119
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
120
|
+
declare const _default: typeof __VLS_export;
|
|
121
|
+
export default _default;
|
|
122
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
123
|
+
new (): {
|
|
124
|
+
$slots: S;
|
|
125
|
+
};
|
|
126
|
+
};
|
|
@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
|
|
|
64
64
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
|
|
65
65
|
src: string;
|
|
66
66
|
center: boolean;
|
|
67
|
-
|
|
68
|
-
modal: boolean;
|
|
67
|
+
crossorigin: "" | "anonymous" | "use-credentials";
|
|
69
68
|
responsive: boolean;
|
|
70
69
|
restore: boolean;
|
|
71
70
|
checkCrossOrigin: boolean;
|
|
72
71
|
checkOrientation: boolean;
|
|
73
|
-
|
|
72
|
+
modal: boolean;
|
|
74
73
|
guides: boolean;
|
|
75
74
|
highlight: boolean;
|
|
75
|
+
background: boolean;
|
|
76
76
|
autoCrop: boolean;
|
|
77
77
|
movable: boolean;
|
|
78
78
|
rotatable: boolean;
|
|
@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
|
|
|
64
64
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
|
|
65
65
|
src: string;
|
|
66
66
|
center: boolean;
|
|
67
|
-
|
|
68
|
-
modal: boolean;
|
|
67
|
+
crossorigin: "" | "anonymous" | "use-credentials";
|
|
69
68
|
responsive: boolean;
|
|
70
69
|
restore: boolean;
|
|
71
70
|
checkCrossOrigin: boolean;
|
|
72
71
|
checkOrientation: boolean;
|
|
73
|
-
|
|
72
|
+
modal: boolean;
|
|
74
73
|
guides: boolean;
|
|
75
74
|
highlight: boolean;
|
|
75
|
+
background: boolean;
|
|
76
76
|
autoCrop: boolean;
|
|
77
77
|
movable: boolean;
|
|
78
78
|
rotatable: boolean;
|
|
@@ -70,9 +70,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
70
70
|
required: boolean;
|
|
71
71
|
description: string;
|
|
72
72
|
options: AutocompleteOption[] | string[] | number[];
|
|
73
|
-
limit: number;
|
|
74
73
|
labelKey: string;
|
|
75
74
|
placeholder: string;
|
|
75
|
+
limit: number;
|
|
76
76
|
disabledErrorMessage: boolean;
|
|
77
77
|
disabledBorder: boolean;
|
|
78
78
|
showCounter: boolean;
|
|
@@ -70,9 +70,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
70
70
|
required: boolean;
|
|
71
71
|
description: string;
|
|
72
72
|
options: AutocompleteOption[] | string[] | number[];
|
|
73
|
-
limit: number;
|
|
74
73
|
labelKey: string;
|
|
75
74
|
placeholder: string;
|
|
75
|
+
limit: number;
|
|
76
76
|
disabledErrorMessage: boolean;
|
|
77
77
|
disabledBorder: boolean;
|
|
78
78
|
showCounter: boolean;
|
|
@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
|
|
|
12
12
|
name: string;
|
|
13
13
|
modelValue: LocalizedNameItem[];
|
|
14
14
|
options: InputSelectItem[];
|
|
15
|
-
limit: number;
|
|
16
15
|
placeholder: string;
|
|
16
|
+
limit: number;
|
|
17
17
|
showCounter: boolean;
|
|
18
18
|
addLabel: string;
|
|
19
19
|
removable: boolean;
|
|
@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
|
|
|
12
12
|
name: string;
|
|
13
13
|
modelValue: LocalizedNameItem[];
|
|
14
14
|
options: InputSelectItem[];
|
|
15
|
-
limit: number;
|
|
16
15
|
placeholder: string;
|
|
16
|
+
limit: number;
|
|
17
17
|
showCounter: boolean;
|
|
18
18
|
addLabel: string;
|
|
19
19
|
removable: boolean;
|
|
@@ -37,10 +37,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
37
37
|
name: string;
|
|
38
38
|
required: boolean;
|
|
39
39
|
placeholder: string;
|
|
40
|
+
readonly: boolean;
|
|
40
41
|
disabledErrorMessage: boolean;
|
|
41
42
|
iconPosition: import("#pukaad-ui/types/components/input/input-search").InputSearchIconPosition;
|
|
42
43
|
disabledIcon: boolean;
|
|
43
|
-
readonly: boolean;
|
|
44
44
|
roundedFull: boolean;
|
|
45
45
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
46
46
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
@@ -37,10 +37,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
37
37
|
name: string;
|
|
38
38
|
required: boolean;
|
|
39
39
|
placeholder: string;
|
|
40
|
+
readonly: boolean;
|
|
40
41
|
disabledErrorMessage: boolean;
|
|
41
42
|
iconPosition: import("#pukaad-ui/types/components/input/input-search").InputSearchIconPosition;
|
|
42
43
|
disabledIcon: boolean;
|
|
43
|
-
readonly: boolean;
|
|
44
44
|
roundedFull: boolean;
|
|
45
45
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
46
46
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
@@ -20,9 +20,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
20
20
|
name: string;
|
|
21
21
|
required: boolean;
|
|
22
22
|
description: string;
|
|
23
|
-
limit: number;
|
|
24
23
|
labelKey: string;
|
|
25
24
|
placeholder: string;
|
|
25
|
+
limit: number;
|
|
26
26
|
disabledErrorMessage: boolean;
|
|
27
27
|
disabledBorder: boolean;
|
|
28
28
|
showCounter: boolean;
|