@eturnity/eturnity_reusable_components 1.0.23 → 1.0.27

package/package.json

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

package/src/App.vue

@@ -19,6 +19,12 @@
           </tr>
         </tbody>
       </main-table>
+      <toggle
+        @on-toggle-change="isChecked = $event"
+        :isChecked="isChecked"
+        label="My Label Text"
+        size="small"
+      />
     </page-container>
   </ThemeProvider>
 </template>
@@ -28,6 +34,7 @@ import { ThemeProvider } from "vue-styled-components"
 import theme from "./assets/theme"
 import styled from "vue-styled-components"
 import MainTable from "@/components/tables/mainTable"
+import Toggle from "@/components/inputs/toggle"
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -39,6 +46,7 @@ export default {
     ThemeProvider,
     PageContainer,
     MainTable,
+    Toggle,
   },
   data() {
     return {
@@ -50,6 +58,7 @@ export default {
         number_max_allowed: 10,
         unit_short_name: "cm",
       },
+      isChecked: false,
     }
   },
   methods: {

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

@@ -78,8 +78,10 @@ const Container = styled("label", containerAttrs)`
     border-radius: 4px;
     border: 1px solid
       ${(props) =>
-        props.isChecked && props.backgroundColor
+        props.isChecked
           ? props.backgroundColor
+            ? props.backgroundColor
+            : props.theme.colors.green
           : props.theme.colors.mediumGray};
 
     &:after {

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

@@ -1,17 +1,30 @@
 <template>
   <container>
-    <flex-wrapper>
+    <flex-wrapper :size="size">
+      <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"
       >
-        <toggle-background />
-        <toggle-dot :isChecked="isChecked" :toggleColor="toggleColor" />
+        <toggle-background :backgroundColor="backgroundColor" />
+        <toggle-dot
+          :isChecked="isChecked"
+          :toggleColor="toggleColor"
+          :size="size"
+        />
       </toggle-wrapper>
-      <label-text>{{ label }}</label-text>
+      <label-text
+        v-if="labelAlign === 'right'"
+        :size="size"
+        :fontColor="fontColor"
+        >{{ label }}</label-text
+      >
     </flex-wrapper>
   </container>
 </template>
@@ -24,6 +37,10 @@
 //   :isChecked="toggleValue" // Boolean
 //   label="My Label Text"
 //   toggleColor="red"
+//   size="small" // small, medium
+//   backgroundColor="blue"
+//   labelAlign="right"
+//   fontColor="black"
 // />
 
 import styled from "vue-styled-components"
@@ -32,23 +49,47 @@ const Container = styled.div`
   display: inline-block;
 `
 
-const FlexWrapper = styled.div`
+const flexAttrs = { size: String }
+const FlexWrapper = styled("div", flexAttrs)`
   display: grid;
   grid-template-columns: auto 1fr;
-  grid-gap: 20px;
+  grid-gap: ${(props) =>
+    props.size === "medium"
+      ? "20px"
+      : props.size === "small"
+      ? "10px"
+      : "20px"};
   align-items: center;
 `
 
-const LabelText = styled.div`
-  color: ${(props) => props.theme.colors.darkGray};
+const toggleAttrs = { size: String, fontColor: String }
+const LabelText = styled("div", toggleAttrs)`
+  color: ${(props) =>
+    props.fontColor ? props.fontColor : props.theme.colors.darkGray};
+  font-size: ${(props) =>
+    props.size === "medium"
+      ? "16px"
+      : props.size === "small"
+      ? "12px"
+      : "16px"};
 `
 
-const ToggleWrapper = styled.span`
+const ToggleWrapper = styled("span", toggleAttrs)`
   display: inline-block;
   position: relative;
   cursor: pointer;
-  width: 50px;
-  height: 24px;
+  width: ${(props) =>
+    props.size === "medium"
+      ? "50px"
+      : props.size === "small"
+      ? "29px"
+      : "50px"};
+  height: ${(props) =>
+    props.size === "medium"
+      ? "24px"
+      : props.size === "small"
+      ? "16px"
+      : "24px"};
   border-radius: 9px;
 
   &:focus {
@@ -61,22 +102,37 @@ const ToggleWrapper = styled.span`
   }
 `
 
-const ToggleBackground = styled.span`
+const backroundAttrs = { backgroundColor: String }
+const ToggleBackground = styled("span", backroundAttrs)`
   display: inline-block;
   border-radius: 100px;
   height: 100%;
   width: 100%;
-  background-color: ${(props) => props.theme.colors.lightGray};
+  background-color: ${(props) =>
+    props.backgroundColor
+      ? props.backgroundColor
+      : props.theme.colors.lightGray};
   transition: 0.4s ease;
 `
 
-const toggleProps = { isChecked: Boolean, toggleColor: String }
+const toggleProps = { isChecked: Boolean, toggleColor: String, size: String }
 const ToggleDot = styled("span", toggleProps)`
   position: absolute;
-  height: 14px;
-  width: 14px;
-  left: 5px;
-  bottom: 5px;
+  height: ${(props) =>
+    props.size === "medium"
+      ? "14px"
+      : props.size === "small"
+      ? "10px"
+      : "14px"};
+  width: ${(props) =>
+    props.size === "medium"
+      ? "14px"
+      : props.size === "small"
+      ? "10px"
+      : "14px"};
+  left: 5px
+  bottom: ${(props) =>
+    props.size === "medium" ? "5px" : props.size === "small" ? "3px" : "5px"};
   background-color: ${(props) =>
     props.isChecked
       ? props.toggleColor
@@ -86,7 +142,13 @@ const ToggleDot = styled("span", toggleProps)`
   border-radius: 100%;
   transition: transform 0.4s ease;
   transform: ${(props) =>
-    props.isChecked ? "translateX(26px)" : "translateX(0)"};
+    props.isChecked
+      ? props.size === "medium"
+        ? "translateX(45px)"
+        : props.size === "small"
+        ? "translateX(10px)"
+        : "translateX(45px)"
+      : "translateX(0)"};
 
   @media (max-width: ${(props) => props.theme.screen.mobile}) {
     height: 24px;
@@ -119,6 +181,20 @@ export default {
     toggleColor: {
       required: false,
     },
+    backgroundColor: {
+      required: false,
+    },
+    size: {
+      required: false,
+      default: "medium",
+    },
+    labelAlign: {
+      required: false,
+      default: "right",
+    },
+    fontColor: {
+      required: false,
+    },
   },
   methods: {
     onToggleChange() {

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

@@ -155,7 +155,7 @@ const TableContainer = styled.table`
 
     .icons-container {
       width: 100%;
-      display: inline-flex;
+      display: table-cell;
       flex-wrap: nowrap;
       background-color: #fff;
       vertical-align: middle;

package/src/components/threeDots/index.vue

@@ -82,8 +82,8 @@ const DotItem = styled.div`
 
 const OptionsContainer = styled.div`
   z-index: 99;
-  position: absolute;
-  right: 0;
+  position: fixed;
+  right: 60px;
   border: 1px solid
     ${(props) =>
       props.buttonColor ? props.buttonColor : props.theme.colors.grey3};