Refactor #3965 - For TriStateCheckbox
parent
67e99ac4fc
commit
1cad891084
|
@ -14,7 +14,7 @@ const classes = {
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
hiddenInputWrapper: 'p-hidden-accessible',
|
hiddenInputWrapper: 'p-hidden-accessible',
|
||||||
srOnlyAria: 'p-sr-only',
|
hiddenValueLabel: 'p-hidden-accessible',
|
||||||
checkbox: ({ instance, props }) => [
|
checkbox: ({ instance, props }) => [
|
||||||
'p-checkbox-box',
|
'p-checkbox-box',
|
||||||
{
|
{
|
||||||
|
|
|
@ -55,9 +55,9 @@ export interface TriStateCheckboxPassThroughOptions {
|
||||||
*/
|
*/
|
||||||
hiddenInput?: TriStateCheckboxPassThroughOptionType;
|
hiddenInput?: TriStateCheckboxPassThroughOptionType;
|
||||||
/**
|
/**
|
||||||
* Uses to pass attributes to the sr only aria's DOM element.
|
* Uses to pass attributes to the hidden value label's DOM element.
|
||||||
*/
|
*/
|
||||||
srOnlyAria?: TriStateCheckboxPassThroughOptionType;
|
hiddenValueLabel?: TriStateCheckboxPassThroughOptionType;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
|
v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<span :class="cx('srOnlyAria')" aria-live="polite" v-bind="ptm('srOnlyAria')">{{ ariaValueLabel }}</span>
|
<span role="status" :class="cx('hiddenValueLabel')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('hiddenValueLabel')" :data-p-hidden-accessible="true">{{ ariaValueLabel }}</span>
|
||||||
<div ref="box" :class="cx('checkbox')" v-bind="getPTOptions('checkbox')" :data-p-highlight="modelValue != null" :data-p-disabled="disabled" :data-p-focused="focused">
|
<div ref="box" :class="cx('checkbox')" v-bind="getPTOptions('checkbox')" :data-p-highlight="modelValue != null" :data-p-disabled="disabled" :data-p-focused="focused">
|
||||||
<slot v-if="modelValue === true" name="checkicon" :class="cx('checkIcon')">
|
<slot v-if="modelValue === true" name="checkicon" :class="cx('checkIcon')">
|
||||||
<component :is="'CheckIcon'" :class="cx('checkIcon')" v-bind="ptm('checkIcon')" />
|
<component :is="'CheckIcon'" :class="cx('checkIcon')" v-bind="ptm('checkIcon')" />
|
||||||
|
|
Loading…
Reference in New Issue