@eturnity/eturnity_reusable_components 8.19.8-EPDM-12618.6 → 8.19.8-EPDM-13618.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,106 +1,106 @@
-import VideoThumbnail from './index.vue'
-import theme from '@/assets/theme'
-
-export default {
-  title: 'VideoThumbnail',
-  component: VideoThumbnail,
-  tags: ['autodocs'],
-  argTypes: {
-    src: {
-      control: 'text',
-      description: 'URL of the thumbnail image',
-    },
-    fit: {
-      control: 'select',
-      options: ['cover', 'contain', 'fill', 'none', 'scale-down'],
-      description: 'How the image should fit within its container',
-    },
-    width: {
-      control: 'text',
-      description: 'Width of the thumbnail (e.g., "300px")',
-    },
-    height: {
-      control: 'text',
-      description: 'Height of the thumbnail (e.g., "200px")',
-    },
-    playIconSize: {
-      control: 'text',
-      description: 'Size of the play icon (e.g., "50px")',
-    },
-    playIconColor: {
-      control: 'color',
-      description: 'Color of the play icon',
-    },
-  },
-}
-
-const Template = (args) => ({
-  components: { VideoThumbnail },
-  setup() {
-    return { args }
-  },
-  template: '<VideoThumbnail v-bind="args" />',
-  provide: {
-    theme,
-  },
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  src: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=400&h=300&fit=crop',
-  fit: 'cover',
-  width: '300px',
-  height: '200px',
-  playIconSize: '50px',
-  playIconColor: 'blue',
-}
-
-export const Small = Template.bind({})
-Small.args = {
-  src: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=200&h=150&fit=crop',
-  fit: 'cover',
-  width: '200px',
-  height: '150px',
-  playIconSize: '30px',
-  playIconColor: 'blue',
-}
-
-export const Large = Template.bind({})
-Large.args = {
-  src: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=800&h=600&fit=crop',
-  fit: 'cover',
-  width: '600px',
-  height: '400px',
-  playIconSize: '80px',
-  playIconColor: 'blue',
-}
-
-export const CustomFit = Template.bind({})
-CustomFit.args = {
-  src: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=400&h=300&fit=crop',
-  fit: 'contain',
-  width: '300px',
-  height: '200px',
-  playIconSize: '50px',
-  playIconColor: 'blue',
-}
-
-export const CustomIconColor = Template.bind({})
-CustomIconColor.args = {
-  src: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=400&h=300&fit=crop',
-  fit: 'cover',
-  width: '300px',
-  height: '200px',
-  playIconSize: '50px',
-  playIconColor: 'red',
-}
-
-export const Square = Template.bind({})
-Square.args = {
-  src: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=400&h=400&fit=crop',
-  fit: 'cover',
-  width: '300px',
-  height: '300px',
-  playIconSize: '50px',
-  playIconColor: 'blue',
-}
+import VideoThumbnail from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'VideoThumbnail',
+  component: VideoThumbnail,
+  tags: ['autodocs'],
+  argTypes: {
+    src: {
+      control: 'text',
+      description: 'URL of the thumbnail image',
+    },
+    fit: {
+      control: 'select',
+      options: ['cover', 'contain', 'fill', 'none', 'scale-down'],
+      description: 'How the image should fit within its container',
+    },
+    width: {
+      control: 'text',
+      description: 'Width of the thumbnail (e.g., "300px")',
+    },
+    height: {
+      control: 'text',
+      description: 'Height of the thumbnail (e.g., "200px")',
+    },
+    playIconSize: {
+      control: 'text',
+      description: 'Size of the play icon (e.g., "50px")',
+    },
+    playIconColor: {
+      control: 'color',
+      description: 'Color of the play icon',
+    },
+  },
+}
+
+const Template = (args) => ({
+  components: { VideoThumbnail },
+  setup() {
+    return { args }
+  },
+  template: '<VideoThumbnail v-bind="args" />',
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  src: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=400&h=300&fit=crop',
+  fit: 'cover',
+  width: '300px',
+  height: '200px',
+  playIconSize: '50px',
+  playIconColor: 'blue',
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  src: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=200&h=150&fit=crop',
+  fit: 'cover',
+  width: '200px',
+  height: '150px',
+  playIconSize: '30px',
+  playIconColor: 'blue',
+}
+
+export const Large = Template.bind({})
+Large.args = {
+  src: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=800&h=600&fit=crop',
+  fit: 'cover',
+  width: '600px',
+  height: '400px',
+  playIconSize: '80px',
+  playIconColor: 'blue',
+}
+
+export const CustomFit = Template.bind({})
+CustomFit.args = {
+  src: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=400&h=300&fit=crop',
+  fit: 'contain',
+  width: '300px',
+  height: '200px',
+  playIconSize: '50px',
+  playIconColor: 'blue',
+}
+
+export const CustomIconColor = Template.bind({})
+CustomIconColor.args = {
+  src: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=400&h=300&fit=crop',
+  fit: 'cover',
+  width: '300px',
+  height: '200px',
+  playIconSize: '50px',
+  playIconColor: 'red',
+}
+
+export const Square = Template.bind({})
+Square.args = {
+  src: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=400&h=400&fit=crop',
+  fit: 'cover',
+  width: '300px',
+  height: '300px',
+  playIconSize: '50px',
+  playIconColor: 'blue',
+}

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/dateTimeFormatting.js

@@ -1,51 +1,51 @@
-// functions for standard date and time formatting
-
-// e.g. 13.12.2024
-export const toLocaleDate = ({
-  locale = localStorage.getItem('lang'),
-  value,
-}) => {
-  const localeLC = locale.toLowerCase()
-  const options = {
-    year: 'numeric',
-    month: 'numeric',
-    day: 'numeric',
-  }
-
-  return new Intl.DateTimeFormat(localeLC, options).format(Date.parse(value))
-}
-
-// e.g. 31 December 2024
-export const toLocaleDateLong = ({
-  locale = localStorage.getItem('lang'),
-  value,
-}) => {
-  const localeLC = locale.toLowerCase()
-  const options = {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  }
-
-  return new Intl.DateTimeFormat(localeLC, options).format(Date.parse(value))
-}
-
-// e.g. 08:45
-export const toLocaleTime = ({
-  locale = localStorage.getItem('lang'),
-  value,
-}) => {
-  const nonDefaultFormatting = {
-    'es-es': { hour: '2-digit' },
-    'cs-es': { hour: '2-digit' },
-  }
-
-  const localeLC = locale.toLowerCase()
-  const options = {
-    hour: 'numeric',
-    minute: 'numeric',
-    ...nonDefaultFormatting[localeLC],
-  }
-
-  return new Intl.DateTimeFormat(localeLC, options).format(Date.parse(value))
-}
+// functions for standard date and time formatting
+
+// e.g. 13.12.2024
+export const toLocaleDate = ({
+  locale = localStorage.getItem('lang'),
+  value,
+}) => {
+  const localeLC = locale.toLowerCase()
+  const options = {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+  }
+
+  return new Intl.DateTimeFormat(localeLC, options).format(Date.parse(value))
+}
+
+// e.g. 31 December 2024
+export const toLocaleDateLong = ({
+  locale = localStorage.getItem('lang'),
+  value,
+}) => {
+  const localeLC = locale.toLowerCase()
+  const options = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }
+
+  return new Intl.DateTimeFormat(localeLC, options).format(Date.parse(value))
+}
+
+// e.g. 08:45
+export const toLocaleTime = ({
+  locale = localStorage.getItem('lang'),
+  value,
+}) => {
+  const nonDefaultFormatting = {
+    'es-es': { hour: '2-digit' },
+    'cs-es': { hour: '2-digit' },
+  }
+
+  const localeLC = locale.toLowerCase()
+  const options = {
+    hour: 'numeric',
+    minute: 'numeric',
+    ...nonDefaultFormatting[localeLC],
+  }
+
+  return new Intl.DateTimeFormat(localeLC, options).format(Date.parse(value))
+}

package/src/helpers/isObjectEqual.js

@@ -1,22 +1,22 @@
-import { toRaw } from 'vue'
-
-export default function isObjectEqual(obj1, obj2) {
-  obj1 = toRaw(obj1)
-  obj2 = toRaw(obj2)
-  if (obj1 === obj2) return true
-  if (obj1 === null || obj2 === null) return false
-  if (typeof obj1 !== 'object' || typeof obj2 !== 'object') return false
-
-  const isArray1 = Array.isArray(obj1)
-  const isArray2 = Array.isArray(obj2)
-  if (isArray1 !== isArray2) return false
-
-  const keys1 = Object.keys(obj1)
-  if (keys1.length !== Object.keys(obj2).length) return false
-
-  return keys1.every(
-    (key) =>
-      Object.prototype.hasOwnProperty.call(obj2, key) &&
-      isObjectEqual(obj1[key], obj2[key])
-  )
-}
+import { toRaw } from 'vue'
+
+export default function isObjectEqual(obj1, obj2) {
+  obj1 = toRaw(obj1)
+  obj2 = toRaw(obj2)
+  if (obj1 === obj2) return true
+  if (obj1 === null || obj2 === null) return false
+  if (typeof obj1 !== 'object' || typeof obj2 !== 'object') return false
+
+  const isArray1 = Array.isArray(obj1)
+  const isArray2 = Array.isArray(obj2)
+  if (isArray1 !== isArray2) return false
+
+  const keys1 = Object.keys(obj1)
+  if (keys1.length !== Object.keys(obj2).length) return false
+
+  return keys1.every(
+    (key) =>
+      Object.prototype.hasOwnProperty.call(obj2, key) &&
+      isObjectEqual(obj1[key], obj2[key])
+  )
+}