@kasa/web-components NPM

kasa-web-components

How to use

Install using yarn or npm

yarn add @kasa/web-components

Import css in main.js

import '@kasa/web-components/dist/kasa-web-components.css';

Import the components and delcare it as local components:

import { Button } from '@kasa/web-components';

components: {
  Button
}

import KasaWebComponents from '@kasa/web-components';

Vue.use(KasaWebComponents);

Usages

Button

<k-button
  [:disabled="disabled"]
  [kind="normal(default), small, border"]
>
  text
<k-button>

Checkbox

<k-checkbox
  [v-model="boolean"]
  [:disabled="boolean"]
>
  text
</k-checkbox>

Dropdown

<k-dropdown
  [v-model="string"]
  [default-text="text"]
  [disabled="boolean"]
  [
    :items="[
      { text: 'text', value: value }
    ]"
  ]
>
  <k-dropdown-item value="value string">text string</k-dropdown-item>
</k-dropdown>

Remarks: You can use both prop and slot for items.

Email input

<k-email-input
  v-model="string"
  [:disabled="boolean"]
  [@focus="callback"]
  [@blur="callback"]
  [@input="callback"]
>
  [<template slot="action"> button or image </template>] // for button action, use TextInputButton
</k-email-input>

Password input

<k-password-input
  v-model="string"
  [:disabled="boolean"]
  [show-text-visibility-toggle-button]
  [@focus="callback"]
  [@blur="callback"]
  [@input="callback"]
/>

Inline message

<k-inline-message> text </k-inline-message>

Radio

<k-radio
  [v-model="value"] // This is picked value in the group.
  [:disabled="disabled"]
  value="value string"
  name="radio" // The radio buttons in the same group must have same name!
>
  text
</k-radio>

TextInput

<k-text-input
  v-model="string"
  [v-validate="'email'"]
  [:disabled="boolean"]
  [:kind="string"] // 'big' is the only available option for now
  [:error="boolean"] // error state
  [type="email"] // default is 'text'
  [placeholder="placeholder string"]
  [text-align="right"] // default is 'left'
  [:delete-button="boolean"] // default is false
  [@focus="callback"]
  [@blur="callback"]
  [@input="callback"]
>
  [<template slot="label"> inner label </template>]
  [<template slot="action"> button or image </template>] // for button action, use TextInputButton
</k-text-input>

Inner button of text input

<k-text-input-button
  [:disabled="boolean"]
  [type="submit or button ..."]
  [@click.native="callback"] // must use native modifier!
>
  text
</k-text-input-button>

Label for TextInput

<k-text-input-label
>
  Text here!

  [<template slot="extra"> element placed on the right  </template>]
</k-text-input-label>

Switch

<k-switch
  on-text="ON"
  [:disabled="disabled"]
  [off-text="OFF"]
/>

Css selector

Every component has its component name as a css class. For example, you can select TextInput with .k-text-input selector, Checkbox with .k-check-box selector, and so on.

Directives

Formatter for k-text-input You can restrict characters that can be input or format the value with it.

<k-text-input
  v-format.immediate="'currency'" // 'immediate' modifier is an option which formats the value as soon as the component loaded.
                                  // 'currency', 'number', 'alphaNumeric', 'uppercase' and 'lowercase' are possible values.
                                  // You can chain formatters with '|'. i.e. 'alphaNumeric|uppercase' chains two formatters.
  // Or you can write functions to manipulate and format the value.
  v-format="{
    [strip: value => changed value;] // The function that unformats the value before formatting, it is useful to remove extra characters added by the format function. This is optional.
    format: value => formatted value; // The formatting function
  }"

  v-model="value"
/>

Remarks: When the format directive is specified, the change event of k-text-input is not triggered on the IE11. See this