@eturnity/eturnity_reusable_components 1.2.17 → 1.2.18-v.5.39.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.17",
+  "version": "1.2.18-v.5.39.2",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -1,18 +1,20 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
-      <main-table titleText="My Table">
-        <thead>
-          <tr>
-            <th>Column 1</th>
-            <th>Column 2</th>
-            <th>Column 3</th>
-            <div />
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <!-- <table-dropdown
+      <br />
+      <modal backdrop="dark" :isLoading="false" :isOpen="true">
+        <main-table titleText="My Table">
+          <thead>
+            <tr>
+              <th>Column 1</th>
+              <th>Column 2</th>
+              <th>Column 3</th>
+              <div />
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <!-- <table-dropdown
               :colSpan="3"
               :tableItems="getDropdownValues()"
               @toggle-dropdown-open="toggleDropdownOpen()"
@@ -21,14 +23,14 @@
               :optionItems="itemOptions"
               :optionsDisplay="['display_name', 'company_item_number', 'model']"
             /> -->
-            <td>Test</td>
-            <div class="icons-container">
-              <three-dots :options="listOptions" :isLoading="false" />
-            </div>
-          </tr>
-        </tbody>
-      </main-table>
-      <br />
+              <td>Test</td>
+              <div class="icons-container">
+                <three-dots :options="listOptions" :isLoading="false" />
+              </div>
+            </tr>
+          </tbody>
+        </main-table>
+      </modal>
       <br />
       <toggle
         @on-toggle-change="onInputChange($event)"
@@ -47,11 +49,15 @@
         @input-change="onInputChange($event)"
       />
       <br />
-
-      <icon name="info" color="red" size="50px" />
-      <icon name="info" color="#F00" size="50px" />
-      <icon name="info" color="blue1" size="50px" />
-      <icon name="info" color="#00F" size="50px" />
+      <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"
+      />
+      <external-button text="Click me!" minWidth="500px" />
     </page-container>
   </ThemeProvider>
 </template>
@@ -60,8 +66,16 @@
 import { ThemeProvider } from 'vue-styled-components'
 import theme from './assets/theme'
 import styled from 'vue-styled-components'
-import icon from '@/components/icon'
+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 ExternalButton from '@/components/buttons/externalButton'
+import Modal from '@/components/modals/modal'
+// import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -72,8 +86,15 @@ export default {
   components: {
     ThemeProvider,
     PageContainer,
+    MainTable,
+    ThreeDots,
+    Toggle,
     InputNumber,
-    icon
+    PageSubtitle,
+    Spinner,
+    Checkbox,
+    ExternalButton,
+    Modal,
   },
   data() {
     return {
@@ -83,7 +104,7 @@ export default {
         number_format_precision: 4,
         number_min_allowed: 0,
         number_max_allowed: 10,
-        unit_short_name: 'cm'
+        unit_short_name: 'cm',
       },
       dropdownOpen: false,
       isChecked: false,
@@ -91,47 +112,47 @@ export default {
         {
           name: 'Option 1',
           value: 'option_1',
-          disabled: true
+          disabled: true,
         },
         {
           name: 'Option 2',
-          value: 'option_2'
+          value: 'option_2',
         },
         {
           name: 'Option 3',
-          value: 'option_3'
+          value: 'option_3',
         },
         {
           name: 'Option 4',
-          value: 'option_4'
-        }
+          value: 'option_4',
+        },
       ],
       itemOptions: [
         {
           display_name: 'Test 1',
           company_item_number: '123',
           model: 'BTB-2145 Long Text Long Text Long Text Long Text Long Text',
-          id: 1
+          id: 1,
         },
         {
           display_name: 'Test 2',
           company_item_number: '1234',
           model: 'BTB-123',
-          id: 2
+          id: 2,
         },
         {
           display_name: 'Test 3',
           company_item_number: '12345',
           model: 'BTB-543',
-          id: 3
+          id: 3,
         },
         {
           display_name: 'Test 4',
           company_item_number: '123456',
           model: 'BTB-4930',
-          id: 4
-        }
-      ]
+          id: 4,
+        },
+      ],
     }
   },
   methods: {
@@ -156,21 +177,21 @@ export default {
         {
           value: this.getComponentInfo({
             row: this.itemOptions[0],
-            value: 'display_name'
-          })
+            value: 'display_name',
+          }),
         },
         {
           value: this.getComponentInfo({
             row: this.itemOptions[0],
-            value: 'company_item_number'
-          })
+            value: 'company_item_number',
+          }),
         },
         {
           value: this.getComponentInfo({
             row: this.itemOptions[0],
-            value: 'model'
-          })
-        }
+            value: 'model',
+          }),
+        },
       ]
       return items
     },
@@ -184,8 +205,8 @@ export default {
         item = '-'
       }
       return item
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -195,4 +216,4 @@ body {
   height: 100%;
   margin: 0;
 }
-</style>
+</style>

package/src/assets/theme.js

@@ -1,34 +1,34 @@
 const theme = {
   colors: {
-    primary: "#48a2d0",
-    secondary: "#fdb813",
-    tertiary: "#d5d5d5",
-    black: "#353535",
-    yellow: "#fdb813",
-    darkGray: "#818181",
-    gray1: "#666",
-    mediumGray: "#d5d5d5",
-    lightGray: "#f2f2f2",
-    white: "#fff",
-    blue: "#48a2d0",
-    red: "#ff5656",
-    blue1: "#e4efff",
-    grey1: "#666",
-    grey2: "#c4c4c4",
-    grey3: "#b2b9c5",
-    grey4: "#ebeef4",
-    grey5: "#fafafa",
-    green: "#99db0c",
-    disabled: "#dfe1e1",
+    primary: '#48a2d0',
+    secondary: '#fdb813',
+    tertiary: '#d5d5d5',
+    black: '#353535',
+    yellow: '#fdb813',
+    darkGray: '#818181',
+    gray1: '#666',
+    mediumGray: '#d5d5d5',
+    lightGray: '#f2f2f2',
+    white: '#fff',
+    blue: '#48a2d0',
+    red: '#ff5656',
+    blue1: '#e4efff',
+    grey1: '#666',
+    grey2: '#c4c4c4',
+    grey3: '#b2b9c5',
+    grey4: '#dee2eb',
+    grey5: '#fafafa',
+    green: '#99db0c',
+    disabled: '#dfe1e1'
   },
   screen: {
-    mobileSmall: "345px",
-    mobile: "425px",
-    mobileLarge: "530px",
-    tablet: "768px",
-    tabletLarge: "950px",
+    mobileSmall: '345px',
+    mobile: '425px',
+    mobileLarge: '530px',
+    tablet: '768px',
+    tabletLarge: '950px'
   },
-  borderRadius: "4px",
+  borderRadius: '4px'
 }
 
 export default theme

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

@@ -3,15 +3,18 @@
     :isOpen="isOpen"
     :class="{ visible: isOpen, hidden: !isOpen }"
     @click.native="onOutsideClose()"
+    :backdrop="backdrop"
   >
     <modal-container @click.stop>
-      <spinner v-if="isLoading" size="50px" :fullWidth="true" />
+      <spinner v-if="isLoading" size="50px" :limitedToModal="true" />
+      <content-container :visible="!isLoading">
+        <slot />
+      </content-container>
       <close-button
         v-if="!hideClose"
         @click.native="onCloseModal()"
         class="close"
       />
-      <slot />
     </modal-container>
   </page-wrapper>
 </template>
@@ -28,7 +31,12 @@ import styled from 'vue-styled-components'
 import CloseButton from '../../buttons/closeButton'
 import Spinner from '../../spinner'
 
-const pageAttrs = { isOpen: Boolean }
+const contentAttrs = { visible: Boolean }
+const ContentContainer = styled('div', contentAttrs)`
+  visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
+`
+
+const pageAttrs = { isOpen: Boolean, backdrop: String }
 const PageWrapper = styled('div', pageAttrs)`
   position: fixed;
   display: grid;
@@ -36,7 +44,10 @@ const PageWrapper = styled('div', pageAttrs)`
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: ${(props) =>
+    props.backdrop == 'dark'
+      ? 'rgba(0, 0, 0, 0.4)'
+      : 'rgba(255, 255, 255, 0.9)'};
   z-index: 99999;
   overflow: auto;
 
@@ -98,7 +109,8 @@ export default {
     PageWrapper,
     ModalContainer,
     CloseButton,
-    Spinner
+    Spinner,
+    ContentContainer
   },
   props: {
     isOpen: {
@@ -116,6 +128,10 @@ export default {
     hideClose: {
       required: false,
       default: false
+    },
+    backdrop: {
+      required: false,
+      default: 'white'
     }
   },
   methods: {
@@ -135,4 +151,4 @@ export default {
     }
   }
 }
-</script>
+</script>

package/src/components/modals/modal/modal.stories.js

@@ -26,5 +26,6 @@ export const Default = Template.bind({
   preventOutsideClose: true,
   isLoading: false,
   hideClose: false,
-});
+  backdrop: 'dark',
+})
 Default.args = {};

package/src/components/spinner/index.vue

@@ -7,7 +7,7 @@
       />
     </container>
   </spinner-container>
-  <container v-else>
+  <container v-else :limitedToModal="limitedToModal">
     <spinner-wrapper
       :size="size"
       :src="require('../../assets/icons/black_spinner.svg')"
@@ -18,7 +18,7 @@
 <script>
 // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
 // <spinner size="30px" />
-import styled from "vue-styled-components"
+import styled from 'vue-styled-components'
 
 const SpinnerContainer = styled.div`
   position: fixed;
@@ -32,34 +32,41 @@ const SpinnerContainer = styled.div`
   justify-items: center;
   z-index: 100;
 `
-
-const Container = styled.div`
+const containerAttrs = { limitedToModal: Boolean }
+const Container = styled('div', containerAttrs)`
   display: grid;
   align-items: center;
   justify-items: center;
+  position: ${(props) => (props.limitedToModal ? 'absolute' : 'inherit')};
+  height: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
+  width: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
 `
 
 const spinnerAttrs = { size: String }
-const SpinnerWrapper = styled("img", spinnerAttrs)`
-  width: ${(props) => (props.size ? props.size : "60px")};
+const SpinnerWrapper = styled('img', spinnerAttrs)`
+  width: ${(props) => (props.size ? props.size : '60px')};
 `
 
 export default {
-  name: "spinner",
+  name: 'spinner',
   components: {
     Container,
     SpinnerWrapper,
-    SpinnerContainer,
+    SpinnerContainer
   },
   props: {
     fullWidth: {
       required: false,
-      default: false,
+      default: false
     },
-    size: {
+    limitedToModal: {
       required: false,
-      default: null,
+      default: false
     },
-  },
+    size: {
+      required: false,
+      default: null
+    }
+  }
 }
-</script>
+</script>