diff --git a/lib/KSelect/index.vue b/lib/KSelect/index.vue index cfba6eeff..21e207149 100644 --- a/lib/KSelect/index.vue +++ b/lib/KSelect/index.vue @@ -43,6 +43,7 @@ :class="labelClasses" :style="activeColorStyle" > + {{ label }} @@ -51,6 +52,7 @@ class="ui-select-display-value" :class="{ 'is-placeholder': !hasDisplayText }" > + {{ hasDisplayText ? displayText : ( hasFloatingLabel && isLabelInline) ? null : placeholder }} @@ -106,6 +108,7 @@ @mouseover.native.stop="onMouseover(option)" > +
+ {{ noResultsText }} @@ -128,12 +132,14 @@
+ {{ invalidText }}
+ {{ help }} @@ -214,14 +220,14 @@ }, }, /** - * Placeholder + * Sets the placeholder value */ placeholder: { type: String, default: '', }, /** - * Label + * Specifies the label text. Default is empty if not provided. */ label: { type: String, @@ -255,6 +261,10 @@ type: String, default: '', }, + /** + * Object that defines the label, value and image keys in objects of the `options` prop. + * Default: { label: 'label', value: 'value', image: 'image' } + */ keys: { type: Object, default() { @@ -297,6 +307,9 @@ type: Boolean, default: false, }, + /** + * Defines the tooltip and aria-label of the clear button if the select is clearable. + */ clearText: { type: String, default: '', @@ -500,14 +513,23 @@ showDropdown() { if (this.showDropdown) { this.onOpen(); + /** + * Emit on opening dropdown + */ this.$emit('dropdown-open'); } else { this.onClose(); + /** + * Emit on closing dropdown + */ this.$emit('dropdown-close'); } }, query() { + /** + * Emits whenever the query value changes. + */ this.$emit('query-change', this.query); }, @@ -575,7 +597,9 @@ setValue(value) { value = value ? value : this.multiple ? [] : ''; this.selection = value; - + /** + * Emits an 'input' event with the new value when the selection is updated. + */ this.$emit('input', value); }, @@ -863,7 +887,8 @@ }, /** - * @public + * Resets the selected values of dropdown + * @public This is a public method */ reset() { this.setValue(JSON.parse(this.initialValue));