@eturnity/eturnity_reusable_components 7.24.3-EPDM-11143.1 → 7.24.3-EPDM-10647.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.24.3-EPDM-11143.1",
+  "version": "7.24.3-EPDM-10647.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/infoText/index.vue

@@ -14,6 +14,7 @@
         :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
         :alignArrow="alignArrow"
         :iconSize="size"
+        :maxWidth="maxWidth"
         ><slot />
         <span v-html="text"></span>
       </text-overlay>
@@ -52,7 +53,7 @@ const TextOverlay = styled('div', textAttrs)`
   background: ${(props) => props.theme.colors.black};
   padding: 10px;
   width: ${(props) => props.width};
-  max-width: 400px;
+  max-width: ${(props) => props.maxWidth};
   font-size: 13px;
   font-weight: 400;
   line-height: normal;
@@ -124,6 +125,10 @@ export default {
     width: {
       required: false,
       default: '165px'
+    },
+    maxWidth: {
+      type: String,
+      default: '400px'
     }
   },
   methods: {

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

@@ -1,5 +1,5 @@
 <template>
-  <component-wrapper>
+  <component-wrapper @click.stop>
     <container
       :checkColor="checkColor"
       :size="size"

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

@@ -63,9 +63,35 @@
         :isError="isError"
         >{{ unitName }}</unit-container
       >
-      <icon-wrapper v-if="isError && !showLinearUnitName" size="16px">
+      <icon-wrapper
+        v-if="isError && !showLinearUnitName"
+        size="16px"
+        :marginRight="showSelect ? selectWidth : 0"
+      >
         <icon name="warning" size="16px" cursor="default" />
       </icon-wrapper>
+      <select-wrapper v-if="showSelect">
+        <divider />
+        <Select
+          :showBorder="false"
+          :selectWidth="`${selectWidth}px`"
+          :disabled="isSelectDisabled"
+          @input-change="$emit('select-change', $event)"
+        >
+          <template #selector>
+            <select-text>{{ getSelectValue }}</select-text>
+          </template>
+          <template #dropdown>
+            <Option
+              v-for="item in selectOptions"
+              :key="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </Option>
+          </template>
+        </Select>
+      </select-wrapper>
     </input-wrapper>
     <error-message v-if="isError">{{ errorMessage }}</error-message>
   </container>
@@ -107,6 +133,8 @@ import {
 } from '../../../helpers/numberConverter'
 import InfoText from '../../infoText'
 import ErrorMessage from '../../errorMessage'
+import Select from '../select'
+import Option from '../select/option'
 import warningIcon from '../../../assets/icons/error_icon.png'
 import Icon from '../../icon'
 
@@ -282,16 +310,35 @@ const LabelText = styled('div', inputProps)`
   font-weight: 700;
 `
 
-const IconAttrs = { size: String }
+const IconAttrs = { size: String, marginRight: Number }
 const IconWrapper = styled('div', IconAttrs)`
   position: absolute;
   top: 0;
   bottom: 0;
   margin: auto;
-  right: 5px;
+  right: ${(props) => props.marginRight + 10}px;
   height: ${(props) => (props.size ? props.size : 'auto')};
 `
 
+const SelectText = styled.div`
+  font-size: 13px;
+`
+
+const SelectWrapper = styled.div`
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  display: flex;
+  height: 100%;
+`
+
+const Divider = styled.div`
+  margin-top: 6px;
+  height: calc(100% - 16px);
+  width: 1px;
+  background-color: ${({ theme }) => theme.colors.grey4};
+`
+
 export default {
   name: 'input-number',
   components: {
@@ -306,7 +353,12 @@ export default {
     InfoText,
     Icon,
     SlotContainer,
-    IconWrapper
+    IconWrapper,
+    Select,
+    Option,
+    SelectWrapper,
+    SelectText,
+    Divider
   },
   inheritAttrs: false,
   data() {
@@ -450,6 +502,26 @@ export default {
     inputDataId: {
       required: false,
       default: ''
+    },
+    showSelect: {
+      type: Boolean,
+      default: false
+    },
+    selectWidth: {
+      type: Number,
+      default: 70
+    },
+    selectOptions: {
+      type: Array,
+      default: () => []
+    },
+    selectValue: {
+      type: [String, Number],
+      default: null
+    },
+    isSelectDisabled: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -464,6 +536,13 @@ export default {
     },
     hasLabelSlot() {
       return !!this.$slots.label
+    },
+    getSelectValue() {
+      const item = this.selectOptions.find(
+        ({ value }) => value === this.selectValue
+      )
+
+      return item ? item.label : '-'
     }
   },
   methods: {

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

@@ -22,10 +22,15 @@
           >
         </input-label>
         <info-text
-          v-if="infoTextMessage"
+          v-if="infoTextMessage || !!this.$slots.infoText"
           :text="infoTextMessage"
           :size="infoTextSize"
-        />
+          :alignArrow="infoTextAlignArrow"
+          :width="infoTextWidth"
+          :max-width="infoTextWidth"
+        >
+          <slot name="infoText" />
+        </info-text>
       </label-wrapper>
       <select-button-wrapper :disabled="disabled">
         <selectButton
@@ -172,6 +177,7 @@ import InfoText from '../../infoText'
 import icon from '../../icon'
 import inputText from '../inputText'
 import draggableInputHandle from '../../draggableInputHandle'
+import { debounce } from '../../../utils'
 
 const CARET_WIDTH = '30px'
 const BORDER_WIDTH = '1px'
@@ -547,6 +553,14 @@ export default {
     dropdownMenuPosition: {
       type: String,
       default: DROPDOWN_MENU_POSITIONS.Automatic // options: ['automatic', bottom]
+    },
+    infoTextWidth: {
+      type: String,
+      required: false
+    },
+    infoTextAlignArrow: {
+      type: String,
+      required: false
     }
   },
 
@@ -631,9 +645,9 @@ export default {
       this.blur()
       this.$emit('input-change', e)
     },
-    optionHovered(e) {
+    optionHovered: debounce(function (e) {
       this.hoveredValue = e
-    },
+    }, 300),
     mouseEnterHandler() {
       if (this.hoverDropdown) {
         this.focus()

package/src/utils/index.js

@@ -0,0 +1,12 @@
+export function debounce(fn, wait) {
+  let timer
+  return function (...args) {
+    if (timer) {
+      clearTimeout(timer)
+    }
+    const context = this
+    timer = setTimeout(() => {
+      fn.apply(context, args)
+    }, wait)
+  }
+}

package/src/assets/svgIcons/copy.svg

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="copy" fill="none" transform="translate(85.333333, 42.666667)">
-            <path d="M341.333333,85.3333333 L341.333333,405.333333 L85.3333333,405.333333 L85.3333333,85.3333333 L341.333333,85.3333333 Z M298.666667,128 L128,128 L128,362.666667 L298.666667,362.666667 L298.666667,128 Z M234.666667,7.10542736e-15 L234.666667,42.6666667 L42.6666667,42.6666667 L42.6666667,298.666667 L1.42108547e-14,298.666667 L1.42108547e-14,7.10542736e-15 L234.666667,7.10542736e-15 Z">
-            </path>
-        </g>
-    </g>
-</svg>