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

Refactor #5785

pull/5806/head
tugcekucukoglu 2024-05-27 12:24:31 +03:00
parent 438bc8a45e
commit d1f4ac5c8b
18 changed files with 138 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/components/column.js
View File

@ -301,11 +301,7 @@ const ColumnSlots = [
description: 'Custom loading template.'
},
{
name: 'rowtogglericon',
description: 'Custom row toggler icon template.'
},
{
name: 'rowtogglericon',
name: 'rowtoggleicon',
description: 'Custom row toggler icon template.'
},
{

2
api-generator/components/datatable.js
View File

@ -1177,7 +1177,7 @@ const DataTableSlots = [
description: 'Custom reorder indicator down icon template.'
},
{
name: 'rowgrouptogglericon',
name: 'rowgrouptoggleicon',
description: 'Custom rowgroup toggler icon template.'
},
{

2
api-generator/components/fieldset.js
View File

@ -62,7 +62,7 @@ const FieldsetSlots = [
description: 'Custom legend template.'
},
{
name: 'togglericon',
name: 'toggleicon',
description: 'Custom toggler icon template.'
}
];

2
api-generator/components/organizationchart.js
View File

@ -92,7 +92,7 @@ const OrganizationChartEvents = [
const OrganizationChartSlots = [
{
name: 'togglericon',
name: 'toggleicon',
description: 'Custom toggler icon template.'
}
];

2
api-generator/components/panel.js
View File

@ -66,7 +66,7 @@ const PanelSlots = [
description: "Custom content for the header's icon."
},
{
name: 'togglericon',
name: 'toggleicon',
description: "Custom content for the component's toggler icon."
},
{

2
api-generator/components/tree.js
View File

@ -155,7 +155,7 @@ const TreeSlots = [
description: 'Custom search icon template.'
},
{
name: 'togglericon',
name: 'toggleicon',
description: 'Custom toggler icon template.'
},
{

2
api-generator/components/treeselect.js
View File

@ -224,7 +224,7 @@ const TreeSelectSlots = [
description: 'Custom content for the dropdown indicator'
},
{
name: 'itemtogglericon',
name: 'itemtoggleicon',
description: 'Custom item toggler icon template.'
},
{

2
api-generator/components/treetable.js
View File

@ -478,7 +478,7 @@ const TreeTableSlots = [
description: 'Custom loading icon template.'
},
{
name: 'togglericon',
name: 'toggleicon',
description: 'Custom toggler icon template.'
},
{

2
components/lib/datatable/DataTable.vue
View File

@ -792,7 +792,7 @@ export default {
this.rowTouched = false;
if (focusedItem) {
if (event.target?.getAttribute('data-pc-section') === 'rowtogglericon' || event.target?.parentElement?.getAttribute('data-pc-section') === 'rowtogglericon') return;
if (event.target?.getAttribute('data-pc-section') === 'rowtoggleicon' || event.target?.parentElement?.getAttribute('data-pc-section') === 'rowtoggleicon') return;
const targetRow = event.target?.closest('tr[data-p-selectable-row="true"]');

11
components/lib/organizationchart/OrganizationChart.d.ts vendored
View File

@ -293,6 +293,7 @@ export interface OrganizationChartSlots {
*/
[key: string]: (node: any) => VNode[];
/**
* @deprecated since v4.0. Use 'toggleicon' slot instead.
* Custom toggler icon template.
* @param {Object} scope - togglericon slot's params.
*/
@ -302,6 +303,16 @@ export interface OrganizationChartSlots {
*/
expanded: boolean;
}): VNode[];
/**
* Custom toggler icon template.
* @param {Object} scope - togglericon slot's params.
*/
toggleicon(scope: {
/**
* Curent state of the node
*/
expanded: boolean;
}): VNode[];
}
/**

3
components/lib/organizationchart/OrganizationChartNode.vue
View File

@ -6,7 +6,8 @@
<div :class="[cx('node'), node.styleClass]" @click="onNodeClick" v-bind="getPTOptions('node')">
<component :is="templates[node.type] || templates['default']" :node="node" />
<a v-if="toggleable" tabindex="0" :class="cx('nodeToggleButton')" @click="toggleNode" @keydown="onKeydown" v-bind="getPTOptions('nodeToggleButton')">
<component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" :class="cx('nodeToggleButtonIcon')" v-bind="getPTOptions('nodeToggleButtonIcon')" />
<!--TODO: togglericon deprecated since v4.0-->
<component v-if="templates.toggleicon || templates.togglericon" :is="templates.toggleicon || templates.togglericon" :expanded="expanded" :class="cx('nodeToggleButtonIcon')" v-bind="getPTOptions('nodeToggleButtonIcon')" />
<component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" :class="cx('nodeToggleButtonIcon')" v-bind="getPTOptions('nodeToggleButtonIcon')" />
</a>
</div>

34
components/lib/tree/Tree.d.ts vendored
View File

@ -378,8 +378,9 @@ export interface TreeSlots {
class: string;
}): VNode[];
/**
* Custom toggler icon template.
* @param {Object} scope - togglericon slot's params.
* @deprecated since v4.0. Use 'nodetoggleicon' slot instead.
* Custom toggle icon template.
* @param {Object} scope - toggleicon slot's params.
*/
togglericon(scope: {
/**
@ -391,6 +392,35 @@ export interface TreeSlots {
*/
expanded: boolean;
}): VNode[];
/**
* @deprecated since v4.0. Use 'nodetoggleicon' slot instead.
* Custom node toggle icon template.
* @param {Object} scope - toggleicon slot's params.
*/
nodetogglericon(scope: {
/**
* Tree node instance
*/
node: TreeNode;
/**
* Expanded state of the node
*/
expanded: boolean;
}): VNode[];
/**
* Custom node toggle icon template.
* @param {Object} scope - toggleicon slot's params.
*/
nodetoggleicon(scope: {
/**
* Tree node instance
*/
node: TreeNode;
/**
* Expanded state of the node
*/
expanded: boolean;
}): VNode[];
/**
* Custom node icon template.
* @param {Object} scope - nodeicon slot's params.

8
components/lib/tree/TreeNode.vue
View File

@ -17,11 +17,13 @@
<div :class="cx('nodeContent')" @click="onClick" @touchend="onTouchEnd" :style="node.style" v-bind="getPTOptions('nodeContent')" :data-p-selected="checkboxMode ? checked : selected" :data-p-selectable="selectable">
<button v-ripple type="button" :class="cx('nodeToggleButton')" @click="toggle" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('nodeToggleButton')">
<template v-if="node.loading && loadingMode === 'icon'">
<component v-if="templates['nodetogglericon']" :is="templates['nodetogglericon']" :class="cx('nodetogglericon')" />
<SpinnerIcon v-else spin :class="cx('nodetogglericon')" v-bind="ptm('nodetogglericon')" />
<!-- TODO: nodetogglericon deprecated since v4.0-->
<component v-if="templates['nodetoggleicon'] || templates['nodetogglericon']" :is="templates['nodetoggleicon'] || templates['nodetogglericon']" :class="cx('nodeToggleIcon')" />
<SpinnerIcon v-else spin :class="cx('nodetogglericon')" v-bind="ptm('nodeToggleIcon')" />
</template>
<template v-else>
<component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" :class="cx('nodeToggleIcon')" />
<!-- TODO: togglericon deprecated since v4.0-->
<component v-if="templates['nodetoggleicon'] || templates['togglericon']" :is="templates['nodetoggleicon'] || templates['togglericon']" :node="node" :expanded="expanded" :class="cx('nodeToggleIcon')" />
<component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('nodeToggleIcon')" v-bind="getPTOptions('nodeToggleIcon')" />
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('nodeToggleIcon')" v-bind="getPTOptions('nodeToggleIcon')" />
</template>

4
components/lib/tree/style/TreeStyle.d.ts vendored
View File

@ -50,10 +50,6 @@ export enum TreeClasses {
* Class name of the node toggle icon element
*/
nodeToggleIcon = 'p-tree-node-toggle-icon',
/**
* Class name of the node toggler icon element
*/
nodeTogglerIcon = 'p-tree-node-toggler-icon',
/**
* Class name of the node checkbox element
*/

1
components/lib/tree/style/TreeStyle.js
View File

@ -176,7 +176,6 @@ const classes = {
],
nodeToggleButton: 'p-tree-node-toggle-button',
nodeToggleIcon: 'p-tree-node-toggle-icon',
nodeTogglerIcon: 'p-tree-node-toggler-icon', //TODO: discuss
nodeCheckbox: 'p-tree-node-checkbox',
nodeIcon: 'p-tree-node-icon',
nodeLabel: 'p-tree-node-label',

15
components/lib/treeselect/TreeSelect.d.ts vendored
View File

@ -346,6 +346,7 @@ export interface TreeSelectSlots {
class: string;
}): VNode[];
/**
* @deprecated since v4.0. Use 'itemtoggleicon' slot instead.
* Custom item toggler icon template.
* @param {Object} scope - item toggler icon slot's params.
*/
@ -359,6 +360,20 @@ export interface TreeSelectSlots {
*/
expanded: TreeNode[];
}): VNode[];
/**
* Custom item toggle icon template.
* @param {Object} scope - item toggle icon slot's params.
*/
itemtoggleicon(scope: {
/**
* Node instance
*/
node: TreeNode | any;
/**
* Expanded state of the node
*/
expanded: TreeNode[];
}): VNode[];
/**
* Custom item checkbox icon template.
* @param {Object} scope - item checkbox icon slot's params.

6
components/lib/treeselect/TreeSelect.vue
View File

@ -77,7 +77,11 @@
:unstyled="unstyled"
:pt="ptm('pcTree')"
>
<template v-if="$slots.itemtogglericon" #togglericon="iconProps">
<template v-if="$slots.itemtoggleicon" #toggleicon="iconProps">
<slot name="itemtoggleicon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />
</template>
<!--TODO: itemtogglericon deprecated since v4.0-->
<template v-else-if="$slots.itemtogglericon" #togglericon="iconProps">
<slot name="itemtogglericon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />
</template>
<template v-if="$slots.itemcheckboxicon" #checkboxicon="iconProps">

69
doc/common/apidoc/index.json
View File

@ -51794,6 +51794,20 @@
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "",
"deprecated": "since v4.0. Use 'toggleicon' slot instead.\nCustom toggler icon template."
},
{
"name": "toggleicon",
"parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">expanded</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Curent state of the node</span>\n }",
"description": "togglericon slot's params."
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom toggler icon template."
}
]
@ -102515,11 +102529,39 @@
"name": "scope",
"optional": false,
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">node</span>: <span class=\"doc-option-parameter-type\">TreeNode</span>, <span class=\"doc-option-parameter-type\">// Tree node instance</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">expanded</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Expanded state of the node</span>\n }",
"description": "togglericon slot's params."
"description": "toggleicon slot's params."
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom toggler icon template."
"description": "",
"deprecated": "since v4.0. Use 'nodetoggleicon' slot instead.\nCustom toggle icon template."
},
{
"name": "nodetogglericon",
"parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">node</span>: <span class=\"doc-option-parameter-type\">TreeNode</span>, <span class=\"doc-option-parameter-type\">// Tree node instance</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">expanded</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Expanded state of the node</span>\n }",
"description": "toggleicon slot's params."
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "",
"deprecated": "since v4.0. Use 'nodetoggleicon' slot instead.\nCustom node toggle icon template."
},
{
"name": "nodetoggleicon",
"parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">node</span>: <span class=\"doc-option-parameter-type\">TreeNode</span>, <span class=\"doc-option-parameter-type\">// Tree node instance</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">expanded</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Expanded state of the node</span>\n }",
"description": "toggleicon slot's params."
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom node toggle icon template."
},
{
"name": "nodeicon",
@ -102855,13 +102897,6 @@
"value": "\"p-tree-node-toggle-icon\"",
"description": "Class name of the node toggle icon element"
},
{
"name": "nodeTogglerIcon",
"optional": false,
"readonly": false,
"value": "\"p-tree-node-toggler-icon\"",
"description": "Class name of the node toggler icon element"
},
{
"name": "nodeCheckbox",
"optional": false,
@ -103585,7 +103620,21 @@
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom item toggler icon template."
"description": "",
"deprecated": "since v4.0. Use 'itemtoggleicon' slot instead.\nCustom item toggler icon template."
},
{
"name": "itemtoggleicon",
"parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">node</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Node instance</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">expanded</span>: <span class=\"doc-option-parameter-type\">TreeNode</span>, <span class=\"doc-option-parameter-type\">// Expanded state of the node</span>\n }",
"description": "item toggle icon slot's params."
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom item toggle icon template."
},
{
"name": "itemcheckboxicon",