@eturnity/eturnity_reusable_components 7.22.3 → 7.22.4--EPDM-10563.2

package/src/components/buttons/mainButton/index.vue

@@ -8,8 +8,12 @@
       :customColor="customColor"
       :noWrap="noWrap"
       :data-id="dataId"
+      :fontColor="fontColor"
     >
-      {{ text }}
+      <Label :hasIcon="Boolean(icon)">
+        <icon v-if="icon" :name="icon" size="14px" />
+        {{ text }}
+      </Label>
     </button-container>
   </page-container>
 </template>
@@ -21,12 +25,14 @@
 //   text="Click Me"
 //   customColor="#ab5348"
 //   type="secondary" // primary, secondary, cancel
+//   icon="icon-name" // icon name from icon component
 //   :isDisabled="true"
 //   :minWidth="minWidth"
 //   :data-id="test_data_id"
 // />
 
 import styled from 'vue3-styled-components'
+import Icon from '../../icon'
 
 const PageContainer = styled.div``
 
@@ -35,12 +41,14 @@ const ButtonAttrs = {
   isDisabled: Boolean,
   minWidth: String,
   customColor: String,
+  fontColor: String,
   noWrap: Boolean
 }
 const ButtonContainer = styled('div', ButtonAttrs)`
   padding: 7px 15px;
   font-size: 13px;
-  color: ${(props) => props.theme.colors.white};
+  color: ${(props) =>
+    props.fontColor ? props.fontColor : props.theme.colors.white};
   background-color: ${(props) =>
     props.isDisabled
       ? props.theme.colors.disabled
@@ -69,9 +77,22 @@ const ButtonContainer = styled('div', ButtonAttrs)`
   }
 `
 
+const LabelAttrs = {
+  hasIcon: Boolean
+}
+
+const Label = styled('span', LabelAttrs)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${(props) => (props.hasIcon ? '5px' : '0')};
+`
+
 export default {
   name: 'main-button',
   components: {
+    Icon,
+    Label,
     PageContainer,
     ButtonContainer
   },
@@ -84,6 +105,10 @@ export default {
       required: false,
       default: false
     },
+    icon: {
+      required: false,
+      default: null
+    },
     text: {
       required: true
     },
@@ -91,6 +116,9 @@ export default {
       required: false,
       default: null
     },
+    fontColor: {
+      required: false
+    },
     noWrap: {
       required: false,
       default: false

package/src/components/collapsableInfoText/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <Text :expand="showButton && showAll" :fontSize="fontSize">{{ text }}</Text>
+    <ToggleContainer>
+      <ToggleButton
+        @click="toggleHandler"
+        v-if="showButton && !showAll"
+        :fontSize="fontSize"
+      >
+        {{ $gettext('Show more') }}
+      </ToggleButton>
+      <ToggleButton
+        @click="toggleHandler"
+        v-if="showButton && showAll"
+        :fontSize="fontSize"
+      >
+        {{ $gettext('Show less') }}
+      </ToggleButton>
+    </ToggleContainer>
+  </div>
+</template>
+
+<script>
+import styled from 'vue3-styled-components'
+import theme from '@/assets/theme.js'
+
+const TextAttrs = {
+  expand: Boolean,
+  fontSize: String
+}
+const Text = styled('p', TextAttrs)`
+  display: block;
+  display: -webkit-box;
+  line-height: 1.3em;
+  -webkit-line-clamp: ${(props) => (props.expand ? 'unset' : '4')};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: ${(props) => props.fontSize}px;
+  text-overflow: ellipsis;
+`
+
+const ToggleContainer = styled.div`
+  display: flex;
+  width: 100%;
+`
+
+const ToggleButton = styled('p', TextAttrs)`
+  font-size: ${(props) => props.fontSize}px;
+  cursor: pointer;
+  color: ${(props) => props.theme.colors.blue};
+`
+
+export default {
+  name: 'collapsable-info-text',
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+    fontSize: {
+      type: String,
+      default: '16px'
+    },
+    lineCount: {
+      type: Number,
+      default: 3
+    },
+    minWidth: {
+      type: String,
+      default: '100%'
+    }
+  },
+  components: {
+    Text,
+    ToggleButton,
+    ToggleContainer
+  },
+  data() {
+    return {
+      showButton: true,
+      showAll: false,
+      lineBreaks: []
+    }
+  },
+  computed: {
+    theme() {
+      return theme
+    }
+  },
+  methods: {
+    displayText() {
+      if (!this.showButton) {
+        return this.text
+      }
+      if (!this.showAll) {
+        let countIndex = 0
+        this.lineBreaks.forEach((el, index) => {
+          if (index < this.lineCount) {
+            countIndex += el.length
+          }
+        })
+
+        return this.text.slice(0, countIndex + 2) + '...'
+      } else {
+        return this.text
+      }
+    },
+    toggleHandler() {
+      this.showAll = !this.showAll
+    }
+  },
+  created() {
+    // TODO: this should divide the text into lines based on with. Currently it's just splitting by line breaks
+    // this.lineBreaks = this.text.split('\n')
+
+    // if (this.lineBreaks.length <= this.lineCount) {
+    //   this.showButton = false
+    // }
+
+    if (this.text.length <= 170) {
+      this.showButton = false
+    }
+  }
+}
+</script>

package/src/components/filter/filterSettings.vue

@@ -92,6 +92,7 @@
               fontSize="13px"
               :label="filter.label"
               :labelDataId="filter.dataId"
+              :isSearchable="filter.choices.length > 7"
               alignItems="vertical"
               :disabled="!filter.choices.length"
               :minOptionLength="1"
@@ -225,6 +226,7 @@
               fontSize="13px"
               :label="filter.label"
               alignItems="vertical"
+              :isSearchable="filter.choices.length > 7"
               :disabled="!filter.choices.length"
             >
               <template #selector="{ selectedValue }">
@@ -302,7 +304,7 @@ const ContainerWrapper = styled.div`
   width: max-content;
   border: 1px solid ${(props) => props.theme.colors.grey4};
   border-radius: 4px;
-  z-index: 9999;
+  z-index: 99999;
   font-size: 13px;
 `
 

package/src/components/icon/index.vue

@@ -4,6 +4,7 @@
       :color="color"
       :background-color="backgroundColor"
       :hovered-color="hoveredColor"
+      :animation="animation"
     >
       <i v-html="icon.html" />
     </icon-image>
@@ -56,6 +57,10 @@ const props = defineProps({
   backgroundColor: {
     required: false,
     default: null
+  },
+  animation: {
+    required: false,
+    default: 'none'
   }
 })
 
@@ -94,8 +99,10 @@ const StrikedLine = styled('div', { color: String })`
 const IconImage = styled('div', {
   color: String,
   backgroundColor: String,
-  hoveredColor: String
+  hoveredColor: String,
+  animation: String
 })`
+  animation: ${(props) => props.animation};
   width: 100%;
   svg {
     width: 100%;
@@ -107,12 +114,18 @@ const IconImage = styled('div', {
   svg path {
     ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
   }
-  &:hover > svg path {
-    ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
+  &:hover svg path {
+    ${({ theme, hoveredColor }) =>
+      hoveredColor && `fill: ${theme.colors[hoveredColor] || hoveredColor};`}
   }
   &:hover + div {
     background-color: ${(props) => props.hoveredColor};
   }
+  @keyframes fade {
+    50% {
+      opacity: 0.3;
+    }
+  }
 `
 
 const icon = reactive({ html: '' })

package/src/components/iconWrapper/index.vue

@@ -9,6 +9,7 @@
     :hoveredBackgroundColor="hoveredBackgroundColor"
     :isHovered="isHovered"
     :data-id="dataId"
+    :noCursor="noCursor"
   >
     <icon
       :disabled="disabled"
@@ -17,6 +18,7 @@
       :color="iconColor"
       :hoveredColor="hoveredIconColor"
       :isStriked="isStriked"
+      :animation="isLoading ? 'fade 3s infinite' : 'none'"
     />
 
     <caret v-if="hasCaret">
@@ -29,6 +31,9 @@
         borderRadius="1px"
       />
     </caret>
+    <lockContainer v-if="hasLock">
+      <icon size="9px" name="lock" color="yellow" />
+    </lockContainer>
   </Wrapper>
 </template>
 
@@ -44,6 +49,7 @@
 
 import styled from 'vue3-styled-components'
 import icon from '../icon'
+
 const wrapperAttrs = {
   color: String,
   isHovered: Boolean,
@@ -52,8 +58,14 @@ const wrapperAttrs = {
   size: String,
   backgroundColor: String,
   hoveredBackgroundColor: String,
-  hasBorder: Boolean
+  hasBorder: Boolean,
+  noCursor: Boolean
 }
+const lockContainer = styled.div`
+  position: absolute;
+  bottom: 6px;
+  right: 6px;
+`
 const Wrapper = styled('div', wrapperAttrs)`
   position: relative;
   display: inline-flex;
@@ -65,7 +77,8 @@ const Wrapper = styled('div', wrapperAttrs)`
       : ''};
   justify-content: center;
   align-items: center;
-  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+  cursor: ${(props) =>
+    props.noCursor ? 'auto' : props.disabled ? 'not-allowed' : 'pointer'};
   background-color: ${(props) =>
     props.theme.colors[props.backgroundColor] || props.backgroundColor};
   border-radius: ${(props) => props.borderRadius};
@@ -93,7 +106,8 @@ export default {
   components: {
     Wrapper,
     icon,
-    caret
+    caret,
+    lockContainer
   },
   props: {
     disabled: {
@@ -147,6 +161,18 @@ export default {
     isStriked: {
       required: false,
       default: false
+    },
+    isLoading: {
+      required: false,
+      default: false
+    },
+    noCursor: {
+      required: false,
+      default: false
+    },
+    hasLock: {
+      required: false,
+      default: false
     }
   }
 }

package/src/components/infoCard/index.vue

@@ -13,6 +13,7 @@ import Icon from '../icon'
 
 const InfoContainer = styled.div`
   display: flex;
+  align-items: center;
   gap: 15px;
   padding: 20px;
   border: 1px dashed ${(props) => props.theme.colors.grey4};

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

@@ -197,6 +197,11 @@ export default {
       return !!this.label.length
     }
   },
+  computed: {
+    hasLabel() {
+      return !!this.label.length
+    }
+  },
   methods: {
     onChangeHandler(value) {
       if (this.isDisabled) {

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

@@ -26,7 +26,7 @@
           <input-container
             ref="inputElement"
             :placeholder="placeholder"
-            :isError="isError"
+            :isError="hasError"
             :inputWidth="inputWidth"
             :minWidth="minWidth"
             :inputHeight="inputHeight"
@@ -53,12 +53,12 @@
           >
             <icon name="current_variant" size="20px" />
           </icon-wrapper>
-          <icon-wrapper v-if="isError" size="16px">
+          <icon-wrapper v-if="hasError" size="16px">
             <icon name="warning" size="16px" cursor="default" />
           </icon-wrapper>
         </icon-container>
-        <error-message v-if="isError && errorMessage">{{
-          errorMessage
+        <error-message v-if="hasError && hasErrorMessage">{{
+          dynamicErrorMessage
         }}</error-message>
       </input-error-wrapper>
     </input-wrapper>
@@ -70,6 +70,7 @@ import styled from 'vue3-styled-components'
 import InfoText from '../../infoText'
 import Icon from '../../icon'
 import ErrorMessage from '../../errorMessage'
+import InputValidations from '../../../mixins/inputValidations.js'
 
 const Container = styled.div`
   width: 100%;
@@ -229,11 +230,25 @@ export default {
     InputErrorWrapper,
     optionalLabel
   },
+  mixins: [InputValidations],
   data() {
     return {
       inputTypeData: 'text'
     }
   },
+  computed: {
+    hasError() {
+      return this.isError || this.error
+    },
+    hasErrorMessage() {
+      return (
+        (this.errorMessage && this.errorMessage.length > 0) || this.errMessage
+      )
+    },
+    dynamicErrorMessage() {
+      return this.errMessage || this.errorMessage
+    }
+  },
   props: {
     placeholder: {
       required: false,
@@ -336,6 +351,7 @@ export default {
       this.$emit('input-change', event.target.value)
     },
     onInputBlur($event) {
+      this.validateInput($event.target.value)
       this.$emit('input-blur', $event.target.value)
     },
     toggleShowPassword() {

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

@@ -3,6 +3,7 @@
     <radio-wrapper v-for="(item, index) in options" :key="item.value">
       <label-container
         :size="size"
+        :hasLabel="item.label"
         :isDisabled="item.disabled"
         :isChecked="selectedOption === item.value"
         :checkmarkColor="checkmarkColor"
@@ -17,7 +18,7 @@
           :data-id="`radio_button_${dataId}_option_${item.value}`"
         />
         <span class="checkmark"></span>
-        <label-text :isDisabled="item.disabled">{{ item.label }}</label-text>
+        <label-text :isDisabled="item.disabled" v-if="item.label">{{ item.label }}</label-text>
         <info-text v-if="item.infoText" :text="item.infoText" size="16px" />
       </label-container>
       <image-container v-if="item.img">
@@ -98,7 +99,9 @@ const containerProps = {
 const LabelContainer = styled('label', containerProps)`
   display: grid;
   grid-template-columns: auto 1fr auto;
-  grid-gap: 15px;
+  grid-gap: ${(props) =>
+    props.hasLabel
+       ? '15px' : 0 };
   align-items: center;
   color: ${(props) =>
     props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};

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

@@ -10,7 +10,11 @@
       :alignItems="alignItems"
       :noRelative="noRelative"
     >
-      <label-wrapper v-if="label" :data-id="labelDataId">
+      <label-wrapper
+        v-if="label"
+        :data-id="labelDataId"
+        :infoTextMessage="!!infoTextMessage"
+      >
         <input-label
           :fontColor="
             labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
@@ -42,8 +46,9 @@
           :fontColor="
             buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
           "
+          :fontSize="fontSize"
           :hasError="hasError"
-          :hasNoPadding="isSearchBarVisible || !hasSelectButtonPadding"
+          :hasNoPadding="hasNoPadding"
           :disabled="disabled"
           @keydown="onKeyDown"
           :showBorder="showBorder"
@@ -69,6 +74,7 @@
               buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
             "
             :value="textSearch"
+            :inputWidth="computedWidth"
             @keydown.stop="onKeyDown"
             @input-change="searchChange"
             @click.stop
@@ -145,12 +151,13 @@
 // <Select
 //     hoverDropdown="true"
 //     selectWidth="100%"
+//     minWidth="220px"
 //     optionWidth="50%"
 //     label="that is a label"
 //     alignItems="vertical"
 //     label-data-id="test-label-data-id"
 //     data-id="test-data-id"
-//     :hasSelectButtonPadding="false"
+//     :hasNoPadding="true"
 //     >
 //     <template #selector="{selectedValue}">
 //     value selected: {{selectedValue}}
@@ -228,9 +235,12 @@ const Container = styled('div', inputProps)`
   position: ${(props) => (props.noRelative ? 'static' : 'relative')};
   display: inline-block;
 `
-const LabelWrapper = styled.div`
+
+const LabelWrapperAttrs = { infoTextMessage: Boolean }
+const LabelWrapper = styled('div', LabelWrapperAttrs)`
   display: inline-grid;
-  grid-template-columns: auto auto;
+  grid-template-columns: ${(props) =>
+    props.infoTextMessage ? 'auto auto' : 'auto'};
   grid-gap: 12px;
   align-items: center;
   justify-content: start;
@@ -376,6 +386,8 @@ const inputAttrs = {
 const InputWrapper = styled('div', inputAttrs)`
   position: ${(props) => (props.noRelative ? 'static' : 'relative')};
   display: grid;
+  width: 100%;
+  min-width: ${(props) => (props.minWidth ? props.minWidth : '150px')};
   align-items: center;
   gap: 8px;
   grid-template-columns: ${(props) =>
@@ -426,6 +438,12 @@ export default {
       required: false,
       default: '100%'
     },
+    minWidth: {
+      required: false
+    },
+    maxWidth: {
+      required: false
+    },
     selectHeight: {
       type: String,
       required: false,
@@ -439,9 +457,6 @@ export default {
       required: false,
       default: '36px'
     },
-    minWidth: {
-      required: false
-    },
     optionWidth: {
       required: false,
       default: null
@@ -471,6 +486,10 @@ export default {
     dropdownFontColor: {
       required: false
     },
+    dropDownArrowVisible: {
+      required: false,
+      default: true
+    },
     caretColor: {
       required: false
     },
@@ -509,14 +528,14 @@ export default {
       type: String,
       default: ''
     },
-    hasSelectButtonPadding: {
-      type: Boolean,
-      default: true
-    },
     isDraggable: {
       type: Boolean,
       default: false
     },
+    leftPadding: {
+      type: String,
+      default: '15px'
+    },
     tablePaddingLeft: {
       required: false
     },
@@ -531,6 +550,11 @@ export default {
     dropdownMenuPosition: {
       type: String,
       default: DROPDOWN_MENU_POSITIONS.Automatic // options: ['automatic', bottom]
+    },
+    hasNoPadding: {
+      required: false,
+      default: false,
+      type: Boolean
     }
   },
 
@@ -556,7 +580,7 @@ export default {
   data() {
     return {
       selectedValue: null,
-      paddingLeft: this.isDraggable ? '30px' : '15px',
+      paddingLeft: this.isDraggable ? '30px' : this.leftPadding,
       isDropdownOpen: false,
       isActive: false,
       textSearch: '',
@@ -600,16 +624,14 @@ export default {
     toggleCaretDropdown() {
       this.isDropdownOpen = !this.isDropdownOpen
     },
-    openDropdown() {
-      this.focus()
-      this.isDropdownOpen = true
-    },
     closeDropdown() {
       this.blur()
+      this.clearSearch()
       this.isDropdownOpen = false
     },
     clearSearch() {
       this.textSearch = ''
+      this.searchChange('')
     },
     optionSelected(e) {
       this.selectedValue = e
@@ -646,6 +668,7 @@ export default {
 
           return
         }
+
         el.style.display = 'inherit'
       })
     },
@@ -757,6 +780,7 @@ export default {
     observeSelectWidth() {
       if (!this.$refs.select) return
       this.selectResizeObserver = new ResizeObserver(() =>
+        // eslint-disable-next-line vue/valid-next-tick
         this.$nextTick(() => this.getDropdownWidth())
       )
       this.selectResizeObserver.observe(this.$refs.dropdown.$el)
@@ -783,9 +807,6 @@ export default {
           this.$refs.dropdown.$el.scrollTop = topPos
         }
       }
-    },
-    clearSearch() {
-      this.textSearch = ''
     }
   },
   computed: {
@@ -805,6 +826,15 @@ export default {
         this.isDropdownOpen
       )
     },
+    computedWidth() {
+      function removePX(item) {
+        return Number(item.replace('px', ''))
+      }
+
+      return this.selectWidth === '100%'
+        ? '100%'
+        : removePX(this.selectWidth) - removePX(CARET_WIDTH) + 'px'
+    },
     getOptionWidth() {
       if (this.optionWidth) return this.optionWidth
 
@@ -838,6 +868,7 @@ export default {
     },
     async isDropdownOpen(val) {
       if (val) {
+        this.$emit('on-dropdown-open')
         setTimeout(() => {
           this.isClickOutsideActive = true
         }, 10)