@eturnity/eturnity_reusable_components 7.45.5-EPDM-11313-EPDM-11314.2 → 7.45.5-EPDM-12680.0

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

@@ -1,254 +1,254 @@
-<template>
-  <Container>
-    <FlexWrapper
-      :align-items="alignItems"
-      :disabled="disabled"
-      :label="label"
-      :size="size"
-    >
-      <LabelContainer
-        v-if="label && labelAlign === 'left'"
-        :color-mode="colorMode"
-        :has-info-message="!!infoTextMessage"
-        :primary-color="primaryColor"
-        :secondary-color="secondaryColor"
-      >
-        <LabelText :size="size">
-          {{ label }}
-        </LabelText>
-        <InfoText v-if="infoTextMessage" :text="infoTextMessage" />
-      </LabelContainer>
-
-      <SwitchWrapper
-        :background-color="backgroundColor"
-        :disabled="disabled"
-        :size="size"
-      >
-        <SwitchOption
-          v-for="(item, index) in options"
-          :key="index"
-          :color-mode="colorMode"
-          :data-id="item.hasOwnProperty('dataId') ? item.dataId : ''"
-          :inactive-color="inactiveColor"
-          :is-active="selectedValue == item.value"
-          :primary-color="primaryColor"
-          :secondary-color="secondaryColor"
-          @click="selectItem(item.value)"
-        >
-          {{ item.content }}
-        </SwitchOption>
-      </SwitchWrapper>
-      <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:
-  // <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 'vue3-styled-components'
-  import InfoText from '../../infoText'
-  import theme from '../../../assets/theme'
-  const Container = styled.div``
-
-  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,
-    secondaryColor: String,
-    primaryColor: String,
-  }
-  const LabelText = styled('div', toggleAttrs)`
-    color: ${(props) => props.primaryColor};
-    font-size: 13px;
-    font-weight: 700;
-  `
-
-  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;
-    justify-content: center;
-    flex-grow: 1;
-    font-size: 13px;
-    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,
-      },
-      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',
-      }
-    },
-    watch: {
-      value(val) {
-        this.selectedValue = val
-      },
-    },
-    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)
-      },
-    },
-  }
-</script>
+<template>
+  <Container>
+    <FlexWrapper
+      :align-items="alignItems"
+      :disabled="disabled"
+      :label="label"
+      :size="size"
+    >
+      <LabelContainer
+        v-if="label && labelAlign === 'left'"
+        :color-mode="colorMode"
+        :has-info-message="!!infoTextMessage"
+        :primary-color="primaryColor"
+        :secondary-color="secondaryColor"
+      >
+        <LabelText :size="size">
+          {{ label }}
+        </LabelText>
+        <InfoText v-if="infoTextMessage" :text="infoTextMessage" />
+      </LabelContainer>
+
+      <SwitchWrapper
+        :background-color="backgroundColor"
+        :disabled="disabled"
+        :size="size"
+      >
+        <SwitchOption
+          v-for="(item, index) in options"
+          :key="index"
+          :color-mode="colorMode"
+          :data-id="item.hasOwnProperty('dataId') ? item.dataId : ''"
+          :inactive-color="inactiveColor"
+          :is-active="selectedValue == item.value"
+          :primary-color="primaryColor"
+          :secondary-color="secondaryColor"
+          @click="selectItem(item.value)"
+        >
+          {{ item.content }}
+        </SwitchOption>
+      </SwitchWrapper>
+      <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:
+  // <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 'vue3-styled-components'
+  import InfoText from '../../infoText'
+  import theme from '../../../assets/theme'
+  const Container = styled.div``
+
+  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,
+    secondaryColor: String,
+    primaryColor: String,
+  }
+  const LabelText = styled('div', toggleAttrs)`
+    color: ${(props) => props.primaryColor};
+    font-size: 13px;
+    font-weight: 700;
+  `
+
+  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;
+    justify-content: center;
+    flex-grow: 1;
+    font-size: 13px;
+    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,
+      },
+      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',
+      }
+    },
+    watch: {
+      value(val) {
+        this.selectedValue = val
+      },
+    },
+    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)
+      },
+    },
+  }
+</script>