@eturnity/eturnity_reusable_components 7.8.6-EPDM-7951.0 → 7.10.0-EPDM-10163.0

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

@@ -21,8 +21,8 @@
 //     :minValue="10" //default is 0 if not specified
 //     :maxValue="500" //default is 100 if not specified
 // />
-import Slider from '@vueform/slider'
-import styled from 'vue3-styled-components'
+import Slider from "@vueform/slider/dist/slider.vue2.js"
+import styled from "vue-styled-components"
 
 const Container = styled.div`
   margin: 16px 0 16px 21px;
@@ -81,45 +81,45 @@ const NumberText = styled.div`
 `
 
 export default {
-  name: 'slider',
+  name: "slider",
   components: {
     Slider,
     Container,
-    NumberText
+    NumberText,
   },
   props: {
     value: {
       required: false,
-      default: 0
+      default: 0,
     },
     unit: {
       required: false,
-      default: ''
+      default: "",
     },
     minValue: {
       required: false,
-      default: 0
+      default: 0,
     },
     maxValue: {
       required: false,
-      default: 100
-    }
+      default: 100,
+    },
   },
   methods: {
     onChange(value) {
-      this.$emit('change', value)
-    }
+      this.$emit("change", value)
+    },
   },
   mounted() {
     // This is to add the 3 white lines to the slider button
-    let slider = document.querySelector('.slider-touch-area')
-    let span1 = document.createElement('span')
-    let span2 = document.createElement('span')
-    let span3 = document.createElement('span')
+    let slider = document.querySelector(".slider-touch-area")
+    let span1 = document.createElement("span")
+    let span2 = document.createElement("span")
+    let span3 = document.createElement("span")
     slider.appendChild(span1)
     slider.appendChild(span2)
     slider.appendChild(span3)
-  }
+  },
 }
 </script>
 

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

@@ -48,7 +48,7 @@
       >
         <label-text :size="size" :fontColor="fontColor">{{ label }}</label-text>
         <info-text
-          @click.stop
+          @click.native.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
@@ -76,7 +76,7 @@
 //   :disabled="false"
 // />
 
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
 import theme from '../../../assets/theme'
 const Container = styled.div``

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

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

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

@@ -47,7 +47,7 @@
       >
         <label-text :size="size" :fontColor="fontColor">{{ label }}</label-text>
         <info-text
-          @click.stop
+          @click.native.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
@@ -77,7 +77,7 @@
 //   data-id="test_data_id"
 // />
 
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
 
 const Container = styled.div`

package/src/components/label/index.vue

@@ -1,25 +1,30 @@
 <template>
-  <label-wrapper :labelAlign="labelAlign">
-    <input-label :labelFontColor="labelFontColor" :fontSize="fontSize">
-      <slot></slot>
-      <optionalLabel v-if="labelOptional"
-        >({{ $gettext('Optional') }})</optionalLabel
-      ></input-label
-    >
-    <info-text
-      v-if="infoTextMessage"
-      :text="infoTextMessage"
-      borderColor="#ccc"
-      :size="fontSize ? fontSize : '16px'"
-      :alignArrow="infoTextAlign"
-    />
-  </label-wrapper>
+      <label-wrapper
+        :labelAlign="labelAlign">
+        <input-label
+          :labelFontColor="labelFontColor"
+          :fontSize="fontSize"
+          >
+          <slot></slot>
+          <optionalLabel v-if="labelOptional"
+            >({{ $gettext('Optional') }})</optionalLabel
+          ></input-label
+        >
+        <info-text
+          v-if="infoTextMessage"
+          :text="infoTextMessage"
+          borderColor="#ccc"
+          :size="fontSize ? fontSize : '16px'"
+          :alignArrow="infoTextAlign"
+        />
+      </label-wrapper>
 </template>
 
 <script>
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import InfoText from '../infoText'
 
+
 const labelAttrs = { fontSize: String, labelFontColor: String }
 const InputLabel = styled('div', labelAttrs)`
   color: ${(props) =>
@@ -36,15 +41,15 @@ const optionalLabel = styled.span`
   font-weight: 300;
 `
 
-const LabelWrapper = styled('div', { labelAlign: String })`
-  ${(props) =>
-    props.labelAlign == 'horizontal'
-      ? 'display: inline-grid;'
-      : 'display: grid;'}
-  ${(props) =>
-    props.labelAlign == 'horizontal'
-      ? 'margin-right: 10px;'
-      : 'margin-bottom: 8px;'}
+const LabelWrapper = styled('div',{labelAlign:String})`
+  ${props=>props.labelAlign=='horizontal'?
+    'display: inline-grid;':
+    'display: grid;'
+  }
+  ${props=>props.labelAlign=='horizontal'?
+    'margin-right: 10px;':
+    'margin-bottom: 8px;'
+  }
   vertical-align: center;
   grid-template-columns: auto auto;
   grid-gap: 12px;
@@ -93,7 +98,7 @@ export default {
     labelAlign: {
       required: false,
       default: 'vertical'
-    }
-  }
+    },
+  },
 }
 </script>

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

@@ -5,12 +5,16 @@
     :class="{ visible: isOpen, hidden: !isOpen }"
     :backdrop="backdrop"
   >
-    <modal-container @click="onClickModalContainer">
+    <modal-container @click.stop>
       <spinner v-if="isLoading" size="50px" :limitedToModal="true" />
       <content-container :visible="!isLoading">
         <slot />
       </content-container>
-      <close-button v-if="!hideClose" @click="onCloseModal()" class="close" />
+      <close-button
+        v-if="!hideClose"
+        @click.native="onCloseModal()"
+        class="close"
+      />
     </modal-container>
   </page-wrapper>
 </template>
@@ -22,11 +26,11 @@
 // import Modal from "@eturnity/eturnity_reusable_components/src/components/modals/modal"
 // This is a more flexible modal box, where the parent can decide how the body of the modal looks
 // To use:
-// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :isLoading="true" :hideClose="true" :stopPropagation="false">
+// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :isLoading="true" :hideClose="true">
 //   <div>Data....</div>
 // </modal>
 
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import CloseButton from '../../buttons/closeButton'
 import Spinner from '../../spinner'
 
@@ -147,10 +151,6 @@ export default {
     position: {
       required: false,
       default: 'fixed'
-    },
-    stopPropagation: {
-      type: Boolean,
-      default: true
     }
   },
   beforeDestroy() {
@@ -164,11 +164,6 @@ export default {
       if (key === 'Escape') {
         this.onCloseModal()
       }
-    },
-    onClickModalContainer(event) {
-      if (this.stopPropagation) {
-        event.stopPropagation()
-      }
     }
   },
   watch: {

package/src/components/navigationTabs/index.vue

@@ -8,23 +8,23 @@
       :active="isIndexKey ? index === activeTab : tab[tabKey] === activeTab"
       @click="$emit('tab-click', isIndexKey ? index : tab[tabKey])"
     >
-      <Option :isDisabled="!!tab['isDisabled']" :textColor="tab['textColor']">
-        <Uppercase>{{ tab[tabLabel] }}</Uppercase>
-        <info-text
-          v-if="tab['labelInfoText']"
-          :text="tab['labelInfoText']"
-          borderColor="#ccc"
-          size="14px"
-          :alignArrow="tab['labelInfoAlign']"
-        />
-      </Option>
+        <Option :isDisabled="!!tab['isDisabled']" :textColor="tab['textColor']">
+            <Uppercase>{{ tab[tabLabel] }}</Uppercase>
+            <info-text
+                v-if="tab['labelInfoText']"
+                :text="tab['labelInfoText']"
+                borderColor="#ccc"
+                size="14px"
+                :alignArrow="tab['labelInfoAlign']"
+            />
+        </Option>
     </tab>
     <bottomLine />
   </roofTabWrap>
 </template>
 
 <script>
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import InfoText from '../infoText'
 const TabAttr = {
   active: Boolean,
@@ -33,12 +33,12 @@ const TabAttr = {
 }
 
 const bottomLine = styled('div')`
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 1px;
-  width: 100%;
-  background-color: ${(props) => props.theme.colors.grey3};
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 1px;
+    width: 100%;
+    background-color: #b2b9c5;
 `
 const roofTabWrap = styled('div')`
   display: flex;
@@ -50,22 +50,17 @@ const roofTabWrap = styled('div')`
 const Uppercase = styled('span')`
   text-transform: uppercase;
 `
-const Option = styled('div', TabAttr)`
-  font-size: 13px;
-  font-weight: 700;
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-  gap: 10px;
-  color: ${(props) =>
-    props.textColor
-      ? props.theme.colors[props.textColor]
-        ? props.theme.colors[props.textColor]
-        : props.textColor
-      : props.isDisabled
-      ? props.theme.colors.grey2
-      : props.theme.colors.black};
-`
+const Option = styled('div',TabAttr)`
+    font-size: 13px;
+    font-weight: 700;
+    display:flex;
+    justify-content: center;
+    flex-direction: row;
+    gap: 10px;
+    color: ${props=>props.textColor ? 
+        props.theme.colors[props.textColor] ? props.theme.colors[props.textColor] : props.textColor :
+        props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
+  `
 const Tab = styled('div', TabAttr)`
   padding: 16px 10px;
   margin-right: 5px;
@@ -74,8 +69,7 @@ const Tab = styled('div', TabAttr)`
   z-index: 10;
   border-bottom: 2px solid
     ${(props) => (props.active ? props.theme.colors.primary : 'transparent')};
-  background-color: ${(props) =>
-    props.isDisabled ? props.theme.colors.grey5 : 'transparent'};
+  background-color: ${(props) => (props.isDisabled ? props.theme.colors.grey5 : 'transparent')};
   transition: 0.2s ease;
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   min-width: 140px;
@@ -84,8 +78,7 @@ const Tab = styled('div', TabAttr)`
   justify-content: space-between;
   min-height: 55px;
   &:hover {
-    border-color: ${(props) =>
-      props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.primary};
+    border-color: ${(props) => props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.primary};
   }
 `
 

package/src/components/pageSubtitle/index.vue

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

package/src/components/pageTitle/index.vue

@@ -1,15 +1,13 @@
 <template>
   <flex>
-    <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">{{
-      text
-    }}</title-text>
+    <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">{{ text }}</title-text>
     <info-text
-      v-if="infoText"
-      :text="infoText"
-      borderColor="#ccc"
-      size="14px"
-      :alignArrow="infoAlign"
-    />
+        v-if="infoText"
+        :text="infoText"
+        borderColor="#ccc"
+        size="14px"
+        :alignArrow="infoAlign"
+      />
   </flex>
 </template>
 
@@ -20,24 +18,25 @@
 //   text="My Page Title"
 //   color="red"
 // />
-import styled from 'vue3-styled-components'
+import styled from "vue-styled-components"
 import InfoText from '../infoText'
 const textAttrs = { color: String, fontSize: String, uppercase: Boolean }
-const TitleText = styled('div', textAttrs)`
+const TitleText = styled("div", textAttrs)`
   color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
   font-weight: bold;
   font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
   text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
+  
 `
-const flex = styled('div', textAttrs)`
+const flex = styled("div", textAttrs)`
   display: flex;
-  gap: 10px;
+  gap:10px;
   margin-bottom: 20px;
   align-items: center;
 `
 
 export default {
-  name: 'page-title',
+  name: "page-title",
   components: {
     TitleText,
     InfoText,
@@ -45,10 +44,10 @@ export default {
   },
   props: {
     text: {
-      required: true
+      required: true,
     },
     color: {
-      required: false
+      required: false,
     },
     fontSize: {
       required: false,
@@ -59,11 +58,11 @@ export default {
       default: true
     },
     infoText: {
-      required: false
+      required: false,
     },
     infoAlign: {
-      required: false
-    }
-  }
+      required: false,
+    },
+  },
 }
 </script>

package/src/components/pagination/index.vue

@@ -70,7 +70,7 @@
 </template>
 
 <script>
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import icon from '../icon'
 import theme from '@/assets/theme.js'
 

package/src/components/progressBar/index.vue

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

package/src/components/projectMarker/index.vue

@@ -9,7 +9,7 @@
       :isEditionAllowed="editionAllowed"
       :isActive="activated"
       :cursor="cursor"
-      @click="editionAllowed ? (activated = !activated) : ''"
+      @click.native="editionAllowed ? (activated = !activated) : ''"
     >
       <icon
         v-if="!!iconName"
@@ -28,11 +28,11 @@
         v-if="activated"
         v-click-outside="clickOutsideActionHandler"
       >
-        <edit-item @click="deleteModalOpened = !deleteModalOpened">
+        <edit-item @click.native="deleteModalOpened = !deleteModalOpened">
           <delete-icon />
           <div>{{ $gettext('Delete') }}</div>
         </edit-item>
-        <edit-item @click="onEditClick">
+        <edit-item @click.native="onEditClick">
           <icon-container>
             <icon name="edit_button" size="14px" />
           </icon-container>
@@ -52,10 +52,10 @@
         <page-title :text="$gettext('delete_confirm_text')" />
         <page-subtitle :text="$gettext('delete_confirm_subtext')" />
         <cta-container>
-          <main-button @click="onDelete" :text="$gettext('Delete')" />
+          <main-button @click.native="onDelete" :text="$gettext('Delete')" />
           <main-button
             type="cancel"
-            @click="closeDeleteModal"
+            @click.native="closeDeleteModal"
             :text="$gettext('Cancel')"
           />
         </cta-container>
@@ -78,8 +78,7 @@
 //   @deleteHandler="onMarkerDelete($event)"
 // />
 
-import styled from 'vue3-styled-components'
-import vClickOutside from 'click-outside-vue3'
+import styled from 'vue-styled-components'
 import Icon from '../icon'
 import Modal from '../modals/modal'
 import PageTitle from '../pageTitle'
@@ -130,6 +129,7 @@ const MarkerContainer = styled('div', MarkerAttrs)`
       props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
   border-radius: ${(props) =>
     props.hasBorderRadius ? (props.withDate ? '4px 0 0 4px' : '4px') : '0'};
+
   white-space: nowrap;
   cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
 
@@ -196,9 +196,6 @@ const Date = styled.div`
 
 export default {
   name: 'project-marker',
-  directives: {
-    clickOutside: vClickOutside.directive
-  },
   components: {
     PageContainer,
     MarkerContainer,

package/src/components/sideMenu/index.vue

@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import styled from 'vue3-styled-components'
+import styled from 'vue-styled-components'
 import Icon from '../icon'
 import Spinner from '../spinner'
 

package/src/components/spinner/index.vue

@@ -1,19 +1,24 @@
 <template>
   <spinner-container v-if="fullWidth">
     <container>
-      <spinner-wrapper :size="size" />
+      <spinner-wrapper
+        :size="size"
+        :src="require('../../assets/icons/black_spinner.svg')"
+      />
     </container>
   </spinner-container>
   <container v-else :limitedToModal="limitedToModal">
-    <spinner-wrapper :size="size" />
+    <spinner-wrapper
+      :size="size"
+      :src="require('../../assets/icons/black_spinner.svg')"
+    />
   </container>
 </template>
 
 <script>
 // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
 // <spinner size="30px" />
-import styled from 'vue3-styled-components'
-import SpinnerSvg from '../../assets/icons/black_spinner.svg'
+import styled from 'vue-styled-components'
 
 const SpinnerContainer = styled.div`
   position: fixed;
@@ -38,7 +43,7 @@ const Container = styled('div', containerAttrs)`
 `
 
 const spinnerAttrs = { size: String }
-const SpinnerWrapper = styled(SpinnerSvg, spinnerAttrs)`
+const SpinnerWrapper = styled('img', spinnerAttrs)`
   width: ${(props) => (props.size ? props.size : '60px')};
 `
 
@@ -64,4 +69,4 @@ export default {
     }
   }
 }
-</script>
+</script>