primevue
Version:
PrimeVue is a premium UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, wh
498 lines (489 loc) • 23.3 kB
JavaScript
import BaseComponent from '@primevue/core/basecomponent';
import OrganizationChartStyle from 'primevue/organizationchart/style';
import ChevronDown from '@primeicons/vue/chevron-down';
import ChevronUp from '@primeicons/vue/chevron-up';
import { isString } from '@primeuix/utils/object';
import Checkbox from 'primevue/checkbox';
import { toRaw, resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, createBlock, withCtx, resolveDynamicComponent, normalizeClass, createCommentVNode, toDisplayString, withModifiers, Fragment, renderList } from 'vue';
var script$2 = {
name: 'BaseOrganizationChart',
"extends": BaseComponent,
props: {
value: {
type: null,
"default": null
},
selectionKeys: {
type: null,
"default": null
},
selectionMode: {
type: String,
"default": null
},
collapsible: {
type: Boolean,
"default": false
},
collapsedKeys: {
type: null,
"default": null
},
selectable: {
type: Boolean,
"default": true
},
gap: {
type: [Number, Array],
"default": function _default() {
return [40, 56];
}
}
},
style: OrganizationChartStyle,
provide: function provide() {
return {
$pcOrganizationChart: this,
$parentInstance: this
};
}
};
var script$1 = {
name: 'OrganizationChartNode',
hostName: 'OrganizationChart',
"extends": BaseComponent,
emits: ['node-click', 'node-toggle'],
props: {
node: {
type: null,
"default": null
},
level: {
type: Number,
"default": 1
},
templates: {
type: null,
"default": null
},
selectable: {
type: Boolean,
"default": true
},
collapsible: {
type: Boolean,
"default": false
},
selectionMode: {
type: String,
"default": null
},
selectionKeys: {
type: null,
"default": null
},
collapsedKeys: {
type: null,
"default": null
}
},
methods: {
onNodeClick: function onNodeClick() {
if (this.nodeSelectable) {
this.$emit('node-click', this.node);
}
},
toggleSelection: function toggleSelection() {
this.onNodeClick();
},
onNodeKeydown: function onNodeKeydown(event) {
if (!this.nodeSelectable) return;
if (event.key === 'Enter' || event.key === ' ') {
this.$emit('node-click', this.node);
event.preventDefault();
event.stopPropagation();
}
},
onToggle: function onToggle() {
this.$emit('node-toggle', this.node);
},
onToggleKeydown: function onToggleKeydown(event) {
if (event.key === 'Enter' || event.key === ' ') {
this.$emit('node-toggle', this.node);
event.preventDefault();
event.stopPropagation();
}
},
resolveIcon: function resolveIcon(icon) {
return isString(icon) ? icon : toRaw(icon);
},
isComponentIcon: function isComponentIcon(icon) {
return !!icon && !isString(icon);
}
},
computed: {
hasChildren: function hasChildren() {
var _this$node;
return ((_this$node = this.node) === null || _this$node === void 0 || (_this$node = _this$node.children) === null || _this$node === void 0 ? void 0 : _this$node.length) > 0;
},
isCollapsible: function isCollapsible() {
return this.hasChildren && this.collapsible;
},
checkboxMode: function checkboxMode() {
return this.selectionMode === 'checkbox';
},
nodeSelectable: function nodeSelectable() {
if (!this.selectionMode) return false;
var nodeFlag = this.node.selectable;
if (nodeFlag === false) return false;
if (nodeFlag === true) return true;
return !!this.selectable;
},
selected: function selected() {
if (!this.selectionKeys) return false;
var selection = this.selectionKeys[this.node.key];
return this.selectionMode === 'checkbox' ? (selection === null || selection === void 0 ? void 0 : selection.checked) === true : selection === true;
},
partialSelected: function partialSelected() {
var _this$selectionKeys;
return this.selectionMode === 'checkbox' && ((_this$selectionKeys = this.selectionKeys) === null || _this$selectionKeys === void 0 || (_this$selectionKeys = _this$selectionKeys[this.node.key]) === null || _this$selectionKeys === void 0 ? void 0 : _this$selectionKeys.partialChecked) === true;
},
collapsed: function collapsed() {
var _this$collapsedKeys;
if (!this.isCollapsible) return false;
return ((_this$collapsedKeys = this.collapsedKeys) === null || _this$collapsedKeys === void 0 ? void 0 : _this$collapsedKeys[this.node.key]) === true;
},
toggleButtonAriaLabel: function toggleButtonAriaLabel() {
var _this$$primevue, _locale$expand, _locale$collapse;
var locale = (_this$$primevue = this.$primevue) === null || _this$$primevue === void 0 || (_this$$primevue = _this$$primevue.config) === null || _this$$primevue === void 0 || (_this$$primevue = _this$$primevue.locale) === null || _this$$primevue === void 0 ? void 0 : _this$$primevue.aria;
return this.collapsed ? (_locale$expand = locale === null || locale === void 0 ? void 0 : locale.expand) !== null && _locale$expand !== void 0 ? _locale$expand : 'Expand' : (_locale$collapse = locale === null || locale === void 0 ? void 0 : locale.collapse) !== null && _locale$collapse !== void 0 ? _locale$collapse : 'Collapse';
}
},
components: {
Checkbox: Checkbox,
ChevronDown: ChevronDown,
ChevronUp: ChevronUp
}
};
var _hoisted_1$1 = ["data-level", "aria-level", "aria-expanded", "aria-selected"];
var _hoisted_2 = ["tabindex", "data-selectable", "data-collapsible", "data-selected", "data-partial-selected", "data-collapsed"];
var _hoisted_3 = ["aria-expanded", "aria-label"];
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
var _$props$node$children;
var _component_Checkbox = resolveComponent("Checkbox");
var _component_ChevronDown = resolveComponent("ChevronDown");
var _component_ChevronUp = resolveComponent("ChevronUp");
var _component_OrganizationChartNode = resolveComponent("OrganizationChartNode", true);
return openBlock(), createElementBlock("li", mergeProps({
"class": _ctx.cx('tree'),
role: "treeitem",
"data-level": $props.level,
"aria-level": $props.level,
"aria-expanded": $options.isCollapsible ? !$options.collapsed : undefined,
"aria-selected": $props.selectionMode ? $options.selected : undefined
}, _ctx.ptm('tree')), [createElementVNode("div", mergeProps({
"class": [_ctx.cx('node'), $props.node.styleClass],
style: $props.node.style,
tabindex: $options.nodeSelectable ? 0 : -1,
"data-selectable": $options.nodeSelectable ? '' : undefined,
"data-collapsible": $options.isCollapsible ? '' : undefined,
"data-selected": $options.selected ? '' : undefined,
"data-partial-selected": $options.partialSelected ? '' : undefined,
"data-collapsed": $options.collapsed ? '' : undefined,
onClick: _cache[2] || (_cache[2] = function () {
return $options.onNodeClick && $options.onNodeClick.apply($options, arguments);
}),
onKeydown: _cache[3] || (_cache[3] = function () {
return $options.onNodeKeydown && $options.onNodeKeydown.apply($options, arguments);
})
}, _ctx.ptm('node')), [createElementVNode("div", mergeProps({
"class": _ctx.cx('content')
}, _ctx.ptm('content')), [$options.checkboxMode ? (openBlock(), createBlock(_component_Checkbox, {
key: 0,
defaultValue: $options.selected,
binary: true,
indeterminate: $options.partialSelected,
size: "small",
tabindex: -1,
unstyled: _ctx.unstyled,
pt: _ctx.ptm('pcCheckbox'),
"data-p-partialchecked": $options.partialSelected
}, {
icon: withCtx(function (slotProps) {
return [$props.templates.checkboxicon ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.checkboxicon), {
key: 0,
checked: slotProps.checked,
partialChecked: $options.partialSelected,
"class": normalizeClass(slotProps["class"])
}, null, 8, ["checked", "partialChecked", "class"])) : createCommentVNode("", true)];
}),
_: 1
}, 8, ["defaultValue", "indeterminate", "unstyled", "pt", "data-p-partialchecked"])) : createCommentVNode("", true), $props.templates["default"] ? (openBlock(), createBlock(resolveDynamicComponent($props.templates["default"]), {
key: 1,
node: $props.node,
selected: $options.selected,
partialSelected: $options.partialSelected,
collapsed: $options.collapsed,
toggleSelection: $options.toggleSelection,
icon: $props.node.data && $props.node.data.icon ? $options.resolveIcon($props.node.data.icon) : undefined,
labelClass: _ctx.cx('label')
}, null, 8, ["node", "selected", "partialSelected", "collapsed", "toggleSelection", "icon", "labelClass"])) : (openBlock(), createElementBlock("span", mergeProps({
key: 2,
"class": _ctx.cx('label')
}, _ctx.ptm('label')), toDisplayString($props.node.label), 17))], 16), $options.isCollapsible ? (openBlock(), createElementBlock("button", mergeProps({
key: 0,
type: "button",
"class": _ctx.cx('toggle'),
"aria-expanded": !$options.collapsed,
"aria-label": $options.toggleButtonAriaLabel,
onClick: _cache[0] || (_cache[0] = withModifiers(function () {
return $options.onToggle && $options.onToggle.apply($options, arguments);
}, ["stop"])),
onKeydown: _cache[1] || (_cache[1] = function () {
return $options.onToggleKeydown && $options.onToggleKeydown.apply($options, arguments);
})
}, _ctx.ptm('toggle')), [createElementVNode("span", mergeProps({
"class": _ctx.cx('toggleIndicator')
}, _ctx.ptm('toggleIndicator')), [$props.templates.toggleicon ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.toggleicon), {
key: 0,
collapsed: $options.collapsed
}, null, 8, ["collapsed"])) : $options.collapsed ? (openBlock(), createBlock(_component_ChevronDown, {
key: 1
})) : (openBlock(), createBlock(_component_ChevronUp, {
key: 2
}))], 16)], 16, _hoisted_3)) : createCommentVNode("", true)], 16, _hoisted_2), (_$props$node$children = $props.node.children) !== null && _$props$node$children !== void 0 && _$props$node$children.length && !$options.collapsed ? (openBlock(), createElementBlock("ul", mergeProps({
key: 0,
"class": _ctx.cx('subtree'),
role: "group"
}, _ctx.ptm('subtree')), [(openBlock(true), createElementBlock(Fragment, null, renderList($props.node.children, function (child) {
return openBlock(), createBlock(_component_OrganizationChartNode, {
key: child.key,
node: child,
level: $props.level + 1,
templates: $props.templates,
selectable: $props.selectable,
collapsible: $props.collapsible,
selectionMode: $props.selectionMode,
selectionKeys: $props.selectionKeys,
collapsedKeys: $props.collapsedKeys,
pt: _ctx.pt,
unstyled: _ctx.unstyled,
onNodeClick: _cache[4] || (_cache[4] = function ($event) {
return _ctx.$emit('node-click', $event);
}),
onNodeToggle: _cache[5] || (_cache[5] = function ($event) {
return _ctx.$emit('node-toggle', $event);
})
}, null, 8, ["node", "level", "templates", "selectable", "collapsible", "selectionMode", "selectionKeys", "collapsedKeys", "pt", "unstyled"]);
}), 128))], 16)) : createCommentVNode("", true)], 16, _hoisted_1$1);
}
script$1.render = render$1;
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: true } : { done: false, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = true, u = false; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = true, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var script = {
name: 'OrganizationChart',
"extends": script$2,
inheritAttrs: false,
emits: ['node-unselect', 'node-select', 'update:selectionKeys', 'node-expand', 'node-collapse', 'update:collapsedKeys'],
data: function data() {
return {
d_collapsedKeys: this.collapsedKeys ? _objectSpread({}, this.collapsedKeys) : {},
d_selectionKeys: this.selectionKeys ? _objectSpread({}, this.selectionKeys) : {}
};
},
watch: {
collapsedKeys: function collapsedKeys(newValue) {
this.d_collapsedKeys = newValue ? _objectSpread({}, newValue) : {};
},
selectionKeys: function selectionKeys(newValue) {
this.d_selectionKeys = newValue ? _objectSpread({}, newValue) : {};
}
},
methods: {
onNodeClick: function onNodeClick(node) {
if (!this.selectionMode) return;
if (this.selectionMode === 'checkbox') {
this.onCheckboxNodeClick(node);
return;
}
var key = node.key;
var isSelected = this.d_selectionKeys[key] === true;
var next;
if (isSelected) {
next = this.selectionMode === 'single' ? {} : _objectSpread({}, this.d_selectionKeys);
if (this.selectionMode !== 'single') delete next[key];
this.$emit('node-unselect', node);
} else {
next = this.selectionMode === 'single' ? {} : _objectSpread({}, this.d_selectionKeys);
next[key] = true;
this.$emit('node-select', node);
}
this.d_selectionKeys = next;
this.$emit('update:selectionKeys', next);
},
onCheckboxNodeClick: function onCheckboxNodeClick(node) {
var _next$node$key,
_this$getAncestorKeys,
_this = this;
var next = _objectSpread({}, this.d_selectionKeys);
var selecting = ((_next$node$key = next[node.key]) === null || _next$node$key === void 0 ? void 0 : _next$node$key.checked) !== true;
var descendantKeys = [node.key].concat(_toConsumableArray(this.getDescendantKeys(node)));
descendantKeys.forEach(function (key) {
if (selecting) next[key] = {
checked: true,
partialChecked: false
};else delete next[key];
});
((_this$getAncestorKeys = this.getAncestorKeys(node.key)) !== null && _this$getAncestorKeys !== void 0 ? _this$getAncestorKeys : []).reverse().forEach(function (key) {
var _ancestor$children$ma, _ancestor$children;
var ancestor = _this.findNodeByKey(key);
var childKeys = (_ancestor$children$ma = ancestor === null || ancestor === void 0 || (_ancestor$children = ancestor.children) === null || _ancestor$children === void 0 ? void 0 : _ancestor$children.map(function (child) {
return child.key;
})) !== null && _ancestor$children$ma !== void 0 ? _ancestor$children$ma : [];
var allChecked = childKeys.every(function (childKey) {
var _next$childKey;
return ((_next$childKey = next[childKey]) === null || _next$childKey === void 0 ? void 0 : _next$childKey.checked) === true;
});
var someChecked = childKeys.some(function (childKey) {
var _next$childKey2, _next$childKey3;
return ((_next$childKey2 = next[childKey]) === null || _next$childKey2 === void 0 ? void 0 : _next$childKey2.checked) === true || ((_next$childKey3 = next[childKey]) === null || _next$childKey3 === void 0 ? void 0 : _next$childKey3.partialChecked) === true;
});
if (allChecked) next[key] = {
checked: true,
partialChecked: false
};else if (someChecked) next[key] = {
checked: false,
partialChecked: true
};else delete next[key];
});
this.d_selectionKeys = next;
this.$emit(selecting ? 'node-select' : 'node-unselect', node);
this.$emit('update:selectionKeys', next);
},
onNodeToggle: function onNodeToggle(node) {
var key = node.key;
var next = _objectSpread({}, this.d_collapsedKeys);
if (next[key]) {
delete next[key];
this.$emit('node-expand', node);
} else {
next[key] = true;
this.$emit('node-collapse', node);
}
this.d_collapsedKeys = next;
this.$emit('update:collapsedKeys', next);
},
findNodeByKey: function findNodeByKey(key) {
var nodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.normalizedValue;
var _iterator = _createForOfIteratorHelper(nodes),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var node = _step.value;
if (node.key === key) return node;
var match = node.children ? this.findNodeByKey(key, node.children) : null;
if (match) return match;
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return null;
},
getDescendantKeys: function getDescendantKeys(node) {
var _node$children,
_this2 = this;
return ((_node$children = node.children) !== null && _node$children !== void 0 ? _node$children : []).flatMap(function (child) {
return [child.key].concat(_toConsumableArray(_this2.getDescendantKeys(child)));
});
},
getAncestorKeys: function getAncestorKeys(key) {
var nodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.normalizedValue;
var trail = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
var _iterator2 = _createForOfIteratorHelper(nodes),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var node = _step2.value;
if (node.key === key) return trail;
var path = node.children ? this.getAncestorKeys(key, node.children, [].concat(_toConsumableArray(trail), [node.key])) : null;
if (path) return path;
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
return null;
}
},
computed: {
normalizedValue: function normalizedValue() {
if (!this.value) return [];
return Array.isArray(this.value) ? this.value : [this.value];
},
rootStyle: function rootStyle() {
var _this$gap;
var gap = (_this$gap = this.gap) !== null && _this$gap !== void 0 ? _this$gap : 40;
if (!Array.isArray(gap)) {
gap = [gap, gap];
} else if (gap.length === 0) {
gap = [40, 40];
} else if (gap.length === 1) {
gap = [gap[0], gap[0]];
}
return {
'--px-gap-x': "".concat(gap[0], "px"),
'--px-gap-y': "".concat(gap[1], "px")
};
}
},
components: {
OrganizationChartNode: script$1
}
};
var _hoisted_1 = ["aria-multiselectable"];
function render(_ctx, _cache, $props, $setup, $data, $options) {
var _component_OrganizationChartNode = resolveComponent("OrganizationChartNode");
return openBlock(), createElementBlock("div", mergeProps({
"class": _ctx.cx('root'),
style: $options.rootStyle,
role: "tree",
"aria-multiselectable": _ctx.selectionMode === 'multiple' || _ctx.selectionMode === 'checkbox'
}, _ctx.ptmi('root')), [createElementVNode("ul", mergeProps({
"class": _ctx.cx('subtree', {
root: true
}),
role: "group"
}, _ctx.ptm('subtree')), [(openBlock(true), createElementBlock(Fragment, null, renderList($options.normalizedValue, function (item) {
return openBlock(), createBlock(_component_OrganizationChartNode, {
key: item.key,
node: item,
level: 1,
templates: _ctx.$slots,
selectable: _ctx.selectable,
collapsible: _ctx.collapsible,
selectionMode: _ctx.selectionMode,
selectionKeys: $data.d_selectionKeys,
collapsedKeys: $data.d_collapsedKeys,
pt: _ctx.pt,
onNodeClick: $options.onNodeClick,
onNodeToggle: $options.onNodeToggle,
unstyled: _ctx.unstyled
}, null, 8, ["node", "templates", "selectable", "collapsible", "selectionMode", "selectionKeys", "collapsedKeys", "pt", "onNodeClick", "onNodeToggle", "unstyled"]);
}), 128))], 16)], 16, _hoisted_1);
}
script.render = render;
export { script as default };