Spectre.css components and plugins for VueJS

Vue Spectre

Spectre.css components and plugins for VueJS

Installation

npm

$ npm i -S @devindex/vue-spectre

yarn

$ yarn add @devindex/vue-spectre

Usage

import Vue from 'vue'
import VueSpectre from '@devindex/vue-spectre'

/** Activate plugin **/
Vue.use(VueSpectre);

Components

Autocomplete

<dx-autocomplete
    v-model="value"
    :source="source"
    label="name"
    track-by="id">
</dx-autocomplete>

Property name	Type	Default	Required
source	Function	Array
label	String		true (when source is an array of objects)
track-by	String		true (when source is an array of objects)
placeholder	String	''	false
custom-label	Function		false
debounce	Number	300	false
min-len	Number	3	false
input-class	String	''	false
input-id	String	''	false
highlight	Boolean	false	false
disabled	Boolean	false	false
readonly	Boolean	false	false
loading	Boolean	false	false

Event name	Attributes
select	(value)
focus	(search)
blur	(search)

Calendar

<dx-calendar v-model="date" />

Property name	Type	Default	Required
min	Date	null	false
max	Date	null	false
highlights	Array	[]	false

Event name	Attributes
select	(value)
prev	()
next	()
month-change	()

Slots
prev-nav
next-nav

Dropdown

<dx-dropdown
    :items="[]"
    label="name"
    @select="onSelect">
    Dropdown
</dx-dropdown>

Property name	Type	Default	Required
items	Array		true
label	String		true (when item is an array of objects)
max-height	Number	300	false
direction	String	left	false
disabled	Boolean	false	false

Event name	Attributes
select	(value)

Inputs

Input date

<dx-input-date v-model="date" />

Input number

<dx-input-number v-model="number" :precision="2" />

Modal

<dx-modal
    v-model="show"
    title="Modal">
    ...
</dx-modal>

Property name	Type	Default	Required
title	String		false
closable	Boolean	true	false
size	String		false
click-to-close	Boolean	false	false

Pagination

<dx-pagination
    :total="total"
    :limit="limit"
    @paginate="onPaginate"

    :numbers="numbers"/>
</dx-pagination>

Tabs

<dx-tabs 
    :block="false" 
    @change="onChange">
    <dx-tab 
        name="Tab 1"
        id="custom-id-1">
        Tab content 1
    </dx-tab>
    <dx-tab name="Tab 2" id="custom-id-2">
        Tab content 2
    </dx-tab>
</dx-tabs>

Download Details:

Author: devindex

Source Code: https://github.com/devindex/vue-spectre

#vuejs #vue #javascript