@eturnity/eturnity_reusable_components 1.0.54 → 1.0.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.0.54",
+  "version": "1.0.58",
   "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/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

@@ -171,7 +171,7 @@ const TableContainer = styled.table`
     }
 
     .text {
-      padding-left: 18px;
+      padding: 10px 0 10px 18px;
       color: ${(props) => props.theme.colors.black};
     }
 
@@ -180,7 +180,7 @@ const TableContainer = styled.table`
     }
 
     .icons-container {
-      width: auto;
+      width: 1%; // necessary so it doesn't take up too much white space
       display: table-cell;
       flex-wrap: nowrap;
       background-color: #fff;

package/src/components/threeDots/index.vue

@@ -146,6 +146,8 @@ const DotItem = styled.div`
 
 const DropdownContainer = styled.div`
   z-index: 99;
+  height: 200px;
+  margin-top: 50px;
   position: absolute;
   right: 20px;
   display: grid;