@eturnity/eturnity_reusable_components 8.16.5 → 8.16.7

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

@@ -21,6 +21,7 @@
             iconColor ||
             theme.mainButton[appTheme][type][variant].default.textColor
           "
+          :disable-hover="disableIconHover"
           :hovered-color="
             iconColor ||
             theme.mainButton[appTheme][type][variant].default.textColor
@@ -231,6 +232,10 @@
         default: false,
         type: Boolean,
       },
+      disableIconHover: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {

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

@@ -11,6 +11,7 @@
       :background-color="backgroundColor"
       :color="color"
       data-test-id="icon_image"
+      :disable-hover="disableHover"
       :fill-type="fillType"
       :hovered-color="hoveredColor"
     >
@@ -108,6 +109,10 @@
       default: 'fill',
       type: String,
     },
+    disableHover: {
+      type: Boolean,
+      default: false,
+    },
   })
 
   const Wrapper = styled('div', {
@@ -164,6 +169,7 @@
     hoveredColor: String,
     animation: String,
     fillType: String,
+    disableHover: Boolean,
   }
   const IconImage = styled('div', IconImageAttrs)`
     animation: ${(props) => props.animation};
@@ -180,12 +186,17 @@
       ${({ theme, color, fillType }) =>
         color && `${fillType}: ${theme.colors[color] || color};`}
     }
-    &:hover svg path:not(.fix) {
-      ${(props) => `${props.fillType}: ${props.hoveredColor || props.color};`}
+    ${(props) =>
+      !props.disableHover &&
+      `
+     &:hover svg path:not(.fix) {
+      ${`${props.fillType}: ${props.hoveredColor || props.color};`}
     }
     &:hover + div {
-      background-color: ${(props) => props.hoveredColor};
+      background-color: ${props.hoveredColor};
     }
+    `}
+
     @keyframes fade {
       50% {
         opacity: 0.3;

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

@@ -56,6 +56,7 @@
         :min-width="minWidth"
         :no-border="noBorder"
         :placeholder="displayedPlaceholder"
+        :read-only="isReadOnly"
         :show-arrow-controls="showArrowControls"
         :show-linear-unit-name="showLinearUnitName"
         :slot-size="slotSize"
@@ -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};
@@ -686,6 +694,10 @@
         type: Boolean,
         default: false,
       },
+      isReadOnly: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {

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

@@ -1,6 +1,10 @@
 <template>
   <Container :input-width="inputWidth">
-    <InputWrapper :icon-color="iconColor" :icon-position="iconPosition">
+    <InputWrapper
+      :icon-color="iconColor"
+      :icon-position="iconPosition"
+      :is-full-height="isFullHeight"
+    >
       <SearchIconSvg class="search-icn" />
       <InputContainer
         ref="inputElement"
@@ -11,6 +15,7 @@
         :input-width="inputWidth"
         :is-disabled="disabled"
         :is-filter="isFilter"
+        :is-full-height="isFullHeight"
         :placeholder="placeholder"
         :value="value"
         @input="onChangeHandler($event)"
@@ -41,6 +46,7 @@
     isDisabled: Boolean,
     inputWidth: String,
     isFilter: Boolean,
+    isFullHeight: Boolean,
   }
   const Container = styled('div', inputAttrs)`
     width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
@@ -55,6 +61,7 @@
     font-size: 13px;
     color: ${(props) => props.theme.colors.black};
     width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+    height: ${(props) => (props.isFullHeight ? '100%' : 'auto')};
     box-sizing: border-box;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
     background: ${(props) => props.theme.colors.white} !important;
@@ -67,9 +74,14 @@
     }
   `
 
-  const wrapperAttrs = { iconColor: String, iconPosition: String }
+  const wrapperAttrs = {
+    iconColor: String,
+    iconPosition: String,
+    isFullHeight: Boolean,
+  }
   const InputWrapper = styled('div', wrapperAttrs)`
     position: relative;
+    height: ${(props) => (props.isFullHeight ? '100%' : 'auto')};
 
     svg {
       position: absolute;
@@ -142,6 +154,10 @@
         type: String,
         default: 'black',
       },
+      isFullHeight: {
+        type: Boolean,
+        default: false,
+      },
     },
     emits: ['on-change'],
     watch: {

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

@@ -4,6 +4,7 @@
     ref="modalRef"
     :add-padding-top="addPaddingTop"
     :backdrop="backdrop"
+    class="rc-modal-wrapper"
     :is-open="isOpen"
     :position="position"
   >

package/src/helpers/isObjectEqual.js

@@ -0,0 +1,22 @@
+import { toRaw } from 'vue'
+
+export default function isObjectEqual(obj1, obj2) {
+  obj1 = toRaw(obj1)
+  obj2 = toRaw(obj2)
+  if (obj1 === obj2) return true
+  if (obj1 === null || obj2 === null) return false
+  if (typeof obj1 !== 'object' || typeof obj2 !== 'object') return false
+
+  const isArray1 = Array.isArray(obj1)
+  const isArray2 = Array.isArray(obj2)
+  if (isArray1 !== isArray2) return false
+
+  const keys1 = Object.keys(obj1)
+  if (keys1.length !== Object.keys(obj2).length) return false
+
+  return keys1.every(
+    (key) =>
+      Object.prototype.hasOwnProperty.call(obj2, key) &&
+      isObjectEqual(obj1[key], obj2[key])
+  )
+}

package/src/main.js

@@ -3,5 +3,6 @@ import { createApp } from 'vue'
 import router from './router/dynamicRoutes'
 
 const app = createApp(App)
+
 app.use(router)
 app.mount('#app')