@eturnity/eturnity_reusable_components 1.2.25-EPDM-5202.2 → 1.2.26-3d-master.0

package/src/App.vue

@@ -1,321 +1,376 @@
-<template>
-  <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
-    <page-container>
-      <br />
-      <!-- <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"
-      />
-      <br /> -->
-      <iconCollection />
-      <input-text
-        placeholder="Enter distance"
-        :value="inputValue"
-        @input-change="onInputChange($event)"
-        type="password"
-      />
-      <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 MainTable from '@/components/tables/mainTable'
-// import ThreeDots from '@/components/threeDots'
-// import Toggle from '@/components/inputs/toggle'
-import InputText from '@/components/inputs/inputText'
-// import Checkbox from '@/components/inputs/checkbox'
-// import PageSubtitle from '@/components/pageSubtitle'
-// import Spinner from '@/components/spinner'
-// import ExternalButton from '@/components/buttons/externalButton'
-// import ProjectMarker from '@/components/projectMarker'
-import iconCollection from '@/components/icon/iconCollection'
-// import Modal from '@/components/modals/modal'
-// import TableDropdown from "@/components/tableDropdown"
-
-const PageContainer = styled.div`
-  padding: 40px;
-`
-
-// const RowContainer = styled.div`
-//   display: inline-flex;
-//   gap: 10px;
-//   flex-wrap: wrap;
-// `
-
-export default {
-  name: 'App',
-  components: {
-    ThemeProvider,
-    PageContainer,
-    // MainTable,
-    // ThreeDots,
-    // Toggle,
-    InputText,
-    // PageSubtitle,
-    // Spinner,
-    // Checkbox,
-    // ExternalButton,
-    // Modal,
-    // ProjectMarker,
-    iconCollection
-    // RowContainer
-  },
-  data() {
-    return {
-      inputValue: null,
-      checkedOption: 'button_1',
-      question: {
-        number_format_precision: 4,
-        number_min_allowed: 0,
-        number_max_allowed: 10,
-        unit_short_name: 'cm'
-      },
-      dropdownOpen: false,
-      isChecked: false,
-      listOptions: [
-        {
-          name: 'Option 1',
-          value: 'option_1',
-          disabled: true
-        },
-        {
-          name: 'Option 2',
-          value: 'option_2'
-        },
-        {
-          name: 'Option 3',
-          value: 'option_3'
-        },
-        {
-          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 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
-        }
-      ]
-    }
-  },
-  methods: {
-    consoleLog(data) {
-      console.log(data)
-    },
-    gettext(string) {
-      return string.toUpperCase()
-    },
-    getTheme() {
-      return theme
-    },
-    onInputChange(event) {
-      this.inputValue = event
-    },
-    isDropdownOpen() {
-      return this.dropdownOpen
-    },
-    onClickButton() {
-      console.log('Test')
-    },
-    toggleDropdownOpen() {
-      this.dropdownOpen = !this.dropdownOpen
-    },
-    getDropdownValues() {
-      let items = []
-      items = [
-        {
-          value: this.getComponentInfo({
-            row: this.itemOptions[0],
-            value: 'display_name'
-          })
-        },
-        {
-          value: this.getComponentInfo({
-            row: this.itemOptions[0],
-            value: 'company_item_number'
-          })
-        },
-        {
-          value: this.getComponentInfo({
-            row: this.itemOptions[0],
-            value: 'model'
-          })
-        }
-      ]
-      return items
-    },
-    getComponentInfo({ row, value }) {
-      let item
-      if (row.selectedValue && row.selectedValue[value]) {
-        item = row.selectedValue[value]
-      } else if (row[value]) {
-        item = row[value]
-      } else {
-        item = '-'
-      }
-      return item
-    }
-  }
-}
-</script>
-
-<style>
-html,
-body {
-  height: 100%;
-  margin: 0;
-}
-</style>
+<template>
+  <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
+    <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 />
+      
+  <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="Enter distance"
+        :value="inputValue"
+        @input-change="onInputChange($event)"
+        type="password"
+      />
+      <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" /> -->
+>>>>>>> master
+    </page-container>
+  </ThemeProvider>
+</template>
+
+<script>
+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 TableDropdown from "@/components/tableDropdown"
+const InputAnnexContainer = styled.div`
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-gap: 10px;
+`
+
+const PageContainer = styled.div`
+  padding: 40px;
+`
+
+// const RowContainer = styled.div`
+//   display: inline-flex;
+//   gap: 10px;
+//   flex-wrap: wrap;
+// `
+
+export default {
+  name: 'App',
+  components: {
+    ThemeProvider,
+    PageContainer,
+    InputNumber,
+    PageSubtitle,
+    Spinner,
+    Checkbox,
+    InputText,
+    ExternalButton,
+    iconWrapper,
+    Modal,
+    ProjectMarker,
+    iconCollection,
+    RowContainer
+  },
+  data() {
+    return {
+      num: 42,
+      inputValue: null,
+      checkedOption: 'button_1',
+      question: {
+        number_format_precision: 4,
+        number_min_allowed: 0,
+        number_max_allowed: 10,
+        unit_short_name: 'cm'
+      },
+      dropdownOpen: false,
+      isChecked: false,
+      listOptions: [
+        {
+          name: 'Option 1',
+          value: 'option_1',
+          disabled: true
+        },
+        {
+          name: 'Option 2',
+          value: 'option_2'
+        },
+        {
+          name: 'Option 3',
+          value: 'option_3'
+        },
+        {
+          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 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
+        }
+      ]
+    }
+  },
+  methods: {
+    keydownHandler(e) {
+      console.log('test', e)
+    },
+    getTheme() {
+      return theme
+    },
+    onInputChange(event) {
+      this.inputValue = event
+    },
+    isDropdownOpen() {
+      return this.dropdownOpen
+    },
+    onClickButton() {
+      console.log('Test')
+    },
+    toggleDropdownOpen() {
+      this.dropdownOpen = !this.dropdownOpen
+    },
+    getDropdownValues() {
+      let items = []
+      items = [
+        {
+          value: this.getComponentInfo({
+            row: this.itemOptions[0],
+            value: 'display_name'
+          })
+        },
+        {
+          value: this.getComponentInfo({
+            row: this.itemOptions[0],
+            value: 'company_item_number'
+          })
+        },
+        {
+          value: this.getComponentInfo({
+            row: this.itemOptions[0],
+            value: 'model'
+          })
+        }
+      ]
+      return items
+    },
+    getComponentInfo({ row, value }) {
+      let item
+      if (row.selectedValue && row.selectedValue[value]) {
+        item = row.selectedValue[value]
+      } else if (row[value]) {
+        item = row[value]
+      } else {
+        item = '-'
+      }
+      return item
+    }
+  }
+}
+</script>
+
+<style>
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+</style>