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

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

@@ -1,64 +1,57 @@
 <template>
-  <Container>
-    <FlexWrapper
-      :align-items="alignItems"
+  <container>
+    <flex-wrapper
+      :size="size"
       :disabled="disabled"
+      :alignItems="alignItems"
       :label="label"
-      :size="size"
     >
-      <LabelContainer
+      <label-container
         v-if="label && labelAlign === 'left'"
-        :color-mode="colorMode"
-        :has-info-message="!!infoTextMessage"
-        :primary-color="primaryColor"
-        :secondary-color="secondaryColor"
+        :hasInfoMessage="!!infoTextMessage"
+        :colorMode="colorMode"
+        :primaryColor="primaryColor"
+        :secondaryColor="secondaryColor"
       >
-        <LabelText :size="size">
-          {{ label }}
-        </LabelText>
-        <InfoText
+        <label-text :size="size">{{ label }}</label-text>
+        <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
         />
-      </LabelContainer>
+      </label-container>
 
-      <SwitchWrapper
-        :background-color="backgroundColor"
-        :disabled="disabled"
+      <switch-wrapper
         :size="size"
+        :disabled="disabled"
+        :backgroundColor="backgroundColor"
       >
-        <SwitchOption
+        <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)"
+          :isActive="selectedValue == item.value"
+          :colorMode="colorMode"
+          :primaryColor="primaryColor"
+          :secondaryColor="secondaryColor"
+          :inactiveColor="inactiveColor"
+          :data-id="item.hasOwnProperty('dataId') ? item.dataId : ''"
         >
           {{ item.content }}
-        </SwitchOption>
-      </SwitchWrapper>
-      <LabelContainer
+        </switchOption>
+      </switch-wrapper>
+      <label-container
         v-if="label && labelAlign === 'right'"
-        :has-info-message="!!infoTextMessage"
+        :hasInfoMessage="!!infoTextMessage"
       >
-        <LabelText
-          :font-color="fontColor"
-          :size="size"
-        >
-          {{ label }}
-        </LabelText>
-        <InfoText
+        <label-text :size="size" :fontColor="fontColor">{{ label }}</label-text>
+        <info-text
+          @click.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          @click.stop
         />
-      </LabelContainer>
-    </FlexWrapper>
-  </Container>
+      </label-container>
+    </flex-wrapper>
+  </container>
 </template>
 
 <script>
@@ -77,43 +70,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')};
@@ -122,19 +115,19 @@
       ? '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;
@@ -159,105 +152,105 @@
   }
 `
 
-  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
+export default {
+  name: 'switchField',
+  components: {
+    Container,
+    SwitchWrapper,
+    FlexWrapper,
+    LabelText,
+    InfoText,
+    LabelContainer,
+    switchOption
+  },
+  props: {
+    label: {
+      required: false,
+      default: ''
     },
-    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
-      }
+    toggleColor: {
+      required: false
     },
-    data() {
-      return {
-        selectedValue: null,
-        primaryColor: 'white',
-        secondaryColor: 'black',
-        inactiveColor: 'grey6'
-      }
+    backgroundColor: {
+      required: false
     },
-    watch: {
-      value(val) {
-        this.selectedValue = val
-      }
+    size: {
+      required: false,
+      default: 'small'
     },
-    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
-      }
+    labelAlign: {
+      required: false,
+      default: 'left'
+    },
+    fontColor: {
+      required: false
+    },
+    disabled: {
+      required: false,
+      default: false
+    },
+    infoTextMessage: {
+      required: false
+    },
+    colorMode: {
+      required: false,
+      default: 'light'
     },
-    methods: {
-      selectItem(value) {
-        if (this.disabled) {
-          return
-        }
-        this.selectedValue = value
-        this.$emit('on-switch-change', this.selectedValue)
+    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>

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

@@ -1,45 +1,38 @@
 <template>
-  <Container :input-width="inputWidth">
-    <InputWrapper
-      :align-items="alignItems"
-      :has-label="label && label.length > 0"
+  <container :inputWidth="inputWidth">
+    <input-wrapper
+      :alignItems="alignItems"
+      :hasLabel="label && label.length > 0"
     >
-      <LabelWrapper v-if="label">
-        <InputLabel
-          :data-id="labelDataId"
-          :font-size="fontSize"
-        >
-          {{
-            label
-          }}
-        </InputLabel>
-        <InfoText
+      <label-wrapper v-if="label">
+        <input-label :fontSize="fontSize" :data-id="labelDataId">{{
+          label
+        }}</input-label>
+        <info-text
           v-if="infoTextMessage"
-          size="16px"
           :text="infoTextMessage"
+          size="16px"
         />
-      </LabelWrapper>
-      <InputContainer
+      </label-wrapper>
+      <input-container
+        :inputWidth="inputWidth"
+        :isError="isError"
+        :fontSize="fontSize"
         :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"
-        ></textarea>
-      </InputContainer>
-    </InputWrapper>
-    <ErrorMessage v-if="isError && errorText">
-      {{ errorText }}
-    </ErrorMessage>
-  </Container>
+          :resize="resize"
+          :data-id="inputDataId"
+        />
+      </input-container>
+    </input-wrapper>
+    <error-message v-if="isError && errorText">{{ errorText }}</error-message>
+  </container>
 </template>
 
 <script>
@@ -58,39 +51,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`};
@@ -109,8 +102,8 @@
   }
 `
 
-  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;
@@ -120,88 +113,88 @@
       ? '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: 'TextAreaInput',
-    components: {
-      Container,
-      InputContainer,
-      InputWrapper,
-      ErrorMessage,
-      InfoText,
-      LabelWrapper,
-      InputLabel
+export default {
+  name: 'text-area-input',
+  components: {
+    Container,
+    InputContainer,
+    InputWrapper,
+    ErrorMessage,
+    InfoText,
+    LabelWrapper,
+    InputLabel
+  },
+  props: {
+    placeholder: {
+      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: ''
-      }
+    isError: {
+      required: false,
+      default: false
+    },
+    rowHeight: {
+      required: false,
+      default: '2'
     },
-    methods: {
-      onChangeHandler($event) {
-        if (this.isDisabled) {
-          return
-        }
-        this.$emit('input-change', $event.target.value)
+    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: ''
+    }
+  },
+  methods: {
+    onChangeHandler($event) {
+      if (this.isDisabled) {
+        return
       }
+      this.$emit('input-change', $event.target.value)
     }
   }
+}
 </script>