@eturnity/eturnity_reusable_components 6.42.1-EPDM-3013.6 → 6.42.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.42.1-EPDM-3013.6",
+  "version": "6.42.2",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -11,14 +11,11 @@
   },
   "dependencies": {
     "@vueform/slider": "1.0.5",
+    "core-js": "^3.31.1",
     "html-loader": "0.5.5",
-    "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"
+    "vue-styled-components": "1.6.0"
   },
   "devDependencies": {
     "@storybook/addon-actions": "6.2.8",

package/src/components/iconWrapper/index.vue

@@ -1,136 +1,129 @@
 <template>
-  <Wrapper
-    :disabled="disabled"
-    :size="size"
-    :backgroundColor="backgroundColor"
+    <Wrapper 
+    :disabled="disabled" 
+    :size="size" 
+    :backgroundColor="backgroundColor" 
     :borderRadius="borderRadius"
     :hasBorder="hasBorder"
     :color="iconColor"
     :hoveredBackgroundColor="hoveredBackgroundColor"
     :isHovered="isHovered"
-  >
-    <icon
-      :disabled="disabled"
-      :size="iconSize"
-      :name="name"
-      :color="iconColor"
-      :hoveredColor="hoveredIconColor"
-    />
-    <caret v-if="hasCaret">
-      <iconWrapper
-        :disabled="disabled"
-        size="10px"
-        name="arrow_down"
-        :iconColor="iconColor"
-        :hoveredBackgroundColor="hoveredIconColor"
-        borderRadius="1px"
-      />
-    </caret>
-  </Wrapper>
-</template>
-
-<script>
-// import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
-//  How to use:
-//<icon
-//   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
-//   color="red"
-//   hoveredColor="blue"
-//   size="60px" by default, this is 30px
-// />
-
-import styled from 'vue-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)`
-  position: relative;
-  display: inline-flex;
-  width: ${(props) => props.size};
-  height: ${(props) => props.size};
-  justify-content: center;
-  align-items: center;
-  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-  background-color: ${(props) =>
-    props.theme.colors[props.backgroundColor] || props.backgroundColor};
-  border-radius: ${(props) => props.borderRadius};
-  ${(props) =>
-    props.isHovered
-      ? 'background-color:' +
-          props.theme.colors[props.hoveredBackgroundColor] ||
-        props.hoveredBackgroundColor
-      : ''};
-  &:hover {
-    background-color: ${(props) =>
-      props.theme.colors[props.hoveredBackgroundColor] ||
-      props.hoveredBackgroundColor};
-  }
-`
-const caret = styled.div`
-  position: absolute;
-  bottom: 3px;
-  right: 2px;
-  height: 10px;
-`
+    >
+        <icon :disabled="disabled" 
+            :size="iconSize" 
+            :name="name" 
+            :color="iconColor" 
+            :hoveredColor="hoveredIconColor" 
+            :isStriked="isStriked"
+            />
+            
+        <caret v-if="hasCaret">
+          <iconWrapper :disabled="disabled" 
+            size="10px" 
+            name="arrow_down" 
+            :iconColor="iconColor" 
+            :hoveredBackgroundColor="hoveredIconColor"
+            borderRadius="1px"
+            />  
+        </caret>
+    </Wrapper>
+  </template>
+  
+  <script>
+  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+  //  How to use:
+  //<icon
+  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
+  //   color="red"
+  //   hoveredColor="blue"
+  //   size="60px" by default, this is 30px
+  // />
+  
+  import styled from 'vue-styled-components'
+  import icon from '../icon'
+  const wrapperAttrs = { color: String, isHovered:Boolean,borderRadius:String,disabled: Boolean, size: String,backgroundColor:String,hoveredBackgroundColor:String,hasBorder:Boolean }
+  const Wrapper = styled('div', wrapperAttrs)`
+    position:relative;
+    display: inline-flex;
+    width: ${(props) => props.size};
+    height: ${(props) => props.size};
+    border: ${(props) => props.hasBorder? 'solid 1px '+props.theme.colors[props.color] || props.color : ""};
+    justify-content:center;
+    align-items:center;
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    background-color: ${(props)=>props.theme.colors[props.backgroundColor] || props.backgroundColor};
+    border-radius: ${(props) => props.borderRadius};
+    ${(props)=>(props.isHovered ? 'background-color:'+props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor : "")};
+    &:hover{
+        background-color:${(props)=>props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor};
+    }
+  `
+  const caret=styled.div`
+  position:absolute;
+  bottom:3px;
+  right:2px;
+  height:10px;
+  `
 
-export default {
-  name: 'iconWrapper',
-  components: {
-    Wrapper,
-    icon,
-    caret
-  },
-  props: {
-    disabled: {
-      required: false,
-      default: false
-    },
-    name: {
-      required: true
-    },
-    iconColor: {
-      required: false,
-      default: 'white'
-    },
-    hoveredIconColor: {
-      required: false
-    },
-    backgroundColor: {
-      required: false
-    },
-    hoveredBackgroundColor: {
-      required: false,
-      default: 'transparentWhite1'
-    },
-    size: {
-      required: false,
-      default: '32px'
-    },
-    iconSize: {
-      required: false,
-      default: '18px'
-    },
-    hasCaret: {
-      required: false,
-      default: false
+  export default {
+    name: 'iconWrapper',
+    components: {
+      Wrapper,
+      icon,
+      caret
     },
-    borderRadius: {
-      required: false,
-      default: '6px'
+    props: {
+      disabled: {
+        required: false,
+        default: false
+      },
+      name: {
+        required: true
+      },
+      iconColor: {
+        required: false,
+        default: 'white'
+      },
+      hoveredIconColor: {
+        required: false
+      },
+      backgroundColor: {
+        required: false,
+      },
+      hasBorder: {
+        required: false,
+      },
+      hoveredBackgroundColor: {
+        required: false,
+        default:"transparentWhite1"
+      },
+      size: {
+        required: false,
+        default: '32px'
+      },
+      iconSize:{
+        required: false,
+        default:'18px'
+      },
+      hasCaret:{
+        required: false,
+        default: false
+      },
+      borderRadius:{
+        required:false,
+        default:'4px'
+      },
+      isHovered:{
+        required:false,
+        default:false
+      },
+      isStriked:{
+        required:false,
+        default:false
+      }
     },
-    isHovered: {
-      required: false,
-      default: false
+    data() {
+      return {}
     }
-  },
-  data() {
-    return {}
   }
-}
-</script>
+  </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <container :inputWidth="inputWidth">
+  <container>
     <input-wrapper>
       <input-container
         ref="inputElement"
@@ -9,7 +9,6 @@
         :disabled="disabled"
         :isDisabled="disabled"
         :inputWidth="inputWidth"
-        :isFilter="isFilter"
         :hasFocus="hasFocus"
       />
       <img
@@ -29,24 +28,18 @@
 //   :disabled="true"
 //   inputWidth="250px"
 //   @on-change="function($event)"
-//   :isFilter="true" // to set the height at 30px
 // />
 import styled from 'vue-styled-components'
 
-const inputAttrs = {
-  isDisabled: Boolean,
-  inputWidth: String,
-  isFilter: Boolean
-}
-const Container = styled('div', inputAttrs)`
-  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+const Container = styled.div`
+  width: 100%;
   position: relative;
 `
 
+const inputAttrs = { isDisabled: Boolean, inputWidth: String }
 const InputContainer = styled('input', inputAttrs)`
-  border: 1px solid ${(props) => props.theme.colors.grey4};
-  padding: ${(props) =>
-    props.isFilter ? '7px 30px 7px 10px' : '11px 30px 11px 10px'};
+  border: 1px solid ${(props) => props.theme.colors.mediumGray};
+  padding: 11px 30px 11px 10px;
   border-radius: 4px;
   font-size: 13px;
   color: ${(props) => props.theme.colors.black};
@@ -97,10 +90,6 @@ export default {
       required: false,
       default: null
     },
-    isFilter: {
-      required: false,
-      default: false
-    },
     hasFocus: {
       required: false,
       default: false
@@ -110,10 +99,10 @@ export default {
     onChangeHandler(event) {
       this.$emit('on-change', event)
     },
-    focusInputElement() {
+    focusInputElement(){
       this.$nextTick(() => {
-        this.$refs.inputElement.$el.focus()
-      })
+        this.$refs.inputElement.$el.focus();
+      });
     }
   },
   watch: {
@@ -123,5 +112,6 @@ export default {
       }
     }
   }
+  
 }
 </script>

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

@@ -32,6 +32,7 @@
           ref="select"
           @click="toggleDropdown"
           :selectHeight="selectHeight"
+          :selectMinHeight="selectMinHeight"
           :bgColor="
             buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
           "
@@ -144,6 +145,7 @@ const Caret = styled.div`
   min-width: 30px;
   height: 100%;
   align-items: stretch
+  padding-top: 5px;
   cursor: pointer;
   margin-left: auto;
 `
@@ -191,6 +193,7 @@ const selectButtonAttrs = {
   hasError: Boolean,
   disabled: Boolean,
   selectHeight: String,
+  selectMinHeight: String,
   isSearchBarVisible: Boolean,
   showBorder: Boolean
 }
@@ -201,7 +204,7 @@ const selectButton = styled('div', selectButtonAttrs)`
   padding: ${(props) => (props.isSearchBarVisible ? '0' : '0px 0px 0 15px')};
   text-align: left;
   border-radius: 4px;
-  min-height: 36px;
+  min-height: ${(props) => props.selectMinHeight};
   display: flex;
   align-items: center;
   max-height: ${(props) => props.selectHeight};
@@ -251,9 +254,8 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
       props.theme.colors[props.fontColor]
         ? props.theme.colors[props.fontColor]
         : props.fontColor};
-    max-height: 300px;
-    min-height: 39px;
-    overflow-y: auto;
+    max-height:300px;
+    overflow-y:auto;
     & [data-value="${(props) => props.selectedValue}"]{
         backdrop-filter: brightness(1.4);
     }
@@ -303,9 +305,14 @@ export default {
       default: null
     },
     selectHeight: {
+      type: String,
       required: false,
       default: null
     },
+    selectMinHeight: {
+      required: false,
+      default: '36px'
+    },
     optionWidth: {
       required: false,
       default: null

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

@@ -1,68 +1,59 @@
 <template>
-  <optionContainer
-    :data-value="value"
-    :hoveredBgColor="
-      hoveredBgColor || colorMode == 'dark' ? '#000000' : 'grey5'
-    "
-    @click="clickHandler"
-    @mouseover="hoverHandler"
-  >
-    <slot></slot>
-  </optionContainer>
-</template>
+    <optionContainer :data-value="value" :hoveredBgColor="hoveredBgColor || colorMode=='dark'?'#000000':'grey5'" @click="clickHandler" @mouseover="hoverHandler">
+        <slot></slot>
+    </optionContainer>
+  </template>
 
-<script>
+  <script>
 //   import selectButton from './selectButton'
 //   import selectDropdown from './selectDropDown'
-import styled from 'vue-styled-components'
-const optionProps = { hoveredBgColor: String }
-const optionContainer = styled('div', optionProps)`
-  display: flex;
-  cursor: pointer;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 10px;
-  gap: 14px;
-  width: 100%;
-  box-sizing: inherit;
-  &:hover {
-    background-color: ${(props) =>
-      props.theme.colors[props.hoveredBgColor]
-        ? props.theme.colors[props.hoveredBgColor]
-        : props.hoveredBgColor};
-  }
-`
+  import styled from 'vue-styled-components'
+  const optionProps={hoveredBgColor:String}
+  const optionContainer = styled('div',optionProps)`
+    display:flex;
+    cursor: pointer;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 10px;
+    gap: 14px;
+    width:100%;
+    box-sizing:inherit;
+    &:hover{
+      background-color:${(props) => props.theme.colors[props.hoveredBgColor]?props.theme.colors[props.hoveredBgColor]:props.hoveredBgColor};
+    }
+  `
 
-export default {
-  name: 'RCoption',
+  export default {
+    name: 'RCoption',
 
-  props: {
-    value: {
-      required: true
-    },
-    hoveredBgColor: {
-      required: false
+    props: {
+      value: {
+        required: true
+      },
+      hoveredBgColor:{
+        required:false,
+      },
+      colorMode:{
+        required:false,
+        default:'light'
+      }
     },
-    colorMode: {
-      required: false,
-      default: 'light'
-    }
-  },
 
-  components: { optionContainer },
+    components: {optionContainer},
 
-  data() {
-    return {}
-  },
-  methods: {
-    clickHandler() {
-      this.$parent.$emit('option-selected', this.value)
+    data() {
+      return {}
+    },
+    methods:{
+        clickHandler(){
+            this.$parent.$emit('option-selected',this.value)
+        },
+        hoverHandler(){
+            this.$parent.$emit('option-hovered',this.value)
+        }
     },
-    hoverHandler() {
-      this.$parent.$emit('option-hovered', this.value)
+    computed: {
     }
-  },
-  computed: {}
-}
-</script>
+  }
+  </script>

package/src/helpers/translateLang.js

@@ -70,8 +70,6 @@ export const datePickerLang = (lang) => {
     return 'fr'
   } else if (lang === 'it-it' || lang === 'it-ch') {
     return 'it'
-  } else if (lang === 'en-us' || lang === 'en-gb') {
-    return 'en'
   } else {
     return lang
   }

package/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    // Add your PostCSS plugins here
-    // Example: require('autoprefixer')
-  }
-}

package/src/assets/svgIcons/update.svg

@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.4545 4.45454L8.90909 7H10.8182C10.8182 9.10636 9.10636 10.8182 7 10.8182C6.35727 10.8182 5.74636 10.6591 5.21818 10.3727L4.28909 11.3018C5.07182 11.7982 6.00091 12.0909 7 12.0909C9.81273 12.0909 12.0909 9.81272 12.0909 7H14L11.4545 4.45454ZM3.18182 7C3.18182 4.89363 4.89364 3.18182 7 3.18182C7.64273 3.18182 8.25364 3.34091 8.78182 3.62727L9.71091 2.69818C8.92818 2.20182 7.99909 1.90909 7 1.90909C4.18727 1.90909 1.90909 4.18727 1.90909 7H0L2.54545 9.54545L5.09091 7H3.18182Z" fill="#263238"/>
-</svg>