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

Disabled and checked token for checkbox

pull/6011/head
Cagatay Civici 2024-07-03 11:44:06 +03:00
parent ee171b5c86
commit 2966a83ffd
5 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/showcase/doc/checkbox/DisabledDoc.vue
View File

@ -2,8 +2,9 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p> <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center gap-2">
<Checkbox v-model="checked" disabled /> <Checkbox v-model="checked1" binary disabled />
<Checkbox v-model="checked2" binary disabled />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -12,15 +13,18 @@
export default { export default {
data() { data() {
return { return {
checked: false, checked1: false,
checked2: true,
code: { code: {
basic: ` basic: `
<Checkbox v-model="checked" disabled /> <Checkbox v-model="checked1" binary disabled />
<Checkbox v-model="checked2" binary disabled />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center gap-2">
<Checkbox v-model="checked" disabled /> <Checkbox v-model="checked1" binary disabled />
<Checkbox v-model="checked2" binary disabled />
</div> </div>
</template> </template>
@ -36,8 +40,9 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center gap-2">
<Checkbox v-model="checked" disabled /> <Checkbox v-model="checked1" binary disabled />
<Checkbox v-model="checked2" binary disabled />
</div> </div>
</template> </template>

1
packages/primevue/src/checkbox/style/CheckboxStyle.js
View File

@ -106,6 +106,7 @@ const theme = ({ dt }) => `
.p-checkbox.p-disabled .p-checkbox-box { .p-checkbox.p-disabled .p-checkbox-box {
background: ${dt('checkbox.disabled.background')}; background: ${dt('checkbox.disabled.background')};
border-color: ${dt('checkbox.checked.disabled.border.color')};
} }
.p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon {

1
packages/themes/src/presets/aura/checkbox/index.js
View File

@ -14,6 +14,7 @@ export default {
checkedBorderColor: '{primary.color}', checkedBorderColor: '{primary.color}',
checkedHoverBorderColor: '{primary.hover.color}', checkedHoverBorderColor: '{primary.hover.color}',
checkedFocusBorderColor: '{primary.color}', checkedFocusBorderColor: '{primary.color}',
checkedDisabledBorderColor: '{form.field.border.color}',
invalidBorderColor: '{form.field.invalid.border.color}', invalidBorderColor: '{form.field.invalid.border.color}',
shadow: '{form.field.shadow}', shadow: '{form.field.shadow}',
focusRing: { focusRing: {

1
packages/themes/src/presets/lara/checkbox/index.js
View File

@ -14,6 +14,7 @@ export default {
checkedBorderColor: '{primary.color}', checkedBorderColor: '{primary.color}',
checkedHoverBorderColor: '{primary.hover.color}', checkedHoverBorderColor: '{primary.hover.color}',
checkedFocusBorderColor: '{primary.color}', checkedFocusBorderColor: '{primary.color}',
checkedDisabledBorderColor: '{form.field.border.color}',
invalidBorderColor: '{form.field.invalid.border.color}', invalidBorderColor: '{form.field.invalid.border.color}',
shadow: '{form.field.shadow}', shadow: '{form.field.shadow}',
focusRing: { focusRing: {

1
packages/themes/src/presets/nora/checkbox/index.js
View File

@ -14,6 +14,7 @@ export default {
checkedBorderColor: '{primary.color}', checkedBorderColor: '{primary.color}',
checkedHoverBorderColor: '{primary.hover.color}', checkedHoverBorderColor: '{primary.hover.color}',
checkedFocusBorderColor: '{primary.color}', checkedFocusBorderColor: '{primary.color}',
checkedDisabledBorderColor: '{form.field.border.color}',
invalidBorderColor: '{form.field.invalid.border.color}', invalidBorderColor: '{form.field.invalid.border.color}',
shadow: '{form.field.shadow}', shadow: '{form.field.shadow}',
focusRing: { focusRing: {