@eturnity/eturnity_reusable_components 1.2.22-EPDM-5202.1 → 1.2.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.22-EPDM-5202.1",
+  "version": "1.2.23",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -2,8 +2,8 @@
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
       <br />
-      <modal backdrop="dark" :isLoading="false" :isOpen="false">
-        <main-table titleText="My Table">
+      <!-- <modal backdrop="dark" :isLoading="false" :isOpen="false"> -->
+      <!-- <main-table titleText="My Table">
           <thead>
             <tr>
               <th>Column 1</th>
@@ -13,8 +13,8 @@
             </tr>
           </thead>
           <tbody>
-            <tr>
-              <!-- <table-dropdown
+            <tr> -->
+      <!-- <table-dropdown
               :colSpan="3"
               :tableItems="getDropdownValues()"
               @toggle-dropdown-open="toggleDropdownOpen()"
@@ -23,7 +23,7 @@
               :optionItems="itemOptions"
               :optionsDisplay="['display_name', 'company_item_number', 'model']"
             /> -->
-              <td>Test</td>
+      <!-- <td>Test</td>
               <div class="icons-container">
                 <three-dots :options="listOptions" :isLoading="false" />
               </div>
@@ -32,7 +32,7 @@
         </main-table>
       </modal>
       <row-container>
-        <div v-for='(item, index) in markersArray' :key="item.index">
+        <div v-for="(item, index) in markersArray" :key="item.index">
           <project-marker
             :activeLanguage="'en-us'"
             :markerData="item"
@@ -58,23 +58,24 @@
         labelAlign="right"
         :disabled="false"
       />
-      <br />
-      <input-number
+      <br /> -->
+      <iconCollection />
+      <input-text
         placeholder="Enter distance"
-        :numberPrecision="2"
         :value="inputValue"
         @input-change="onInputChange($event)"
+        type="password"
       />
       <br />
-      <page-subtitle text="My Subtitle" infoText="My info Text" />
+      <!-- <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" />
+      /> -->
+      <!-- <external-button text="Click me!" minWidth="500px" /> -->
     </page-container>
   </ThemeProvider>
 </template>
@@ -83,46 +84,46 @@
 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 ProjectMarker from '@/components/projectMarker'
+// 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 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;
-`
+// const RowContainer = styled.div`
+//   display: inline-flex;
+//   gap: 10px;
+//   flex-wrap: wrap;
+// `
 
 export default {
   name: 'App',
   components: {
     ThemeProvider,
     PageContainer,
-    MainTable,
-    ThreeDots,
-    Toggle,
-    InputNumber,
-    PageSubtitle,
-    Spinner,
-    Checkbox,
-    ExternalButton,
-    Modal,
-    ProjectMarker,
-    iconCollection,
-    RowContainer
+    // MainTable,
+    // ThreeDots,
+    // Toggle,
+    InputText,
+    // PageSubtitle,
+    // Spinner,
+    // Checkbox,
+    // ExternalButton,
+    // Modal,
+    // ProjectMarker,
+    iconCollection
+    // RowContainer
   },
   data() {
     return {
@@ -132,7 +133,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,
@@ -140,48 +141,114 @@ 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
+        }
       ],
-      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}]
+      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: {
@@ -212,21 +279,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
     },
@@ -240,8 +307,8 @@ export default {
         item = '-'
       }
       return item
-    },
-  },
+    }
+  }
 }
 </script>
 

package/src/components/icon/index.vue

@@ -19,6 +19,7 @@
 //   color="red"
 //   hoveredColor="blue"
 //   size="60px" by default, this is 30px
+//   cursor="default"
 // />
 
 import styled from 'vue-styled-components'

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

@@ -14,26 +14,41 @@
           :alignText="infoTextAlign"
         />
       </label-wrapper>
-      <input-container
-        :placeholder="placeholder"
-        :isError="isError"
-        :inputWidth="inputWidth"
-        :minWidth="minWidth"
-        :value="value"
-        @input="onChangeHandler"
-        :noBorder="noBorder"
-        :disabled="disabled"
-        :isDisabled="disabled"
-        :fontSize="fontSize"
-      />
+      <icon-container>
+        <input-container
+          :placeholder="placeholder"
+          :isError="isError"
+          :inputWidth="inputWidth"
+          :minWidth="minWidth"
+          :value="value"
+          @input="onChangeHandler"
+          :noBorder="noBorder"
+          :disabled="disabled"
+          :isDisabled="disabled"
+          :fontSize="fontSize"
+          :inputType="inputType"
+          :type="inputTypeData"
+        />
+        <icon-wrapper
+          v-if="inputType === 'password' && !isError"
+          @click="toggleShowPassword()"
+          size="20px"
+        >
+          <icon name="current_variant" size="20px" />
+        </icon-wrapper>
+        <icon-wrapper v-if="isError" size="16px">
+          <icon name="warning" size="16px" cursor="default" />
+        </icon-wrapper>
+      </icon-container>
     </input-wrapper>
     <error-message v-if="isError">{{ errorMessage }}</error-message>
   </container>
 </template>
 
 <script>
-import styled from "vue-styled-components"
-import InfoText from "../../infoText"
+import styled from 'vue-styled-components'
+import InfoText from '../../infoText'
+import Icon from '../../icon'
 
 const Container = styled.div`
   width: 100%;
@@ -41,17 +56,16 @@ const Container = styled.div`
 `
 
 const labelAttrs = { fontSize: String }
-const InputLabel = styled("div", labelAttrs)`
+const InputLabel = styled('div', labelAttrs)`
   font-weight: bold;
-  font-size: ${(props) => (props.fontSize ? props.fontSize : "13px")};
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
 `
 
 const LabelWrapper = styled.div`
   display: inline-grid;
-  grid-template-columns: auto auto;
+  grid-template-columns: auto 1fr;
   grid-gap: 12px;
   align-items: center;
-  justify-content: start;
 `
 
 const inputProps = {
@@ -61,29 +75,35 @@ const inputProps = {
   noBorder: Boolean,
   isDisabled: Boolean,
   fontSize: String,
+  inputType: String
 }
-const InputContainer = styled("input", inputProps)`
+const InputContainer = styled('input', inputProps)`
   border: ${(props) =>
     props.isError
-      ? "1px solid " + props.theme.colors.red
+      ? '1px solid ' + props.theme.colors.red
       : props.noBorder
-      ? "none"
+      ? 'none'
       : props.hasLength
-      ? "1px solid " + props.theme.colors.black
-      : "1px solid " + props.theme.colors.mediumGray};
+      ? '1px solid ' + props.theme.colors.black
+      : '1px solid ' + props.theme.colors.mediumGray};
   padding: ${(props) =>
-    props.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
+    props.isError
+      ? '11px 25px 11px 10px'
+      : props.inputType === 'password'
+      ? '11px 25px 11px 10px'
+      : '11px 5px 11px 10px'};
   border-radius: 4px;
-  font-size: ${(props) => (props.fontSize ? props.fontSize : "16px")};
+  position: relative;
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
   color: ${(props) =>
     props.isError ? props.theme.colors.red : props.theme.colors.black};
-  width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
-  min-width: ${(props) => (props.minWidth ? props.minWidth : "unset")};
+  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+  min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
   box-sizing: border-box; // to allow width of 100% with padding
   font-weight: 500;
-  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "auto")};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
   background-color: ${(props) =>
-    props.isDisabled ? props.theme.colors.grey5 : "#fff"};
+    props.isDisabled ? props.theme.colors.grey5 : '#fff'};
 
   &::placeholder {
     color: ${(props) =>
@@ -96,13 +116,13 @@ const InputContainer = styled("input", inputProps)`
 `
 
 const inputAttrs = { alignItems: String, hasLabel: Boolean }
-const InputWrapper = styled("div", inputAttrs)`
+const InputWrapper = styled('div', inputAttrs)`
   position: relative;
   display: grid;
   align-items: center;
   gap: 8px;
   grid-template-columns: ${(props) =>
-    props.alignItems === "vertical" || !props.hasLabel ? "1fr" : "auto 1fr"};
+    props.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
 `
 
 const ErrorMessage = styled.div`
@@ -112,6 +132,20 @@ const ErrorMessage = styled.div`
   top: calc(100% + 1px);
 `
 
+const IconAttrs = { size: String }
+const IconWrapper = styled('div', IconAttrs)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  right: 5px;
+  height: ${(props) => (props.size ? props.size : 'auto')};
+`
+
+const IconContainer = styled.div`
+  position: relative;
+`
+
 export default {
   // import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
   // To use:
@@ -129,7 +163,7 @@ export default {
   //   minWidth="100px"
   //   fontSize="13px"
   // />
-  name: "input-text",
+  name: 'input-text',
   components: {
     Container,
     InputContainer,
@@ -138,62 +172,81 @@ export default {
     InfoText,
     InputLabel,
     LabelWrapper,
+    Icon,
+    IconWrapper,
+    IconContainer
+  },
+  data() {
+    return {
+      inputTypeData: 'text'
+    }
   },
   props: {
     placeholder: {
       required: false,
-      default: "",
+      default: ''
     },
     alignItems: {
       required: false,
-      default: "horizontal",
+      default: 'horizontal'
     },
     isError: {
       required: false,
-      default: false,
+      default: false
     },
     inputWidth: {
       required: false,
-      default: null,
+      default: null
     },
     minWidth: {
       required: false,
-      default: null,
+      default: null
     },
     value: {
       required: true,
-      default: null,
+      default: null
     },
     errorMessage: {
       required: false,
-      default: "",
+      default: ''
     },
     infoTextMessage: {
-      required: false,
+      required: false
     },
     infoTextAlign: {
-      required: false,
+      required: false
     },
     label: {
-      required: false,
+      required: false
     },
     noBorder: {
       required: false,
-      default: false,
+      default: false
     },
     disabled: {
       required: false,
-      default: false,
+      default: false
     },
     fontSize: {
       required: false,
-      default: null,
+      default: null
     },
+    inputType: {
+      required: false,
+      default: 'text'
+    }
   },
   methods: {
     onChangeHandler($event) {
-      this.$emit("input-change", $event)
+      this.$emit('input-change', $event)
     },
+    toggleShowPassword() {
+      this.inputTypeData =
+        this.inputTypeData === 'password' ? 'text' : 'password'
+    }
   },
+  created() {
+    this.inputTypeData = this.inputType
+  }
 }
 </script>