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.