@eturnity/eturnity_reusable_components 8.16.8-EPDM-EPDM-14492.0 → 8.16.9-SLD.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.16.8-EPDM-EPDM-14492.0",
+  "version": "8.16.9-SLD.0",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/text_column_one.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 5.75C5 5.33579 5.33579 5 5.75 5H18.25C18.6642 5 19 5.33579 19 5.75C19 6.16421 18.6642 6.5 18.25 6.5H5.75C5.33579 6.5 5 6.16421 5 5.75Z" fill="white"/>
+<path d="M5 9.75C5 9.33579 5.33579 9 5.75 9H18.25C18.6642 9 19 9.33579 19 9.75C19 10.1642 18.6642 10.5 18.25 10.5H5.75C5.33579 10.5 5 10.1642 5 9.75Z" fill="white"/>
+<path d="M5 13.75C5 13.3358 5.33579 13 5.75 13H18.25C18.6642 13 19 13.3358 19 13.75C19 14.1642 18.6642 14.5 18.25 14.5H5.75C5.33579 14.5 5 14.1642 5 13.75Z" fill="white"/>
+<path d="M5 17.75C5 17.3358 5.33579 17 5.75 17H18.25C18.6642 17 19 17.3358 19 17.75C19 18.1642 18.6642 18.5 18.25 18.5H5.75C5.33579 18.5 5 18.1642 5 17.75Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/text_column_three.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 6C3 5.44772 3.44772 5 4 5H7C7.55228 5 8 5.44772 8 6C8 6.55228 7.55228 7 7 7H4C3.44772 7 3 6.55228 3 6Z" fill="#212121"/>
+<path d="M9.58 6C9.58 5.44772 10.0277 5 10.58 5H13.58C14.1323 5 14.58 5.44772 14.58 6C14.58 6.55228 14.1323 7 13.58 7H10.58C10.0277 7 9.58 6.55228 9.58 6Z" fill="#212121"/>
+<path d="M16 6C16 5.44772 16.4477 5 17 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H17C16.4477 7 16 6.55228 16 6Z" fill="#212121"/>
+<path d="M3 10C3 9.44772 3.44772 9 4 9H7C7.55228 9 8 9.44772 8 10C8 10.5523 7.55228 11 7 11H4C3.44772 11 3 10.5523 3 10Z" fill="#212121"/>
+<path d="M9.58 10C9.58 9.44772 10.0277 9 10.58 9H13.58C14.1323 9 14.58 9.44772 14.58 10C14.58 10.5523 14.1323 11 13.58 11H10.58C10.0277 11 9.58 10.5523 9.58 10Z" fill="#212121"/>
+<path d="M16 10C16 9.44772 16.4477 9 17 9H20C20.5523 9 21 9.44772 21 10C21 10.5523 20.5523 11 20 11H17C16.4477 11 16 10.5523 16 10Z" fill="#212121"/>
+<path d="M3 14C3 13.4477 3.44772 13 4 13H7C7.55228 13 8 13.4477 8 14C8 14.5523 7.55228 15 7 15H4C3.44772 15 3 14.5523 3 14Z" fill="#212121"/>
+<path d="M9.58 14C9.58 13.4477 10.0277 13 10.58 13H13.58C14.1323 13 14.58 13.4477 14.58 14C14.58 14.5523 14.1323 15 13.58 15H10.58C10.0277 15 9.58 14.5523 9.58 14Z" fill="#212121"/>
+<path d="M16 14C16 13.4477 16.4477 13 17 13H20C20.5523 13 21 13.4477 21 14C21 14.5523 20.5523 15 20 15H17C16.4477 15 16 14.5523 16 14Z" fill="#212121"/>
+<path d="M3 18C3 17.4477 3.44772 17 4 17H7C7.55228 17 8 17.4477 8 18C8 18.5523 7.55228 19 7 19H4C3.44772 19 3 18.5523 3 18Z" fill="#212121"/>
+<path d="M9.58 18C9.58 17.4477 10.0277 17 10.58 17H13.58C14.1323 17 14.58 17.4477 14.58 18C14.58 18.5523 14.1323 19 13.58 19H10.58C10.0277 19 9.58 18.5523 9.58 18Z" fill="#212121"/>
+<path d="M16 18C16 17.4477 16.4477 17 17 17H20C20.5523 17 21 17.4477 21 18C21 18.5523 20.5523 19 20 19H17C16.4477 19 16 18.5523 16 18Z" fill="#212121"/>
+</svg>

package/src/assets/svgIcons/text_column_two.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 6C3 5.44772 3.44772 5 4 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H4C3.44772 7 3 6.55228 3 6Z" fill="white"/>
+<path d="M3 10C3 9.44772 3.44772 9 4 9H10C10.5523 9 11 9.44772 11 10C11 10.5523 10.5523 11 10 11H4C3.44772 11 3 10.5523 3 10Z" fill="white"/>
+<path d="M3 14C3 13.4477 3.44772 13 4 13H10C10.5523 13 11 13.4477 11 14C11 14.5523 10.5523 15 10 15H4C3.44772 15 3 14.5523 3 14Z" fill="white"/>
+<path d="M3 18C3 17.4477 3.44772 17 4 17H10C10.5523 17 11 17.4477 11 18C11 18.5523 10.5523 19 10 19H4C3.44772 19 3 18.5523 3 18Z" fill="white"/>
+<path d="M13 6C13 5.44772 13.4477 5 14 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H14C13.4477 7 13 6.55228 13 6Z" fill="white"/>
+<path d="M13 10C13 9.44772 13.4477 9 14 9H20C20.5523 9 21 9.44772 21 10C21 10.5523 20.5523 11 20 11H14C13.4477 11 13 10.5523 13 10Z" fill="white"/>
+<path d="M13 14C13 13.4477 13.4477 13 14 13H20C20.5523 13 21 13.4477 21 14C21 14.5523 20.5523 15 20 15H14C13.4477 15 13 14.5523 13 14Z" fill="white"/>
+<path d="M13 18C13 17.4477 13.4477 17 14 17H20C20.5523 17 21 17.4477 21 18C21 18.5523 20.5523 19 20 19H14C13.4477 19 13 18.5523 13 18Z" fill="white"/>
+</svg>

package/src/components/filter/filterSettings.vue

@@ -100,6 +100,7 @@
               :min-option-length="1"
               select-height="36px"
               select-width="100%"
+              :should-use-teleport="false"
             >
               <template #selector>
                 <OptionTitle> {{ filter.selectedText }} </OptionTitle>
@@ -255,6 +256,7 @@
               :label="filter.label"
               select-height="36px"
               select-width="100%"
+              :should-use-teleport="false"
             >
               <template #selector="{ selectedValue }">
                 <OptionTitle>

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

@@ -513,10 +513,9 @@
         default: '40px',
       },
       value: {
+        type: [String, Number],
         required: true,
         default: null,
-        validator: (val) =>
-          typeof val === 'string' || typeof val === 'number' || val === null,
       },
       clearInput: {
         type: Boolean,

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

@@ -133,7 +133,10 @@
           </Caret>
         </SelectButton>
         <DropdownWrapper ref="dropdownWrapperRef" :no-relative="noRelative">
-          <Teleport to="body">
+          <component
+            :is="shouldUseTeleport ? 'Teleport' : 'div'"
+            :to="shouldUseTeleport ? 'body' : undefined"
+          >
             <SelectDropdown
               v-show="isSelectDropdownShown"
               ref="dropdown"
@@ -164,22 +167,27 @@
               :is-active="isActive"
               :is-fixed-dropdown-position="isFixedDropdownPosition"
               :is-parent-modal="isParentModal"
+              :is-teleport="shouldUseTeleport"
               :min-width="minWidth"
               :no-relative="noRelative"
               :option-width="getOptionWidth"
               :selected-value="selectedValue"
-              :style="{
-                transform: `translate(${dropdownPosition?.left}px, ${
-                  noRelative ? 'auto' : `${dropdownPosition?.top}px`
-                })`,
-              }"
+              :style="
+                shouldUseTeleport
+                  ? {
+                      transform: `translate(${dropdownPosition?.left}px, ${
+                        noRelative ? 'auto' : `${dropdownPosition?.top}px`
+                      })`,
+                    }
+                  : undefined
+              "
               @mouseleave="optionLeave"
               @option-hovered="optionHovered"
               @option-selected="optionSelected"
             >
               <slot name="dropdown"></slot>
             </SelectDropdown>
-          </Teleport>
+          </component>
         </DropdownWrapper>
       </SelectButtonWrapper>
     </InputWrapper>
@@ -396,6 +404,7 @@
     minWidth: String,
     isParentModal: Boolean,
     isFixedDropdownPosition: Boolean,
+    isTeleport: Boolean,
   }
   const SelectDropdown = styled('div', selectDropdownAttrs)`
     box-sizing: border-box;
@@ -403,7 +412,7 @@
       props.isActive ? '2' : props.isParentModal ? '9999999' : '99999'};
     position: ${(props) =>
       props.isFixedDropdownPosition ? 'fixed' : 'absolute'};
-    top: 0px;
+    top: ${(props) => (props.isTeleport ? '0px' : '4px')};
     left: 0px;
     border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
     border-radius: 4px;
@@ -657,6 +666,11 @@
         required: false,
         default: false,
       },
+      shouldUseTeleport: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
     setup() {
       const modalRef = inject('modalRef')

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

@@ -2,18 +2,19 @@
   <OptionContainer
     :background-color="
       colorMode == 'dark'
-        ? '#000000'
+        ? theme.semanticColors.teal[900]
         : colorMode == 'transparent'
         ? 'black'
         : backgroundColor
     "
+    :color-mode="colorMode"
     :cursor-type="cursorType"
     :data-value="value"
     :disabled-bg-color="disabledBgColor"
     :disabled-text-color="disabledTextColor"
     :hovered-bg-color="
       colorMode == 'dark'
-        ? '#000000'
+        ? theme.semanticColors.teal[800]
         : colorMode == 'transparent'
         ? 'grey6'
         : hoveredBgColor
@@ -36,6 +37,7 @@
   //   import selectButton from './selectButton'
   //   import selectDropdown from './selectDropDown'
   import styled from 'vue3-styled-components'
+  import theme from '@/assets/theme'
   const optionProps = {
     isDisabled: Boolean,
     hoveredBgColor: String,
@@ -46,6 +48,7 @@
     disabledTextColor: String,
     padding: String,
     textColor: String,
+    colorMode: String,
   }
   const OptionContainer = styled('div', optionProps)`
     display: flex;
@@ -77,6 +80,8 @@
             ? props.theme.colors[props.disabledTextColor]
             : props.disabledTextColor
           : props.theme.colors.grey3
+        : props.colorMode == 'dark'
+        ? props.theme.colors['white']
         : props.theme.colors[props.textColor]
         ? props.theme.colors[props.textColor]
         : props.textColor};
@@ -145,7 +150,9 @@
     },
     emits: ['option-hovered', 'option-selected'],
     data() {
-      return {}
+      return {
+        theme,
+      }
     },
     computed: {},
     methods: {

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

@@ -33,8 +33,18 @@
           :is-active="selectedValue == item.value"
           :primary-color="primaryColor"
           :secondary-color="secondaryColor"
+          :size="size"
           @click="selectItem(item.value)"
         >
+          <OptionIconContainer v-if="item.icon">
+            <RCIcon
+              :color="
+                selectedValue == item.value ? primaryColor : secondaryColor
+              "
+              :name="item.icon"
+              :size="item.iconSize"
+            />
+          </OptionIconContainer>
           {{ item.content }}
         </SwitchOption>
       </SwitchWrapper>
@@ -70,6 +80,12 @@
   import styled from 'vue3-styled-components'
   import InfoText from '../../infoText'
   import theme from '../../../assets/theme'
+  import RCIcon from '../../icon'
+  const OptionIconContainer = styled.div`
+    display: flex;
+    align-items: center;
+    margin-right: 5px;
+  `
   const Container = styled.div``
 
   const flexAttrs = {
@@ -89,7 +105,6 @@
   `
 
   const toggleAttrs = {
-    size: String,
     fontColor: String,
     disabled: Boolean,
     backgroundColor: String,
@@ -105,20 +120,16 @@
 
   const SwitchWrapper = styled('span', toggleAttrs)`
     display: flex;
+    align-items: center
     position: relative;
     cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-    height: ${(props) =>
-      props.size === 'medium'
-        ? '24px'
-        : props.size === 'small'
-        ? '16px'
-        : '24px'};
   `
   const optionAttrs = {
     isActive: Boolean,
     primaryColor: String,
     secondaryColor: String,
     inactiveColor: String,
+    size: String,
   }
   const SwitchOption = styled('div', optionAttrs)`
     color: ${(props) =>
@@ -135,7 +146,13 @@
     font-size: 13px;
     line-height: 1;
     text-align: center;
-    padding: 10px;
+    height: ${(props) =>
+      props.size === 'medium'
+        ? '24px'
+        : props.size === 'small'
+        ? '16px'
+        : '24px'};
+    padding: 0 10px;
     margin-right: -1px;
     transition: all 0.1s ease-in-out;
     overflow: hidden;
@@ -169,6 +186,8 @@
       InfoText,
       LabelContainer,
       SwitchOption,
+      OptionIconContainer,
+      RCIcon,
     },
     props: {
       label: {

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

@@ -124,6 +124,7 @@
         : props.size === 'small'
         ? '13px'
         : '16px'};
+    font-weight: 700;
   `
 
   const ToggleWrapper = styled('span', toggleAttrs)`