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

Listbox: checkmark, highlightOnSelect properties added

pull/5756/head
tugcekucukoglu 2024-05-09 13:02:54 +03:00
parent 438440072f
commit 6295928c7a
9 changed files with 137 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/lib/listbox/BaseListbox.vue
View File

@ -62,6 +62,14 @@ export default {
type: Boolean,
default: true
},
highlightOnSelect: {
type: Boolean,
default: true
},
checkmark: {
type: Boolean,
default: false
},
filterMessage: {
type: String,
default: null

18
components/lib/listbox/Listbox.d.ts vendored
View File

@ -164,6 +164,14 @@ export interface ListboxPassThroughOptions<T = any> {
* Used to pass attributes to the option's DOM element.
*/
option?: ListboxPassThroughOptionType<T>;
/**
* Used to pass attributes to the option check icon's DOM element.
*/
optionCheckIcon?: ListboxPassThroughOptionType<T>;
/**
* Used to pass attributes to the option blank icon's DOM element.
*/
optionBlankIcon?: ListboxPassThroughOptionType<T>;
/**
* Used to pass attributes to the emptyMessage's DOM element.
*/
@ -351,6 +359,16 @@ export interface ListboxProps {
* @defaultValue true
*/
focusOnHover?: boolean | undefined;
/**
* Whether the selected option will be add highlight class.
* @defaultValue true
*/
highlightOnSelect?: boolean | undefined;
/**
* Whether the selected option will be shown with a check mark.
* @defaultValue false
*/
checkmark?: boolean | undefined;
/**
* Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.
* @defaultValue '{0} results are available'

10
components/lib/listbox/Listbox.vue
View File

@ -91,6 +91,10 @@
:data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)"
>
<template v-if="checkmark">
<CheckIcon v-if="isSelected(option)" :class="cx('optionCheckIcon')" v-bind="ptm('optionCheckIcon')" />
<BlankIcon v-else :class="cx('optionBlankIcon')" v-bind="ptm('optionBlankIcon')" />
</template>
<slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
</li>
</template>
@ -131,6 +135,8 @@
<script>
import { FilterService } from 'primevue/api';
import IconField from 'primevue/iconfield';
import BlankIcon from 'primevue/icons/blank';
import CheckIcon from 'primevue/icons/check';
import SearchIcon from 'primevue/icons/search';
import InputIcon from 'primevue/inputicon';
import InputText from 'primevue/inputtext';
@ -754,7 +760,9 @@ export default {
VirtualScroller,
InputIcon,
IconField,
SearchIcon
SearchIcon,
CheckIcon,
BlankIcon
}
};
</script>

2
components/lib/listbox/style/ListboxStyle.d.ts vendored
View File

@ -17,6 +17,8 @@ export enum ListboxClasses {
list = 'p-listbox-list',
optionGroup = 'p-listbox-option-group',
option = 'p-listbox-option',
optionCheckIcon = 'p-listbox-option-check-icon',
optionBlankIcon = 'p-listbox-option-blank-icon',
emptyMessage = 'p-listbox-empty-message'
}

15
components/lib/listbox/style/ListboxStyle.js
View File

@ -55,6 +55,8 @@ const theme = ({ dt }) => `
}
.p-listbox-option {
display: flex;
align-items: center;
cursor: pointer;
position: relative;
overflow: hidden;
@ -85,6 +87,13 @@ const theme = ({ dt }) => `
color: ${dt('listbox.option.focus.color')};
}
.p-listbox-option-check-icon {
position: relative;
margin-left: -0.375rem;
margin-right: 0.375rem;
color: ${dt('listbox.checkmark.color')};
}
.p-listbox-option-group {
margin: 0;
padding: ${dt('listbox.option.group.padding')};
@ -112,14 +121,16 @@ const classes = {
listContainer: 'p-listbox-list-container',
list: 'p-listbox-list',
optionGroup: 'p-listbox-option-group',
option: ({ instance, option, index, getItemOptions }) => [
option: ({ instance, props, option, index, getItemOptions }) => [
'p-listbox-option',
{
'p-listbox-option-selected': instance.isSelected(option),
'p-listbox-option-selected': instance.isSelected(option) && props.highlightOnSelect,
'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(index, getItemOptions),
'p-disabled': instance.isOptionDisabled(option)
}
],
optionCheckIcon: 'p-listbox-option-check-icon',
optionBlankIcon: 'p-listbox-option-blank-icon',
emptyMessage: 'p-listbox-empty-message'
};

3
components/lib/themes/aura/listbox/index.js
View File

@ -42,6 +42,9 @@ export default {
fontWeight: '{list.option.group.font.weight}',
padding: '{list.option.group.padding}'
},
checkmark: {
color: '{list.option.color}'
},
emptyMessage: {
padding: '{list.option.padding}'
}

3
components/lib/themes/lara/listbox/index.js
View File

@ -42,6 +42,9 @@ export default {
fontWeight: '{list.option.group.font.weight}',
padding: '{list.option.group.padding}'
},
checkmark: {
color: '{list.option.color}'
},
emptyMessage: {
padding: '{list.option.padding}'
}

75
doc/listbox/CheckmarkDoc.vue Normal file
View File

@ -0,0 +1,75 @@
<template>
<DocSectionText v-bind="$attrs">
<p>An alternative way to highlight the selected option is displaying a checkmark instead.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
selectedCity: null,
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
],
code: {
basic: `
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
</div>
</template>
<script>
export default {
data() {
return {
selectedCity: null,
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
</div>
</template>
<script setup>
import { ref } from "vue";
const selectedCity = ref();
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
<\/script>
`
}
};
}
};
</script>

6
pages/listbox/index.vue
View File

@ -5,6 +5,7 @@
<script>
import AccessibilityDoc from '@/doc/listbox/AccessibilityDoc.vue';
import BasicDoc from '@/doc/listbox/BasicDoc.vue';
import CheckmarkDoc from '@/doc/listbox/CheckmarkDoc.vue';
import DisabledDoc from '@/doc/listbox/DisabledDoc.vue';
import FilterDoc from '@/doc/listbox/FilterDoc.vue';
import GroupDoc from '@/doc/listbox/GroupDoc.vue';
@ -30,6 +31,11 @@ export default {
label: 'Basic',
component: BasicDoc
},
{
id: 'checkmark',
label: 'Checkmark',
component: CheckmarkDoc
},
{
id: 'multiple',
label: 'Multiple',