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

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

@@ -12,8 +12,12 @@
     @mouseover="hoverHandler"
     :cursorType="cursorType"
     :isDisabled="isDisabled"
+    :disabledBgColor="disabledBgColor"
+    :disabledTextColor="disabledTextColor"
     :backgroundColor="colorMode == 'dark' ? '#000000' : backgroundColor"
     :title="hoverText"
+    :minWidth="minWidth"
+    :padding="padding"
   >
     <slot></slot>
   </optionContainer>
@@ -22,12 +26,16 @@
 <script>
 //   import selectButton from './selectButton'
 //   import selectDropdown from './selectDropDown'
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 const optionProps = {
   isDisabled: Boolean,
   hoveredBgColor: String,
   cursorType: String,
-  backgroundColor: String
+  backgroundColor: String,
+  minWidth: String,
+  disabledBgColor: String,
+  disabledTextColor: String,
+  padding: String
 }
 const optionContainer = styled('div', optionProps)`
   display: flex;
@@ -35,23 +43,38 @@ const optionContainer = styled('div', optionProps)`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 10px;
+  padding: ${(props) => props.padding};
   gap: 14px;
   width: 100%;
+  min-width: ${(props) => (props.minWidth ? props.minWidth : '100%')};
   background-color: ${(props) =>
-    props.theme.colors[props.backgroundColor]
+    props.isDisabled
+      ? props.theme.colors[props.disabledBgColor]
+        ? props.theme.colors[props.disabledBgColor]
+        : props.disabledBgColor
+      : props.theme.colors[props.backgroundColor]
       ? props.theme.colors[props.backgroundColor]
-      : props.backgroundColor};
+      : props.backgroundColor} !important;
   box-sizing: inherit;
   background-color: ${(props) =>
     props.theme.colors[props.backgroundColor]
       ? props.theme.colors[props.backgroundColor]
       : props.backgroundColor};
   color: ${(props) =>
-    props.isDisabled ? props.theme.colors.grey3 : 'inherit'};
+    props.isDisabled
+      ? !!props.disabledTextColor
+        ? props.theme.colors[props.disabledTextColor]
+          ? props.theme.colors[props.disabledTextColor]
+          : props.disabledTextColor
+        : props.theme.colors.grey3
+      : 'inherit'};
   &:hover {
     background-color: ${(props) =>
-      props.theme.colors[props.hoveredBgColor]
+      !!props.disabledTextColor && props.isDisabled
+        ? props.theme.colors[props.disabledBgColor]
+          ? props.theme.colors[props.disabledBgColor]
+          : props.disabledBgColor
+        : props.theme.colors[props.hoveredBgColor]
         ? props.theme.colors[props.hoveredBgColor]
         : props.hoveredBgColor} !important;
   }
@@ -59,7 +82,7 @@ const optionContainer = styled('div', optionProps)`
 
 export default {
   name: 'RCoption',
-
+  emits: ['option-hovered', 'option-selected'],
   props: {
     value: {
       required: true
@@ -73,7 +96,7 @@ export default {
     },
     cursorType: {
       required: false,
-      default: 'cursor'
+      default: 'pointer'
     },
     backgroundColor: {
       required: false,
@@ -85,21 +108,35 @@ export default {
     isDisabled: {
       required: false,
       default: false
+    },
+    minWidth: {
+      required: false
+    },
+    disabledBgColor: {
+      required: false,
+      default: 'white'
+    },
+    disabledTextColor: {
+      required: false,
+      default: null
+    },
+    padding: {
+      required: false,
+      default: '12px 10px'
     }
   },
 
   components: { optionContainer },
-
   data() {
     return {}
   },
   methods: {
-    clickHandler() {
+    clickHandler(e) {
       if (this.isDisabled) {
         // prevent emitter if the option is disabled
         return
       } else {
-        this.$parent.$emit('option-selected', this.value)
+        this.$parent.$emit('option-selected', this.value, e)
       }
     },
     hoverHandler() {

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/dist/slider.vue2.js"
-import styled from "vue-styled-components"
+import Slider from '@vueform/slider'
+import styled from 'vue3-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

@@ -45,7 +45,7 @@
       >
         <label-text :size="size" :fontColor="fontColor">{{ label }}</label-text>
         <info-text
-          @click.native.stop
+          @click.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
         />
@@ -70,7 +70,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

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

package/src/components/label/index.vue

@@ -1,29 +1,25 @@
 <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"
-          :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 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import InfoText from '../infoText'
 
-
 const labelAttrs = { fontSize: String, labelFontColor: String }
 const InputLabel = styled('div', labelAttrs)`
   color: ${(props) =>
@@ -40,15 +36,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;
@@ -97,7 +93,7 @@ export default {
     labelAlign: {
       required: false,
       default: 'vertical'
-    },
-  },
+    }
+  }
 }
 </script>

package/src/components/markerItem/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <page-container>
+    <marker-container
+      :backgroundColor="backgroundColor"
+      :hasIcon="!!iconName"
+      :cursor="cursor"
+    >
+      <icon
+        v-if="!!iconName"
+        :name="iconName"
+        color="white"
+        size="10px"
+        :cursor="cursor"
+      />
+      <span>{{ label }}</span>
+    </marker-container>
+  </page-container>
+</template>
+
+<script>
+// import MarkerItem from "@eturnity/eturnity_reusable_components/src/components/markerItem"
+// To use:
+// <marker-item
+//   label="Label"
+//   backgroundColor="#ab5348"
+//   iconName="icon_name"
+//   cursor="pointer"
+// />
+
+import styled from 'vue-styled-components'
+import Icon from '../icon'
+
+const PageContainer = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  line-height: 14px;
+`
+
+const MarkerAttrs = {
+  backgroundColor: String,
+  hasIcon: Boolean,
+  cursor: String
+}
+const MarkerContainer = styled('div', MarkerAttrs)`
+  display: grid;
+  grid-template-columns: ${(props) => (props.hasIcon ? 'auto 1fr' : '1fr')};
+  grid-gap: 5px;
+  position: relative;
+  align-items: center;
+  padding: 2px 7px;
+  color: ${(props) => props.theme.colors.white};
+  background-color: ${(props) =>
+    props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
+  border: 1px solid
+    ${(props) =>
+      props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
+  border-radius: 4px;
+  white-space: nowrap;
+  cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
+`
+
+export default {
+  name: 'project-marker',
+  components: {
+    PageContainer,
+    MarkerContainer,
+    Icon
+  },
+  props: {
+    backgroundColor: {
+      required: false
+    },
+    iconName: {
+      required: false
+    },
+    label: {
+      required: true
+    },
+    cursor: {
+      required: false,
+      default: 'default'
+    }
+  }
+}
+</script>

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

@@ -10,11 +10,7 @@
       <content-container :visible="!isLoading">
         <slot />
       </content-container>
-      <close-button
-        v-if="!hideClose"
-        @click.native="onCloseModal()"
-        class="close"
-      />
+      <close-button v-if="!hideClose" @click="onCloseModal()" class="close" />
     </modal-container>
   </page-wrapper>
 </template>
@@ -30,7 +26,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/navigationTabs/index.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import InfoText from '../infoText'
 const TabAttr = {
   active: Boolean,
@@ -31,12 +31,12 @@ const TabAttr = {
 }
 
 const bottomLine = styled('div')`
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 1px;
-    width: 100%;
-    background-color: #b2b9c5;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 1px;
+  width: 100%;
+  background-color: ${(props) => props.theme.colors.grey3};
 `
 const roofTabWrap = styled('div')`
   display: flex;
@@ -48,17 +48,22 @@ 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;
@@ -67,7 +72,8 @@ 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;
@@ -76,7 +82,8 @@ 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

@@ -18,7 +18,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

@@ -3,11 +3,7 @@
     <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">
       {{ text }}
     </title-text>
-    <info-text
-      v-if="!!infoText"
-      :text="infoText"
-      :alignArrow="infoAlign"
-    />
+    <info-text v-if="!!infoText" :text="infoText" :alignArrow="infoAlign" />
   </title-wrap>
 </template>
 
@@ -18,16 +14,16 @@
 //   text="My Page Title"
 //   color="red"
 // />
-import styled from "vue-styled-components"
-import InfoText from "../infoText"
+import styled from 'vue3-styled-components'
+import InfoText from '../infoText'
 
 const wrapAttrs = { hasInfoText: Boolean }
-const TitleWrap = styled("div", wrapAttrs)`
+const TitleWrap = styled('div', wrapAttrs)`
   display: grid;
   align-items: center;
   grid-gap: 12px;
   grid-template-columns: ${(props) =>
-    props.hasInfoText ? "auto auto 1fr" : "1fr"};
+    props.hasInfoText ? 'auto auto 1fr' : '1fr'};
   margin-bottom: 20px;
 `
 
@@ -35,12 +31,12 @@ const titleAttrs = { color: String, fontSize: String, uppercase: Boolean }
 const TitleText = styled('span', titleAttrs)`
   color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
   font-weight: bold;
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '18px')};
   text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
 `
 
 export default {
-  name: "page-title",
+  name: 'page-title',
   components: {
     TitleText,
     TitleWrap,
@@ -48,14 +44,13 @@ export default {
   },
   props: {
     text: {
-      required: true,
+      required: true
     },
     color: {
-      required: false,
+      required: false
     },
     fontSize: {
-      required: false,
-      default: '16px'
+      required: false
     },
     uppercase: {
       required: false,
@@ -63,11 +58,11 @@ export default {
     },
     infoText: {
       required: false,
-      default: null,
+      default: null
     },
     infoAlign: {
-      required: false,
+      required: false
     }
-  },
+  }
 }
 </script>

package/src/components/pagination/index.vue

@@ -70,12 +70,12 @@
 </template>
 
 <script>
-import styled from 'vue-styled-components'
+import styled from 'vue3-styled-components'
 import icon from '../icon'
 import theme from '@/assets/theme.js'
 
 const paginationWrapper = styled.nav`
-  color: ${(props) => props.theme.brightBlue};
+  color: ${(props) => props.theme.colors.brightBlue};
   font-size: 13px;
   display: flex;
   flex-wrap: wrap;
@@ -95,7 +95,7 @@ const paginationLink = styled.div`
 
   &.active {
     color: #fff;
-    background-color: ${(props) => props.theme.brightBlue};
+    background-color: ${(props) => props.theme.colors.brightBlue};
     padding: 7px 12px;
     border-radius: 4px;
   }

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;