primevue 4.1.1 → 4.2.0

package/treeselect/index.mjs

@@ -1,5 +1,5 @@
 import { focus, getFirstFocusableElement, getLastFocusableElement, find, getFocusableElements, addStyle, relativePosition, getOuterWidth, absolutePosition, isTouchDevice, findSingle } from '@primeuix/utils/dom';
-import { isEmpty } from '@primeuix/utils/object';
+import { isNotEmpty, isEmpty } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
 import { UniqueComponentId, ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
@@ -8,15 +8,15 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import Tree from 'primevue/tree';
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseInput from '@primevue/core/baseinput';
 import TreeSelectStyle from 'primevue/treeselect/style';
+import TimesIcon from '@primevue/icons/times';
 import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, renderSlot, Fragment, createTextVNode, toDisplayString, renderList, createVNode, normalizeClass, createCommentVNode, createBlock, resolveDynamicComponent, withCtx, Transition, createSlots } from 'vue';
 
 var script$1 = {
   name: 'BaseTreeSelect',
-  "extends": BaseComponent,
+  "extends": BaseInput,
   props: {
-    modelValue: null,
     options: Array,
     scrollHeight: {
       type: String,
@@ -26,18 +26,6 @@ var script$1 = {
       type: String,
       "default": null
     },
-    invalid: {
-      type: Boolean,
-      "default": false
-    },
-    variant: {
-      type: String,
-      "default": null
-    },
-    disabled: {
-      type: Boolean,
-      "default": false
-    },
     tabindex: {
       type: Number,
       "default": null
@@ -46,6 +34,14 @@ var script$1 = {
       type: String,
       "default": 'single'
     },
+    selectedItemsLabel: {
+      type: String,
+      "default": null
+    },
+    maxSelectedLabels: {
+      type: Number,
+      "default": null
+    },
     appendTo: {
       type: [String, Object],
       "default": 'body'
@@ -62,10 +58,6 @@ var script$1 = {
       type: Boolean,
       "default": false
     },
-    fluid: {
-      type: Boolean,
-      "default": null
-    },
     loading: {
       type: Boolean,
       "default": false
@@ -78,6 +70,14 @@ var script$1 = {
       type: String,
       "default": 'mask'
     },
+    showClear: {
+      type: Boolean,
+      "default": false
+    },
+    clearIcon: {
+      type: String,
+      "default": undefined
+    },
     filter: {
       type: Boolean,
       "default": false
@@ -161,7 +161,7 @@ var script = {
   name: 'TreeSelect',
   "extends": script$1,
   inheritAttrs: false,
-  emits: ['update:modelValue', 'before-show', 'before-hide', 'change', 'show', 'hide', 'node-select', 'node-unselect', 'node-expand', 'node-collapse', 'focus', 'blur', 'update:expandedKeys'],
+  emits: ['before-show', 'before-hide', 'change', 'show', 'hide', 'node-select', 'node-unselect', 'node-expand', 'node-collapse', 'focus', 'blur', 'update:expandedKeys'],
   inject: {
     $pcFluid: {
       "default": null
@@ -232,21 +232,28 @@ var script = {
       this.$emit('focus', event);
     },
     onBlur: function onBlur(event) {
+      var _this$formField$onBlu, _this$formField;
       this.focused = false;
       this.$emit('blur', event);
+      (_this$formField$onBlu = (_this$formField = this.formField).onBlur) === null || _this$formField$onBlu === void 0 || _this$formField$onBlu.call(_this$formField);
     },
     onClick: function onClick(event) {
       if (this.disabled) {
         return;
       }
-      if (!this.disabled && (!this.overlay || !this.overlay.contains(event.target))) {
+      if (event.target.tagName === 'INPUT' || event.target.getAttribute('data-pc-section') === 'clearicon' || event.target.closest('[data-pc-section="clearicon"]')) {
+        return;
+      } else if (!this.disabled && (!this.overlay || !this.overlay.contains(event.target))) {
         if (this.overlayVisible) this.hide();else this.show();
         focus(this.$refs.focusInput);
       }
     },
+    onClearClick: function onClearClick(event) {
+      this.onSelectionChange(null);
+    },
     onSelectionChange: function onSelectionChange(keys) {
       this.selfChange = true;
-      this.$emit('update:modelValue', keys);
+      this.writeValue(keys);
       this.$emit('change', keys);
     },
     onNodeSelect: function onNodeSelect(node) {
@@ -262,6 +269,14 @@ var script = {
       this.d_expandedKeys = keys;
       this.$emit('update:expandedKeys', this.d_expandedKeys);
     },
+    getSelectedItemsLabel: function getSelectedItemsLabel() {
+      var pattern = /{(.*?)}/;
+      var selectedItemsLabel = this.selectedItemsLabel || this.$primevue.config.locale.selectionMessage;
+      if (pattern.test(selectedItemsLabel)) {
+        return selectedItemsLabel.replace(selectedItemsLabel.match(pattern)[0], Object.keys(this.d_value).length + '');
+      }
+      return selectedItemsLabel;
+    },
     onFirstHiddenFocus: function onFirstHiddenFocus(event) {
       var focusableEl = event.relatedTarget === this.$refs.focusInput ? getFirstFocusableElement(this.overlay, ':not([data-p-hidden-focusable="true"])') : this.$refs.focusInput;
       focus(focusableEl);
@@ -474,7 +489,7 @@ var script = {
       return this.selectionMode === 'checkbox' ? keys[node.key] && keys[node.key].checked : keys[node.key];
     },
     updateTreeState: function updateTreeState() {
-      var keys = _objectSpread$1({}, this.modelValue);
+      var keys = _objectSpread$1({}, this.d_value);
       if (keys && this.options) {
         this.updateTreeBranchState(null, null, keys);
       }
@@ -548,23 +563,36 @@ var script = {
   computed: {
     selectedNodes: function selectedNodes() {
       var selectedNodes = [];
-      if (this.modelValue && this.options) {
-        var keys = _objectSpread$1({}, this.modelValue);
+      if (this.d_value && this.options) {
+        var keys = _objectSpread$1({}, this.d_value);
         this.findSelectedNodes(null, keys, selectedNodes);
       }
       return selectedNodes;
     },
     label: function label() {
       var value = this.selectedNodes;
-      return value.length ? value.map(function (node) {
-        return node.label;
-      }).join(', ') : this.placeholder;
+      var label;
+      if (value.length) {
+        if (isNotEmpty(this.maxSelectedLabels) && value.length > this.maxSelectedLabels) {
+          label = this.getSelectedItemsLabel();
+        } else {
+          label = value.map(function (node) {
+            return node.label;
+          }).join(', ');
+        }
+      } else {
+        label = this.placeholder;
+      }
+      return label;
+    },
+    chipSelectedItems: function chipSelectedItems() {
+      return isNotEmpty(this.maxSelectedLabels) && this.d_value && Object.keys(this.d_value).length > this.maxSelectedLabels;
     },
     emptyMessageText: function emptyMessageText() {
       return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
     },
     emptyValue: function emptyValue() {
-      return !this.modelValue || Object.keys(this.modelValue).length === 0;
+      return !this.$filled;
     },
     emptyOptions: function emptyOptions() {
       return !this.options || this.options.length === 0;
@@ -574,13 +602,17 @@ var script = {
     },
     hasFluid: function hasFluid() {
       return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
+    },
+    isClearIconVisible: function isClearIconVisible() {
+      return this.showClear && this.d_value != null && isNotEmpty(this.options);
     }
   },
   components: {
     TSTree: Tree,
     Chip: Chip,
     Portal: Portal,
-    ChevronDownIcon: ChevronDownIcon
+    ChevronDownIcon: ChevronDownIcon,
+    TimesIcon: TimesIcon
   },
   directives: {
     ripple: Ripple
@@ -594,7 +626,10 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 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 || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var _hoisted_1 = ["id", "disabled", "tabindex", "aria-labelledby", "aria-label", "aria-expanded", "aria-controls"];
-var _hoisted_2 = ["aria-expanded"];
+var _hoisted_2 = {
+  key: 0
+};
+var _hoisted_3 = ["aria-expanded"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_Chip = resolveComponent("Chip");
   var _component_TSTree = resolveComponent("TSTree");
@@ -646,6 +681,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       key: 0
     }, [createTextVNode(toDisplayString($options.label || 'empty'), 1)], 64)) : _ctx.display === 'chip' ? (openBlock(), createElementBlock(Fragment, {
       key: 1
+    }, [$options.chipSelectedItems ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString($options.label), 1)) : (openBlock(), createElementBlock(Fragment, {
+      key: 1
     }, [(openBlock(true), createElementBlock(Fragment, null, renderList($options.selectedNodes, function (node) {
       return openBlock(), createElementBlock("div", mergeProps({
         key: node.key,
@@ -659,8 +696,20 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["class", "label", "unstyled", "pt"])], 16);
     }), 128)), $options.emptyValue ? (openBlock(), createElementBlock(Fragment, {
       key: 0
-    }, [createTextVNode(toDisplayString(_ctx.placeholder || 'empty'), 1)], 64)) : createCommentVNode("", true)], 64)) : createCommentVNode("", true)];
-  })], 16)], 16), createElementVNode("div", mergeProps({
+    }, [createTextVNode(toDisplayString(_ctx.placeholder || 'empty'), 1)], 64)) : createCommentVNode("", true)], 64))], 64)) : createCommentVNode("", true)];
+  })], 16)], 16), $options.isClearIconVisible ? renderSlot(_ctx.$slots, "clearicon", {
+    key: 0,
+    "class": normalizeClass(_ctx.cx('clearIcon')),
+    clearCallback: $options.onClearClick
+  }, function () {
+    return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon ? 'i' : 'TimesIcon'), mergeProps({
+      ref: "clearIcon",
+      "class": [_ctx.cx('clearIcon'), _ctx.clearIcon],
+      onClick: $options.onClearClick
+    }, _ctx.ptm('clearIcon'), {
+      "data-pc-section": "clearicon"
+    }), null, 16, ["class", "onClick"]))];
+  }) : createCommentVNode("", true), createElementVNode("div", mergeProps({
     "class": _ctx.cx('dropdown'),
     role: "button",
     "aria-haspopup": "tree",
@@ -671,7 +720,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     return [(openBlock(), createBlock(resolveDynamicComponent('ChevronDownIcon'), mergeProps({
       "class": _ctx.cx('dropdownIcon')
     }, _ctx.ptm('dropdownIcon')), null, 16, ["class"]))];
-  })], 16, _hoisted_2), createVNode(_component_Portal, {
+  })], 16, _hoisted_3), createVNode(_component_Portal, {
     appendTo: _ctx.appendTo
   }, {
     "default": withCtx(function () {
@@ -705,7 +754,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             "data-p-hidden-accessible": true,
             "data-p-hidden-focusable": true
           }), null, 16), renderSlot(_ctx.$slots, "header", {
-            value: _ctx.modelValue,
+            value: _ctx.d_value,
             options: _ctx.options
           }), createElementVNode("div", mergeProps({
             "class": _ctx.cx('treeContainer'),
@@ -726,7 +775,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             filterPlaceholder: _ctx.filterPlaceholder,
             filterLocale: _ctx.filterLocale,
             "onUpdate:selectionKeys": $options.onSelectionChange,
-            selectionKeys: _ctx.modelValue,
+            selectionKeys: _ctx.d_value,
             expandedKeys: $data.d_expandedKeys,
             "onUpdate:expandedKeys": $options.onNodeToggle,
             metaKeySelection: _ctx.metaKeySelection,
@@ -789,7 +838,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, _ctx.ptm('emptyMessage')), [renderSlot(_ctx.$slots, "empty", {}, function () {
             return [createTextVNode(toDisplayString($options.emptyMessageText), 1)];
           })], 16)) : createCommentVNode("", true)], 16), renderSlot(_ctx.$slots, "footer", {
-            value: _ctx.modelValue,
+            value: _ctx.d_value,
             options: _ctx.options
           }), createElementVNode("span", mergeProps({
             ref: "lastHiddenFocusableElementOnOverlay",