pull/5161/head
Cagatay Civici 2024-01-24 15:49:53 +03:00
commit 9707eee686
7 changed files with 17 additions and 19 deletions

View File

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

View File

@ -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'

View File

@ -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)">

View File

@ -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'
}; };

View File

@ -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>

View File

@ -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)');

View File

@ -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',