@eturnity/eturnity_reusable_components 7.8.1-EPDM-9696.1 → 7.8.2-EPDM-7779.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.8.1-EPDM-9696.1",
+  "version": "7.8.2-EPDM-7779.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

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

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

@@ -46,9 +46,7 @@
           @keydown.native="onKeyDown"
           :showBorder="showBorder"
           :data-id="dataId"
-          :isDraggable="isDraggable"
-        > 
-          <draggableInputHandle v-if="isDraggable && !isSearchBarVisible" :height="selectHeight" />
+        >
           <inputText
             v-if="isSearchBarVisible"
             ref="searchInput"
@@ -65,7 +63,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">
@@ -143,7 +141,6 @@ import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
 import icon from '../../icon'
 import inputText from '../inputText'
-import draggableInputHandle from '../../draggableInputHandle'
 
 const Caret = styled.div`
   display: flex;
@@ -157,8 +154,14 @@ const Caret = styled.div`
   margin-left: auto;
 `
 
-const Selector = styled.div`
-  width: 100%;
+const Selector = styled('div', { selectWidth: String })`
+  max-width: ${(props) =>
+    props.selectWidth
+      ? props.selectWidth
+      : '100%'}; // set to same width as the select
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 `
 
 const labelAttrs = { fontSize: String, fontColor: String }
@@ -167,7 +170,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`
@@ -203,14 +206,13 @@ const selectButtonAttrs = {
   height: String,
   selectMinHeight: String,
   isSearchBarVisible: Boolean,
-  showBorder: Boolean,
-  isDraggable: Boolean,
+  showBorder: Boolean
 }
 const selectButton = styled('div', selectButtonAttrs)`
   position: relative;
   box-sizing: border-box;
   border-radius: 4px;
-  padding-left:${(props) => (props.isSearchBarVisible ? '0' : props.isDraggable?'30px':'15px')};
+  padding: ${(props) => (props.isSearchBarVisible ? '0' : '0px 0px 0 15px')};
   text-align: left;
   border-radius: 4px;
   min-height: ${(props) =>
@@ -240,10 +242,6 @@ 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,
@@ -307,7 +305,7 @@ export default {
     },
     fontSize: {
       required: false,
-      default: null
+      default: '13px'
     },
     label: {
       required: false
@@ -409,10 +407,6 @@ export default {
     dataId: {
       type: String,
       default: ''
-    },
-    isDraggable: {
-      type: Boolean,
-      default: false
     }
   },
 
@@ -430,8 +424,7 @@ export default {
     icon,
     Caret,
     Selector,
-    inputText,
-    draggableInputHandle
+    inputText
   },
 
   data() {

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

@@ -6,7 +6,7 @@
     @click.native="onOutsideClose()"
     :backdrop="backdrop"
   >
-    <modal-container @click.stop>
+    <modal-container @click="onClickModalContainer">
       <spinner v-if="isLoading" size="50px" :limitedToModal="true" />
       <content-container :visible="!isLoading">
         <slot />
@@ -27,7 +27,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')" :preventOutsideClose="true" :isLoading="true" :hideClose="true">
+// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :preventOutsideClose="true" :isLoading="true" :hideClose="true" :stopPropagation="false">
 //   <div>Data....</div>
 // </modal>
 
@@ -156,6 +156,10 @@ export default {
     position: {
       required: false,
       default: 'fixed'
+    },
+    stopPropagation: {
+      type: Boolean,
+      default: true
     }
   },
   methods: {
@@ -167,6 +171,11 @@ export default {
       if (!this.preventOutsideClose) {
         this.$emit('on-close')
       }
+    },
+    onClickModalContainer(event) {
+      if (this.stopPropagation) {
+        event.stopPropagation()
+      }
     }
   },
   watch: {

package/src/components/threeDots/index.vue

@@ -38,11 +38,12 @@
             {{ child.name }}
           </option-child>
         </children-container>
-        <options-container v-if="!isLoading">
+        <options-container v-if="!isLoading" :textWrap="textWrap">
           <option-item
             v-for="(item, index) in options"
             :key="item.value"
             tabindex="0"
+            :textWrap="textWrap"
             @click.stop="onSelect({ item: item, hasChildren: hasChildren(item) })"
             @keyup.enter="
               onSelect({ item: item, hasChildren: hasChildren(item) })
@@ -56,8 +57,8 @@
               v-if="hasChildren(item)"
             />
             <span>
-            {{ item.name }}
-          </span>
+              {{ item.name }}
+            </span>
           </option-item>
         </options-container>
       </template>
@@ -184,22 +185,20 @@ const LoadingContainer = styled.div`
   background: #fff;
 `
 
-const OptionsContainer = styled.div`
+const OptionsContainerAttrs = { textWrap: Boolean }
+const OptionsContainer = styled('div', OptionsContainerAttrs)`
   border: 1px solid ${(props) => props.theme.colors.grey3};
   display: grid;
   grid-template-columns: 1fr;
-  min-width: 220px;
-  max-width: 220px;
-  width: max-content;
+  ${(props) => props.textWrap ? 'width: 220px' : 'width: max-content' };
   border-radius: 4px;
   background-color: #fff;
   max-height: 220px;
   overflow: auto;
   height: max-content;
-  white-space: normal;
 `
 
-const optionAttrs = { isDisabled: Boolean }
+const optionAttrs = { isDisabled: Boolean, textWrap: Boolean }
 const OptionItem = styled('div', optionAttrs)`
   padding: 12px;
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
@@ -207,6 +206,7 @@ const OptionItem = styled('div', optionAttrs)`
   position: relative;
   ${(props) => (props.isDisabled ? `background-color: ${ props.theme.colors.grey5 }!important` : '')};
   ${(props) => (props.isDisabled ? `color: ${ props.theme.colors.grey2 }` : '')};
+  ${(props) => props.textWrap ? '' : 'white-space: nowrap'};
 
   &:hover {
     background-color: #ebeef4;
@@ -288,6 +288,10 @@ export default {
     isLoading: {
       required: false,
       default: false
+    },
+    textWrap: {
+      required: false,
+      default: true
     }
   },
   data() {

package/.eslintrc

@@ -1,18 +0,0 @@
-{
-  "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/src/components/draggableInputHandle/index.vue

@@ -1,47 +0,0 @@
-<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/label/index.vue

@@ -1,104 +0,0 @@
-<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>