@eturnity/eturnity_reusable_components 7.8.6-EPDM-7951.0 → 7.10.0-EPDM-10163.0

package/.storybook/preview.js

@@ -1,4 +1,4 @@
-import { ThemeProvider } from "vue3-styled-components"
+import { ThemeProvider } from "vue-styled-components"
 
 const theme = {
   colors: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.8.6-EPDM-7951.0",
+  "version": "7.10.0-EPDM-10163.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -10,25 +10,30 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@storybook/vue3": "7.0.18",
-    "@vue/compat": "3.3.4",
-    "@vueform/slider": "2.1.10",
-    "@vuepic/vue-datepicker": "6.1.0",
-    "click-outside-vue3": "4.0.1",
+    "@vueform/slider": "1.0.5",
     "html-loader": "0.5.5",
-    "postcss": "8.4.25",
-    "vue": "3.3.4",
-    "vue3-styled-components": "1.2.1"
+    "postcss": "^8.4.25",
+    "v-click-outside": "2.1.4",
+    "vue": "2.6.11",
+    "vue-styled-components": "1.6.0",
+    "vue2-datepicker": "3.11.1",
+    "vuedraggable": "2.24.3",
+    "core-js": "3.31.1"
   },
   "devDependencies": {
-    "@babel/core": "7.12.16",
-    "@babel/eslint-parser": "7.12.16",
-    "@vue/cli-plugin-babel": "5.0.8",
-    "@vue/cli-plugin-eslint": "5.0.8",
-    "@vue/cli-service": "5.0.8",
-    "@vue/compiler-sfc": "3.3.4",
-    "eslint": "7.32.0",
-    "eslint-plugin-vue": "8.0.3"
+    "@storybook/addon-actions": "6.2.8",
+    "@storybook/addon-docs": "6.4.19",
+    "@storybook/addon-essentials": "6.2.8",
+    "@storybook/addon-links": "6.2.8",
+    "@storybook/vue": "6.4.19",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/composition-api": "1.0.0-rc.10",
+    "babel-eslint": "10.1.0",
+    "eslint": "6.7.2",
+    "eslint-plugin-vue": "6.2.2",
+    "vue-template-compiler": "2.6.11"
   },
   "eslintConfig": {
     "root": true,
@@ -40,7 +45,7 @@
       "eslint:recommended"
     ],
     "parserOptions": {
-      "parser": "@babel/eslint-parser"
+      "parser": "babel-eslint"
     },
     "rules": {}
   },

package/src/App.vue

@@ -100,9 +100,9 @@
 </template>
 
 <script>
-import { ThemeProvider } from 'vue3-styled-components'
+import { ThemeProvider } from 'vue-styled-components'
 import theme from './assets/theme'
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import InputNumber from '@/components/inputs/inputNumber'
 import Select from '@/components/inputs/select'
 import SwitchField from '@/components/inputs/switchField'

package/src/assets/svgIcons/expand.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M245.7,232.4c1,7.7-2.4,11.3-10.3,10.8l-62.1-6.9c-4.9-0.5-8-1.9-9.3-4.1c-1.3-2.2-0.6-4.7,2.3-7.5c1.9-1.6,4.1-3.9,6.8-6.8c2.7-2.9,5-5.2,6.8-7c1.9-2,2.4-3.8,1.8-5.4c-0.7-1.6-2-3.5-4-5.7c-4.7-4.4-9-8.5-12.9-12.1c-3.9-3.6-8.2-7.8-12.9-12.6c-1-1-2-2-3-3.2c-1-1.2-1.8-2.4-2.3-3.8c-0.5-1.4-0.6-2.9-0.2-4.4c0.3-1.6,1.4-3.3,3.3-5.1c1-1,1.9-1.9,2.5-2.6c0.7-0.7,1.3-1.4,2-2c0.7-0.6,1.4-1.2,2.1-2c0.7-0.7,1.7-1.8,2.9-3.1c3.4-3.3,6.5-4.7,9.3-4.2c2.9,0.5,6,2.4,9.3,5.7c3.4,3.3,6.8,6.6,10.3,10c3.5,3.4,7.5,7.2,11.8,11.5c3.2,3,5.9,5,8.2,6.2c2.3,1.2,4.5,0.6,6.7-1.5c1.5-1.5,3.4-3.3,5.7-5.3c2.3-2,4.2-3.9,5.9-5.5c2.9-2.8,5.4-3.9,7.7-3.2c2.3,0.7,3.7,3.1,4.2,7.4L245.7,232.4L245.7,232.4L245.7,232.4z M11.1,24c-0.5-4.3,0-7.2,1.6-8.9c1.6-1.6,4.4-2.3,8.5-2L83.2,20c5.1,0.5,8.2,1.9,9.5,4.1c1.3,2.2,0.5,4.7-2.4,7.5c-1.7,1.6-3.7,3.8-6.2,6.4c-2.4,2.6-4.6,4.8-6.4,6.6c-2,2-2.7,3.8-2,5.4c0.7,1.6,2.1,3.5,4.3,5.7c2.2,2.3,4.2,4.3,6.2,6c1.9,1.7,3.8,3.4,5.7,5.2c1.9,1.7,3.8,3.6,5.8,5.5l6.3,6.2c1,1,2,2.1,2.9,3.4c0.9,1.3,1.6,2.7,2,4.2c0.4,1.5,0.4,3-0.1,4.7c-0.5,1.6-1.6,3.3-3.3,4.9l-2.8,2.7c-0.7,0.7-1.3,1.3-1.9,2c-0.6,0.7-1.3,1.3-2.1,2l-2.8,3c-3.4,3.3-6.3,4.5-8.7,3.7c-2.4-0.8-5.3-2.9-8.7-6.2c-3.4-3.3-6.5-6.4-9.6-9.2c-3-2.9-6.7-6.5-11.1-10.7c-3-3-5.7-5-8.1-6.2c-2.4-1.2-4.6-0.7-6.8,1.5c-1.5,1.6-3.6,3.7-6.3,6c-2.7,2.4-4.9,4.4-6.5,6c-2.9,2.8-5.4,3.9-7.6,3.2c-2.2-0.7-3.5-3.1-4-7.4L11.1,24L11.1,24L11.1,24z M234.8,12.9c4.4-0.5,7.4,0,9.1,1.6c1.7,1.6,2.4,4.4,2,8.5l-7.1,60.6c-0.5,4.8-1.9,7.8-4.2,9.1c-2.3,1.3-4.8,0.5-7.7-2.5c-1.7-1.6-3.9-3.7-6.5-6c-2.7-2.4-5-4.5-6.8-6.3c-2-1.8-3.9-2.4-5.5-1.9c-1.7,0.6-3.6,1.9-5.8,4.1c-4.5,4.4-8.5,8.5-12,12.1c-3.4,3.6-7.5,7.7-12.2,12.3c-1,1-2.2,1.9-3.5,2.8c-1.3,0.9-2.8,1.6-4.3,2c-1.5,0.4-3.1,0.4-4.8-0.1s-3.4-1.6-5-3.4c-1-1-1.9-1.8-2.6-2.5s-1.5-1.3-2.1-2c-0.7-0.7-1.4-1.3-2.1-2c-0.7-0.6-1.7-1.6-2.9-3c-3.4-3.3-4.7-6.2-4-8.6c0.7-2.5,2.8-5.3,6.3-8.6l9.6-9.8c3.2-3.3,7-7.1,11.3-11.3c3.2-3,5.4-5.6,6.6-7.9c1.2-2.3,0.6-4.4-1.8-6.4c-1.5-1.5-3.4-3.5-5.8-6c-2.4-2.6-4.4-4.6-6-6.3c-2.9-2.8-3.9-5.2-3.3-7.4c0.7-2.1,3.2-3.4,7.6-3.9L234.8,12.9L234.8,12.9L234.8,12.9z M21.2,241.7c-4.2,0.3-7.2-0.3-9-1.9c-1.8-1.6-2.5-4.3-2.1-8.3l7.1-60.6c0.5-4.9,1.9-8,4.2-9.2c2.3-1.2,4.8-0.5,7.7,2.3c1.7,1.6,4,3.8,6.9,6.4c2.9,2.6,5.3,4.8,7.2,6.6c2,2,3.7,2.8,5,2.6c1.3-0.2,3-1.4,5-3.6c2.2-2.1,4.3-4.2,6.3-6.3c2-2,4-4.1,6-6c2-2,4.1-4,6.2-6.2c2.1-2.1,4.3-4.4,6.7-6.6c1-1,2.1-2,3.3-3c1.2-1,2.5-1.7,3.9-2.2s2.9-0.5,4.5-0.1c1.6,0.4,3.3,1.5,5.2,3.3c1,1,1.9,1.8,2.6,2.5c0.7,0.7,1.5,1.3,2.1,2l2,2.2l3,2.7c3.4,3.3,4.8,6.3,4.4,9c-0.4,2.7-2.4,5.8-5.9,9.2c-3.2,3.1-6.5,6.5-10.1,10c-3.5,3.5-7.5,7.4-11.8,11.7c-3,3-4.9,5.4-5.7,7.3c-0.7,1.9,0,3.9,2.1,6c1.7,1.5,3.6,3.3,5.7,5.5c2.1,2.2,4,4.1,5.7,5.8c2.9,2.8,3.9,5.2,3.2,7.4c-0.7,2.1-3.3,3.4-7.7,3.9L21.2,241.7L21.2,241.7L21.2,241.7z" style="stroke-dasharray: 1461, 1461;stroke-dashoffset: 0;fill-opacity: 1;"></path></svg>

package/src/assets/svgIcons/split.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   version="1.1"
+   id="svg854"
+   width="838"
+   height="833"
+   viewBox="0 0 838 833"
+   sodipodi:docname="split.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs858" />
+  <sodipodi:namedview
+     id="namedview856"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="0.95078031"
+     inkscape:cx="431.22475"
+     inkscape:cy="326.04798"
+     inkscape:window-width="1920"
+     inkscape:window-height="1007"
+     inkscape:window-x="1"
+     inkscape:window-y="1080"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g860" />
+  <g
+     inkscape:groupmode="layer"
+     inkscape:label="Image"
+     id="g860">
+    <path
+       style="fill:#ffffff"
+       d="m -5.0875843,441.73292 3.3936693,-93.74987 847.237645,-2.85667 -3.71049,95.94711 z m 333.6519143,232.4369 -98.27777,-105.35245 43.34233,-0.60608 c 23.83828,-0.33335 56.95483,-0.67085 73.59233,-0.75 l 30.25,-0.14392 L 376,413.05958 374.48738,213.61969 301.67731,213.3632 228.86724,213.10671 326.58798,107.77384 C 380.33439,49.84076 424.5019,2.3657611 424.73801,2.2738411 425.25724,2.0716911 628.96623,212.59506 628.96623,213.35636 c 0,0.29424 -41.55385,0.25035 -81.97885,0.25035 h -73.5 L 475,413.0466 l 1.47122,154.25779 72.81196,0.25649 72.81196,0.25649 -91.89971,99.5 -103.35334,112.2049 z"
+       id="path980"
+       sodipodi:nodetypes="cccccccsscccccsssscccccccc" />
+  </g>
+</svg>

package/src/assets/theme.js

@@ -22,6 +22,8 @@ const theme = {
     grey6: '#555d61',
     green: '#99db0c',
     transparentWhite1: '#ffffff32',
+    transparentWhite2: '#ffffff16',
+    transparentWhite3: '#ffffff48',
     transparentBlack1: '#263238e6',
     disabled: '#dfe1e1',
     eturnityGrey: '#263238'

package/src/components/addNewButton/index.vue

@@ -1,15 +1,14 @@
 <template>
   <page-container :shouldPosition="shouldPosition">
     <button-container :data-id="dataId">
-      <PlusButtonSvg />
+      <plus-button :src="require('../../assets/icons/plus_button.svg')" />
     </button-container>
   </page-container>
 </template>
 
 <script>
 // import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
-import styled from 'vue3-styled-components'
-import PlusButtonSvg from '../../assets/icons/plus_button.svg'
+import styled from 'vue-styled-components'
 
 const pageAttrs = { shouldPosition: Boolean }
 const PageContainer = styled('div', pageAttrs)`
@@ -47,8 +46,7 @@ export default {
   components: {
     PageContainer,
     ButtonContainer,
-    PlusButton,
-    PlusButtonSvg
+    PlusButton
   },
   props: {
     shouldPosition: {

package/src/components/buttons/buttonIcon/index.vue

@@ -32,7 +32,7 @@
 // />
 
 import Icon from "../../icon"
-import styled from "vue3-styled-components"
+import styled from "vue-styled-components"
 import Theme from "@/assets/theme";
 
 const PageContainer = styled.div``

package/src/components/buttons/closeButton/index.vue

@@ -13,7 +13,7 @@
 // <close-button
 //   color="#fff"
 // />
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 
 const Container = styled.div`
   position: relative;

package/src/components/buttons/mainButton/index.vue

@@ -1,7 +1,6 @@
 <template>
   <page-container>
     <button-container
-      :id="id"
       :type="type"
       :minWidth="minWidth"
       :isDisabled="isDisabled"
@@ -26,7 +25,7 @@
 //   :data-id="test_data_id"
 // />
 
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 
 const PageContainer = styled.div``
 
@@ -99,10 +98,6 @@ export default {
       required: false,
       default: null
     },
-    id: {
-      required: false,
-      default: null
-    },
     dataId: {
       type: String,
       default: ''

package/src/components/deleteIcon/DeleteIcon.stories.js

@@ -1,8 +1,8 @@
-import DeleteIcon from './index.vue'
+import DeleteIcon from "./index.vue"
 
 export default {
-  title: 'DeleteIcon',
-  component: DeleteIcon
+  title: "DeleteIcon",
+  component: DeleteIcon,
   // argTypes: {},
 }
 
@@ -11,19 +11,19 @@ const Template = (args, { argTypes }) => ({
   components: { DeleteIcon },
   // The story's `args` need to be mapped into the template through the `setup()` method
   props: Object.keys(argTypes),
-  template: '<delete-icon v-bind="$props" />'
+  template: '<delete-icon v-bind="$props" />',
 
   // import DeleteIcon from "@eturnity/eturnity_reusable_components/src/components/deleteIcon"
   // To use:
-  // <delete-icon color="gray" @click="onDeleteItem(item)" :isDisabled="true" />
+  // <delete-icon color="gray" @click.native="onDeleteItem(item)" :isDisabled="true" />
 })
 
 export const Default = Template.bind({})
 Default.args = {
-  isDisabled: false
+  isDisabled: false,
 }
 
 export const Disabled = Template.bind({})
 Disabled.args = {
-  isDisabled: true
+  isDisabled: true,
 }

package/src/components/deleteIcon/index.vue

@@ -4,62 +4,58 @@
     @mouseleave="isHovered = false"
     :isDisabled="isDisabled"
   >
-    <delete-icon-red v-if="isHovered && !isDisabled" :hoverBg="hoverBg" />
-    <delete-icon-gray v-else />
+    <icon-image
+      v-if="isHovered && !isDisabled"
+      :hoverBg="hoverBg"
+      :src="require('../../assets/icons/delete_icon.svg')"
+    />
+    <icon-image
+      v-else
+      :src="require('../../assets/icons/delete_icon_gray.svg')"
+    />
   </wrapper>
 </template>
 
 <script>
 // To use:
-// <delete-icon @click="onDeleteItem(item)" :isDisabled="true" />
-import styled from 'vue3-styled-components'
-import SvgDelete from '../../assets/icons/delete_icon.svg'
-import SvgDeleteGray from '../../assets/icons/delete_icon_gray.svg'
+// <delete-icon @click.native="onDeleteItem(item)" :isDisabled="true" />
+import styled from "vue-styled-components"
 
 const wrapperAttrs = { isDisabled: Boolean }
-const Wrapper = styled('div', wrapperAttrs)`
+const Wrapper = styled("div", wrapperAttrs)`
   width: 30px;
   height: 30px;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
 `
 
 const IconImageAttrs = { hoverBg: String }
-const DeleteIconRed = styled(SvgDelete, IconImageAttrs)`
+const IconImage = styled('img', IconImageAttrs)`
   &:hover {
-    background-color: ${(props) =>
-      props.hoverBg ? props.hoverBg : props.theme.colors.grey5};
-    border-radius: 4px;
-  }
-`
-
-const DeleteIconGray = styled(SvgDeleteGray, IconImageAttrs)`
-  &:hover {
-    background-color: ${(props) => props.theme.colors.grey5};
+    background-color: ${(props) => props.hoverBg ? props.hoverBg : props.theme.colors.grey5};
     border-radius: 4px;
   }
 `
 
 export default {
-  name: 'delete-icon',
+  name: "delete-icon",
   components: {
     Wrapper,
-    DeleteIconRed,
-    DeleteIconGray
+    IconImage,
   },
   props: {
     isDisabled: {
       required: false,
-      default: false
+      default: false,
     },
     hoverBg: {
       required: false,
-      default: ''
+      default: '',
     }
   },
   data() {
     return {
-      isHovered: false
+      isHovered: false,
     }
-  }
+  },
 }
 </script>

package/src/components/draggableInputHandle/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Handle :height="height" class="handle">
+  <Handle :height = "height" class="handle">
     <Dot></Dot>
     <Dot></Dot>
     <Dot></Dot>
@@ -7,34 +7,35 @@
 </template>
 
 <script>
-import styled from 'vue3-styled-components'
 
-const Handle = styled('div', { height: String })`
-  position: absolute;
-  left: 0;
-  margin-right: 10px;
-  display: flex;
-  align-items: stretch;
-  flex-direction: column;
-  justify-content: center;
-  width: 14px;
-  height: ${(props) => props.height};
-  padding: 0 5px;
-  background-color: #f3f3f7;
-  cursor: pointer;
-  align-items: center;
-`
+import styled from 'vue-styled-components'
+
+const Handle = styled('div',{ height : String })`
+  position:absolute;
+  left:0;
+  margin-right:10px;
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+    justify-content: center;
+    width: 14px;
+    height:${props=> props.height};
+    padding: 0 5px;
+    background-color: #f3f3f7;
+    cursor: pointer;
+    align-items: center;
+  `
 const Dot = styled.div`
-  display: inline-block;
-  width: 4px;
-  height: 4px;
-  margin: 2px;
-  background-color: #0068de;
-`
+    display: inline-block;
+    width: 4px;
+    height: 4px;
+    margin:2px;
+    background-color: #0068de;
+  `
 
 export default {
   name: 'draggableInputHandle',
-  props: ['height'],
+  props:['height'],
   components: {
     Handle,
     Dot

package/src/components/dropdown/index.vue

@@ -1,138 +1,119 @@
 <template>
-  <wrapper ref="dropdown" :openingMode="openingMode">
-    <WrapperButton @click="isOpenByClick = !isOpenByClick">
-      <slot name="trigger" />
-    </WrapperButton>
-    <WrapperDropdown
-      class="dropdown-content"
-      :class="{ openDropdown: isOpenByClick && openingMode == 'click' }"
-      :justify="justify"
-      :position="position"
-      :width="width"
-      :backgroundColor="backgroundColor"
-    >
-      <DropdownWindow
-        :gap="gap"
-        :backgroundColor="backgroundColor"
-        :width="width"
-      >
-        <slot name="dropdown" />
-      </DropdownWindow>
-    </WrapperDropdown>
-  </wrapper>
-</template>
+    <wrapper ref="dropdown" :openingMode="openingMode">
+        <WrapperButton @click="isOpenByClick=!isOpenByClick">
+            <slot name="trigger"/>
+        </WrapperButton>
+        <WrapperDropdown class="dropdown-content" :class="{openDropdown:isOpenByClick && openingMode=='click'}" :justify="justify" :position="position" :width="width" :backgroundColor="backgroundColor">
+          <DropdownWindow :gap="gap" :backgroundColor="backgroundColor" :width="width">
+            <slot name="dropdown"/>
+          </DropdownWindow>
+        </WrapperDropdown>
+    </wrapper>
+  </template>
+  
+  <script>
+  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+  //  How to use:
+  //<DropdownComponent
+  //    width="300px"
+  //    backgroundColor="red">
 
-<script>
-// import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
-//  How to use:
-//<DropdownComponent
-//    width="300px"
-//    backgroundColor="red">
+  // <DropdownComponent/>
+  
+  import styled from 'vue-styled-components'
+  
+  const wrapperAttrs = { width: String, backgroundColor:String,openingMode:String,gap:String,justify:String }
+  const Wrapper = styled('div', wrapperAttrs)`
+    display: inline-block;
+    position: relative;
 
-// <DropdownComponent/>
-
-import styled from 'vue3-styled-components'
-
-const wrapperAttrs = {
-  width: String,
-  backgroundColor: String,
-  openingMode: String,
-  gap: String,
-  justify: String
-}
-const Wrapper = styled('div', wrapperAttrs)`
-  display: inline-block;
-  position: relative;
-
-  &:hover .dropdown-content {
-    ${(props) => (props.openingMode == 'hover' ? 'display:block' : '')}
-  }
-  & .openDropdown {
-    ${(props) =>
-      props.openingMode == 'click' ? 'display:block !important' : ''}
-  }
-`
-const WrapperDropdown = styled('div', wrapperAttrs)`
-  margin-top: 0;
-  display: none;
-  position: absolute;
-  z-index: 1;
-  ${(props) => (props.justify == 'right' ? 'right:0;' : '')}
-`
-const DropdownWindow = styled('div', wrapperAttrs)`
-  width: ${(props) => props.width};
-  background-color: ${(props) =>
-    props.theme.colors[props.backgroundColor] || props.backgroundColor};
-  margin-top: ${(props) => props.gap};
-  border-radius: 4px;
-  position: relative;
-  min-width: 160px;
-  box-shadow: -1px 0px 5px rgba(0, 0, 0, 0.302);
-  z-index: 1;
-`
-
-const WrapperButton = styled('div', wrapperAttrs)`
-  display: inline-block;
-`
-
-export default {
-  name: 'DropdownComponent',
-  components: {
-    WrapperDropdown,
-    WrapperButton,
-    Wrapper,
-    DropdownWindow
-  },
-  props: {
-    width: {
-      required: false,
-      default: '300px'
+    &:hover .dropdown-content {
+        ${props=>props.openingMode=='hover'?"display:block":""}
+    }
+    & .openDropdown{
+        ${props=>props.openingMode=='click'?"display:block !important":""}
+    }
+  `
+  const WrapperDropdown = styled('div', wrapperAttrs)`
+    margin-top: 0;
+    display: none;
+    position: absolute;
+    z-index: 1;
+    ${(props) => props.justify=="right"?"right:0;":""}
+  `
+  const DropdownWindow = styled('div', wrapperAttrs)`
+    width: ${(props) => props.width};
+    background-color: ${(props) => props.theme.colors[props.backgroundColor] || props.backgroundColor};
+    margin-top: ${(props) => props.gap};
+    border-radius: 4px;
+    position: relative;
+    min-width: 160px;
+    box-shadow: -1px 0px 5px rgba(0, 0, 0, 0.302);
+    z-index: 1;
+  `
+  
+  const WrapperButton = styled('div', wrapperAttrs)`
+    display: inline-block;
+  `
+  
+  export default {
+    name: 'DropdownComponent',
+    components: {
+        WrapperDropdown,
+        WrapperButton,
+        Wrapper,
+        DropdownWindow
     },
-    gap: {
-      required: false,
-      default: '10px'
+    props: {
+      width: {
+        required: false,
+        default: '300px'
+      },
+      gap: {
+        required: false,
+        default: '10px'
+      },
+      position: {
+        required: false,
+        default: 'bottom'
+      },
+      justify: {
+        required: false,
+        default: 'left'
+      },
+      openingMode: {
+        required: false,
+        default: 'hover'
+      },
+      backgroundColor: {
+        required: false,
+        default: 'white'
+      }
     },
-    position: {
-      required: false,
-      default: 'bottom'
+    data() {
+      return {
+        isOpenByClick:false
+      }
     },
-    justify: {
-      required: false,
-      default: 'left'
+    methods:{
+        clickOutside(event) {
+            if (this.openingMode!="click") return
+            if (
+                this.$refs.dropdown.$el == event.target ||
+                this.$refs.dropdown.$el.contains(event.target)
+            ) {
+                return
+            } else {
+                this.isOpenByClick=false
+            }
+        },
     },
-    openingMode: {
-      required: false,
-      default: 'hover'
+    mounted() {
+        document.addEventListener('click', this.clickOutside)
+    },
+    beforeDestroy() {
+        document.removeEventListener('click', this.clickOutside)
     },
-    backgroundColor: {
-      required: false,
-      default: 'white'
-    }
-  },
-  data() {
-    return {
-      isOpenByClick: false
-    }
-  },
-  methods: {
-    clickOutside(event) {
-      if (this.openingMode != 'click') return
-      if (
-        this.$refs.dropdown &&
-        (this.$refs.dropdown.$el == event.target ||
-          this.$refs.dropdown.$el.contains(event.target))
-      ) {
-        return
-      } else {
-        this.isOpenByClick = false
-      }
-    }
-  },
-  mounted() {
-    document.addEventListener('click', this.clickOutside)
-  },
-  beforeDestroy() {
-    document.removeEventListener('click', this.clickOutside)
   }
-}
-</script>
+  </script>
+