@eturnity/eturnity_reusable_components 8.13.13-epic-shading.1 → 8.13.13-qa-16-03-26.1

package/src/components/barchart/styles/chartControls.js

@@ -0,0 +1,59 @@
+import styled from 'vue3-styled-components'
+
+export const Container = styled.div`
+  width: 100%;
+`
+
+export const LegendAndControlsWrapper = styled('div', { leftMargin: String })`
+  margin-left: ${(props) => props.leftMargin};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`
+
+export const LeftSection = styled.div`
+  flex: 1;
+`
+
+export const SplitButtonsContainer = styled('div', { position: String })`
+  align-self: ${(props) =>
+    props.position === 'top' ? 'flex-end' : 'flex-start'};
+`
+
+export const LegendGroups = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`
+
+export const LegendRow = styled('div', { rowIndex: Number })`
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: ${(props) =>
+    props.rowIndex === 0 ? 'flex-start' : 'flex-end'};
+`
+
+export const LegendItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`
+
+export const LegendColor = styled('div', {
+  gradientFrom: String,
+  gradientTo: String,
+})`
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  background: ${(props) =>
+    `linear-gradient(180deg, ${props.gradientFrom} 0%, ${props.gradientTo} 100%)`};
+`
+
+export const LegendText = styled.span`
+  font-size: 12px;
+  font-weight: 400;
+  color: ${(props) => props.theme.semanticColors.teal[800]};
+  white-space: nowrap;
+`

package/src/components/buttons/splitButtons/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <Container>
+    <SplitButton
+      v-for="(option, index) in options"
+      :data-id-key="`${dataIdKey}_${option.value}`"
+      :key="index"
+      :length="options.length"
+      :position="getButtonPosition(index)"
+      :selected="modelValue === option.value"
+      @click.stop="handleSelect(option.value)"
+    >
+      {{ option.label }}
+    </SplitButton>
+  </Container>
+</template>
+
+<script setup>
+  import styled from 'vue3-styled-components'
+  import { computed } from 'vue'
+
+  const Container = styled.div`
+    display: flex;
+    width: fit-content;
+  `
+  const SplitButton = styled('button', {
+    selected: Boolean,
+    position: String,
+    length: Number,
+  })`
+    padding: 8px 16px;
+    border: 1px solid ${(props) => props.theme.semanticColors.teal[100]};
+    ${(props) =>
+      props.position === 'middle'
+        ? `
+      border-left: none;
+      border-right: none;
+    `
+        : props.length === 2 && props.position === 'first'
+        ? 'border-right: none;'
+        : ''}
+    border-radius: ${(props) =>
+      props.position === 'first'
+        ? '4px 0 0 4px'
+        : props.position === 'last'
+        ? '0 4px 4px 0'
+        : '0'};
+    font-family: ${(props) => props.theme.fonts.mainFont};
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 100%;
+    cursor: pointer;
+    background: ${(props) =>
+      props.selected ? props.theme.semanticColors.purple[50] : 'transparent'};
+    color: ${(props) => props.theme.semanticColors.purple[500]};
+  `
+
+  const props = defineProps({
+    options: {
+      type: Array,
+      required: true,
+      // expects array of {label: string, value: string}
+    },
+    modelValue: {
+      type: String,
+      required: true,
+    },
+    dataIdKey: {
+      type: String,
+      default: '',
+    },
+  })
+
+  const emit = defineEmits(['update:modelValue'])
+
+  const getButtonPosition = computed(() => (index) => {
+    if (index === 0) return 'first'
+    if (index === props.options.length - 1) return 'last'
+
+    return 'middle'
+  })
+
+  const handleSelect = (value) => {
+    emit('update:modelValue', value)
+    emit('click', value)
+  }
+</script>

package/src/components/collapsableInfoText/index.vue

@@ -33,7 +33,7 @@
   const Text = styled('p', TextAttrs)`
     display: block;
     display: -webkit-box;
-    line-height: 1.3em;
+    line-height: 1.5;
     -webkit-line-clamp: ${(props) => (props.expand ? 'unset' : '4')};
     -webkit-box-orient: vertical;
     overflow: hidden;
@@ -49,7 +49,7 @@
   const ToggleButton = styled('p', TextAttrs)`
     font-size: ${(props) => props.fontSize}px;
     cursor: pointer;
-    color: ${(props) => props.theme.colors.blue};
+    color: ${(props) => props.theme.semanticColors.purple[500]};
   `
 
   export default {

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

@@ -44,7 +44,7 @@
   import styled from 'vue3-styled-components'
 
   const ComponentWrapper = styled.div`
-    min-height: 16px;
+    min-height: 18px;
   `
 
   const CheckWrapper = styled('div', { hasLabel: Boolean })`
@@ -179,7 +179,7 @@
     font-size: 13px;
     display: grid;
     align-items: center;
-    min-height: 16px;
+    min-height: 18px;
     color: ${(props) =>
       props.isDisabled ? props.theme.colors.grey2 : 'unset'};
   `

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

@@ -56,11 +56,12 @@
         :min-width="minWidth"
         :no-border="noBorder"
         :placeholder="displayedPlaceholder"
+        :read-only="isReadOnly"
         :show-arrow-controls="showArrowControls"
         :show-linear-unit-name="showLinearUnitName"
         :slot-size="slotSize"
         :text-align="textAlign"
-        :value="formatWithCurrency(value)"
+        :value="formattedValue"
         @blur="onInputBlur($event)"
         @focus="focusInput()"
         @input="onInput($event)"
@@ -74,7 +75,7 @@
 
       <UnitContainer
         v-if="unitName && showLinearUnitName && !hasSlot"
-        :has-length="!!textInput.length"
+        :has-length="hasLength"
         :is-error="isError"
         >{{ unitName }}</UnitContainer
       >
@@ -91,7 +92,7 @@
           :disabled="isSelectDisabled"
           :select-width="`${selectWidth}px`"
           :show-border="false"
-          @input-change="$emit('select-change', $event)"
+          @input-change="handleSelectChange"
         >
           <template #selector>
             <SelectText>{{ getSelectValue }}</SelectText>
@@ -163,6 +164,7 @@
   //     labelInfoAlign="left"
   //     :minNumber="0"
   //     fontColor="blue"
+  //     :isReadOnly="true"
   //     colorMode="transparent" // Makes background transparent, border white, and font white
   // >
   //<template name=label><img>....</template>
@@ -202,6 +204,7 @@
     showLinearUnitName: Boolean,
     colorMode: String,
     showArrowControls: Boolean,
+    readOnly: Boolean,
   }
 
   const Container = styled('div', inputProps)`
@@ -250,7 +253,8 @@
         ? '0 4px 4px 0'
         : '4px'};
     text-align: ${(props) => props.textAlign};
-    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
+    cursor: ${(props) =>
+      props.isDisabled || props.readOnly ? 'not-allowed' : 'auto'};
     font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
     color: ${(props) =>
       props.isError
@@ -263,7 +267,9 @@
         ? props.fontColor + ' !important'
         : props.theme.colors.black};
     background-color: ${(props) =>
-      props.isDisabled
+      props.readOnly
+        ? props.theme.semanticColors.grey[300]
+        : props.isDisabled
         ? props.colorMode === 'transparent'
           ? 'transparent'
           : props.theme.colors.grey5
@@ -276,6 +282,8 @@
     box-sizing: border-box;
     opacity: ${(props) =>
       props.isDisabled && props.colorMode === 'transparent' ? '0.4' : '1'};
+    pointer-events: ${(props) => (props.readOnly ? 'none' : 'auto')};
+    user-select: ${(props) => (props.readOnly ? 'none' : 'auto')};
 
     &::placeholder {
       color: ${(props) => props.theme.colors.grey2};
@@ -449,8 +457,18 @@
     background-color: ${({ theme }) => theme.colors.grey4};
   `
 
+  const EVENT_TYPES = {
+    INPUT_FOCUS: 'input-focus',
+    INPUT_CHANGE: 'input-change',
+    INPUT_BLUR: 'input-blur',
+    PRESS_ENTER: 'on-enter-click',
+    INPUT_DRAG: 'on-input-drag',
+    SELECT_CHANGE: 'select-change',
+  }
+
   export default {
     name: 'InputNumber',
+    emits: [...Object.values(EVENT_TYPES)],
     components: {
       Container,
       InputContainer,
@@ -686,12 +704,17 @@
         type: Boolean,
         default: false,
       },
+      isReadOnly: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
-        textInput: '',
         isFocused: false,
         warningIcon: warningIcon,
+        inputValue: null,
+        enteredValue: null,
       }
     },
     computed: {
@@ -714,6 +737,14 @@
 
         return item ? item.label : '-'
       },
+      formattedValue() {
+        return this.isFocused
+          ? this.enteredValue
+          : this.formatWithCurrency(this.value)
+      },
+      hasLength() {
+        return this.formattedValue !== null && this.formattedValue.length > 0
+      },
     },
     watch: {
       focus(value) {
@@ -724,30 +755,19 @@
       clearInput: function (value) {
         if (value) {
           // If the value is typed, then we should clear the textInput on Continue
-          this.textInput = ''
+          this.inputValue = ''
+          this.enteredValue = ''
         }
       },
-    },
-    created() {
-      if (this.value) {
-        this.textInput = numberToString({
-          value: this.value,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals,
-        })
-      } else if (this.defaultNumber !== null) {
-        this.textInput = numberToString({
-          value: this.defaultNumber,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals,
-        })
-      } else if (this.minNumber !== null) {
-        this.textInput = numberToString({
-          value: this.minNumber,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals,
-        })
-      }
+      value: {
+        immediate: true,
+        handler(val) {
+          if (this.value !== this.inputValue && !Number.isNaN(this.value)) {
+            this.inputValue = this.value
+            this.enteredValue = this.value
+          }
+        },
+      },
     },
     mounted() {
       if (this.focus) {
@@ -786,29 +806,28 @@
         }
       },
       onEnterPress() {
-        this.$emit('on-enter-click')
+        this.$emit(EVENT_TYPES.PRESS_ENTER)
         this.$refs.inputField1.$el.blur()
       },
-      onChangeHandler(event) {
-        if (isNaN(event) || event === '') {
-          event = this.defaultNumber
+      onChangeHandler(value) {
+        if (isNaN(value) || value === '') {
+          value = this.defaultNumber
             ? this.defaultNumber
             : this.minNumber || this.minNumber === 0
             ? this.minNumber
-            : event
+            : value
         }
         if (!this.allowNegative) {
-          event = Math.abs(event)
+          value = Math.abs(value)
         }
-        event = parseFloat(event)
+        value = parseFloat(value)
         // Need to return an integer rather than a string
-        this.$emit('input-change', event)
+        return parseFloat(value)
       },
-      onEvaluateCode(event) {
+      onEvaluateCode(value) {
         // function to perform math on the code
         // filter the string in case of any malicious content
-        const val = event.target.value
-        let filtered = val.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
+        let filtered = value.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
         filtered = filtered.split(/([-+*/()])/)
         let formatted = filtered.map((item) => {
           if (
@@ -866,48 +885,29 @@
         return array
       },
       onInput(event) {
-        if (!this.isFocused) {
+        this.enteredValue = event.target.value
+        if (!this.isFocused || this.enteredValue === this.inputValue) {
           return
         }
-        if (event.target.value === '') {
-          this.$emit('on-input', '')
-        }
         let evaluatedVal
         try {
-          evaluatedVal = this.onEvaluateCode(event)
+          evaluatedVal = this.onEvaluateCode(String(this.enteredValue))
         } finally {
-          if (evaluatedVal && this.value != evaluatedVal) {
-            this.$emit('on-input', evaluatedVal)
+          this.inputValue = this.onChangeHandler(evaluatedVal)
+
+          if (this.isFocused && typeof this.enteredValue !== 'number') {
+            this.$emit(EVENT_TYPES.INPUT_CHANGE, this.inputValue)
           }
         }
         this.textInput = evaluatedVal
       },
       onInputBlur(e) {
         this.isFocused = false
-        let value = e.target.value
-        let evaluatedInput = this.onEvaluateCode(e)
-        this.onChangeHandler(evaluatedInput ? evaluatedInput : value)
-        if ((evaluatedInput && value.length) || this.minNumber !== null) {
-          this.textInput = numberToString({
-            value:
-              evaluatedInput && value.length
-                ? evaluatedInput
-                : this.defaultNumber
-                ? this.defaultNumber
-                : this.minNumber,
-            numberPrecision: this.numberPrecision,
-            minDecimals: this.minDecimals,
-          })
-        }
-        let adjustedMinValue =
-          evaluatedInput && evaluatedInput.length
-            ? evaluatedInput
-            : this.defaultNumber
-            ? this.defaultNumber
-            : this.minNumber || this.minNumber === 0
-            ? this.minNumber
-            : ''
-        this.$emit('input-blur', adjustedMinValue)
+        this.enteredValue = this.inputValue
+        this.$emit(
+          EVENT_TYPES.INPUT_BLUR,
+          this.onEvaluateCode(String(this.inputValue))
+        )
       },
       focusInput() {
         if (this.disabled) {
@@ -917,7 +917,7 @@
         this.$nextTick(() => {
           this.$refs.inputField1.$el.select()
         })
-        this.$emit('input-focus')
+        this.$emit(EVENT_TYPES.INPUT_FOCUS, this.inputValue)
       },
       blurInput() {
         if (this.disabled) {
@@ -937,7 +937,7 @@
             : this.minNumber || this.minNumber === 0
             ? this.minNumber
             : ''
-        if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
+        if (adjustedMinValue || adjustedMinValue === 0) {
           let input = this.numberToStringEnabled
             ? numberToString({
                 value: adjustedMinValue,
@@ -950,6 +950,8 @@
           return input + ' ' + unit
         } else if (!adjustedMinValue && adjustedMinValue !== 0) {
           return ''
+        } else if (this.isFocused) {
+          return value
         } else {
           return this.numberToStringEnabled
             ? numberToString({
@@ -970,14 +972,7 @@
         e.preventDefault()
         let value = parseFloat(this.value || 0)
         value += parseFloat(this.interactionStep) * parseInt(e.movementX)
-        this.$emit('on-input-drag', value)
-
-        this.textInput = numberToString({
-          value: value && value.length ? value : this.minNumber,
-          numberPrecision: this.numberPrecision,
-          minDecimals: this.minDecimals,
-        })
-        //this.value=value
+        this.$emit(EVENT_TYPES.INPUT_DRAG, this.onChangeHandler(value))
       },
       stopInteract(e) {
         e.preventDefault()
@@ -985,6 +980,9 @@
         window.removeEventListener('mouseup', this.stopInteract, false)
         this.blurInput()
       },
+      handleSelectChange(value) {
+        this.$emit(EVENT_TYPES.SELECT_CHANGE, value)
+      },
     },
   }
 </script>