@eturnity/eturnity_reusable_components 7.18.0--EPDM-9013.1 → 7.18.0-EPDM-10335.0

package/.storybook/preview.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.18.0--EPDM-9013.1",
+  "version": "7.18.0-EPDM-10335.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -10,30 +10,26 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@vueform/slider": "1.0.5",
+    "@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",
     "html-loader": "0.5.5",
-    "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"
+    "postcss": "8.4.25",
+    "vue": "3.3.4",
+    "vue3-styled-components": "1.2.1",
+    "vuedraggable": "4.1.0"
   },
   "devDependencies": {
-    "@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"
+    "@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"
   },
   "eslintConfig": {
     "root": true,
@@ -45,7 +41,7 @@
       "eslint:recommended"
     ],
     "parserOptions": {
-      "parser": "babel-eslint"
+      "parser": "@babel/eslint-parser"
     },
     "rules": {}
   },

package/src/App.vue

@@ -55,9 +55,9 @@
 </template>
 
 <script>
-import { ThemeProvider } from 'vue-styled-components'
+import { ThemeProvider } from 'vue3-styled-components'
 import theme from './assets/theme'
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import InputNumber from '@/components/inputs/inputNumber'
 
 const PageContainer = styled.div`

package/src/components/addNewButton/index.vue

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

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

@@ -32,7 +32,7 @@
 // />
 
 import Icon from "../../icon"
-import styled from "vue-styled-components"
+import styled from "vue3-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 'vue-styled-components'
+import styled from 'vue3-styled-components'
 
 const Container = styled.div`
   position: relative;

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

@@ -1,6 +1,7 @@
 <template>
   <page-container>
     <button-container
+      :id="id"
       :type="type"
       :minWidth="minWidth"
       :isDisabled="isDisabled"
@@ -25,7 +26,7 @@
 //   :data-id="test_data_id"
 // />
 
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 
 const PageContainer = styled.div``
 
@@ -98,6 +99,10 @@ 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.native="onDeleteItem(item)" :isDisabled="true" />
+  // <delete-icon color="gray" @click="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,58 +4,62 @@
     @mouseleave="isHovered = false"
     :isDisabled="isDisabled"
   >
-    <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')"
-    />
+    <delete-icon-red v-if="isHovered && !isDisabled" :hoverBg="hoverBg" />
+    <delete-icon-gray v-else />
   </wrapper>
 </template>
 
 <script>
 // To use:
-// <delete-icon @click.native="onDeleteItem(item)" :isDisabled="true" />
-import styled from "vue-styled-components"
+// <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'
 
 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 IconImage = styled('img', IconImageAttrs)`
+const DeleteIconRed = styled(SvgDelete, IconImageAttrs)`
   &:hover {
-    background-color: ${(props) => props.hoverBg ? props.hoverBg : props.theme.colors.grey5};
+    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};
     border-radius: 4px;
   }
 `
 
 export default {
-  name: "delete-icon",
+  name: 'delete-icon',
   components: {
     Wrapper,
-    IconImage,
+    DeleteIconRed,
+    DeleteIconGray
   },
   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,35 +7,34 @@
 </template>
 
 <script>
+import styled from 'vue3-styled-components'
 
-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 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,119 +1,138 @@
 <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">
+  <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>
 
-  // <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;
+<script>
+// import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+//  How to use:
+//<DropdownComponent
+//    width="300px"
+//    backgroundColor="red">
 
-    &: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'
-      },
-      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'
-      }
+// <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'
     },
-    data() {
-      return {
-        isOpenByClick:false
-      }
+    gap: {
+      required: false,
+      default: '10px'
     },
-    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
-            }
-        },
+    position: {
+      required: false,
+      default: 'bottom'
     },
-    mounted() {
-        document.addEventListener('click', this.clickOutside)
+    justify: {
+      required: false,
+      default: 'left'
     },
-    beforeDestroy() {
-        document.removeEventListener('click', this.clickOutside)
+    openingMode: {
+      required: false,
+      default: 'hover'
     },
+    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>

package/src/components/errorMessage/index.vue

@@ -1,6 +1,6 @@
 <template>
   <component-wrapper>
-    <text-overlay>
+    <text-overlay :marginTop="marginTop">
       <slot></slot>
     </text-overlay>
   </component-wrapper>
@@ -11,11 +11,11 @@
 //To use:
 // <error-message />
 
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 
-const TextOverlay = styled.div`
+const TextOverlay = styled('div', { marginTop: String })`
   position: absolute;
-  top: calc(100% + 13px);
+  top: calc(100% + ${(props) => props.marginTop});
   background: ${(props) => props.theme.colors.red};
   padding: 10px;
   width: max-content;
@@ -50,7 +50,12 @@ export default {
     TextOverlay,
     ComponentWrapper
   },
-  props: {},
+  props: {
+    marginTop: {
+      required: false,
+      default: '13px'
+    }
+  },
   methods: {},
   data() {
     return {}