Vue Spectre

Spectre.css components and plugins for Vue 3

Installation

Add package

# npm
$ npm i -S @devindex/vue-spectre

# yarn
$ yarn add @devindex/vue-spectre

Usage

import { createApp } from 'vue';
import VueSpectre from '@devindex/vue-spectre'; // <-- ADD THIS LINE
import App from './App.vue';

const app = createApp(App);

app.use(VueSpectre, { locale: 'en' });  // <-- ADD THIS LINE

app.mount('#app');

Components

Autocomplete

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

Properties

Name	Type	Default	Required
source	Function,Array		true
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

Events

Name	Args
select	(value)
focus	(search)
blur	(search)

Calendar

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

Properties

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

Events

Name	Args
select	(value)
prev	()
next	()
month-change	()

Slots

prev-nav, next-nav

Dropdown

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

Properties

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

Events

Name	Args
select	(value)

Inputs

Input date

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

Input number

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

Modal

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

Properties

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>

Properties

Name	Type	Default	Required
total	number	0	false
limit	number	20	false
numbers	number	11	false

Events

Name	Args
paginate	({ total, limit, offset, pages, page })

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>

Properties - dx-tabs

Name	Type	Default	Required
block	boolean	false	false

Events - dx-tabs

Name	Args
change	({ tab })

Slots - dx-tabs

action

Properties - dx-tab

Name	Type	Default	Required
label	string		true
disabled	boolean	false	false

License

Released under the MIT License.