@mixd-id/web-scaffold 0.1.230406216 → 0.1.230406217

package/package.json

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

package/src/components/Carousel.vue

@@ -226,7 +226,7 @@ export default{
 
         if (Math.abs(dx) > 10) {
           if (tn < 1200){
-            dx < 0 ? this.next(true) : this.prev(true)
+            dx < 0 ? this.next() : this.prev()
           }
           else{
             this.setPosition()

package/src/components/YoutubeVideo.vue

@@ -2,7 +2,7 @@
   <div :class="$style.comp" :style="computedStyle">
     <div :class="videoClass" class="absolute top-0 left-0 right-0 bottom-0 z-10"
       :style="{ opacity:ready ? 1 : 0 }">
-      <div id="player"></div>
+      <div :id="id"></div>
     </div>
     <div :class="videoClass" class="relative flex items-center justify-center"
       :style="thumbnailStyle">
@@ -20,6 +20,27 @@
 
 import { componentMixin } from '../mixin/component'
 
+const callbacks = []
+const initScript = (callback, id) => {
+
+  callbacks.push([ callback, id ])
+
+  let script = document.getElementById('youtube-iframe-api')
+  if(!script){
+    const script = document.createElement('script')
+    script.src = 'https://www.youtube.com/iframe_api'
+    script.id = 'youtube-iframe-api'
+    document.head.appendChild(script)
+
+    window.onYouTubeIframeAPIReady = () => {
+      while(callbacks.length > 0){
+        const [ callback, id ] = callbacks.pop()
+        callback()
+      }
+    }
+  }
+}
+
 export default{
 
   mixins: [ componentMixin ],
@@ -29,7 +50,7 @@ export default{
     videoId: String,
 
     delay: {
-      type: Number,
+      type: [ Number, String ],
       default: 0
     },
 
@@ -62,14 +83,13 @@ export default{
   data(){
     return {
       ready: false,
-      player: null
+      player: null,
+      id: null
     }
   },
 
   mounted() {
-    window.onYouTubeIframeAPIReady = () => {
-      this.loadVideo()
-    }
+    this.id = this.uniqid()
 
     if(parseInt(this.delay) > 0){
       window.setTimeout(() => {
@@ -91,14 +111,9 @@ export default{
 
     loadVideo(){
 
-      if(!('YT' in window)){
-        const script = document.createElement('script')
-        script.src = 'https://www.youtube.com/iframe_api'
-        document.head.appendChild(script)
-      }
-      else{
+      initScript(() => {
         if(!this.player){
-          this.player = new YT.Player('player', {
+          this.player = new YT.Player(this.id, {
             height: '100%',
             width: '100%',
             videoId: this.videoId,
@@ -116,7 +131,7 @@ export default{
         else{
           this.player.loadVideoById(this.videoId)
         }
-      }
+      }, this.id)
 
     }
 

package/src/mixin/component.js

@@ -46,7 +46,7 @@ export const componentMixin = {
 		columns: Array,
     direction: Array,
     gap: Array,
-    display: Array,
+    display: [ Array, String ],
 
     flexColumns: Array,
 

package/src/widgets/ContactForm.vue

@@ -153,7 +153,7 @@ export default{
 
     compStyle(){
       return {
-        'min-height': this.minHeight
+        'min-height': this.formHeight
       }
     }
 
@@ -164,7 +164,7 @@ export default{
 			form: {},
 			completed: false,
       state: 1,
-      minHeight: undefined,
+      formHeight: undefined,
 		}
 	},
 
@@ -174,7 +174,7 @@ export default{
 		}
 
     window.setTimeout(() => {
-      this.minHeight = this.$el.clientHeight + 'px'
+      this.formHeight = this.$el.clientHeight + 'px'
     }, 1000)
 	}