primevue/organizationchart/index.mjs

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

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 };