@eturnity/eturnity_reusable_components 1.2.34 → 1.2.36

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

@@ -0,0 +1,244 @@
+<template>
+    <container>
+      <flex-wrapper :size="size" :disabled="disabled" :alignItems="alignItems" :label="label">
+        <label-container
+          v-if="label && labelAlign === 'left'"
+          :hasInfoMessage="!!infoTextMessage"
+          :colorMode="colorMode"
+        >
+          <label-text :size="size">{{ label }}</label-text>
+          <info-text
+            v-if="infoTextMessage"
+            :text="infoTextMessage"
+            borderColor="#ccc"
+            size="14px"
+            :alignText="infoTextAlign"
+          />
+        </label-container>
+        
+        <switch-wrapper
+          :size="size"
+          :disabled="disabled"
+          :backgroundColor="backgroundColor"
+        >
+            <switchOption 
+                v-for="(item,index) in options"
+                :key="index"
+                @click="selectItem(item.value)"
+                :isActive="selectedValue==item.value"
+                :colorMode="colorMode"
+                :primaryColor="primaryColor"
+                :secondaryColor="secondaryColor"
+                :inactiveColor="inactiveColor"
+            >
+                {{ item.content }}
+            </switchOption>
+        </switch-wrapper>
+        <label-container
+          v-if="label && labelAlign === 'right'"
+          :hasInfoMessage="!!infoTextMessage"
+        >
+          <label-text :size="size" :fontColor="fontColor">{{ label }}</label-text>
+          <info-text
+            @click.native.stop
+            v-if="infoTextMessage"
+            :text="infoTextMessage"
+            borderColor="#ccc"
+            size="14px"
+            :alignText="infoTextAlign"
+          />
+        </label-container>
+      </flex-wrapper>
+    </container>
+  </template>
+  
+  <script>
+    // import Toggle from "@eturnity/eturnity_reusable_components/src/components/inputs/toggle"
+    // To use:
+      // <SwitchField
+      //   @on-switch-change="onInputChange($event)"
+      //   :options="[{value:0,content:'zero'},{value:1,content:'one'},{value:2,content:'two'}]"
+      //   :value="1"
+      //   label="label"
+      //   toggleColor="red"
+      //   size="large"
+      //   backgroundColor="blue"
+      //   labelAlign="left"
+      //   fontColor="black"
+      //   :disabled="false"
+      // />
+  
+import styled from "vue-styled-components"
+  import InfoText from "../../infoText"
+  import theme from "../../../assets/theme"
+  const Container = styled.div`
+    display: inline-block;
+  `
+  
+  const flexAttrs = { label:String,size: String, disabled: Boolean,alignItems: String }
+  const FlexWrapper = styled("div", flexAttrs)`
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-gap: 10px;
+    align-items: center;
+    cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+    grid-template-columns: ${(props) =>
+    props.alignItems === 'vertical' || !props.label ? '1fr' : 'auto 1fr'};
+  `
+  
+  const toggleAttrs = {
+    size: String,
+    fontColor: String,
+    disabled: Boolean,
+    backgroundColor: String,
+    isChecked: Boolean,
+  }
+  const LabelText = styled("div", toggleAttrs)`
+    color: white;
+    font-size: 13px;
+    font-family: 'Lato-Bold',Arial;
+  `
+  
+  const SwitchWrapper = styled("span", toggleAttrs)`
+    display: flex;
+    position: relative;
+    cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+    height: ${(props) =>
+      props.size === "medium"
+        ? "24px"
+        : props.size === "small"
+        ? "16px"
+        : "24px"};
+  `
+  const optionAttrs={isActive:Boolean,primaryColor:String,secondaryColor:String,inactiveColor:String}
+  const switchOption=styled('div',optionAttrs)`
+    color:${props=>props.isActive?props.primaryColor:props.inactiveColor};
+    background-color:${props=>props.isActive?props.secondaryColor:"transparent"};
+    border:1px solid ${props=>props.isActive?props.secondaryColor:props.inactiveColor};
+    display:flex;
+    align-items:center;
+	font-size: 14px;
+	line-height: 1;
+	text-align: center;
+	padding: 10px;
+	margin-right: -1px;
+	transition: all 0.1s ease-in-out;
+    overflow:hidden;
+    & :hover{
+        cursor: pointer;
+    }
+    &:first-child {
+	    border-radius: 4px 0 0 4px;
+    }
+    &:last-child {
+	    border-radius: 0 4px 4px 0;
+    }
+
+  `
+  
+  const labelAttrs = { hasInfoMessage: Boolean }
+  const LabelContainer = styled("div", labelAttrs)`
+    display: inline-grid;
+    grid-template-columns: ${(props) =>
+      props.hasInfoMessage ? "auto 1fr" : "auto"};
+    grid-gap: 12px;
+    align-items: center;
+  `
+  
+  export default {
+    name: "switchField",
+    components: {
+      Container,
+      SwitchWrapper,
+      FlexWrapper,
+      LabelText,
+      InfoText,
+      LabelContainer,
+      switchOption,
+    },
+    props: {
+      label: {
+        required: false,
+        default: "",
+      },
+      toggleColor: {
+        required: false,
+      },
+      backgroundColor: {
+        required: false,
+      },
+      size: {
+        required: false,
+        default: "small",
+      },
+      labelAlign: {
+        required: false,
+        default: "left",
+      },
+      fontColor: {
+        required: false,
+      },
+      disabled: {
+        required: false,
+        default: false,
+      },
+      infoTextMessage: {
+        required: false,
+      },
+      infoTextAlign: {
+        required: false,
+      },
+      colorMode: {
+        required: false,
+        default:'light'
+      },
+      alignItems:{
+        required: false,
+        default: 'horizontal'
+      },
+      options:{
+        required:true
+      },
+      value:{
+        required:false,
+        default:null
+      },
+    },
+    data() {
+        return {
+            selectedValue:null,
+            primaryColor:"white",
+            secondaryColor:"black",
+            inactiveColor:"grey6"
+        }
+    },
+    created(){
+        this.selectedValue=this.value
+        
+        if(this.colorMode=='dark'){
+            this.primaryColor=theme.colors.black
+            this.secondaryColor=theme.colors.white
+            this.inactiveColor=theme.colors.grey6
+        }else{
+            this.primaryColor=theme.colors.white
+            this.secondaryColor=theme.colors.black
+            this.inactiveColor=theme.colors.grey6
+        }
+    },
+    methods: {
+        selectItem(value){
+            if (this.disabled) {
+                return
+            }
+            this.selectedValue=value
+            this.$emit("on-switch-change", this.selectedValue)
+        },
+    },
+    watch:{
+      value(val){
+        this.selectedValue=val
+      }
+    }
+  }
+  </script>
+  

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

@@ -1,5 +1,6 @@
 <template>
   <page-wrapper
+    :position="position"
     :isOpen="isOpen"
     :class="{ visible: isOpen, hidden: !isOpen }"
     @click.native="onOutsideClose()"
@@ -36,9 +37,9 @@ const ContentContainer = styled('div', contentAttrs)`
   visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
 `
 
-const pageAttrs = { isOpen: Boolean, backdrop: String }
+const pageAttrs = { isOpen: Boolean, backdrop: String,position:String }
 const PageWrapper = styled('div', pageAttrs)`
-  position: fixed;
+  position: ${(props) => props.position}
   display: grid;
   top: 0;
   left: 0;
@@ -132,6 +133,10 @@ export default {
     backdrop: {
       required: false,
       default: 'white'
+    },
+    position: {
+      required: false,
+      default: 'fixed'
     }
   },
   methods: {

package/src/helpers/numberConverter.js

@@ -94,6 +94,7 @@ export const numberToString = ({ value, numberPrecision }) => {
       ? 'fr-fr'
       : localStorage.getItem('lang')
     : 'en-US'
+  if(selectedLang=="null"){selectedLang='en-US'}
   value=parseFloat(value)
   return value.toLocaleString(selectedLang, {
     minimumFractionDigits: numberPrecision,