@solution5520/s-inputs v1.2.7

s-inputs

Inputs components with built-in logic for different data type.

Contains inputs for :

• Text
• Text with icons
• Multiline text
• Number (with build-in currency)
• Date
• Duration (in hour:minutes:seconds)
• Rating
• On/Off Switch

Installation

npm i @solution5520/s-inputs

Importing

Register all components globaly

In main.js:

import Vue from 'vue'
import SInputs from "@solution5520/s-inputs"
import '@solution5520/s-inputs/dist/s-inputs.css'

Vue.use(SInputs)

Register specific components locally

Install only needed components.

import {
    DateInput,
    DurationInput,
    IconInput,
    NumberInput,
    RatingInput,
    SwitchInput,
    TextAreaInput,
    TextInput
} from "@solution5520/s-inputs"

export default {
  components: { 
    DateInput,
    DurationInput,
    IconInput,
    NumberInput,
    RatingInput,
    SwitchInput,
    TextAreaInput,
    TextInput 
  },
  // ... rest of component config
}

Docs

TextInput

Simple text input warper.

Usage

<template>
  <TextInput 
    v-model="value"
    placeholder="Type something here..."
  />
</template>

<script>
export default {
  data: () => ({
    value: 'Lorem ipsum'
  })
}
</script>

Interface

Props

Events

Methods

Mask Tokens

default values :

{
  "*": { pattern: /[\s\S]/ }, // Any character
  "#": { pattern: /\d/ }, // Number
  X: { pattern: /[0-9a-z]/i }, // Alphanumeric
  H: { pattern: /[0-9A-F]/i, transform: (v) => v.toLocaleUpperCase() }, // Hexadecimal
  S: { pattern: /[a-z]/i }, // Letter in any case
  A: { pattern: /[a-z]/i, transform: (v) => v.toLocaleUpperCase() }, // Letter in upper case
  a: { pattern: /[a-z]/i, transform: (v) => v.toLocaleLowerCase() }, // Letter in lower case
  "\\": { escape: true }, // Escape character
}

TextIconInput

Text input with optional prefix and suffix icons.

Usage

<template>
  <TextIconInput
    v-model="value"
    placeholder="Type something here..."
    inputClass="form-control"
    prefixIcon="search"
    :suffixIcon="['fas', 'search']"
    iconColor="red"
  />
</template>

<script>
export default {
  data: () => ({
    value: 'Lorem ipsum'
  })
}
</script>

Interface

Props

Inherits from TextInput

Events

Methods

TextAreaInput

Input for multiline text, comes with auto-resize.

Usag

<template>
  <TextAreaInput 
    v-model="value"
  />
</template>

<script>
export default {
  data: () => ({
    value: 'Lorem ipsum'
  })
}
</script>

Interface

Props

Inherits from vue-textarea-autosize

Events

Methods

NumberInput

Base for any number related input. Built-in currency system.

Usage

<template>
  <NumberInput 
    v-model="value"
    currency="EUR"
    locale="de"
  />
</template>

<script>
export default {
  data: () => ({
    value: 1000
  })
}
</script>

Interface

Props

inherits from vue-currency-input

Events

Methods

DateInput

Simple date and datetime-local input warper. Display in the local timezone.

Usage

<template>
  <DateInput 
    v-model="value"
    :withTime="true"
  />
</template>

<script>
export default {
  data: () => ({
    value: new Date()
  })
}
</script>

Interface

Props

Inherits from <input type="date"> or from <input type="datetime-local">

Events

Methods

DurationInput

Component to show a duration of time like 1:23:04.567.

Usage

<template>
  <DurationInput 
    v-model="value"
    format="h:mm:ss.fff"
  />
</template>

<script>
export default {
  data: () => ({
    value: {
      hours: 1, 
      minutes: 23, 
      seconds: 4.567
    }
  })
}
</script>

Interface

Props

Events

Methods

RatingInput

Simple 5 star rating component.

Usage

<template>
  <RatingInput 
    v-model="value"
    :increment: "0.5"
  />
</template>

<script>
export default {
  data: () => ({
    value: 4.5
  })
}
</script>

Interface

Props

Inherits from vue-rate-it

Events

SwitchInput

Simple on/off switch

Usage

<template>
  <SwitchInput 
    v-model="value"
    :type-bold="false"
    theme="bootstrap"
    color="warning"
  />
</template>

<script>
export default {
  data: () => ({
    value: true
  })
}
</script>

Interface

Props

Inherits from vue-switches

Events