vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #1132 - Add loading prop to Dropdown, Multiselect

pull/1196/head^2
Cagatay Civici 2021-05-14 12:01:25 +03:00
parent 8a749d4f25
commit 025d9381a0
12 changed files with 114 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/cascadeselect/CascadeSelect.d.ts vendored
View File

@ -15,6 +15,8 @@ interface CascadeSelectProps {
ariaLabelledBy?: string;
appendTo?: string;
panelClass?: string;
loading?: boolean;
loadingIcon?: string;
}
declare class CascadeSelect {

17
src/components/cascadeselect/CascadeSelect.vue
View File

@ -10,7 +10,7 @@
</slot>
</span>
<div class="p-cascadeselect-trigger" role="button" aria-haspopup="listbox" :aria-expanded="overlayVisible">
<span class="p-cascadeselect-trigger-icon pi pi-chevron-down"></span>
<span :class="dropdownIconClass"></span>
</div>
<Teleport :to="appendTarget" :disabled="appendDisabled">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
@ -60,7 +60,15 @@ export default {
type: String,
default: 'body'
},
panelClass: null
panelClass: null,
loading: {
type: Boolean,
default: false
},
loadingIcon: {
type: String,
default: 'pi pi-spinner pi-spin'
}
},
outsideClickListener: null,
scrollHandler: null,
@ -156,7 +164,7 @@ export default {
this.focused = false;
},
onClick(event) {
if (this.disabled) {
if (this.disabled || this.loading) {
return;
}
@ -318,6 +326,9 @@ export default {
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
},
dropdownIconClass() {
return ['p-cascadeselect-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down'];
}
},
components: {

2
src/components/dropdown/Dropdown.d.ts vendored
View File

@ -26,6 +26,8 @@ interface DropdownProps {
emptyFilterMessage?: string;
emptyMessage?: string;
panelClass?: string;
loading?: boolean;
loadingIcon?: string;
}
declare class Dropdown {

17
src/components/dropdown/Dropdown.vue
View File

@ -11,7 +11,7 @@
</span>
<i v-if="showClear && modelValue != null" class="p-dropdown-clear-icon pi pi-times" @click="onClearClick($event)"></i>
<div class="p-dropdown-trigger" role="button" aria-haspopup="listbox" :aria-expanded="overlayVisible">
<span class="p-dropdown-trigger-icon pi pi-chevron-down"></span>
<span :class="dropdownIconClass"></span>
</div>
<Teleport :to="appendTarget" :disabled="appendDisabled">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
@ -109,7 +109,15 @@ export default {
type: String,
default: null
},
panelClass: null
panelClass: null,
loading: {
type: Boolean,
default: false
},
loadingIcon: {
type: String,
default: 'pi pi-spinner pi-spin'
}
},
data() {
return {
@ -365,7 +373,7 @@ export default {
this.updateModel(event, null);
},
onClick(event) {
if (this.disabled) {
if (this.disabled || this.loading) {
return;
}
@ -665,6 +673,9 @@ export default {
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
},
dropdownIconClass() {
return ['p-dropdown-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down'];
}
},
directives: {

2
src/components/multiselect/MultiSelect.d.ts vendored
View File

@ -27,6 +27,8 @@ interface MultiSelectProps {
panelClass?: string;
selectionLimit?: number;
showToggleAll?: boolean;
loading?: boolean;
loadingIcon?: string;
}
declare class MultiSelect {

19
src/components/multiselect/MultiSelect.vue
View File

@ -21,7 +21,7 @@
</div>
</div>
<div class="p-multiselect-trigger">
<span class="p-multiselect-trigger-icon pi pi-chevron-down"></span>
<span :class="dropdownIconClass"></span>
</div>
<Teleport :to="appendTarget" :disabled="appendDisabled">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
@ -154,6 +154,14 @@ export default {
showToggleAll: {
type: Boolean,
default: true
},
loading: {
type: Boolean,
default: false
},
loadingIcon: {
type: String,
default: 'pi pi-spinner pi-spin'
}
},
data() {
@ -244,7 +252,11 @@ export default {
this.headerCheckboxFocused = false;
},
onClick(event) {
if (!this.disabled && (!this.overlay || !this.overlay.contains(event.target)) && !DomHandler.hasClass(event.target, 'p-multiselect-close')) {
if (this.disabled || this.loading) {
return;
}
if ((!this.overlay || !this.overlay.contains(event.target)) && !DomHandler.hasClass(event.target, 'p-multiselect-close')) {
DomHandler.hasClass(event.target, 'p-multiselect-close');
if (this.overlayVisible)
this.hide();
@ -631,6 +643,9 @@ export default {
},
maxSelectionLimitReached() {
return this.selectionLimit && (this.modelValue && this.modelValue.length === this.selectionLimit);
},
dropdownIconClass() {
return ['p-multiselect-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down'];
}
},
directives: {

3
src/views/cascadeselect/CascadeSelectDemo.vue
View File

@ -26,6 +26,9 @@
</div>
</template>
</CascadeSelect>
<h5>Loading State</h5>
<CascadeSelect placeholder="Loading..." loading style="minWidth: 14rem"></CascadeSelect>
</div>
</div>

18
src/views/cascadeselect/CascadeSelectDoc.vue
View File

@ -219,6 +219,18 @@ data() {
<td>string</td>
<td>null</td>
<td>Style class of the overlay panel.</td>
</tr>
<tr>
<td>loading</td>
<td>boolean</td>
<td>false</td>
<td>Whether the dropdown is in loading state.</td>
</tr>
<tr>
<td>loadingIcon</td>
<td>string</td>
<td>pi pi-spinner pi-spin</td>
<td>Icon to display in loading state.</td>
</tr>
</tbody>
</table>
@ -368,6 +380,9 @@ export default {
</div>
</template>
</CascadeSelect>
<h5>Loading State</h5>
<CascadeSelect placeholder="Loading..." loading style="minWidth: 14rem"></CascadeSelect>
</div>
</template>
@ -487,6 +502,9 @@ img {
</div>
</template>
</CascadeSelect>
<h5>Loading State</h5>
<CascadeSelect placeholder="Loading..." loading style="minWidth: 14rem"></CascadeSelect>
</div>
</template>

3
src/views/dropdown/DropdownDemo.vue
View File

@ -44,6 +44,9 @@
</div>
</template>
</Dropdown>
<h5>Loading State</h5>
<Dropdown placeholder="Loading..." loading></Dropdown>
</div>
</div>

18
src/views/dropdown/DropdownDoc.vue
View File

@ -275,6 +275,18 @@ export default {
<td>string</td>
<td>null</td>
<td>Style class of the overlay panel.</td>
</tr>
<tr>
<td>loading</td>
<td>boolean</td>
<td>false</td>
<td>Whether the dropdown is in loading state.</td>
</tr>
<tr>
<td>loadingIcon</td>
<td>string</td>
<td>pi pi-spinner pi-spin</td>
<td>Icon to display in loading state.</td>
</tr>
</tbody>
</table>
@ -508,6 +520,9 @@ export default {
</div>
</template>
</Dropdown>
<h5>Loading State</h5>
<Dropdown placeholder="Loading..." loading></Dropdown>
</div>
</template>
@ -622,6 +637,9 @@ export default {
</div>
</template>
</Dropdown>
<h5>Loading State</h5>
<Dropdown placeholder="Loading..." loading></Dropdown>
</div>
</template>

3
src/views/multiselect/MultiSelectDemo.vue
View File

@ -44,6 +44,9 @@
</div>
</template>
</MultiSelect>
<h5>Loading State</h5>
<MultiSelect placeholder="Loading..." loading></MultiSelect>
</div>
</div>

18
src/views/multiselect/MultiSelectDoc.vue
View File

@ -289,6 +289,18 @@ export default {
<td>boolean</td>
<td>true</td>
<td>Whether to show the header checkbox to toggle the selection of all items at once.</td>
</tr>
<tr>
<td>loading</td>
<td>boolean</td>
<td>false</td>
<td>Whether the multiselect is in loading state.</td>
</tr>
<tr>
<td>loadingIcon</td>
<td>string</td>
<td>pi pi-spinner pi-spin</td>
<td>Icon to display in loading state.</td>
</tr>
</tbody>
</table>
@ -509,6 +521,9 @@ export default {
</div>
</template>
</MultiSelect>
<h5>Loading State</h5>
<MultiSelect placeholder="Loading..." loading></MultiSelect>
</div>
</template>
@ -642,6 +657,9 @@ export default {
</div>
</template>
</MultiSelect>
<h5>Loading State</h5>
<MultiSelect placeholder="Loading..." loading></MultiSelect>
</div>
</template>