@eturnity/eturnity_reusable_components 1.2.19-EPDM-5295.2 → 1.2.19-EPDM-3412.9

package/src/components/threeDots/index.vue

@@ -1,324 +1,324 @@
-<template>
-  <page-container @click="toggleButton()">
-    <button-container ref="dropdownItem">
-      <dot-item />
-      <dot-item />
-      <dot-item />
-    </button-container>
-    <dropdown-container
-      v-if="isOpen"
-      @click.stop
-      :top="getItemLocation('top')"
-      :right="getItemLocation('right')"
-      :containerWidth="childOpen ? 420 : 220"
-    >
-      <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)" />
-          <span>
-            {{ item.name }}
-          </span>
-        </option-item>
-      </options-container>
-    </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 PageContainer = styled.div`
-  display: grid;
-  align-items: center;
-  justify-items: center;
-  width: 30px;
-  height: 30px;
-
-  &:hover {
-    background-color: ${(props) => props.theme.colors.grey5};
-    border-radius: 4px;
-  }
-`
-
-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 = { top: Number, right: Number, containerWidth: Number }
-const DropdownContainer = styled("div", dropdownAttrs)`
-  z-index: 99;
-  height: 200px;
-  top: ${(props) => props.top + "px"};
-  left: ${(props) => props.right - props.containerWidth + "px"};
-  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: 200px;
-  height: 200px;
-  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: 200px;
-  width: max-content;
-  border-radius: 4px;
-  background-color: #fff;
-  max-height: 220px;
-  overflow: auto;
-  height: max-content;
-`
-
-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;
-  width: max-content;
-  border-radius: 4px;
-  background-color: #fff;
-  margin-right: -1px;
-  height: max-content;
-  max-height: 200px;
-  overflow: auto;
-`
-
-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,
-    }
-  },
-  methods: {
-    toggleButton() {
-      this.isOpen = !this.isOpen
-
-      if (this.isOpen) {
-        document.addEventListener("click", this.clickOutside)
-      } else {
-        document.removeEventListener("click", this.clickOutside)
-      }
-    },
-    getItemLocation(value) {
-      let ref = this.$refs.dropdownItem
-      let location = ref.$el.getBoundingClientRect()[value]
-      if (value === "top") {
-        location = location + window.scrollY
-      }
-      return location
-    },
-    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()">
+    <button-container ref="dropdownItem">
+      <dot-item />
+      <dot-item />
+      <dot-item />
+    </button-container>
+    <dropdown-container
+      v-if="isOpen"
+      @click.stop
+      :top="getItemLocation('top')"
+      :right="getItemLocation('right')"
+      :containerWidth="childOpen ? 420 : 220"
+    >
+      <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)" />
+          <span>
+            {{ item.name }}
+          </span>
+        </option-item>
+      </options-container>
+    </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 PageContainer = styled.div`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  width: 30px;
+  height: 30px;
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.grey5};
+    border-radius: 4px;
+  }
+`
+
+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 = { top: Number, right: Number, containerWidth: Number }
+const DropdownContainer = styled("div", dropdownAttrs)`
+  z-index: 99;
+  height: 200px;
+  top: ${(props) => props.top + "px"};
+  left: ${(props) => props.right - props.containerWidth + "px"};
+  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: 200px;
+  height: 200px;
+  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: 200px;
+  width: max-content;
+  border-radius: 4px;
+  background-color: #fff;
+  max-height: 220px;
+  overflow: auto;
+  height: max-content;
+`
+
+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;
+  width: max-content;
+  border-radius: 4px;
+  background-color: #fff;
+  margin-right: -1px;
+  height: max-content;
+  max-height: 200px;
+  overflow: auto;
+`
+
+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,
+    }
+  },
+  methods: {
+    toggleButton() {
+      this.isOpen = !this.isOpen
+
+      if (this.isOpen) {
+        document.addEventListener("click", this.clickOutside)
+      } else {
+        document.removeEventListener("click", this.clickOutside)
+      }
+    },
+    getItemLocation(value) {
+      let ref = this.$refs.dropdownItem
+      let location = ref.$el.getBoundingClientRect()[value]
+      if (value === "top") {
+        location = location + window.scrollY
+      }
+      return location
+    },
+    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>