@eturnity/eturnity_reusable_components 7.8.5 → 7.8.6-EPDM-7779.3

package/.eslintrc

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:prettier/recommended", "plugin:vue/essential"],
+
+  "plugins": ["prettier"],
+
+  "rules": {
+    "prettier/prettier": "error",
+    "vue/no-parsing-error": "off",
+    "vue/no-side-effects-in-computed-properties": "off",
+    "vue/invalid-first-character-of-tag-name": "off"
+  },
+
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "parser": "babel-eslint",
+    "sourceType": "module"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.8.5",
+  "version": "7.8.6-EPDM-7779.3",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -136,8 +136,7 @@ export default {
     iconCollection,
     dropdownComponent,
     videoThumbnail,
-    icon
-    // infoCard
+    icon,
   },
   data() {
     return {

package/src/components/draggableInputHandle/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <Handle :height = "height" class="handle">
+    <Dot></Dot>
+    <Dot></Dot>
+    <Dot></Dot>
+  </Handle>
+</template>
+
+<script>
+
+import styled from 'vue-styled-components'
+
+const Handle = styled('div',{ height : String })`
+  position:absolute;
+  left:0;
+  margin-right:10px;
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+    justify-content: center;
+    width: 14px;
+    height:${props=> props.height};
+    padding: 0 5px;
+    background-color: #f3f3f7;
+    cursor: pointer;
+    align-items: center;
+  `
+const Dot = styled.div`
+    display: inline-block;
+    width: 4px;
+    height: 4px;
+    margin:2px;
+    background-color: #0068de;
+  `
+
+export default {
+  name: 'draggableInputHandle',
+  props:['height'],
+  components: {
+    Handle,
+    Dot
+  },
+  data() {
+    return {}
+  }
+}
+</script>

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

@@ -47,6 +47,7 @@
           :showBorder="showBorder"
           :data-id="dataId"
         >
+          <draggableInputHandle v-if="isDraggable && !isSearchBarVisible" :height="selectHeight" />
           <inputText
             v-if="isSearchBarVisible"
             ref="searchInput"
@@ -63,7 +64,7 @@
             @input-change="searchChange"
             @click.native.stop
           />
-          <selector v-else>
+          <selector :selectWidth="selectWidth" v-else>
             <slot name="selector" :selectedValue="selectedValue"></slot>
           </selector>
           <Caret @click.stop="toggleCaretDropdown">
@@ -141,21 +142,29 @@ 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 PADDING = this.isDraggable ? '30px' : '15px'
+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 Selector = styled('div', { selectWidth: String })`
+  max-width: ${(props) => `calc(${props.selectWidth} - (${CARET_WIDTH} + ${PADDING} + (${BORDER_WIDTH} * 2)))`};
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 `
 
 const labelAttrs = { fontSize: String, fontColor: String }
@@ -164,7 +173,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`
@@ -172,7 +181,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;
 `
@@ -206,9 +215,8 @@ 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: ${PADDING}` )};
   text-align: left;
-  border-radius: 4px;
   min-height: ${(props) =>
     props.selectHeight
       ? props.selectHeight
@@ -223,7 +231,7 @@ 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
@@ -236,12 +244,15 @@ 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,
@@ -252,7 +263,7 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
     z-index:${(props) => (props.isActive ? '2' : '1')};
     position:absolute;
     top:5px;
-    border:1px solid ${(props) => props.theme.colors.grey4}
+    border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
     border-radius:4px;
     display: flex;
     flex-direction: column;
@@ -299,7 +310,7 @@ export default {
     },
     fontSize: {
       required: false,
-      default: null
+      default: '13px'
     },
     label: {
       required: false
@@ -319,8 +330,9 @@ export default {
       required: false
     },
     selectWidth: {
+      type: String,
       required: false,
-      default: null
+      default: '100%'
     },
     selectHeight: {
       type: String,
@@ -401,6 +413,10 @@ export default {
     dataId: {
       type: String,
       default: ''
+    },
+    isDraggable: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -418,7 +434,8 @@ export default {
     icon,
     Caret,
     Selector,
-    inputText
+    inputText,
+    draggableInputHandle
   },
 
   data() {
@@ -498,9 +515,6 @@ 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
@@ -546,26 +560,21 @@ export default {
           this.$refs.dropdown.$el.scrollTop = topPos
         }
       }
+    },
+    clearSearch() {
+      this.textSearch = ''
     }
   },
   computed: {
     optionLength() {
       if (this.isDropdownOpen) {
-        // this filterRef is needed to check for the # of children on Filter dropdowns
-        const filterRef =
-          this.$refs.dropdown.$children &&
-          this.$refs.dropdown.$children.length > 1
-            ? this.$refs.dropdown.$children
-            : this.$refs.dropdown.$children[0].$children
-            ? this.$refs.dropdown.$children[0].$children
-            : this.$refs.dropdown.$children
-        return filterRef.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/label/index.vue

@@ -0,0 +1,104 @@
+<template>
+      <label-wrapper
+        :labelAlign="labelAlign">
+        <input-label
+          :labelFontColor="labelFontColor"
+          :fontSize="fontSize"
+          >
+          <slot></slot>
+          <optionalLabel v-if="labelOptional"
+            >({{ $gettext('Optional') }})</optionalLabel
+          ></input-label
+        >
+        <info-text
+          v-if="infoTextMessage"
+          :text="infoTextMessage"
+          borderColor="#ccc"
+          :size="fontSize ? fontSize : '16px'"
+          :alignArrow="infoTextAlign"
+        />
+      </label-wrapper>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import InfoText from '../infoText'
+
+
+const labelAttrs = { fontSize: String, labelFontColor: String }
+const InputLabel = styled('div', labelAttrs)`
+  color: ${(props) =>
+    props.theme.colors[props.labelFontColor]
+      ? props.theme.colors[props.labelFontColor]
+      : props.labelFontColor
+      ? props.labelFontColor
+      : props.theme.colors.eturnityGrey};
+
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
+  font-weight: 700;
+`
+const optionalLabel = styled.span`
+  font-weight: 300;
+`
+
+const LabelWrapper = styled('div',{labelAlign:String})`
+  ${props=>props.labelAlign=='horizontal'?
+    'display: inline-grid;':
+    'display: grid;'
+  }
+  ${props=>props.labelAlign=='horizontal'?
+    'margin-right: 10px;':
+    'margin-bottom: 8px;'
+  }
+  vertical-align: center;
+  grid-template-columns: auto auto;
+  grid-gap: 12px;
+  align-items: center;
+  justify-content: start;
+`
+export default {
+  // import labelText from "@eturnity/eturnity_reusable_components/src/components/label"
+  // To use:
+  // <label-text
+  //   infoTextAlign="right" // left by default
+  //   infoTextMessage="My info message"
+  //   label="Question 5"
+  // />
+  name: 'input-text',
+  components: {
+    InfoText,
+    InputLabel,
+    LabelWrapper,
+    optionalLabel
+  },
+  data() {
+    return {
+      inputTypeData: 'text'
+    }
+  },
+  props: {
+    infoTextMessage: {
+      required: false
+    },
+    infoTextAlign: {
+      required: false
+    },
+    labelOptional: {
+      required: false,
+      default: false
+    },
+    fontSize: {
+      required: false,
+      default: null
+    },
+    labelFontColor: {
+      required: false,
+      default: 'black'
+    },
+    labelAlign: {
+      required: false,
+      default: 'vertical'
+    },
+  },
+}
+</script>

package/src/components/modals/modal/index.vue

@@ -5,7 +5,7 @@
     :class="{ visible: isOpen, hidden: !isOpen }"
     :backdrop="backdrop"
   >
-    <modal-container @click.stop>
+    <modal-container @click="onClickModalContainer">
       <spinner v-if="isLoading" size="50px" :limitedToModal="true" />
       <content-container :visible="!isLoading">
         <slot />
@@ -26,7 +26,7 @@
 // import Modal from "@eturnity/eturnity_reusable_components/src/components/modals/modal"
 // This is a more flexible modal box, where the parent can decide how the body of the modal looks
 // To use:
-// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :isLoading="true" :hideClose="true">
+// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :isLoading="true" :hideClose="true" :stopPropagation="false">
 //   <div>Data....</div>
 // </modal>
 
@@ -151,6 +151,10 @@ export default {
     position: {
       required: false,
       default: 'fixed'
+    },
+    stopPropagation: {
+      type: Boolean,
+      default: true
     }
   },
   beforeDestroy() {
@@ -164,6 +168,11 @@ export default {
       if (key === 'Escape') {
         this.onCloseModal()
       }
+    },
+    onClickModalContainer(event) {
+      if (this.stopPropagation) {
+        event.stopPropagation()
+      }
     }
   },
   watch: {