@eturnity/eturnity_reusable_components 1.2.1-beta.1 → 1.2.1-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.1-beta.1",
+  "version": "1.2.1-beta.2",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -1,100 +1,158 @@
 <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
+              :colSpan="3"
+              :tableItems="getDropdownValues()"
+              @toggle-dropdown-open="toggleDropdownOpen()"
+              @item-selected="onItemSelected({ item: $event, index })"
+              :isOpen="isDropdownOpen()"
+              :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 />
+      <br />
+      <toggle
+        @on-toggle-change="onInputChange($event)"
+        :isChecked="inputValue"
+        label="My Label Text"
+        infoTextMessage="This is my test message"
+        infoTextAlign="right"
+        labelAlign="right"
+        :disabled="false"
+      />
+      <br />
       <input-number
-        :value="num"
-        @input-change="num = $event"
-        unitName="t"
-        id="biebie"
-        test="koko"
-        @keydown="keydownHandler"
+        placeholder="Enter distance"
+        :numberPrecision="2"
+        :value="inputValue"
+        @input-change="onInputChange($event)"
+      />
+      <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"
       />
+      <external-button text="Click me!" minWidth="500px" />
     </page-container>
   </ThemeProvider>
 </template>
 
 <script>
-import { ThemeProvider } from 'vue-styled-components'
-import theme from './assets/theme'
-import styled from 'vue-styled-components'
-import InputNumber from '@/components/inputs/inputNumber'
+import { ThemeProvider } from "vue-styled-components"
+import theme from "./assets/theme"
+import styled from "vue-styled-components"
+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 TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
   padding: 40px;
 `
 
 export default {
-  name: 'App',
+  name: "App",
   components: {
     ThemeProvider,
     PageContainer,
-    InputNumber
+    MainTable,
+    ThreeDots,
+    Toggle,
+    InputNumber,
+    PageSubtitle,
+    Spinner,
+    Checkbox,
+    ExternalButton,
     // TableDropdown,
   },
   data() {
     return {
-      num: 42,
       inputValue: null,
-      checkedOption: 'button_1',
+      checkedOption: "button_1",
       question: {
         number_format_precision: 4,
         number_min_allowed: 0,
         number_max_allowed: 10,
-        unit_short_name: 'cm'
+        unit_short_name: "cm",
       },
       dropdownOpen: false,
       isChecked: false,
       listOptions: [
         {
-          name: 'Option 1',
-          value: 'option_1',
-          disabled: true
+          name: "Option 1",
+          value: "option_1",
+          disabled: true,
         },
         {
-          name: 'Option 2',
-          value: 'option_2'
+          name: "Option 2",
+          value: "option_2",
         },
         {
-          name: 'Option 3',
-          value: 'option_3'
+          name: "Option 3",
+          value: "option_3",
         },
         {
-          name: 'Option 4',
-          value: 'option_4'
-        }
+          name: "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
+          display_name: "Test 1",
+          company_item_number: "123",
+          model: "BTB-2145 Long Text Long Text Long Text Long Text Long Text",
+          id: 1,
         },
         {
-          display_name: 'Test 2',
-          company_item_number: '1234',
-          model: 'BTB-123',
-          id: 2
+          display_name: "Test 2",
+          company_item_number: "1234",
+          model: "BTB-123",
+          id: 2,
         },
         {
-          display_name: 'Test 3',
-          company_item_number: '12345',
-          model: 'BTB-543',
-          id: 3
+          display_name: "Test 3",
+          company_item_number: "12345",
+          model: "BTB-543",
+          id: 3,
         },
         {
-          display_name: 'Test 4',
-          company_item_number: '123456',
-          model: 'BTB-4930',
-          id: 4
-        }
-      ]
+          display_name: "Test 4",
+          company_item_number: "123456",
+          model: "BTB-4930",
+          id: 4,
+        },
+      ],
     }
   },
   methods: {
-    keydownHandler(e) {
-      console.log('test', e)
-    },
     getTheme() {
       return theme
     },
@@ -105,7 +163,7 @@ export default {
       return this.dropdownOpen
     },
     onClickButton() {
-      console.log('Test')
+      console.log("Test")
     },
     toggleDropdownOpen() {
       this.dropdownOpen = !this.dropdownOpen
@@ -116,21 +174,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
     },
@@ -141,11 +199,11 @@ export default {
       } else if (row[value]) {
         item = row[value]
       } else {
-        item = '-'
+        item = "-"
       }
       return item
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -155,4 +213,4 @@ body {
   height: 100%;
   margin: 0;
 }
-</style>
+</style>

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

@@ -14,10 +14,9 @@
     </label-wrapper>
     <input-wrapper>
       <input-container
-        v-bind="$attrs"
         ref="inputField1"
         :hasUnit="unitName && !!unitName.length"
-        :placeholder="displayedPlaceholder"
+        :placeholder="placeholder"
         :isError="isError"
         :inputWidth="inputWidth"
         :minWidth="minWidth"
@@ -31,7 +30,6 @@
         :textAlign="textAlign"
         :fontSize="fontSize"
         :fontColor="fontColor"
-        v-on="$listeners"
       />
       <unit-container
         v-if="unitName && showLinearUnitName"
@@ -39,6 +37,11 @@
         :isError="isError"
         >{{ unitName }}</unit-container
       >
+      <icon
+        v-if="(isError || inputIcon) && !showLinearUnitName"
+        :class="inputIconImageClass"
+        :src="isError ? warningIcon : inputIconImage"
+      />
     </input-wrapper>
     <error-message v-if="isError">{{ errorMessage }}</error-message>
   </container>
@@ -76,7 +79,7 @@ import {
   numberToString
 } from '../../../helpers/numberConverter'
 import InfoText from '../../infoText'
-
+import warningIcon from '../../../assets/icons/error_icon.png'
 const Container = styled.div`
   width: 100%;
   position: relative;
@@ -127,6 +130,15 @@ const InputContainer = styled('input', inputProps)`
     outline: none;
   }
 `
+const IconProps = {
+  inputIconHeight: String
+}
+
+const Icon = styled('img', IconProps)`
+  position: absolute;
+  right: 10px;
+  top: 2px;
+`
 
 const InputWrapper = styled.span`
   position: relative;
@@ -153,10 +165,12 @@ const UnitContainer = styled('span', inputProps)`
 `
 
 const ErrorMessage = styled.div`
-  font-size: 14px;
+  margin-top: 5px;
+  line-height: 1;
+  text-transform: none;
+  font-size: 10px;
   color: ${(props) => props.theme.colors.red};
   position: absolute;
-  top: calc(100% + 1px);
 `
 
 const LabelWrapper = styled.div`
@@ -180,19 +194,14 @@ export default {
     ErrorMessage,
     LabelWrapper,
     LabelText,
-    InfoText
+    InfoText,
+    Icon
   },
-  inheritAttrs: false,
   data() {
     return {
       textInput: '',
-      isFocused: false
-    }
-  },
-  computed: {
-    displayedPlaceholder() {
-      if (this.placeholder) return this.placeholder
-      return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
+      isFocused: false,
+      warningIcon: warningIcon
     }
   },
   props: {
@@ -275,6 +284,21 @@ export default {
     numberToStringEnabled: {
       required: false,
       default: true
+    },
+    inputIcon: {
+      require: false,
+      type: Boolean,
+      default: false
+    },
+    inputIconImage: {
+      require: false,
+      type: String,
+      default: ''
+    },
+    inputIconImageClass: {
+      require: false,
+      type: Array,
+      default: () => []
     }
   },
   methods: {

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

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

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

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

package/src/components/spinner/index.vue

@@ -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;
@@ -37,32 +37,29 @@ const Container = styled.div`
   display: grid;
   align-items: center;
   justify-items: center;
-  position: absolute;
-  width: 100%;
-  height: 100%;
 `
 
 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: {
       required: false,
-      default: null
-    }
-  }
+      default: null,
+    },
+  },
 }
-</script>
+</script>