UI Library Starter

# Input

# Description

The component provides a simple input control.

# Connection

<template>
  <section>
    <Input :value.sync="input1" placeholder="Input placeholder text" />

    <Input
      :value.sync="input2"
      placeholder="Input placeholder text"
      error="Error text error text error text error text error text error text error text error text error text error text error text error text error text error text error text error text"
    />

    <Input
      disabled
      :value.sync="input3"
      placeholder="Input placeholder text"
    />
  </section>
</template>

<script>
export default {
  data() {
    return {
      input1: '',
      input2: '',
      input3: '',
    };
  },
};
</script>

# Render

Error text error text error text error text error text error text error text error text error text error text error text error text error text

# Styles

~/src/stylus/utils/_variables.styl

$inputs = {
  height--input: 40px,

  padding: 16px,

  background--default: rgba($colors.primary, $opacites.pop),
  background--error: rgba($colors.bird, $opacites.pop),
}

~/src/stylus/utils/_placeholders.styl

// Forms

$input__background($background)
  background $background

  &:hover
    background lighten($background, $effects.amount)

  &:active,
  &:focus
    background darken($background, $effects.amount)

$input
  // ...

  &__wrapper
    // ...

    &--disabled
      // ...
  
    &--error
      // ...

  &__error
    // ...

# API

controls.js

inputs.js

# Source code

@/src/components/Input/Input.vue

<template>
  <div
    class="input__wrapper"
    :class="{
      'input__wrapper--focus': control.length > 0 || isFocus,
      'input__wrapper--disabled': disabled,
      'input__wrapper--error': error && error.length > 0,
    }"
  >
    <input
      v-model="control"
      class="input__control"
      :placeholder="placeholder"
      :disabled="disabled"
      @focus="onFocusEvent"
      @blur="onBlurEvent"
      @input="onInputEvent"
    />

    <div v-if="error && error.length > 0" class="input__error">{{ error }}</div>
  </div>
</template>

<script>
import controls from '../../../src/mixins/controls.js';
import inputs from '../../../src/mixins/inputs.js';

export default {
  name: 'Input',

  mixins: [controls, inputs],
};
</script>

<style lang="stylus" scoped>
@import "~/src/stylus/_stylebase.styl";

.input
  &__wrapper
    @extend $input__wrapper

  &__control
    @extend $input
    height $inputs.height--input

  &__error
    @extend $input__error
    top $inputs.height--input
</style>

← Link →