@eturnity/eturnity_reusable_components 1.0.57 → 1.0.61

package/package.json

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

package/src/App.vue

@@ -24,7 +24,12 @@
       </main-table>
       <br />
       <br />
-      <search-input :value="inputValue" @on-change="onInputChange" :disabled="false" placeholder="Search..." />
+      <toggle
+        @on-toggle-change="onInputChange($event)"
+        :isChecked="inputValue"
+        label="My Label Text"
+        labelAlign="right"
+      />
     </page-container>
   </ThemeProvider>
 </template>
@@ -35,7 +40,7 @@ import theme from "./assets/theme"
 import styled from "vue-styled-components"
 import MainTable from "@/components/tables/mainTable"
 import ThreeDots from "@/components/threeDots"
-import SearchInput from "@/components/inputs/searchInput"
+import Toggle from "@/components/inputs/toggle"
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -48,11 +53,11 @@ export default {
     PageContainer,
     MainTable,
     ThreeDots,
-    SearchInput,
+    Toggle,
   },
   data() {
     return {
-      inputValue: "",
+      inputValue: true,
       checkedOption: "button_1",
       question: {
         number_format_precision: 4,

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

@@ -49,7 +49,7 @@ const Container = styled("label", containerAttrs)`
   align-content: center;
   color: ${(props) => props.theme.colors.black};
   position: relative;
-  padding-left: 42px;
+  /* padding-left: 42px; */
   margin-bottom: 12px;
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   font-size: 16px;

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

@@ -13,7 +13,10 @@
         @keydown.space.prevent="onToggleChange"
         :disabled="disabled"
       >
-        <toggle-background :backgroundColor="backgroundColor" />
+        <toggle-background
+          :backgroundColor="backgroundColor"
+          :isChecked="isChecked"
+        />
         <toggle-dot
           :isChecked="isChecked"
           :toggleColor="toggleColor"
@@ -43,6 +46,7 @@
 //   backgroundColor="blue"
 //   labelAlign="right"
 //   fontColor="black"
+//   :disabled="true"
 // />
 
 import styled from "vue-styled-components"
@@ -72,7 +76,7 @@ const LabelText = styled("div", toggleAttrs)`
     props.size === "medium"
       ? "16px"
       : props.size === "small"
-      ? "12px"
+      ? "13px"
       : "16px"};
 `
 
@@ -104,16 +108,18 @@ const ToggleWrapper = styled("span", toggleAttrs)`
   }
 `
 
-const backroundAttrs = { backgroundColor: String }
-const ToggleBackground = styled("span", backroundAttrs)`
+const backgroundAttrs = { backgroundColor: String, isChecked: Boolean }
+const ToggleBackground = styled("span", backgroundAttrs)`
   display: inline-block;
   border-radius: 100px;
   height: 100%;
   width: 100%;
   background-color: ${(props) =>
-    props.backgroundColor
+    props.isChecked
       ? props.backgroundColor
-      : props.theme.colors.lightGray};
+        ? props.backgroundColor
+        : props.theme.colors.green
+      : props.theme.colors.grey3};
   transition: 0.4s ease;
 `
 
@@ -137,7 +143,7 @@ const ToggleDot = styled("span", toggleProps)`
       : props.size === "small"
       ? "10px"
       : "14px"};
-  left: 5px
+  left: 4px
   bottom: ${(props) =>
     props.size === "medium" ? "5px" : props.size === "small" ? "3px" : "5px"};
   background-color: ${(props) =>
@@ -146,8 +152,8 @@ const ToggleDot = styled("span", toggleProps)`
       : props.isChecked
       ? props.toggleColor
         ? props.toggleColor
-        : props.theme.colors.primary
-      : props.theme.colors.mediumGray};
+        : props.theme.colors.white
+      : props.theme.colors.white};
   border-radius: 100%;
   transition: transform 0.4s ease;
   transform: ${(props) =>
@@ -195,7 +201,7 @@ export default {
     },
     size: {
       required: false,
-      default: "medium",
+      default: "small",
     },
     labelAlign: {
       required: false,

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

@@ -81,11 +81,15 @@ const TableContainer = styled.table`
         background-color: ${(props) => props.theme.colors.grey5};
         cursor: pointer;
       }
+
+      td {
+        height: 40px;
+      }
     }
   }
 
   th {
-    padding: 12px 20px;
+    padding: 11px 15px;
     background-color: ${(props) => props.theme.colors.blue1};
 
     .ordering {
@@ -152,6 +156,15 @@ const TableContainer = styled.table`
         text-align: right;
       }
     }
+
+    &.checkbox {
+      padding: 7px 15px !important;
+      width: 40px;
+    }
+
+    &.checkbox-header {
+      width: 40px;
+    }
   }
 
   tr {