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
}OR
Register them as global components:
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
For developers
Project setup
yarn install
Compiles and hot-reloads for demo
yarn run serve
Build for lib
yarn run build:lib
Lints and fixes files
yarn run lint
Run your unit tests
yarn run test:unit