@eturnity/eturnity_reusable_components 6.33.1-EPDM-5205.1 → 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-5205.1",
+  "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

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%;