@eturnity/eturnity_reusable_components 1.2.31-3d-master.3 → 1.2.31-3d-master.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.31-3d-master.3",
+  "version": "1.2.31-3d-master.6",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -3,146 +3,58 @@
     <page-container>
       <br />
 
-      <iconWrapper name="bell"/>
       <modal backdrop="dark" :isLoading="false" :isOpen="true">
 
-      <modal backdrop="dark" :isLoading="false" :isOpen="false">
-
-        <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>
-      </modal>
-      <row-container>
-        <div v-for="(item, index) in markersArray" :key="item.index">
-          <project-marker
-            :activeLanguage="'en-us'"
-            :markerData="item"
-            :isLimitedPartner="false"
-            :isGroupSupport="false"
-            :isEditable="true"
-            :gettext="gettext"
-            :date="'23.07.2022'"
-            @editHandler="consoleLog('edit index ' + index)"
-            @deleteHandler="consoleLog('delete id ' + item.id)"
-          />
-        </div>
-      </row-container>
-      <br />
-      <iconCollection />
-      <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"
-      />
-<<<<<<< HEAD
-      <br />
->>>>>>> EPDM-5448
-      <input-number
-        :value="inputValue"
-        @input-change="inputValue = $event"
-        inputWidth="250px"
-        slotSize="50%"
-        ><InputAnnexContainer>
-          <span>123m2</span>
-          <info-text size="10px" alignArrow="right" 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 :style="{'justify-self': 'end'}" size="12px" alignArrow="center" text="infoText ceci est le text">This is the tooltip text</info-text>
-        </InputAnnexContainer>
-      </input-number>
-      <br />
+    <div :style="{padding:'50px'}">
       
-  <p>InputText</p>
-   <input-text
-     placeholder="Company name"
-     :value="inputValue"
-     :isError="true"
-     errorMessage="This is my error message"
-     infoTextAlign="right" 
-     infoTextMessage="My info message"
-     label="Question 5"
-     alignItems="vertical"
-     inputWidth="250px"
-     minWidth="100px"
-   />
-   <br/>
       <input-number
-        :value="num"
-        @input-change="num = $event"
-        unitName="t"
-        id="biebie"
-        test="koko"
-        @keydown="keydownHandler"
-      />
-=======
-      <br /> -->
-      <!-- <iconCollection /> -->
-      <input-text
-        placeholder="Company name"
-        :value="inputValue"
-        @input-change="onInputChange($event)"
-        @input-blur="onInputBlur($event)"
-        type="password"
-      />
-      <br />
-<<<<<<< HEAD
-      <!-- <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" /> -->
->>>>>>> master
-=======
+                  :value="value"
+                  :minNumber="0"
+                  unitName="mm"
+                  :numberPrecision="0"
+                  backgroundColor="transparent"
+                  inputHeight="34px"
+                  inputWidth="420px"
+                  textAlign="left"
+                  :isInteractive="true"
+                  :interactionStep="50"
+                  alignItems="horizontal"
+                  @on-input="value=$event"
+                  @input-change="changeHandler"
+                  @input-focus="focusHandler"
+                  @input-blur="blurHandler"
+                >
+                  <template v-slot:label>
+                    <div>
+                      Interactive Label
+                    </div>
+                  </template>
+                </input-number>
       <input-number
-        :value="num"
-        @input-change="num = $event"
-        unitName="t"
-        id="biebie"
-        test="koko"
-        @keydown="keydownHandler"
-      />
->>>>>>> master
+                  :value="value2"
+                  :minNumber="0"
+                  unitName="mm"
+                  :numberPrecision="0"
+                  backgroundColor="transparent"
+                  inputHeight="34px"
+                  inputWidth="420px"
+                  textAlign="left"
+                  :isInteractive="true"
+                  :interactionStep="50"
+                  alignItems="horizontal"
+                  @input-change="changeHandler"
+                  @input-focus="focusHandler"
+                  @input-blur="blurHandler"
+                  @on-input="inputHandler"
+                >
+                  <template v-slot:label>
+                    <div>
+                      Interactive Label
+                    </div>
+                  </template>
+                </input-number>
+    </div>
+      </modal>
     </page-container>
   </ThemeProvider>
 </template>
@@ -151,15 +63,8 @@
 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 InputText from "@/components/inputs/inputText"
+import Modal from "@/components/modals/modal"
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -178,117 +83,28 @@ export default {
     ThemeProvider,
     PageContainer,
     InputNumber,
-    PageSubtitle,
-    Spinner,
-    Checkbox,
-    InputText,
-    ExternalButton,
-    iconWrapper,
-    Modal,
-    ProjectMarker,
-    iconCollection,
-    RowContainer
+    Modal
   },
-        {
-          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 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 4',
-          company_item_number: '123456',
-          model: 'BTB-4930',
-          id: 4
-        }
-      ],
-      markersArray: [
-        {
-          id: 1180,
-          choice: 'project-on-hold',
-          translations: {
-            fr: { name: 'fr - Project on hold' },
-            'en-us': { name: 'Project on hold' },
-            'it-ch': { name: 'it-ch - Project on hold' },
-            'de-ch': { name: 'de-ch - Project on hold' },
-            'fr-be': { name: 'fr-be - Project on hold' }
-          },
-          color: '#D27CCA',
-          can_be_deleted: true
-        },
-        {
-          id: 266,
-          choice: 'transferred',
-          translations: {
-            'en-us': { name: 'Transferred' },
-            fr: { name: 'fr - Transferred' },
-            'de-ch': { name: 'de-ch - Transferred' },
-            'it-ch': { name: 'it-ch - Transferred' },
-            'fr-be': { name: 'fr-be - Transferred' }
-          },
-          color: '#20A4CA',
-          can_be_deleted: false
-        },
-        {
-          id: 267,
-          choice: 'sold',
-          translations: {
-            'en-us': { name: 'Sold' },
-            fr: { name: 'Vendu' },
-            'de-ch': { name: 'Verkauft' },
-            'it-ch': { name: 'Venduto' },
-            'fr-be': { name: 'Vendu' }
-          },
-          color: '#008351',
-          can_be_deleted: false
-        },
-        {
-          id: 268,
-          choice: 'lost',
-          translations: {
-            'en-us': { name: 'Lost' },
-            fr: { name: 'Perdu' },
-            'de-ch': { name: 'Verloren' },
-            'it-ch': { name: 'Perso' },
-            'fr-be': { name: 'Perdu' }
-          },
-          color: '#A52019',
-          can_be_deleted: false
-        },
-        {
-          id: 1181,
-          choice: 'project-created',
-          translations: {
-            fr: { name: 'Project created' },
-            'en-us': { name: 'Project created' },
-            'it-ch': { name: 'Project created' },
-            'de-ch': { name: 'Project created' },
-            'fr-be': { name: 'Project created' }
-          },
-          color: '#FDB813',
-          can_be_deleted: true
-        }
-      ]
+  data() {
+    return {
+      value:42,
+      value2:42
     }
   },
   methods: {
+    blurHandler(e){
+      console.log('blur',e)
+    },
+    changeHandler(e){
+      console.log('change',e)
+    },
+    focusHandler(e){
+      console.log('focus',e)
+    },
+    inputHandler(e){
+      this.value2=e
+      console.log('input',e)
+    },
     keydownHandler(e) {
       console.log('test', e)
     },

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

@@ -402,9 +402,6 @@ export default {
     hasLabelSlot(){
       return !!this.$slots.label
     },
-    computedSlotSize() {
-      return this.slotSize || this.$slots['default'][0].elm.clientWidth
-    }
   },
   methods: {
     onChangeHandler(event) {
@@ -525,10 +522,10 @@ export default {
       }
     },
     initInteraction(e) {
-      this.focusInput()
       window.addEventListener('mousemove', this.interact, false);
       window.addEventListener('mouseup', this.stopInteract, false);
       e.preventDefault() 
+      this.focusInput()
     },
     interact(e) {
       e.preventDefault() 
@@ -546,8 +543,9 @@ export default {
     },
     stopInteract(e) {
       e.preventDefault() 
-        window.removeEventListener('mousemove', this.interact, false);
-        window.removeEventListener('mouseup', this.stopInteract, false);
+      window.removeEventListener('mousemove', this.interact, false);
+      window.removeEventListener('mouseup', this.stopInteract, false);
+      this.blurInput()
     },
   },
   created() {