1.0.5 • Published 7 months ago

@craydel/craydel-select v1.0.5

Weekly downloads
-
License
MIT
Repository
-
Last release
7 months ago

CraydelSelect

Installation

Get the latest version by NPM:

$ npm i @craydel/craydel-select

Register Plugin

If you use the plugin API, the component will be registered as a global component just like when including it with the script tag, but you won't need to re-register it through the components property in your own components.

Create the plugin file e.g craydel-components.js file.

// craydel-components.js
import Vue from 'vue'
import CraydelSelect from '@craydel/craydel-select/src/CraydelSelect.vue'

const Components = {
  CraydelSelect,
};

Object.keys(Components).forEach(name => {
  Vue.component(name, Components[name]);
});

export default Components;

Next reference the plugin file in your nuxt.config.js

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
  '~/plugins/craydel-components.js'
]

Props

NameTypeDefaultDescription
idstringrandom IDSets the DOM id on the component.
placeholderstring'Select'Sets the component's placeholder text.
is-requiredbooleanfalsePuts component in a required state.
required-errorstring'Field is required'Puts the component in an error state and passes through the custom required error message.
multiplebooleanfalseChanges select to multiple. Accepts array for value.
select-allbooleanfalseChanges select to multiple with a 'Select All' option. Accepts array for value.
no-data-textstring'No data available'Display text when there is no data.
hintstringundefinedHint text.
itemsarray[]Can be an array of objects or array of strings. When using objects, will look for a text and value keys. This can be changed using the item-text and item-value props. Objects that have a header or divider property are considered special cases and generate a list header or divider; these items are not selectable.
item-textstringtextSet property of items’s text.
item-valuestringvalueSet property of items’s value.
attachstringundefinedSpecifies which DOM element that this component should detach to. String can be any valid querySelector. This will attach to the root v-app component by default.
no-validationbooleanfalseRemoves the validation styling from the component.
disabledbooleanfalseDisables the component.
loadingboolean | stringfalseDisplays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the primary color.
show-append-itembooleanfalseDisplays the append-item slot that is used to display custom content after the menu content.

Events

NameDescription
blurEmitted when the input is blurred.
changeEmitted when the input is changed by user interaction.
keydownEmitted when any key is pressed.

Slots

NameDescription
append-itemAdds an item after menu content.

Usage

An example showing a select that has an option to select all.

<craydel-select
        :items="items"
        item-text="text"
        item-value="value"
        select-all
></craydel-select>
data()
{
  return {
    items: [
      {
        text: 'HTML',
        value: 'HTML'
      },
      {
        text: 'Javascript',
        value: 'Javascript'
      },
      {
        text: 'CSS',
        value: 'CSS'
      }
    ]
  }
}
1.0.5

7 months ago

1.0.4

7 months ago

1.0.3

7 months ago

1.0.2

7 months ago

1.0.1

8 months ago

1.0.0

8 months ago