@psff/cmp-textarea v1.0.3

@psff/cmp-textarea psff-textarea

Component to show textareas.

Getting started

1. Setup the package as a dependencie.

   yarn add @psff/cmp-textarea

2. Use the component <psff-textarea />.

   import PsffTextarea from '@psff/cmp-textarea'
   
   @Component({
     components: {
       'psff-textarea': PsffTextarea,
     },
   })
   export default class MyComponent extends Vue {}

   .my-textarea {
     --psff-textarea-background-color: #fabada;
     --psff-textarea-label-color: black;
   }

   <psff-textarea
     class="my-textarea"
     label="Email"
     type="email"
     placeholder="ex. kay.mcnulty@upenn.edu" />

Specifications

Component <psff-textarea />

This component render an textarea.

Parameters:

Extend <textarea> tag parameters with:

• label (string, optional): to show a label for the textarea.
• errorMessage (string, optional): 'right')*: to show an error message.

Events

• change (value: string): new value after user interaction.

Custom propperties:

• Generic:

  • --psff-textarea-label-color (default #5e88fc)
  • --psff-textarea-label-font-family (default inherit)
  • --psff-textarea-label-font-size (default inherit)
  • --psff-textarea-label-font-weight (default inherit)
  • --psff-textarea-label-line-height (default inherit)
  • --psff-textarea-label-margin-bottom (default 4px)
  • --psff-textarea-background-color (default #fff)
  • --psff-textarea-border-color (default #b8cbfd)
  • --psff-textarea-border-color-error (default #ffc0b9)
  • --psff-textarea-border-radius (default 4px)
  • --psff-textarea-border-size (default 1px)
  • --psff-textarea-box-shadow (default 2px 2px 4px rgba(94, 136, 252, .1))
  • --psff-textarea-color (default #313131)
  • --psff-textarea-font-family (default inherit)
  • --psff-textarea-font-size (default inherit)
  • --psff-textarea-font-weight (default inherit)
  • --psff-textarea-line-height (default inherit)
  • --psff-textarea-error-color (default #fb5f4f)
  • --psff-textarea-error-font-family (default inherit)
  • --psff-textarea-padding (default 16px)
  • --psff-textarea-placeholder-color (default none)

• Disabled:

  • --psff-textarea-label-color-disabled (default #848484)
  • --psff-textarea-background-color-disabled (default #ede9e5)
  • --psff-textarea-border-color-disabled (default #afaeaf)
  • --psff-textarea-color-disabled (default #afaeaf)

• Focused:

  • --psff-textarea-border-color-focused (default #5e88fc)
  • --psff-textarea-border-color-error-focused (default #fb5f4f)