@eturnity/eturnity_reusable_components 1.1.58 → 1.1.61

package/package.json

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

package/src/App.vue

@@ -46,6 +46,13 @@
       />
       <br />
       <page-subtitle text="My Subtitle" infoText="My info Text" />
+      <spinner size="30px" />
+      <checkbox
+        label="Do you accept the Terms?"
+        :isChecked="true"
+        size="small"
+        :isDisabled="false"
+      />
     </page-container>
   </ThemeProvider>
 </template>
@@ -58,7 +65,9 @@ import MainTable from "@/components/tables/mainTable"
 import ThreeDots from "@/components/threeDots"
 import Toggle from "@/components/inputs/toggle"
 import InputNumber from "@/components/inputs/inputNumber"
+import Checkbox from "@/components/inputs/checkbox"
 import PageSubtitle from "@/components/pageSubtitle"
+import Spinner from "@/components/spinner"
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -75,6 +84,8 @@ export default {
     Toggle,
     InputNumber,
     PageSubtitle,
+    Spinner,
+    Checkbox,
     // TableDropdown,
   },
   data() {

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

@@ -7,13 +7,16 @@
       :backgroundColor="backgroundColor"
       :isChecked="isChecked"
       :isDisabled="isDisabled"
-      >{{ label }}
+    >
       <input-checkbox
         type="checkbox"
         :checked="isChecked"
         @change="onChangeHandler(!isChecked)"
       />
-      <span class="checkmark"></span>
+      <div>
+        <span class="checkmark"></span>
+      </div>
+      <label-text v-if="!!label.length">{{ label }}</label-text>
     </container>
   </component-wrapper>
 </template>
@@ -34,6 +37,7 @@ import styled from "vue-styled-components"
 
 const ComponentWrapper = styled.div`
   display: inline-block;
+  min-height: 18px;
 `
 
 const containerAttrs = {
@@ -46,20 +50,18 @@ const containerAttrs = {
 }
 const Container = styled("label", containerAttrs)`
   display: grid;
-  height: ${(props) => (props.hasLabel ? "28px" : "auto")};
+  grid-template-columns: ${(props) => (props.hasLabel ? "18px auto" : "18px")};
+  grid-gap: 16px;
   align-content: center;
+  /* align-items: center; */
   color: ${(props) => props.theme.colors.black};
   position: relative;
-  /* padding-left: 42px; */
-  margin-bottom: 12px;
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   font-size: 16px;
   user-select: none;
 
   .checkmark {
     position: absolute;
-    top: 0;
-    left: 0;
     height: ${(props) =>
       props.size === "medium"
         ? "25px"
@@ -131,12 +133,20 @@ const InputCheckbox = styled.input`
   width: 0;
 `
 
+const LabelText = styled.div`
+  font-size: 13px;
+  display: grid;
+  align-items: center;
+  min-height: 18px;
+`
+
 export default {
   name: "checkbox",
   components: {
     ComponentWrapper,
     Container,
     InputCheckbox,
+    LabelText,
   },
   props: {
     label: {

package/src/components/modals/modal/index.vue

@@ -5,6 +5,7 @@
     @click.native="onOutsideClose()"
   >
     <modal-container @click.stop>
+      <spinner v-if="isLoading" size="50px" :fullWidth="true" />
       <close-button @click.native="onCloseModal()" class="close" />
       <slot />
     </modal-container>
@@ -15,12 +16,13 @@
 // import Modal from "@eturnity/eturnity_reusable_components/src/components/modals/modal"
 // This is a more flexible modal box, where the parent can decide how the body of the modal looks
 // To use:
-// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :preventOutsideClose="true">
+// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :preventOutsideClose="true" :isLoading="true">
 //   <div>Data....</div>
 // </modal>
 
 import styled from "vue-styled-components"
 import CloseButton from "../../buttons/closeButton"
+import Spinner from "../../spinner"
 
 const pageAttrs = { isOpen: Boolean }
 const PageWrapper = styled("div", pageAttrs)`
@@ -92,6 +94,7 @@ export default {
     PageWrapper,
     ModalContainer,
     CloseButton,
+    Spinner,
   },
   props: {
     isOpen: {
@@ -102,6 +105,10 @@ export default {
       required: false,
       default: false,
     },
+    isLoading: {
+      required: false,
+      default: false,
+    },
   },
   methods: {
     onCloseModal() {

package/src/components/spinner/index.vue

@@ -1,16 +1,23 @@
 <template>
   <spinner-container v-if="fullWidth">
     <container>
-      <spinner-wrapper :src="require('../../assets/icons/black_spinner.svg')" />
+      <spinner-wrapper
+        :size="size"
+        :src="require('../../assets/icons/black_spinner.svg')"
+      />
     </container>
   </spinner-container>
   <container v-else>
-    <spinner-wrapper :src="require('../../assets/icons/black_spinner.svg')" />
+    <spinner-wrapper
+      :size="size"
+      :src="require('../../assets/icons/black_spinner.svg')"
+    />
   </container>
 </template>
 
 <script>
 // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
+// <spinner size="30px" />
 import styled from "vue-styled-components"
 
 const SpinnerContainer = styled.div`
@@ -32,8 +39,9 @@ const Container = styled.div`
   justify-items: center;
 `
 
-const SpinnerWrapper = styled.img`
-  width: 60px;
+const spinnerAttrs = { size: String }
+const SpinnerWrapper = styled("img", spinnerAttrs)`
+  width: ${(props) => (props.size ? props.size : "60px")};
 `
 
 export default {
@@ -48,6 +56,10 @@ export default {
       required: false,
       default: false,
     },
+    size: {
+      required: false,
+      default: null,
+    },
   },
 }
 </script>