@eturnity/eturnity_reusable_components 1.0.73 → 1.0.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.0.73",
+  "version": "1.0.77",
   "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>
@@ -23,22 +36,13 @@
       </main-table>
       <br />
       <br />
-      <input-wrapper>
-        <input-number
-          placeholder="Enter Value"
-          unitName="kWh"
-          :value="inputValue"
-          @input-change="onInputChange($event)"
-          textAlign="left"
-          fontSize="13px"
-          labelText="Number of Modules"
-          labelInfoText="Here is some information for you..."
-          :disabled="true"
-        />
-      </input-wrapper>
-      <br />
-      <br />
-      <delete-icon />
+      <toggle
+        @on-toggle-change="onInputChange($event)"
+        :isChecked="isChecked"
+        label="My Label Text"
+        labelAlign="right"
+        :disabled="true"
+      />
     </page-container>
   </ThemeProvider>
 </template>
@@ -49,18 +53,12 @@ import theme from "./assets/theme"
 import styled from "vue-styled-components"
 import MainTable from "@/components/tables/mainTable"
 import ThreeDots from "@/components/threeDots"
-import InputNumber from "@/components/inputs/inputNumber"
-import DeleteIcon from "@/components/deleteIcon"
+import Toggle from "@/components/inputs/toggle"
 
 const PageContainer = styled.div`
   padding: 40px;
 `
 
-const InputWrapper = styled.div`
-  height: 36px;
-  width: 180px;
-`
-
 export default {
   name: "App",
   components: {
@@ -68,9 +66,7 @@ export default {
     PageContainer,
     MainTable,
     ThreeDots,
-    InputNumber,
-    InputWrapper,
-    DeleteIcon,
+    Toggle,
   },
   data() {
     return {
@@ -136,7 +132,7 @@ export default {
       return theme
     },
     onInputChange(event) {
-      this.inputValue = event
+      this.isChecked = event
     },
   },
 }

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,24 +1,23 @@
 <template>
   <container>
-    <flex-wrapper :size="size">
-      <label-text
-        v-if="labelAlign === 'left'"
-        :size="size"
-        @click="onToggleChange"
-        >{{ label }}</label-text
-      >
+    <flex-wrapper :size="size" :disabled="disabled" @click="onToggleChange">
+      <label-text v-if="labelAlign === 'left'" :size="size">{{
+        label
+      }}</label-text>
       <toggle-wrapper
         role="checkbox"
         :checked="isChecked"
         :size="size"
         tabindex="0"
-        @click="onToggleChange"
         @keydown.space.prevent="onToggleChange"
         :disabled="disabled"
+        :backgroundColor="backgroundColor"
+        :isChecked="isChecked"
       >
         <toggle-background
           :backgroundColor="backgroundColor"
           :isChecked="isChecked"
+          :disabled="disabled"
         />
         <toggle-dot
           :isChecked="isChecked"
@@ -58,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;
@@ -69,9 +68,16 @@ const FlexWrapper = styled("div", flexAttrs)`
       ? "10px"
       : "20px"};
   align-items: center;
+  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};
@@ -85,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) =>
@@ -111,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
@@ -146,9 +167,9 @@ const ToggleDot = styled("span", toggleProps)`
       : props.size === "small"
       ? "10px"
       : "14px"};
-  left: 4px
+  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
@@ -164,7 +185,7 @@ const ToggleDot = styled("span", toggleProps)`
       ? props.size === "medium"
         ? "translateX(25px)"
         : props.size === "small"
-        ? "translateX(10px)"
+        ? "translateX(13px)"
         : "translateX(25px)"
       : "translateX(0)"};