@eturnity/eturnity_reusable_components 7.22.1 → 7.22.3-EPDM-10647.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.22.1",
+  "version": "7.22.3-EPDM-10647.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/assets/svgIcons/drag_icon.svg

@@ -0,0 +1,8 @@
+<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 2C4 3.10457 3.10457 4 2 4C0.89543 4 0 3.10457 0 2C0 0.89543 0.89543 0 2 0C3.10457 0 4 0.89543 4 2Z" fill="#B2B9C5"/>
+<path d="M10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.89543 6.89543 0 8 0C9.10457 0 10 0.89543 10 2Z" fill="#B2B9C5"/>
+<path d="M4 8C4 9.10457 3.10457 10 2 10C0.89543 10 0 9.10457 0 8C0 6.89543 0.89543 6 2 6C3.10457 6 4 6.89543 4 8Z" fill="#B2B9C5"/>
+<path d="M10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6C9.10457 6 10 6.89543 10 8Z" fill="#B2B9C5"/>
+<path d="M4 14C4 15.1046 3.10457 16 2 16C0.89543 16 0 15.1046 0 14C0 12.8954 0.89543 12 2 12C3.10457 12 4 12.8954 4 14Z" fill="#B2B9C5"/>
+<path d="M10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z" fill="#B2B9C5"/>
+</svg>

package/src/assets/svgIcons/inclination.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.09548 3.62522L10.8209 1.59974L9.53978 0.508423L0.199219 11.4916H13.7992V9.80865H11.9546C11.7571 7.4083 10.7198 5.25339 9.09548 3.62522ZM10.2648 9.80859C10.0777 7.91689 9.26383 6.22054 8.00053 4.91205L3.83843 9.80864L10.2648 9.80859Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/length_2d.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M0.199219 9.85718V0.142822H1.75351L1.75352 9.85718H0.199219ZM5.38021 8.20572L2.14209 4.99999L5.38021 1.79425V4.19855L8.61833 4.19855V1.79425L11.8564 4.99999L8.61832 8.20572L8.61833 5.80142L5.38021 5.80142V8.20572ZM12.2449 0.142822V9.85718H13.7992V0.142822H12.2449Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/length_3d.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <path d="M5.33336 14L0 8.66664L1.06667 7.59997L6.40003 12.9333L5.33336 14Z" fill="white"/>
+  <path d="M8.42227 9.97776L4.00002 9.99998L4.02224 5.57774L5.67225 7.22775L7.22781 5.67219L5.57781 4.02218L10.0001 3.99996L9.97783 8.4222L8.32782 6.7722L6.77226 8.32776L8.42227 9.97776Z" fill="white"/>
+  <path d="M7.59997 1.06667L12.9333 6.40003L14 5.33336L8.66664 0L7.59997 1.06667Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/length_calculator.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <path d="M12.4444 0H1.55556C0.7 0 0 0.7 0 1.55556V12.4444C0 13.3 0.7 14 1.55556 14H12.4444C13.3 14 14 13.3 14 12.4444V1.55556C14 0.7 13.3 0 12.4444 0ZM7.80111 3.15778L8.62556 2.33333L9.72222 3.43L10.8189 2.33333L11.6433 3.15778L10.5467 4.25444L11.6433 5.35111L10.8189 6.17556L9.72222 5.08667L8.62556 6.18333L7.80111 5.35889L8.89778 4.26222L7.80111 3.15778ZM2.52778 3.67111H6.41667V4.83778H2.52778V3.67111ZM6.61111 10.1111H5.05556V11.6667H3.88889V10.1111H2.33333V8.94444H3.88889V7.38889H5.05556V8.94444H6.61111V10.1111ZM11.6667 11.0833H7.77778V9.91667H11.6667V11.0833ZM11.6667 9.13889H7.77778V7.97222H11.6667V9.13889Z" fill="#263238"/>
+</svg>

package/src/components/icon/index.vue

@@ -1,9 +1,13 @@
 <template>
-  <wrapper>
-    <icon-image>
+  <wrapper :disabled="disabled" :size="size" :cursor="cursor">
+    <icon-image
+      :color="color"
+      :background-color="backgroundColor"
+      :hovered-color="hoveredColor"
+    >
       <i v-html="icon.html" />
     </icon-image>
-    <striked-line v-if="isStriked"></striked-line>
+    <striked-line v-if="isStriked" :color="color"></striked-line>
   </wrapper>
 </template>
 
@@ -48,27 +52,31 @@ const props = defineProps({
   isStriked: {
     required: false,
     default: false
+  },
+  backgroundColor: {
+    required: false,
+    default: null
   }
 })
 
-const Wrapper = styled('div')`
+const Wrapper = styled('div', {
+  size: String,
+  disabled: Boolean,
+  cursor: String
+})`
   display: flex;
   position: relative;
   align-content: center;
   justify-content: center;
-  width: ${props.size};
-  height: ${props.size};
-  min-width: ${props.size};
-  min-height: ${props.size};
-  cursor: ${props.disabled ? 'not-allowed' : props.cursor};
+  width: ${(props) => props.size};
+  height: ${(props) => props.size};
+  min-width: ${(props) => props.size};
+  min-height: ${(props) => props.size};
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : props.cursor)};
   line-height: 0;
 `
-const strikedAttrs = {
-  isDisabled: Boolean,
-  color: String,
-  hoveredColor: String
-}
-const StrikedLine = styled.div`
+
+const StrikedLine = styled('div', { color: String })`
   display: flex;
   position: absolute;
   bottom: 0;
@@ -77,29 +85,33 @@ const StrikedLine = styled.div`
   justify-content: center;
   width: 143%;
   height: 8%;
-  background-color: ${({ theme }) => theme.colors[props.color] || props.color};
+  background-color: ${({ theme, color }) => theme.colors[color] || color};
   min-height: 0;
   line-height: 0;
   transform-origin: 0% 100%;
   transform: rotate(-45deg);
 `
-const IconImage = styled.div`
+const IconImage = styled('div', {
+  color: String,
+  backgroundColor: String,
+  hoveredColor: String
+})`
   width: 100%;
   svg {
     width: 100%;
     height: 100%;
-    background-color: ${(props) => props.backgroundColor};
-    padding: ${(props) => props.backgroundColor ? '3px' : '0'};
+    background-color: ${(props) =>
+      props.backgroundColor ? props.backgroundColor : 'transparent'};
+    padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
   }
   svg path {
-    ${({ theme }) =>
-      props.color && `fill: ${theme.colors[props.color] || props.color};`}
+    ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
   }
   &:hover > svg path {
-    ${props.hoveredColor && `fill: ${props.hoveredColor};`}
+    ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
   }
   &:hover + div {
-    background-color: ${props.hoveredColor};
+    background-color: ${(props) => props.hoveredColor};
   }
 `
 

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,34 @@
         :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`"
+          @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 +132,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 +309,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,15 +352,19 @@ export default {
     InfoText,
     Icon,
     SlotContainer,
-    IconWrapper
+    IconWrapper,
+    Select,
+    Option,
+    SelectWrapper,
+    SelectText,
+    Divider
   },
   inheritAttrs: false,
   data() {
     return {
       textInput: '',
       isFocused: false,
-      warningIcon: warningIcon,
-      isBlurred: false
+      warningIcon: warningIcon
     }
   },
   props: {
@@ -451,6 +501,22 @@ 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
     }
   },
   computed: {
@@ -465,6 +531,13 @@ export default {
     },
     hasLabelSlot() {
       return !!this.$slots.label
+    },
+    getSelectValue() {
+      const item = this.selectOptions.find(
+        ({ value }) => value === this.selectValue
+      )
+
+      return item ? item.label : '-'
     }
   },
   methods: {
@@ -549,8 +622,7 @@ export default {
       return array
     },
     onInput(event) {
-      if (this.isBlurred) {
-        this.isBlurred = false
+      if (!this.isFocused) {
         return
       }
       if (event.target.value === '') {
@@ -567,8 +639,6 @@ export default {
     },
     onInputBlur(e) {
       this.isFocused = false
-      // setting isBlurred so we don't trigger onInput as well
-      this.isBlurred = true
       let value = e.target.value
       let evaluatedInput = this.onEvaluateCode(e)
       this.onChangeHandler(evaluatedInput ? evaluatedInput : value)

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
@@ -531,6 +536,14 @@ export default {
     dropdownMenuPosition: {
       type: String,
       default: DROPDOWN_MENU_POSITIONS.Automatic // options: ['automatic', bottom]
+    },
+    infoTextWidth: {
+      type: String,
+      required: false
+    },
+    infoTextAlignArrow: {
+      type: String,
+      required: false
     }
   },