@eturnity/eturnity_reusable_components 6.33.1-EPDM-7956 → 6.33.1-EPDM-7762.1

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": "6.33.1-EPDM-7956",
+  "version": "6.33.1-EPDM-7762.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -10,24 +10,27 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@storybook/vue3": "^7.0.18",
-    "@vue/compat": "^3.3.4",
     "@vueform/slider": "1.0.5",
-    "external-svg-loader": "^1.6.7",
+    "core-js": "^3.31.1",
     "html-loader": "0.5.5",
     "v-click-outside": "2.1.4",
-    "vue": "3.3.4",
-    "vue3-styled-components": "^1.2.1"
+    "vue": "2.6.11",
+    "vue-styled-components": "1.6.0"
   },
   "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,
@@ -39,7 +42,7 @@
       "eslint:recommended"
     ],
     "parserOptions": {
-      "parser": "@babel/eslint-parser"
+      "parser": "babel-eslint"
     },
     "rules": {}
   },

package/src/App.vue

@@ -94,9 +94,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/theme.js

@@ -3,7 +3,7 @@ const theme = {
     primary: '#48a2d0',
     secondary: '#fdb813',
     tertiary: '#d5d5d5',
-    black: '#353535',
+    black: '#263238',
     yellow: '#fdb813',
     darkGray: '#818181',
     gray1: '#666',
@@ -20,8 +20,8 @@ const theme = {
     grey5: '#fafafa',
     grey6: '#555d61',
     green: '#99db0c',
-    transparentWhite1:'#ffffff32',
-    transparentBlack1:'#263238e6',
+    transparentWhite1: '#ffffff32',
+    transparentBlack1: '#263238e6',
     disabled: '#dfe1e1',
     eturnityGrey: '#263238'
   },

package/src/components/addNewButton/index.vue

@@ -8,7 +8,7 @@
 
 <script>
 // import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
-import styled from "vue3-styled-components"
+import styled from "vue-styled-components"
 
 const pageAttrs = { shouldPosition: Boolean }
 const PageContainer = styled("div", pageAttrs)`

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

@@ -22,7 +22,7 @@
 //   :minWidth="minWidth"
 // />
 
-import styled from "vue3-styled-components"
+import styled from "vue-styled-components"
 
 const PageContainer = styled.div``
 

package/src/components/deleteIcon/index.vue

@@ -19,7 +19,7 @@
 <script>
 // To use:
 // <delete-icon @click.native="onDeleteItem(item)" :isDisabled="true" />
-import styled from "vue3-styled-components"
+import styled from "vue-styled-components"
 
 const wrapperAttrs = { isDisabled: Boolean }
 const Wrapper = styled("div", wrapperAttrs)`

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>
+  

package/src/components/errorMessage/index.vue

@@ -13,7 +13,7 @@
 //     alignText="right" // default is left
 // />
 
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 
 const TextOverlay = styled.div`
   position: absolute;

package/src/components/icon/iconCollection.vue

@@ -16,7 +16,7 @@
 
 <script>
 import icon from './index.vue'
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 
 const Wrapper = styled.div`
   display: block;
@@ -36,7 +36,7 @@ const IconWrapper = styled.div`
   margin: 10px;
 `
 export default {
-  name: 'collectionComponent',
+  name: 'collection',
   components: { icon, IconWrapper, Wrapper },
   props: {
     size: { required: false },

package/src/components/icon/index.vue

@@ -1,12 +1,18 @@
 <template>
   <Wrapper :isDisabled="disabled" :size="size" :cursor="cursor">
-    <IconImage :size="size" :color="color" :hoveredColor="hoveredColor">
-      <i v-html="svgIconModule"></i>
-    </IconImage>
+    <icon-image
+      :disabled="disabled"
+      :size="size"
+      :color="color"
+      :hoveredColor="hoveredColor"
+      v-html="
+        require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
+      "
+    ></icon-image>
   </Wrapper>
 </template>
 
-<script setup>
+<script>
 // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
 //  How to use:
 //<icon
@@ -17,8 +23,8 @@
 //   cursor="default"
 // />
 
-import { computed } from 'vue'
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
+
 const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
 const Wrapper = styled('div', wrapperAttrs)`
   display: flex;
@@ -46,37 +52,37 @@ const IconImage = styled('div', IconImageProps)`
   }
 `
 
-const props = defineProps({
-  disabled: {
-    required: false,
-    default: false
-  },
-  name: {
-    required: true
-  },
-  color: {
-    required: false
-  },
-  hoveredColor: {
-    required: false
+export default {
+  name: 'icon',
+  components: {
+    IconImage,
+    Wrapper
   },
-  size: {
-    required: false,
-    default: '30px'
+  props: {
+    disabled: {
+      required: false,
+      default: false
+    },
+    name: {
+      required: true
+    },
+    color: {
+      required: false
+    },
+    hoveredColor: {
+      required: false
+    },
+    size: {
+      required: false,
+      default: '30px'
+    },
+    cursor: {
+      required: false,
+      default: null
+    }
   },
-  cursor: {
-    required: false,
-    default: null
+  data() {
+    return {}
   }
-})
-
-const svgIconsContext = import.meta.glob('../../assets/svgIcons/*.svg', {
-  as: 'raw'
-})
-
-const svgIconModule = computed(() => {
-  const moduleKey = `../../assets/svgIcons/${props.name}.svg`
-
-  return svgIconsContext[moduleKey]
-})
+}
 </script>

package/src/components/iconWrapper/index.vue

@@ -34,7 +34,7 @@
   //   size="60px" by default, this is 30px
   // />
   
-  import styled from 'vue3-styled-components'
+  import styled from 'vue-styled-components'
   import icon from '../icon'
   const wrapperAttrs = { isHovered:Boolean,borderRadius:String,disabled: Boolean, size: String,backgroundColor:String,hoveredBackgroundColor:String }
   const Wrapper = styled('div', wrapperAttrs)`

package/src/components/infoText/index.vue

@@ -32,7 +32,7 @@
 //     alignArrow="right" // which side the arrow should be on
 // />
 import theme from '../../assets/theme.js'
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import icon from '../icon'
 
 const textAttrs = {
@@ -156,7 +156,11 @@ export default {
   },
   computed: {
     iconColor() {
-      return theme.colors.mediumGray
+      return this.isActive
+        ? this.borderColor
+          ? this.borderColor
+          : theme.colors.secondary
+        : theme.colors.mediumGray
     },
     halfComputedTextInfoWidth() {
       return parseInt(this.width) / 2

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

@@ -33,7 +33,7 @@
 //     backgroundColor="red"
 //     :isDisabled="true"
 // />
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 
 const ComponentWrapper = styled.div`
   min-height: 18px;

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

@@ -48,6 +48,7 @@
         :fontSize="fontSize"
         :fontColor="fontColor"
         :backgroundColor="backgroundColor"
+        v-on="$listeners"
         :hasSlot="hasSlot"
         :hasLabelSlot="hasLabelSlot"
         :slotSize="slotSize"
@@ -97,7 +98,7 @@
 //     :minNumber="0"
 //     fontColor="blue"
 // />
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import {
   stringToNumber,
   numberToString

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

@@ -44,7 +44,7 @@
 //   number_max_allowed: 10,
 //   unit_short_name: "cm",
 // },
-import styled from "vue3-styled-components"
+import styled from "vue-styled-components"
 import {
   stringToNumber,
   numberToString,

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

@@ -59,7 +59,7 @@
 </template>
 
 <script>
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
 import Icon from '../../icon'
 import ErrorMessage from '../../errorMessage'
@@ -313,8 +313,8 @@ export default {
     }
   },
   methods: {
-    onChangeHandler(event) {
-      this.$emit('input-change', event.target.value)
+    onChangeHandler($event) {
+      this.$emit('input-change', $event)
     },
     onInputBlur($event) {
       this.$emit('input-blur', $event.target.value)

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

@@ -54,7 +54,7 @@
 //   { label: 'Button 4', value: 'button_4', disabled: true }
 // ]
 
-import styled from "vue3-styled-components"
+import styled from "vue-styled-components"
 import Modal from "../../modals/modal"
 import InfoText from "../../infoText"
 

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

@@ -29,7 +29,7 @@
 //   inputWidth="250px"
 //   @on-change="function($event)"
 // />
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 
 const Container = styled.div`
   width: 100%;

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

@@ -131,7 +131,7 @@
 //     </template>
 // </Select>
 
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
 import icon from '../../icon'
 import inputText from '../inputText'
@@ -153,7 +153,7 @@ const Selector = styled.div`
   width: 100%;
 `
 
-const labelAttrs = { fontSize: String }
+const labelAttrs = { fontSize: String, fontColor: String }
 const InputLabel = styled('div', labelAttrs)`
   color: ${(props) =>
     props.theme.colors[props.fontColor]
@@ -427,7 +427,9 @@ export default {
       const optionElement = this.$el.querySelector(`[data-value="${e}"]`)
       if (this.$refs.dropdown) {
         this.hoveredIndex =
-          [...this.$refs.dropdown.$el.children].indexOf(optionElement) + 1
+          this.$refs.dropdown.$children
+            .map((component) => component.$el)
+            .indexOf(optionElement) + 1
       }
     },
     mouseEnterHandler() {
@@ -444,13 +446,15 @@ export default {
     searchChange(value) {
       this.textSearch = value
       this.$emit('search-change', value)
-      ;[...this.$refs.dropdown.$el.children].forEach((el) => {
-        if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {
-          el.style.display = 'none'
-        } else {
-          el.style.display = 'inherit'
-        }
-      })
+      this.$refs.dropdown.$children
+        .map((component) => component.$el)
+        .forEach((el) => {
+          if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {
+            el.style.display = 'none'
+          } else {
+            el.style.display = 'inherit'
+          }
+        })
     },
     onSelectSlotClick() {
       this.toggleDropdown()
@@ -472,9 +476,10 @@ export default {
       } else if (e.key == 'ArrowUp') {
         this.onArrowPress(-1)
       } else if (e.key == 'Enter') {
-        const optionHoveredComponent = [...this.$refs.dropdown.$el.children][
-          (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
-        ]
+        const optionHoveredComponent =
+          this.$refs.dropdown.$children[
+            (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
+          ]
         this.optionSelected(optionHoveredComponent.$el.dataset.value)
       }
     },
@@ -483,9 +488,10 @@ export default {
         ((this.hoveredIndex + dir + this.optionLength - 1) %
           this.optionLength) +
         1
-      const optionHoveredComponent = [...this.$refs.dropdown.$el.children][
-        (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
-      ]
+      const optionHoveredComponent =
+        this.$refs.dropdown.$children[
+          (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
+        ]
       const topPos = optionHoveredComponent.$el.offsetTop
       this.$refs.dropdown.$el.scrollTop = topPos
     }
@@ -493,7 +499,7 @@ export default {
   computed: {
     optionLength() {
       if (this.isDropdownOpen) {
-        return this.$refs.dropdown.$el.childElementCount
+        return this.$refs.dropdown.$children.length
       } else {
         return 0
       }

package/src/components/inputs/select/option/index.vue

@@ -7,7 +7,7 @@
   <script>
 //   import selectButton from './selectButton'
 //   import selectDropdown from './selectDropDown'
-  import styled from 'vue3-styled-components'
+  import styled from 'vue-styled-components'
   const optionProps={hoveredBgColor:String}
   const optionContainer = styled('div',optionProps)`
     display:flex;

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

@@ -22,7 +22,7 @@
 //     :maxValue="500" //default is 100 if not specified
 // />
 import Slider from "@vueform/slider/dist/slider.vue2.js"
-import styled from "vue3-styled-components"
+import styled from "vue-styled-components"
 
 const Container = styled.div`
   margin: 16px 0 16px 21px;

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

@@ -73,7 +73,7 @@
 //   :disabled="false"
 // />
 
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
 import theme from '../../../assets/theme'
 const Container = styled.div``

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

@@ -51,7 +51,7 @@
 //     :isDisabled="true"
 // .   fontSize="13px"
 // />
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
 import ErrorMessage from '../../errorMessage'
 

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

@@ -71,7 +71,7 @@
 //   infoTextMessage="My info message"
 // />
 
-import styled from "vue3-styled-components"
+import styled from "vue-styled-components"
 import InfoText from "../../infoText"
 
 const Container = styled.div`

package/src/components/modals/modal/index.vue

@@ -28,7 +28,7 @@
 //   <div>Data....</div>
 // </modal>
 
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import CloseButton from '../../buttons/closeButton'
 import Spinner from '../../spinner'
 

package/src/components/pageSubtitle/index.vue

@@ -21,7 +21,7 @@
 //   color="red"
 //   infoText="My info text"
 // />
-import styled from "vue3-styled-components"
+import styled from "vue-styled-components"
 import InfoText from "../infoText"
 
 const textAttrs = { color: String, hasInfoText: Boolean, marginBottom: String }

package/src/components/pageTitle/index.vue

@@ -9,7 +9,7 @@
 //   text="My Page Title"
 //   color="red"
 // />
-import styled from "vue3-styled-components"
+import styled from "vue-styled-components"
 
 const textAttrs = { color: String, fontSize: String, uppercase: Boolean }
 const TitleText = styled("div", textAttrs)`

package/src/components/pagination/index.vue

@@ -11,17 +11,17 @@
         </arrowIconContainer>
           <arrowText>{{ $gettext('back') }}</arrowText>
         </paginationLink>
-
+  
         <!-- First page -->
         <paginationLink
           v-if="currentPage > 2 && paginationParams.pages > 3"
           @click="fetchPage(1)"
           >1</paginationLink
         >
-
+  
         <!-- Back tree dots -->
         <span v-if="currentPage > 3 && paginationParams.pages > 4">...</span>
-
+  
         <!-- Current block -->
         <paginationLink
           v-for="number in paginationNumbers()"
@@ -30,7 +30,7 @@
           @click="fetchPage(number)"
           >{{ number }}</paginationLink
         >
-
+  
         <!-- Forward tree dots -->
         <span
           v-if="
@@ -38,7 +38,7 @@
           "
           >...</span
         >
-
+  
         <!-- End page -->
         <paginationLink
           v-if="
@@ -47,7 +47,7 @@
           @click="fetchPage(paginationParams.pages)"
           >{{ paginationParams.pages }}</paginationLink
         >
-
+  
         <!-- Forward button -->
         <paginationLink
           v-if="paginationParams.next"
@@ -60,12 +60,11 @@
         </paginationLink>
     </paginationWrapper>
   </template>
-
-<script>
-import styled from "vue3-styled-components"
-import icon from "../icon"
-
-const paginationWrapper=styled.nav`
+  
+  <script>
+import styled from "vue-styled-components"
+  import icon from "../icon"
+  const paginationWrapper=styled.nav`
     color: #1a237e;
     font-size: 13px;
     display: -webkit-box;
@@ -135,3 +134,4 @@ const paginationWrapper=styled.nav`
     }
   }
   </script>
+  

package/src/components/progressBar/index.vue

@@ -31,7 +31,7 @@
 //   stepNumber="4"
 //   :labelText="translate('step')"
 // />
-import styled from "vue3-styled-components"
+import styled from "vue-styled-components"
 
 const Container = styled.div`
   display: grid;

package/src/components/projectMarker/index.vue

@@ -88,7 +88,7 @@
 //   @deleteHandler="onMarkerDelete($event)"
 // />
 
-import styled from "vue3-styled-components"
+import styled from "vue-styled-components"
 import Icon from "../icon"
 import Modal from '../modals/modal'
 import PageTitle from '../pageTitle'

package/src/components/spinner/index.vue

@@ -18,7 +18,7 @@
 <script>
 // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
 // <spinner size="30px" />
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 
 const SpinnerContainer = styled.div`
   position: fixed;

package/src/components/tableDropdown/index.vue

@@ -186,10 +186,10 @@
 //   :optionsDisplay="['display_name', 'company_item_number']" // Array. what should be displayed
 //   :disabled="true"
 // />
-import styled from 'vue3-styled-components'
-import Spinner from '@/components/spinner'
-import SearchInput from '@/components/inputs/searchInput'
-import InputText from '@/components/inputs/inputText'
+import styled from 'vue-styled-components'
+import Spinner from '@eturnity/eturnity_reusable_components/src/components/spinner'
+import SearchInput from '@eturnity/eturnity_reusable_components/src/components/inputs/searchInput'
+import InputText from '@eturnity/eturnity_reusable_components/src/components/inputs/inputText'
 
 const rowAttrs = { disabled: Boolean, isOpen: Boolean }
 const DropdownRow = styled('div', rowAttrs)`

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

@@ -161,7 +161,7 @@
 
 <script>
 import draggable from "vuedraggable"
-import styled from "vue3-styled-components"
+import styled from "vue-styled-components"
 import MainTable from "@/components/reusable-components/tables/MainTable"
 import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
 import DeleteIcon from "@/components/reusable-components/DeleteIcon"

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

@@ -23,7 +23,7 @@
 <script>
 // ToDo: add this to storybook
 // import MainTable from "@eturnity/eturnity_reusable_components/src/components/tables/mainTable"
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import Spinner from '../../spinner'
 
 const PageContainer = styled.div``

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

@@ -45,9 +45,9 @@
 // This is a read only table. Pass it data, and it displays it
 // ToDo: add this to storybook
 // import ViewTable from "@eturnity/eturnity_reusable_components/src/components/tables/viewTable"
-import styled from "vue3-styled-components"
-import DeleteIcon from "../../deleteIcon"
-import Spinner from "../../spinner"
+import styled from 'vue-styled-components'
+import DeleteIcon from '../../deleteIcon'
+import Spinner from '../../spinner'
 
 const TableScroll = styled.div`
   position: relative;

package/src/components/threeDots/index.vue

@@ -121,7 +121,7 @@
 //         },
 //       ],
 
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import Spinner from '../spinner'
 
 const PageContainer = styled.div`

package/src/components/videoThumbnail/index.vue

@@ -1,103 +1,108 @@
 <template>
-  <wrapper :width="width" :height="height" :fit="fit">
-    <img :src="src" />
-    <iconWrapper>
-      <icon name="play" :size="playIconSize" :color="playIconColor" />
-    </iconWrapper>
-  </wrapper>
-</template>
-
-<script>
-// import VideoThumbnail from "@eturnity/eturnity_reusable_components/src/components/videoThumbnail"
-//  How to use:
-//<videoThumbnail src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080"
-//   playIconColor="red"
-//   playIconSize="20px"
-//   width="400px"
-//   height="600px"
-//   />
-
-import styled from 'vue3-styled-components'
-import Icon from '../icon'
-
-const wrapperAttrs = { width: String, height: String, fit: String }
-const Wrapper = styled('div', wrapperAttrs)`
-  display: inline-block;
-  position: relative;
-  width: ${(props) => props.width};
-  height: ${(props) => props.height};
-  & img {
-    object-fit: ${(props) => props.fit};
-    width: ${(props) => props.width};
-    height: ${(props) => props.height};
-  }
-`
-const iconWrapper = styled('div')`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
+    <wrapper :width="width" :height="height" :fit="fit">
+      <img :src="src">
+      <iconWrapper>
+        <icon
+            name="play"
+            :size="playIconSize"
+            :color="playIconColor"
+            />
+        </iconWrapper>
+    </wrapper>
+  </template>
+  
+  <script>
+    // import VideoThumbnail from "@eturnity/eturnity_reusable_components/src/components/videoThumbnail"
+    //  How to use:
+    //<videoThumbnail src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080" 
+    //   playIconColor="red"
+    //   playIconSize="20px"
+    //   width="400px"
+    //   height="600px"
+    //   />
+  
+  import styled from 'vue-styled-components'
+  import Icon from '../icon'
+  
+  const wrapperAttrs = { width: String, height:String,fit:String }
+  const Wrapper = styled('div', wrapperAttrs)`
+    display: inline-block;
+    position: relative;
+    width:${props=>props.width};
+    height:${props=>props.height};
+    & img{
+        object-fit:${props=>props.fit};
+        width:${props=>props.width};
+        height:${props=>props.height};
+    }
+  `  
+  const iconWrapper = styled('div')`
+    position: absolute;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    display:flex;
+    justify-content:center;
+    align-items: center;
+  `  
 
-export default {
-  name: 'VideoThumbnail',
-  components: {
-    Wrapper,
-    Icon,
-    iconWrapper
-  },
-  props: {
-    src: {
-      required: true
+  export default {
+    name: 'VideoThumbnail',
+    components: {
+        Wrapper,
+        Icon,
+        iconWrapper
     },
-    fit: {
-      required: false,
-      default: 'cover'
+    props: {
+        src:{
+            required: true,
+        },
+        fit:{
+            required: false,
+            default: 'cover'
+        },
+        width: {
+            required: false,
+            default: '300px'
+        },
+        height: {
+            required: false,
+            default: '200px'
+        },
+        playIconSize:{
+            required: false,
+            default: '50px'
+        },
+        playIconColor:{
+            required: false,
+            default: 'blue'
+        }
     },
-    width: {
-      required: false,
-      default: '300px'
+    data() {
+      return {
+        isOpenByClick:false
+      }
     },
-    height: {
-      required: false,
-      default: '200px'
+    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
+            }
+        },
     },
-    playIconSize: {
-      required: false,
-      default: '50px'
+    mounted() {
+        document.addEventListener('click', this.clickOutside)
+    },
+    beforeDestroy() {
+        document.removeEventListener('click', this.clickOutside)
     },
-    playIconColor: {
-      required: false,
-      default: 'blue'
-    }
-  },
-  data() {
-    return {
-      isOpenByClick: false
-    }
-  },
-  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
-      }
-    }
-  },
-  mounted() {
-    document.addEventListener('click', this.clickOutside)
-  },
-  beforeDestroy() {
-    document.removeEventListener('click', this.clickOutside)
   }
-}
-</script>
+  </script>
+  

package/src/main.js

@@ -1,8 +1,13 @@
+import Vue from "vue"
 import App from "./App.vue"
+import VueCompositionAPI from "@vue/composition-api"
+import vClickOutside from 'v-click-outside'
 
-import { createApp } from 'vue'
+Vue.config.productionTip = false
 
-const app = createApp(App)
-
-app.mount('#app')
+Vue.use(VueCompositionAPI)
+Vue.use(vClickOutside)
 
+new Vue({
+  render: (h) => h(App),
+}).$mount("#app")