@eturnity/eturnity_reusable_components 1.2.16-QA03-23092022.0 → 1.2.16-QA03-23092022.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.16-QA03-23092022.0",
+  "version": "1.2.16-QA03-23092022.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -1,38 +1,14 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
-      <br />
       <input-number
-        :value="inputValue"
-        @input-change="inputValue = $event"
-        inputWidth="250px"
-        slotSize="50%"
-        ><InputAnnexContainer>
-          <span>123m2</span>
-          <info-text size="10px" text="infoText ceci est le text"></info-text>
-        </InputAnnexContainer>
-      </input-number>
-      <input-number
-        :value="inputValue"
-        @input-change="inputValue = $event"
-        inputWidth="250px"
-        slotSize="50%"
-        :isError="true"
-        ><InputAnnexContainer>
-          <span>123m2</span>
-          <info-text size="15px" text="infoText ceci est le text"></info-text>
-        </InputAnnexContainer>
-      </input-number>
-      <br />
-      <br />
-      <input-number
-        placeholder="Enter distance"
-        :numberPrecision="2"
-        :value="inputValue"
-        @input-change="onInputChange($event)"
-        >unit</input-number
-      >
-      <br />
+        :value="num"
+        @input-change="num = $event"
+        unitName="t"
+        id="biebie"
+        test="koko"
+        @keydown="keydownHandler"
+      />
     </page-container>
   </ThemeProvider>
 </template>
@@ -42,13 +18,6 @@ import { ThemeProvider } from 'vue-styled-components'
 import theme from './assets/theme'
 import styled from 'vue-styled-components'
 import InputNumber from '@/components/inputs/inputNumber'
-import infoText from '@/components/infoText'
-// import TableDropdown from "@/components/tableDropdown"
-const InputAnnexContainer = styled.div`
-  display: grid;
-  grid-template-columns: auto auto;
-  grid-gap: 10px;
-`
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -59,13 +28,12 @@ export default {
   components: {
     ThemeProvider,
     PageContainer,
-    InputNumber,
-    infoText,
-    InputAnnexContainer
+    InputNumber
     // TableDropdown,
   },
   data() {
     return {
+      num: 42,
       inputValue: null,
       checkedOption: 'button_1',
       question: {
@@ -124,6 +92,9 @@ export default {
     }
   },
   methods: {
+    keydownHandler(e) {
+      console.log('test', e)
+    },
     getTheme() {
       return theme
     },

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

@@ -14,9 +14,10 @@
     </label-wrapper>
     <input-wrapper>
       <input-container
+        v-bind="$attrs"
         ref="inputField1"
         :hasUnit="unitName && !!unitName.length"
-        :placeholder="placeholder"
+        :placeholder="displayedPlaceholder"
         :isError="isError"
         :inputWidth="inputWidth"
         :minWidth="minWidth"
@@ -32,6 +33,7 @@
         :fontColor="fontColor"
         :hasSlot="hasSlot"
         :slotSize="slotSize"
+        v-on="$listeners"
       />
       <slot-container v-if="hasSlot" :slotSize="slotSize" :isError="isError">
         <slot></slot>
@@ -220,6 +222,7 @@ export default {
     SlotContainer,
     InfoText
   },
+  inheritAttrs: false,
   data() {
     return {
       textInput: '',
@@ -318,7 +321,10 @@ export default {
     },
     computedSlotSize() {
       return this.slotSize || this.$slots['default'][0].elm.clientWidth
-    }
+    },
+    displayedPlaceholder() {
+      if (this.placeholder) return this.placeholder
+      return `${this.minNumber || 0} ${this.unitName ? this.unitName : ''}`
   },
   methods: {
     onChangeHandler(event) {
@@ -351,7 +357,7 @@ export default {
           return num
         }
       })
-      let evaluated = eval(formatted.join(''))
+      let evaluated = eval(formatted.join('')) || ''
       evaluated = stringToNumber({
         value: evaluated,
         numberPrecision: this.numberPrecision