@eturnity/eturnity_reusable_components 7.30.3 → 7.32.0

package/src/components/videoThumbnail/index.vue

@@ -1,103 +1,103 @@
 <template>
-  <wrapper :width="width" :height="height" :fit="fit">
+  <Wrapper :fit="fit" :height="height" :width="width">
     <img :src="src" />
-    <iconWrapper>
-      <icon name="play" :size="playIconSize" :color="playIconColor" />
-    </iconWrapper>
-  </wrapper>
+    <IconWrapper>
+      <Icon :color="playIconColor" name="play" :size="playIconSize" />
+    </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 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'
+  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};
+  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};
-  }
-`
-const iconWrapper = styled('div')`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
+    & 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'
+    mounted() {
+      document.addEventListener('click', this.clickOutside)
     },
-    playIconSize: {
-      required: false,
-      default: '50px'
+    beforeDestroy() {
+      document.removeEventListener('click', this.clickOutside)
+    },
+    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
+        }
+      },
     },
-    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>

package/src/components/videoThumbnail/videoThumbnail.stories.js

@@ -2,7 +2,7 @@ import VideoThumbnail from './index.vue'
 
 export default {
   title: 'VideoThumbnail',
-  component: VideoThumbnail
+  component: VideoThumbnail,
   // argTypes: {},
 }
 
@@ -13,23 +13,21 @@ const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   template: `<VideoThumbnail v-bind="$props"/>`,
   // 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"
-    //   />
+  //  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"
+  //   />
 })
 
 export const Default = Template.bind({})
 Default.args = {
-  src:"https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080",
-  playIconSize:"50px",
-  playIconColor:"red",
-  width:"400px",
-  height:"300px",
-  fit:"cover"
+  src: 'https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080',
+  playIconSize: '50px',
+  playIconColor: 'red',
+  width: '400px',
+  height: '300px',
+  fit: 'cover',
 }
-
-

package/src/helpers/numberConverter.js

@@ -3,7 +3,7 @@ import { langForLocaleString } from './translateLang'
 export const stringToNumber = ({
   value = '',
   numberPrecision = false,
-  allowNegative = false
+  allowNegative = false,
 }) => {
   // This is for saving. It converts our input string to a readable number
   let newVal = value.toString()
@@ -98,6 +98,6 @@ export const numberToString = ({ value, numberPrecision, minDecimals }) => {
   return value.toLocaleString(langForLocaleString(), {
     minimumFractionDigits: minimumRounding, // removing this for now. Why do we need this to be a minimum amount?
     maximumFractionDigits:
-      numberPrecision < minimumRounding ? minimumRounding : numberPrecision
+      numberPrecision < minimumRounding ? minimumRounding : numberPrecision,
   })
 }

package/src/helpers/translateLang.js

@@ -116,13 +116,13 @@ export const tinyLanguage = (lang) => {
 
 export const langForLocaleString = () => {
   const selectedLang = localStorage.getItem('lang')
-      ? localStorage.getItem('lang') === 'fr-lu'
-          ? 'fr-fr'
-          : localStorage.getItem('lang') === 'fr-ch'
-              ? 'de-ch'
-              : localStorage.getItem('lang') === 'ca-es'
-                ? 'es-es'
-                : localStorage.getItem('lang')
-      : 'en-US'
+    ? localStorage.getItem('lang') === 'fr-lu'
+      ? 'fr-fr'
+      : localStorage.getItem('lang') === 'fr-ch'
+      ? 'de-ch'
+      : localStorage.getItem('lang') === 'ca-es'
+      ? 'es-es'
+      : localStorage.getItem('lang')
+    : 'en-US'
   return selectedLang !== 'null' ? selectedLang : 'en-US'
-}
+}

package/src/mixins/inputValidations.js

@@ -3,13 +3,13 @@ export default {
     rules: {
       type: Array,
       required: false,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
   data() {
     return {
       error: false,
-      errMessage: ''
+      errMessage: '',
     }
   },
   methods: {
@@ -92,6 +92,6 @@ export default {
         this.error = true
         this.errMessage = this.$gettext('invalid_year')
       }
-    }
-  }
+    },
+  },
 }

package/public/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>