@eturnity/eturnity_reusable_components 6.50.1-EPDM-9012.0 → 6.50.1-EPDM-9466.0

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

@@ -1,251 +1,260 @@
-<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"
-        />
-      </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"
-        />
-      </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``
-
-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-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'
-    }
-  },
-  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>
+<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``
+
+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-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
+    },
+    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>