@eturnity/eturnity_reusable_components 6.37.0-EPDM-8148.6 → 6.37.0-EPDM-2198.1

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

@@ -8,7 +8,7 @@
       :hasLabel="!!label && label.length > 0"
       :alignItems="alignItems"
     >
-      <label-wrapper v-if="label">
+      <label-wrapper v-if="label" :data-id="labelDataId">
         <input-label
           :fontColor="
             labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
@@ -22,9 +22,7 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          :size="fontSize ? fontSize : '16px'"
-          :alignText="infoTextAlign"
+          :size="infoTextSize"
         />
       </label-wrapper>
       <select-button-wrapper :disabled="disabled">
@@ -45,7 +43,13 @@
           :disabled="disabled"
           @keydown.native="onKeyDown"
           :showBorder="showBorder"
+          :data-id="dataId"
+          :paddingLeft="paddingLeft"
         >
+          <draggableInputHandle
+            v-if="isDraggable && !isSearchBarVisible"
+            :height="selectHeight"
+          />
           <inputText
             v-if="isSearchBarVisible"
             ref="searchInput"
@@ -62,7 +66,12 @@
             @input-change="searchChange"
             @click.native.stop
           />
-          <selector v-else>
+          <selector
+            v-else
+            :showBorder="showBorder"
+            :selectWidth="selectWidth"
+            :paddingLeft="paddingLeft"
+          >
             <slot name="selector" :selectedValue="selectedValue"></slot>
           </selector>
           <Caret @click.stop="toggleCaretDropdown">
@@ -104,6 +113,7 @@
             :selectedValue="selectedValue"
             @option-selected="optionSelected"
             @option-hovered="optionHovered"
+            @mouseleave="optionLeave"
           >
             <slot name="dropdown"></slot>
           </selectDropdown>
@@ -121,6 +131,8 @@
 //     optionWidth="50%"
 //     label="that is a label"
 //     alignItems="vertical"
+//     label-data-id="test-label0data-id"
+//     data-id="test-data-id"
 //     >
 //     <template #selector="{selectedValue}">
 //     value selected: {{selectedValue}}
@@ -137,21 +149,40 @@ import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
 import icon from '../../icon'
 import inputText from '../inputText'
+import draggableInputHandle from '../../draggableInputHandle'
+
+const CARET_WIDTH = '30px'
+const BORDER_WIDTH = '1px'
 
 const Caret = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 30px;
-  min-width: 30px;
+  width: ${CARET_WIDTH};
+  min-width: ${CARET_WIDTH};
   height: 100%;
-  align-items: stretch
+  align-items: stretch;
   cursor: pointer;
   margin-left: auto;
 `
 
-const Selector = styled.div`
-  width: 100%;
+const selectorProps = {
+  selectWidth: String,
+  paddingLeft: String,
+  showBorder: Boolean
+}
+const Selector = styled('div', selectorProps)`
+  ${(props) => props.selectWidth === '100%' ? 'width: 100%;' : `width: calc(${props.selectWidth} -
+      (
+        ${CARET_WIDTH} +
+        ${props.paddingLeft}
+        ${props.showBorder ? `+ (${BORDER_WIDTH} * 2)` : ''}
+      )
+    );
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;`
+  }
 `
 
 const labelAttrs = { fontSize: String, fontColor: String }
@@ -160,7 +191,7 @@ const InputLabel = styled('div', labelAttrs)`
     props.theme.colors[props.fontColor]
       ? props.theme.colors[props.fontColor]
       : props.fontColor};
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
+  font-size: ${(props) => props.fontSize};
   font-weight: 700;
 `
 const optionalLabel = styled.span`
@@ -168,7 +199,7 @@ const optionalLabel = styled.span`
 `
 const inputProps = { selectWidth: String, optionWidth: String }
 const Container = styled('div', inputProps)`
-  width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
+  width: ${(props) => props.selectWidth};
   position: relative;
   display: inline-block;
 `
@@ -196,15 +227,16 @@ const selectButtonAttrs = {
   height: String,
   selectMinHeight: String,
   isSearchBarVisible: Boolean,
-  showBorder: Boolean
+  showBorder: Boolean,
+  paddingLeft: String
 }
 const selectButton = styled('div', selectButtonAttrs)`
   position: relative;
   box-sizing: border-box;
   border-radius: 4px;
-  padding: ${(props) => (props.isSearchBarVisible ? '0' : '0px 0px 0 15px')};
+  ${(props) =>
+    props.isSearchBarVisible ? '' : `padding-left: ${props.paddingLeft}`};
   text-align: left;
-  border-radius: 4px;
   min-height: ${(props) =>
     props.selectHeight
       ? props.selectHeight
@@ -219,7 +251,9 @@ const selectButton = styled('div', selectButtonAttrs)`
   ${({ showBorder, theme, hasError }) =>
     showBorder &&
     `
-    border:1px solid ${hasError ? theme.colors.red : theme.colors.grey4}
+    border: ${BORDER_WIDTH} solid ${
+      hasError ? theme.colors.red : theme.colors.grey4
+    }
   `}
   background-color:${(props) =>
     props.disabled
@@ -232,46 +266,51 @@ const selectButton = styled('div', selectButtonAttrs)`
       ? props.theme.colors[props.fontColor]
       : props.fontColor};
   ${(props) => (props.disabled ? 'pointer-events: none' : '')};
+  overflow: hidden;
+  & > .handle {
+    border-right: ${(props) =>
+        props.hasError ? props.theme.colors.red : props.theme.colors.grey4}
+      1px solid;
+  }
 `
 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)`
-    box-sizing: border-box;
-    z-index:${(props) => (props.isActive ? '2' : '1')};
-    position:absolute;
-    top:5px;
-    border:1px solid ${(props) => props.theme.colors.grey4}
-    border-radius:4px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 0px;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-    width: ${(props) => (props.optionWidth ? props.optionWidth : '100%')};
-    background-color:${(props) =>
-      props.theme.colors[props.bgColor]
-        ? props.theme.colors[props.bgColor]
-        : props.bgColor};
-    color:${(props) =>
-      props.theme.colors[props.fontColor]
-        ? props.theme.colors[props.fontColor]
-        : props.fontColor};
-    max-height:300px;
-    overflow-y:auto;
-    &>div[data-value="${(props) => props.hoveredValue}"]{
-        background-color:${(props) =>
-          props.theme.colors[props.hoveredBgColor]
-            ? props.theme.colors[props.hoveredBgColor]
-            : props.hoveredBgColor};
-    }
+  box-sizing: border-box;
+  z-index: ${(props) => (props.isActive ? '2' : '1')};
+  position: absolute;
+  top: 5px;
+  border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  width: ${(props) => (props.optionWidth ? props.optionWidth : '100%')};
+  background-color: ${(props) =>
+    props.theme.colors[props.bgColor]
+      ? props.theme.colors[props.bgColor]
+      : props.bgColor};
+  color: ${(props) =>
+    props.theme.colors[props.fontColor]
+      ? props.theme.colors[props.fontColor]
+      : props.fontColor};
+  max-height: 300px;
+  overflow-y: auto;
+  & > 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')`
   position: relative;
@@ -295,7 +334,7 @@ export default {
     },
     fontSize: {
       required: false,
-      default: null
+      default: '13px'
     },
     label: {
       required: false
@@ -304,15 +343,17 @@ export default {
       required: false,
       default: false
     },
-    infoTextMessage: {
-      required: false
+    labelDataId: {
+      required: false,
+      default: ''
     },
-    infoTextAlign: {
+    infoTextMessage: {
       required: false
     },
     selectWidth: {
+      type: String,
       required: false,
-      default: null
+      default: '100%'
     },
     selectHeight: {
       type: String,
@@ -335,6 +376,10 @@ export default {
       required: false,
       default: false
     },
+    dropdownAutoClose: {
+      required: false,
+      default: false
+    },
     alignItems: {
       required: false,
       default: 'horizontal'
@@ -381,6 +426,18 @@ export default {
     showBorder: {
       required: false,
       default: true
+    },
+    infoTextSize: {
+      required: false,
+      default: '14px'
+    },
+    dataId: {
+      type: String,
+      default: ''
+    },
+    isDraggable: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -398,17 +455,19 @@ export default {
     icon,
     Caret,
     Selector,
-    inputText
+    inputText,
+    draggableInputHandle
   },
 
   data() {
     return {
       selectedValue: null,
+      paddingLeft: this.isDraggable ? '30px' : '15px',
       isDropdownOpen: false,
       isActive: false,
       textSearch: '',
       hoveredIndex: 0,
-      hoveredValue:null,
+      hoveredValue: null,
       isClickOutsideActive: false
     }
   },
@@ -447,7 +506,7 @@ export default {
       this.$emit('input-change', e)
     },
     optionHovered(e) {
-      this.hoveredValue=e
+      this.hoveredValue = e
     },
     mouseEnterHandler() {
       if (this.hoverDropdown) {
@@ -460,6 +519,11 @@ export default {
         this.blur()
       }
     },
+    optionLeave() {
+      if (this.dropdownAutoClose) {
+        this.isDropdownOpen = false
+      }
+    },
     searchChange(value) {
       this.textSearch = value
       this.$emit('search-change', value)
@@ -473,14 +537,15 @@ export default {
           }
         })
     },
-    onSelectSlotClick() {
-      this.toggleDropdown()
-    },
     clickOutside(event) {
+      const dropdownRef = this.$refs.dropdown
+      // we need to prevent closing on selecting an option, because in the case of
+      // a disabled option, we don't want to close the dropdown
       if (!this.isClickOutsideActive) return
       if (
         this.$refs.select.$el == event.target ||
-        this.$refs.select.$el.contains(event.target)
+        this.$refs.select.$el.contains(event.target) ||
+        event.target.parentNode === dropdownRef.$el
       ) {
         return
       } else {
@@ -502,31 +567,36 @@ export default {
     },
     onArrowPress(dir) {
       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
+      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){
+        if (newHoveredElem) {
           this.hoveredValue = newHoveredElem.getAttribute('data-value')
           const topPos = newHoveredElem.offsetTop
           this.$refs.dropdown.$el.scrollTop = topPos
         }
       }
+    },
+    clearSearch() {
+      this.textSearch = ''
     }
   },
   computed: {
     optionLength() {
       if (this.isDropdownOpen) {
-        return this.$refs.dropdown.$children.length
-      } else {
-        return 0
+        return this.$refs.dropdown.$el.childElementCount
       }
+
+      return 0
     },
     isSearchBarVisible() {
-      return this.isSearchable && this.optionLength >= 5 && this.isDropdownOpen
+      return this.isSearchable && this.isDropdownOpen
     }
   },
   watch: {

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

@@ -11,6 +11,7 @@
     @click="clickHandler"
     @mouseover="hoverHandler"
     :cursorType="cursorType"
+    :isDisabled="isDisabled"
     :backgroundColor="colorMode == 'dark' ? '#000000' : backgroundColor"
     :title="hoverText"
   >
@@ -23,13 +24,14 @@
 //   import selectDropdown from './selectDropDown'
 import styled from 'vue-styled-components'
 const optionProps = {
+  isDisabled: Boolean,
   hoveredBgColor: String,
   cursorType: String,
   backgroundColor: String
 }
 const optionContainer = styled('div', optionProps)`
   display: flex;
-  cursor: ${(props) => props.cursorType};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursorType)};
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
@@ -45,6 +47,8 @@ const optionContainer = styled('div', optionProps)`
     props.theme.colors[props.backgroundColor]
       ? props.theme.colors[props.backgroundColor]
       : props.backgroundColor};
+  color: ${(props) =>
+    props.isDisabled ? props.theme.colors.grey3 : 'inherit'};
   &:hover {
     background-color: ${(props) =>
       props.theme.colors[props.hoveredBgColor]
@@ -77,6 +81,10 @@ export default {
     },
     hoverText: {
       required: false
+    },
+    isDisabled: {
+      required: false,
+      default: false
     }
   },
 
@@ -87,7 +95,12 @@ export default {
   },
   methods: {
     clickHandler() {
-      this.$parent.$emit('option-selected', this.value)
+      if (this.isDisabled) {
+        // prevent emitter if the option is disabled
+        return
+      } else {
+        this.$parent.$emit('option-selected', this.value)
+      }
     },
     hoverHandler() {
       this.$parent.$emit('option-hovered', this.value)

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

@@ -10,14 +10,13 @@
         v-if="label && labelAlign === 'left'"
         :hasInfoMessage="!!infoTextMessage"
         :colorMode="colorMode"
+        :primaryColor="primaryColor"
+        :secondaryColor="secondaryColor"
       >
         <label-text :size="size">{{ label }}</label-text>
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
 
@@ -35,6 +34,7 @@
           :primaryColor="primaryColor"
           :secondaryColor="secondaryColor"
           :inactiveColor="inactiveColor"
+          :data-id="item.hasOwnProperty('dataId') ? item.dataId : ''"
         >
           {{ item.content }}
         </switchOption>
@@ -48,9 +48,6 @@
           @click.native.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
     </flex-wrapper>
@@ -99,10 +96,12 @@ const toggleAttrs = {
   fontColor: String,
   disabled: Boolean,
   backgroundColor: String,
-  isChecked: Boolean
+  isChecked: Boolean,
+  secondaryColor: String,
+  primaryColor: String,
 }
 const LabelText = styled('div', toggleAttrs)`
-  color: white;
+  color: ${(props) => props.primaryColor };
   font-size: 13px;
   font-weight: 700;
 `
@@ -202,9 +201,6 @@ export default {
     infoTextMessage: {
       required: false
     },
-    infoTextAlign: {
-      required: false
-    },
     colorMode: {
       required: false,
       default: 'light'

package/src/components/inputs/textAreaInput/TextAreaInput.stories.js

@@ -22,7 +22,6 @@ const Template = (args, { argTypes }) => ({
   //     rowHeight="4" //optional
   //     :isError="false"
   //     :errorText="$gettext('field_required')"
-  //     infoTextAlign="right" // left by default
   //     infoTextMessage="My info message"
   //     label="Question 5"
   //     alignItems="horizontal" // horizontal, vertical
@@ -37,7 +36,6 @@ Default.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "",
   label: "",
   value: "",
@@ -52,7 +50,6 @@ Disabled.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "",
   label: "",
   value: "",
@@ -67,7 +64,6 @@ Error.args = {
   rowHeight: "2",
   isError: true,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "",
   label: "",
   value: "",
@@ -82,7 +78,6 @@ WithLabel.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",
@@ -97,7 +92,6 @@ HorizontalLabel.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",
@@ -112,7 +106,6 @@ LargerTextArea.args = {
   rowHeight: "5",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",
@@ -127,7 +120,6 @@ LargerFontSize.args = {
   fontSize: "24px",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",

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

@@ -5,13 +5,13 @@
       :hasLabel="label && label.length > 0"
     >
       <label-wrapper v-if="label">
-        <input-label :fontSize="fontSize">{{ label }}</input-label>
+        <input-label :fontSize="fontSize" :data-id="labelDataId">{{
+          label
+        }}</input-label>
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
           size="16px"
-          :alignText="infoTextAlign"
         />
       </label-wrapper>
       <input-container
@@ -27,6 +27,7 @@
           :disabled="isDisabled"
           @input="onChangeHandler"
           :resize="resize"
+          :data-id="inputDataId"
         />
       </input-container>
     </input-wrapper>
@@ -44,7 +45,6 @@
 //     rowHeight="4" //optional
 //     :isError="false"
 //     :errorText="$gettext('field_required')"
-//     infoTextAlign="right" // left by default
 //     infoTextMessage="My info message"
 //     label="Question 5"
 //     alignItems="horizontal" // horizontal, vertical
@@ -164,9 +164,6 @@ export default {
     infoTextMessage: {
       required: false
     },
-    infoTextAlign: {
-      required: false
-    },
     label: {
       required: false
     },
@@ -181,6 +178,14 @@ export default {
     resize: {
       required: false,
       default: 'none'
+    },
+    labelDataId: {
+      required: false,
+      default: ''
+    },
+    inputDataId: {
+      required: false,
+      default: ''
     }
   },
   methods: {