@mixd-id/web-scaffold 0.1.230406212 → 0.1.230406214

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406212",
+  "version": "0.1.230406214",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Carousel.vue

@@ -11,7 +11,7 @@
 			</div>
     </div>
 
-    <div v-if="items && items.length > 1" :class="$style.carouselNext" @click="next(false, true)">
+    <div v-if="items && items.length > 1" :class="$style.carouselNext" @click="next(true)">
       <slot name="next">
       </slot>
     </div>
@@ -105,7 +105,6 @@ export default{
   watch:{
 
 		index(to){
-      this.setPosition()
       this.$emit('change', to)
     },
 
@@ -134,7 +133,7 @@ export default{
 			for(let curIndex = 0 ; curIndex < this.items.length ; curIndex++){
 				const item = this.$refs.inner.children[curIndex]
 				if(curIndex < index)
-					left += (item.clientWidth + gapPx)
+					left += (item.clientWidth + (!isNaN(gapPx) ? gapPx : 0))
 			}
 
 			left *= -1
@@ -146,7 +145,9 @@ export default{
 				this.$el.firstElementChild.classList.add('transition-carousel')
 			}
 
-			this.$el.firstElementChild.style.transform = `translate3d(${left}px, 0, 0)`
+			window.requestAnimationFrame(() => {
+        this.$el.firstElementChild.style.transform = `translate3d(${left}px, 0, 0)`
+      })
 		},
 
     setIndex(index){
@@ -156,8 +157,7 @@ export default{
       }
     },
 
-    next(setPosition, useBack){
-
+    next(useBack){
       let index = this.index + 1
 
       if(index >= this.items.length)
@@ -165,10 +165,10 @@ export default{
 
       this.index = index
 
-      if(setPosition) this.setPosition()
+      this.setPosition()
     },
 
-    prev(setPosition){
+    prev(){
 
       let index = this.index - 1;
 
@@ -176,11 +176,11 @@ export default{
 
       this.index = index
 
-      if(setPosition) this.setPosition()
+      this.setPosition()
     },
 
 		play(){
-			this.timeoutId = window.setTimeout(() => { this.next(true, true); this.play() }, this.autoPlay)
+			this.timeoutId = window.setTimeout(() => { this.next(true); this.play() }, this.autoPlay)
 		},
 
 		stop(){
@@ -207,7 +207,7 @@ export default{
         let ix
         if((this.index === this.items.length - 1 && dx < 0) ||
             (this.index === 0 && dx > 0)){
-          ix = parseInt(this._props['ix'] + (dx * .23812))
+          ix = parseInt(this._props['ix'] + (dx * .19812))
         }
         else{
           ix = parseInt(this._props['ix'] + dx)

package/src/components/Countdown.vue

@@ -188,32 +188,40 @@ export default{
 			if(!this.tick || !this.$refs.day) return
 			this.$refs.day.firstElementChild.innerHTML = to > 0 ? to + ' hari' : ''
 			this.$refs.day.lastElementChild.innerHTML = from + ' hari'
-			this.$refs.day.classList.add(this.$style.tick)
-      this.state[0] = 1
+			window.requestAnimationFrame(() => {
+        this.$refs.day.classList.add(this.$style.tick)
+        this.state[0] = 1
+      })
 		},
 
 		hour(to, from){
 			if(!this.tick) return
 			this.$refs.hour.firstElementChild.innerHTML = to
 			this.$refs.hour.lastElementChild.innerHTML = from
-			this.$refs.hour.classList.add(this.$style.tick)
-      this.state[1] = 1
+      window.requestAnimationFrame(() => {
+        this.$refs.hour.classList.add(this.$style.tick)
+        this.state[1] = 1
+      })
 		},
 
 		minute(to, from){
 			if(!this.tick) return
 			this.$refs.minute.firstElementChild.innerHTML = to
 			this.$refs.minute.lastElementChild.innerHTML = from
-			this.$refs.minute.classList.add(this.$style.tick)
-      this.state[2] = 1
+			window.requestAnimationFrame(() => {
+        this.$refs.minute.classList.add(this.$style.tick)
+        this.state[2] = 1
+      })
 		},
 
 		second(to, from){
 			if(!this.tick) return
 			this.$refs.second.firstElementChild.innerHTML = to
 			this.$refs.second.lastElementChild.innerHTML = from
-			this.$refs.second.classList.add(this.$style.tick)
-      this.state[3] = 1
+			window.requestAnimationFrame(() => {
+        this.$refs.second.classList.add(this.$style.tick)
+        this.state[3] = 1
+      })
 		}
 	}
 

package/src/components/Modal.vue

@@ -152,12 +152,14 @@ export default{
         }
 			}
 			else{
-        this.$nextTick(() => this.onAfterLeave())
-				unRegisterModal(this)
-
-        if(this.mode === 'v-show') {
-          this.$emit('hide')
-        }
+        this.$nextTick(() => {
+          this.onAfterLeave()
+          unRegisterModal(this)
+
+          if(this.mode === 'v-show') {
+            this.$emit('hide')
+          }
+        })
 			}
 		}
 	},
@@ -222,10 +224,16 @@ export default{
 		}
 	},
 
+  unmounted() {
+    this.setState(false)
+  },
+
   watch:{
 
-    computedState(to, from){
-			this.setState(to)
+    computedState: {
+      handler(to, from){
+        this.setState(to)
+      }
     },
 
     '$route.hash'(to){
@@ -251,8 +259,6 @@ export default{
 		})
 	},
 
-
-
 }
 
 </script>

package/src/components/YoutubeVideo.vue

@@ -0,0 +1,121 @@
+<template>
+  <div :class="$style.comp" :style="computedStyle">
+    <div id="player" :class="videoClass" class="relative" @click="loadVideo">
+      <Image :src="thumbnailUrl" :class="videoClass" />
+      <div class="absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center">
+        <div class="bg-primary-500 cursor-pointer hover:bg-primary-600 p-3 px-4 rounded-lg">
+          <svg class="w-[16px] h-[16px] fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"/></svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { componentMixin } from '../mixin/component'
+
+
+export default{
+
+  inject: [ 'alert' ],
+
+  mixins: [ componentMixin ],
+
+  props: {
+
+    videoId: String
+
+  },
+
+  computed: {
+
+    videoUrl(){
+      return `https://www.youtube.com/embed/${this.videoId}?autoplay=1`
+    },
+
+    thumbnailUrl(){
+      return `https://img.youtube.com/vi/${this.videoId}/0.jpg`
+    },
+
+    videoClass(){
+      return [
+        this.$style.video,
+        /*this.width[0] ? `w-${this.width[0]}` : undefined,
+        this.width[1] ? `md:w-${this.width[1]}` : undefined,*/
+      ]
+          .filter(_ => _)
+          .join(' ')
+    }
+
+  },
+
+  methods: {
+
+    loadVideo(){
+
+      if(!('YT' in window)){
+        const script = document.createElement('script')
+        script.src = 'https://www.youtube.com/iframe_api'
+        document.head.appendChild(script)
+      }
+      else{
+
+        if(!this.player){
+          this.player = new YT.Player('player', {
+            videoId: this.videoId,
+            playerVars: {
+              autoplay: 1,
+              controls: 0,
+              rel: 0,
+            },
+            events: {
+              onReady: () => console.log('onReady'),
+              onStateChange: () => console.log('onStateChange'),
+              onAutoplayBlocked: () => this.alert('onAutoplayBlocked'),
+            }
+          });
+        }
+        else{
+          this.player.loadVideoById(this.videoId)
+        }
+      }
+    }
+
+  },
+
+  mounted() {
+    this.id = this.uniqid()
+    window.onYouTubeIframeAPIReady = () => {
+      this.loadVideo()
+    }
+  },
+
+  data(){
+    return {
+      id: null,
+      player: null,
+      start: false
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-col;
+}
+
+.video{
+  @apply max-w-full;
+  aspect-ratio: 16 / 9;
+  width: 100%;
+}
+.video img{
+  @apply object-cover;
+}
+
+</style>

package/src/index.js

@@ -428,6 +428,7 @@ export default{
     app.component('TextBlock', defineAsyncComponent(() => import("./components/TextBlock.vue")))
     app.component('TextEditor', defineAsyncComponent(() => import("./components/TextEditor.vue")))
     app.component('DataList', defineAsyncComponent(() => import("./components/DataList.vue")))
+    app.component('YoutubeVideo', defineAsyncComponent(() => import("./components/YoutubeVideo.vue")))
 
     app.component('AhrefSetting', defineAsyncComponent(() => import("./widgets/AhrefSetting.vue")))
     app.component('ArticleSetting', defineAsyncComponent(() => import("./widgets/ArticleSetting.vue")))
@@ -477,5 +478,6 @@ export default{
     app.component('WebTemplateCreator', defineAsyncComponent(() => import("./widgets/WebTemplateCreator.vue")))
     app.component('ModalSetting', defineAsyncComponent(() => import("./widgets/ModalSetting.vue")))
     app.component('DataListSetting', defineAsyncComponent(() => import("./widgets/DataListSetting.vue")))
+    app.component('YoutubeVideoSetting', defineAsyncComponent(() => import("./widgets/YoutubeVideoSetting.vue")))
   }
 }

package/src/widgets/WebPageBuilder.vue

@@ -1627,6 +1627,8 @@ export default{
 
         { type:'Countdown', name:'Countdown', group:'Components', props:{}},
 
+        { type:'YoutubeVideo', name:'YoutubeVideo', group:'Components', props:{}},
+
         { type:'Test', name:'Test', group:'Components', props:{}},
 
       ],

package/src/widgets/YoutubeVideoSetting.vue

@@ -0,0 +1,48 @@
+<template>
+	<div :class="$style.comp">
+
+		<div>
+			<label class="text-text-400">Video ID</label>
+			<Textbox v-model="item.props.videoId"
+							 @keyup.enter="$emit('change')" />
+		</div>
+
+		<ComponentSetting :item="item"
+											:view-type="viewType"
+											:view-types="viewTypes"
+											defaultDisplay="flex"
+											@change="$emit('change')" />
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	emits: [ 'change' ],
+
+	props: {
+
+		item: {
+			type: Object,
+			required: true
+		},
+
+		viewType: String,
+
+		viewTypes: Array,
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex flex-col gap-4;
+}
+
+</style>