@eturnity/eturnity_reusable_components 1.2.83 → 1.2.85-EPDM-3013.1

package/src/components/filter/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <page-wrapper ref="dropdown">
+    <parent-dropdown
+      @on-toggle="onToggleDropdown()"
+      :isOpen="isDropdownOpen"
+      :dropdownText="activeView ? activeView : 'Default view'"
+      :type="filterType"
+    />
+    <filter-views
+      v-if="
+        filterType === 'views' &&
+        isDropdownOpen &&
+        filterData &&
+        filterData.length
+      "
+      :filterData="filterData"
+      @on-select="onViewSelect($event)"
+      @on-delete="onViewDelete($event)"
+    />
+    <filter-settings
+      v-if="filterType === 'settings' && isDropdownOpen"
+      :filterData="filterData"
+      :buttonText="buttonText"
+      @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-save-current-view="onSaveCurrentView()"
+      @on-prevent-close="onPreventClose($event)"
+      :hasActiveView="hasActiveView"
+      :activeLanguage="activeLanguage"
+      :settingsTranslations="settingsTranslations"
+    />
+  </page-wrapper>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import parentDropdown from './parentDropdown'
+import filterViews from './filterViews'
+import filterSettings from './filterSettings'
+
+const PageWrapper = styled.div`
+  position: relative;
+`
+
+export default {
+  name: 'filter-component',
+  components: {
+    parentDropdown,
+    PageWrapper,
+    filterViews,
+    filterSettings
+  },
+  props: {
+    filterType: {
+      required: false,
+      default: 'settings' // 'settings', 'views'
+    },
+    filterData: {
+      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.$emit('on-filter-settings-change', data)
+    },
+    onCancelSettings() {
+      this.onToggleDropdown()
+      this.$emit('on-cancel-view')
+    },
+    onViewSelect(item) {
+      this.onToggleDropdown()
+      this.$emit('on-filter-view-select', item)
+    },
+    onViewDelete(item) {
+      this.onToggleDropdown()
+      this.$emit('on-filter-view-delete', item)
+    },
+    onSaveCurrentView() {
+      this.onToggleDropdown()
+      this.$emit('on-save-current-view')
+    }
+  },
+  mounted() {
+    document.addEventListener('click', this.clickOutside)
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.clickOutside)
+  }
+}
+</script>

package/src/components/filter/parentDropdown.vue

@@ -0,0 +1,98 @@
+<template>
+  <page-wrapper @click="$emit('on-toggle')">
+    <icon-wrapper>
+      <icon
+        :name="type === 'settings' ? 'settings' : 'show_in_a_new_tab'"
+        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: {
+    type: {
+      required: false,
+      default: 'settings' // 'settings', 'views'
+    },
+    isOpen: {
+      required: true,
+      default: false
+    },
+    dropdownText: {
+      required: true,
+      default: 'View'
+    }
+  }
+}
+</script>

package/src/components/iconWrapper/index.vue

@@ -1,116 +1,134 @@
 <template>
-    <Wrapper 
-    :disabled="disabled" 
-    :size="size" 
-    :backgroundColor="backgroundColor" 
+  <Wrapper
+    :disabled="disabled"
+    :size="size"
+    :backgroundColor="backgroundColor"
     :borderRadius="borderRadius"
     :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"
+    />
+    <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;
+`
 
-  export default {
-    name: 'iconWrapper',
-    components: {
-      Wrapper,
-      icon,
-      caret
+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
     },
-    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
-      },
-      borderRadius:{
-        required:false,
-        default:'6px'
-      },
-      isHovered:{
-        required:false,
-        default:false
-      }
+    borderRadius: {
+      required: false,
+      default: '6px'
     },
-    data() {
-      return {}
+    isHovered: {
+      required: false,
+      default: false
     }
+  },
+  data() {
+    return {}
   }
-  </script>
+}
+</script>

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

@@ -149,9 +149,9 @@ const InputContainer = styled('input', inputProps)`
         ? '1px solid ' + props.theme.colors[props.borderColor]
         : '1px solid ' + props.borderColor
       : '1px solid ' + props.theme.colors.grey4};
-  padding-top: 11px;
-  padding-bottom: 11px;
-  padding-left: 10px;
+  height: ${(props) => props.inputHeight};
+  max-height: ${(props) => props.inputHeight};
+  padding: 0 10px;
   padding-right: ${({ slotSize, isError, showLinearUnitName }) =>
     slotSize
       ? isError && !showLinearUnitName
@@ -160,7 +160,10 @@ const InputContainer = styled('input', inputProps)`
       : isError && !showLinearUnitName
       ? '24px'
       : '5px'};
-  border-radius: ${props=>props.isInteractive && props.alignItems!="vertical" ? "0 4px 4px 0" : "4px"};
+  border-radius: ${(props) =>
+    props.isInteractive && props.alignItems != 'vertical'
+      ? '0 4px 4px 0'
+      : '4px'};
   text-align: ${(props) => props.textAlign};
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
@@ -182,7 +185,7 @@ const InputContainer = styled('input', inputProps)`
   background-color: ${(props) =>
     props.isDisabled ? props.theme.colors.grey5 : '#fff'};
   box-sizing: border-box;
-  max-height: ${(props) => props.inputHeight};
+
   &::placeholder {
     color: ${(props) => props.theme.colors.grey2};
   }
@@ -253,8 +256,8 @@ const LabelSlotWrapper = styled('div', inputProps)`
   align-items: center;
   cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
   border: ${(props) =>
-    props.alignItems=="vertical" 
-      ? "none" 
+    props.alignItems == 'vertical'
+      ? 'none'
       : props.isError
       ? '1px solid ' + props.theme.colors.red
       : props.noBorder
@@ -265,7 +268,7 @@ const LabelSlotWrapper = styled('div', inputProps)`
         : '1px solid ' + props.borderColor
       : '1px solid ' + props.theme.colors.grey4};
   border-radius: 4px 0 0 4px;
-  border-right:none;
+  border-right: none;
 `
 
 const LabelText = styled('div', inputProps)`
@@ -330,7 +333,7 @@ export default {
     },
     inputHeight: {
       required: false,
-      default: null
+      default: '40px'
     },
     value: {
       required: true,

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

@@ -247,8 +247,9 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
       props.theme.colors[props.fontColor]
         ? props.theme.colors[props.fontColor]
         : props.fontColor};
-    max-height:300px;
-    overflow-y:auto;
+    max-height: 300px;
+    min-height: 39px;
+    overflow-y: auto;
     & [data-value="${(props) => props.selectedValue}"]{
         backdrop-filter: brightness(1.4);
     }