@eturnity/eturnity_reusable_components 7.24.3-EPDM-10576.1 → 7.24.3-EPDM-11320.0

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

@@ -1,57 +1,64 @@
 <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
+        <LabelText :size="size">
+          {{ label }}
+        </LabelText>
+        <InfoText
           v-if="infoTextMessage"
           :text="infoTextMessage"
         />
-      </label-container>
+      </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
+        <LabelText
+          :font-color="fontColor"
+          :size="size"
+        >
+          {{ label }}
+        </LabelText>
+        <InfoText
           v-if="infoTextMessage"
           :text="infoTextMessage"
+          @click.stop
         />
-      </label-container>
-    </flex-wrapper>
-  </container>
+      </LabelContainer>
+    </FlexWrapper>
+  </Container>
 </template>
 
 <script>
@@ -70,43 +77,43 @@
 //   :disabled="false"
 // />
 
-import styled from 'vue3-styled-components'
-import InfoText from '../../infoText'
-import theme from '../../../assets/theme'
-const Container = styled.div``
+  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)`
+  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'};
+  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)`
+  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)`
+  const SwitchWrapper = styled('span', toggleAttrs)`
   display: flex;
   position: relative;
   cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
@@ -115,19 +122,19 @@ const SwitchWrapper = styled('span', toggleAttrs)`
       ? '24px'
       : props.size === 'small'
       ? '16px'
-      : '24px'};
+  : '24px'};
 `
-const optionAttrs = {
-  isActive: Boolean,
-  primaryColor: String,
-  secondaryColor: String,
-  inactiveColor: String
-}
-const switchOption = styled('div', optionAttrs)`
+  const optionAttrs = {
+    isActive: Boolean,
+    primaryColor: String,
+    secondaryColor: String,
+    inactiveColor: String
+  }
+  const SwitchOption = styled('div', optionAttrs)`
   color: ${(props) =>
-    props.isActive ? props.primaryColor : props.inactiveColor};
+  props.isActive ? props.primaryColor : props.inactiveColor};
   background-color: ${(props) =>
-    props.isActive ? props.secondaryColor : 'transparent'};
+  props.isActive ? props.secondaryColor : 'transparent'};
   border: 1px solid
     ${(props) => (props.isActive ? props.secondaryColor : props.inactiveColor)};
   display: flex;
@@ -152,105 +159,105 @@ const switchOption = styled('div', optionAttrs)`
   }
 `
 
-const labelAttrs = { hasInfoMessage: Boolean }
-const LabelContainer = styled('div', labelAttrs)`
+  const labelAttrs = { hasInfoMessage: Boolean }
+  const LabelContainer = styled('div', labelAttrs)`
   display: inline-grid;
   grid-template-columns: ${(props) =>
-    props.hasInfoMessage ? 'auto 1fr' : 'auto'};
+  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
+  export default {
+    name: 'SwitchField',
+    components: {
+      Container,
+      SwitchWrapper,
+      FlexWrapper,
+      LabelText,
+      InfoText,
+      LabelContainer,
+      SwitchOption
     },
-    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'
+    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
+      }
     },
-    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
+      }
+    },
+    methods: {
+      selectItem(value) {
+        if (this.disabled) {
+          return
+        }
+        this.selectedValue = value
+        this.$emit('on-switch-change', this.selectedValue)
       }
-      this.selectedValue = value
-      this.$emit('on-switch-change', this.selectedValue)
-    }
-  },
-  watch: {
-    value(val) {
-      this.selectedValue = val
     }
   }
-}
 </script>

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

@@ -1,38 +1,45 @@
 <template>
-  <container :inputWidth="inputWidth">
-    <input-wrapper
-      :alignItems="alignItems"
-      :hasLabel="label && label.length > 0"
+  <Container :input-width="inputWidth">
+    <InputWrapper
+      :align-items="alignItems"
+      :has-label="label && label.length > 0"
     >
-      <label-wrapper v-if="label">
-        <input-label :fontSize="fontSize" :data-id="labelDataId">{{
-          label
-        }}</input-label>
-        <info-text
+      <LabelWrapper v-if="label">
+        <InputLabel
+          :data-id="labelDataId"
+          :font-size="fontSize"
+        >
+          {{
+            label
+          }}
+        </InputLabel>
+        <InfoText
           v-if="infoTextMessage"
-          :text="infoTextMessage"
           size="16px"
+          :text="infoTextMessage"
         />
-      </label-wrapper>
-      <input-container
-        :inputWidth="inputWidth"
-        :isError="isError"
-        :fontSize="fontSize"
+      </LabelWrapper>
+      <InputContainer
         :disabled="isDisabled"
+        :font-size="fontSize"
+        :input-width="inputWidth"
+        :is-error="isError"
       >
         <textarea
+          :data-id="inputDataId"
+          :disabled="isDisabled"
           :placeholder="placeholder"
+          :resize="resize"
           :rows="rowHeight"
           :value="value"
-          :disabled="isDisabled"
           @input="onChangeHandler"
-          :resize="resize"
-          :data-id="inputDataId"
-        />
-      </input-container>
-    </input-wrapper>
-    <error-message v-if="isError && errorText">{{ errorText }}</error-message>
-  </container>
+        ></textarea>
+      </InputContainer>
+    </InputWrapper>
+    <ErrorMessage v-if="isError && errorText">
+      {{ errorText }}
+    </ErrorMessage>
+  </Container>
 </template>
 
 <script>
@@ -51,39 +58,39 @@
 //     :isDisabled="true"
 //     fontSize="13px"
 // />
-import styled from 'vue3-styled-components'
-import InfoText from '../../infoText'
-import ErrorMessage from '../../errorMessage'
+  import styled from 'vue3-styled-components'
+  import InfoText from '../../infoText'
+  import ErrorMessage from '../../errorMessage'
 
-const containerProps = { inputWidth: String }
-const Container = styled('div', containerProps)`
+  const containerProps = { inputWidth: String }
+  const Container = styled('div', containerProps)`
   width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   position: relative;
   margin-bottom: 20px;
 `
 
-const LabelWrapper = styled.div`
+  const LabelWrapper = styled.div`
   display: inline-grid;
   grid-template-columns: auto 1fr;
   grid-gap: 12px;
   align-items: center;
 `
 
-const inputProps = {
-  isError: Boolean,
-  disabled: Boolean,
-  fontSize: String,
-  inputWidth: String
-}
+  const inputProps = {
+    isError: Boolean,
+    disabled: Boolean,
+    fontSize: String,
+    inputWidth: String
+  }
 
-const InputContainer = styled('div', inputProps)`
+  const InputContainer = styled('div', inputProps)`
   textarea {
     border: ${(props) =>
       props.isError
         ? `1px solid ${props.theme.colors.red} !important`
-        : `1px solid ${props.theme.colors.grey4} !important`};
+  : `1px solid ${props.theme.colors.grey4} !important`};
     padding: ${(props) =>
-      props.hasUnit ? '11px 40px 11px 10px !important' : '15px !important'};
+  props.hasUnit ? '11px 40px 11px 10px !important' : '15px !important'};
     border-radius: 4px !important;
     font-size: ${(props) => `${props.fontSize} !important`};
     color: ${(props) => `${props.theme.colors.grey1} !important`};
@@ -102,8 +109,8 @@ const InputContainer = styled('div', inputProps)`
   }
 `
 
-const inputAttrs = { alignItems: String, hasLabel: Boolean }
-const InputWrapper = styled('div', inputAttrs)`
+  const inputAttrs = { alignItems: String, hasLabel: Boolean }
+  const InputWrapper = styled('div', inputAttrs)`
   position: relative;
   display: grid;
   align-items: center;
@@ -113,88 +120,88 @@ const InputWrapper = styled('div', inputAttrs)`
       ? '1fr'
       : props.alignItems === 'vertical'
       ? '1fr'
-      : 'auto 1fr'};
+  : 'auto 1fr'};
 `
 
-const labelAttrs = { fontSize: String }
-const InputLabel = styled('div', labelAttrs)`
+  const labelAttrs = { fontSize: String }
+  const InputLabel = styled('div', labelAttrs)`
   font-weight: bold;
   font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
 `
 
-export default {
-  name: 'text-area-input',
-  components: {
-    Container,
-    InputContainer,
-    InputWrapper,
-    ErrorMessage,
-    InfoText,
-    LabelWrapper,
-    InputLabel
-  },
-  props: {
-    placeholder: {
-      required: false,
-      default: ''
-    },
-    isError: {
-      required: false,
-      default: false
-    },
-    rowHeight: {
-      required: false,
-      default: '2'
+  export default {
+    name: 'TextAreaInput',
+    components: {
+      Container,
+      InputContainer,
+      InputWrapper,
+      ErrorMessage,
+      InfoText,
+      LabelWrapper,
+      InputLabel
     },
-    value: {
-      required: true,
-      default: null
-    },
-    errorText: {
-      required: false
-    },
-    isDisabled: {
-      required: false,
-      default: false
-    },
-    alignItems: {
-      required: false,
-      default: 'horizontal'
-    },
-    infoTextMessage: {
-      required: false
-    },
-    label: {
-      required: false
-    },
-    fontSize: {
-      required: false,
-      default: '13px'
-    },
-    inputWidth: {
-      required: false,
-      default: null
-    },
-    resize: {
-      required: false,
-      default: 'none'
-    },
-    labelDataId: {
-      required: false,
-      default: ''
+    props: {
+      placeholder: {
+        required: false,
+        default: ''
+      },
+      isError: {
+        required: false,
+        default: false
+      },
+      rowHeight: {
+        required: false,
+        default: '2'
+      },
+      value: {
+        required: true,
+        default: null
+      },
+      errorText: {
+        required: false
+      },
+      isDisabled: {
+        required: false,
+        default: false
+      },
+      alignItems: {
+        required: false,
+        default: 'horizontal'
+      },
+      infoTextMessage: {
+        required: false
+      },
+      label: {
+        required: false
+      },
+      fontSize: {
+        required: false,
+        default: '13px'
+      },
+      inputWidth: {
+        required: false,
+        default: null
+      },
+      resize: {
+        required: false,
+        default: 'none'
+      },
+      labelDataId: {
+        required: false,
+        default: ''
+      },
+      inputDataId: {
+        required: false,
+        default: ''
+      }
     },
-    inputDataId: {
-      required: false,
-      default: ''
-    }
-  },
-  methods: {
-    onChangeHandler($event) {
-      if (this.isDisabled) {
-        return
+    methods: {
+      onChangeHandler($event) {
+        if (this.isDisabled) {
+          return
+        }
+        this.$emit('input-change', $event.target.value)
       }
-      this.$emit('input-change', $event.target.value)
     }
   }
-}
 </script>