Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Documentation for kselect #821

Merged
merged 4 commits into from
Nov 28, 2024
Merged

Documentation for kselect #821

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a687ebb
documentation for kselect
yeshwanth235 Nov 12, 2024
c6a5384
fixing lint issues
yeshwanth235 Nov 13, 2024
22eedf9
resolving PR comments
Nov 21, 2024
c43e8e2
solving PR comments
Nov 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 28 additions & 4 deletions lib/KSelect/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
:class="labelClasses"
:style="activeColorStyle"
>
<!-- @slot Displays the label -->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<!-- @slot Displays the label -->
<!-- @slot Optional slot as alternative to `label` prop -->

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I apologize for the delay in addressing the PR comments. The comments have now been addressed. Please review at your earliest convenience.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No worries @yeshwanth235. Thank you!! 🚀

<slot>{{ label }}</slot>
</div>

Expand All @@ -51,6 +52,7 @@
class="ui-select-display-value"
:class="{ 'is-placeholder': !hasDisplayText }"
>
<!-- @slot Displays the selected value else placeholder -->
AlexVelezLl marked this conversation as resolved.
Show resolved Hide resolved
<slot name="display">
{{ hasDisplayText ? displayText : (
hasFloatingLabel && isLabelInline) ? null : placeholder }}
Expand Down Expand Up @@ -106,6 +108,7 @@

@mouseover.native.stop="onMouseover(option)"
>
<!-- @slot Highlights the selected value -->
AlexVelezLl marked this conversation as resolved.
Show resolved Hide resolved
<slot
name="option"

Expand All @@ -117,6 +120,7 @@
</KSelectOption>

<div v-show="hasNoResults" class="ui-select-no-results">
<!-- @slot Text displayed if no results found -->
AlexVelezLl marked this conversation as resolved.
Show resolved Hide resolved
<slot name="no-results">
{{ noResultsText }}
</slot>
Expand All @@ -128,12 +132,14 @@

<div v-if="hasFeedback" class="ui-select-feedback">
<div v-if="showError" class="ui-select-feedback-text">
<!-- @slot Displays error text -->
AlexVelezLl marked this conversation as resolved.
Show resolved Hide resolved
<slot name="error">
{{ invalidText }}
</slot>
</div>

<div v-else-if="showHelp" class="ui-select-feedback-text">
<!-- @slot Displays help text -->
AlexVelezLl marked this conversation as resolved.
Show resolved Hide resolved
<slot name="help">
{{ help }}
</slot>
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -255,6 +261,9 @@
type: String,
default: '',
},
/**
* Used as a key identifier for individual elements in a rendered list.
*/
AlexVelezLl marked this conversation as resolved.
Show resolved Hide resolved
keys: {
type: Object,
default() {
Expand Down Expand Up @@ -297,6 +306,9 @@
type: Boolean,
default: false,
},
/**
* Displays a KIconButton with the specified text when provided.
AlexVelezLl marked this conversation as resolved.
Show resolved Hide resolved
*/
clearText: {
type: String,
default: '',
Expand Down Expand Up @@ -500,14 +512,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);
},

Expand Down Expand Up @@ -575,7 +596,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);
},

Expand Down Expand Up @@ -863,7 +886,8 @@
},

/**
* @public
* Resets the selected values of dropdown
* @public This is a public method
*/
reset() {
this.setValue(JSON.parse(this.initialValue));
Expand Down