@eturnity/eturnity_reusable_components 7.8.0 → 7.8.1-EPDM-8441.1

package/src/components/threeDots/index.vue

@@ -1,384 +1,389 @@
-<template>
-  <page-container @click="toggleButton()" ref="pageContainer" :activated="isOpen">
-    <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">
-        <loading-container v-if="isLoading">
-          <spinner />
-        </loading-container>
-        <children-container
-          class="child"
-          :isOpen="hoverItem !== null"
-          v-if="hoverItem !== null && !isLoading"
-        >
-          <option-child
-            v-for="child in childOpen"
-            :key="child.value"
-            @click.stop="
-            onSelect({
-              item: child,
-              hasChildren: hasChildren(child)
-            })
-          "
-            @keyup.enter.stop="
-            onSelect({
-              item: child,
-              hasChildren: hasChildren(child)
-            })
-          "
-          >
-            {{ child.name }}
-          </option-child>
-        </children-container>
-        <options-container v-if="!isLoading">
-          <option-item
-            v-for="(item, index) in options"
-            :key="item.value"
-            tabindex="0"
-            @click.stop="onSelect({ item: item, hasChildren: hasChildren(item) })"
-            @keyup.enter="
-            onSelect({ item: item, hasChildren: hasChildren(item) })
-          "
-            @mouseover="onItemHover({ index, item })"
-            :isDisabled="item.disabled"
-          >
-            <arrow-left
-              :hasChildren="hasChildren(item)"
-              v-if="hasChildren(item)"
-            />
-            <span>
-            {{ item.name }}
-          </span>
-          </option-item>
-        </options-container>
-      </template>
-    </dropdown-container>
-  </page-container>
-</template>
-
-<script>
-// import ThreeDots from "@eturnity/eturnity_reusable_components/src/components/threeDots"
-// To use:
-// <three-dots
-//   :options="listOptions"
-//   @on-select="onSelect($event)"
-//   :isLoading="true"
-// />
-// 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 'vue-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 : ''};
-
-  &: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;
-
-  div {
-    // This is the dot color
-    background-color: #263238;
-  }
-`
-
-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 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 OptionsContainer = styled.div`
-  border: 1px solid ${(props) => props.theme.colors.grey3};
-  display: grid;
-  grid-template-columns: 1fr;
-  min-width: 220px;
-  max-width: 220px;
-  width: max-content;
-  border-radius: 4px;
-  background-color: #fff;
-  max-height: 220px;
-  overflow: auto;
-  height: max-content;
-  white-space: normal;
-`
-
-const optionAttrs = { isDisabled: Boolean }
-const OptionItem = styled('div', optionAttrs)`
-  padding: 12px;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-  font-size: 13px;
-  position: relative;
-
-  &:hover {
-    background-color: #ebeef4;
-  }
-
-  &:focus-visible {
-    outline: none;
-    background-color: #ebeef4;
-  }
-`
-const OptionChild = styled.div`
-  padding: 12px;
-  cursor: pointer;
-  font-size: 13px;
-  position: relative;
-
-  &:hover {
-    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 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: 'three-dots',
-  components: {
-    PageContainer,
-    ButtonContainer,
-    DotItem,
-    OptionsContainer,
-    OptionItem,
-    ChildrenContainer,
-    OptionChild,
-    ArrowLeft,
-    DropdownContainer,
-    Spinner,
-    LoadingContainer
-  },
-  props: {
-    options: {
-      required: true
-    },
-    isLoading: {
-      required: false,
-      default: false
-    }
-  },
-  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)
-      }
-    },
-    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
-      }
-      return null
-    },
-    determineElementQuarter(element, rect) {
-      const viewportWidth = window.innerWidth
-      const viewportHeight = window.innerHeight
-
-      const horizontalMidpoint = viewportWidth / 2
-      const verticalMidpoint = viewportHeight / 2
-
-      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) {
-        return
-      }
-      this.$emit('on-select', item)
-      this.isOpen = false
-    },
-    clickOutside(event) {
-      if (this.$el.contains(event.target) || !this.isOpen) {
-        return
-      }
-      this.toggleButton()
-    }
-  }
-}
-</script>
+<template>
+  <page-container @click="toggleButton()" ref="pageContainer" :activated="isOpen">
+    <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">
+        <loading-container v-if="isLoading">
+          <spinner />
+        </loading-container>
+        <children-container
+          class="child"
+          :isOpen="hoverItem !== null"
+          v-if="hoverItem !== null && !isLoading"
+        >
+          <option-child
+            v-for="child in childOpen"
+            :key="child.value"
+            @click.stop="
+              onSelect({
+                item: child,
+                hasChildren: hasChildren(child)
+              })
+            "
+            @keyup.enter.stop="
+              onSelect({
+                item: child,
+                hasChildren: hasChildren(child)
+              })
+            "
+          >
+            {{ child.name }}
+          </option-child>
+        </children-container>
+        <options-container v-if="!isLoading">
+          <option-item
+            v-for="(item, index) in options"
+            :key="item.value"
+            tabindex="0"
+            @click.stop="onSelect({ item: item, hasChildren: hasChildren(item) })"
+            @keyup.enter="
+              onSelect({ item: item, hasChildren: hasChildren(item) })
+            "
+            @mouseover="onItemHover({ index, item })"
+            :isDisabled="item.disabled"
+            :title="item.title"
+          >
+            <arrow-left
+              :hasChildren="hasChildren(item)"
+              v-if="hasChildren(item)"
+            />
+            <span>
+            {{ item.name }}
+          </span>
+          </option-item>
+        </options-container>
+      </template>
+    </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 styled from 'vue-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 : ''};
+
+  &: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;
+
+  div {
+    // This is the dot color
+    background-color: #263238;
+  }
+`
+
+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 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 OptionsContainer = styled.div`
+  border: 1px solid ${(props) => props.theme.colors.grey3};
+  display: grid;
+  grid-template-columns: 1fr;
+  min-width: 220px;
+  max-width: 220px;
+  width: max-content;
+  border-radius: 4px;
+  background-color: #fff;
+  max-height: 220px;
+  overflow: auto;
+  height: max-content;
+  white-space: normal;
+`
+
+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;
+  }
+
+  &:focus-visible {
+    outline: none;
+    background-color: #ebeef4;
+  }
+`
+const OptionChild = styled.div`
+  padding: 12px;
+  cursor: pointer;
+  font-size: 13px;
+  position: relative;
+
+  &:hover {
+    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 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: 'three-dots',
+  components: {
+    PageContainer,
+    ButtonContainer,
+    DotItem,
+    OptionsContainer,
+    OptionItem,
+    ChildrenContainer,
+    OptionChild,
+    ArrowLeft,
+    DropdownContainer,
+    Spinner,
+    LoadingContainer
+  },
+  props: {
+    options: {
+      required: true
+    },
+    isLoading: {
+      required: false,
+      default: false
+    }
+  },
+  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)
+      }
+    },
+    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
+      }
+      return null
+    },
+    determineElementQuarter(element, rect) {
+      const viewportWidth = window.innerWidth
+      const viewportHeight = window.innerHeight
+
+      const horizontalMidpoint = viewportWidth / 2
+      const verticalMidpoint = viewportHeight / 2
+
+      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()
+    }
+  }
+}
+</script>