vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 08:52:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Components added. Build issues fixed

Browse source
This commit is contained in:
Bahadir Sofuoglu 2022-09-14 14:26:01 +03:00
parent 5b66ed1093
commit 18c3721848
344 changed files with 12446 additions and 8758 deletions
Download patch file Download diff file Expand all files Collapse all files

48
components/treetable/BodyCell.vue
View file

@ -1,9 +1,9 @@
<template>
<td :style="containerStyle" :class="containerClass">
<button type="button" class="p-treetable-toggler p-link" @click="toggle" v-if="columnProp('expander')" :style="togglerStyle" tabindex="-1" v-ripple>
<button v-if="columnProp('expander')" v-ripple type="button" class="p-treetable-toggler p-link" @click="toggle" :style="togglerStyle" tabindex="-1">
<i :class="togglerIcon"></i>
</button>
<div :class="['p-checkbox p-treetable-checkbox p-component', {'p-checkbox-focused': checkboxFocused}]" @click="toggleCheckbox" v-if="checkboxSelectionMode && columnProp('expander')" role="checkbox" :aria-checked="checked">
<div v-if="checkboxSelectionMode && columnProp('expander')" :class="['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': checkboxFocused }]" @click="toggleCheckbox" role="checkbox" :aria-checked="checked">
<div class="p-hidden-accessible">
<input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" />
</div>
@ -11,18 +11,20 @@
<span :class="checkboxIcon"></span>
</div>
</div>
<component :is="column.children.body" :node="node" :column="column" v-if="column.children && column.children.body" />
<template v-else><span>{{resolveFieldData(node.data, columnProp('field'))}}</span></template>
<component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" />
<template v-else
><span>{{ resolveFieldData(node.data, columnProp('field')) }}</span></template
>
</td>
</template>
<script>
import {DomHandler,ObjectUtils} from 'primevue/utils';
import Ripple from 'primevue/ripple'
import { DomHandler, ObjectUtils } from 'primevue/utils';
import Ripple from 'primevue/ripple';
export default {
name: 'BodyCell',
emits: ['node-toggle','checkbox-toggle'],
emits: ['node-toggle', 'checkbox-toggle'],
props: {
node: {
type: Object,
@ -65,7 +67,7 @@ export default {
return {
styleObject: {},
checkboxFocused: false
}
};
},
mounted() {
if (this.columnProp('frozen')) {
@ -87,20 +89,24 @@ export default {
updateStickyPosition() {
if (this.columnProp('frozen')) {
let align = this.columnProp('alignFrozen');
if (align === 'right') {
let right = 0;
let next = this.$el.nextElementSibling;
if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
this.styleObject.right = right + 'px';
}
else {
} else {
let left = 0;
let prev = this.$el.previousElementSibling;
if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
}
this.styleObject.left = left + 'px';
}
}
@ -120,15 +126,19 @@ export default {
},
computed: {
containerClass() {
return [this.columnProp('bodyClass'), this.columnProp('class'), {
'p-frozen-column': this.columnProp('frozen')
}];
return [
this.columnProp('bodyClass'),
this.columnProp('class'),
{
'p-frozen-column': this.columnProp('frozen')
}
];
},
containerStyle() {
let bodyStyle = this.columnProp('bodyStyle');
let columnStyle = this.columnProp('style');
return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject]: [columnStyle, bodyStyle];
return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];
},
togglerStyle() {
return {
@ -137,20 +147,20 @@ export default {
};
},
togglerIcon() {
return ['p-treetable-toggler-icon pi', {'pi-chevron-right': !this.expanded, 'pi-chevron-down': this.expanded}];
return ['p-treetable-toggler-icon pi', { 'pi-chevron-right': !this.expanded, 'pi-chevron-down': this.expanded }];
},
checkboxSelectionMode() {
return this.selectionMode === 'checkbox';
},
checkboxClass() {
return ['p-checkbox-box', {'p-highlight': this.checked, 'p-focus': this.checkboxFocused, 'p-indeterminate': this.partialChecked}];
return ['p-checkbox-box', { 'p-highlight': this.checked, 'p-focus': this.checkboxFocused, 'p-indeterminate': this.partialChecked }];
},
checkboxIcon() {
return ['p-checkbox-icon', {'pi pi-check': this.checked, 'pi pi-minus': this.partialChecked}];
return ['p-checkbox-icon', { 'pi pi-check': this.checked, 'pi pi-minus': this.partialChecked }];
}
},
directives: {
'ripple': Ripple
ripple: Ripple
}
}
};
</script>