Merge branch 'master' of https://github.com/primefaces/primevue
commit
9707eee686
|
@ -134,7 +134,7 @@ export default {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
showTick: {
|
checkmark: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
|
|
|
@ -152,9 +152,9 @@ export interface DropdownPassThroughOptions<T = any> {
|
||||||
*/
|
*/
|
||||||
itemLabel?: DropdownPassThroughOptionType<T>;
|
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.
|
* Used to pass attributes to the bank icon's DOM element.
|
||||||
*/
|
*/
|
||||||
|
@ -440,10 +440,10 @@ export interface DropdownProps {
|
||||||
*/
|
*/
|
||||||
highlightOnSelect?: boolean | undefined;
|
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
|
* @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.
|
* 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'
|
* @defaultValue '{0} results are available'
|
||||||
|
|
|
@ -129,8 +129,8 @@
|
||||||
:data-p-disabled="isOptionDisabled(option)"
|
:data-p-disabled="isOptionDisabled(option)"
|
||||||
v-bind="getPTItemOptions(option, getItemOptions, i, 'item')"
|
v-bind="getPTItemOptions(option, getItemOptions, i, 'item')"
|
||||||
>
|
>
|
||||||
<template v-if="showTick">
|
<template v-if="checkmark">
|
||||||
<CheckIcon v-if="isSelected(option)" :class="cx('tickIcon')" v-bind="ptm('tickIcon')" />
|
<CheckIcon v-if="isSelected(option)" :class="cx('checkIcon')" v-bind="ptm('checkIcon')" />
|
||||||
<BlankIcon v-else :class="cx('blankIcon')" v-bind="ptm('blankIcon')" />
|
<BlankIcon v-else :class="cx('blankIcon')" v-bind="ptm('blankIcon')" />
|
||||||
</template>
|
</template>
|
||||||
<slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">
|
<slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">
|
||||||
|
|
|
@ -146,7 +146,7 @@ const classes = {
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
itemLabel: 'p-dropdown-item-label',
|
itemLabel: 'p-dropdown-item-label',
|
||||||
tickIcon: 'p-dropdown-tick-icon',
|
checkIcon: 'p-dropdown-check-icon',
|
||||||
blankIcon: 'p-dropdown-blank-icon',
|
blankIcon: 'p-dropdown-blank-icon',
|
||||||
emptyMessage: 'p-dropdown-empty-message'
|
emptyMessage: 'p-dropdown-empty-message'
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<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>
|
</DocSectionText>
|
||||||
<div class="card flex justify-content-center">
|
<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>
|
</div>
|
||||||
<DocSectionCode :code="code" />
|
<DocSectionCode :code="code" />
|
||||||
</template>
|
</template>
|
||||||
|
@ -22,12 +22,12 @@ export default {
|
||||||
],
|
],
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
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: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card flex justify-content-center">
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -51,7 +51,7 @@ export default {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card flex justify-content-center">
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -454,8 +454,6 @@ export default {
|
||||||
this.primaryFocusRing = value;
|
this.primaryFocusRing = value;
|
||||||
let root = document.documentElement;
|
let root = document.documentElement;
|
||||||
|
|
||||||
console.log('x');
|
|
||||||
|
|
||||||
if (value) {
|
if (value) {
|
||||||
if (this.$appState.darkTheme) root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)');
|
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)');
|
else root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)');
|
||||||
|
|
|
@ -13,6 +13,7 @@
|
||||||
<script>
|
<script>
|
||||||
import AccessibilityDoc from '@/doc/dropdown/AccessibilityDoc.vue';
|
import AccessibilityDoc from '@/doc/dropdown/AccessibilityDoc.vue';
|
||||||
import BasicDoc from '@/doc/dropdown/BasicDoc.vue';
|
import BasicDoc from '@/doc/dropdown/BasicDoc.vue';
|
||||||
|
import CheckmarkDoc from '@/doc/dropdown/CheckmarkDoc.vue';
|
||||||
import ClearIconDoc from '@/doc/dropdown/ClearIconDoc.vue';
|
import ClearIconDoc from '@/doc/dropdown/ClearIconDoc.vue';
|
||||||
import DisabledDoc from '@/doc/dropdown/DisabledDoc.vue';
|
import DisabledDoc from '@/doc/dropdown/DisabledDoc.vue';
|
||||||
import EditableDoc from '@/doc/dropdown/EditableDoc.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 LazyVirtualScrollDoc from '@/doc/dropdown/LazyVirtualScrollDoc.vue';
|
||||||
import LoadingStateDoc from '@/doc/dropdown/LoadingStateDoc.vue';
|
import LoadingStateDoc from '@/doc/dropdown/LoadingStateDoc.vue';
|
||||||
import TemplateDoc from '@/doc/dropdown/TemplateDoc.vue';
|
import TemplateDoc from '@/doc/dropdown/TemplateDoc.vue';
|
||||||
import TickDoc from '@/doc/dropdown/TickDoc.vue';
|
|
||||||
import VirtualScrollDoc from '@/doc/dropdown/VirtualScrollDoc.vue';
|
import VirtualScrollDoc from '@/doc/dropdown/VirtualScrollDoc.vue';
|
||||||
import PTComponent from '@/doc/dropdown/pt/index.vue';
|
import PTComponent from '@/doc/dropdown/pt/index.vue';
|
||||||
import ThemingDoc from '@/doc/dropdown/theming/index.vue';
|
import ThemingDoc from '@/doc/dropdown/theming/index.vue';
|
||||||
|
@ -44,9 +44,9 @@ export default {
|
||||||
component: BasicDoc
|
component: BasicDoc
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'tick',
|
id: 'checkmark',
|
||||||
label: 'Tick',
|
label: 'Checkmark',
|
||||||
component: TickDoc
|
component: CheckmarkDoc
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'editable',
|
id: 'editable',
|
||||||
|
|
Loading…
Reference in New Issue