@eturnity/eturnity_reusable_components 7.12.6-EPDM-7951.3 → 7.12.7-EPDM-10299.0

package/src/components/videoThumbnail/index.vue

@@ -1,103 +1,108 @@
 <template>
-  <wrapper :width="width" :height="height" :fit="fit">
-    <img :src="src" />
-    <iconWrapper>
-      <icon name="play" :size="playIconSize" :color="playIconColor" />
-    </iconWrapper>
-  </wrapper>
-</template>
-
-<script>
-// import VideoThumbnail from "@eturnity/eturnity_reusable_components/src/components/videoThumbnail"
-//  How to use:
-//<videoThumbnail src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080"
-//   playIconColor="red"
-//   playIconSize="20px"
-//   width="400px"
-//   height="600px"
-//   />
-
-import styled from 'vue3-styled-components'
-import Icon from '../icon'
-
-const wrapperAttrs = { width: String, height: String, fit: String }
-const Wrapper = styled('div', wrapperAttrs)`
-  display: inline-block;
-  position: relative;
-  width: ${(props) => props.width};
-  height: ${(props) => props.height};
-  & img {
-    object-fit: ${(props) => props.fit};
-    width: ${(props) => props.width};
-    height: ${(props) => props.height};
-  }
-`
-const iconWrapper = styled('div')`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
+    <wrapper :width="width" :height="height" :fit="fit">
+      <img :src="src">
+      <iconWrapper>
+        <icon
+            name="play"
+            :size="playIconSize"
+            :color="playIconColor"
+            />
+        </iconWrapper>
+    </wrapper>
+  </template>
+  
+  <script>
+    // import VideoThumbnail from "@eturnity/eturnity_reusable_components/src/components/videoThumbnail"
+    //  How to use:
+    //<videoThumbnail src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080" 
+    //   playIconColor="red"
+    //   playIconSize="20px"
+    //   width="400px"
+    //   height="600px"
+    //   />
+  
+  import styled from 'vue-styled-components'
+  import Icon from '../icon'
+  
+  const wrapperAttrs = { width: String, height:String,fit:String }
+  const Wrapper = styled('div', wrapperAttrs)`
+    display: inline-block;
+    position: relative;
+    width:${props=>props.width};
+    height:${props=>props.height};
+    & img{
+        object-fit:${props=>props.fit};
+        width:${props=>props.width};
+        height:${props=>props.height};
+    }
+  `  
+  const iconWrapper = styled('div')`
+    position: absolute;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    display:flex;
+    justify-content:center;
+    align-items: center;
+  `  
 
-export default {
-  name: 'VideoThumbnail',
-  components: {
-    Wrapper,
-    Icon,
-    iconWrapper
-  },
-  props: {
-    src: {
-      required: true
+  export default {
+    name: 'VideoThumbnail',
+    components: {
+        Wrapper,
+        Icon,
+        iconWrapper
     },
-    fit: {
-      required: false,
-      default: 'cover'
+    props: {
+        src:{
+            required: true,
+        },
+        fit:{
+            required: false,
+            default: 'cover'
+        },
+        width: {
+            required: false,
+            default: '300px'
+        },
+        height: {
+            required: false,
+            default: '200px'
+        },
+        playIconSize:{
+            required: false,
+            default: '50px'
+        },
+        playIconColor:{
+            required: false,
+            default: 'blue'
+        }
     },
-    width: {
-      required: false,
-      default: '300px'
+    data() {
+      return {
+        isOpenByClick:false
+      }
     },
-    height: {
-      required: false,
-      default: '200px'
+    methods:{
+        clickOutside(event) {
+            if (this.openingMode!="click") return
+            if (
+                this.$refs.dropdown.$el == event.target ||
+                this.$refs.dropdown.$el.contains(event.target)
+            ) {
+                return
+            } else {
+                this.isOpenByClick=false
+            }
+        },
     },
-    playIconSize: {
-      required: false,
-      default: '50px'
+    mounted() {
+        document.addEventListener('click', this.clickOutside)
+    },
+    beforeDestroy() {
+        document.removeEventListener('click', this.clickOutside)
     },
-    playIconColor: {
-      required: false,
-      default: 'blue'
-    }
-  },
-  data() {
-    return {
-      isOpenByClick: false
-    }
-  },
-  methods: {
-    clickOutside(event) {
-      if (this.openingMode != 'click') return
-      if (
-        this.$refs.dropdown.$el == event.target ||
-        this.$refs.dropdown.$el.contains(event.target)
-      ) {
-        return
-      } else {
-        this.isOpenByClick = false
-      }
-    }
-  },
-  mounted() {
-    document.addEventListener('click', this.clickOutside)
-  },
-  beforeDestroy() {
-    document.removeEventListener('click', this.clickOutside)
   }
-}
-</script>
+  </script>
+  

package/src/main.js

@@ -1,6 +1,13 @@
-import App from './App.vue'
-import { createApp } from 'vue'
+import Vue from "vue"
+import App from "./App.vue"
+import VueCompositionAPI from "@vue/composition-api"
+import vClickOutside from 'v-click-outside'
 
-const app = createApp(App)
+Vue.config.productionTip = false
 
-app.mount('#app')
+Vue.use(VueCompositionAPI)
+Vue.use(vClickOutside)
+
+new Vue({
+  render: (h) => h(App),
+}).$mount("#app")