mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-10 01:12:37 +00:00
Refactor #5071
This commit is contained in:
mertsincan
parent
c06c73e285
commit
bd5b3f7c6a
22 changed files with 258 additions and 463 deletions
|
|
@ -1,29 +1,16 @@
|
|||
<template>
|
||||
<div :class="cx('headerCheckboxWrapper')" @click="onClick" @keydown.space.prevent="onClick" v-bind="getColumnPT('headerCheckboxWrapper')">
|
||||
<div class="p-hidden-accessible" v-bind="getColumnPT('hiddenHeaderInputWrapper')" :data-p-hidden-accessible="true">
|
||||
<input
|
||||
ref="input"
|
||||
type="checkbox"
|
||||
:checked="checked"
|
||||
:disabled="disabled"
|
||||
:tabindex="disabled ? null : '0'"
|
||||
:aria-label="headerCheckboxAriaLabel"
|
||||
@focus="onFocus($event)"
|
||||
@blur="onBlur($event)"
|
||||
v-bind="getColumnPT('hiddenHeaderInput')"
|
||||
/>
|
||||
</div>
|
||||
<div ref="box" :class="cx('headerCheckbox')" v-bind="getColumnPT('headerCheckbox')">
|
||||
<component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="checked" :class="cx('headerCheckboxIcon')" />
|
||||
<CheckIcon v-else-if="!headerCheckboxIconTemplate && !!checked" :class="cx('headerCheckboxIcon')" v-bind="getColumnPT('headerCheckboxIcon')" />
|
||||
</div>
|
||||
</div>
|
||||
<Checkbox :modelValue="checked" :binary="true" :disabled="disabled" :aria-label="headerCheckboxAriaLabel" @change="onChange" :pt="getColumnPT('headerCheckbox')">
|
||||
<template #icon="slotProps">
|
||||
<component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="slotProps.checked" :class="slotProps.class" />
|
||||
<CheckIcon v-else-if="!headerCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('headerCheckbox.icon')" />
|
||||
</template>
|
||||
</Checkbox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import Checkbox from 'primevue/checkbox';
|
||||
import CheckIcon from 'primevue/icons/check';
|
||||
import { DomHandler } from 'primevue/utils';
|
||||
import { mergeProps } from 'vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -40,11 +27,6 @@ export default {
|
|||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
focused: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getColumnPT(key) {
|
||||
const columnMetaData = {
|
||||
|
|
@ -56,7 +38,6 @@ export default {
|
|||
},
|
||||
context: {
|
||||
checked: this.checked,
|
||||
focused: this.focused,
|
||||
disabled: this.disabled
|
||||
}
|
||||
};
|
||||
|
|
@ -66,21 +47,11 @@ export default {
|
|||
getColumnProp() {
|
||||
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
|
||||
},
|
||||
onClick(event) {
|
||||
if (!this.disabled) {
|
||||
this.$emit('change', {
|
||||
originalEvent: event,
|
||||
checked: !this.checked
|
||||
});
|
||||
|
||||
DomHandler.focus(this.$refs.input);
|
||||
}
|
||||
},
|
||||
onFocus() {
|
||||
this.focused = true;
|
||||
},
|
||||
onBlur() {
|
||||
this.focused = false;
|
||||
onChange(event) {
|
||||
this.$emit('change', {
|
||||
originalEvent: event,
|
||||
checked: !this.checked
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -89,7 +60,8 @@ export default {
|
|||
}
|
||||
},
|
||||
components: {
|
||||
CheckIcon: CheckIcon
|
||||
CheckIcon,
|
||||
Checkbox
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,16 @@
|
|||
<template>
|
||||
<div :class="cx('checkboxWrapper')" @click="onClick" v-bind="getColumnPT('checkboxWrapper')">
|
||||
<div class="p-hidden-accessible" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
|
||||
<input
|
||||
ref="input"
|
||||
type="checkbox"
|
||||
:checked="checked"
|
||||
:disabled="$attrs.disabled"
|
||||
:tabindex="$attrs.disabled ? null : '0'"
|
||||
:aria-label="checkboxAriaLabel"
|
||||
@focus="onFocus($event)"
|
||||
@blur="onBlur($event)"
|
||||
@keydown="onKeydown"
|
||||
v-bind="getColumnPT('hiddenInput')"
|
||||
/>
|
||||
</div>
|
||||
<div ref="box" :class="cx('checkbox')" v-bind="getColumnPT('checkbox')">
|
||||
<component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="checked" :class="cx('checkboxIcon')" />
|
||||
<CheckIcon v-else-if="!rowCheckboxIconTemplate && !!checked" :class="cx('checkboxIcon')" v-bind="getColumnPT('checkboxIcon')" />
|
||||
</div>
|
||||
</div>
|
||||
<Checkbox :modelValue="checked" :binary="true" :disabled="$attrs.disabled" :aria-label="checkboxAriaLabel" @change="onChange" :pt="getColumnPT('rowCheckbox')">
|
||||
<template #icon="slotProps">
|
||||
<component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="slotProps.checked" :class="slotProps.class" />
|
||||
<CheckIcon v-else-if="!rowCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('rowCheckbox.icon')" />
|
||||
</template>
|
||||
</Checkbox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import Checkbox from 'primevue/checkbox';
|
||||
import CheckIcon from 'primevue/icons/check';
|
||||
import { DomHandler } from 'primevue/utils';
|
||||
import { mergeProps } from 'vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -45,11 +31,6 @@ export default {
|
|||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
focused: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getColumnPT(key) {
|
||||
const columnMetaData = {
|
||||
|
|
@ -62,7 +43,6 @@ export default {
|
|||
context: {
|
||||
index: this.index,
|
||||
checked: this.checked,
|
||||
focused: this.focused,
|
||||
disabled: this.$attrs.disabled
|
||||
}
|
||||
};
|
||||
|
|
@ -72,35 +52,12 @@ export default {
|
|||
getColumnProp() {
|
||||
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
|
||||
},
|
||||
onClick(event) {
|
||||
onChange(event) {
|
||||
if (!this.$attrs.disabled) {
|
||||
this.$emit('change', {
|
||||
originalEvent: event,
|
||||
data: this.value
|
||||
});
|
||||
|
||||
DomHandler.focus(this.$refs.input);
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
},
|
||||
onFocus() {
|
||||
this.focused = true;
|
||||
},
|
||||
onBlur() {
|
||||
this.focused = false;
|
||||
},
|
||||
onKeydown(event) {
|
||||
switch (event.code) {
|
||||
case 'Space': {
|
||||
this.onClick(event);
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -110,7 +67,8 @@ export default {
|
|||
}
|
||||
},
|
||||
components: {
|
||||
CheckIcon: CheckIcon
|
||||
CheckIcon,
|
||||
Checkbox
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,16 @@
|
|||
<template>
|
||||
<div :class="cx('radiobuttonWrapper')" @click="onClick" v-bind="getColumnPT('radiobuttonWrapper')">
|
||||
<div class="p-hidden-accessible" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
|
||||
<input ref="input" type="radio" :checked="checked" :disabled="$attrs.disabled" :name="name" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick" v-bind="getColumnPT('hiddenInput')" />
|
||||
</div>
|
||||
<div ref="box" :class="cx('radiobutton')" v-bind="getColumnPT('radiobutton')">
|
||||
<div :class="cx('radiobuttonIcon')" v-bind="getColumnPT('radiobuttonIcon')"></div>
|
||||
</div>
|
||||
</div>
|
||||
<RadioButton :modelValue="checked" :disabled="$attrs.disabled" :name="name" @change="onChange" :pt="getColumnPT('rowRadiobutton')" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { DomHandler } from 'primevue/utils';
|
||||
import RadioButton from 'primevue/radiobutton';
|
||||
import { mergeProps } from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'RowRadioButton',
|
||||
hostName: 'DataTable',
|
||||
extends: BaseComponent,
|
||||
inheritAttrs: false,
|
||||
emits: ['change'],
|
||||
props: {
|
||||
value: null,
|
||||
|
|
@ -30,11 +22,6 @@ export default {
|
|||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
focused: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getColumnPT(key) {
|
||||
const columnMetaData = {
|
||||
|
|
@ -47,7 +34,6 @@ export default {
|
|||
context: {
|
||||
index: this.index,
|
||||
checked: this.checked,
|
||||
focused: this.focused,
|
||||
disabled: this.$attrs.disabled
|
||||
}
|
||||
};
|
||||
|
|
@ -57,24 +43,17 @@ export default {
|
|||
getColumnProp() {
|
||||
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
|
||||
},
|
||||
onClick(event) {
|
||||
if (!this.disabled) {
|
||||
if (!this.checked) {
|
||||
this.$emit('change', {
|
||||
originalEvent: event,
|
||||
data: this.value
|
||||
});
|
||||
|
||||
DomHandler.focus(this.$refs.input);
|
||||
}
|
||||
onChange(event) {
|
||||
if (!this.$attrs.disabled) {
|
||||
this.$emit('change', {
|
||||
originalEvent: event,
|
||||
data: this.value
|
||||
});
|
||||
}
|
||||
},
|
||||
onFocus() {
|
||||
this.focused = true;
|
||||
},
|
||||
onBlur() {
|
||||
this.focused = false;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
RadioButton
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -297,23 +297,6 @@ const classes = {
|
|||
headerTitle: 'p-column-title',
|
||||
sortIcon: 'p-sortable-column-icon',
|
||||
sortBadge: 'p-sortable-column-badge',
|
||||
//headercheckbox
|
||||
headerCheckboxWrapper: ({ instance }) => [
|
||||
'p-checkbox p-component',
|
||||
{
|
||||
'p-checkbox-focused': instance.focused,
|
||||
'p-disabled': instance.disabled
|
||||
}
|
||||
],
|
||||
headerCheckbox: ({ instance }) => [
|
||||
'p-checkbox-box p-component',
|
||||
{
|
||||
'p-highlight': instance.checked,
|
||||
'p-disabled': instance.disabled,
|
||||
'p-focus': instance.focused
|
||||
}
|
||||
],
|
||||
headerCheckboxIcon: 'p-checkbox-icon',
|
||||
// columnfilter
|
||||
columnFilter: ({ props }) => [
|
||||
'p-column-filter p-fluid',
|
||||
|
|
@ -413,38 +396,6 @@ const classes = {
|
|||
rowEditorSaveIcon: 'p-row-editor-save-icon',
|
||||
rowEditorCancelButton: 'p-row-editor-cancel p-link',
|
||||
rowEditorCancelIcon: 'p-row-editor-cancel-icon',
|
||||
//rowcheckbox
|
||||
checkboxWrapper: ({ instance }) => [
|
||||
'p-checkbox p-component',
|
||||
{
|
||||
'p-checkbox-focused': instance.focused
|
||||
}
|
||||
],
|
||||
checkbox: ({ instance }) => [
|
||||
'p-checkbox-box p-component',
|
||||
{
|
||||
'p-highlight': instance.checked,
|
||||
'p-disabled': instance.$attrs.disabled,
|
||||
'p-focus': instance.focused
|
||||
}
|
||||
],
|
||||
checkboxIcon: 'p-checkbox-icon',
|
||||
//rowradiobutton
|
||||
radiobuttonWrapper: ({ instance }) => [
|
||||
'p-radiobutton p-component',
|
||||
{
|
||||
'p-radiobutton-focused': instance.focused
|
||||
}
|
||||
],
|
||||
radiobutton: ({ instance }) => [
|
||||
'p-radiobutton-box p-component',
|
||||
{
|
||||
'p-highlight': instance.checked,
|
||||
'p-disabled': instance.$attrs.disabled,
|
||||
'p-focus': instance.focused
|
||||
}
|
||||
],
|
||||
radiobuttonIcon: 'p-radiobutton-icon',
|
||||
//tablefooter
|
||||
tfoot: 'p-datatable-tfoot',
|
||||
//footercell
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue