@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.3 → 7.24.3-qa-elisee-7.32.0

package/src/components/videoThumbnail/index.vue

@@ -1,103 +1,103 @@
 <template>
-  <Wrapper :fit="fit" :height="height" :width="width">
+  <wrapper :width="width" :height="height" :fit="fit">
     <img :src="src" />
-    <IconWrapper>
-      <Icon :color="playIconColor" name="play" :size="playIconSize" />
-    </IconWrapper>
-  </Wrapper>
+    <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 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;
+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};
-    & 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;
-  `
+  }
+`
+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,
+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',
-      },
-    },
-    data() {
-      return {
-        isOpenByClick: false,
-      }
+    fit: {
+      required: false,
+      default: 'cover'
     },
-    mounted() {
-      document.addEventListener('click', this.clickOutside)
+    width: {
+      required: false,
+      default: '300px'
     },
-    beforeDestroy() {
-      document.removeEventListener('click', this.clickOutside)
+    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'
     },
+    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,21 +13,23 @@ 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/.eslintrc.js

@@ -1,184 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    browser: true,
-    node: true,
-    es6: true,
-  },
-  extends: [
-    'eslint:recommended',
-    'eslint:recommended',
-    'plugin:vue/vue3-recommended',
-    'plugin:prettier/recommended',
-  ],
-  plugins: ['vue', 'prettier'],
-  parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: 'module',
-  },
-  rules: {
-    'vue/component-name-in-template-casing': [
-      'warn',
-      'PascalCase',
-      {
-        registeredComponentsOnly: false,
-        ignores: [],
-      },
-    ],
-    'vue/multi-word-component-names': [
-      'warn',
-      {
-        ignores: [],
-      },
-    ],
-    'vue/html-closing-bracket-newline': [
-      'warn',
-      {
-        singleline: 'never',
-        multiline: 'always',
-      },
-    ],
-    'vue/html-closing-bracket-spacing': [
-      'warn',
-      {
-        startTag: 'never',
-        endTag: 'never',
-        selfClosingTag: 'always',
-      },
-    ],
-    'vue/no-multi-spaces': [
-      'warn',
-      {
-        ignoreProperties: false,
-      },
-    ],
-    'vue/html-end-tags': 'warn',
-    'keyword-spacing': [
-      'warn',
-      {
-        before: true, // Require a space before keywords
-        after: true, // Require a space after keywords
-      },
-    ],
-    // Enforce one space after comma
-    'comma-spacing': [
-      'warn',
-      {
-        before: false, // No space before comma
-        after: true, // Require a space after comma
-      },
-    ],
-    'func-call-spacing': ['warn', 'never'],
-    // Enforce one space around binary operators (+, -, *, /, etc.)
-    'space-infix-ops': 'warn',
-    // Enforce no space inside parentheses
-    'space-in-parens': ['warn', 'never'],
-    // Enforce one space before block statements (if, else, for, etc.)
-    'space-before-blocks': 'warn',
-    // Enforce no spaces inside square brackets
-    'array-bracket-spacing': ['warn', 'never'],
-    // Enforce one space before function parentheses
-    'space-before-function-paren': ['warn', 'never'],
-    // Enforce one space inside braces of object literals
-    'object-curly-spacing': ['warn', 'always'],
-    // Enforce one space before and after arrow functions (optional)
-    'arrow-spacing': ['warn', { before: true, after: true }],
-    // Enforce one space after colon in object literals
-    'key-spacing': [
-      'warn',
-      {
-        beforeColon: false, // No space before colon
-        afterColon: true, // Require one space after colon
-        mode: 'strict', // Enforce spacing between key and value
-      },
-    ],
-    'vue/html-indent': 'off',
-    'vue/html-quotes': ['warn', 'double'],
-    'vue/html-self-closing': [
-      'warn',
-      {
-        html: {
-          void: 'always',
-          normal: 'never',
-          component: 'always',
-        },
-        svg: 'always',
-        math: 'always',
-      },
-    ],
-    'vue/require-default-prop': 'warn',
-    'vue/require-prop-types': 'warn',
-    'vue/v-on-event-hyphenation': [
-      'warn',
-      'always',
-      {
-        autofix: true,
-        ignore: [],
-      },
-    ],
-    'vue/prop-name-casing': ['warn', 'camelCase'],
-    'vue/order-in-components': 'warn',
-    'vue/this-in-template': ['warn', 'never'],
-    'vue/attributes-order': [
-      'warn',
-      {
-        order: [
-          'DEFINITION',
-          'LIST_RENDERING',
-          'CONDITIONALS',
-          'RENDER_MODIFIERS',
-          'GLOBAL',
-          ['UNIQUE', 'SLOT'],
-          'TWO_WAY_BINDING',
-          'OTHER_DIRECTIVES',
-          'OTHER_ATTR',
-          'EVENTS',
-          'CONTENT',
-        ],
-        alphabetical: true,
-      },
-    ],
-    'vue/no-unused-vars': 'warn',
-    'vue/no-use-v-if-with-v-for': [
-      'warn',
-      {
-        allowUsingIterationVar: false,
-      },
-    ],
-    'no-unused-vars': 'warn',
-    'no-undef': 'warn',
-    'no-console': 'warn',
-    'no-debugger': 'warn',
-    'no-multi-spaces': 'warn',
-    'no-mixed-spaces-and-tabs': 'warn',
-    'no-redeclare': 'warn',
-    'no-prototype-builtins': 'warn',
-    'no-unsafe-finally': 'warn',
-    'max-len': [
-      'warn',
-      {
-        code: 120,
-        tabWidth: 2,
-        ignoreUrls: true,
-        ignoreComments: true,
-        ignoreTrailingComments: true,
-        ignorePattern: '^import\\s.+\\sfrom\\s.+;$',
-      },
-    ],
-    'prettier/prettier': [
-      'warn',
-      {
-        semi: false,
-        singleQuote: true,
-        trailingComma: 'es5',
-        printWidth: 80,
-        tabWidth: 2,
-        useTabs: false,
-        endOfLine: 'auto',
-      },
-    ],
-  },
-  globals: {
-    _: true,
-  },
-}