@eturnity/eturnity_reusable_components 7.18.0-EPDM-10335.1 → 7.18.0-qa-dev03.0

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.18.0-EPDM-10335.1",
+  "version": "7.18.0-qa-dev03.0",
   "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/anchor.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 204.851 204.851" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path fill="white" d="M139.518,128.595l16.834,16.336c0,0-20.644,29.877-42.725,30.473
+				c0.479,0,0.117-84.092,0.039-104.472c14.694-4.797,25.402-18.182,25.402-34.117c0-20.009-16.697-36.218-37.273-36.218
+				c-20.615,0-37.312,16.209-37.312,36.208c0,15.671,10.376,28.929,24.748,33.961l0.098,104.277
+				c-26.643-1.837-42.061-27.474-42.061-27.474l17.997-17.41L0,120.505l9.887,63.301l17.362-16.795
+				c15.036,12.105,32.017,37.244,72.876,37.244c51.332-1.309,63.184-28.939,76.344-39.804l18.993,18.514l9.389-63.907
+				L139.518,128.595z M82.558,36.208c0-10.298,8.608-18.661,19.218-18.661s19.257,8.363,19.257,18.661
+				c0,10.327-8.647,18.681-19.257,18.681S82.558,46.535,82.558,36.208z"/>
+		</g>
+	</g>
+</g>
+</svg>

package/src/assets/svgIcons/flatten_roof.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="16"
+   height="8"
+   viewBox="0 0 16 8"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <g
+     transform="translate(-55.350933,-93.588073)">
+    <path
+       fill="#000000"
+       d="m 61.719348,100.39494 1.004406,0.0185 -0.0013,-2.679323 0.88345,-4.27e-4 c -0.0051,-0.01381 -0.01401,2.69128 -0.01401,2.69128 l 1.05348,-0.0159 -1.582401,1.44453 z m -6.368415,-0.817395 7.856738,-5.989472 7.616581,6.321372 -1.240034,1.266145 -6.409573,-5.185912 -6.581971,5.125212 z"
+       id="path874"
+       />
+  </g>
+</svg>

package/src/assets/svgIcons/split.svg

@@ -1,94 +1,12 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
 <svg
-   version="1.1"
-   id="svg438"
    width="838"
    height="833"
    viewBox="0 0 838 833"
-   sodipodi:docname="split.svg"
-   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs442">
-    <linearGradient
-       id="linearGradient7383"
-       inkscape:swatch="solid">
-      <stop
-         style="stop-color:#ffffff;stop-opacity:1;"
-         offset="0"
-         id="stop7381" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient6933"
-       inkscape:swatch="solid">
-      <stop
-         style="stop-color:#000000;stop-opacity:1;"
-         offset="0"
-         id="stop6931" />
-    </linearGradient>
-  </defs>
-  <sodipodi:namedview
-     id="namedview440"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     showgrid="false"
-     inkscape:zoom="0.95078031"
-     inkscape:cx="466.45896"
-     inkscape:cy="549.02273"
-     inkscape:window-width="1920"
-     inkscape:window-height="1007"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="g444" />
-  <g
-     inkscape:groupmode="layer"
-     inkscape:label="Image"
-     id="g444">
-    <circle
-       id="path5141"
-       style="fill:none;stroke:#fffeff;stroke-opacity:1"
-       cx="0.66903824"
-       cy="263.65976"
-       r="0.52949077" />
-    <circle
-       id="path5143"
-       style="fill:none;stroke:#fffeff;stroke-opacity:1"
-       cx="0.66903824"
-       cy="263.65976"
-       r="0.52949077" />
-    <g
-       id="path5184"
-       style="stroke:#fffeff;stroke-opacity:1;fill:none">
-      <path
-         style="color:#000000;fill:none;stroke-width:154.42;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
-         d="m -156.35359,113.32885 348.76355,221.92361 744.6236,-498.85799"
-         id="path6861" />
-      <path
-         style="color:#000000;fill:none;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
-         d="M 894.06055,-227.75 191.32227,243.04492 -114.9043,48.1875 -197.80273,178.46875 193.49609,427.45898 980.00781,-99.460937 Z"
-         id="path6863" />
-    </g>
-    <g
-       id="path5186"
-       style="stroke:#fffeff;stroke-opacity:1;fill:none">
-      <path
-         style="color:#000000;fill:none;stroke-width:166.34;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
-         d="M 816.06617,905.68984 357.97591,628.01443 1035.7943,176.14788"
-         id="path6855" />
-      <path
-         style="color:#000000;fill:none;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
-         d="M 989.66016,106.94531 203.03125,631.34961 772.95312,976.81445 859.17773,834.56641 512.91992,624.67773 1081.9277,245.34961 Z"
-         id="path6857" />
-    </g>
-  </g>
+   >
+
+    <path
+       fill="#B2B9C5"
+       d="m -5.0875843,441.73292 3.3936693,-93.74987 847.237645,-2.85667 -3.71049,95.94711 z m 333.6519143,232.4369 -98.27777,-105.35245 43.34233,-0.60608 c 23.83828,-0.33335 56.95483,-0.67085 73.59233,-0.75 l 30.25,-0.14392 L 376,413.05958 374.48738,213.61969 301.67731,213.3632 228.86724,213.10671 326.58798,107.77384 C 380.33439,49.84076 424.5019,2.3657611 424.73801,2.2738411 425.25724,2.0716911 628.96623,212.59506 628.96623,213.35636 c 0,0.29424 -41.55385,0.25035 -81.97885,0.25035 h -73.5 L 475,413.0466 l 1.47122,154.25779 72.81196,0.25649 72.81196,0.25649 -91.89971,99.5 -103.35334,112.2049 z"
+      />
 </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,7 +1,6 @@
 <template>
   <page-container>
     <button-container
-      :id="id"
       :type="type"
       :minWidth="minWidth"
       :isDisabled="isDisabled"
@@ -26,7 +25,7 @@
 //   :data-id="test_data_id"
 // />
 
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 
 const PageContainer = styled.div``
 
@@ -99,10 +98,6 @@ export default {
       required: false,
       default: null
     },
-    id: {
-      required: false,
-      default: null
-    },
     dataId: {
       type: String,
       default: ''

package/src/components/card/index.vue

@@ -1,26 +1,26 @@
 <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>
+    <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 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import Spinner from '../spinner'
 
 const WrapperProps = { width: [Number, String], minWidth: [Number, String] }
@@ -28,10 +28,9 @@ 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);
+  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};
+  background-color: ${props => props.theme.colors.white};
   height: 100%;
 `
 
@@ -43,7 +42,7 @@ const CardWrapper = styled('div')`
 const CardTitle = styled('p')`
   font-size: 14px;
   line-height: 1;
-  color: ${(props) => props.theme.colors.black};
+  color: ${props => props.theme.colors.black};
   font-weight: 700;
   margin-bottom: 10px;
 `
@@ -90,7 +89,7 @@ export default {
     Spinner,
     Wrapper,
     CardTitle,
-    CardWrapper
+    CardWrapper,
   }
 }
-</script>
+</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