@eturnity/eturnity_reusable_components 7.6.1-EPDM-9777.6 → 7.6.1-EPDM-7951

package/src/components/threeDots/index.vue

@@ -23,17 +23,17 @@
             v-for="child in childOpen"
             :key="child.value"
             @click.stop="
-              onSelect({
-                item: child,
-                hasChildren: hasChildren(child)
-              })
-            "
+            onSelect({
+              item: child,
+              hasChildren: hasChildren(child)
+            })
+          "
             @keyup.enter.stop="
-              onSelect({
-                item: child,
-                hasChildren: hasChildren(child)
-              })
-            "
+            onSelect({
+              item: child,
+              hasChildren: hasChildren(child)
+            })
+          "
           >
             {{ child.name }}
           </option-child>
@@ -45,11 +45,10 @@
             tabindex="0"
             @click.stop="onSelect({ item: item, hasChildren: hasChildren(item) })"
             @keyup.enter="
-              onSelect({ item: item, hasChildren: hasChildren(item) })
-            "
+            onSelect({ item: item, hasChildren: hasChildren(item) })
+          "
             @mouseover="onItemHover({ index, item })"
             :isDisabled="item.disabled"
-            :title="item.title"
           >
             <arrow-left
               :hasChildren="hasChildren(item)"
@@ -69,10 +68,9 @@
 // import ThreeDots from "@eturnity/eturnity_reusable_components/src/components/threeDots"
 // To use:
 // <three-dots
-//   :isLoading="true"
 //   :options="listOptions"
-//   @on-click="onClick($event)"
 //   @on-select="onSelect($event)"
+//   :isLoading="true"
 // />
 // options to pass:
 // listOptions: [
@@ -122,7 +120,7 @@
 //         },
 //       ],
 
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import Spinner from '../spinner'
 
 const PageContainerAttrs = {
@@ -205,8 +203,6 @@ const OptionItem = styled('div', optionAttrs)`
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   font-size: 13px;
   position: relative;
-  ${(props) => (props.isDisabled ? `background-color: ${ props.theme.colors.grey5 }!important` : '')};
-  ${(props) => (props.isDisabled ? `color: ${ props.theme.colors.grey2 }` : '')};
 
   &:hover {
     background-color: #ebeef4;
@@ -372,7 +368,6 @@ export default {
     },
     onSelect({ item, hasChildren }) {
       if (hasChildren || item.disabled) {
-        this.$emit('on-click', item)
         return
       }
       this.$emit('on-select', item)

package/src/components/videoThumbnail/index.vue

@@ -1,108 +1,103 @@
 <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 '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;
-  `  
+  <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'
 
-  export default {
-    name: 'VideoThumbnail',
-    components: {
-        Wrapper,
-        Icon,
-        iconWrapper
+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
     },
-    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'
-        }
+    fit: {
+      required: false,
+      default: 'cover'
     },
-    data() {
-      return {
-        isOpenByClick:false
-      }
+    width: {
+      required: false,
+      default: '300px'
     },
-    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
-            }
-        },
+    height: {
+      required: false,
+      default: '200px'
     },
-    mounted() {
-        document.addEventListener('click', this.clickOutside)
-    },
-    beforeDestroy() {
-        document.removeEventListener('click', this.clickOutside)
+    playIconSize: {
+      required: false,
+      default: '50px'
     },
+    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,13 +1,6 @@
-import Vue from "vue"
-import App from "./App.vue"
-import VueCompositionAPI from "@vue/composition-api"
-import vClickOutside from 'v-click-outside'
+import App from './App.vue'
+import { createApp } from 'vue'
 
-Vue.config.productionTip = false
+const app = createApp(App)
 
-Vue.use(VueCompositionAPI)
-Vue.use(vClickOutside)
-
-new Vue({
-  render: (h) => h(App),
-}).$mount("#app")
+app.mount('#app')