1.0.2 • Published 4 years ago

@devindex/vue-spectre v1.0.2

Weekly downloads
19
License
MIT
Repository
github
Last release
4 years ago

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

NameTypeDefaultRequired
sourceFunction,Arraytrue
labelStringtrue (when source is an array of objects)
track-byStringtrue (when source is an array of objects)
placeholderString''false
custom-labelFunctionfalse
debounceNumber300false
min-lenNumber3false
input-classString''false
input-idString''false
highlightBooleanfalsefalse
disabledBooleanfalsefalse
readonlyBooleanfalsefalse
loadingBooleanfalsefalse

Events

NameArgs
select(value)
focus(search)
blur(search)

Calendar

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

Properties

NameTypeDefaultRequired
minDatenullfalse
maxDatenullfalse
highlightsArray[]false

Events

NameArgs
select(value)
prev()
next()
month-change()

Slots

prev-nav, next-nav

Dropdown

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

Properties

NameTypeDefaultRequired
itemsArraytrue
labelStringtrue (when item is an array of objects)
max-heightNumber300false
directionStringleftfalse
disabledBooleanfalsefalse

Events

NameArgs
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

NameTypeDefaultRequired
titleStringfalse
closableBooleantruefalse
sizeStringfalse
click-to-closeBooleanfalsefalse

Pagination

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

Properties

NameTypeDefaultRequired
totalnumber0false
limitnumber20false
numbersnumber11false

Events

NameArgs
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

NameTypeDefaultRequired
blockbooleanfalsefalse

Events - dx-tabs

NameArgs
change({ tab })

Slots - dx-tabs

action

Properties - dx-tab

NameTypeDefaultRequired
labelstringtrue
disabledbooleanfalsefalse

License

Released under the MIT License.

1.0.2

4 years ago

0.2.5

4 years ago

1.0.1

4 years ago

0.2.4

4 years ago

1.0.0

4 years ago

0.2.3

5 years ago

0.2.1

5 years ago

0.2.0

5 years ago

0.2.2

5 years ago

0.1.7

5 years ago

0.1.6

5 years ago

0.1.5

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago