@eturnity/eturnity_reusable_components 7.39.4-EPDM-11314.1 → 7.39.4-EPDM-10434.0

package/src/components/videoThumbnail/index.vue

@@ -1,103 +1,103 @@
-<template>
-  <Wrapper :fit="fit" :height="height" :width="width">
-    <img :src="src" />
-    <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 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;
-  `
-
-  export default {
-    name: 'VideoThumbnail',
-    components: {
-      Wrapper,
-      Icon,
-      IconWrapper,
-    },
-    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,
-      }
-    },
-    mounted() {
-      document.addEventListener('click', this.clickOutside)
-    },
-    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
-        }
-      },
-    },
-  }
-</script>
+<template>
+  <Wrapper :fit="fit" :height="height" :width="width">
+    <img :src="src" />
+    <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 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;
+  `
+
+  export default {
+    name: 'VideoThumbnail',
+    components: {
+      Wrapper,
+      Icon,
+      IconWrapper,
+    },
+    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,
+      }
+    },
+    mounted() {
+      document.addEventListener('click', this.clickOutside)
+    },
+    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
+        }
+      },
+    },
+  }
+</script>

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

@@ -1,33 +1,33 @@
-import VideoThumbnail from './index.vue'
-
-export default {
-  title: 'VideoThumbnail',
-  component: VideoThumbnail,
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { VideoThumbnail },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  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"
-  //   />
-})
-
-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',
-}
+import VideoThumbnail from './index.vue'
+
+export default {
+  title: 'VideoThumbnail',
+  component: VideoThumbnail,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { VideoThumbnail },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  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"
+  //   />
+})
+
+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',
+}

package/src/helpers/currencyMapping.js

@@ -1,28 +1,28 @@
-export const currencyMapping = (data) => {
-  let currency
-
-  switch (data) {
-    case 'EUR':
-      currency = 'ct'
-      break
-    case 'CHF':
-      currency = 'Rp.'
-      break
-    case 'SEK':
-      currency = 'öre'
-      break
-    case 'GBP':
-      currency = 'p'
-      break
-    case 'USD':
-      currency = 'ct'
-      break
-    case 'DKK':
-      currency = 'øre'
-      break
-    default:
-      currency = 'ct'
-  }
-
-  return currency
-}
+export const currencyMapping = (data) => {
+  let currency
+
+  switch (data) {
+    case 'EUR':
+      currency = 'ct'
+      break
+    case 'CHF':
+      currency = 'Rp.'
+      break
+    case 'SEK':
+      currency = 'öre'
+      break
+    case 'GBP':
+      currency = 'p'
+      break
+    case 'USD':
+      currency = 'ct'
+      break
+    case 'DKK':
+      currency = 'øre'
+      break
+    default:
+      currency = 'ct'
+  }
+
+  return currency
+}

package/src/helpers/numberConverter.js

@@ -1,103 +1,103 @@
-import { langForLocaleString } from './translateLang'
-
-export const stringToNumber = ({
-  value = '',
-  numberPrecision = false,
-  allowNegative = false,
-}) => {
-  // This is for saving. It converts our input string to a readable number
-  let newVal = value.toString()
-  const selectedLang = localStorage.getItem('lang')
-  // The first replace will replace not allowed characters with a blank
-  if (
-    selectedLang === 'de-DE' ||
-    selectedLang === 'de-de' ||
-    selectedLang === 'no-no' ||
-    selectedLang === 'nb-no' ||
-    selectedLang === 'da-dk' ||
-    selectedLang === 'de-lu' ||
-    selectedLang === 'de-be' ||
-    selectedLang === 'es-es' ||
-    selectedLang === 'ca-es' ||
-    selectedLang === 'de' ||
-    selectedLang === 'de-at' ||
-    selectedLang === 'it' ||
-    selectedLang === 'it-it' ||
-    selectedLang === 'nl-nl' ||
-    selectedLang === 'nl-be' ||
-    selectedLang === 'de-at'
-  ) {
-    // replace dots with blank, and commas with a dot: 1.234,56 --> 1234.56
-    if (allowNegative) {
-      newVal = newVal
-        .replace(/[^\d-.,']/g, '')
-        .replace(/[.\s]/g, '')
-        .replace(/[,\s]/, '.')
-    } else {
-      newVal = newVal
-        .replace(/[^\d.,']/g, '')
-        .replace(/[.\s]/g, '')
-        .replace(/[,\s]/, '.')
-    }
-  } else if (selectedLang === 'en-us' || selectedLang === 'en-gb') {
-    // replace commas with blank: 1,234.56 --> 1234.56
-    if (allowNegative) {
-      newVal = newVal.replace(/[^\d-.,']/g, '').replace(/[,\s]/g, '')
-    } else {
-      newVal = newVal.replace(/[^\d.,']/g, '').replace(/[,\s]/g, '')
-    }
-  } else if (
-    selectedLang === 'de-ch' ||
-    selectedLang === 'fr-ch' ||
-    selectedLang === 'it-ch'
-  ) {
-    // replace ' with blank: 1'234.56 --> 1234.56
-    if (allowNegative) {
-      newVal = newVal
-        .replace(/[^\d-.,']/g, '')
-        .replace(/[,\s]/, '')
-        .replace(/['\s]/g, '')
-    } else {
-      newVal = newVal
-        .replace(/[^\d.,']/g, '')
-        .replace(/[,\s]/, '')
-        .replace(/['\s]/g, '')
-    }
-  } else if (
-    selectedLang === 'fr-fr' ||
-    selectedLang === 'fr-be' ||
-    selectedLang === 'fr-lu' ||
-    selectedLang === 'sv-se' ||
-    selectedLang === 'pt-pt' ||
-    selectedLang === 'fr'
-  ) {
-    // replace space with blank, and commas with dot: 1 234,56 --> 1234.56
-    if (allowNegative) {
-      newVal = newVal.replace(/[^\d-.,']/g, '').replace(/[,\s]/g, '.')
-    } else {
-      newVal = newVal.replace(/[^\d.,']/g, '').replace(/[,\s]/g, '.')
-    }
-  } else {
-    // en-US as default: 1,234.56 --> 1234.56
-    if (allowNegative) {
-      newVal = newVal.replace(/[^\d-.,']/g, '').replace(/[,\s]/g, '')
-    } else {
-      newVal = newVal.replace(/[^\d.,']/g, '').replace(/[,\s]/g, '')
-    }
-  }
-  newVal = parseFloat(newVal)
-  if (numberPrecision !== false) {
-    newVal = newVal.toFixed(numberPrecision)
-  }
-  return parseFloat(newVal)
-}
-
-export const numberToString = ({ value, numberPrecision, minDecimals }) => {
-  const minimumRounding = minDecimals ? minDecimals : 0
-  value = parseFloat(value)
-  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,
-  })
-}
+import { langForLocaleString } from './translateLang'
+
+export const stringToNumber = ({
+  value = '',
+  numberPrecision = false,
+  allowNegative = false,
+}) => {
+  // This is for saving. It converts our input string to a readable number
+  let newVal = value.toString()
+  const selectedLang = localStorage.getItem('lang')
+  // The first replace will replace not allowed characters with a blank
+  if (
+    selectedLang === 'de-DE' ||
+    selectedLang === 'de-de' ||
+    selectedLang === 'no-no' ||
+    selectedLang === 'nb-no' ||
+    selectedLang === 'da-dk' ||
+    selectedLang === 'de-lu' ||
+    selectedLang === 'de-be' ||
+    selectedLang === 'es-es' ||
+    selectedLang === 'ca-es' ||
+    selectedLang === 'de' ||
+    selectedLang === 'de-at' ||
+    selectedLang === 'it' ||
+    selectedLang === 'it-it' ||
+    selectedLang === 'nl-nl' ||
+    selectedLang === 'nl-be' ||
+    selectedLang === 'de-at'
+  ) {
+    // replace dots with blank, and commas with a dot: 1.234,56 --> 1234.56
+    if (allowNegative) {
+      newVal = newVal
+        .replace(/[^\d-.,']/g, '')
+        .replace(/[.\s]/g, '')
+        .replace(/[,\s]/, '.')
+    } else {
+      newVal = newVal
+        .replace(/[^\d.,']/g, '')
+        .replace(/[.\s]/g, '')
+        .replace(/[,\s]/, '.')
+    }
+  } else if (selectedLang === 'en-us' || selectedLang === 'en-gb') {
+    // replace commas with blank: 1,234.56 --> 1234.56
+    if (allowNegative) {
+      newVal = newVal.replace(/[^\d-.,']/g, '').replace(/[,\s]/g, '')
+    } else {
+      newVal = newVal.replace(/[^\d.,']/g, '').replace(/[,\s]/g, '')
+    }
+  } else if (
+    selectedLang === 'de-ch' ||
+    selectedLang === 'fr-ch' ||
+    selectedLang === 'it-ch'
+  ) {
+    // replace ' with blank: 1'234.56 --> 1234.56
+    if (allowNegative) {
+      newVal = newVal
+        .replace(/[^\d-.,']/g, '')
+        .replace(/[,\s]/, '')
+        .replace(/['\s]/g, '')
+    } else {
+      newVal = newVal
+        .replace(/[^\d.,']/g, '')
+        .replace(/[,\s]/, '')
+        .replace(/['\s]/g, '')
+    }
+  } else if (
+    selectedLang === 'fr-fr' ||
+    selectedLang === 'fr-be' ||
+    selectedLang === 'fr-lu' ||
+    selectedLang === 'sv-se' ||
+    selectedLang === 'pt-pt' ||
+    selectedLang === 'fr'
+  ) {
+    // replace space with blank, and commas with dot: 1 234,56 --> 1234.56
+    if (allowNegative) {
+      newVal = newVal.replace(/[^\d-.,']/g, '').replace(/[,\s]/g, '.')
+    } else {
+      newVal = newVal.replace(/[^\d.,']/g, '').replace(/[,\s]/g, '.')
+    }
+  } else {
+    // en-US as default: 1,234.56 --> 1234.56
+    if (allowNegative) {
+      newVal = newVal.replace(/[^\d-.,']/g, '').replace(/[,\s]/g, '')
+    } else {
+      newVal = newVal.replace(/[^\d.,']/g, '').replace(/[,\s]/g, '')
+    }
+  }
+  newVal = parseFloat(newVal)
+  if (numberPrecision !== false) {
+    newVal = newVal.toFixed(numberPrecision)
+  }
+  return parseFloat(newVal)
+}
+
+export const numberToString = ({ value, numberPrecision, minDecimals }) => {
+  const minimumRounding = minDecimals ? minDecimals : 0
+  value = parseFloat(value)
+  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,
+  })
+}