@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.0 → 7.24.3-EPDM-11143.1

package/src/components/threeDots/index.vue

@@ -1,29 +1,29 @@
 <template>
-  <PageContainer
+  <page-container
+    @click="toggleButton()"
     ref="pageContainer"
     :activated="isOpen"
-    @click="toggleButton()"
   >
-    <ButtonContainer ref="dropdownItem">
-      <DotItem />
-      <DotItem />
-      <DotItem />
-    </ButtonContainer>
-    <DropdownContainer
-      ref="dropdownContainer"
-      :container-width="childOpen ? 440 : 240"
+    <button-container ref="dropdownItem">
+      <dot-item />
+      <dot-item />
+      <dot-item />
+    </button-container>
+    <dropdown-container
       @click.stop
+      :containerWidth="childOpen ? 440 : 240"
+      ref="dropdownContainer"
     >
       <template v-if="isOpen">
-        <LoadingContainer v-if="isLoading">
-          <Spinner />
-        </LoadingContainer>
-        <ChildrenContainer
-          v-if="hoverItem !== null && !isLoading"
+        <loading-container v-if="isLoading">
+          <spinner />
+        </loading-container>
+        <children-container
           class="child"
-          :is-open="hoverItem !== null"
+          :isOpen="hoverItem !== null"
+          v-if="hoverItem !== null && !isLoading"
         >
-          <OptionChild
+          <option-child
             v-for="child in childOpen"
             :key="child.value"
             @click.stop="
@@ -40,19 +40,14 @@
             "
           >
             {{ child.name }}
-          </OptionChild>
-        </ChildrenContainer>
-        <OptionsContainer
-          v-if="!isLoading"
-          :text-wrap="textWrap"
-        >
-          <OptionItem
+          </option-child>
+        </children-container>
+        <options-container v-if="!isLoading" :textWrap="textWrap">
+          <option-item
             v-for="(item, index) in options"
             :key="item.value"
             :data-id="item.dataId"
-            :is-disabled="item.disabled"
             tabindex="0"
-            :title="item.title"
             @click.stop="
               onSelect({ item: item, hasChildren: hasChildren(item) })
             "
@@ -60,19 +55,21 @@
               onSelect({ item: item, hasChildren: hasChildren(item) })
             "
             @mouseover="onItemHover({ index, item })"
+            :isDisabled="item.disabled"
+            :title="item.title"
           >
-            <ArrowLeft
+            <arrow-left
+              :hasChildren="hasChildren(item)"
               v-if="hasChildren(item)"
-              :has-children="hasChildren(item)"
             />
             <span>
               {{ item.name }}
             </span>
-          </OptionItem>
-        </OptionsContainer>
+          </option-item>
+        </options-container>
       </template>
-    </DropdownContainer>
-  </PageContainer>
+    </dropdown-container>
+  </page-container>
 </template>
 
 <script>
@@ -132,13 +129,13 @@
 //         },
 //       ],
 
-  import styled from 'vue3-styled-components'
-  import Spinner from '../spinner'
+import styled from 'vue3-styled-components'
+import Spinner from '../spinner'
 
-  const PageContainerAttrs = {
-    activated: Boolean
-  }
-  const PageContainer = styled('div', PageContainerAttrs)`
+const PageContainerAttrs = {
+  activated: Boolean
+}
+const PageContainer = styled('div', PageContainerAttrs)`
   display: grid;
   align-items: center;
   justify-items: center;
@@ -146,14 +143,14 @@
   height: 30px;
   border-radius: 4px;
   background-color: ${(props) =>
-  props.activated ? props.theme.colors.grey5 : ''};
+    props.activated ? props.theme.colors.grey5 : ''};
 
   &:hover {
     background-color: ${(props) => props.theme.colors.grey5};
   }
 `
 
-  const ButtonContainer = styled.div`
+const ButtonContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -167,24 +164,24 @@
   }
 `
 
-  const DotItem = styled.div`
+const DotItem = styled.div`
   width: 4px;
   height: 4px;
   margin: 1px;
   border-radius: 50%;
 `
 
-  const dropdownAttrs = {
-    containerWidth: Number
-  }
-  const DropdownContainer = styled('div', dropdownAttrs)`
+const dropdownAttrs = {
+  containerWidth: Number
+}
+const DropdownContainer = styled('div', dropdownAttrs)`
   z-index: 99;
   position: absolute;
   display: grid;
   grid-template-columns: auto auto;
 `
 
-  const LoadingContainer = styled.div`
+const LoadingContainer = styled.div`
   border: 1px solid ${(props) => props.theme.colors.grey3};
   display: grid;
   grid-template-columns: 1fr;
@@ -195,8 +192,8 @@
   background: #fff;
 `
 
-  const OptionsContainerAttrs = { textWrap: Boolean }
-  const OptionsContainer = styled('div', OptionsContainerAttrs)`
+const OptionsContainerAttrs = { textWrap: Boolean }
+const OptionsContainer = styled('div', OptionsContainerAttrs)`
   border: 1px solid ${(props) => props.theme.colors.grey3};
   display: grid;
   grid-template-columns: 1fr;
@@ -209,8 +206,8 @@
   ${(props) => props.textWrap ? 'white-space: normal' : 'white-space: nowrap'};
 `
 
-  const optionAttrs = { isDisabled: Boolean }
-  const OptionItem = styled('div', optionAttrs)`
+const optionAttrs = { isDisabled: Boolean }
+const OptionItem = styled('div', optionAttrs)`
   padding: 12px;
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   font-size: 13px;
@@ -227,7 +224,7 @@
     background-color: #ebeef4;
   }
 `
-  const OptionChild = styled.div`
+const OptionChild = styled.div`
   padding: 12px;
   cursor: pointer;
   font-size: 13px;
@@ -243,8 +240,8 @@
   }
 `
 
-  const arrowAttrs = { hasChildren: Boolean }
-  const ArrowLeft = styled('span', arrowAttrs)`
+const arrowAttrs = { hasChildren: Boolean }
+const ArrowLeft = styled('span', arrowAttrs)`
   border: solid #9f9f9f;
   border-width: 0 1.5px 1.5px 0;
   display: inline-block;
@@ -255,10 +252,10 @@
   visibility: ${(props) => (props.hasChildren ? 'visible' : 'hidden')};
 `
 
-  const childAttrs = { isOpen: Boolean }
-  const ChildrenContainer = styled('div', childAttrs)`
+const childAttrs = { isOpen: Boolean }
+const ChildrenContainer = styled('div', childAttrs)`
   border: ${(props) =>
-  props.isOpen ? '1px solid' + props.theme.colors.grey3 : 'none'};
+    props.isOpen ? '1px solid' + props.theme.colors.grey3 : 'none'};
   display: grid;
   grid-template-columns: 1fr;
   min-width: 200px;
@@ -276,135 +273,135 @@
   right: 100%;
 `
 
-  export default {
-    name: 'ThreeDots',
-    components: {
-      PageContainer,
-      ButtonContainer,
-      DotItem,
-      OptionsContainer,
-      OptionItem,
-      ChildrenContainer,
-      OptionChild,
-      ArrowLeft,
-      DropdownContainer,
-      Spinner,
-      LoadingContainer
+export default {
+  name: 'three-dots',
+  components: {
+    PageContainer,
+    ButtonContainer,
+    DotItem,
+    OptionsContainer,
+    OptionItem,
+    ChildrenContainer,
+    OptionChild,
+    ArrowLeft,
+    DropdownContainer,
+    Spinner,
+    LoadingContainer
+  },
+  props: {
+    options: {
+      required: true
     },
-    props: {
-      options: {
-        required: true
-      },
-      isLoading: {
-        required: false,
-        default: false
-      },
-      textWrap: {
-        required: false,
-        default: true
-      }
+    isLoading: {
+      required: false,
+      default: false
     },
-    data() {
-      return {
-        isOpen: false,
-        hoverItem: null,
-        childOpen: null,
-        containerWidth: 16
+    textWrap: {
+      required: false,
+      default: true
+    }
+  },
+  data() {
+    return {
+      isOpen: false,
+      hoverItem: null,
+      childOpen: null,
+      containerWidth: 16
+    }
+  },
+  methods: {
+    toggleButton() {
+      this.isOpen = !this.isOpen
+
+      if (this.isOpen) {
+        this.setContextMenuPosition()
+        window.addEventListener('resize', this.toggleButton)
+        document.addEventListener('click', this.clickOutside)
+      } else {
+        window.removeEventListener('resize', this.toggleButton)
+        document.removeEventListener('click', this.clickOutside)
       }
     },
-    methods: {
-      toggleButton() {
-        this.isOpen = !this.isOpen
-
-        if (this.isOpen) {
-          this.setContextMenuPosition()
-          window.addEventListener('resize', this.toggleButton)
-          document.addEventListener('click', this.clickOutside)
-        } else {
-          window.removeEventListener('resize', this.toggleButton)
-          document.removeEventListener('click', this.clickOutside)
-        }
-      },
-      setContextMenuPosition() {
-        const contextMenu = this.$refs.dropdownContainer.$el
-        const button = this.$refs.pageContainer.$el
-        const rectButton = button.getBoundingClientRect()
-        const relativeParent = this.findRelativeParent(contextMenu)
-        const rectRelativeParent = relativeParent.getBoundingClientRect()
+    setContextMenuPosition() {
+      const contextMenu = this.$refs.dropdownContainer.$el
+      const button = this.$refs.pageContainer.$el
+      const rectButton = button.getBoundingClientRect()
+      const relativeParent = this.findRelativeParent(contextMenu)
+      const rectRelativeParent = relativeParent.getBoundingClientRect()
 
-        const positionArray = this.determineElementQuarter(button, rectButton)
-        contextMenu.style.transform = ''
-        if (positionArray.includes('left')) {
-          contextMenu.style.left =
-            rectButton.right - rectRelativeParent.left + 5 + 'px'
-        } else {
-          contextMenu.style.left =
-            rectButton.left - rectRelativeParent.left - 5 + 'px'
-          contextMenu.style.transform = 'translateX(-100%)'
-        }
-        if (positionArray.includes('top')) {
-          contextMenu.style.top = rectButton.top - rectRelativeParent.top + 'px'
-        } else {
-          contextMenu.style.top =
-            rectButton.bottom - rectRelativeParent.top + 'px'
-          contextMenu.style.transform += ' translateY(-100%)'
-        }
-      },
-      findRelativeParent(element) {
-        while (element.parentElement) {
-          if (
-            window.getComputedStyle(element.parentElement).position ===
+      const positionArray = this.determineElementQuarter(button, rectButton)
+      contextMenu.style.transform = ''
+      if (positionArray.includes('left')) {
+        contextMenu.style.left =
+          rectButton.right - rectRelativeParent.left + 5 + 'px'
+      } else {
+        contextMenu.style.left =
+          rectButton.left - rectRelativeParent.left - 5 + 'px'
+        contextMenu.style.transform = 'translateX(-100%)'
+      }
+      if (positionArray.includes('top')) {
+        contextMenu.style.top = rectButton.top - rectRelativeParent.top + 'px'
+      } else {
+        contextMenu.style.top =
+          rectButton.bottom - rectRelativeParent.top + 'px'
+        contextMenu.style.transform += ' translateY(-100%)'
+      }
+    },
+    findRelativeParent(element) {
+      while (element.parentElement) {
+        if (
+          window.getComputedStyle(element.parentElement).position ===
             'relative' ||
-            window.getComputedStyle(element.parentElement).position === 'absolute'
-          ) {
-            return element.parentElement
-          }
-          element = element.parentElement
+          window.getComputedStyle(element.parentElement).position === 'absolute'
+        ) {
+          return element.parentElement
         }
-        return null
-      },
-      determineElementQuarter(element, rect) {
-        const viewportWidth = window.innerWidth
-        const viewportHeight = window.innerHeight
+        element = element.parentElement
+      }
+      return null
+    },
+    determineElementQuarter(element, rect) {
+      const viewportWidth = window.innerWidth
+      const viewportHeight = window.innerHeight
 
-        const horizontalMidpoint = viewportWidth / 2
-        const verticalMidpoint = viewportHeight / 2
+      const horizontalMidpoint = viewportWidth / 2
+      const verticalMidpoint = viewportHeight / 2
 
-        const isLeft = rect.left + rect.width / 2 < horizontalMidpoint
-        const isTop = rect.top + rect.height / 2 < verticalMidpoint
+      const isLeft = rect.left + rect.width / 2 < horizontalMidpoint
+      const isTop = rect.top + rect.height / 2 < verticalMidpoint
 
-        if (isLeft && isTop) {
-          return ['left', 'top']
-        } else if (isLeft && !isTop) {
-          return ['left', 'bottom']
-        } else if (!isLeft && isTop) {
-          return ['right', 'top']
-        } else {
-          return ['right', 'bottom']
-        }
-      },
-      hasChildren(item) {
-        return !!item.children && !!item.children.length
-      },
-      onItemHover({ index, item }) {
-        this.hoverItem = item.children && item.children.length ? index : null
-        this.childOpen =
-          item.children && item.children.length ? item.children : null
-      },
-      onSelect({ item, hasChildren }) {
-        if (hasChildren || item.disabled) {
-          this.$emit('on-click', item)
-          return
-        }
-        this.$emit('on-select', item)
-        this.isOpen = false
-      },
-      clickOutside(event) {
-        if (this.$el.contains(event.target) || !this.isOpen) {
-          return
-        }
-        this.toggleButton()
+      if (isLeft && isTop) {
+        return ['left', 'top']
+      } else if (isLeft && !isTop) {
+        return ['left', 'bottom']
+      } else if (!isLeft && isTop) {
+        return ['right', 'top']
+      } else {
+        return ['right', 'bottom']
+      }
+    },
+    hasChildren(item) {
+      return !!item.children && !!item.children.length
+    },
+    onItemHover({ index, item }) {
+      this.hoverItem = item.children && item.children.length ? index : null
+      this.childOpen =
+        item.children && item.children.length ? item.children : null
+    },
+    onSelect({ item, hasChildren }) {
+      if (hasChildren || item.disabled) {
+        this.$emit('on-click', item)
+        return
+      }
+      this.$emit('on-select', item)
+      this.isOpen = false
+    },
+    clickOutside(event) {
+      if (this.$el.contains(event.target) || !this.isOpen) {
+        return
       }
+      this.toggleButton()
     }
   }
+}
 </script>

package/src/components/videoThumbnail/index.vue

@@ -1,18 +1,10 @@
 <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>
@@ -25,11 +17,11 @@
 //   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)`
+const wrapperAttrs = { width: String, height: String, fit: String }
+const Wrapper = styled('div', wrapperAttrs)`
   display: inline-block;
   position: relative;
   width: ${(props) => props.width};
@@ -40,7 +32,7 @@
     height: ${(props) => props.height};
   }
 `
-  const IconWrapper = styled('div')`
+const iconWrapper = styled('div')`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -51,61 +43,61 @@
   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'
-      }
+    fit: {
+      required: false,
+      default: 'cover'
     },
-    data() {
-      return {
-        isOpenByClick: false
-      }
+    width: {
+      required: false,
+      default: '300px'
     },
-    mounted() {
-      document.addEventListener('click', this.clickOutside)
+    height: {
+      required: false,
+      default: '200px'
     },
-    beforeDestroy() {
-      document.removeEventListener('click', this.clickOutside)
+    playIconSize: {
+      required: false,
+      default: '50px'
     },
-    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

@@ -24,12 +24,12 @@ const Template = (args, { argTypes }) => ({
 
 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"
 }