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

package/src/App.vue

@@ -55,9 +55,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'
 
 const PageContainer = styled.div`

package/src/assets/svgIcons/charger_icon_white.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+	.st1{display:inline;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g class="st0">
+	<g class="st1">
+		<rect x="-312.013" y="-258.339" class="st2" width="2" height="16"/>
+	</g>
+	<g class="st1">
+		<polygon class="st2" points="-303.346,-242.339 -303.346,-248.339 -312.013,-248.426 -312.013,-242.339 		"/>
+	</g>
+	<g class="st1">
+		<rect x="-311.673" y="-258.339" class="st2" width="8" height="2"/>
+	</g>
+	<g class="st1">
+		<path class="st2" d="M-294.833-255.839v-2.5h-7v2.5c0,1.933,1.567,3.5,3.5,3.5l0,0
+			C-296.4-252.339-294.833-253.906-294.833-255.839z"/>
+	</g>
+	<g class="st1">
+		<rect x="-305.346" y="-258.339" class="st2" width="2" height="16"/>
+	</g>
+	<g class="st1">
+		<rect x="-299.333" y="-258.339" class="st2" width="2" height="12"/>
+	</g>
+	<g class="st1">
+		<rect x="-303.346" y="-248.339" class="st2" width="6" height="2"/>
+	</g>
+	<g class="st1">
+		<rect x="-301.346" y="-260.339" class="st2" width="2" height="2"/>
+	</g>
+	<g class="st1">
+		<rect x="-297.346" y="-260.339" class="st2" width="2" height="2"/>
+	</g>
+</g>
+<g>
+	<path class="st2" d="M15.777,8.974h3v-2h-3V6h-1c-1.857,0-3.404,1.272-3.855,2.987H8.889V3V1h-2H3.223h-2v2v14v2h2h5.667v-1v-1
+		v-6.013h2.025C11.356,12.716,12.911,14,14.777,14h1v-1.026h3v-2h-3V8.987V8.974z M6.889,17H3.223V3h3.667v5.987v2V17z"/>
+</g>
+</svg>

package/src/assets/svgIcons/energy_meter.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW 2021 (64-Bit) -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="462px" height="512px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
+viewBox="0 0 462 511.93"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path fill="white" d="M22.37 0l417.26 0c12.31,0 22.37,10.06 22.37,22.37l0 400.73c0,12.3 -10.06,22.37 -22.37,22.37l-32.27 0 0 19.01c0,6.2 -5.06,11.27 -11.26,11.27l-25.1 0 0 32.03c0,2.28 -1.87,4.15 -4.15,4.15l-32.33 0c-4.56,0 -8.29,-3.73 -8.29,-8.29l0 -27.89 -33.43 0 0 32.03c0,2.28 -1.86,4.15 -4.14,4.15l-32.34 0c-4.56,0 -8.28,-3.73 -8.28,-8.29l0 -27.89 -33.43 0 0 32.03c0,2.28 -1.86,4.15 -4.14,4.15l-32.34 0c-4.56,0 -8.28,-3.73 -8.28,-8.29l0 -27.89 -33.43 0 0 32.03c0,2.28 -1.86,4.15 -4.14,4.15l-32.34 0c-4.56,0 -8.28,-3.73 -8.28,-8.29l0 -27.89 -25.76 0c-6.2,0 -11.26,-5.07 -11.26,-11.27l0 -19.01 -32.27 0c-12.31,0 -22.37,-10.07 -22.37,-22.37l0 -400.73c0,-12.31 10.06,-22.37 22.37,-22.37zm61.36 103.62l294.54 0c3.34,0 6.38,1.38 8.57,3.57 2.19,2.19 3.56,5.23 3.56,8.57l0 53.77c0,3.33 -1.37,6.37 -3.56,8.56 -2.2,2.2 -5.23,3.57 -8.57,3.57l-294.54 0c-3.34,0 -6.38,-1.37 -8.57,-3.57 -2.19,-2.19 -3.56,-5.23 -3.56,-8.56l0 -53.77c0,-3.34 1.36,-6.37 3.56,-8.57 2.2,-2.21 5.23,-3.57 8.57,-3.57zm159 210.98l15.79 0c2.29,0.01 4.15,1.87 4.15,4.16 0,0.83 -0.25,1.63 -0.7,2.32l-37.64 64.27c-0.75,1.23 -2.09,1.98 -3.53,1.98 -2.29,0 -4.15,-1.86 -4.15,-4.14 0,-0.28 0.02,-0.55 0.08,-0.81l5.55 -39.45 -18.73 0.32c-0.02,0 -0.05,0 -0.08,0 -2.25,0 -4.09,-1.81 -4.13,-4.06 0,-0.01 0,-0.01 0,-0.02 0,-0.75 0.2,-1.5 0.58,-2.15l37.06 -64.26c0.75,-1.24 2.1,-2 3.55,-2 2.29,0 4.15,1.85 4.15,4.15 0,0.18 -0.02,0.36 -0.04,0.54l-1.91 39.15zm151.34 -255.93c5.79,0 10.49,4.95 10.49,11.06 0,6.1 -4.7,11.05 -10.49,11.05 -5.8,0 -10.5,-4.95 -10.5,-11.05 0,-6.11 4.7,-11.06 10.5,-11.06zm-326.13 0c5.8,0 10.5,4.95 10.5,11.06 0,6.1 -4.7,11.05 -10.5,11.05 -5.8,0 -10.5,-4.95 -10.5,-11.05 0,-6.11 4.7,-11.06 10.5,-11.06zm0 307.96c5.8,0 10.5,4.96 10.5,11.06 0,6.11 -4.7,11.06 -10.5,11.06 -5.8,0 -10.5,-4.95 -10.5,-11.06 0,-6.1 4.7,-11.06 10.5,-11.06zm326.13 0c5.79,0 10.49,4.96 10.49,11.06 0,6.11 -4.7,11.06 -10.49,11.06 -5.8,0 -10.5,-4.95 -10.5,-11.06 0,-6.1 4.7,-11.06 10.5,-11.06zm-38.94 -206.03c-3.07,0 -5.53,-0.96 -7.39,-2.88 -1.85,-1.92 -2.77,-4.45 -2.77,-7.59l0 -14.98c0,-3.15 0.92,-5.67 2.77,-7.59 1.86,-1.92 4.32,-2.88 7.39,-2.88 3.08,0 5.55,0.96 7.4,2.88 1.85,1.92 2.78,4.44 2.78,7.59l0 14.98c0,3.14 -0.93,5.67 -2.78,7.59 -1.85,1.92 -4.32,2.88 -7.4,2.88zm0 -7.1c0.6,0 1.08,-0.26 1.42,-0.79 0.35,-0.53 0.52,-1.22 0.52,-2.08l0 -15.98c0,-0.86 -0.17,-1.56 -0.52,-2.09 -0.34,-0.52 -0.82,-0.79 -1.42,-0.79 -0.59,0 -1.06,0.27 -1.41,0.79 -0.34,0.53 -0.52,1.23 -0.52,2.09l0 15.98c0,0.86 0.18,1.55 0.52,2.08 0.35,0.53 0.82,0.79 1.41,0.79zm-61.12 7.1c-3.07,0 -5.54,-0.96 -7.39,-2.88 -1.85,-1.92 -2.78,-4.45 -2.78,-7.59l0 -14.98c0,-3.15 0.93,-5.67 2.78,-7.59 1.85,-1.92 4.32,-2.88 7.39,-2.88 3.08,0 5.55,0.96 7.4,2.88 1.85,1.92 2.77,4.44 2.77,7.59l0 14.98c0,3.14 -0.92,5.67 -2.77,7.59 -1.85,1.92 -4.32,2.88 -7.4,2.88zm0 -7.1c0.6,0 1.07,-0.26 1.42,-0.79 0.35,-0.53 0.52,-1.22 0.52,-2.08l0 -15.98c0,-0.86 -0.17,-1.56 -0.52,-2.09 -0.35,-0.52 -0.82,-0.79 -1.42,-0.79 -0.59,0 -1.07,0.27 -1.41,0.79 -0.35,0.53 -0.52,1.23 -0.52,2.09l0 15.98c0,0.86 0.17,1.55 0.52,2.08 0.34,0.53 0.82,0.79 1.41,0.79zm-63.81 7.1c-3.07,0 -5.54,-0.96 -7.39,-2.88 -1.85,-1.92 -2.77,-4.45 -2.77,-7.59l0 -14.98c0,-3.15 0.92,-5.67 2.77,-7.59 1.85,-1.92 4.32,-2.88 7.39,-2.88 3.08,0 5.54,0.96 7.4,2.88 1.85,1.92 2.77,4.44 2.77,7.59l0 14.98c0,3.14 -0.92,5.67 -2.77,7.59 -1.86,1.92 -4.32,2.88 -7.4,2.88zm0 -7.1c0.6,0 1.07,-0.26 1.42,-0.79 0.35,-0.53 0.52,-1.22 0.52,-2.08l0 -15.98c0,-0.86 -0.17,-1.56 -0.52,-2.09 -0.35,-0.52 -0.82,-0.79 -1.42,-0.79 -0.59,0 -1.06,0.27 -1.41,0.79 -0.35,0.53 -0.52,1.23 -0.52,2.09l0 15.98c0,0.86 0.17,1.55 0.52,2.08 0.35,0.53 0.82,0.79 1.41,0.79zm-61.33 7.1c-3.07,0 -5.54,-0.96 -7.39,-2.88 -1.85,-1.92 -2.77,-4.45 -2.77,-7.59l0 -14.98c0,-3.15 0.92,-5.67 2.77,-7.59 1.85,-1.92 4.32,-2.88 7.39,-2.88 3.08,0 5.55,0.96 7.4,2.88 1.85,1.92 2.77,4.44 2.77,7.59l0 14.98c0,3.14 -0.92,5.67 -2.77,7.59 -1.85,1.92 -4.32,2.88 -7.4,2.88zm0 -7.1c0.6,0 1.07,-0.26 1.42,-0.79 0.35,-0.53 0.52,-1.22 0.52,-2.08l0 -15.98c0,-0.86 -0.17,-1.56 -0.52,-2.09 -0.35,-0.52 -0.82,-0.79 -1.42,-0.79 -0.59,0 -1.06,0.27 -1.41,0.79 -0.35,0.53 -0.52,1.23 -0.52,2.09l0 15.98c0,0.86 0.17,1.55 0.52,2.08 0.35,0.53 0.82,0.79 1.41,0.79zm-61.16 7.1c-3.08,0 -5.54,-0.96 -7.39,-2.88 -1.85,-1.92 -2.78,-4.45 -2.78,-7.59l0 -14.98c0,-3.15 0.93,-5.67 2.78,-7.59 1.85,-1.92 4.31,-2.88 7.39,-2.88 3.07,0 5.54,0.96 7.39,2.88 1.85,1.92 2.78,4.44 2.78,7.59l0 14.98c0,3.14 -0.93,5.67 -2.78,7.59 -1.85,1.92 -4.32,2.88 -7.39,2.88zm0 -7.1c0.6,0 1.07,-0.26 1.41,-0.79 0.35,-0.53 0.53,-1.22 0.53,-2.08l0 -15.98c0,-0.86 -0.18,-1.56 -0.53,-2.09 -0.34,-0.52 -0.81,-0.79 -1.41,-0.79 -0.6,0 -1.07,0.27 -1.41,0.79 -0.35,0.53 -0.52,1.23 -0.52,2.09l0 15.98c0,0.86 0.17,1.55 0.52,2.08 0.34,0.53 0.81,0.79 1.41,0.79zm58.85 102.29c-4.25,0 -7.69,-3.45 -7.69,-7.69 0,-4.24 3.44,-7.68 7.69,-7.68l128.88 0c4.25,0 7.69,3.44 7.69,7.68 0,4.24 -3.44,7.69 -7.69,7.69l-128.88 0zm-50.58 -38.85c-4.24,0 -7.69,-3.44 -7.69,-7.68 0,-4.24 3.45,-7.69 7.69,-7.69l230.04 0c4.24,0 7.68,3.45 7.68,7.69 0,4.24 -3.44,7.68 -7.68,7.68l-230.04 0zm212.57 -103.71l0 58.82 49.72 0c0.69,0 1.32,-0.29 1.78,-0.75 0.46,-0.45 0.75,-1.09 0.75,-1.77l0 -53.77c0,-0.69 -0.29,-1.33 -0.75,-1.79 -0.45,-0.45 -1.09,-0.74 -1.78,-0.74l-49.72 0zm-9.61 58.82l0 -58.82 -52.26 0 0 58.82 52.26 0zm-61.87 0l0 -58.82 -52.14 0 0 58.82 52.14 0zm-61.75 0l0 -58.82 -52.3 0 0 58.82 52.3 0zm-61.91 0l0 -58.82 -49.68 0c-0.7,0 -1.33,0.29 -1.79,0.74 -0.45,0.46 -0.74,1.09 -0.74,1.79l0 53.77c0,0.69 0.29,1.32 0.74,1.77 0.46,0.46 1.1,0.75 1.79,0.75l49.68 0zm-74.08 -133.14l343.34 0c12.31,0 22.37,10.07 22.37,22.37l0 324.85c0,12.3 -10.07,22.37 -22.37,22.37l-343.34 0c-12.3,0 -22.37,-10.06 -22.37,-22.37l0 -324.85c0,-12.31 10.06,-22.37 22.37,-22.37z"/>
+ </g>
+</svg>

package/src/assets/svgIcons/house_3d-1.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <mask id="path-1-inside-1_57915_53334" fill="white">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.0303 2.75757L0 5.30302V11.2424L3.41022 12.4091V8.96996L4.53143 9.41845V12.7926L8.0606 14V8.0606L4.0303 2.75757Z"/>
+  </mask>
+  <path d="M0 5.30302L-0.694191 4.20389L-1.3 4.5865V5.30302H0ZM4.0303 2.75757L5.06531 1.97096L4.344 1.02187L3.33611 1.65843L4.0303 2.75757ZM0 11.2424H-1.3V12.1716L-0.420794 12.4724L0 11.2424ZM3.41022 12.4091L2.98943 13.6391L4.71022 14.2278V12.4091H3.41022ZM3.41022 8.96996L3.89303 7.76294L2.11022 7.04982V8.96996H3.41022ZM4.53143 9.41845H5.83143V8.5383L5.01424 8.21143L4.53143 9.41845ZM4.53143 12.7926H3.23143V13.7219L4.11064 14.0227L4.53143 12.7926ZM8.0606 14L7.63981 15.23L9.3606 15.8187V14H8.0606ZM8.0606 8.0606H9.3606V7.62266L9.09561 7.27399L8.0606 8.0606ZM0.694191 6.40216L4.72449 3.8567L3.33611 1.65843L-0.694191 4.20389L0.694191 6.40216ZM1.3 11.2424V5.30302H-1.3V11.2424H1.3ZM3.83102 11.1791L0.420794 10.0124L-0.420794 12.4724L2.98943 13.6391L3.83102 11.1791ZM4.71022 12.4091V8.96996H2.11022V12.4091H4.71022ZM2.92741 10.177L4.04862 10.6255L5.01424 8.21143L3.89303 7.76294L2.92741 10.177ZM3.23143 9.41845V12.7926H5.83143V9.41845H3.23143ZM8.48139 12.77L4.95223 11.5626L4.11064 14.0227L7.63981 15.23L8.48139 12.77ZM6.7606 8.0606V14H9.3606V8.0606H6.7606ZM2.99529 3.54418L7.02559 8.8472L9.09561 7.27399L5.06531 1.97096L2.99529 3.54418Z" fill="#0068DE" mask="url(#path-1-inside-1_57915_53334)"/>
+  <path d="M8.55859 13.2165V8.37967L13.498 6.08638V10.9232L8.55859 13.2165Z" fill="#0068DE" stroke="#0068DE"/>
+  <path d="M8.21608 7.43759L4.80515 2.94953L9.81611 0.623007L13.227 5.11107L8.21608 7.43759Z" fill="#0068DE" stroke="#0068DE"/>
+</svg>

package/src/assets/svgIcons/house_3d.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16" fill="none">
+  <mask id="path-1-inside-1_57915_3657" fill="white">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.03081 3.71851L0 6.28736V12.2814L3.41065 13.4587V9.98801L4.532 10.4406V13.8458L8.06161 15.0643V9.07028L4.03081 3.71851Z"/>
+  </mask>
+  <path d="M0 6.28736L-0.698673 5.19107L-1.3 5.5743V6.28736H0ZM4.03081 3.71851L5.06922 2.9364L4.34595 1.9761L3.33213 2.62221L4.03081 3.71851ZM0 12.2814H-1.3V13.2079L-0.424205 13.5102L0 12.2814ZM3.41065 13.4587L2.98645 14.6876L4.71065 15.2828V13.4587H3.41065ZM3.41065 9.98801L3.89722 8.78251L2.11065 8.0614V9.98801H3.41065ZM4.532 10.4406H5.832V9.56343L5.01858 9.23511L4.532 10.4406ZM4.532 13.8458H3.232V14.7723L4.1078 15.0747L4.532 13.8458ZM8.06161 15.0643L7.63741 16.2931L9.36161 16.8883V15.0643H8.06161ZM8.06161 9.07028H9.36161V8.63549L9.10003 8.28818L8.06161 9.07028ZM0.698673 7.38365L4.72948 4.8148L3.33213 2.62221L-0.698673 5.19107L0.698673 7.38365ZM1.3 12.2814V6.28736H-1.3V12.2814H1.3ZM3.83485 12.2299L0.424205 11.0525L-0.424205 13.5102L2.98645 14.6876L3.83485 12.2299ZM4.71065 13.4587V9.98801H2.11065V13.4587H4.71065ZM2.92408 11.1935L4.04543 11.6461L5.01858 9.23511L3.89722 8.78251L2.92408 11.1935ZM3.232 10.4406V13.8458H5.832V10.4406H3.232ZM8.48582 13.8354L4.95621 12.617L4.1078 15.0747L7.63741 16.2931L8.48582 13.8354ZM6.76161 9.07028V15.0643H9.36161V9.07028H6.76161ZM2.99239 4.50061L7.0232 9.85239L9.10003 8.28818L5.06922 2.9364L2.99239 4.50061Z" fill="white" mask="url(#path-1-inside-1_57915_3657)"/>
+  <path d="M8.5625 14.2779V9.38818L13.5026 7.07375V11.9634L8.5625 14.2779Z" fill="white" stroke="white"/>
+  <path d="M8.21735 8.44534L4.80134 3.90984L9.81609 1.56045L13.2321 6.09596L8.21735 8.44534Z" fill="white" stroke="white"/>
+</svg>

package/src/components/addNewButton/index.vue

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

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

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

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

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

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

@@ -1,13 +1,13 @@
 <template>
   <page-container>
     <button-container
-      :id="id"
       :type="type"
       :minWidth="minWidth"
       :isDisabled="isDisabled"
       :customColor="customColor"
       :noWrap="noWrap"
       :data-id="dataId"
+      :fontColor="fontColor"
     >
       {{ text }}
     </button-container>
@@ -26,7 +26,7 @@
 //   :data-id="test_data_id"
 // />
 
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 
 const PageContainer = styled.div``
 
@@ -35,12 +35,14 @@ const ButtonAttrs = {
   isDisabled: Boolean,
   minWidth: String,
   customColor: String,
+  fontColor: String,
   noWrap: Boolean
 }
 const ButtonContainer = styled('div', ButtonAttrs)`
   padding: 7px 15px;
   font-size: 13px;
-  color: ${(props) => props.theme.colors.white};
+  color: ${(props) =>
+    props.fontColor ? props.fontColor : props.theme.colors.white};
   background-color: ${(props) =>
     props.isDisabled
       ? props.theme.colors.disabled
@@ -91,6 +93,9 @@ export default {
       required: false,
       default: null
     },
+    fontColor: {
+      required: false
+    },
     noWrap: {
       required: false,
       default: false
@@ -99,10 +104,6 @@ export default {
       required: false,
       default: null
     },
-    id: {
-      required: false,
-      default: null
-    },
     dataId: {
       type: String,
       default: ''

package/src/components/card/index.vue

@@ -0,0 +1,95 @@
+<template>
+    <Wrapper
+      v-show="!isLoading"
+      :class="viewCardClass"
+      :width="width"
+      :minWidth="minWidth"
+    >
+      <Spinner v-if="isLoading" size="50px" :limitedToModal="true" />
+      <CardWrapper v-else>
+        <CardTitle :class="titleClass" >
+          {{ $gettext(title) }}
+          <et-popover
+            v-if="showPopover && popoverText !== ''"
+            :text="popoverText"
+          ></et-popover>
+        </CardTitle>
+        <slot></slot>
+      </CardWrapper>
+    </Wrapper>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import Spinner from '../spinner'
+
+const WrapperProps = { width: [Number, String], minWidth: [Number, String] }
+const Wrapper = styled('div', WrapperProps)`
+  max-width: ${(props) => props.width};
+  min-width: ${(props) => props.minWidth};
+  padding: 20px;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 4px;
+  background-color: ${props => props.theme.colors.white};
+  height: 100%;
+`
+
+const CardWrapper = styled('div')`
+  height: 100%;
+  width: auto;
+`
+
+const CardTitle = styled('p')`
+  font-size: 14px;
+  line-height: 1;
+  color: ${props => props.theme.colors.black};
+  font-weight: 700;
+  margin-bottom: 10px;
+`
+
+export default {
+  name: 'Card',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: [Number, String],
+      required: false,
+      default: '400px'
+    },
+    minWidth: {
+      type: [Number, String],
+      required: false,
+      default: null
+    },
+    titleClass: {
+      type: String,
+      default: ''
+    },
+    showPopover: {
+      type: Boolean,
+      default: false
+    },
+    viewCardClass: {
+      type: String,
+      default: ''
+    },
+    popoverText: {
+      type: String,
+      default: ''
+    },
+    isLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    Spinner,
+    Wrapper,
+    CardTitle,
+    CardWrapper,
+  }
+}
+</script>

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

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

package/src/components/deleteIcon/index.vue

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

package/src/components/draggableInputHandle/index.vue

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