@progress/kendo-vue-treeview 5.3.0-dev.202409130647 → 5.3.0-develop.1

package/TreeViewItem.mjs

@@ -0,0 +1,271 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as f, h as I, createVNode as s, isVNode as b } from "vue";
+import { guid as g, getRef as l, getTemplate as k, classNames as d, Draggable as x, Icon as v, setRef as $, kendoThemeMaps as S } from "@progress/kendo-vue-common";
+import { createId as C } from "./utils/itemIdUtils.mjs";
+import { hasChildren as a, isItemExpandedAndWithChildren as E } from "./utils/itemUtils.mjs";
+import { Reveal as D } from "@progress/kendo-vue-animation";
+import { DOM_KENDO_ITEM_ID_FIELD as o, DOM_KENDO_TREEVIEW_GUID_FIELD as F } from "./utils/consts.mjs";
+import { caretAltDownIcon as R, caretAltLeftIcon as M, caretAltRightIcon as _ } from "@progress/kendo-svg-icons";
+function c(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !b(e);
+}
+const {
+  sizeMap: N
+} = S, w = /* @__PURE__ */ f({
+  name: "KendoTreeViewItem",
+  props: {
+    item: Object,
+    itemId: String,
+    treeGuid: String,
+    animate: Boolean,
+    focusedItemId: String,
+    tabbableItemId: String,
+    fieldsService: Object,
+    itemUI: Object,
+    ariaMultiSelectable: Boolean,
+    expandIcons: Boolean,
+    checkboxes: Boolean,
+    onFocusDomElNeeded: Object,
+    draggable: Boolean,
+    isRtl: Boolean,
+    size: {
+      type: String,
+      default: "medium",
+      validator: function(e) {
+        return [null, "small", "medium", "large"].includes(e);
+      }
+    },
+    disabled: Boolean,
+    ariaLevel: Number,
+    onItemClick: Function,
+    onExpandChange: Function,
+    onCheckChange: Function,
+    onPress: Function,
+    onDrag: Function,
+    onRelease: Function,
+    onFocusdomelneeded: Function
+  },
+  computed: {
+    fieldsSvc() {
+      return this.$props.fieldsService;
+    },
+    currentTabIndex() {
+      return (this.$props.focusedItemId || this.$props.tabbableItemId) === this.itemId ? 0 : -1;
+    },
+    ariaExpanded() {
+      return this.fieldsSvc.hasChildren(this.item) || a(this.item, this.fieldsSvc.getChildrenField()) ? !!this.fieldsSvc.expanded(this.item) : void 0;
+    },
+    ariaChecked() {
+      if (this.$props.checkboxes)
+        return this.fieldsSvc.checked(this.item) ? "true" : this.fieldsSvc.checkIndeterminate(this.item) ? "mixed" : "false";
+    },
+    ariaSelected() {
+      return this.fieldsSvc.selected(this.item) ? !0 : this.$props.ariaMultiSelectable ? this.computedDisabled ? void 0 : !1 : void 0;
+    },
+    computedDisabled() {
+      const e = this.fieldsSvc.disabled(this.item);
+      return e !== void 0 ? e : this.disabled;
+    }
+  },
+  created() {
+    this.itemGuid = g(), this.prevFocusedItemId = this.focusedItemId, this.prevFieldsService = this.fieldsService, this.prevItem = this.item;
+  },
+  data() {
+    return {
+      isMounted: !1
+    };
+  },
+  watch: {
+    focusedItemId: function(e, t) {
+      this.prevFocusedItemId = t;
+    },
+    fieldsService: function(e, t) {
+      this.prevFieldsService = t;
+    },
+    item: function(e, t) {
+      this.prevItem = t;
+    }
+  },
+  mounted() {
+    const e = this.$props.focusedItemId, t = this.itemId;
+    e && e === t && this.$emit("focusDomElNeeded", this.$el), this.checkboxElement = l(this, "checkboxElement"), this.checkboxElement && (this.checkboxElement.indeterminate = this.fieldsSvc.checkIndeterminate(this.item)), this.assignDraggableMeta(this.$refs.treemid), this.isMounted = !0;
+  },
+  updated() {
+    const e = this.$props.focusedItemId;
+    if (e && e !== this.prevFocusedItemId && e === this.itemId && this.$emit("focusdomelneeded", this.$el), this.checkboxElement = l(this, "checkboxElement"), this.checkboxElement) {
+      const t = this.fieldsSvc.checkIndeterminate(this.item);
+      t !== this.prevFieldsService.checkIndeterminate(this.prevItem) && (this.checkboxElement.indeterminate = t);
+    }
+    this.assignDraggableMeta(this.$refs.treemid);
+  },
+  render() {
+    let e, t;
+    const i = function() {
+      return E(this.item, this.fieldsSvc) ? s("ul", {
+        class: "k-treeview-group",
+        role: "group"
+      }, [this.fieldsSvc.children(this.item).map(function(n, r) {
+        return s(w, {
+          item: n,
+          itemId: C(r, this.itemId),
+          treeGuid: this.$props.treeGuid,
+          animate: this.$props.animate,
+          focusedItemId: this.$props.focusedItemId,
+          tabbableItemId: this.$props.tabbableItemId,
+          fieldsService: this.$props.fieldsService,
+          itemUI: this.$props.itemUI,
+          checkboxes: this.$props.checkboxes,
+          ariaMultiSelectable: this.$props.ariaMultiSelectable,
+          ariaLevel: this.$props.ariaLevel + 1,
+          onItemClick: this.handleItemClick,
+          onFocusdomelneeded: this.handleFocusDomElNeeded,
+          draggable: this.$props.draggable,
+          onPress: this.handlePress,
+          onDrag: this.handleDrag,
+          onRelease: this.handleRelease,
+          expandIcons: this.$props.expandIcons,
+          onExpandChange: this.handleExpandChange,
+          onCheckChange: this.handleCheckChange,
+          key: r,
+          size: this.$props.size,
+          disabled: this.computedDisabled,
+          isRtl: this.$props.isRtl
+        }, null);
+      }, this)]) : void 0;
+    }, m = function() {
+      return this.$props.expandIcons && // If it is explicitly said that the item has children (even not loaded yet)
+      // or if the item actually has children, then render the icon.
+      (this.fieldsSvc.hasChildren(this.item) || a(this.item, this.fieldsSvc.getChildrenField())) && s("span", {
+        class: d("k-treeview-toggle", {
+          "k-disabled": this.computedDisabled
+        })
+      }, [s(v, {
+        name: this.getIconClassName(),
+        icon: this.getIconSVG(),
+        onClick: this.handleExpandChange
+      }, null)]);
+    }, p = function() {
+      if (this.$props.checkboxes) {
+        const n = this.$props.size;
+        return s("div", {
+          class: "k-checkbox-wrap",
+          role: "presentation"
+        }, [s("input", {
+          type: "checkbox",
+          class: d("k-checkbox k-rounded-md", {
+            [`k-checkbox-${N[n] || n}`]: n,
+            "k-disabled": this.computedDisabled
+          }),
+          "aria-label": this.item.text,
+          checked: !!this.fieldsSvc.checked(this.item),
+          id: this.itemGuid,
+          tabindex: -1,
+          onChange: this.handleCheckChange,
+          ref: $(this, "checkboxElement")
+        }, null), s("label", {
+          class: "k-checkbox-label",
+          for: this.itemGuid
+        }, null)]);
+      } else
+        return;
+    }, u = k.call(this, {
+      h: I,
+      template: this.$props.itemUI,
+      defaultRendering: this.fieldsSvc.text(this.item),
+      additionalProps: {
+        item: this.item,
+        itemHierarchicalIndex: this.itemId
+      }
+    }), h = function() {
+      return s("span", {
+        class: this.getContentClassName(),
+        style: {
+          touchAction: "none"
+        },
+        onClick: this.handleItemClick
+      }, [s("span", {
+        class: "k-treeview-leaf-text"
+      }, [u])]);
+    };
+    return s("li", {
+      class: d("k-treeview-item"),
+      tabindex: this.currentTabIndex,
+      role: "treeitem",
+      "aria-level": this.$props.ariaLevel,
+      "aria-expanded": this.ariaExpanded,
+      "aria-selected": this.ariaSelected,
+      "aria-checked": this.ariaChecked,
+      "aria-disabled": this.computedDisabled ? !0 : void 0
+    }, [s("div", {
+      class: "k-treeview-mid",
+      ref: "treemid"
+    }, [m.call(this), p.call(this), this.$props.draggable ? s(x, {
+      onPress: (n) => this.handlePress(n),
+      onDrag: (n) => this.handleDrag(n),
+      onRelease: (n) => this.handleRelease(n)
+    }, c(e = h.call(this)) ? e : {
+      default: () => [e]
+    }) : h.call(this)]), this.$props.animate && this.isMounted ? s(D, {
+      appear: this.ariaExpanded,
+      transitionEnterDuration: 200,
+      transitionExitDuration: 200,
+      key: this.itemGuid + "_animation",
+      style: {
+        display: "block"
+      }
+    }, c(t = i.call(this)) ? t : {
+      default: () => [t]
+    }) : i.call(this)]);
+  },
+  methods: {
+    handleCheckChange(e, t, i) {
+      this.$emit("checkChange", e, t || this.item, i || this.itemId);
+    },
+    handleExpandChange(e, t, i) {
+      this.$emit("expandChange", e, t || this.item, i || this.itemId);
+    },
+    handleItemClick(e, t, i) {
+      this.$emit("itemClick", e, t || this.item, i || this.itemId);
+    },
+    handlePress(e, t, i) {
+      this.$emit("press", e, t || {
+        ...this.item
+      }, i || this.itemId);
+    },
+    handleDrag(e, t, i) {
+      this.$emit("drag", e, t || this.item, i || this.itemId);
+    },
+    handleRelease(e, t, i) {
+      this.$emit("release", e, t || this.item, i || this.itemId);
+    },
+    handleFocusDomElNeeded(e) {
+      this.$emit("focusdomelneeded", e);
+    },
+    getIconClassName() {
+      const e = this.fieldsSvc.expanded(this.item);
+      return e && !a(this.item, this.fieldsSvc.getChildrenField()) ? "loading" : e ? "caret-alt-down" : this.$props.isRtl ? "caret-alt-left" : "caret-alt-right";
+    },
+    getIconSVG() {
+      return this.fieldsSvc.expanded(this.item) ? R : this.$props.isRtl ? M : _;
+    },
+    getContentClassName() {
+      return d("k-treeview-leaf", {
+        "k-focus": this.$props.focusedItemId === this.itemId,
+        "k-selected": this.fieldsSvc.selected(this.item),
+        "k-disabled": this.computedDisabled
+      });
+    },
+    assignDraggableMeta(e) {
+      e && !e[o] && (e[o] = this.$props.itemId, e[F] = this.$props.treeGuid);
+    }
+  }
+});
+export {
+  w as TreeViewItem
+};