pukaad-ui-lib 1.398.0 → 1.400.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.398.0",
+  "version": "1.400.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/display/display-video.d.vue.ts

@@ -39,7 +39,6 @@ export interface DisplayVideoProps {
     playButtonAutoHide?: boolean;
     playButtonHideDelay?: number;
     clickToPlay?: boolean;
-    controlsHeight?: number;
     navButton?: boolean;
 }
 type DisplayVideoAction = {
@@ -113,7 +112,6 @@ declare const __VLS_base: import("vue").DefineComponent<DisplayVideoProps, {
     playButtonAutoHide: boolean;
     playButtonHideDelay: number;
     clickToPlay: boolean;
-    controlsHeight: number;
     navButton: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/display/display-video.vue

@@ -68,12 +68,7 @@
     </slot>
 
     <!-- ปุ่มเลื่อนขึ้นลงวีดีโอ -->
-    <slot
-      v-if="props.navButton"
-      name="nav"
-      :prev="onPrev"
-      :next="onNext"
-    >
+    <slot v-if="props.navButton" name="nav" :prev="onPrev" :next="onNext">
       <div class="absolute top-1/2 right-[16px] -translate-y-1/2 z-10">
         <div class="flex flex-col gap-[32px] items-center">
           <Button circle color="dark" class="w-[50px] h-[50px]" @click="onPrev">
@@ -89,7 +84,10 @@
     <video
       ref="videoRef"
       v-bind="$attrs"
-      :class="props.clickToPlay && 'cursor-pointer'"
+      :class="[
+  surfaceClickable && 'cursor-pointer',
+  props.playButton && 'display-video-no-native-overlay'
+]"
       :src="props.src || void 0"
       :poster="props.poster || void 0"
       :preload="props.preload"
@@ -99,7 +97,7 @@
       :muted="props.muted"
       :playsinline="props.playsinline"
       :crossorigin="props.crossorigin || void 0"
-      :controlslist="controlsList || void 0"
+      :controlslist="props.controlsList || void 0"
       :disablepictureinpicture="props.disablePictureInPicture"
       :disableremoteplayback="props.disableRemotePlayback"
       :style="{
@@ -166,7 +164,6 @@ const props = defineProps({
   playButtonAutoHide: { type: Boolean, required: false, default: true },
   playButtonHideDelay: { type: Number, required: false, default: 600 },
   clickToPlay: { type: Boolean, required: false, default: false },
-  controlsHeight: { type: Number, required: false, default: 56 },
   navButton: { type: Boolean, required: false, default: false }
 });
 const videoRef = ref(null);
@@ -177,13 +174,7 @@ const clearHideTimer = () => {
   if (hideTimer) clearTimeout(hideTimer);
   hideTimer = void 0;
 };
-const controlsList = computed(() => {
-  const list = (props.controlsList ?? "").split(" ").filter(Boolean);
-  if (props.fullscreenButton && !list.includes("nofullscreen")) {
-    list.push("nofullscreen");
-  }
-  return list.join(" ");
-});
+const surfaceClickable = computed(() => props.clickToPlay && !props.controls);
 const toSize = (value) => {
   if (value === void 0 || value === null || value === "") return void 0;
   return typeof value === "number" || /^\d+(\.\d+)?$/.test(String(value)) ? `${value}px` : String(value);
@@ -221,13 +212,8 @@ const onPaused = (value) => {
     showPlayButton.value = false;
   }, props.playButtonHideDelay);
 };
-const onSurfaceClick = (event) => {
-  if (!props.clickToPlay) return;
-  const el = videoRef.value;
-  if (props.controls && el) {
-    const rect = el.getBoundingClientRect();
-    if (event.clientY > rect.bottom - props.controlsHeight) return;
-  }
+const onSurfaceClick = () => {
+  if (!surfaceClickable.value) return;
   onPlayClick();
 };
 const onPlayClick = () => {
@@ -248,3 +234,7 @@ const load = () => videoRef.value?.load();
 const toggle = () => onPlayClick();
 defineExpose({ videoRef, paused, play, pause, load, toggle });
 </script>
+
+<style scoped>
+.display-video-no-native-overlay::-webkit-media-controls-overlay-play-button{display:none}
+</style>

package/dist/runtime/components/display/display-video.vue.d.ts

@@ -39,7 +39,6 @@ export interface DisplayVideoProps {
     playButtonAutoHide?: boolean;
     playButtonHideDelay?: number;
     clickToPlay?: boolean;
-    controlsHeight?: number;
     navButton?: boolean;
 }
 type DisplayVideoAction = {
@@ -113,7 +112,6 @@ declare const __VLS_base: import("vue").DefineComponent<DisplayVideoProps, {
     playButtonAutoHide: boolean;
     playButtonHideDelay: number;
     clickToPlay: boolean;
-    controlsHeight: number;
     navButton: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/input/input-text-field.d.vue.ts

@@ -59,8 +59,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    readonly: boolean;
     limit: number;
+    readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-text-field.vue.d.ts

@@ -59,8 +59,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    readonly: boolean;
     limit: number;
+    readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-textarea.d.vue.ts

@@ -47,8 +47,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     fullHeight: boolean;
     fullWidth: boolean;
     rows: number;
-    readonly: boolean;
     limit: number;
+    readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-textarea.vue.d.ts

@@ -47,8 +47,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     fullHeight: boolean;
     fullWidth: boolean;
     rows: number;
-    readonly: boolean;
     limit: number;
+    readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.398.0",
+  "version": "1.400.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",