@eturnity/eturnity_reusable_components 1.0.74 → 1.0.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.0.74",
+  "version": "1.0.78",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -13,8 +13,21 @@
         <tbody>
           <tr>
             <td class="text">Body 2</td>
-            <td class="text">Body 3</td>
-            <td class="text">Body 4</td>
+            <td>
+              <toggle
+                @on-toggle-change="onInputChange($event)"
+                :isChecked="isChecked"
+                labelAlign="right"
+              />
+            </td>
+            <td>
+              <toggle
+                @on-toggle-change="onInputChange($event)"
+                :isChecked="isChecked"
+                labelAlign="right"
+                :disabled="true"
+              />
+            </td>
             <div class="icons-container">
               <three-dots :options="listOptions" :isLoading="false" />
             </div>
@@ -28,6 +41,7 @@
         :isChecked="isChecked"
         label="My Label Text"
         labelAlign="right"
+        :disabled="true"
       />
     </page-container>
   </ThemeProvider>

package/src/assets/theme.js

@@ -12,12 +12,14 @@ const theme = {
     white: "#fff",
     blue: "#48a2d0",
     red: "#ff7e7e",
-    disabled: "#c4c4c4",
     blue1: "#e4efff",
+    grey1: "#666",
+    grey2: "#c4c4c4",
     grey3: "#b2b9c5",
     grey4: "#ebeef4",
     grey5: "#fafafa",
     green: "#99db0c",
+    disabled: "#dfe1e1",
   },
   screen: {
     mobileSmall: "345px",

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

@@ -1,6 +1,6 @@
 <template>
   <container>
-    <flex-wrapper :size="size" @click="onToggleChange">
+    <flex-wrapper :size="size" :disabled="disabled" @click="onToggleChange">
       <label-text v-if="labelAlign === 'left'" :size="size">{{
         label
       }}</label-text>
@@ -11,10 +11,13 @@
         tabindex="0"
         @keydown.space.prevent="onToggleChange"
         :disabled="disabled"
+        :backgroundColor="backgroundColor"
+        :isChecked="isChecked"
       >
         <toggle-background
           :backgroundColor="backgroundColor"
           :isChecked="isChecked"
+          :disabled="disabled"
         />
         <toggle-dot
           :isChecked="isChecked"
@@ -54,7 +57,7 @@ const Container = styled.div`
   display: inline-block;
 `
 
-const flexAttrs = { size: String }
+const flexAttrs = { size: String, disabled: Boolean }
 const FlexWrapper = styled("div", flexAttrs)`
   display: grid;
   grid-template-columns: auto 1fr;
@@ -65,10 +68,16 @@ const FlexWrapper = styled("div", flexAttrs)`
       ? "10px"
       : "20px"};
   align-items: center;
-  cursor: pointer;
+  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
 `
 
-const toggleAttrs = { size: String, fontColor: String, disabled: Boolean }
+const toggleAttrs = {
+  size: String,
+  fontColor: String,
+  disabled: Boolean,
+  backgroundColor: String,
+  isChecked: Boolean,
+}
 const LabelText = styled("div", toggleAttrs)`
   color: ${(props) =>
     props.fontColor ? props.fontColor : props.theme.colors.darkGray};
@@ -82,6 +91,14 @@ const LabelText = styled("div", toggleAttrs)`
 
 const ToggleWrapper = styled("span", toggleAttrs)`
   display: inline-block;
+  border: ${(props) =>
+    props.disabled
+      ? "1px solid " + props.theme.colors.disabled
+      : props.isChecked
+      ? props.backgroundColor
+        ? "1px solid " + props.backgroundColor
+        : "1px solid " + props.theme.colors.green
+      : "1px solid " + props.theme.colors.grey3}
   position: relative;
   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
   width: ${(props) =>
@@ -108,14 +125,21 @@ const ToggleWrapper = styled("span", toggleAttrs)`
   }
 `
 
-const backgroundAttrs = { backgroundColor: String, isChecked: Boolean }
+const backgroundAttrs = {
+  backgroundColor: String,
+  isChecked: Boolean,
+  disabled: Boolean,
+}
 const ToggleBackground = styled("span", backgroundAttrs)`
-  display: inline-block;
+  /* display: inline-block; */
+  display: block;
   border-radius: 100px;
   height: 100%;
   width: 100%;
   background-color: ${(props) =>
-    props.isChecked
+    props.disabled
+      ? props.theme.colors.grey5
+      : props.isChecked
       ? props.backgroundColor
         ? props.backgroundColor
         : props.theme.colors.green
@@ -145,7 +169,7 @@ const ToggleDot = styled("span", toggleProps)`
       : "14px"};
   left: 3px
   bottom: ${(props) =>
-    props.size === "medium" ? "5px" : props.size === "small" ? "3px" : "5px"};
+    props.size === "medium" ? "5px" : props.size === "small" ? "2px" : "5px"};
   background-color: ${(props) =>
     props.disabled
       ? props.theme.colors.disabled
@@ -161,7 +185,7 @@ const ToggleDot = styled("span", toggleProps)`
       ? props.size === "medium"
         ? "translateX(25px)"
         : props.size === "small"
-        ? "translateX(13px)"
+        ? "translateX(12px)"
         : "translateX(25px)"
       : "translateX(0)"};
 

package/src/components/tableDropdown/index.vue

@@ -122,7 +122,7 @@ import SearchInput from "@eturnity/eturnity_reusable_components/src/components/i
 const DropdownRow = styled.td``
 
 const ComponentItem = styled.div`
-  padding-left: 12px;
+  /* padding-left: 12px; */
   overflow: hidden;
   text-overflow: ellipsis;
 `

package/src/components/tables/mainTable/index.vue

@@ -101,7 +101,7 @@ const TableContainer = styled.table`
   }
 
   td {
-    padding: 7px 15px;
+    padding: 7px 15px 7px 10px;
     border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
 
     &.empty {