@eturnity/eturnity_reusable_components 1.2.19-v.5.45.0 → 1.2.20-3d-master.1

package/babel.config.js

@@ -2,4 +2,4 @@ module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
   ]
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.19-v.5.45.0",
+  "version": "1.2.20-3d-master.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -14,8 +14,7 @@
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-styled-components": "^1.6.0",
-    "html-loader": "^0.5.5",
-    "v-click-outside": "^2.1.4"
+    "html-loader": "^0.5.5"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^6.2.8",

package/src/App.vue

@@ -2,7 +2,10 @@
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
       <br />
-      <modal backdrop="dark" :isLoading="false" :isOpen="false">
+<<<<<<< HEAD
+=======
+      <iconWrapper name="bell"/>
+      <modal backdrop="dark" :isLoading="false" :isOpen="true">
         <main-table titleText="My Table">
           <thead>
             <tr>
@@ -31,23 +34,6 @@
           </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)"
@@ -59,73 +45,113 @@
         :disabled="false"
       />
       <br />
+>>>>>>> EPDM-5448
       <input-number
-        placeholder="Enter distance"
-        :numberPrecision="2"
         :value="inputValue"
-        @input-change="onInputChange($event)"
-      />
+        @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 />
-      <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"
+      
+  <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"
       />
-      <external-button text="Click me!" minWidth="500px" />
     </page-container>
   </ThemeProvider>
 </template>
 
 <script>
+<<<<<<< HEAD
+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 { 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 iconWrapper from '@/components/iconWrapper'
 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 iconCollection from '@/components/icon/iconCollection'
 import Modal from '@/components/modals/modal'
+>>>>>>> EPDM-5448
 // 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,
-    MainTable,
-    ThreeDots,
-    Toggle,
     InputNumber,
     PageSubtitle,
     Spinner,
     Checkbox,
+    InputText,
     ExternalButton,
+    iconWrapper,
     Modal,
-    ProjectMarker,
-    iconCollection,
-    RowContainer
   },
   data() {
     return {
+      num: 42,
       inputValue: null,
       checkedOption: 'button_1',
       question: {
@@ -181,15 +207,11 @@ export default {
           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()
+    keydownHandler(e) {
+      console.log('test', e)
     },
     getTheme() {
       return theme
@@ -240,8 +262,8 @@ export default {
         item = '-'
       }
       return item
-    },
-  },
+    }
+  }
 }
 </script>
 
@@ -251,4 +273,4 @@ body {
   height: 100%;
   margin: 0;
 }
-</style>
+</style>

package/src/assets/svgIcons/base_layer.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.75" y="0.75" width="12.5" height="12.5" stroke="white" stroke-width="1.5"/>
+</svg>

package/src/assets/svgIcons/margin_tool.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.75" y="0.75" width="12.5" height="12.5" stroke="white" stroke-width="1.5"/>
+<rect x="4.5" y="4.5" width="5" height="5" stroke="white" stroke-width="1.5"/>
+</svg>

package/src/assets/svgIcons/obstacle_tool.svg

@@ -1,13 +1,9 @@
-<svg fill="none" height="23" viewbox="6 12 34 23" width="34" xmlns="http://www.w3.org/2000/svg">
-<mask height="14" id="mask0_6458_86453" maskunits="userSpaceOnUse" style="mask-type:alpha" width="14" x="13" y="13">
-<rect fill="#FF5656" height="14" width="14" x="13" y="13"></rect>
-</mask>
-<g mask="url(#mask0_6458_86453)">
-<rect fill="#FF5656" height="1.55556" transform="rotate(-45 6.77783 21.6267)" width="21" x="6.77783" y="21.6267"></rect>
-<rect fill="#FF5656" height="1.55556" transform="rotate(-45 8.97803 23.8269)" width="21" x="8.97803" y="23.8269"></rect>
-<rect fill="#FF5656" height="1.55556" transform="rotate(-45 11.1777 26.0269)" width="21" x="11.1777" y="26.0269"></rect>
-<rect fill="#FF5656" height="1.55556" transform="rotate(-45 13.3774 28.2266)" width="21" x="13.3774" y="28.2266"></rect>
-<rect fill="#FF5656" height="1.55556" transform="rotate(-45 15.5771 30.4265)" width="21" x="15.5771" y="30.4265"></rect>
-<rect fill="#FF5656" height="1.55556" transform="rotate(-45 17.7773 32.6262)" width="21" x="17.7773" y="32.6262"></rect>
+<svg fill="none" height="16" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+<defs>
+    <pattern id="pattern_Z6wSY" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="rotate(45)">
+        <path d="M0 0 L 0 16Z" stroke="red" stroke-width="3"></path>
+    </pattern>
+</defs>
+<rect width="32" height="32" fill="url(#pattern_Z6wSY)" :opacity="1" />
 </g>
 </svg>

package/src/assets/svgIcons/redo.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.51904 2H10.519V4H4.51904V2Z" fill="#555D61"/>
+<path d="M4.51904 8H8.51904V10H4.51904V8Z" fill="#555D61"/>
+<path d="M10.519 5.92321L13.4807 2.96161L10.519 0L10.519 5.92321Z" fill="#555D61"/>
+<path d="M7.98391 8C7.29229 9.1956 5.99961 10 4.51904 10C2.3099 10 0.519043 8.20914 0.519043 6C0.519043 3.79086 2.3099 2 4.51904 2C5.99961 2 7.2923 2.8044 7.98391 4H4.51904C3.41447 4 2.51904 4.89543 2.51904 6C2.51904 7.10457 3.41447 8 4.51904 8H7.98391Z" fill="#555D61"/>
+</svg>

package/src/assets/svgIcons/roof_layer.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 10 L7 0 L14 10" fill="none" stroke="white" stroke-width="1.5"/>
+</svg>

package/src/assets/svgIcons/undo.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.48096 2H3.48096V4H9.48096V2Z" fill="white"/>
+<path d="M9.48096 8H5.48096V10H9.48096V8Z" fill="white"/>
+<path d="M3.48096 5.92321L0.519349 2.96161L3.48096 0L3.48096 5.92321Z" fill="white"/>
+<path d="M6.01609 8C6.70771 9.1956 8.00039 10 9.48096 10C11.6901 10 13.481 8.20914 13.481 6C13.481 3.79086 11.6901 2 9.48096 2C8.00039 2 6.7077 2.8044 6.01609 4H9.48096C10.5855 4 11.481 4.89543 11.481 6C11.481 7.10457 10.5855 8 9.48096 8H6.01609Z" fill="white"/>
+</svg>

package/src/assets/theme.js

@@ -19,6 +19,8 @@ const theme = {
     grey4: '#dee2eb',
     grey5: '#fafafa',
     green: '#99db0c',
+    transparentWhite1:'#ffffff32',
+    transparentBlack1:'#263238e6',
     disabled: '#dfe1e1'
   },
   screen: {

package/src/components/errorMessage/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <component-wrapper>
+    <text-overlay>
+      <slot></slot>
+    </text-overlay>
+  </component-wrapper>
+</template>
+
+<script>
+// import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+//To use:
+// <error-message
+//     alignText="right" // default is left
+// />
+
+import styled from 'vue-styled-components'
+
+const TextOverlay = styled.div`
+  position: absolute;
+  top: calc(100% + 13px);
+  background: ${(props) => props.theme.colors.red};
+  padding: 10px;
+  width: max-content;
+  max-width: 100%;
+  min-width: 200px;
+  font-size: 11px;
+  font-weight: 400;
+  border-radius: 4px;
+  font-family: 'Lato-Bold', Arial;
+  z-index: 10;
+  color: ${(props) => props.theme.colors.white};
+
+  :before {
+    content: '';
+    background-color: ${(props) => props.theme.colors.red};
+    position: absolute;
+    top: 2px;
+    left: 40px;
+    height: 11px;
+    width: 11px;
+    transform-origin: center center;
+    transform: translate(-2em, -0.5em) rotate(45deg);
+  }
+`
+
+const ComponentWrapper = styled.div`
+  display: block;
+`
+
+export default {
+  name: 'info-text',
+  components: {
+    TextOverlay,
+    ComponentWrapper
+  },
+  props: {},
+  methods: {},
+  data() {
+    return {}
+  }
+}
+</script>

package/src/components/icon/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <wrapper :isDisabled="isDisabled" :size="size" :cursor="cursor">
     <icon-image
+      :disabled="disabled"
       :size="size"
       :color="color"
       :hoveredColor="hoveredColor"
@@ -8,7 +8,6 @@
         require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
       "
     ></icon-image>
-  </wrapper>
 </template>
 
 <script>
@@ -23,37 +22,36 @@
 
 import styled from 'vue-styled-components'
 
-const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
-const Wrapper = styled('div', wrapperAttrs)`
-  display: inline-block;
+const IconImageProps = { color: String, hoveredColor: String, size: String ,disabled:Boolean}
+const IconImage = styled('div', IconImageProps)`
+  display: inline-flex;
   width: ${(props) => props.size};
   height: ${(props) => props.size};
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursor)};
-  line-height: 0;
-`
-const IconImageProps = { color: String, hoveredColor: String, size: String }
-const IconImage = styled('div', IconImageProps)`
+  justify-content:center;
+  align-items:center;
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   svg {
-    width: ${(props) => props.size};
-    height: ${(props) => props.size};
+    width: 100%;
+    height: 100%;
   }
-  svg > path {
+  svg path {
     ${(props) =>
-      props.color && `fill: ${props.theme.colors[props.color] || props.color};`}
+      props.color && `fill: ${props.theme.colors[props.color] || props.color};
+      stroke: ${props.theme.colors[props.color] || props.color};`}
   }
-  &:hover > svg > path {
-    ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
+  &:hover > svg path {
+    ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};
+    stroke: ${props.theme.colors[props.color] || props.color};`}
   }
 `
 
 export default {
   name: 'icon',
   components: {
-    Wrapper,
     IconImage
   },
   props: {
-    isDisabled: {
+    disabled: {
       required: false,
       default: false
     },
@@ -69,14 +67,10 @@ export default {
     size: {
       required: false,
       default: '30px'
-    },
-    cursor: {
-      required: false,
-      default: 'pointer'
     }
   },
   data() {
     return {}
   }
 }
-</script>
+</script>

package/src/components/iconWrapper/index.vue

@@ -0,0 +1,116 @@
+<template>
+    <Wrapper 
+    :disabled="disabled" 
+    :size="size" 
+    :backgroundColor="backgroundColor" 
+    :borderRadius="borderRadius"
+    :hoveredBackgroundColor="hoveredBackgroundColor"
+    :isHovered="isHovered"
+    >
+        <icon :disabled="disabled" 
+            :size="iconSize" 
+            :name="name" 
+            :color="iconColor" 
+            :hoveredColor="hoveredIconColor" />
+        <caret v-if="hasCaret">
+          <iconWrapper :disabled="disabled" 
+            size="10px" 
+            name="arrow_down" 
+            :iconColor="iconColor" 
+            :hoveredBackgroundColor="hoveredIconColor"
+            borderRadius="1px"
+            />  
+        </caret>
+    </Wrapper>
+  </template>
+  
+  <script>
+  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+  //  How to use:
+  //<icon
+  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
+  //   color="red"
+  //   hoveredColor="blue"
+  //   size="60px" by default, this is 30px
+  // />
+  
+  import styled from 'vue-styled-components'
+  import icon from '../icon'
+  const wrapperAttrs = { isHovered:Boolean,borderRadius:String,disabled: Boolean, size: String,backgroundColor:String,hoveredBackgroundColor:String }
+  const Wrapper = styled('div', wrapperAttrs)`
+    position:relative;
+    display: inline-flex;
+    width: ${(props) => props.size};
+    height: ${(props) => props.size};
+    justify-content:center;
+    align-items:center;
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    background-color: ${(props)=>props.theme.colors[props.backgroundColor] || props.backgroundColor};
+    border-radius: ${(props) => props.borderRadius};
+    ${(props)=>(props.isHovered ? 'background-color:'+props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor : "")};
+    &:hover{
+        background-color:${(props)=>props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor};
+    }
+  `
+  const caret=styled.div`
+  position:absolute;
+  bottom:3px;
+  right:2px;
+  height:10px;
+  `
+
+  export default {
+    name: 'iconWrapper',
+    components: {
+      Wrapper,
+      icon,
+      caret
+    },
+    props: {
+      disabled: {
+        required: false,
+        default: false
+      },
+      name: {
+        required: true
+      },
+      iconColor: {
+        required: false,
+        default: 'white'
+      },
+      hoveredIconColor: {
+        required: false
+      },
+      backgroundColor: {
+        required: false,
+      },
+      hoveredBackgroundColor: {
+        required: false,
+        default:"transparentWhite1"
+      },
+      size: {
+        required: false,
+        default: '32px'
+      },
+      iconSize:{
+        required: false,
+        default:'18px'
+      },
+      hasCaret:{
+        required: false,
+        default: false
+      },
+      borderRadius:{
+        required:false,
+        default:'6px'
+      },
+      isHovered:{
+        required:false,
+        default:false
+      }
+    },
+    data() {
+      return {}
+    }
+  }
+  </script>