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

Merge branch 'master' of https://github.com/primefaces/primevue

pull/5161/head
Cagatay Civici 2024-01-24 15:49:53 +03:00
parent c3d791be08 2a07cd7130
commit 9707eee686
7 changed files with 17 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/dropdown/BaseDropdown.vue
View File

@ -134,7 +134,7 @@ export default {
type: Boolean,
default: true
},
showTick: {
checkmark: {
type: Boolean,
default: false
},

8
components/lib/dropdown/Dropdown.d.ts vendored
View File

@ -152,9 +152,9 @@ export interface DropdownPassThroughOptions<T = any> {
*/
itemLabel?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the tick icon's DOM element.
* Used to pass attributes to the check icon's DOM element.
*/
tickIcon?: DropdownPassThroughOptionType<T>;
checkIcon?: DropdownPassThroughOptionType<T>;
/**
* Used to pass attributes to the bank icon's DOM element.
*/
@ -440,10 +440,10 @@ export interface DropdownProps {
*/
highlightOnSelect?: boolean | undefined;
/**
* Whether the selected option will be shown with a tick.
* Whether the selected option will be shown with a check mark.
* @defaultValue false
*/
showTick?: boolean | undefined;
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'

4
components/lib/dropdown/Dropdown.vue
View File

@ -129,8 +129,8 @@
:data-p-disabled="isOptionDisabled(option)"
v-bind="getPTItemOptions(option, getItemOptions, i, 'item')"
>
<template v-if="showTick">
<CheckIcon v-if="isSelected(option)" :class="cx('tickIcon')" v-bind="ptm('tickIcon')" />
<template v-if="checkmark">
<CheckIcon v-if="isSelected(option)" :class="cx('checkIcon')" v-bind="ptm('checkIcon')" />
<BlankIcon v-else :class="cx('blankIcon')" v-bind="ptm('blankIcon')" />
</template>
<slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">

2
components/lib/dropdown/style/DropdownStyle.js
View File

@ -146,7 +146,7 @@ const classes = {
}
],
itemLabel: 'p-dropdown-item-label',
tickIcon: 'p-dropdown-tick-icon',
checkIcon: 'p-dropdown-check-icon',
blankIcon: 'p-dropdown-blank-icon',
emptyMessage: 'p-dropdown-empty-message'
};

10
doc/dropdown/TickDoc.vue → doc/dropdown/CheckmarkDoc.vue
View File

@ -1,9 +1,9 @@
<template>
<DocSectionText v-bind="$attrs">
<p>An alternative way to highlight the selected option is displaying a tick instead.</p>
<p>An alternative way to highlight the selected option is displaying a checkmark instead.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" showTick :highlightOnSelect="false" class="w-full md:w-14rem" />
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
</div>
<DocSectionCode :code="code" />
</template>
@ -22,12 +22,12 @@ export default {
],
code: {
basic: `
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" showTick :highlightOnSelect="false" class="w-full md:w-14rem" />
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" showTick :highlightOnSelect="false" class="w-full md:w-14rem" />
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
</div>
</template>
@ -51,7 +51,7 @@ export default {
composition: `
<template>
<div class="card flex justify-content-center">
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" showTick :highlightOnSelect="false" class="w-full md:w-14rem" />
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
</div>
</template>

2
layouts/AppConfigurator.vue
View File

@ -454,8 +454,6 @@ export default {
this.primaryFocusRing = value;
let root = document.documentElement;
console.log('x');
if (value) {
if (this.$appState.darkTheme) root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)');
else root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)');

8
pages/dropdown/index.vue
View File

@ -13,6 +13,7 @@
<script>
import AccessibilityDoc from '@/doc/dropdown/AccessibilityDoc.vue';
import BasicDoc from '@/doc/dropdown/BasicDoc.vue';
import CheckmarkDoc from '@/doc/dropdown/CheckmarkDoc.vue';
import ClearIconDoc from '@/doc/dropdown/ClearIconDoc.vue';
import DisabledDoc from '@/doc/dropdown/DisabledDoc.vue';
import EditableDoc from '@/doc/dropdown/EditableDoc.vue';
@ -24,7 +25,6 @@ import InvalidDoc from '@/doc/dropdown/InvalidDoc.vue';
import LazyVirtualScrollDoc from '@/doc/dropdown/LazyVirtualScrollDoc.vue';
import LoadingStateDoc from '@/doc/dropdown/LoadingStateDoc.vue';
import TemplateDoc from '@/doc/dropdown/TemplateDoc.vue';
import TickDoc from '@/doc/dropdown/TickDoc.vue';
import VirtualScrollDoc from '@/doc/dropdown/VirtualScrollDoc.vue';
import PTComponent from '@/doc/dropdown/pt/index.vue';
import ThemingDoc from '@/doc/dropdown/theming/index.vue';
@ -44,9 +44,9 @@ export default {
component: BasicDoc
},
{
id: 'tick',
label: 'Tick',
component: TickDoc
id: 'checkmark',
label: 'Checkmark',
component: CheckmarkDoc
},
{
id: 'editable',