@eturnity/eturnity_reusable_components 8.16.9-SLD.4 → 8.16.9-SLD.6

package/package.json

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

package/src/assets/svgIcons/ed_acgrid.svg

@@ -1,4 +1,3 @@
-<svg width="34" height="65" viewBox="0 0 34 65" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M25.5308 32.5C25.7556 34.3125 27.1875 35.7444 29 35.9692L29 64.1365H30L30 35.9692C31.9763 35.7241 33.5 34.044 33.5 32C33.5 29.956 31.9763 28.2759 30 28.0308L30 0H29L29 28.0308C27.1875 28.2556 25.7556 29.6875 25.5308 31.5L0 31.5V32.5L25.5308 32.5Z" fill="black"/>
-<path d="M26.027 32.4384L25.9726 32L26.027 31.5616C26.2236 29.9764 27.4763 28.7236 29.0616 28.527L29.5 28.4726L29.9384 28.527C31.6671 28.7414 33 30.2112 33 32C33 33.7888 31.6671 35.2586 29.9384 35.473L29.5 35.5274L29.0616 35.473C27.4764 35.2764 26.2236 34.0236 26.027 32.4384Z" stroke="black" stroke-miterlimit="8"/>
+<svg width="40" height="64" viewBox="0 0 40 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.2002 28.0615C35.0754 28.3926 36.5 30.0298 36.5 32C36.5 33.9702 35.0754 35.6063 33.2002 35.9375V64H31.7998V35.9375C30.1521 35.6465 28.8535 34.3479 28.5625 32.7002H0V31.2998H28.5625C28.8535 29.652 30.152 28.3525 31.7998 28.0615V0H33.2002V28.0615Z" fill="black"/>
 </svg>

package/src/assets/svgIcons/ed_acgrid_old.svg

@@ -0,0 +1,4 @@
+<svg width="34" height="65" viewBox="0 0 34 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.5308 32.5C25.7556 34.3125 27.1875 35.7444 29 35.9692L29 64.1365H30L30 35.9692C31.9763 35.7241 33.5 34.044 33.5 32C33.5 29.956 31.9763 28.2759 30 28.0308L30 0H29L29 28.0308C27.1875 28.2556 25.7556 29.6875 25.5308 31.5L0 31.5V32.5L25.5308 32.5Z" fill="black"/>
+<path d="M26.027 32.4384L25.9726 32L26.027 31.5616C26.2236 29.9764 27.4763 28.7236 29.0616 28.527L29.5 28.4726L29.9384 28.527C31.6671 28.7414 33 30.2112 33 32C33 33.7888 31.6671 35.2586 29.9384 35.473L29.5 35.5274L29.0616 35.473C27.4764 35.2764 26.2236 34.0236 26.027 32.4384Z" stroke="black" stroke-miterlimit="8"/>
+</svg>

package/src/assets/svgIcons/edit_stroke.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path class='isStrokePath' d="M2.1068 13.2607L2.95525 10.7154C2.97979 10.6418 3.02115 10.5748 3.07603 10.52L11.5353 2.06066C11.7306 1.8654 12.0472 1.8654 12.2424 2.06066L13.9393 3.75756C14.1346 3.95282 14.1346 4.2694 13.9393 4.46466L5.48004 12.924C5.42515 12.9789 5.35824 13.0202 5.2846 13.0448L2.73925 13.8932C2.34837 14.0235 1.9765 13.6516 2.1068 13.2607Z" stroke="lime"/>
+</svg>

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

@@ -4,6 +4,7 @@
       :app-theme="appTheme"
       :button-size="buttonSize"
       :custom-color="customColor"
+      :height="height"
       :is-active="isActive"
       :is-disabled="isDisabled"
       :min-width="minWidth"
@@ -13,6 +14,7 @@
       <IconContainer
         :app-theme="appTheme"
         :button-size="buttonSize"
+        :height="height"
         :type="type"
         :variant="variant"
       >
@@ -30,7 +32,7 @@
           size="14px"
         />
       </IconContainer>
-      <ButtonContainer :button-size="buttonSize">
+      <ButtonContainer :button-size="buttonSize" :height="height">
         {{ text }}
       </ButtonContainer>
     </ButtonWrapper>
@@ -64,9 +66,11 @@
     variant: String,
     appTheme: String,
     isActive: Boolean,
+    height: String,
   }
   const ButtonWrapper = styled('div', ButtonAttrs)`
     display: grid;
+    height: ${({ height }) => height};
     grid-template-columns: auto 1fr;
     font-size: ${(props) =>
       props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
@@ -128,9 +132,11 @@
 
   const ButtonContainerAttrs = {
     buttonSize: String,
+    height: String,
   }
   const ButtonContainer = styled('div', ButtonContainerAttrs)`
     display: flex;
+    height: ${({ height }) => height};
     align-items: center;
     justify-content: center;
     padding: ${(props) =>
@@ -143,9 +149,11 @@
     appTheme: String,
     type: String,
     variant: String,
+    height: String,
   }
   const IconContainer = styled('div', IconContainerAttrs)`
     display: grid;
+    height: ${({ height }) => height};
     align-items: center;
     justify-items: center;
     width: ${(props) =>
@@ -236,6 +244,10 @@
         type: Boolean,
         default: false,
       },
+      height: {
+        type: String,
+        default: 'auto',
+      },
     },
     data() {
       return {

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

@@ -30,17 +30,16 @@
           :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="
-                selectedValue == item.value ? primaryColor : inactiveColor
-              "
+              :color="value == item.value ? primaryColor : inactiveColor"
               :name="item.icon"
               :size="item.iconSize"
             />
@@ -84,7 +83,6 @@
   const OptionIconContainer = styled.div`
     display: flex;
     align-items: center;
-    margin-right: 5px;
   `
   const Container = styled.div``
 
@@ -130,6 +128,7 @@
     secondaryColor: String,
     inactiveColor: String,
     size: String,
+    width: String,
   }
   const SwitchOption = styled('div', optionAttrs)`
     color: ${(props) =>
@@ -140,6 +139,8 @@
       ${(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;
@@ -156,6 +157,7 @@
     margin-right: -1px;
     transition: all 0.1s ease-in-out;
     overflow: hidden;
+    gap: 5px;
     & :hover {
       cursor: pointer;
     }
@@ -236,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
@@ -265,8 +259,7 @@
         if (this.disabled) {
           return
         }
-        this.selectedValue = value
-        this.$emit('on-switch-change', this.selectedValue)
+        this.$emit('on-switch-change', value)
       },
     },
   }