@eturnity/eturnity_reusable_components 1.0.73 → 1.0.74

package/package.json

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

package/src/App.vue

@@ -23,22 +23,12 @@
       </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"
+      />
     </page-container>
   </ThemeProvider>
 </template>
@@ -49,18 +39,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 +52,7 @@ export default {
     PageContainer,
     MainTable,
     ThreeDots,
-    InputNumber,
-    InputWrapper,
-    DeleteIcon,
+    Toggle,
   },
   data() {
     return {
@@ -136,7 +118,7 @@ export default {
       return theme
     },
     onInputChange(event) {
-      this.inputValue = event
+      this.isChecked = event
     },
   },
 }

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

@@ -1,18 +1,14 @@
 <template>
   <container>
-    <flex-wrapper :size="size">
-      <label-text
-        v-if="labelAlign === 'left'"
-        :size="size"
-        @click="onToggleChange"
-        >{{ label }}</label-text
-      >
+    <flex-wrapper :size="size" @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"
       >
@@ -69,6 +65,7 @@ const FlexWrapper = styled("div", flexAttrs)`
       ? "10px"
       : "20px"};
   align-items: center;
+  cursor: pointer;
 `
 
 const toggleAttrs = { size: String, fontColor: String, disabled: Boolean }
@@ -146,7 +143,7 @@ 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"};
   background-color: ${(props) =>
@@ -164,7 +161,7 @@ const ToggleDot = styled("span", toggleProps)`
       ? props.size === "medium"
         ? "translateX(25px)"
         : props.size === "small"
-        ? "translateX(10px)"
+        ? "translateX(13px)"
         : "translateX(25px)"
       : "translateX(0)"};