@eturnity/eturnity_reusable_components 8.19.4 → 8.19.6

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};
@@ -150,7 +155,9 @@
     },
     emits: ['option-hovered', 'option-selected'],
     data() {
-      return {}
+      return {
+        theme,
+      }
     },
     computed: {},
     methods: {

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

@@ -30,11 +30,20 @@
           :color-mode="colorMode"
           :data-id="item.hasOwnProperty('dataId') ? item.dataId : ''"
           :inactive-color="inactiveColor"
-          :is-active="selectedValue == item.value"
+          :is-active="value == item.value"
           :primary-color="primaryColor"
           :secondary-color="secondaryColor"
+          :size="size"
+          :width="item.width || 'auto'"
           @click="selectItem(item.value)"
         >
+          <OptionIconContainer v-if="item.icon">
+            <RCIcon
+              :color="value == item.value ? primaryColor : inactiveColor"
+              :name="item.icon"
+              :size="item.iconSize"
+            />
+          </OptionIconContainer>
           {{ item.content }}
         </SwitchOption>
       </SwitchWrapper>
@@ -70,6 +79,11 @@
   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;
+  `
   const Container = styled.div``
 
   const flexAttrs = {
@@ -89,7 +103,6 @@
   `
 
   const toggleAttrs = {
-    size: String,
     fontColor: String,
     disabled: Boolean,
     backgroundColor: String,
@@ -105,20 +118,17 @@
 
   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,
+    width: String,
   }
   const SwitchOption = styled('div', optionAttrs)`
     color: ${(props) =>
@@ -129,16 +139,25 @@
       ${(props) =>
         props.isActive ? props.secondaryColor : props.inactiveColor};
     display: flex;
+    width: ${({ width }) => width};
+    word-break: break-word;
     align-items: center;
     justify-content: center;
     flex-grow: 1;
     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;
+    gap: 5px;
     & :hover {
       cursor: pointer;
     }
@@ -169,6 +188,8 @@
       InfoText,
       LabelContainer,
       SwitchOption,
+      OptionIconContainer,
+      RCIcon,
     },
     props: {
       label: {
@@ -217,20 +238,12 @@
     },
     data() {
       return {
-        selectedValue: null,
         primaryColor: 'white',
         secondaryColor: 'black',
         inactiveColor: 'grey6',
       }
     },
-    watch: {
-      value(val) {
-        this.selectedValue = val
-      },
-    },
     created() {
-      this.selectedValue = this.value
-
       if (this.colorMode == 'dark') {
         this.primaryColor = theme.colors.black
         this.secondaryColor = theme.colors.white
@@ -246,8 +259,7 @@
         if (this.disabled) {
           return
         }
-        this.selectedValue = value
-        this.$emit('on-switch-change', this.selectedValue)
+        this.$emit('on-switch-change', value)
       },
     },
   }

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

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

package/src/components/tabsHeader/index.vue

@@ -4,6 +4,7 @@
       <TabItem
         v-for="item in tabsData"
         :key="item.id"
+        :data-id="item.dataId"
         :full-size="fullSize"
         :is-active="activeTab === item.id"
         @click="onTabClick({ id: item.id })"
@@ -25,7 +26,7 @@
         />
         <div>{{ item.text }}</div>
         <DotIcon v-if="item.subText" :is-active="activeTab === item.id" />
-          <SubText v-if="item.subText">{{ item.subText }}</SubText>
+        <SubText v-if="item.subText">{{ item.subText }}</SubText>
         <RCIcon v-if="item.hasError" name="warning" size="14px" />
       </TabItem>
     </TabsContainer>

package/src/assets/svgIcons/ed_disconnector_loadbreak switch.svg

@@ -1,4 +0,0 @@
-<svg width="129" height="82" viewBox="0 0 129 82" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M73.8675 4.17596L84.6193 1.48572L84.3766 0.515625L61.9099 6.13709L62.1526 7.10719L72.8974 4.4187L78.27 26.5671L22.5845 40.501H0V41.501H22.7078L90.706 24.4861L90.4632 23.516L79.2401 26.3243L73.8675 4.17596Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M77.2852 41.001C77.2852 37.4185 80.1467 34.501 83.6928 34.501C86.3468 34.501 88.6173 36.1352 89.5918 38.4592V35.001H90.5918V40.501H128.246V41.501H90.5918V47.001H89.5918V43.5429C88.6173 45.8669 86.3468 47.501 83.6928 47.501C80.1467 47.501 77.2852 44.5836 77.2852 41.001ZM83.6928 35.501C80.7135 35.501 78.2852 37.9561 78.2852 41.001C78.2852 44.0459 80.7135 46.501 83.6928 46.501C86.6722 46.501 89.1005 44.0459 89.1005 41.001C89.1005 37.9561 86.6722 35.501 83.6928 35.501Z" fill="black"/>
-</svg>