@eturnity/eturnity_reusable_components 1.2.22-3d-master.4 → 1.2.22-3d-master.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.22-3d-master.4",
+  "version": "1.2.22-3d-master.5",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -14,7 +14,8 @@
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-styled-components": "^1.6.0",
-    "html-loader": "^0.5.5"
+    "html-loader": "^0.5.5",
+    "v-click-outside": "^2.1.4"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^6.2.8",

package/src/App.vue

@@ -2,10 +2,12 @@
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
       <br />
-<<<<<<< HEAD
-=======
+
       <iconWrapper name="bell"/>
       <modal backdrop="dark" :isLoading="false" :isOpen="true">
+
+      <modal backdrop="dark" :isLoading="false" :isOpen="false">
+
         <main-table titleText="My Table">
           <thead>
             <tr>
@@ -34,6 +36,23 @@
           </tbody>
         </main-table>
       </modal>
+      <row-container>
+        <div v-for='(item, index) in markersArray' :key="item.index">
+          <project-marker
+            :activeLanguage="'en-us'"
+            :markerData="item"
+            :isLimitedPartner="false"
+            :isGroupSupport="false"
+            :isEditable="true"
+            :gettext="gettext"
+            :date="'23.07.2022'"
+            @editHandler="consoleLog('edit index ' + index)"
+            @deleteHandler="consoleLog('delete id ' + item.id)"
+          />
+        </div>
+      </row-container>
+      <br />
+      <iconCollection />
       <br />
       <toggle
         @on-toggle-change="onInputChange($event)"
@@ -96,7 +115,6 @@
 </template>
 
 <script>
-<<<<<<< HEAD
 import { ThemeProvider } from "vue-styled-components"
 import theme from "./assets/theme"
 import styled from "vue-styled-components"
@@ -109,21 +127,6 @@ import PageSubtitle from "@/components/pageSubtitle"
 import Spinner from "@/components/spinner"
 import ExternalButton from "@/components/buttons/externalButton"
 import InputText from "@/components/inputs/inputText"
-=======
-import { ThemeProvider } from 'vue-styled-components'
-import theme from './assets/theme'
-import styled from 'vue-styled-components'
-import MainTable from '@/components/tables/mainTable'
-import ThreeDots from '@/components/threeDots'
-import iconWrapper from '@/components/iconWrapper'
-import Toggle from '@/components/inputs/toggle'
-import InputNumber from '@/components/inputs/inputNumber'
-import Checkbox from '@/components/inputs/checkbox'
-import PageSubtitle from '@/components/pageSubtitle'
-import Spinner from '@/components/spinner'
-import ExternalButton from '@/components/buttons/externalButton'
-import Modal from '@/components/modals/modal'
->>>>>>> EPDM-5448
 // import TableDropdown from "@/components/tableDropdown"
 const InputAnnexContainer = styled.div`
   display: grid;
@@ -135,6 +138,12 @@ const PageContainer = styled.div`
   padding: 40px;
 `
 
+const RowContainer = styled.div`
+  display: inline-flex;
+  gap: 10px;
+  flex-wrap: wrap;
+`
+
 export default {
   name: 'App',
   components: {
@@ -148,6 +157,9 @@ export default {
     ExternalButton,
     iconWrapper,
     Modal,
+    ProjectMarker,
+    iconCollection,
+    RowContainer
   },
   data() {
     return {
@@ -207,6 +219,7 @@ export default {
           id: 4,
         },
       ],
+      markersArray: [{"id":1180,"choice":"project-on-hold","translations":{"fr":{"name":"fr - Project on hold"},"en-us":{"name":"Project on hold"},"it-ch":{"name":"it-ch - Project on hold"},"de-ch":{"name":"de-ch - Project on hold"},"fr-be":{"name":"fr-be - Project on hold"}},"color":"#D27CCA","can_be_deleted":true}, {"id":266,"choice":"transferred","translations":{"en-us":{"name":"Transferred"},"fr":{"name":"fr - Transferred"},"de-ch":{"name":"de-ch - Transferred"},"it-ch":{"name":"it-ch - Transferred"},"fr-be":{"name":"fr-be - Transferred"}},"color":"#20A4CA","can_be_deleted":false},{"id":267,"choice":"sold","translations":{"en-us":{"name":"Sold"},"fr":{"name":"Vendu"},"de-ch":{"name":"Verkauft"},"it-ch":{"name":"Venduto"},"fr-be":{"name":"Vendu"}},"color":"#008351","can_be_deleted":false},{"id":268,"choice":"lost","translations":{"en-us":{"name":"Lost"},"fr":{"name":"Perdu"},"de-ch":{"name":"Verloren"},"it-ch":{"name":"Perso"},"fr-be":{"name":"Perdu"}},"color":"#A52019","can_be_deleted":false},{"id":1181,"choice":"project-created","translations":{"fr":{"name":"Project created"},"en-us":{"name":"Project created"},"it-ch":{"name":"Project created"},"de-ch":{"name":"Project created"},"fr-be":{"name":"Project created"}},"color":"#FDB813","can_be_deleted":true}]
     }
   },
   methods: {
@@ -273,4 +286,4 @@ body {
   height: 100%;
   margin: 0;
 }
-</style>
+</style>

package/src/assets/svgIcons/cross.svg

@@ -0,0 +1,4 @@
+<svg fill="none" height="10" viewBox="0 0 10 10" width="10" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.87865 8.47868L8.47865 9.87868L0.121287 1.52132L1.52129 0.121318L5.69997 4.3L9.87865 8.47868Z" fill="black"/>
+    <path d="M1.5213 9.87868L0.121302 8.47868L8.47866 0.12132L9.87866 1.52132L1.5213 9.87868Z" fill="black"/>
+</svg>

package/src/assets/svgIcons/transfer.svg

@@ -0,0 +1,4 @@
+<svg fill="none" height="10" viewBox="0 0 10 10" width="10" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 9.98993L3.47934e-07 6.01003L10 6.01003V7.98993L3 7.98993L3 9.98993Z" fill="black"/>
+    <path d="M7 0.0100708L10 3.98997H0L1.19209e-07 2.01007L7 2.01007V0.0100708Z" fill="black"/>
+</svg>

package/src/components/icon/index.vue

@@ -1,4 +1,8 @@
 <template>
+<<<<<<< HEAD
+=======
+  <wrapper :isDisabled="isDisabled" :size="size" :cursor="cursor">
+>>>>>>> master
     <icon-image
       :disabled="disabled"
       :size="size"
@@ -22,14 +26,16 @@
 
 import styled from 'vue-styled-components'
 
-const IconImageProps = { color: String, hoveredColor: String, size: String ,disabled:Boolean}
-const IconImage = styled('div', IconImageProps)`
-  display: inline-flex;
+const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
+const Wrapper = styled('div', wrapperAttrs)`
+  display: inline-block;
   width: ${(props) => props.size};
   height: ${(props) => props.size};
-  justify-content:center;
-  align-items:center;
-  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursor)};
+  line-height: 0;
+`
+const IconImageProps = { color: String, hoveredColor: String, size: String }
+const IconImage = styled('div', IconImageProps)`
   svg {
     width: 100%;
     height: 100%;
@@ -65,10 +71,14 @@ export default {
     size: {
       required: false,
       default: '30px'
+    },
+    cursor: {
+      required: false,
+      default: 'pointer'
     }
   },
   data() {
     return {}
   }
 }
-</script>
+</script>

package/src/components/inputs/radioButton/index.vue

@@ -1,7 +1,7 @@
 <template>
   <component-wrapper :layout="layout">
     <radio-wrapper v-for="(item, index) in options" :key="item.value">
-      <label-container :size="size" :isDisabled="item.disabled">
+      <label-container :size="size" :isDisabled="item.disabled" :isChecked="selectedOption === item.value">
         <radio
           type="radio"
           :value="selectedOption"
@@ -76,14 +76,6 @@ const Radio = styled.input`
   cursor: pointer;
   height: 0;
   width: 0;
-
-  &:checked ~ .checkmark {
-    background-color: white;
-
-    &:after {
-      display: block;
-    }
-  }
 `
 
 const RadioWrapper = styled.div`
@@ -91,22 +83,22 @@ const RadioWrapper = styled.div`
   grid-gap: 10px;
 `
 
-const containerProps = { size: String, isDisabled: Boolean }
+const containerProps = { size: String, isDisabled: Boolean, isChecked: Boolean }
 const LabelContainer = styled("label", containerProps)`
   display: grid;
   grid-template-columns: auto 1fr auto;
   grid-gap: 15px;
   align-items: center;
   color: ${(props) =>
-    props.isDisabled ? props.theme.colors.disabled : props.theme.colors.black};
+    props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
   position: relative;
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   font-size: ${(props) =>
     props.size === "large"
       ? "16px"
       : props.size === "medium"
-      ? "13px"
-      : "10px"};
+        ? "13px"
+        : "10px"};
   user-select: none;
   flex: auto;
   align-self: baseline;
@@ -116,14 +108,14 @@ const LabelContainer = styled("label", containerProps)`
       props.size === "large"
         ? "23px"
         : props.size === "medium"
-        ? "16px"
-        : "12px"};
+          ? "16px"
+          : "12px"};
     width: ${(props) =>
       props.size === "large"
         ? "23px"
         : props.size === "medium"
-        ? "16px"
-        : "12px"};
+          ? "16px"
+          : "12px"};
     background-color: #fff;
     border-radius: 100%;
     border: 1px solid ${(props) => props.theme.colors.mediumGray};
@@ -133,32 +125,29 @@ const LabelContainer = styled("label", containerProps)`
 
     &:after {
       content: "";
-      display: none;
+      display: ${(props) => props.isChecked ? 'block' : 'none'};
+      width: ${(props) =>
+        props.size === "large"
+          ? "10px"
+          : props.size === "medium"
+            ? "8px"
+            : "6px"};
+      height: ${(props) =>
+        props.size === "large"
+          ? "10px"
+          : props.size === "medium"
+            ? "8px"
+            : "6px"};
+      border-radius: 100%;
+      background: ${(props) => props.theme.colors.primary};
     }
   }
-
-  .checkmark:after {
-    width: ${(props) =>
-      props.size === "large"
-        ? "10px"
-        : props.size === "medium"
-        ? "8px"
-        : "6px"};
-    height: ${(props) =>
-      props.size === "large"
-        ? "10px"
-        : props.size === "medium"
-        ? "8px"
-        : "6px"};
-    border-radius: 100%;
-    background: ${(props) => props.theme.colors.primary};
-  }
 `
 
 const textAttrs = { isDisabled: Boolean }
 const LabelText = styled("div", textAttrs)`
   color: ${(props) =>
-    props.isDisabled ? props.theme.colors.disabled : props.theme.colors.black};
+    props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
 `
 
 const RadioImage = styled.img`
@@ -228,11 +217,15 @@ export default {
       required: false,
       default: "medium", // small, medium, large
     },
+    name: {
+      required: false,
+      default: ''
+    }
   },
   data() {
     return {
-      radioName: "",
       selectedImage: null,
+      radioName: ''
     }
   },
   methods: {
@@ -247,7 +240,7 @@ export default {
     },
   },
   created() {
-    this.radioName = Math.round(Math.random() * 10000)
+    this.radioName = this.name.length === 0 ? Math.round(Math.random() * 10000) : this.name
   },
 }
 </script>

package/src/components/inputs/searchInput/index.vue

@@ -59,7 +59,8 @@ const InputWrapper = styled.span`
   img {
     position: absolute;
     right: 10px;
-    top: 0;
+    top: 50%;
+    transform: translateY(-50%);
   }
 `
 

package/src/components/pageSubtitle/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <subtitle-text :color="color" :hasInfoText="!!infoText">
+  <subtitle-text :color="color" :marginBottom="marginBottom" :hasInfoText="!!infoText">
     <span>
       {{ text }}
     </span>
@@ -24,7 +24,7 @@
 import styled from "vue-styled-components"
 import InfoText from "../infoText"
 
-const textAttrs = { color: String, hasInfoText: Boolean }
+const textAttrs = { color: String, hasInfoText: Boolean, marginBottom: String }
 const SubtitleText = styled("div", textAttrs)`
   display: grid;
   align-items: center;
@@ -33,7 +33,7 @@ const SubtitleText = styled("div", textAttrs)`
     props.hasInfoText ? "auto auto 1fr" : "1fr"};
   color: ${(props) => (props.color ? props.color : props.theme.colors.gray1)};
   font-size: 13px;
-  margin-bottom: 30px;
+  margin-bottom: ${(props) => (props.marginBottom ? props.marginBottom : '30px')};
   line-height: 1.5;
   position: relative;
 `
@@ -59,6 +59,10 @@ export default {
       required: false,
       default: "left",
     },
+    marginBottom: {
+      required: false,
+      default: "30px",
+    }
   },
 }
 </script>

package/src/components/pageTitle/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <title-text :color="color">{{ text }}</title-text>
+  <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">{{ text }}</title-text>
 </template>
 
 <script>
@@ -11,12 +11,12 @@
 // />
 import styled from "vue-styled-components"
 
-const textAttrs = { color: String }
+const textAttrs = { color: String, fontSize: String, uppercase: Boolean }
 const TitleText = styled("div", textAttrs)`
   color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
   font-weight: bold;
-  font-size: 16px;
-  text-transform: uppercase;
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
+  text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
   margin-bottom: 20px;
 `
 
@@ -32,6 +32,14 @@ export default {
     color: {
       required: false,
     },
+    fontSize: {
+      required: false,
+      default: '16px'
+    },
+    uppercase: {
+      required: false,
+      default: true
+    }
   },
 }
 </script>

package/src/components/projectMarker/index.vue

@@ -0,0 +1,285 @@
+<template>
+  <page-container :withDate="!!date">
+    <marker-container
+      v-if="markerData"
+      :backgroundColor="markerData.color"
+      :hasIcon="!!iconName"
+      :isEditionAllowed="editionAllowed"
+      :isActive="activated"
+      :cursor="cursor"
+      @click.native="editionAllowed
+        ? activated = !activated
+        : ''
+      "
+    >
+      <icon
+        v-if="!!iconName"
+        :name="iconName"
+        color="white"
+        size="10px"
+        :cursor="cursor"
+      />
+      <span>{{ markerData.translations[activeLanguage].name }}</span>
+      <dot-wrapper
+        v-if="editionAllowed"
+        class="dotContainer"
+      >
+        <dot-icon />
+        <dot-icon />
+        <dot-icon />
+      </dot-wrapper>
+      <edit-container
+        v-if="activated"
+        v-click-outside="clickOutsideActionHandler"
+      >
+        <edit-item @click.native="deleteModalOpened = !deleteModalOpened">
+          <delete-icon />
+          <div>{{ $gettext('Delete') }}</div>
+        </edit-item>
+        <edit-item @click.native="onEditClick">
+          <icon-container>
+            <icon
+              name="edit_button"
+              size="14px"
+            />
+          </icon-container>
+          <div>{{ $gettext('Edit') }}</div>
+        </edit-item>
+      </edit-container>
+    </marker-container>
+    <date v-if="!!date">
+      {{ date }}
+    </date>
+    <modal
+      :isOpen="deleteModalOpened"
+      @on-close="closeDeleteModal"
+      :preventOutsideClose="true"
+    >
+      <modal-container>
+        <page-title :text="$gettext('delete_confirm_text')" />
+        <page-subtitle :text="$gettext('delete_confirm_subtext')" />
+        <cta-container>
+          <main-button
+            @click.native="onDelete"
+            :text="$gettext('Delete')"
+          />
+          <main-button
+            type="cancel"
+            @click.native="closeDeleteModal"
+            :text="$gettext('Cancel')"
+          />
+        </cta-container>
+      </modal-container>
+    </modal>
+  </page-container>
+</template>
+
+<script>
+// import ThreeDots from "@eturnity/eturnity_reusable_components/src/components/projectMarker"
+// To use:
+// <project-marker
+//   :activeLanguage="'en-us'"
+//   :markerData="{"choice":"sold","translations":{"en-us":{"name":"Sold"}}","color":"#000"}"
+//   :isLimitedPartner="false"
+//   :isGroupSupport="false"
+//   :isEditable='false'
+//   :date="'23.07.2022'"
+//   @editHandler="onMarkerEdit($event)"
+//   @deleteHandler="onMarkerDelete($event)"
+// />
+
+import styled from "vue-styled-components"
+import Icon from "../icon"
+import Modal from '../modals/modal'
+import PageTitle from '../pageTitle'
+import DeleteIcon from '../deleteIcon'
+import PageSubtitle from '../pageSubtitle'
+import MainButton from '../buttons/mainButton'
+
+const PageContainerAttrs = {
+  withDate: Boolean
+}
+const PageContainer = styled('div', PageContainerAttrs)`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 12px;
+  line-height: 14px;
+`
+
+const ModalContainer = styled.div`
+  padding: 40px;
+  min-width: 500px;
+`
+
+const CtaContainer = styled.div`
+  display: flex;
+  gap: 20px;
+  margin-top: 30px;
+`
+
+const MarkerAttrs = {
+  backgroundColor: String,
+  hasIcon: Boolean,
+  isEditionAllowed: Boolean,
+  isActive: Boolean,
+  cursor: String
+}
+const MarkerContainer = styled('div', MarkerAttrs)`
+  display: grid;
+  grid-template-columns: ${(props) =>
+  props.hasIcon || props.isEditionAllowed ? 'auto 1fr' : '1fr'};
+  grid-gap: 5px;
+  position: relative;
+  align-items: center;
+  padding: 2px 7px;
+  color: ${(props) => props.theme.colors.white};
+  background-color: ${(props) =>
+  props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
+  border-radius: 4px;
+  white-space: nowrap;
+  cursor: ${(props) => props.isEditionAllowed ? 'pointer' : props.cursor};
+
+  .dotContainer {
+    display: ${(props) => (props.isActive ? 'flex' : 'none')};
+  }
+
+  &:hover {
+    .dotContainer {
+      display: flex;
+    }
+  }
+`
+
+const DotWrapper = styled.div`
+  display: flex;
+  gap: 2px;
+  cursor: pointer;
+`
+
+const DotIcon = styled.div`
+  width: 4px;
+  height: 4px;
+  border-radius: 100%;
+  background-color: ${(props) => props.theme.colors.white};
+`
+
+const EditContainer = styled.div`
+  position: absolute;
+  z-index: 99;
+  top: 22px;
+  display: grid;
+  background-color: ${(props) => props.theme.colors.white};
+  border: 1px solid ${(props) => props.theme.colors.grey4};
+  border-radius: 4px;
+  cursor: pointer;
+  overflow: hidden;
+`
+
+const EditItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: ${(props) => props.theme.colors.black};
+  font-size: 13px;
+  padding: 4px 18px;
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.grey5};
+  }
+`
+
+const IconContainer = styled.div`
+  padding: 8px;
+  line-height: 0;
+`
+
+const Date = styled.div``
+
+export default {
+  name: "project-marker",
+  components: {
+    PageContainer,
+    MarkerContainer,
+    DotWrapper,
+    DotIcon,
+    EditContainer,
+    EditItem,
+    DeleteIcon,
+    IconContainer,
+    Icon,
+    Modal,
+    ModalContainer,
+    CtaContainer,
+    PageTitle,
+    PageSubtitle,
+    MainButton,
+    Date
+  },
+  props: {
+    markerData: {
+      required: true
+    },
+    activeLanguage: {
+      required: true
+    },
+    date: {
+      required: false,
+      default: null
+    },
+    isEditable: {
+      required: false,
+      default: false
+    },
+    isGroupSupport: {
+      required: false,
+      default: false
+    },
+    isLimitedPartner: {
+      required: false,
+      default: false
+    },
+    cursor: {
+      required: false,
+      default: 'default'
+    }
+  },
+  data() {
+    return {
+      activated: false,
+      deleteModalOpened: false
+    }
+  },
+  computed: {
+    editionAllowed() {
+      return (this.markerData.can_be_deleted && (!this.isLimitedPartner || this.isGroupSupport)) && this.isEditable
+    },
+    iconName() {
+      if (this.markerData.choice === 'sold') {
+        return 'all_good'
+      } else if (this.markerData.choice === 'lost') {
+        return 'cross'
+      } else if (this.markerData.choice === 'transferred') {
+        return 'transfer'
+      } else {
+        return ''
+      }
+    }
+  },
+  methods: {
+    clickOutsideActionHandler() {
+      this.activated = false
+    },
+    closeDeleteModal() {
+      this.deleteModalOpened = false
+    },
+    onEditClick() {
+      this.$emit("editHandler")
+    },
+    onDelete() {
+      this.closeDeleteModal()
+      this.$emit("deleteHandler")
+    }
+  }
+}
+</script>

package/src/components/tables/mainTable/index.vue

@@ -8,7 +8,7 @@
         <spinner-wrapper v-if="isLoading">
           <spinner />
         </spinner-wrapper>
-        <table-container v-else>
+        <table-container v-else :cellPaddings="cellPaddings">
           <slot />
         </table-container>
       </table-wrapper>
@@ -63,7 +63,8 @@ const SpinnerWrapper = styled.div`
   justify-items: center;
 `
 
-const TableContainer = styled.table`
+const containerAttrs = { cellPaddings: String }
+const TableContainer = styled("table", containerAttrs)`
   width: 100%;
   border-collapse: collapse;
   border: none;
@@ -114,7 +115,7 @@ const TableContainer = styled.table`
   }
 
   td {
-    padding: 6px 6px 7px 4px;
+    padding: ${(props) => props.cellPaddings ? props.cellPaddings : "6px 6px 7px 4px" };
     border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
 
     &.empty {
@@ -352,6 +353,10 @@ export default {
       required: false,
       default: true,
     },
+    cellPaddings: {
+      required: false,
+      default: '',
+    },
     isLoading: {
       required: false,
       default: false,

package/src/components/threeDots/index.vue

@@ -10,7 +10,8 @@
       @click.stop
       :top="getItemLocation('top')"
       :right="getItemLocation('right')"
-      :containerWidth="childOpen ? 420 : 220"
+      :containerWidth="childOpen ? 440 : 240"
+      ref="dropdownContainer"
     >
       <loading-container v-if="isLoading">
         <spinner />
@@ -26,13 +27,13 @@
           @click.stop="
             onSelect({
               item: child,
-              hasChildren: hasChildren(child),
+              hasChildren: hasChildren(child)
             })
           "
           @keyup.enter.stop="
             onSelect({
               item: child,
-              hasChildren: hasChildren(child),
+              hasChildren: hasChildren(child)
             })
           "
         >
@@ -51,7 +52,10 @@
           @mouseover="onItemHover({ index, item })"
           :isDisabled="item.disabled"
         >
-          <arrow-left :hasChildren="hasChildren(item)" />
+          <arrow-left
+            :hasChildren="hasChildren(item)"
+            v-if="hasChildren(item)"
+          />
           <span>
             {{ item.name }}
           </span>
@@ -117,8 +121,8 @@
 //         },
 //       ],
 
-import styled from "vue-styled-components"
-import Spinner from "../spinner"
+import styled from 'vue-styled-components'
+import Spinner from '../spinner'
 
 const PageContainer = styled.div`
   display: grid;
@@ -155,11 +159,11 @@ const DotItem = styled.div`
 `
 
 const dropdownAttrs = { top: Number, right: Number, containerWidth: Number }
-const DropdownContainer = styled("div", dropdownAttrs)`
+const DropdownContainer = styled('div', dropdownAttrs)`
   z-index: 99;
   height: 200px;
-  top: ${(props) => props.top + "px"};
-  left: ${(props) => props.right - props.containerWidth + "px"};
+  top: ${(props) => props.top + 'px'};
+  left: ${(props) => props.right - props.containerWidth + 'px'};
   position: absolute;
   display: grid;
   grid-template-columns: auto auto;
@@ -180,19 +184,21 @@ const OptionsContainer = styled.div`
   border: 1px solid ${(props) => props.theme.colors.grey3};
   display: grid;
   grid-template-columns: 1fr;
-  min-width: 200px;
+  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)`
+const OptionItem = styled('div', optionAttrs)`
   padding: 12px;
-  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   font-size: 13px;
   position: relative;
 
@@ -222,7 +228,7 @@ const OptionChild = styled.div`
 `
 
 const arrowAttrs = { hasChildren: Boolean }
-const ArrowLeft = styled("span", arrowAttrs)`
+const ArrowLeft = styled('span', arrowAttrs)`
   border: solid #9f9f9f;
   border-width: 0 1.5px 1.5px 0;
   display: inline-block;
@@ -230,16 +236,18 @@ const ArrowLeft = styled("span", arrowAttrs)`
   margin-bottom: 1px;
   transform: rotate(135deg);
   margin-right: 3px;
-  visibility: ${(props) => (props.hasChildren ? "visible" : "hidden")};
+  visibility: ${(props) => (props.hasChildren ? 'visible' : 'hidden')};
 `
 
 const childAttrs = { isOpen: Boolean }
-const ChildrenContainer = styled("div", childAttrs)`
+const ChildrenContainer = styled('div', childAttrs)`
   border: ${(props) =>
-    props.isOpen ? "1px solid" + props.theme.colors.grey3 : "none"};
+    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;
@@ -250,7 +258,7 @@ const ChildrenContainer = styled("div", childAttrs)`
 `
 
 export default {
-  name: "three-dots",
+  name: 'three-dots',
   components: {
     PageContainer,
     ButtonContainer,
@@ -262,22 +270,23 @@ export default {
     ArrowLeft,
     DropdownContainer,
     Spinner,
-    LoadingContainer,
+    LoadingContainer
   },
   props: {
     options: {
-      required: true,
+      required: true
     },
     isLoading: {
       required: false,
-      default: false,
-    },
+      default: false
+    }
   },
   data() {
     return {
       isOpen: false,
       hoverItem: null,
       childOpen: null,
+      containerWidth: 16
     }
   },
   methods: {
@@ -285,15 +294,15 @@ export default {
       this.isOpen = !this.isOpen
 
       if (this.isOpen) {
-        document.addEventListener("click", this.clickOutside)
+        document.addEventListener('click', this.clickOutside)
       } else {
-        document.removeEventListener("click", this.clickOutside)
+        document.removeEventListener('click', this.clickOutside)
       }
     },
     getItemLocation(value) {
       let ref = this.$refs.dropdownItem
       let location = ref.$el.getBoundingClientRect()[value]
-      if (value === "top") {
+      if (value === 'top') {
         location = location + window.scrollY
       }
       return location
@@ -310,7 +319,7 @@ export default {
       if (hasChildren || item.disabled) {
         return
       }
-      this.$emit("on-select", item)
+      this.$emit('on-select', item)
       this.isOpen = false
     },
     clickOutside(event) {
@@ -318,7 +327,7 @@ export default {
         return
       }
       this.toggleButton()
-    },
-  },
+    }
+  }
 }
 </script>

package/src/main.js

@@ -1,10 +1,12 @@
 import Vue from "vue"
 import App from "./App.vue"
 import VueCompositionAPI from "@vue/composition-api"
+import vClickOutside from 'v-click-outside'
 
 Vue.config.productionTip = false
 
 Vue.use(VueCompositionAPI)
+Vue.use(vClickOutside)
 
 new Vue({
   render: (h) => h(App),