@eturnity/eturnity_reusable_components 8.7.4--EPDM-12729.4 → 8.7.4

package/src/components/threeDots/index.vue

@@ -1,413 +1,413 @@
-<template>
-  <PageContainer
-    ref="pageContainer"
-    :activated="isOpen"
-    @click="toggleButton()"
-  >
-    <ButtonContainer ref="dropdownItem">
-      <DotItem />
-      <DotItem />
-      <DotItem />
-    </ButtonContainer>
-    <DropdownContainer
-      ref="dropdownContainer"
-      :container-width="childOpen ? 440 : 240"
-      @click.stop
-    >
-      <template v-if="isOpen">
-        <LoadingContainer v-if="isLoading">
-          <Spinner />
-        </LoadingContainer>
-        <ChildrenContainer
-          v-if="hoverItem !== null && !isLoading"
-          class="child"
-          :is-open="hoverItem !== null"
-        >
-          <OptionChild
-            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 }}
-          </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) })
-            "
-            @keyup.enter="
-              onSelect({ item: item, hasChildren: hasChildren(item) })
-            "
-            @mouseover="onItemHover({ index, item })"
-          >
-            <ArrowLeft
-              v-if="hasChildren(item)"
-              :has-children="hasChildren(item)"
-            />
-            <span>
-              {{ item.name }}
-            </span>
-          </OptionItem>
-        </OptionsContainer>
-      </template>
-    </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'
-
-  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 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}` : ''};
-
-    &: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: 'ThreeDots',
-    components: {
-      PageContainer,
-      ButtonContainer,
-      DotItem,
-      OptionsContainer,
-      OptionItem,
-      ChildrenContainer,
-      OptionChild,
-      ArrowLeft,
-      DropdownContainer,
-      Spinner,
-      LoadingContainer,
-    },
-    props: {
-      options: {
-        required: true,
-      },
-      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)
-        }
-      },
-      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>
+<template>
+  <PageContainer
+    ref="pageContainer"
+    :activated="isOpen"
+    @click="toggleButton()"
+  >
+    <ButtonContainer ref="dropdownItem">
+      <DotItem />
+      <DotItem />
+      <DotItem />
+    </ButtonContainer>
+    <DropdownContainer
+      ref="dropdownContainer"
+      :container-width="childOpen ? 440 : 240"
+      @click.stop
+    >
+      <template v-if="isOpen">
+        <LoadingContainer v-if="isLoading">
+          <Spinner />
+        </LoadingContainer>
+        <ChildrenContainer
+          v-if="hoverItem !== null && !isLoading"
+          class="child"
+          :is-open="hoverItem !== null"
+        >
+          <OptionChild
+            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 }}
+          </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) })
+            "
+            @keyup.enter="
+              onSelect({ item: item, hasChildren: hasChildren(item) })
+            "
+            @mouseover="onItemHover({ index, item })"
+          >
+            <ArrowLeft
+              v-if="hasChildren(item)"
+              :has-children="hasChildren(item)"
+            />
+            <span>
+              {{ item.name }}
+            </span>
+          </OptionItem>
+        </OptionsContainer>
+      </template>
+    </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'
+
+  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 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}` : ''};
+
+    &: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: 'ThreeDots',
+    components: {
+      PageContainer,
+      ButtonContainer,
+      DotItem,
+      OptionsContainer,
+      OptionItem,
+      ChildrenContainer,
+      OptionChild,
+      ArrowLeft,
+      DropdownContainer,
+      Spinner,
+      LoadingContainer,
+    },
+    props: {
+      options: {
+        required: true,
+      },
+      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)
+        }
+      },
+      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>