@eturnity/eturnity_reusable_components 7.30.3 → 7.32.0

package/src/components/threeDots/index.vue

@@ -1,53 +1,55 @@
 <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="
               onSelect({
                 item: child,
-                hasChildren: hasChildren(child)
+                hasChildren: hasChildren(child),
               })
             "
             @keyup.enter.stop="
               onSelect({
                 item: child,
-                hasChildren: hasChildren(child)
+                hasChildren: hasChildren(child),
               })
             "
           >
             {{ 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,353 +57,357 @@
               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>
-// 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 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",
+  //         },
+  //       ],
 
-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 : ''};
+  import styled from 'vue3-styled-components'
+  import Spinner from '../spinner'
 
-  &:hover {
-    background-color: ${(props) => 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 : ''};
 
-const ButtonContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 5px;
-  cursor: pointer;
+    &:hover {
+      background-color: ${(props) => props.theme.colors.grey5};
+    }
+  `
 
-  div {
-    // This is the dot color
-    background-color: #263238;
-  }
-`
+  const ButtonContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 5px;
+    cursor: pointer;
 
-const DotItem = styled.div`
-  width: 4px;
-  height: 4px;
-  margin: 1px;
-  border-radius: 50%;
-`
+    div {
+      // This is the dot color
+      background-color: #263238;
+    }
+  `
 
-const dropdownAttrs = {
-  containerWidth: Number
-}
-const DropdownContainer = styled('div', dropdownAttrs)`
-  z-index: 99;
-  position: absolute;
-  display: grid;
-  grid-template-columns: auto auto;
-`
+  const DotItem = styled.div`
+    width: 4px;
+    height: 4px;
+    margin: 1px;
+    border-radius: 50%;
+  `
 
-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 dropdownAttrs = {
+    containerWidth: Number,
+  }
+  const DropdownContainer = styled('div', dropdownAttrs)`
+    z-index: 99;
+    position: absolute;
+    display: grid;
+    grid-template-columns: auto auto;
+  `
 
-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 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 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 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'};
+  `
 
-  &:hover {
-    background-color: #ebeef4;
-  }
+  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}` : ''};
 
-  &: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;
+    }
+  `
+  const OptionChild = styled.div`
+    padding: 12px;
+    cursor: pointer;
+    font-size: 13px;
+    position: relative;
 
-  &:focus-visible {
-    outline: none;
-    background-color: #ebeef4;
-  }
-`
+    &: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 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: '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
+    props: {
+      options: {
+        required: true,
+      },
+      isLoading: {
+        required: false,
+        default: false,
+      },
+      textWrap: {
+        required: false,
+        default: true,
+      },
     },
-    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)
+    data() {
+      return {
+        isOpen: false,
+        hoverItem: null,
+        childOpen: null,
+        containerWidth: 16,
       }
     },
-    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()
+    methods: {
+      toggleButton() {
+        this.isOpen = !this.isOpen
 
-      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
+        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)
         }
-        element = element.parentElement
-      }
-      return null
-    },
-    determineElementQuarter(element, rect) {
-      const viewportWidth = window.innerWidth
-      const viewportHeight = window.innerHeight
+      },
+      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 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
+        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()
+      },
     },
-    clickOutside(event) {
-      if (this.$el.contains(event.target) || !this.isOpen) {
-        return
-      }
-      this.toggleButton()
-    }
   }
-}
 </script>