@eturnity/eturnity_reusable_components 1.0.75 → 1.0.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.0.75",
+  "version": "1.0.79",
   "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>
@@ -64,7 +78,7 @@ export default {
         number_max_allowed: 10,
         unit_short_name: "cm",
       },
-      isChecked: true,
+      isChecked: false,
       listOptions: [
         {
           name: "Option 1",

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

@@ -104,9 +104,7 @@ const InputContainer = styled("input", inputProps)`
     props.isError ? props.theme.colors.red : props.theme.colors.black};
   width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
   background-color: ${(props) =>
-    props.isDisabled
-      ? props.theme.colors.grey5 + " !important"
-      : "#fff !important"};
+    props.isDisabled ? props.theme.colors.grey5 : "#fff"};
   box-sizing: border-box;
 
   &::placeholder {

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

@@ -11,6 +11,8 @@
         tabindex="0"
         @keydown.space.prevent="onToggleChange"
         :disabled="disabled"
+        :backgroundColor="backgroundColor"
+        :isChecked="isChecked"
       >
         <toggle-background
           :backgroundColor="backgroundColor"
@@ -69,7 +71,13 @@ const FlexWrapper = styled("div", flexAttrs)`
   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};
@@ -84,7 +92,13 @@ const LabelText = styled("div", toggleAttrs)`
 const ToggleWrapper = styled("span", toggleAttrs)`
   display: inline-block;
   border: ${(props) =>
-    props.disabled ? "1px solid " + props.theme.colors.disabled : "none"}
+    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) =>
@@ -117,7 +131,8 @@ const backgroundAttrs = {
   disabled: Boolean,
 }
 const ToggleBackground = styled("span", backgroundAttrs)`
-  display: inline-block;
+  /* display: inline-block; */
+  display: block;
   border-radius: 100px;
   height: 100%;
   width: 100%;
@@ -154,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
@@ -170,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

@@ -1,5 +1,10 @@
 <template>
-  <dropdown-row :colspan="colSpan" @click="toggleOpen" ref="dropdownItem">
+  <dropdown-row
+    :colspan="colSpan"
+    @click="toggleOpen"
+    ref="dropdownItem"
+    class="table-dropdown"
+  >
     <component-container :colSpan="colSpan">
       <component-item v-for="(item, index) in tableItems" :key="index">
         <template-button
@@ -122,7 +127,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

@@ -78,8 +78,16 @@ const TableContainer = styled.table`
   tbody {
     tr {
       &:hover {
-        background-color: ${(props) => props.theme.colors.grey5};
+        background-color: ${(props) => props.theme.colors.white};
         cursor: pointer;
+
+        .table-dropdown {
+          background-color: ${(props) => props.theme.color.grey5} !important;
+        }
+
+        input {
+          background-color: ${(props) => props.theme.color.grey5} !important;
+        }
       }
 
       td {
@@ -101,7 +109,7 @@ const TableContainer = styled.table`
   }
 
   td {
-    padding: 7px 15px;
+    padding: 7px 15px 7px 10px;
     border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
 
     &.empty {