@eturnity/eturnity_reusable_components 7.4.4-EPDM-7260.2 → 7.4.4-EPDM-7260.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.4.4-EPDM-7260.2",
+  "version": "7.4.4-EPDM-7260.4",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -111,6 +111,7 @@ import iconCollection from '@/components/icon/iconCollection'
 import dropdownComponent from '@/components/dropdown'
 import videoThumbnail from '@/components/videoThumbnail'
 import icon from '@/components/icon'
+// import infoCard from '@/components/infoCard'
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -135,7 +136,7 @@ export default {
     iconCollection,
     dropdownComponent,
     videoThumbnail,
-    icon
+    icon,
   },
   data() {
     return {

package/src/assets/svgIcons/logout.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.173 4.517L15.242 7.586L15.656 8L15.676 8L15.676 8.02L16.656 9L15.676 9.98L15.676 10L15.656 10L15.242 10.414L12.173 13.483L10.759 12.069L12.827 10L4.676 10L4.676 8L12.827 8L10.758 5.931L12.173 4.517ZM-6.99382e-07 2L-8.74228e-08 16L0 18L2 18L7 18L7 16L2 16L2 2L7 2L7 -3.0598e-07L2 -8.74228e-08L-7.86805e-07 0L-6.99382e-07 2Z" fill="#263238"/>
+</svg>

package/src/assets/theme.js

@@ -13,6 +13,7 @@ const theme = {
     blue: '#48a2d0',
     red: '#ff5656',
     blue1: '#e4efff',
+    brightBlue: '#0068DE',
     grey1: '#666',
     grey2: '#c4c4c4',
     grey3: '#b2b9c5',

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/infoCard/index.vue

@@ -1,38 +1,36 @@
 <template>
-    <info-container>
-            <icon name="info" size="24px" />
-      <InfoTextContainer>
-        <slot />
-      </InfoTextContainer>
-    </info-container>
+  <info-container>
+    <icon name="info" size="24px" />
+    <text-container>
+      <slot />
+    </text-container>
+  </info-container>
 </template>
-    
+
 <script>
 import styled from 'vue-styled-components'
-import icon from '../icon'
-const InfoContainer = styled('div')`
+import Icon from '../icon'
+
+const InfoContainer = styled.div`
   display: flex;
-  align-items: flex-start;
   gap: 15px;
   padding: 20px;
-  width: 500px;
-  min-width: 450px;
-  border: 1px dashed #dee2eb;
+  border: 1px dashed ${(props) => props.theme.colors.grey4};
   border-radius: 4px;
-  margin:20px 0;
 `
 
-const InfoTextContainer = styled('div')`
+const TextContainer = styled.div`
   font-size: 13px;
+  width: 100%;
 `
 
 
 export default {
-    components:{
-        icon,
-        InfoTextContainer,
-        InfoContainer
-    },
-    props:[]
+  name: 'InfoCard',
+  components: {
+    Icon,
+    InfoContainer,
+    TextContainer
+  }
 }
 </script>

package/src/components/infoText/index.vue

@@ -58,6 +58,7 @@ const TextOverlay = styled('div', textAttrs)`
   max-width: 400px;
   font-size: 13px;
   font-weight: 400;
+  line-height: normal;
   border-radius: 4px;
   z-index: 99;
   color: ${(props) => props.theme.colors.white};

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

@@ -49,7 +49,9 @@
           @keydown.native="onKeyDown"
           :showBorder="showBorder"
           :data-id="dataId"
-        >
+          :isDraggable="isDraggable"
+        > 
+          <draggableInputHandle v-if="isDraggable && !isSearchBarVisible" :height="selectHeight" />
           <inputText
             v-if="isSearchBarVisible"
             ref="searchInput"
@@ -145,6 +147,7 @@ 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;
@@ -215,13 +218,14 @@ const selectButtonAttrs = {
   height: String,
   selectMinHeight: String,
   isSearchBarVisible: Boolean,
-  showBorder: Boolean
+  showBorder: Boolean,
+  isDraggable: Boolean,
 }
 const selectButton = styled('div', selectButtonAttrs)`
   position: relative;
   box-sizing: border-box;
   border-radius: 4px;
-  padding: ${(props) => (props.isSearchBarVisible ? '0' : '0px 0px 0 10px')};
+  padding-left:${(props) => (props.isSearchBarVisible ? '0' : props.isDraggable?'30px':'15px')};
   text-align: left;
   border-radius: 4px;
   min-height: ${(props) =>
@@ -251,6 +255,10 @@ 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,
@@ -428,6 +436,10 @@ export default {
     dataId: {
       type: String,
       default: ''
+    },
+    isDraggable: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -445,7 +457,8 @@ export default {
     icon,
     Caret,
     Selector,
-    inputText
+    inputText,
+    draggableInputHandle
   },
 
   data() {

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

@@ -3,7 +3,6 @@
     :position="position"
     :isOpen="isOpen"
     :class="{ visible: isOpen, hidden: !isOpen }"
-    @click.native="onOutsideClose()"
     :backdrop="backdrop"
   >
     <modal-container @click.stop>
@@ -27,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')" :preventOutsideClose="true" :isLoading="true" :hideClose="true">
+// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :isLoading="true" :hideClose="true">
 //   <div>Data....</div>
 // </modal>
 
@@ -137,10 +136,6 @@ export default {
       required: true,
       default: false
     },
-    preventOutsideClose: {
-      required: false,
-      default: false
-    },
     isLoading: {
       required: false,
       default: false
@@ -158,20 +153,30 @@ export default {
       default: 'fixed'
     }
   },
+  beforeDestroy() {
+    window.removeEventListener('keydown', this.handleKeyDown)
+  },
   methods: {
     onCloseModal() {
       this.$emit('on-close')
     },
-    onOutsideClose() {
-      // If true, then only allow closing to come from clicking the X or wherever the onCloseModal is called
-      if (!this.preventOutsideClose) {
-        this.$emit('on-close')
+    handleKeyDown({ key }) {
+      if (key === 'Escape') {
+        this.onCloseModal()
       }
     }
   },
   watch: {
-    isOpen: function (newVal) {
-      document.body.style.overflow = newVal ? 'hidden' : ''
+    isOpen: {
+      immediate: true,
+      handler(isOpen) {
+        document.body.style.overflow = isOpen ? 'hidden' : ''
+        if (isOpen) {
+          window.addEventListener('keydown', this.handleKeyDown)
+        } else {
+          window.removeEventListener('keydown', this.handleKeyDown)
+        }
+      }
     }
   }
 }

package/src/components/pagination/index.vue

@@ -7,7 +7,11 @@
       @click="fetchPage(paginationParams.previous)"
     >
       <arrowIconContainer>
-        <icon name="arrow_left" color="#0068de" size="12px" />
+        <icon
+          name="arrow_left"
+          :color="getTheme.colors.brightBlue"
+          size="12px"
+        />
       </arrowIconContainer>
       <arrowText>{{ $gettext('back') }}</arrowText>
     </paginationLink>
@@ -55,7 +59,11 @@
     >
       <arrowText>{{ $gettext('forward') }}</arrowText>
       <arrowIconContainer>
-        <icon name="arrow_right" color="#0068de" size="12px" />
+        <icon
+          name="arrow_right"
+          :color="getTheme.colors.brightBlue"
+          size="12px"
+        />
       </arrowIconContainer>
     </paginationLink>
   </paginationWrapper>
@@ -64,8 +72,10 @@
 <script>
 import styled from 'vue-styled-components'
 import icon from '../icon'
+import theme from '@/assets/theme.js'
+
 const paginationWrapper = styled.nav`
-  color: #0068de;
+  color: ${(props) => props.theme.brightBlue};
   font-size: 13px;
   display: flex;
   flex-wrap: wrap;
@@ -85,7 +95,7 @@ const paginationLink = styled.div`
 
   &.active {
     color: #fff;
-    background-color: #0068de;
+    background-color: ${(props) => props.theme.brightBlue};
     padding: 7px 12px;
     border-radius: 4px;
   }
@@ -106,6 +116,11 @@ export default {
     arrowIconContainer
   },
   props: ['fetchPage', 'currentPage', 'paginationParams'],
+  computed: {
+    getTheme() {
+      return theme
+    }
+  },
   methods: {
     getNewProjects(num) {
       this.$emit('on-pagination-change', num)

package/src/components/rangeSlider/Slider.vue

@@ -179,8 +179,8 @@ export default {
     this.parentWidth = parentWidth
     this.parentHeight = parentHeight
 
-    this.left = this.min * this.stepCount
-    this.right = this.max * this.stepCount
+    this.left = this.min * this.pxPerStep
+    this.right = this.max * this.pxPerStep
     this.width = computeWidth(this.left, this.right)
     this.height = this.h !== 'auto' ? this.h : parentHeight
 
@@ -467,7 +467,7 @@ export default {
       removeEvent(document.documentElement, eventsFor.move, this.handleResize)
     },
     roundToNearestStep(value) {
-      const val = value / this.stepCount
+      const val = value / this.pxPerStep
 
       const int = 1.0 / this.step
       return (Math.floor(val * int) / int).toFixed(2)
@@ -490,8 +490,11 @@ export default {
 
       return this.handles
     },
+    pxPerStep() {
+      return this.parentWidth / this.stepCount
+    },
     minWidthByPx() {
-      return this.minWidth * this.stepCount
+      return this.minWidth * this.pxPerStep
     },
     computedWidth() {
       if (this.width === 'auto') {

package/src/components/rangeSlider/index.vue

@@ -473,16 +473,6 @@ export default {
     // Remove the global click event listener to prevent memory leaks
     document.removeEventListener('click', this.handleOutsideClick)
     document.removeEventListener('keydown', this.onKeyDownDelete)
-  },
-  mounted() {
-    // TODO: remove
-    // this.tariffItems.forEach((item) => {
-    //   item.tariff_time_mfr.forEach((tariff) => {
-    //     tariff.time_to = '12:00:00'
-    //     tariff.time_up_to = '12:00:00'
-    //   })
-    // })
-    console.log('mounted tariffItems', this.tariffItems)
   }
 }
 </script>

package/src/components/tables/mainTable/index.vue

@@ -10,7 +10,7 @@
       ref="tableRef"
       :isPositionAbsolute="doesTableContainDraggables"
     >
-      <table-wrapper :fullWidth="fullWidth">
+      <table-wrapper class="main-table-wrapper" :fullWidth="fullWidth">
         <spinner-wrapper v-if="isLoading">
           <spinner />
         </spinner-wrapper>
@@ -72,7 +72,7 @@ const TableWrapper = styled('div', wrapperAttrs)`
   overflow-y: hidden;
 
   ::-webkit-scrollbar {
-    height: 5px; //height of the whole scrollbar area
+    height: 10px; //height of the whole scrollbar area
   }
 
   ::-webkit-scrollbar-track {
@@ -81,7 +81,7 @@ const TableWrapper = styled('div', wrapperAttrs)`
   }
 
   ::-webkit-scrollbar-thumb {
-    border-bottom: 5px solid ${(props) => props.theme.colors.purple}; // width of the actual scrollbar
+    border-bottom: 10px solid ${(props) => props.theme.colors.brightBlue}; // width of the actual scrollbar
     border-radius: 4px;
   }
 `

package/src/components/threeDots/index.vue

@@ -42,10 +42,11 @@
             {{ 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"
+            :data-id="item.dataId"
             tabindex="0"
             @click.stop="
               onSelect({ item: item, hasChildren: hasChildren(item) })
@@ -55,6 +56,7 @@
             "
             @mouseover="onItemHover({ index, item })"
             :isDisabled="item.disabled"
+            :title="item.title"
           >
             <arrow-left
               :hasChildren="hasChildren(item)"
@@ -74,9 +76,10 @@
 // import ThreeDots from "@eturnity/eturnity_reusable_components/src/components/threeDots"
 // To use:
 // <three-dots
+//   :isLoading="true"
 //   :options="listOptions"
+//   @on-click="onClick($event)"
 //   @on-select="onSelect($event)"
-//   :isLoading="true"
 // />
 // options to pass:
 // listOptions: [
@@ -189,19 +192,18 @@ 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;
+  ${(props) => props.textWrap ? 'white-space: normal' : 'white-space: nowrap'};
 `
 
 const optionAttrs = { isDisabled: Boolean }
@@ -210,6 +212,8 @@ const OptionItem = styled('div', optionAttrs)`
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   font-size: 13px;
   position: relative;
+  ${(props) => (props.isDisabled ? `background-color: ${ props.theme.colors.grey5 }!important` : '')};
+  ${(props) => (props.isDisabled ? `color: ${ props.theme.colors.grey2 }` : '')};
 
   &:hover {
     background-color: #ebeef4;
@@ -291,6 +295,10 @@ export default {
     isLoading: {
       required: false,
       default: false
+    },
+    textWrap: {
+      required: false,
+      default: true
     }
   },
   data() {
@@ -382,6 +390,7 @@ export default {
     },
     onSelect({ item, hasChildren }) {
       if (hasChildren || item.disabled) {
+        this.$emit('on-click', item)
         return
       }
       this.$emit('on-select', item)