@eturnity/eturnity_reusable_components 7.30.3 → 7.32.0

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

@@ -1,256 +1,254 @@
 <template>
-  <container>
-    <flex-wrapper
-      :size="size"
+  <Container>
+    <FlexWrapper
+      :align-items="alignItems"
       :disabled="disabled"
-      :alignItems="alignItems"
       :label="label"
+      :size="size"
     >
-      <label-container
+      <LabelContainer
         v-if="label && labelAlign === 'left'"
-        :hasInfoMessage="!!infoTextMessage"
-        :colorMode="colorMode"
-        :primaryColor="primaryColor"
-        :secondaryColor="secondaryColor"
+        :color-mode="colorMode"
+        :has-info-message="!!infoTextMessage"
+        :primary-color="primaryColor"
+        :secondary-color="secondaryColor"
       >
-        <label-text :size="size">{{ label }}</label-text>
-        <info-text
-          v-if="infoTextMessage"
-          :text="infoTextMessage"
-        />
-      </label-container>
+        <LabelText :size="size">
+          {{ label }}
+        </LabelText>
+        <InfoText v-if="infoTextMessage" :text="infoTextMessage" />
+      </LabelContainer>
 
-      <switch-wrapper
-        :size="size"
+      <SwitchWrapper
+        :background-color="backgroundColor"
         :disabled="disabled"
-        :backgroundColor="backgroundColor"
+        :size="size"
       >
-        <switchOption
+        <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"
+          :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>
-      </switch-wrapper>
-      <label-container
+        </SwitchOption>
+      </SwitchWrapper>
+      <LabelContainer
         v-if="label && labelAlign === 'right'"
-        :hasInfoMessage="!!infoTextMessage"
+        :has-info-message="!!infoTextMessage"
       >
-        <label-text :size="size" :fontColor="fontColor">{{ label }}</label-text>
-        <info-text
-          @click.stop
-          v-if="infoTextMessage"
-          :text="infoTextMessage"
-        />
-      </label-container>
-    </flex-wrapper>
-  </container>
+        <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``
+  // 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"
+  // />
 
-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'};
-`
+  import styled from 'vue3-styled-components'
+  import InfoText from '../../infoText'
+  import theme from '../../../assets/theme'
+  const Container = styled.div``
 
-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;
+  const flexAttrs = {
+    label: String,
+    size: String,
+    disabled: Boolean,
+    alignItems: String,
   }
-  &:first-child {
-    border-radius: 4px 0 0 4px;
+  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,
   }
-  &:last-child {
-    border-radius: 0 4px 4px 0;
+  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;
-`
+  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
+  export default {
+    name: 'SwitchField',
+    components: {
+      Container,
+      SwitchWrapper,
+      FlexWrapper,
+      LabelText,
+      InfoText,
+      LabelContainer,
+      SwitchOption,
     },
-    backgroundColor: {
-      required: false
+    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,
+      },
     },
-    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'
+    data() {
+      return {
+        selectedValue: null,
+        primaryColor: 'white',
+        secondaryColor: 'black',
+        inactiveColor: 'grey6',
+      }
     },
-    options: {
-      required: true
+    watch: {
+      value(val) {
+        this.selectedValue = val
+      },
     },
-    value: {
-      required: false,
-      default: null
-    }
-  },
-  data() {
-    return {
-      selectedValue: null,
-      primaryColor: 'white',
-      secondaryColor: 'black',
-      inactiveColor: 'grey6'
-    }
-  },
-  created() {
-    this.selectedValue = this.value
+    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
+      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
       }
-      this.selectedValue = value
-      this.$emit('on-switch-change', this.selectedValue)
-    }
-  },
-  watch: {
-    value(val) {
-      this.selectedValue = val
-    }
+    },
+    methods: {
+      selectItem(value) {
+        if (this.disabled) {
+          return
+        }
+        this.selectedValue = value
+        this.$emit('on-switch-change', this.selectedValue)
+      },
+    },
   }
-}
 </script>

package/src/components/inputs/textAreaInput/TextAreaInput.stories.js

@@ -1,7 +1,7 @@
-import TextAreaInput from "./index.vue"
+import TextAreaInput from './index.vue'
 
 export default {
-  title: "TextAreaInput",
+  title: 'TextAreaInput',
   component: TextAreaInput,
   // argTypes: {},
 }
@@ -31,97 +31,97 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({})
 Default.args = {
-  placeholder: "Enter a comment",
+  placeholder: 'Enter a comment',
   isDisabled: false,
-  rowHeight: "2",
+  rowHeight: '2',
   isError: false,
-  errorText: "This field is required",
-  infoTextMessage: "",
-  label: "",
-  value: "",
-  alignItems: "vertical",
-  inputWidth: "350px",
+  errorText: 'This field is required',
+  infoTextMessage: '',
+  label: '',
+  value: '',
+  alignItems: 'vertical',
+  inputWidth: '350px',
 }
 
 export const Disabled = Template.bind({})
 Disabled.args = {
-  placeholder: "Enter a comment",
+  placeholder: 'Enter a comment',
   isDisabled: true,
-  rowHeight: "2",
+  rowHeight: '2',
   isError: false,
-  errorText: "This field is required",
-  infoTextMessage: "",
-  label: "",
-  value: "",
-  alignItems: "vertical",
-  inputWidth: "350px",
+  errorText: 'This field is required',
+  infoTextMessage: '',
+  label: '',
+  value: '',
+  alignItems: 'vertical',
+  inputWidth: '350px',
 }
 
 export const Error = Template.bind({})
 Error.args = {
-  placeholder: "Enter a comment",
+  placeholder: 'Enter a comment',
   isDisabled: false,
-  rowHeight: "2",
+  rowHeight: '2',
   isError: true,
-  errorText: "This field is required",
-  infoTextMessage: "",
-  label: "",
-  value: "",
-  alignItems: "vertical",
-  inputWidth: "350px",
+  errorText: 'This field is required',
+  infoTextMessage: '',
+  label: '',
+  value: '',
+  alignItems: 'vertical',
+  inputWidth: '350px',
 }
 
 export const WithLabel = Template.bind({})
 WithLabel.args = {
-  placeholder: "Enter a comment",
+  placeholder: 'Enter a comment',
   isDisabled: false,
-  rowHeight: "2",
+  rowHeight: '2',
   isError: false,
-  errorText: "This field is required",
-  infoTextMessage: "Here is some information",
-  label: "Description",
-  value: "Here is my description!",
-  alignItems: "vertical",
-  inputWidth: "350px",
+  errorText: 'This field is required',
+  infoTextMessage: 'Here is some information',
+  label: 'Description',
+  value: 'Here is my description!',
+  alignItems: 'vertical',
+  inputWidth: '350px',
 }
 
 export const HorizontalLabel = Template.bind({})
 HorizontalLabel.args = {
-  placeholder: "Enter a comment",
+  placeholder: 'Enter a comment',
   isDisabled: false,
-  rowHeight: "2",
+  rowHeight: '2',
   isError: false,
-  errorText: "This field is required",
-  infoTextMessage: "Here is some information",
-  label: "Description",
-  value: "Here is my description!",
-  alignItems: "horizontal",
-  inputWidth: "350px",
+  errorText: 'This field is required',
+  infoTextMessage: 'Here is some information',
+  label: 'Description',
+  value: 'Here is my description!',
+  alignItems: 'horizontal',
+  inputWidth: '350px',
 }
 
 export const LargerTextArea = Template.bind({})
 LargerTextArea.args = {
-  placeholder: "Enter a comment",
+  placeholder: 'Enter a comment',
   isDisabled: false,
-  rowHeight: "5",
+  rowHeight: '5',
   isError: false,
-  errorText: "This field is required",
-  infoTextMessage: "Here is some information",
-  label: "Description",
-  value: "Here is my description!",
-  alignItems: "vertical",
+  errorText: 'This field is required',
+  infoTextMessage: 'Here is some information',
+  label: 'Description',
+  value: 'Here is my description!',
+  alignItems: 'vertical',
 }
 
 export const LargerFontSize = Template.bind({})
 LargerFontSize.args = {
-  placeholder: "Enter a comment",
+  placeholder: 'Enter a comment',
   isDisabled: false,
-  rowHeight: "5",
-  fontSize: "24px",
+  rowHeight: '5',
+  fontSize: '24px',
   isError: false,
-  errorText: "This field is required",
-  infoTextMessage: "Here is some information",
-  label: "Description",
-  value: "Here is my description!",
-  alignItems: "vertical",
+  errorText: 'This field is required',
+  infoTextMessage: 'Here is some information',
+  label: 'Description',
+  value: 'Here is my description!',
+  alignItems: 'vertical',
 }