@crishellco/vue-spruce
v3.6.0TypeScript
A collection of useful Vue 2 renderless components
0/weekUpdated 2 years agoMITUnpacked: 586.7 KB
Published by Chris Mitchell
npm install @crishellco/vue-spruceVue Spruce
!Build
A collection of useful Vue 2 renderless components.
Check out the demo
- Install
- The Components
- SpruceAtLeast
- SpruceCling
- SpruceEvent
- SpruceFetch
- SpruceFunction
- SprucePaginate
- SpruceSearch
- SpruceSort
- SpruceState
- SpruceTagInput
- SpruceToggle
- SpruceWatch
- Examples
- Development
- How to Contribute
- Pull Requests
- License
Install
$3
``bash`
yarn add -D @crishellco/vue-spruceor
npm i -D @crishellco/vue-spruce
$3
Installs all components globally.
`javascript
import Vue from 'vue';
import VueSpruce from '@crishellco/vue-spruce';
Vue.use(VueSpruce);
// or with options
Vue.use(VueSpruce, { componentPrefix: 's' });
`
$3
Installs all components globally.
`javascript`
// nuxt.config.js
{
modules: [['@crishellco/vue-spruce/nuxt', { componentPrefix: 's' }]];
}
#### Options
| Name | Description | Default |
|-------------------|-----------------------------------------------------|----------|
| componentPrefix | The prefix used when installing components globally | spruce |
$3
Alternatively, use only the components you need.
`javascript
import {
SpruceAtLeast,
SpruceCling,
SpruceEvent,
SpruceFetch,
SpruceFunction,
SprucePaginate,
SpruceSearch,
SpruceSort,
SpruceState,
SpruceToggle,
SpruceWatch,
} from '@crishellco/vue-spruce';
export default {
components: {
SpruceAtLeast,
SpruceCling,
SpruceEvent,
SpruceFetch,
SpruceFunction,
SprucePaginate,
SpruceSearch,
SpruceSort,
SpruceState,
SpruceToggle,
SpruceWatch,
},
};
`
The Components
$3
Ensures a component shows for at least a given amount of time, in milliseconds, before hiding.
` html`
#### Props
| Name | Description | Type | Required | Default |
|--------|--------------------------------------------------------------------|---------|----------|---------|
| ms | Minimum amount of time to show, in milliseconds | Number | Yes | |show
| | Weather or not to show the contents (given enough time has passed) | Boolean | No | true |
#### Slots
| Name | Required |
|-----------|----------|
| default | Yes |
#### Slot Scope
| Slot | Name | Description | Type |
|-----------|------------|------------------------------------------------------------|---------|
| default | disabled | True if waiting to hide content after ms time has passed | Boolean |default
| | show | If the contents should be shown | Boolean |
$3
Clings the clinger slot's contents to the anchor slot's contents using popper.js. Great for things like dropdown menus. _See the demo for more context._
`html`
i'm a clinger!
#### Props
| Name | Description | Type | Required | Default |
|-------------|------------------------------------------------------------------------------------------------------------------------------|--------|----------|---------|
| modifiers | The popper.js modifiers | Array | No | [] |placement
| | The popper.js placement of the clinger in relation to the anchor | String | No | auto |
#### Slots
| Name | Required |
|-----------|----------|
| anchor | Yes |clinger
| | Yes |
#### Slot Scope
| Slot | Name | Description | Type |
|-----------|----------|-----------------------------|----------|
| anchor | update | Updates the popper instance | Function |clinger
| | update | Updates the popper instance | Function |
$3
Track any window event occurance inside or outside of SpruceEvent's default slot.
`html`
#### Props
| Name | Description | Type | Required | Default |
|-------------|---------------------------------------------------------------|---------|----------|---------|
| event | The event to listen to | String | Yes | |immediate
| | First event immediately (in mounted) | Boolean | No | false |outside
| | Listen for the even only outside of the default slot elements | Boolean | No | false |
#### Events
| Name | Description | Payload |
|----------------------------|-------------------------------|---------|
| _Same as the event prop_ | Fired when the event happens. | -- |
#### Slots
| Name | Required |
|-----------|----------|
| default | No |
$3
Make asynchronous API fetch calls.
` #### Props | Name | Description | Type | Required | Default | #### Events | Name | Description | Payload | #### Slots | Name | Required | #### Slot Scope | Slot | Name | Description | Type | Create reusable functions on the fly (great for lists!). #### Props | Name | Description | Type | Required | Default | #### Slots | Name | Required | #### Slot Scope | Slot | Name | Description | Type | Paginate an array and navigate through it's chunks. #### Props | Name | Description | Type | Required | Default | #### Slots | Name | Required | #### Slot Scope | Slot | Name | Description | Type | Search an array of strings or objects by keys using fuse.js. #### Props | Name | Description | Type | Required | Default | #### Props | Name | Description | Type | Required | Default | #### Slot Scope | Slot | Name | Description | Type | Toggle between on (true ` #### Props | Name | Description | Type | Required | Default | #### Events | Name | Description | Payload | #### Slots | Name | Required | #### Slot Scope | Slot | Name | Description | Type | Watches variables for changes and emits events when changes occur. ` #### Props | Name | Description | Type | Required | Default | #### Events | Name | Description | Payload | #### Slots | Name | Required | See the demo source code for real-world examples. Check out the demo to see the components in action with code examples. ` ` ` ` ` 1. Fork the repositoryhtml
Errors! {{ error.status }}
Data: {{ data }}
`
|-------------|------------------------------------------------------------|---------|----------|---------|
| | The API url (changing this will refetch and rest all data) | String | Yes | |immediate
| | Weather to immediate make the request on mount | Boolean | No | true |success
|-----------|--------------------------------------|-----------------------------------|
| | Fires when the request is successful | {data: Object, fetch: Function} |error
| | Fires when the request fails | {data: Object, fetch: Function} |default
|-----------|----------|
| | Yes |default
|-----------|-----------|--------------------------------------|------------------------------------|
| | calls | Number of calls made | Number |default
| | data | The response on a successful request | Object |default
| | error | The response on a failed request | { data: Object, status: Number } |default
| | loading | Whether a request is in progress | Boolean |default
| | fetch | Makes another request | Function |`$3
html`
|------|--------------|----------|----------|---------|
| | The function | Function | Yes | |default
|-----------|----------|
| | Yes |default
|-----------|------|--------------|----------|
| | fn | The function | Function |`$3
html`
Page: {{ pageNum }}/{{ totalPages }}
Showing: {{ rangeStart }} - {{ rangeEnd }} of {{ states.length }}
|--------|-----------------------|------------|----------|---------|
| | Page size | Number | Yes | |list
| | The items to paginate | Arraydefault
|-----------|----------|
| | Yes |default
|-----------|--------------|-----------------------------------------------------------------------------------------------|----------|
| | first | Go to first page | Function |default
| | go | Go to specific page | Function |default
| | isFirst | If currently on first page | Boolean |default
| | isLast | If currently on last page | Boolean |default
| | last | Go to last page | Function |default
| | next | Go to next page | Function |default
| | page | The current page | any |default
| | pages | The chunked pages | Array |default
| | links | A calculated array of specific page numbers that can be used for links [1, 2, 3, '...', 40] | Array |default
| | pageNum | The current page number | Number |default
| | prev | Go to previous page | Function |default
| | rangeEnd | The end of the current page | Number |default
| | rangeStart | The start of the current page | Number |default
| | reset | Reset the state of pagination | Function |default
| | totalPages | Total number of pages | Number |`$3
html`
{{ item }}
|-------------|-------------------------|--------|----------|-----------------------------------------------------------------------------------|
| | The keys to search in | Array | No | If list is Array
`
|-------------------|-------------------------------------------------------------------------------------------------------------------------------|----------|----------|--------------|
| allowDuplicates | Allows duplicate tags | Boolean | No | False |allowPaste
| | Allows pasting to automatically create tags | Boolean | No | False |disabled
| | Disables all interactions | Boolean | No | False |keepOnBackspace
| | Disables deleting last tab on keyup.backspace in the input | Boolean | No | False |maxTags
| | Number of allowed tags | Number | No | Null |separator
| | Separator used to process pasted tags | String | No | \t |v-model
| | The tags | Array | Yes | |validator
| | Function that receives the String argument tag and returns true or false to determine the validity of the input's value | Function | No | () => true |
|-----------|-------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|
| default | events | Events to listen for on the input. input for binding value, keydown.backspace for delete last tag, keydown.enter for adding new unique tag, and keydown.escape for clearing input. | Object |default
| | focusedTagIndex | Currently focused tag index (to be removed on next keydown.backspace). Used for styling. | String |default
| | remove() | Removes a tag | Function |default
| | state | State to bind to the input. value of the input. | Object |default
| | tags | Array of tags | Array |$3
) and off (false).html`
Accordion header
{{ isOn ? '▲' : '▼' }}
Accordion content
|---------|-------------------------|---------|----------|---------|
| value | The state of the toggle | Boolean | No | False |
|---------|---------------------------|---------|
| input | Fired when isOn updates | isOn |
|-----------|----------|
| default | Yes |
|-----------|------------|-------------------------|----------|
| default | isOn | The state of the toggle | Boolean |default
| | on() | Sets isOn to true | Function |default
| | off() | Sets isOn to false | Function |default
| | toggle() | Toggles isOn | Function |$3
html`
|---------|--------------------------|--------|----------|---------|
| watch | Values you wish to watch | Object | Yes | |
|-----------------|------------------------------------------------|------------------------------------------|
| changed | Fired when any value in watch changes | {key: count, oldValue: 0, newValue: 1} |changed:[key]
| | Fired when a specific value in watch changes | {oldValue: 0, newValue: 1} |
|-----------|----------|
| default | No |Examples
Development
$3
bash`
yarn lint$3
bash`
yarn test:unit$3
bash`
yarn build$3
bash`
yarn serve$3
bash``
yarn build:demoHow to Contribute
$3
2. Create a new branch for each feature or improvement
3. Send a pull request from each feature branch to the develop branchLicense