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

package/src/components/threeDots/index.vue

@@ -1,55 +1,53 @@
 <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="
               onSelect({
                 item: child,
-                hasChildren: hasChildren(child),
+                hasChildren: hasChildren(child)
               })
             "
             @keyup.enter.stop="
               onSelect({
                 item: child,
-                hasChildren: hasChildren(child),
+                hasChildren: hasChildren(child)
               })
             "
           >
             {{ 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) })
             "
@@ -57,357 +55,353 @@
               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>
-  // import ThreeDots from "@eturnity/eturnity_reusable_components/src/components/threeDots"
-  // To use:
-  // <three-dots
-  //   :isLoading="true"
-  //   :options="listOptions"
-  //   @on-click="onClick($event)"
-  //   @on-select="onSelect($event)"
-  // />
-  // options to pass:
-  // listOptions: [
-  //         {
-  //           name: "Option 1",
-  //           value: "option_1",
-  //           children: [
-  //             {
-  //               name: "Option 1 Child",
-  //               value: "option_1_child",
-  //             },
-  //             {
-  //               name: "Option 2 Child",
-  //               value: "option_2_child",
-  //             },
-  //             {
-  //               name: "Option 3 Child",
-  //               value: "option_3_child",
-  //             },
-  //           ],
-  //         },
-  //         {
-  //           name: "Option 2",
-  //           value: "option_2",
-  //         },
-  //         {
-  //           name: "Option 3",
-  //           value: "option_3",
-  //           children: [
-  //             {
-  //               name: "Option 3 Child",
-  //               value: "option_3_child",
-  //             },
-  //             {
-  //               name: "Option 4 Child",
-  //               value: "option_4_child",
-  //             },
-  //             {
-  //               name: "Option 5 Child",
-  //               value: "option_5_child",
-  //             },
-  //           ],
-  //         },
-  //         {
-  //           name: "Option 4",
-  //           value: "option_4",
-  //         },
-  //       ],
+// import ThreeDots from "@eturnity/eturnity_reusable_components/src/components/threeDots"
+// To use:
+// <three-dots
+//   :isLoading="true"
+//   :options="listOptions"
+//   @on-click="onClick($event)"
+//   @on-select="onSelect($event)"
+// />
+// options to pass:
+// listOptions: [
+//         {
+//           name: "Option 1",
+//           value: "option_1",
+//           children: [
+//             {
+//               name: "Option 1 Child",
+//               value: "option_1_child",
+//             },
+//             {
+//               name: "Option 2 Child",
+//               value: "option_2_child",
+//             },
+//             {
+//               name: "Option 3 Child",
+//               value: "option_3_child",
+//             },
+//           ],
+//         },
+//         {
+//           name: "Option 2",
+//           value: "option_2",
+//         },
+//         {
+//           name: "Option 3",
+//           value: "option_3",
+//           children: [
+//             {
+//               name: "Option 3 Child",
+//               value: "option_3_child",
+//             },
+//             {
+//               name: "Option 4 Child",
+//               value: "option_4_child",
+//             },
+//             {
+//               name: "Option 5 Child",
+//               value: "option_5_child",
+//             },
+//           ],
+//         },
+//         {
+//           name: "Option 4",
+//           value: "option_4",
+//         },
+//       ],
 
-  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)`
-    display: grid;
-    align-items: center;
-    justify-items: center;
-    width: 30px;
-    height: 30px;
-    border-radius: 4px;
-    background-color: ${(props) =>
-      props.activated ? props.theme.colors.grey5 : ''};
+const PageContainerAttrs = {
+  activated: Boolean
+}
+const PageContainer = styled('div', PageContainerAttrs)`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 4px;
+  background-color: ${(props) =>
+    props.activated ? props.theme.colors.grey5 : ''};
 
-    &:hover {
-      background-color: ${(props) => props.theme.colors.grey5};
-    }
-  `
+  &:hover {
+    background-color: ${(props) => props.theme.colors.grey5};
+  }
+`
 
-  const ButtonContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 5px;
-    cursor: pointer;
+const ButtonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  cursor: pointer;
 
-    div {
-      // This is the dot color
-      background-color: #263238;
-    }
-  `
+  div {
+    // This is the dot color
+    background-color: #263238;
+  }
+`
 
-  const DotItem = styled.div`
-    width: 4px;
-    height: 4px;
-    margin: 1px;
-    border-radius: 50%;
-  `
+const DotItem = styled.div`
+  width: 4px;
+  height: 4px;
+  margin: 1px;
+  border-radius: 50%;
+`
 
-  const dropdownAttrs = {
-    containerWidth: Number,
-  }
-  const DropdownContainer = styled('div', dropdownAttrs)`
-    z-index: 99;
-    position: absolute;
-    display: grid;
-    grid-template-columns: auto auto;
-  `
+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`
-    border: 1px solid ${(props) => props.theme.colors.grey3};
-    display: grid;
-    grid-template-columns: 1fr;
-    min-width: 100px;
-    height: 100px;
-    align-items: center;
-    justify-items: center;
-    background: #fff;
-  `
+const LoadingContainer = styled.div`
+  border: 1px solid ${(props) => props.theme.colors.grey3};
+  display: grid;
+  grid-template-columns: 1fr;
+  min-width: 100px;
+  height: 100px;
+  align-items: center;
+  justify-items: center;
+  background: #fff;
+`
 
-  const OptionsContainerAttrs = { textWrap: Boolean }
-  const OptionsContainer = styled('div', OptionsContainerAttrs)`
-    border: 1px solid ${(props) => props.theme.colors.grey3};
-    display: grid;
-    grid-template-columns: 1fr;
-    ${(props) => (props.textWrap ? 'width: 220px' : 'width: max-content')};
-    border-radius: 4px;
-    background-color: #fff;
-    max-height: 220px;
-    overflow: auto;
-    height: max-content;
-    ${(props) =>
-      props.textWrap ? 'white-space: normal' : 'white-space: nowrap'};
-  `
+const OptionsContainerAttrs = { textWrap: Boolean }
+const OptionsContainer = styled('div', OptionsContainerAttrs)`
+  border: 1px solid ${(props) => props.theme.colors.grey3};
+  display: grid;
+  grid-template-columns: 1fr;
+  ${(props) => props.textWrap ? 'width: 220px' : 'width: max-content' };
+  border-radius: 4px;
+  background-color: #fff;
+  max-height: 220px;
+  overflow: auto;
+  height: max-content;
+  ${(props) => props.textWrap ? 'white-space: normal' : 'white-space: nowrap'};
+`
 
-  const optionAttrs = { isDisabled: Boolean }
-  const OptionItem = styled('div', optionAttrs)`
-    padding: 12px;
-    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-    font-size: 13px;
-    position: relative;
-    ${(props) =>
-      props.isDisabled
-        ? `background-color: ${props.theme.colors.grey5}!important`
-        : ''};
-    ${(props) =>
-      props.isDisabled ? `color: ${props.theme.colors.grey2}` : ''};
+const optionAttrs = { isDisabled: Boolean }
+const OptionItem = styled('div', optionAttrs)`
+  padding: 12px;
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+  font-size: 13px;
+  position: relative;
+  ${(props) => (props.isDisabled ? `background-color: ${ props.theme.colors.grey5 }!important` : '')};
+  ${(props) => (props.isDisabled ? `color: ${ props.theme.colors.grey2 }` : '')};
 
-    &:hover {
-      background-color: #ebeef4;
-    }
+  &:hover {
+    background-color: #ebeef4;
+  }
 
-    &:focus-visible {
-      outline: none;
-      background-color: #ebeef4;
-    }
-  `
-  const OptionChild = styled.div`
-    padding: 12px;
-    cursor: pointer;
-    font-size: 13px;
-    position: relative;
+  &:focus-visible {
+    outline: none;
+    background-color: #ebeef4;
+  }
+`
+const OptionChild = styled.div`
+  padding: 12px;
+  cursor: pointer;
+  font-size: 13px;
+  position: relative;
 
-    &:hover {
-      background-color: #ebeef4;
-    }
+  &:hover {
+    background-color: #ebeef4;
+  }
 
-    &:focus-visible {
-      outline: none;
-      background-color: #ebeef4;
-    }
-  `
+  &:focus-visible {
+    outline: none;
+    background-color: #ebeef4;
+  }
+`
 
-  const arrowAttrs = { hasChildren: Boolean }
-  const ArrowLeft = styled('span', arrowAttrs)`
-    border: solid #9f9f9f;
-    border-width: 0 1.5px 1.5px 0;
-    display: inline-block;
-    padding: 3px;
-    margin-bottom: 1px;
-    transform: rotate(135deg);
-    margin-right: 3px;
-    visibility: ${(props) => (props.hasChildren ? 'visible' : 'hidden')};
-  `
+const arrowAttrs = { hasChildren: Boolean }
+const ArrowLeft = styled('span', arrowAttrs)`
+  border: solid #9f9f9f;
+  border-width: 0 1.5px 1.5px 0;
+  display: inline-block;
+  padding: 3px;
+  margin-bottom: 1px;
+  transform: rotate(135deg);
+  margin-right: 3px;
+  visibility: ${(props) => (props.hasChildren ? 'visible' : 'hidden')};
+`
 
-  const childAttrs = { isOpen: Boolean }
-  const ChildrenContainer = styled('div', childAttrs)`
-    border: ${(props) =>
-      props.isOpen ? '1px solid' + props.theme.colors.grey3 : 'none'};
-    display: grid;
-    grid-template-columns: 1fr;
-    min-width: 200px;
-    max-width: 200px;
-    white-space: normal;
-    width: max-content;
-    border-radius: 4px;
-    background-color: #fff;
-    margin-right: -1px;
-    height: max-content;
-    max-height: 200px;
-    overflow: auto;
-    position: absolute;
-    top: 0;
-    right: 100%;
-  `
+const childAttrs = { isOpen: Boolean }
+const ChildrenContainer = styled('div', childAttrs)`
+  border: ${(props) =>
+    props.isOpen ? '1px solid' + props.theme.colors.grey3 : 'none'};
+  display: grid;
+  grid-template-columns: 1fr;
+  min-width: 200px;
+  max-width: 200px;
+  white-space: normal;
+  width: max-content;
+  border-radius: 4px;
+  background-color: #fff;
+  margin-right: -1px;
+  height: max-content;
+  max-height: 200px;
+  overflow: auto;
+  position: absolute;
+  top: 0;
+  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
+    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()
 
-        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
-          }
-          element = element.parentElement
+      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
         }
-        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>