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

package/src/components/threeDots/index.vue

@@ -1,29 +1,29 @@
 <template>
-  <page-container
-    @click="toggleButton()"
+  <PageContainer
     ref="pageContainer"
     :activated="isOpen"
+    @click="toggleButton()"
   >
-    <button-container ref="dropdownItem">
-      <dot-item />
-      <dot-item />
-      <dot-item />
-    </button-container>
-    <dropdown-container
-      @click.stop
-      :containerWidth="childOpen ? 440 : 240"
+    <ButtonContainer ref="dropdownItem">
+      <DotItem />
+      <DotItem />
+      <DotItem />
+    </ButtonContainer>
+    <DropdownContainer
       ref="dropdownContainer"
+      :container-width="childOpen ? 440 : 240"
+      @click.stop
     >
       <template v-if="isOpen">
-        <loading-container v-if="isLoading">
-          <spinner />
-        </loading-container>
-        <children-container
-          class="child"
-          :isOpen="hoverItem !== null"
+        <LoadingContainer v-if="isLoading">
+          <Spinner />
+        </LoadingContainer>
+        <ChildrenContainer
           v-if="hoverItem !== null && !isLoading"
+          class="child"
+          :is-open="hoverItem !== null"
         >
-          <option-child
+          <OptionChild
             v-for="child in childOpen"
             :key="child.value"
             @click.stop="
@@ -40,14 +40,19 @@
             "
           >
             {{ child.name }}
-          </option-child>
-        </children-container>
-        <options-container v-if="!isLoading" :textWrap="textWrap">
-          <option-item
+          </OptionChild>
+        </ChildrenContainer>
+        <OptionsContainer
+          v-if="!isLoading"
+          :text-wrap="textWrap"
+        >
+          <OptionItem
             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) })
             "
@@ -55,21 +60,19 @@
               onSelect({ item: item, hasChildren: hasChildren(item) })
             "
             @mouseover="onItemHover({ index, item })"
-            :isDisabled="item.disabled"
-            :title="item.title"
           >
-            <arrow-left
-              :hasChildren="hasChildren(item)"
+            <ArrowLeft
               v-if="hasChildren(item)"
+              :has-children="hasChildren(item)"
             />
             <span>
               {{ item.name }}
             </span>
-          </option-item>
-        </options-container>
+          </OptionItem>
+        </OptionsContainer>
       </template>
-    </dropdown-container>
-  </page-container>
+    </DropdownContainer>
+  </PageContainer>
 </template>
 
 <script>
@@ -129,13 +132,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;
@@ -143,14 +146,14 @@ const PageContainer = styled('div', PageContainerAttrs)`
   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;
@@ -164,24 +167,24 @@ const ButtonContainer = styled.div`
   }
 `
 
-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;
@@ -192,8 +195,8 @@ const LoadingContainer = styled.div`
   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;
@@ -206,8 +209,8 @@ const OptionsContainer = styled('div', OptionsContainerAttrs)`
   ${(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;
@@ -224,7 +227,7 @@ const OptionItem = styled('div', optionAttrs)`
     background-color: #ebeef4;
   }
 `
-const OptionChild = styled.div`
+  const OptionChild = styled.div`
   padding: 12px;
   cursor: pointer;
   font-size: 13px;
@@ -240,8 +243,8 @@ const OptionChild = styled.div`
   }
 `
 
-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;
@@ -252,10 +255,10 @@ const ArrowLeft = styled('span', arrowAttrs)`
   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;
@@ -273,135 +276,135 @@ const ChildrenContainer = styled('div', childAttrs)`
   right: 100%;
 `
 
-export default {
-  name: 'three-dots',
-  components: {
-    PageContainer,
-    ButtonContainer,
-    DotItem,
-    OptionsContainer,
-    OptionItem,
-    ChildrenContainer,
-    OptionChild,
-    ArrowLeft,
-    DropdownContainer,
-    Spinner,
-    LoadingContainer
-  },
-  props: {
-    options: {
-      required: true
+  export default {
+    name: 'ThreeDots',
+    components: {
+      PageContainer,
+      ButtonContainer,
+      DotItem,
+      OptionsContainer,
+      OptionItem,
+      ChildrenContainer,
+      OptionChild,
+      ArrowLeft,
+      DropdownContainer,
+      Spinner,
+      LoadingContainer
     },
-    isLoading: {
-      required: false,
-      default: false
-    },
-    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)
+    props: {
+      options: {
+        required: true
+      },
+      isLoading: {
+        required: false,
+        default: false
+      },
+      textWrap: {
+        required: false,
+        default: true
       }
     },
-    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%)'
+    data() {
+      return {
+        isOpen: false,
+        hoverItem: null,
+        childOpen: null,
+        containerWidth: 16
       }
     },
-    findRelativeParent(element) {
-      while (element.parentElement) {
-        if (
-          window.getComputedStyle(element.parentElement).position ===
+    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()
+
+        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
+            window.getComputedStyle(element.parentElement).position === 'absolute'
+          ) {
+            return element.parentElement
+          }
+          element = element.parentElement
         }
-        element = element.parentElement
-      }
-      return null
-    },
-    determineElementQuarter(element, rect) {
-      const viewportWidth = window.innerWidth
-      const viewportHeight = window.innerHeight
+        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
+        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()
       }
-      this.toggleButton()
     }
   }
-}
 </script>

package/src/components/videoThumbnail/index.vue

@@ -1,10 +1,18 @@
 <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>
@@ -17,11 +25,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};
@@ -32,7 +40,7 @@ const Wrapper = styled('div', wrapperAttrs)`
     height: ${(props) => props.height};
   }
 `
-const iconWrapper = styled('div')`
+  const IconWrapper = styled('div')`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -43,61 +51,61 @@ const iconWrapper = styled('div')`
   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)
     },
-    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
+    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"
 }
 
 

package/.prettierrc

@@ -1,7 +0,0 @@
-{
-    "semi": false,
-    "singleQuote": true,
-    "useTabs": false,
-    "trailingComma": "none",
-    "printWidth": 80
-  }

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>