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

Refactor #3922 - For TriStateCheckbox

pull/3938/head
Bahadır Sofuoğlu 2023-05-07 14:19:35 +03:00
parent eb3536cb4b
commit 33b82cc951
7 changed files with 193 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
components/lib/tristatecheckbox/TriStateCheckbox.d.ts vendored
View File

@ -10,6 +10,72 @@
import { InputHTMLAttributes, VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
export declare type TriStateCheckboxPassThroughOptionType = TriStateCheckboxPassThroughAttributes | ((options: TriStateCheckboxPassThroughMethodOptions) => TriStateCheckboxPassThroughAttributes) | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface TriStateCheckboxPassThroughMethodOptions {
props: TriStateCheckboxProps;
state: TriStateCheckboxState;
}
/**
* Custom passthrough(pt) options.
* @see {@link TriStateCheckboxProps.pt}
*/
export interface TriStateCheckboxPassThroughOptions {
/**
* Uses to pass attributes to the root's DOM element.
*/
root?: TriStateCheckboxPassThroughOptionType;
/**
* Uses to pass attributes to the input aria's DOM element.
*/
inputAria?: TriStateCheckboxPassThroughOptionType;
/**
* Uses to pass attributes to the input's DOM element.
*/
input?: TriStateCheckboxPassThroughOptionType;
/**
* Uses to pass attributes to the sr only aria's DOM element.
*/
srOnlyAria?: TriStateCheckboxPassThroughOptionType;
/**
* Uses to pass attributes to the checkbox box's DOM element.
*/
checboxBox?: TriStateCheckboxPassThroughOptionType;
/**
* Uses to pass attributes to the check icon's DOM element.
*/
checkIcon?: TriStateCheckboxPassThroughOptionType;
/**
* Uses to pass attributes to the uncheck icon's DOM element.
*/
uncheckIcon?: TriStateCheckboxPassThroughOptionType;
/**
* Uses to pass attributes to the nullable icon's DOM element.
*/
nullableIcon?: TriStateCheckboxPassThroughOptionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface TriStateCheckboxPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in TriStateCheckbox component.
*/
export interface TriStateCheckboxState {
/**
* Focused state as a boolean.
*/
focused: boolean;
}
/**
* Defines valid properties in TriStateCheckbox component.
*/
@ -45,6 +111,11 @@ export interface TriStateCheckboxProps {
* Establishes a string value that labels the component.
*/
'aria-label'?: string | undefined;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {TriStateCheckboxPassThroughOptions}
*/
pt?: TriStateCheckboxPassThroughOptions;
}
/**

18
components/lib/tristatecheckbox/TriStateCheckbox.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="containerClass" @click="onClick($event)">
<div class="p-hidden-accessible">
<div :class="containerClass" @click="onClick($event)" v-bind="ptm('root')">
<div class="p-hidden-accessible" v-bind="ptm('inputAria')">
<input
ref="input"
:id="inputId"
@ -13,30 +13,32 @@
@keydown="onKeyDown($event)"
@focus="onFocus($event)"
@blur="onBlur($event)"
v-bind="inputProps"
v-bind="{ ...inputProps, ...ptm('input') }"
/>
</div>
<span class="p-sr-only" aria-live="polite">{{ ariaValueLabel }}</span>
<div ref="box" :class="['p-checkbox-box', { 'p-highlight': modelValue != null, 'p-disabled': disabled, 'p-focus': focused }]">
<span class="p-sr-only" aria-live="polite" v-bind="ptm('srOnlyAria')">{{ ariaValueLabel }}</span>
<div ref="box" :class="['p-checkbox-box', { 'p-highlight': modelValue != null, 'p-disabled': disabled, 'p-focus': focused }]" v-bind="ptm('checboxBox')">
<slot v-if="modelValue === true" name="checkicon">
<component :is="'CheckIcon'" class="p-checkbox-icon" />
<component :is="'CheckIcon'" class="p-checkbox-icon" v-bind="ptm('checkIcon')" />
</slot>
<slot v-else-if="modelValue === false" name="uncheckicon">
<component :is="'TimesIcon'" class="p-checkbox-icon" />
<component :is="'TimesIcon'" class="p-checkbox-icon" v-bind="ptm('uncheckIcon')" />
</slot>
<slot v-else name="nullableicon">
<span class="p-checkbox-icon"></span>
<span class="p-checkbox-icon" v-bind="ptm('nullableIcon')"></span>
</slot>
</div>
</div>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import CheckIcon from 'primevue/icons/check';
import TimesIcon from 'primevue/icons/times';
export default {
name: 'TriStateCheckbox',
extends: BaseComponent,
emits: ['click', 'update:modelValue', 'change', 'keydown', 'focus', 'blur'],
props: {
modelValue: null,

51
doc/tristatecheckbox/pt/PTDoc.vue Normal file
View File

@ -0,0 +1,51 @@
<template>
<DocSectionText v-bind="$attrs"> </DocSectionText>
<div class="card flex flex-column align-items-center gap-3">
<TriStateCheckbox v-model="value" />
<label for="checkbox">{{ value == null ? 'null' : value }}</label>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value: null,
code: {
basic: `<TriStateCheckbox v-model="value" />`,
options: `
<template>
<div class="card flex flex-column align-items-center gap-3">
<TriStateCheckbox v-model="value" />
<label for="checkbox">{{ value == null ? 'null' : value }}</label>
</div>
</template>
<script>
export default {
data() {
return {
value: null
}
}
}
<\/script>`,
composition: `
<template>
<div class="card flex flex-column align-items-center gap-3">
<TriStateCheckbox v-model="value" />
<label for="checkbox">{{ value == null ? 'null' : value }}</label>
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(null);
<\/script>`
}
};
}
};
</script>

8
doc/tristatecheckbox/pt/PTImage.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
</div>
</template>

41
doc/tristatecheckbox/pt/index.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Rating Pass Through</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
import PtDoc from './PTDoc.vue';
import PTImage from './PTImage.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
},
{
id: 'pt.doc.steps',
label: 'Rating PT Options',
component: DocApiTable,
data: getPTOption('TriStateCheckbox')
},
{
id: 'pt.demo',
label: 'Demo',
component: PtDoc
}
]
};
}
};
</script>

1
pages/slider/index.vue
View File

@ -12,6 +12,7 @@ import StepDoc from '@/doc/slider/StepDoc';
import StyleDoc from '@/doc/slider/StyleDoc';
import VerticalDoc from '@/doc/slider/VerticalDoc';
import PTComponent from '@/doc/slider/pt/index.vue';
export default {
data() {
return {

13
pages/tristatecheckbox/index.vue
View File

@ -1,5 +1,12 @@
<template>
<DocComponent title="Vue TriStateCheckbox Component" header="TriStateCheckbox" description="TriStateCheckbox is used to select either true, false or null as the value." :componentDocs="docs" :apiDocs="['TriStateCheckbox']" />
<DocComponent
title="Vue TriStateCheckbox Component"
header="TriStateCheckbox"
description="TriStateCheckbox is used to select either true, false or null as the value."
:componentDocs="docs"
:apiDocs="['TriStateCheckbox']"
:ptTabComponent="ptComponent"
/>
</template>
<script>
@ -10,6 +17,7 @@ import VeeValidateDoc from '@/doc/tristatecheckbox/form/VeeValidateDoc.vue';
import ImportDoc from '@/doc/tristatecheckbox/ImportDoc';
import InvalidDoc from '@/doc/tristatecheckbox/InvalidDoc';
import StyleDoc from '@/doc/tristatecheckbox/StyleDoc';
import PTComponent from '@/doc/tristatecheckbox/pt/index.vue';
export default {
data() {
@ -57,7 +65,8 @@ export default {
label: 'Accessibility',
component: AccessibilityDoc
}
]
],
ptComponent: PTComponent
};
}
};