@eturnity/eturnity_reusable_components 6.38.0-EDPM-8545.1 → 6.38.0-team-day.0

package/package.json

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

package/postcss.config.js

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

package/src/App.vue

@@ -1,122 +1,17 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
-    <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 }}
-        
+      <carousel :slides="slides"></carousel>
       <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 dropdownComponent from '@/components/dropdown'
-import videoThumbnail from '@/components/videoThumbnail'
-import icon from '@/components/icon'
+import carousel from '@/components/carousel'
 // import TableDropdown from "@/components/tableDropdown"
 
-const PageContainer = styled.div`
-  padding: 40px;
-`
 
 // const RowContainer = styled.div`
 //   display: inline-flex;
@@ -128,18 +23,15 @@ export default {
   name: 'App',
   components: {
     ThemeProvider,
-    PageContainer,
-    InputNumber,
-    Option,
-    Select,
-    SwitchField,
     iconCollection,
-    dropdownComponent,
-    videoThumbnail,
-    icon
+    carousel
   },
   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,7 +5,6 @@
       :minWidth="minWidth"
       :isDisabled="isDisabled"
       :customColor="customColor"
-      :noWrap="noWrap"
     >
       {{ text }}
     </button-container>
@@ -27,7 +26,7 @@ import styled from "vue-styled-components"
 
 const PageContainer = styled.div``
 
-const ButtonAttrs = { type: String, isDisabled: Boolean, minWidth: String, customColor: String, noWrap: Boolean }
+const ButtonAttrs = { type: String, isDisabled: Boolean, minWidth: String, customColor: String }
 const ButtonContainer = styled("div", ButtonAttrs)`
   padding: 7px 15px;
   font-size: 13px;
@@ -49,7 +48,6 @@ 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")};
@@ -82,10 +80,6 @@ export default {
       required: false,
       default: null,
     },
-    noWrap: {
-      required: false,
-      default: false
-    },
     minWidth: {
       required: false,
       default: null

package/src/components/carousel/index.vue

@@ -0,0 +1,173 @@
+<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:20px 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:0;
+  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

@@ -0,0 +1,39 @@
+<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>