@eturnity/eturnity_reusable_components 7.32.1-qa-elisee-7.32.1 → 7.33.0-EPDM-11313.0

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

@@ -1,285 +1,285 @@
-<template>
-  <Container>
-    <FlexWrapper
-      :data-id="dataId"
-      :disabled="disabled"
-      :size="size"
-      @click="onToggleChange"
-    >
-      <LabelContainer
-        v-if="label && labelAlign === 'left'"
-        :has-info-message="!!infoTextMessage"
-      >
-        <LabelText :font-color="fontColor" :size="size">
-          {{ label }}
-        </LabelText>
-        <InfoText v-if="infoTextMessage" :text="infoTextMessage" />
-      </LabelContainer>
-      <ToggleWrapper
-        :background-color="backgroundColor"
-        :checked="isChecked"
-        :disabled="disabled"
-        :is-checked="isChecked"
-        role="checkbox"
-        :size="size"
-        tabindex="0"
-        @keydown.space.prevent="onToggleChange"
-      >
-        <ToggleBackground
-          :background-color="backgroundColor"
-          :disabled="disabled"
-          :is-checked="isChecked"
-        />
-        <ToggleDot
-          :disabled="disabled"
-          :is-checked="isChecked"
-          :size="size"
-          :toggle-color="toggleColor"
-        />
-      </ToggleWrapper>
-      <LabelContainer
-        v-if="label && labelAlign === 'right'"
-        :has-info-message="!!infoTextMessage"
-      >
-        <LabelText :font-color="fontColor" :size="size">
-          {{ label }}
-        </LabelText>
-        <InfoText v-if="infoTextMessage" :text="infoTextMessage" @click.stop />
-      </LabelContainer>
-    </FlexWrapper>
-  </Container>
-</template>
-
-<script>
-  // import Toggle from "@eturnity/eturnity_reusable_components/src/components/inputs/toggle"
-  // To use:
-  // <toggle
-  //   @on-toggle-change="onInputChange($event)"
-  //   :isChecked="toggleValue" // Boolean
-  //   label="My Label Text"
-  //   toggleColor="red"
-  //   size="small" // small, medium
-  //   backgroundColor="blue"
-  //   labelAlign="right"
-  //   fontColor="black"
-  //   :disabled="true"
-  //   infoTextMessage="My info message"
-  //   data-id="test_data_id"
-  // />
-
-  import styled from 'vue3-styled-components'
-  import InfoText from '../../infoText'
-
-  const Container = styled.div`
-    display: inline-block;
-  `
-
-  const flexAttrs = { size: String, disabled: Boolean }
-  const FlexWrapper = styled('div', flexAttrs)`
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-gap: ${(props) =>
-      props.size === 'medium'
-        ? '20px'
-        : props.size === 'small'
-        ? '10px'
-        : '20px'};
-    align-items: center;
-    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-  `
-
-  const toggleAttrs = {
-    size: String,
-    fontColor: String,
-    disabled: Boolean,
-    backgroundColor: String,
-    isChecked: Boolean,
-  }
-  const LabelText = styled('div', toggleAttrs)`
-    color: ${(props) =>
-      props.fontColor ? props.fontColor : props.theme.colors.darkGray};
-    font-size: ${(props) =>
-      props.size === 'medium'
-        ? '16px'
-        : props.size === 'small'
-        ? '13px'
-        : '16px'};
-  `
-
-  const ToggleWrapper = styled('span', toggleAttrs)`
-  display: inline-block;
-  border: ${(props) =>
-    props.disabled
-      ? '1px solid ' + props.theme.colors.disabled
-      : props.isChecked
-      ? props.backgroundColor
-        ? '1px solid ' + props.backgroundColor
-        : '1px solid ' + props.theme.colors.green
-      : '1px solid ' + props.theme.colors.grey3}
-  position: relative;
-  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-  width: ${(props) =>
-    props.size === 'medium'
-      ? '50px'
-      : props.size === 'small'
-      ? '29px'
-      : '50px'};
-  height: ${(props) =>
-    props.size === 'medium'
-      ? '24px'
-      : props.size === 'small'
-      ? '16px'
-      : '24px'};
-  border-radius: 100px;
-
-  &:focus {
-    outline: 0;
-  }
-
-  @media (max-width: ${(props) => props.theme.screen.mobile}) {
-    width: 80px;
-    height: 40px;
-  }
-`
-
-  const backgroundAttrs = {
-    backgroundColor: String,
-    isChecked: Boolean,
-    disabled: Boolean,
-  }
-  const ToggleBackground = styled('span', backgroundAttrs)`
-    display: block;
-    border-radius: 100px;
-    height: 100%;
-    width: 100%;
-    background-color: ${(props) =>
-      props.disabled
-        ? props.theme.colors.grey5
-        : props.isChecked
-        ? props.backgroundColor
-          ? props.backgroundColor
-          : props.theme.colors.green
-        : props.theme.colors.grey3};
-    transition: 0.4s ease;
-  `
-
-  const toggleProps = {
-    isChecked: Boolean,
-    toggleColor: String,
-    size: String,
-    disabled: Boolean,
-  }
-  const ToggleDot = styled('span', toggleProps)`
-    position: absolute;
-    height: ${(props) =>
-      props.size === 'medium'
-        ? '14px'
-        : props.size === 'small'
-        ? '10px'
-        : '14px'};
-    width: ${(props) =>
-      props.size === 'medium'
-        ? '14px'
-        : props.size === 'small'
-        ? '10px'
-        : '14px'};
-    left: 3px;
-    bottom: ${(props) =>
-      props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
-    background-color: ${(props) =>
-      props.disabled
-        ? props.theme.colors.disabled
-        : props.isChecked
-        ? props.toggleColor
-          ? props.toggleColor
-          : props.theme.colors.white
-        : props.theme.colors.white};
-    border-radius: 100%;
-    transition: transform 0.4s ease;
-    transform: ${(props) =>
-      props.isChecked
-        ? props.size === 'medium'
-          ? 'translateX(25px)'
-          : props.size === 'small'
-          ? 'translateX(12px)'
-          : 'translateX(25px)'
-        : 'translateX(0)'};
-
-    @media (max-width: ${(props) => props.theme.screen.mobile}) {
-      height: 24px;
-      width: 24px;
-      transform: ${(props) =>
-        props.isChecked ? 'translateX(25px)' : 'translateX(0)'};
-      bottom: 8px;
-    }
-  `
-
-  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: 'Toggle',
-    components: {
-      Container,
-      ToggleBackground,
-      ToggleDot,
-      ToggleWrapper,
-      FlexWrapper,
-      LabelText,
-      InfoText,
-      LabelContainer,
-    },
-    props: {
-      label: {
-        required: false,
-        default: '',
-      },
-      isChecked: {
-        required: true,
-        default: false,
-      },
-      toggleColor: {
-        required: false,
-      },
-      backgroundColor: {
-        required: false,
-      },
-      size: {
-        required: false,
-        default: 'small',
-      },
-      labelAlign: {
-        required: false,
-        default: 'right',
-      },
-      fontColor: {
-        required: false,
-      },
-      disabled: {
-        required: false,
-        default: false,
-      },
-      infoTextMessage: {
-        required: false,
-      },
-      dataId: {
-        type: String,
-        default: '',
-      },
-    },
-    methods: {
-      onToggleChange() {
-        if (this.disabled) {
-          return
-        }
-        this.$emit('on-toggle-change', !this.isChecked)
-      },
-    },
-  }
-</script>
+<template>
+  <Container>
+    <FlexWrapper
+      :data-id="dataId"
+      :disabled="disabled"
+      :size="size"
+      @click="onToggleChange"
+    >
+      <LabelContainer
+        v-if="label && labelAlign === 'left'"
+        :has-info-message="!!infoTextMessage"
+      >
+        <LabelText :font-color="fontColor" :size="size">
+          {{ label }}
+        </LabelText>
+        <InfoText v-if="infoTextMessage" :text="infoTextMessage" />
+      </LabelContainer>
+      <ToggleWrapper
+        :background-color="backgroundColor"
+        :checked="isChecked"
+        :disabled="disabled"
+        :is-checked="isChecked"
+        role="checkbox"
+        :size="size"
+        tabindex="0"
+        @keydown.space.prevent="onToggleChange"
+      >
+        <ToggleBackground
+          :background-color="backgroundColor"
+          :disabled="disabled"
+          :is-checked="isChecked"
+        />
+        <ToggleDot
+          :disabled="disabled"
+          :is-checked="isChecked"
+          :size="size"
+          :toggle-color="toggleColor"
+        />
+      </ToggleWrapper>
+      <LabelContainer
+        v-if="label && labelAlign === 'right'"
+        :has-info-message="!!infoTextMessage"
+      >
+        <LabelText :font-color="fontColor" :size="size">
+          {{ label }}
+        </LabelText>
+        <InfoText v-if="infoTextMessage" :text="infoTextMessage" @click.stop />
+      </LabelContainer>
+    </FlexWrapper>
+  </Container>
+</template>
+
+<script>
+  // import Toggle from "@eturnity/eturnity_reusable_components/src/components/inputs/toggle"
+  // To use:
+  // <toggle
+  //   @on-toggle-change="onInputChange($event)"
+  //   :isChecked="toggleValue" // Boolean
+  //   label="My Label Text"
+  //   toggleColor="red"
+  //   size="small" // small, medium
+  //   backgroundColor="blue"
+  //   labelAlign="right"
+  //   fontColor="black"
+  //   :disabled="true"
+  //   infoTextMessage="My info message"
+  //   data-id="test_data_id"
+  // />
+
+  import styled from 'vue3-styled-components'
+  import InfoText from '../../infoText'
+
+  const Container = styled.div`
+    display: inline-block;
+  `
+
+  const flexAttrs = { size: String, disabled: Boolean }
+  const FlexWrapper = styled('div', flexAttrs)`
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-gap: ${(props) =>
+      props.size === 'medium'
+        ? '20px'
+        : props.size === 'small'
+        ? '10px'
+        : '20px'};
+    align-items: center;
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+  `
+
+  const toggleAttrs = {
+    size: String,
+    fontColor: String,
+    disabled: Boolean,
+    backgroundColor: String,
+    isChecked: Boolean,
+  }
+  const LabelText = styled('div', toggleAttrs)`
+    color: ${(props) =>
+      props.fontColor ? props.fontColor : props.theme.colors.darkGray};
+    font-size: ${(props) =>
+      props.size === 'medium'
+        ? '16px'
+        : props.size === 'small'
+        ? '13px'
+        : '16px'};
+  `
+
+  const ToggleWrapper = styled('span', toggleAttrs)`
+  display: inline-block;
+  border: ${(props) =>
+    props.disabled
+      ? '1px solid ' + props.theme.colors.disabled
+      : props.isChecked
+      ? props.backgroundColor
+        ? '1px solid ' + props.backgroundColor
+        : '1px solid ' + props.theme.colors.green
+      : '1px solid ' + props.theme.colors.grey3}
+  position: relative;
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+  width: ${(props) =>
+    props.size === 'medium'
+      ? '50px'
+      : props.size === 'small'
+      ? '29px'
+      : '50px'};
+  height: ${(props) =>
+    props.size === 'medium'
+      ? '24px'
+      : props.size === 'small'
+      ? '16px'
+      : '24px'};
+  border-radius: 100px;
+
+  &:focus {
+    outline: 0;
+  }
+
+  @media (max-width: ${(props) => props.theme.screen.mobile}) {
+    width: 80px;
+    height: 40px;
+  }
+`
+
+  const backgroundAttrs = {
+    backgroundColor: String,
+    isChecked: Boolean,
+    disabled: Boolean,
+  }
+  const ToggleBackground = styled('span', backgroundAttrs)`
+    display: block;
+    border-radius: 100px;
+    height: 100%;
+    width: 100%;
+    background-color: ${(props) =>
+      props.disabled
+        ? props.theme.colors.grey5
+        : props.isChecked
+        ? props.backgroundColor
+          ? props.backgroundColor
+          : props.theme.colors.green
+        : props.theme.colors.grey3};
+    transition: 0.4s ease;
+  `
+
+  const toggleProps = {
+    isChecked: Boolean,
+    toggleColor: String,
+    size: String,
+    disabled: Boolean,
+  }
+  const ToggleDot = styled('span', toggleProps)`
+    position: absolute;
+    height: ${(props) =>
+      props.size === 'medium'
+        ? '14px'
+        : props.size === 'small'
+        ? '10px'
+        : '14px'};
+    width: ${(props) =>
+      props.size === 'medium'
+        ? '14px'
+        : props.size === 'small'
+        ? '10px'
+        : '14px'};
+    left: 3px;
+    bottom: ${(props) =>
+      props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
+    background-color: ${(props) =>
+      props.disabled
+        ? props.theme.colors.disabled
+        : props.isChecked
+        ? props.toggleColor
+          ? props.toggleColor
+          : props.theme.colors.white
+        : props.theme.colors.white};
+    border-radius: 100%;
+    transition: transform 0.4s ease;
+    transform: ${(props) =>
+      props.isChecked
+        ? props.size === 'medium'
+          ? 'translateX(25px)'
+          : props.size === 'small'
+          ? 'translateX(12px)'
+          : 'translateX(25px)'
+        : 'translateX(0)'};
+
+    @media (max-width: ${(props) => props.theme.screen.mobile}) {
+      height: 24px;
+      width: 24px;
+      transform: ${(props) =>
+        props.isChecked ? 'translateX(25px)' : 'translateX(0)'};
+      bottom: 8px;
+    }
+  `
+
+  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: 'Toggle',
+    components: {
+      Container,
+      ToggleBackground,
+      ToggleDot,
+      ToggleWrapper,
+      FlexWrapper,
+      LabelText,
+      InfoText,
+      LabelContainer,
+    },
+    props: {
+      label: {
+        required: false,
+        default: '',
+      },
+      isChecked: {
+        required: true,
+        default: false,
+      },
+      toggleColor: {
+        required: false,
+      },
+      backgroundColor: {
+        required: false,
+      },
+      size: {
+        required: false,
+        default: 'small',
+      },
+      labelAlign: {
+        required: false,
+        default: 'right',
+      },
+      fontColor: {
+        required: false,
+      },
+      disabled: {
+        required: false,
+        default: false,
+      },
+      infoTextMessage: {
+        required: false,
+      },
+      dataId: {
+        type: String,
+        default: '',
+      },
+    },
+    methods: {
+      onToggleChange() {
+        if (this.disabled) {
+          return
+        }
+        this.$emit('on-toggle-change', !this.isChecked)
+      },
+    },
+  }
+</script>