@eturnity/eturnity_reusable_components 6.37.0-EPDM-8148.3 → 6.37.0-EPDM-8148.5

package/src/components/filter/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <page-wrapper ref="dropdown">
+    <parent-dropdown
+      @on-toggle="onToggleDropdown()"
+      :isOpen="isDropdownOpen"
+      :dropdownText="dropdownText ? dropdownText : 'Default view'"
+    />
+    <filter-settings
+      v-if="isDropdownOpen"
+      :filterData="filterData"
+      :filterViews="filterViews"
+      :buttonText="buttonText"
+      @on-view-select="onViewSelect($event)"
+      @on-view-delete="onViewDelete($event)"
+      @on-save-new-view="$emit('on-save-new-view')"
+      @on-filter-change="onFilterChange($event)"
+      @on-cancel-view="onCancelSettings()"
+      @on-drag-change="$emit('on-drag-change', $event)"
+      @on-apply-current-view="onApplyCurrentView()"
+      @on-prevent-close="onPreventClose($event)"
+      @on-reset-filters="onResetFilters()"
+      :hasActiveView="hasActiveView"
+      :activeView="activeView"
+      :activeLanguage="activeLanguage"
+      :settingsTranslations="settingsTranslations"
+    />
+  </page-wrapper>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import parentDropdown from './parentDropdown'
+import filterSettings from './filterSettings'
+
+const PageWrapper = styled.div`
+  position: relative;
+`
+
+export default {
+  name: 'filter-component',
+  components: {
+    parentDropdown,
+    PageWrapper,
+    filterSettings
+  },
+  props: {
+    filterData: {
+      required: true
+    },
+    dropdownText: {
+      required: false
+    },
+    filterViews: {
+      required: true
+    },
+    activeView: {
+      required: false,
+      default: null
+    },
+    buttonText: {
+      required: false
+    },
+    hasActiveView: {
+      required: false
+    },
+    activeLanguage: {
+      required: false,
+      default: 'en-us'
+    },
+    settingsTranslations: {
+      required: false
+    }
+  },
+  data() {
+    return {
+      isDropdownOpen: false,
+      activeFilter: null,
+      preventOutsideClick: false
+    }
+  },
+  methods: {
+    onToggleDropdown() {
+      this.isDropdownOpen = !this.isDropdownOpen
+    },
+    clickOutside(event) {
+      if (
+        !this.$refs.dropdown.$el.contains(event.target) &&
+        !this.preventOutsideClick
+      ) {
+        this.isDropdownOpen = false
+      }
+    },
+    onPreventClose(value) {
+      setTimeout(() => {
+        this.preventOutsideClick = value
+      }, 100)
+    },
+    onFilterChange(data) {
+      // this.preventOutsideClick = true is needed for when the user clicks on the calendar icon on the date range
+      // because clicking the calendar does not trigger the @focus
+      this.preventOutsideClick = true
+      this.$emit('on-filter-settings-change', data)
+      this.onPreventClose(false)
+    },
+    onCancelSettings() {
+      this.onToggleDropdown()
+      this.$emit('on-cancel-view')
+    },
+    onViewSelect(item) {
+      this.onToggleDropdown()
+      this.$emit('on-filter-view-select', item)
+    },
+    onViewDelete(item) {
+      this.$emit('on-filter-view-delete', item)
+    },
+    onApplyCurrentView() {
+      this.onToggleDropdown()
+      this.$emit('on-apply-current-view')
+    },
+    onResetFilters() {
+      this.onToggleDropdown()
+      this.$emit('on-reset-filters')
+    }
+  },
+  mounted() {
+    document.addEventListener('click', this.clickOutside)
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.clickOutside)
+  }
+}
+</script>

package/src/components/filter/parentDropdown.vue

@@ -0,0 +1,91 @@
+<template>
+  <page-wrapper @click="$emit('on-toggle')">
+    <icon-wrapper>
+      <icon name="settings" size="18px" />
+    </icon-wrapper>
+    <title-wrapper :isOpen="isOpen">
+      <title-text>
+        {{ dropdownText }}
+      </title-text>
+      <arrow-wrapper>
+        <icon
+          @click.native.stop="$emit('on-toggle')"
+          :name="isOpen ? 'arrow_up' : 'arrow_down'"
+          size="12px"
+        />
+      </arrow-wrapper>
+    </title-wrapper>
+  </page-wrapper>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import Icon from '../icon'
+
+const PageWrapper = styled.div`
+  display: grid;
+  grid-template-columns: auto auto;
+  cursor: pointer;
+`
+
+const IconWrapper = styled.div`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  border: 1px solid ${(props) => props.theme.colors.grey4};
+  border-radius: 4px 0px 0px 4px;
+  padding: 6px;
+`
+
+const TitleAttrs = { isOpen: Boolean }
+const TitleWrapper = styled('div', TitleAttrs)`
+  display: grid;
+  grid-template-columns: auto auto;
+  align-items: center;
+  justify-items: center;
+  grid-gap: 10px;
+  border: 1px solid ${(props) => props.theme.colors.grey4};
+  background-color: ${(props) =>
+    props.isOpen ? props.theme.colors.grey5 : props.theme.colors.white};
+  border-left: none;
+  border-radius: 0px 4px 4px 0px;
+  padding: 6px 14px;
+  user-select: none;
+`
+
+const TitleText = styled.div`
+  font-size: 13px;
+`
+
+const ArrowWrapper = styled.div`
+  display: grid;
+  align-items: center;
+
+  div {
+    height: auto !important;
+    min-height: unset;
+  }
+`
+
+export default {
+  name: 'parent-dropdown',
+  components: {
+    PageWrapper,
+    Icon,
+    IconWrapper,
+    TitleWrapper,
+    TitleText,
+    ArrowWrapper
+  },
+  props: {
+    isOpen: {
+      required: true,
+      default: false
+    },
+    dropdownText: {
+      required: true,
+      default: 'View'
+    }
+  }
+}
+</script>

package/src/components/iconWrapper/index.vue

@@ -110,11 +110,10 @@ export default {
       required: false
     },
     backgroundColor: {
-      required: false
-    },
-    hasBorder: {
       required: false,
-      default: false
+      },
+      hasBorder: {
+        required: false,
     },
     hoveredBackgroundColor: {
       required: false,
@@ -134,15 +133,15 @@ export default {
     },
     borderRadius: {
       required: false,
-      default: '4px'
-    },
-    isHovered: {
-      required: false,
-      default: false
+      default: '6px'
     },
-    isStriked: {
-      required: false,
-      default: false
+    isHovered:{
+      required:false,
+      default:false
+      },
+      isStriked:{
+        required:false,
+        default:false
     }
   },
   data() {

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

@@ -433,6 +433,10 @@ export default {
     labelFontColor: {
       required: false,
       default: 'eturnityGrey'
+    },
+    focus: {
+      required: false,
+      default: false
     }
   },
   computed: {
@@ -660,7 +664,17 @@ export default {
       })
     }
   },
+  mounted() {
+    if (this.focus) {
+      this.focusInput()
+    }
+  },
   watch: {
+    focus(value) {
+      if (value) {
+        this.focusInput()
+      }
+    },
     clearInput: function (value) {
       if (value) {
         // If the value is typed, then we should clear the textInput on Continue

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

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

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

@@ -32,6 +32,7 @@
           ref="select"
           @click="toggleDropdown"
           :selectHeight="selectHeight"
+          :height="height"
           :selectMinHeight="selectMinHeight"
           :bgColor="
             buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
@@ -92,11 +93,11 @@
             ref="dropdown"
             v-show="isDropdownOpen"
             :hoveredIndex="hoveredIndex"
+            :hoveredValue="hoveredValue"
             :isActive="isActive"
             :optionWidth="optionWidth"
-            :bgColor="
-              dropdownBgColor || colorMode == 'dark' ? 'black' : 'white'
-            "
+            :hoveredBgColor="colorMode == 'dark' ? '#000000' : dropdownBgColor"
+            :bgColor="colorMode == 'dark' ? 'black' : dropdownBgColor"
             :fontColor="
               dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
             "
@@ -145,7 +146,6 @@ const Caret = styled.div`
   min-width: 30px;
   height: 100%;
   align-items: stretch
-  padding-top: 5px;
   cursor: pointer;
   margin-left: auto;
 `
@@ -154,7 +154,7 @@ const Selector = styled.div`
   width: 100%;
 `
 
-const labelAttrs = { fontSize: String }
+const labelAttrs = { fontSize: String, fontColor: String }
 const InputLabel = styled('div', labelAttrs)`
   color: ${(props) =>
     props.theme.colors[props.fontColor]
@@ -193,6 +193,7 @@ const selectButtonAttrs = {
   hasError: Boolean,
   disabled: Boolean,
   selectHeight: String,
+  height: String,
   selectMinHeight: String,
   isSearchBarVisible: Boolean,
   showBorder: Boolean
@@ -204,7 +205,14 @@ const selectButton = styled('div', selectButtonAttrs)`
   padding: ${(props) => (props.isSearchBarVisible ? '0' : '0px 0px 0 15px')};
   text-align: left;
   border-radius: 4px;
-  min-height: ${(props) => props.selectMinHeight};
+  min-height: ${(props) =>
+    props.selectHeight
+      ? props.selectHeight
+      : props.selectMinHeight
+      ? props.selectMinHeight
+      : props.height
+      ? props.height
+      : '36px'};
   display: flex;
   align-items: center;
   max-height: ${(props) => props.selectHeight};
@@ -226,11 +234,13 @@ const selectButton = styled('div', selectButtonAttrs)`
   ${(props) => (props.disabled ? 'pointer-events: none' : '')};
 `
 const selectDropdownAttrs = {
+  hoveredBgColor: String,
   bgColor: String,
   fontColor: String,
   selectWidth: String,
   optionWidth: String,
   hoveredIndex: Number,
+  hoveredValue: Number | String,
   selectedValue: Number | String
 }
 const selectDropdown = styled('div', selectDropdownAttrs)`
@@ -256,11 +266,11 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
         : props.fontColor};
     max-height:300px;
     overflow-y:auto;
-    & [data-value="${(props) => props.selectedValue}"]{
-        backdrop-filter: brightness(1.4);
-    }
-    &>div:nth-child(${(props) => props.hoveredIndex}){
-        backdrop-filter: brightness(1.2);
+    &>div[data-value="${(props) => props.hoveredValue}"]{
+        background-color:${(props) =>
+          props.theme.colors[props.hoveredBgColor]
+            ? props.theme.colors[props.hoveredBgColor]
+            : props.hoveredBgColor};
     }
 `
 const DropdownWrapper = styled('div')`
@@ -309,6 +319,10 @@ export default {
       required: false,
       default: null
     },
+    height: {
+      required: false,
+      default: null
+    },
     selectMinHeight: {
       required: false,
       default: '36px'
@@ -332,7 +346,8 @@ export default {
       required: false
     },
     dropdownBgColor: {
-      required: false
+      required: false,
+      default: 'grey5'
     },
     dropdownFontColor: {
       required: false
@@ -393,6 +408,7 @@ export default {
       isActive: false,
       textSearch: '',
       hoveredIndex: 0,
+      hoveredValue:null,
       isClickOutsideActive: false
     }
   },
@@ -431,13 +447,7 @@ export default {
       this.$emit('input-change', e)
     },
     optionHovered(e) {
-      const optionElement = this.$el.querySelector(`[data-value="${e}"]`)
-      if (this.$refs.dropdown) {
-        this.hoveredIndex =
-          this.$refs.dropdown.$children
-            .map((component) => component.$el)
-            .indexOf(optionElement) + 1
-      }
+      this.hoveredValue=e
     },
     mouseEnterHandler() {
       if (this.hoverDropdown) {
@@ -491,16 +501,20 @@ export default {
       }
     },
     onArrowPress(dir) {
-      this.hoveredIndex =
-        ((this.hoveredIndex + dir + this.optionLength - 1) %
-          this.optionLength) +
-        1
-      const optionHoveredComponent =
-        this.$refs.dropdown.$children[
-          (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
-        ]
-      const topPos = optionHoveredComponent.$el.offsetTop
-      this.$refs.dropdown.$el.scrollTop = topPos
+      let newHoveredElem
+      const currentHoveredElem=this.$refs.dropdown.$el.querySelector(`[data-value="${this.hoveredValue}"]`);
+      if(currentHoveredElem){
+        if(dir>0){
+          newHoveredElem=currentHoveredElem.nextElementSibling
+        }else{
+          newHoveredElem=currentHoveredElem.previousElementSibling
+        }
+        if(newHoveredElem){
+          this.hoveredValue = newHoveredElem.getAttribute('data-value')
+          const topPos = newHoveredElem.offsetTop
+          this.$refs.dropdown.$el.scrollTop = topPos
+        }
+      }
     }
   },
   computed: {

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

@@ -36,6 +36,10 @@ const optionContainer = styled('div', optionProps)`
   padding: 12px 10px;
   gap: 14px;
   width: 100%;
+  background-color: ${(props) =>
+    props.theme.colors[props.backgroundColor]
+      ? props.theme.colors[props.backgroundColor]
+      : props.backgroundColor};
   box-sizing: inherit;
   background-color: ${(props) =>
     props.theme.colors[props.backgroundColor]
@@ -45,7 +49,7 @@ const optionContainer = styled('div', optionProps)`
     background-color: ${(props) =>
       props.theme.colors[props.hoveredBgColor]
         ? props.theme.colors[props.hoveredBgColor]
-        : props.hoveredBgColor};
+        : props.hoveredBgColor} !important;
   }
 `
 

package/src/components/tableDropdown/index.vue

@@ -104,12 +104,7 @@
             :src="require('../../assets/icons/collapse_arrow_icon.svg')"
           />
         </arrow-wrapper>
-        <options-container
-          v-if="isOpen"
-          :top="getItemLocation('top')"
-          :left="getItemLocation('left')"
-          ref="optionsContainer"
-        >
+        <options-container v-if="isOpen" ref="optionsContainer">
           <options-wrapper @click.prevent.stop>
             <search-container @click.prevent.stop>
               <search-input
@@ -290,8 +285,7 @@ const OptionsContainer = styled('div', optionsAttrs)`
   position: absolute;
   display: grid;
   grid-template-rows: 1fr auto;
-  top: ${(props) => props.top + 'px'};
-  left: ${(props) => props.left + 'px'};
+  left: 20px;
   width: auto;
   max-height: 360px;
   min-height: 200px;
@@ -512,8 +506,13 @@ export default {
     }
   },
   methods: {
-    toggleOpen() {
-      if (this.disabled) {
+    toggleOpen(event) {
+      if (
+        this.disabled ||
+        (event &&
+          !(event.target === this.$el) &&
+          !this.$el.contains(event.target))
+      ) {
         return
       }
       this.wasClicked = false
@@ -560,14 +559,6 @@ export default {
       this.inputText = value
       this.$emit('dropdown-search', value)
     },
-    getItemLocation(value) {
-      let ref = this.$refs.dropdownItem[0]
-      let location = ref.$el.getBoundingClientRect()[value]
-      if (value === 'top') {
-        location = location + window.scrollY + 40
-      }
-      return location
-    },
     clickOutside(event) {
       if (event.target === this.$el || this.$el.contains(event.target)) {
         return