@eturnity/eturnity_reusable_components 1.0.38 → 1.0.39

package/package.json

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

package/src/App.vue

@@ -23,11 +23,16 @@
           </tr>
         </tbody>
       </main-table>
-      <checkbox
-        :isChecked="false"
-        @on-event-handler="onInputChange($event)"
+      <toggle
+        @on-toggle-change="onInputChange($event)"
+        :isChecked="inputValue"
+        size="medium"
+        :disabled="true"
+      />
+      <toggle
+        @on-toggle-change="onInputChange($event)"
+        :isChecked="inputValue"
         size="small"
-        :isDisabled="false"
       />
     </page-container>
   </ThemeProvider>
@@ -39,7 +44,7 @@ import theme from "./assets/theme"
 import styled from "vue-styled-components"
 import MainTable from "@/components/tables/mainTable"
 import ThreeDots from "@/components/threeDots"
-import Checkbox from "@/components/inputs/checkbox"
+import Toggle from "@/components/inputs/toggle"
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -52,7 +57,7 @@ export default {
     PageContainer,
     MainTable,
     ThreeDots,
-    Checkbox,
+    Toggle,
   },
   data() {
     return {

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

@@ -11,12 +11,14 @@
         tabindex="0"
         @click="onToggleChange"
         @keydown.space.prevent="onToggleChange"
+        :disabled="disabled"
       >
         <toggle-background :backgroundColor="backgroundColor" />
         <toggle-dot
           :isChecked="isChecked"
           :toggleColor="toggleColor"
           :size="size"
+          :disabled="disabled"
         />
       </toggle-wrapper>
       <label-text
@@ -62,7 +64,7 @@ const FlexWrapper = styled("div", flexAttrs)`
   align-items: center;
 `
 
-const toggleAttrs = { size: String, fontColor: String }
+const toggleAttrs = { size: String, fontColor: String, disabled: Boolean }
 const LabelText = styled("div", toggleAttrs)`
   color: ${(props) =>
     props.fontColor ? props.fontColor : props.theme.colors.darkGray};
@@ -77,7 +79,7 @@ const LabelText = styled("div", toggleAttrs)`
 const ToggleWrapper = styled("span", toggleAttrs)`
   display: inline-block;
   position: relative;
-  cursor: pointer;
+  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
   width: ${(props) =>
     props.size === "medium"
       ? "50px"
@@ -115,7 +117,12 @@ const ToggleBackground = styled("span", backroundAttrs)`
   transition: 0.4s ease;
 `
 
-const toggleProps = { isChecked: Boolean, toggleColor: String, size: String }
+const toggleProps = {
+  isChecked: Boolean,
+  toggleColor: String,
+  size: String,
+  disabled: Boolean,
+}
 const ToggleDot = styled("span", toggleProps)`
   position: absolute;
   height: ${(props) =>
@@ -134,7 +141,9 @@ const ToggleDot = styled("span", toggleProps)`
   bottom: ${(props) =>
     props.size === "medium" ? "5px" : props.size === "small" ? "3px" : "5px"};
   background-color: ${(props) =>
-    props.isChecked
+    props.disabled
+      ? props.theme.colors.disabled
+      : props.isChecked
       ? props.toggleColor
         ? props.toggleColor
         : props.theme.colors.primary
@@ -144,17 +153,17 @@ const ToggleDot = styled("span", toggleProps)`
   transform: ${(props) =>
     props.isChecked
       ? props.size === "medium"
-        ? "translateX(45px)"
+        ? "translateX(25px)"
         : props.size === "small"
         ? "translateX(10px)"
-        : "translateX(45px)"
+        : "translateX(25px)"
       : "translateX(0)"};
 
   @media (max-width: ${(props) => props.theme.screen.mobile}) {
     height: 24px;
     width: 24px;
     transform: ${(props) =>
-      props.isChecked ? "translateX(45px)" : "translateX(0)"};
+      props.isChecked ? "translateX(25px)" : "translateX(0)"};
     bottom: 8px;
   }
 `
@@ -195,9 +204,16 @@ export default {
     fontColor: {
       required: false,
     },
+    disabled: {
+      required: false,
+      default: false,
+    },
   },
   methods: {
     onToggleChange() {
+      if (this.disabled) {
+        return
+      }
       this.$emit("on-toggle-change", !this.isChecked)
     },
   },

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

@@ -1,6 +1,6 @@
 <!-- This is just an example how to use mainTable with collective positioning -->
 <!-- <template>
-  <draggable-table>
+  <main-table>
     <thead>
       <tr>
         <div />
@@ -156,13 +156,13 @@
       <td />
       <div />
     </tr>
-  </draggable-table>
+  </main-table>
 </template>
 
 <script>
 import draggable from "vuedraggable"
 import styled from "vue-styled-components"
-import DraggableTable from "@/components/reusable-components/tables/DraggableTable"
+import MainTable from "@/components/reusable-components/tables/MainTable"
 import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
 import DeleteIcon from "@/components/reusable-components/DeleteIcon"
 import ThreeDots from "@/components/reusable-components/ThreeDots"
@@ -190,7 +190,7 @@ export default {
   components: {
     DraggableContainer,
     ParentContainer,
-    DraggableTable,
+    MainTable,
     InputText,
     ChildrenWrapper,
     DeleteIcon,