@eturnity/eturnity_reusable_components 6.38.0-team-day.1 → 6.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.38.0-team-day.1",
+  "version": "6.39.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -1,17 +1,122 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
-      <carousel :slides="slides"></carousel>
+    <page-container>
+      <br />
+
+     {{ alignItems }}
+          <input-number
+            :value="value"
+            :minNumber="0"
+            unitName="mm"
+            :numberPrecision="0"
+            backgroundColor="transparent"
+            borderColor="eturnityGrey"
+            inputHeight="34px"
+            inputWidth="420px"
+            textAlign="left"
+            :isInteractive="true"
+            :interactionStep="1"
+            @on-input="value = $event"
+            @input-change="changeHandler"
+            @input-focus="focusHandler"
+            @input-blur="blurHandler"
+          >
+            <template v-slot:label>
+              <div>Interactive Label</div>
+            </template>
+          </input-number>
+         
+          <dropdown-component openingMode="hover" gap="30px">
+            <template #trigger><i>Click Me</i></template>
+            <template #dropdown>
+              <div>
+              <a href="">test1</a>
+              <button href="">test2</button><br>
+              <p>Text</p>
+              </div>
+            </template>
+          </dropdown-component>
+        
+          <videoThumbnail src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080" 
+            playIconColor="red"
+            playIconSize="20px"
+            width="400px"
+            height="600px"
+            />
+
+          <SwitchField
+            @on-switch-change="onInputChange($event)"
+            :options="[
+              { value: 0, content: 'zero' },
+              { value: 1, content: 'one' },
+              { value: 2, content: 'two' }
+            ]"
+            :value="value"
+            label="label"
+            toggleColor="red"
+            size="large"
+            backgroundColor="blue"
+            labelAlign="left"
+            fontColor="black"
+            :disabled="false"
+          />
+          <icon
+            name="opacity"
+            color="red"
+            hoveredColor="blue"
+            size="60px"
+            cursor="default"
+            isStriked = "true"
+          />
+          <Select
+            :value="value"
+            selectWidth="100%"
+            optionWidth="50%"
+            label="that is a label"
+            alignItems="vertical"
+            colorMode="dark"
+            isSearchable="true"
+            @input-change="value = $event"
+            @search-change="searchValue = $event"
+          >
+            <template #selector="{ selectedValue }">
+              value selected: {{ selectedValue }}
+            </template>
+            <template #dropdown>
+              <Option
+                v-for="opt in filteredOptionList"
+                :key="opt.id"
+                :value="opt.val"
+                >{{ opt.lookFor }}</Option
+              >
+            </template>
+          </Select>
+         
+          
+          {{ filteredOptionList }}
+        
       <iconCollection color="red" />
+    </page-container>
   </ThemeProvider>
 </template>
 
 <script>
 import { ThemeProvider } from 'vue-styled-components'
 import theme from './assets/theme'
+import styled from 'vue-styled-components'
+import InputNumber from '@/components/inputs/inputNumber'
+import Select from '@/components/inputs/select'
+import SwitchField from '@/components/inputs/switchField'
+import Option from '@/components/inputs/select/option'
 import iconCollection from '@/components/icon/iconCollection'
-import carousel from '@/components/carousel'
+import dropdownComponent from '@/components/dropdown'
+import videoThumbnail from '@/components/videoThumbnail'
+import icon from '@/components/icon'
 // import TableDropdown from "@/components/tableDropdown"
 
+const PageContainer = styled.div`
+  padding: 40px;
+`
 
 // const RowContainer = styled.div`
 //   display: inline-flex;
@@ -23,15 +128,18 @@ export default {
   name: 'App',
   components: {
     ThemeProvider,
+    PageContainer,
+    InputNumber,
+    Option,
+    Select,
+    SwitchField,
     iconCollection,
-    carousel
+    dropdownComponent,
+    videoThumbnail,
+    icon
   },
   data() {
     return {
-      slides:[
-        {text:"<div>Hello World</div>",duration:4},
-        {text:"<div>Hello World <hr/>2</div>",duration:5},
-      ],
       value: 42,
       value2: 42,
       companyName: 'toto',

package/src/components/buttons/mainButton/index.vue

@@ -5,6 +5,7 @@
       :minWidth="minWidth"
       :isDisabled="isDisabled"
       :customColor="customColor"
+      :noWrap="noWrap"
     >
       {{ text }}
     </button-container>
@@ -26,7 +27,7 @@ import styled from "vue-styled-components"
 
 const PageContainer = styled.div``
 
-const ButtonAttrs = { type: String, isDisabled: Boolean, minWidth: String, customColor: String }
+const ButtonAttrs = { type: String, isDisabled: Boolean, minWidth: String, customColor: String, noWrap: Boolean }
 const ButtonContainer = styled("div", ButtonAttrs)`
   padding: 7px 15px;
   font-size: 13px;
@@ -48,6 +49,7 @@ const ButtonContainer = styled("div", ButtonAttrs)`
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   user-select: none;
   ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
+  ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
 
   &:hover {
     opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
@@ -80,6 +82,10 @@ export default {
       required: false,
       default: null,
     },
+    noWrap: {
+      required: false,
+      default: false
+    },
     minWidth: {
       required: false,
       default: null

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

@@ -311,7 +311,8 @@ export default {
     return {
       textInput: '',
       isFocused: false,
-      warningIcon: warningIcon
+      warningIcon: warningIcon,
+      isBlurred: false
     }
   },
   props: {
@@ -488,7 +489,9 @@ export default {
           return num
         }
       })
-      let evaluated = eval(formatted.join(''))
+      let evaluated
+      formatted = this.removeStringItemsAfterLastNumber(formatted)
+      evaluated = eval(formatted.join(' '))
       if (typeof evaluated === 'string') {
         evaluated = stringToNumber({
           value: evaluated,
@@ -499,7 +502,32 @@ export default {
       }
       return evaluated
     },
+    removeStringItemsAfterLastNumber(array) {
+      // fixed in EPDM-6487, in order to prevent 'Unexpected end of input'
+      let lastNumberIndex = -1
+      // Find the index of the last number in the array
+      for (let i = array.length - 1; i >= 0; i--) {
+        if (typeof array[i] === 'number') {
+          lastNumberIndex = i
+          break
+        }
+      }
+      // if there are no numbers, return an empty array
+      if (lastNumberIndex === -1) {
+        return []
+      }
+      // Remove non-numeric items after the last number
+      if (lastNumberIndex !== -1) {
+        const newArray = array.slice(0, lastNumberIndex + 1)
+        return newArray
+      }
+      return array
+    },
     onInput(value) {
+      if (this.isBlurred) {
+        this.isBlurred = false
+        return
+      }
       if (value === '') {
         this.$emit('on-input', '')
       }
@@ -514,6 +542,8 @@ export default {
     },
     onInputBlur(e) {
       this.isFocused = false
+      // setting isBlurred so we don't trigger onInput as well
+      this.isBlurred = true
       let value = e.target.value
       let evaluatedInput = this.onEvaluateCode(value)
       this.onChangeHandler(evaluatedInput ? evaluatedInput : value)

package/src/components/modals/modal/index.vue

@@ -7,12 +7,7 @@
     :backdrop="backdrop"
   >
     <modal-container @click.stop>
-      <loadingContainer v-if="isLoading" class="loading container">
-        <spinnerContainer>
-          <spinner  size="50px" :limitedToModal="true" />
-        </spinnerContainer>
-        <carousel animation="fade" :slides="annoncements" v-if="annoncements && annoncements.length"></carousel>
-      </loadingContainer>
+      <spinner v-if="isLoading" size="50px" :limitedToModal="true" />
       <content-container :visible="!isLoading">
         <slot />
       </content-container>
@@ -36,25 +31,11 @@
 import styled from 'vue-styled-components'
 import CloseButton from '../../buttons/closeButton'
 import Spinner from '../../spinner'
-import carousel from '../../carousel'
+
 const contentAttrs = { visible: Boolean }
 const ContentContainer = styled('div', contentAttrs)`
   visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
 `
-const loadingContainer = styled('div')`
-  display: flex;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  justify-content: center;
-  align-items: center;
-`
-const spinnerContainer = styled('div')`
-    position: absolute;
-    top: 100px;
-`
 
 const pageAttrs = { isOpen: Boolean, backdrop: String,position:String }
 const PageWrapper = styled('div', pageAttrs)`
@@ -130,10 +111,7 @@ export default {
     ModalContainer,
     CloseButton,
     Spinner,
-    ContentContainer,
-    carousel,
-    loadingContainer,
-    spinnerContainer
+    ContentContainer
   },
   props: {
     isOpen: {
@@ -159,11 +137,7 @@ export default {
     position: {
       required: false,
       default: 'fixed'
-    },
-    annoncements:{
-      required: false,
-      default: []
-    },
+    }
   },
   methods: {
     onCloseModal() {

package/src/helpers/numberConverter.js

@@ -21,6 +21,7 @@ export const stringToNumber = ({
     selectedLang === 'es-es' ||
     selectedLang === 'de' ||
     selectedLang === 'it' ||
+    selectedLang === 'it-it' ||
     selectedLang === 'nl-nl' ||
     selectedLang === 'nl-be'
   ) {

package/postcss.config.js

@@ -1 +0,0 @@
-module.exports = {}

package/src/components/carousel/index.vue

@@ -1,173 +0,0 @@
-<template>
-    <sliderContainer :backgroundColor="backgroundColor">
-    <transition-group tag="div" :name="transitionName">
-        <!-- <div v-for='( slide, index ) in slides' :key="index+1" @click="cancelTimeout()"> -->
-        <div :key="current" @click="cancelTimeout()" class="slide">
-            <slide :show='true || current==index' :content="currentSlide.text"></slide>
-        </div>
-    </transition-group>
-    <slideSelector>
-        <roundSlideSelector v-for="(slide,index) in slides" :key="index" :class="{'active':current==index}" @click="gotoSlide(index)"></roundSlideSelector>
-    </slideSelector>
-  </sliderContainer>
-  </template>
-
-    <script>
-   import slide from './slide.vue'
-   import styled from 'vue-styled-components'
-
-    const roundSlideSelector=styled.div`
-        padding:3px;
-        border:2px solid lightgrey;
-        margin:0px 10px;
-        border-radius:50%;
-        &.active{
-            background-color:lightgrey;
-        }
-        &:hover{
-            cursor:pointer;
-            background-color:lightgrey;
-        }
-    `
-    const slideSelector=styled.div`
-        position:absolute;
-        display:flex
-        bottom:10px;
-        justify-content: center;
-        align-items: center;
-        width:100%;
-
-    `
-    const sliderContainer=styled('div',{backgroundColor:String})`
-        overflow: hidden;
-        position:relative;
-        width:100%;
-        min-height:300px;
-        background-color:${(props=>props.backgroundColor)}
-    `
-
-  export default {
-    name:'carousel',
-    components:{
-        slide,
-        slideSelector,
-        roundSlideSelector,
-        sliderContainer
-    },
-    props: {
-      slides: {
-        required: true,
-        default: []
-      },
-      backgroundColor: {
-        required: false,
-        default: 'white'
-      }
-    },
-    data() {
-        return{
-    current: 0,
-    direction: 1,
-    transitionName: "fade",
-    timeoutId: null
-    }
-    },
-    computed:{
-        currentSlide(){
-            if(this.slides && this.slides.length){
-                return this.slides[this.current]
-            }
-            return null
-        }
-    },
-    methods: {
-        gotoSlide(slideNumber) {
-        this.direction = Math.sign(this.current-slideNumber);
-        // this.direction === 1
-        //     ? (this.transitionName = "slide-next")
-        //     : (this.transitionName = "slide-prev");
-        this.current = slideNumber
-        this.transitionName = "slide-next"
-        },
-        cancelTimeout(){
-            console.log('cancel timeOut')
-            if(this.timeoutId){
-                clearTimeout(this.timeoutId)
-            }  
-        },
-        startCarousel(){
-            if(this.slides && this.slides.length){
-                this.timeoutId=setTimeout(()=>{this.gotoSlide((this.current+1)%this.slides.length)},this.slides[this.current].duration*1000)
-            }
-        }
-    },
-    mounted() {
-        this.show = true;
-        this.startCarousel()
-        window.focus()
-        window.addEventListener("blur", () => {
-        setTimeout(() => {
-            if (document.activeElement.tagName === "IFRAME") {
-            this.cancelTimeout()
-            }
-        });
-        }, { once: true });
-        
-    },
-    beforeDestroy(){
-        this.cancelTimeout()
-    },
-    watch:{
-        current(){
-            this.cancelTimeout()
-            this.startCarousel()
-        },
-        slides(){
-            this.startCarousel()
-        }
-    }
-    }
-  </script>
-  <style>
-    /* FADE IN */
-.slide {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom:70px;
-  right:0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.fade-enter-active {
-  transition: opacity 1s;
-}
-.fade-enter {
-  opacity: 0;
-}
-
-/* GO TO NEXT SLIDE */
-.slide-next-enter-active,
-.slide-next-leave-active {
-  transition: transform 2s ease-in-out;
-}
-.slide-next-enter {
-  transform: translate(100%);
-}
-.slide-next-leave-to {
-  transform: translate(-100%);
-}
-
-/* GO TO PREVIOUS SLIDE */
-.slide-prev-enter-active,
-.slide-prev-leave-active {
-  transition: transform 2s ease-in-out;
-}
-.slide-prev-enter {
-  transform: translate(-100%);
-}
-.slide-prev-leave-to {
-  transform: translate(100%);
-}
-</style>

package/src/components/carousel/slide.vue

@@ -1,39 +0,0 @@
-<template>
-     <slideContent v-if="show" v-html="content">
-     </slideContent>
-</template>
-
-<script>
-import styled from 'vue-styled-components'
-
-const slideContent=styled.div`
-    position:absolute;
-    text-align:center;
-    top:0;
-    bottom:0;
-    left:0;
-    right:0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding:20px;
-  `
-export default {
-    name: "slide",
-    data() {
-        return{}
-    },
-    props:{
-        show:{
-            required:true,
-            default:true,
-        },
-        content:{
-            required:true,
-        },
-    },
-    components:{
-        slideContent
-    }
-}
-</script>