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

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

package/src/App.vue

@@ -94,9 +94,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'
 import Select from '@/components/inputs/select'
 import SwitchField from '@/components/inputs/switchField'

package/src/components/addNewButton/index.vue

@@ -8,7 +8,7 @@
 
 <script>
 // import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
-import styled from "vue-styled-components"
+import styled from "vue3-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 "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

@@ -22,7 +22,7 @@
 //   :minWidth="minWidth"
 // />
 
-import styled from "vue-styled-components"
+import styled from "vue3-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 "vue-styled-components"
+import styled from "vue3-styled-components"
 
 const wrapperAttrs = { isDisabled: Boolean }
 const Wrapper = styled("div", wrapperAttrs)`

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

@@ -13,7 +13,7 @@
 //     alignText="right" // default is left
 // />
 
-import styled from 'vue-styled-components'
+import styled from 'vue3-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 'vue-styled-components'
+import styled from 'vue3-styled-components'
 
 const Wrapper = styled.div`
   display: block;
@@ -36,7 +36,7 @@ const IconWrapper = styled.div`
   margin: 10px;
 `
 export default {
-  name: 'collection',
+  name: 'collectionComponent',
   components: { icon, IconWrapper, Wrapper },
   props: {
     size: { required: false },

package/src/components/icon/index.vue

@@ -1,18 +1,12 @@
 <template>
   <Wrapper :isDisabled="disabled" :size="size" :cursor="cursor">
-    <icon-image
-      :disabled="disabled"
-      :size="size"
-      :color="color"
-      :hoveredColor="hoveredColor"
-      v-html="
-        require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
-      "
-    ></icon-image>
+    <IconImage :size="size" :color="color" :hoveredColor="hoveredColor">
+      <i v-html="svgIconModule"></i>
+    </IconImage>
   </Wrapper>
 </template>
 
-<script>
+<script setup>
 // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
 //  How to use:
 //<icon
@@ -23,8 +17,8 @@
 //   cursor="default"
 // />
 
-import styled from 'vue-styled-components'
-
+import { computed } from 'vue'
+import styled from 'vue3-styled-components'
 const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
 const Wrapper = styled('div', wrapperAttrs)`
   display: flex;
@@ -52,37 +46,37 @@ const IconImage = styled('div', IconImageProps)`
   }
 `
 
-export default {
-  name: 'icon',
-  components: {
-    IconImage,
-    Wrapper
+const props = defineProps({
+  disabled: {
+    required: false,
+    default: false
+  },
+  name: {
+    required: true
+  },
+  color: {
+    required: false
+  },
+  hoveredColor: {
+    required: false
   },
-  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
-    }
+  size: {
+    required: false,
+    default: '30px'
   },
-  data() {
-    return {}
+  cursor: {
+    required: false,
+    default: null
   }
-}
+})
+
+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 'vue-styled-components'
+  import styled from 'vue3-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 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import icon from '../icon'
 
 const textAttrs = {
@@ -156,11 +156,7 @@ export default {
   },
   computed: {
     iconColor() {
-      return this.isActive
-        ? this.borderColor
-          ? this.borderColor
-          : theme.colors.secondary
-        : theme.colors.mediumGray
+      return 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 'vue-styled-components'
+import styled from 'vue3-styled-components'
 
 const ComponentWrapper = styled.div`
   min-height: 18px;

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

@@ -48,7 +48,6 @@
         :fontSize="fontSize"
         :fontColor="fontColor"
         :backgroundColor="backgroundColor"
-        v-on="$listeners"
         :hasSlot="hasSlot"
         :hasLabelSlot="hasLabelSlot"
         :slotSize="slotSize"
@@ -98,7 +97,7 @@
 //     :minNumber="0"
 //     fontColor="blue"
 // />
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import {
   stringToNumber,
   numberToString
@@ -311,8 +310,7 @@ export default {
     return {
       textInput: '',
       isFocused: false,
-      warningIcon: warningIcon,
-      isBlurred: false
+      warningIcon: warningIcon
     }
   },
   props: {
@@ -489,9 +487,7 @@ export default {
           return num
         }
       })
-      let evaluated
-      formatted = this.removeStringItemsAfterLastNumber(formatted)
-      evaluated = eval(formatted.join(' '))
+      let evaluated = eval(formatted.join(''))
       if (typeof evaluated === 'string') {
         evaluated = stringToNumber({
           value: evaluated,
@@ -502,32 +498,7 @@ export default {
       }
       return evaluated
     },
-    removeStringItemsAfterLastNumber(array) {
-      // fixed in EPDM-6487, in order to prevent 'Unexpected end of input'
-      let lastNumberIndex = -1
-      // Find the index of the last number in the array
-      for (let i = array.length - 1; i >= 0; i--) {
-        if (typeof array[i] === 'number') {
-          lastNumberIndex = i
-          break
-        }
-      }
-      // if there are no numbers, return an empty array
-      if (lastNumberIndex === -1) {
-        return []
-      }
-      // Remove non-numeric items after the last number
-      if (lastNumberIndex !== -1) {
-        const newArray = array.slice(0, lastNumberIndex + 1)
-        return newArray
-      }
-      return array
-    },
     onInput(value) {
-      if (this.isBlurred) {
-        this.isBlurred = false
-        return
-      }
       if (value === '') {
         this.$emit('on-input', '')
       }
@@ -542,8 +513,6 @@ export default {
     },
     onInputBlur(e) {
       this.isFocused = false
-      // setting isBlurred so we don't trigger onInput as well
-      this.isBlurred = true
       let value = e.target.value
       let evaluatedInput = this.onEvaluateCode(value)
       this.onChangeHandler(evaluatedInput ? evaluatedInput : value)

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

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

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

@@ -59,7 +59,7 @@
 </template>
 
 <script>
-import styled from 'vue-styled-components'
+import styled from 'vue3-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)
+    onChangeHandler(event) {
+      this.$emit('input-change', event.target.value)
     },
     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 "vue-styled-components"
+import styled from "vue3-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 'vue-styled-components'
+import styled from 'vue3-styled-components'
 
 const Container = styled.div`
   width: 100%;

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

@@ -14,9 +14,11 @@
             labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
           "
           :fontSize="fontSize"
-          >{{ label }} <optionalLabel v-if="labelOptional"> ({{ $gettext('Optional') }})</optionalLabel>
-          </input-label
-        >
+          >{{ label }}
+          <optionalLabel v-if="labelOptional">
+            ({{ $gettext('Optional') }})</optionalLabel
+          >
+        </input-label>
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
@@ -129,7 +131,7 @@
 //     </template>
 // </Select>
 
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import InfoText from '../../infoText'
 import icon from '../../icon'
 import inputText from '../inputText'
@@ -162,7 +164,6 @@ const InputLabel = styled('div', labelAttrs)`
 `
 const optionalLabel = styled.span`
   font-weight: 300;
-
 `
 const inputProps = { selectWidth: String, optionWidth: String }
 const Container = styled('div', inputProps)`
@@ -198,8 +199,7 @@ const selectButton = styled('div', selectButtonAttrs)`
   position: relative;
   box-sizing: border-box;
   border-radius: 4px;
-  padding: ${(props) =>
-    props.isSearchBarVisible ? '0' : '0px 0px 0 15px'};
+  padding: ${(props) => (props.isSearchBarVisible ? '0' : '0px 0px 0 15px')};
   text-align: left;
   border-radius: 4px;
   min-height: 36px;
@@ -427,9 +427,7 @@ export default {
       const optionElement = this.$el.querySelector(`[data-value="${e}"]`)
       if (this.$refs.dropdown) {
         this.hoveredIndex =
-          this.$refs.dropdown.$children
-            .map((component) => component.$el)
-            .indexOf(optionElement) + 1
+          [...this.$refs.dropdown.$el.children].indexOf(optionElement) + 1
       }
     },
     mouseEnterHandler() {
@@ -446,15 +444,13 @@ export default {
     searchChange(value) {
       this.textSearch = value
       this.$emit('search-change', value)
-      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'
-          }
-        })
+      ;[...this.$refs.dropdown.$el.children].forEach((el) => {
+        if (!el.textContent.toLowerCase().includes(value.toLowerCase())) {
+          el.style.display = 'none'
+        } else {
+          el.style.display = 'inherit'
+        }
+      })
     },
     onSelectSlotClick() {
       this.toggleDropdown()
@@ -476,10 +472,9 @@ export default {
       } else if (e.key == 'ArrowUp') {
         this.onArrowPress(-1)
       } else if (e.key == 'Enter') {
-        const optionHoveredComponent =
-          this.$refs.dropdown.$children[
-            (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
-          ]
+        const optionHoveredComponent = [...this.$refs.dropdown.$el.children][
+          (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
+        ]
         this.optionSelected(optionHoveredComponent.$el.dataset.value)
       }
     },
@@ -488,10 +483,9 @@ export default {
         ((this.hoveredIndex + dir + this.optionLength - 1) %
           this.optionLength) +
         1
-      const optionHoveredComponent =
-        this.$refs.dropdown.$children[
-          (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
-        ]
+      const optionHoveredComponent = [...this.$refs.dropdown.$el.children][
+        (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
+      ]
       const topPos = optionHoveredComponent.$el.offsetTop
       this.$refs.dropdown.$el.scrollTop = topPos
     }
@@ -499,7 +493,7 @@ export default {
   computed: {
     optionLength() {
       if (this.isDropdownOpen) {
-        return this.$refs.dropdown.$children.length
+        return this.$refs.dropdown.$el.childElementCount
       } 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 'vue-styled-components'
+  import styled from 'vue3-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 "vue-styled-components"
+import styled from "vue3-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 'vue-styled-components'
+import styled from 'vue3-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 'vue-styled-components'
+import styled from 'vue3-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 "vue-styled-components"
+import styled from "vue3-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 'vue-styled-components'
+import styled from 'vue3-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 "vue-styled-components"
+import styled from "vue3-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 "vue-styled-components"
+import styled from "vue3-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,11 +60,12 @@
         </paginationLink>
     </paginationWrapper>
   </template>
-  
-  <script>
-import styled from "vue-styled-components"
-  import icon from "../icon"
-  const paginationWrapper=styled.nav`
+
+<script>
+import styled from "vue3-styled-components"
+import icon from "../icon"
+
+const paginationWrapper=styled.nav`
     color: #1a237e;
     font-size: 13px;
     display: -webkit-box;
@@ -134,4 +135,3 @@ import styled from "vue-styled-components"
     }
   }
   </script>
-  

package/src/components/progressBar/index.vue

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

package/src/components/projectMarker/index.vue

@@ -88,7 +88,7 @@
 //   @deleteHandler="onMarkerDelete($event)"
 // />
 
-import styled from "vue-styled-components"
+import styled from "vue3-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 'vue-styled-components'
+import styled from 'vue3-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 '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'
+import styled from 'vue3-styled-components'
+import Spinner from '@/components/spinner'
+import SearchInput from '@/components/inputs/searchInput'
+import InputText from '@/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 "vue-styled-components"
+import styled from "vue3-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 'vue-styled-components'
+import styled from 'vue3-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 'vue-styled-components'
-import DeleteIcon from '../../deleteIcon'
-import Spinner from '../../spinner'
+import styled from "vue3-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 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import Spinner from '../spinner'
 
 const PageContainer = styled.div`

package/src/components/videoThumbnail/index.vue

@@ -1,108 +1,103 @@
 <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 '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;
-  `  
+  <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'
 
-  export default {
-    name: 'VideoThumbnail',
-    components: {
-        Wrapper,
-        Icon,
-        iconWrapper
+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
     },
-    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'
-        }
+    fit: {
+      required: false,
+      default: 'cover'
     },
-    data() {
-      return {
-        isOpenByClick:false
-      }
+    width: {
+      required: false,
+      default: '300px'
     },
-    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
-            }
-        },
+    height: {
+      required: false,
+      default: '200px'
     },
-    mounted() {
-        document.addEventListener('click', this.clickOutside)
-    },
-    beforeDestroy() {
-        document.removeEventListener('click', this.clickOutside)
+    playIconSize: {
+      required: false,
+      default: '50px'
     },
+    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,13 +1,8 @@
-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
+import { createApp } from 'vue'
 
-Vue.use(VueCompositionAPI)
-Vue.use(vClickOutside)
+const app = createApp(App)
+
+app.mount('#app')
 
-new Vue({
-  render: (h) => h(App),
-}).$mount("#app")