@eturnity/eturnity_reusable_components 7.8.1-EPDM-8441.1 → 7.8.2

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

@@ -1,298 +1,298 @@
-<template>
-  <container>
-    <flex-wrapper
-      :size="size"
-      :disabled="disabled"
-      @click="onToggleChange"
-      :data-id="dataId"
-    >
-      <label-container
-        v-if="label && labelAlign === 'left'"
-        :hasInfoMessage="!!infoTextMessage"
-      >
-        <label-text :size="size" :fontColor="fontColor">{{ label }}</label-text>
-        <info-text
-          v-if="infoTextMessage"
-          :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
-        />
-      </label-container>
-      <toggle-wrapper
-        role="checkbox"
-        :checked="isChecked"
-        :size="size"
-        tabindex="0"
-        @keydown.space.prevent="onToggleChange"
-        :disabled="disabled"
-        :backgroundColor="backgroundColor"
-        :isChecked="isChecked"
-      >
-        <toggle-background
-          :backgroundColor="backgroundColor"
-          :isChecked="isChecked"
-          :disabled="disabled"
-        />
-        <toggle-dot
-          :isChecked="isChecked"
-          :toggleColor="toggleColor"
-          :size="size"
-          :disabled="disabled"
-        />
-      </toggle-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:
-// <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"
-//   infoTextAlign="right" // left by default
-//   infoTextMessage="My info message"
-//   data-id="test_data_id"
-// />
-
-import styled from 'vue-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
-    },
-    infoTextAlign: {
-      required: false
-    },
-    dataId: {
-      type: String,
-      default: ''
-    }
-  },
-  methods: {
-    onToggleChange() {
-      if (this.disabled) {
-        return
-      }
-      this.$emit('on-toggle-change', !this.isChecked)
-    }
-  }
-}
-</script>
+<template>
+  <container>
+    <flex-wrapper
+      :size="size"
+      :disabled="disabled"
+      @click="onToggleChange"
+      :data-id="dataId"
+    >
+      <label-container
+        v-if="label && labelAlign === 'left'"
+        :hasInfoMessage="!!infoTextMessage"
+      >
+        <label-text :size="size" :fontColor="fontColor">{{ label }}</label-text>
+        <info-text
+          v-if="infoTextMessage"
+          :text="infoTextMessage"
+          borderColor="#ccc"
+          size="14px"
+          :alignText="infoTextAlign"
+        />
+      </label-container>
+      <toggle-wrapper
+        role="checkbox"
+        :checked="isChecked"
+        :size="size"
+        tabindex="0"
+        @keydown.space.prevent="onToggleChange"
+        :disabled="disabled"
+        :backgroundColor="backgroundColor"
+        :isChecked="isChecked"
+      >
+        <toggle-background
+          :backgroundColor="backgroundColor"
+          :isChecked="isChecked"
+          :disabled="disabled"
+        />
+        <toggle-dot
+          :isChecked="isChecked"
+          :toggleColor="toggleColor"
+          :size="size"
+          :disabled="disabled"
+        />
+      </toggle-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:
+// <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"
+//   infoTextAlign="right" // left by default
+//   infoTextMessage="My info message"
+//   data-id="test_data_id"
+// />
+
+import styled from 'vue-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
+    },
+    infoTextAlign: {
+      required: false
+    },
+    dataId: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    onToggleChange() {
+      if (this.disabled) {
+        return
+      }
+      this.$emit('on-toggle-change', !this.isChecked)
+    }
+  }
+}
+</script>