@eturnity/eturnity_reusable_components 1.2.12 → 1.2.14

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

@@ -5,7 +5,7 @@
       :hasLabel="label && label.length > 0"
     >
       <label-wrapper v-if="label">
-        <input-label>{{ label }}</input-label>
+        <input-label :fontSize="fontSize">{{ label }}</input-label>
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
@@ -45,12 +45,12 @@
 //     alignItems="horizontal" // horizontal, vertical
 //     :isDisabled="true"
 // />
-import styled from "vue-styled-components"
-import InfoText from "../../infoText"
+import styled from 'vue-styled-components'
+import InfoText from '../../infoText'
 
 const containerProps = { inputWidth: String }
-const Container = styled("div", containerProps)`
-  width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
+const Container = styled('div', containerProps)`
+  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   position: relative;
   margin-bottom: 20px;
 `
@@ -66,22 +66,22 @@ const inputProps = {
   isError: Boolean,
   disabled: Boolean,
   fontSize: String,
-  inputWidth: String,
+  inputWidth: String
 }
-const InputContainer = styled("textarea", inputProps)`
+const InputContainer = styled('textarea', inputProps)`
   border: ${(props) =>
     props.isError
-      ? "1px solid " + props.theme.colors.red
-      : "1px solid " + props.theme.colors.mediumGray};
+      ? '1px solid ' + props.theme.colors.red
+      : '1px solid ' + props.theme.colors.mediumGray};
   padding: ${(props) =>
-    props.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
+    props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
   border-radius: 4px;
-  font-size: ${(props) => (props.fontSize ? props.fontSize : "16px")};
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
   color: ${(props) => props.theme.colors.black};
-  width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
+  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   max-width: 100%;
   box-sizing: border-box; // to allow width of 100% with padding
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "inherit")};
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'inherit')};
 
   &::placeholder {
     color: ${(props) =>
@@ -94,17 +94,17 @@ const InputContainer = styled("textarea", inputProps)`
 `
 
 const inputAttrs = { alignItems: String, hasLabel: Boolean }
-const InputWrapper = styled("div", inputAttrs)`
+const InputWrapper = styled('div', inputAttrs)`
   position: relative;
   display: grid;
   align-items: center;
   gap: 8px;
   grid-template-columns: ${(props) =>
     !props.hasLabel
-      ? "1fr"
-      : props.alignItems === "vertical"
-      ? "1fr"
-      : "auto 1fr"};
+      ? '1fr'
+      : props.alignItems === 'vertical'
+      ? '1fr'
+      : 'auto 1fr'};
 `
 
 const ErrorMessage = styled.div`
@@ -114,12 +114,14 @@ const ErrorMessage = styled.div`
   top: calc(100% + 1px);
 `
 
-const InputLabel = styled.div`
+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",
+  name: 'text-area-input',
   components: {
     Container,
     InputContainer,
@@ -127,61 +129,61 @@ export default {
     ErrorMessage,
     InfoText,
     LabelWrapper,
-    InputLabel,
+    InputLabel
   },
   props: {
     placeholder: {
       required: false,
-      default: "",
+      default: ''
     },
     isError: {
       required: false,
-      default: false,
+      default: false
     },
     rowHeight: {
       required: false,
-      default: "2",
+      default: '2'
     },
     value: {
       required: true,
-      default: null,
+      default: null
     },
     errorText: {
-      required: false,
+      required: false
     },
     isDisabled: {
       required: false,
-      default: false,
+      default: false
     },
     alignItems: {
       required: false,
-      default: "horizontal",
+      default: 'horizontal'
     },
     infoTextMessage: {
-      required: false,
+      required: false
     },
     infoTextAlign: {
-      required: false,
+      required: false
     },
     label: {
-      required: false,
+      required: false
     },
     fontSize: {
       required: false,
-      default: "16px",
+      default: '16px'
     },
     inputWidth: {
       required: false,
-      default: null,
-    },
+      default: null
+    }
   },
   methods: {
     onChangeHandler($event) {
       if (this.isDisabled) {
         return
       }
-      this.$emit("input-change", $event)
-    },
-  },
+      this.$emit('input-change', $event)
+    }
+  }
 }
 </script>