@progress/kendo-vue-dropdowns 5.3.0-dev.202410141143 → 5.3.0-develop.1

package/DropDownTree/DropDownTree.mjs

@@ -0,0 +1,709 @@
+/**
+ * @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 he, h as u, createVNode as i, isVNode as fe } from "vue";
+import { validatePackage as me, guid as B, canUseDOM as ge, getRef as c, getTabIndex as ve, templateRendering as h, getListeners as f, getTemplate as w, Keys as a, noop as P, kendoThemeMaps as be, setRef as m, Icon as W, classNames as A } from "@progress/kendo-vue-common";
+import { Popup as ye } from "@progress/kendo-vue-popup";
+import { provideLocalizationService as we } from "@progress/kendo-vue-intl";
+import { TreeView as K } from "@progress/kendo-vue-treeview";
+import { packageMetadata as ke } from "../package-metadata.mjs";
+import { isPresent as Se, getItemValue as $e, areSame as Fe } from "../common/utils.mjs";
+import { ListNoData as Ve } from "./ListNoData.mjs";
+import { nodata as L, messages as N, clear as z } from "../messages/main.mjs";
+import { FloatingLabel as xe } from "@progress/kendo-vue-labels";
+import { ListFilter as j } from "../common/ListFilter.mjs";
+import { Button as q } from "@progress/kendo-vue-buttons";
+import { xIcon as _, caretAltDownIcon as Re } from "@progress/kendo-svg-icons";
+import { MOBILE_SMALL_DEVICE as G, MOBILE_MEDIUM_DEVICE as Ie } from "../common/constants.mjs";
+import { ActionSheet as De } from "@progress/kendo-vue-layout";
+import Ce from "../common/DropDownBase.mjs";
+function H(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !fe(e);
+}
+const {
+  sizeMap: Oe,
+  roundedMap: Me
+} = be, Ee = "Please select a value from the list!", U = (e) => e.split("_").map((t) => parseInt(t, 10)), V = (e, t) => {
+  const {
+    validationMessage: s,
+    valid: n,
+    required: o
+  } = e;
+  return {
+    customError: s !== void 0,
+    valid: !!(n !== void 0 ? n : !o || t),
+    valueMissing: !t
+  };
+}, Xe = /* @__PURE__ */ he({
+  name: "KendoDropDownTree",
+  model: {
+    event: "changemodel"
+  },
+  emits: {
+    open: null,
+    close: null,
+    focus: null,
+    blur: null,
+    change: null,
+    filterchange: null,
+    expandchange: null,
+    changemodel: null,
+    "update:modelValue": null
+  },
+  props: {
+    opened: {
+      type: Boolean,
+      default: void 0
+    },
+    disabled: Boolean,
+    dir: String,
+    tabIndex: Number,
+    accessKey: String,
+    dataItems: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    },
+    value: {
+      type: [Object, String, Number, Boolean],
+      default: function() {
+      }
+    },
+    modelValue: {
+      type: [Object, String, Number, Boolean],
+      default: function() {
+      }
+    },
+    valueMap: Function,
+    placeholder: String,
+    dataItemKey: {
+      type: String,
+      required: !0
+    },
+    textField: {
+      type: String,
+      required: !0
+    },
+    selectField: {
+      type: String,
+      default: "selected"
+    },
+    expandField: String,
+    subItemsField: {
+      type: String,
+      default: "items"
+    },
+    className: String,
+    label: String,
+    validationMessage: String,
+    validityStyles: {
+      type: Boolean,
+      default: !0
+    },
+    valid: {
+      type: Boolean,
+      default: void 0
+    },
+    required: Boolean,
+    name: String,
+    id: String,
+    ariaLabel: {
+      type: String,
+      default: void 0
+    },
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    filterable: Boolean,
+    filter: String,
+    loading: Boolean,
+    popupSettings: {
+      type: Object,
+      default: function() {
+        return {
+          animate: !0,
+          height: "200px",
+          anchor: ""
+        };
+      }
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: function(e) {
+        return [null, "small", "medium", "large"].includes(e);
+      }
+    },
+    rounded: {
+      type: String,
+      default: "medium",
+      validator: function(e) {
+        return [null, "small", "medium", "large", "full"].includes(e);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: "solid",
+      validator: function(e) {
+        return [null, "flat", "outline", "solid"].includes(e);
+      }
+    },
+    item: [String, Function, Object],
+    header: [String, Function, Object],
+    footer: [String, Function, Object],
+    valueRender: [String, Function, Object],
+    listNoData: [String, Function, Object],
+    adaptive: {
+      type: Boolean,
+      default: void 0
+    },
+    adaptiveTitle: {
+      type: String,
+      default: void 0
+    }
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  created() {
+    this.observer = null, me(ke), this.base = new Ce(this), this.componentGuid = B(), this.anchor = B();
+  },
+  data() {
+    return {
+      currentOpened: !1,
+      focused: !1,
+      filterState: "",
+      currentValue: void 0,
+      popupWidth: "200px",
+      windowWidth: 0,
+      initialAdaptiveRenderingValues: void 0
+    };
+  },
+  computed: {
+    wrapperClass() {
+      const {
+        validationMessage: e,
+        valid: t,
+        required: s,
+        validityStyles: n
+      } = this.$props, o = V({
+        validationMessage: e,
+        valid: t,
+        required: s
+      }, this.hasValue), d = !n || o.valid, {
+        size: r,
+        rounded: l,
+        fillMode: p
+      } = this.$props;
+      return {
+        "k-dropdowntree": !0,
+        "k-picker": !0,
+        [this.$props.className]: this.$props.className,
+        [`k-picker-${Oe[r] || r}`]: r,
+        [`k-rounded-${Me[l] || l}`]: l,
+        [`k-picker-${p}`]: p,
+        "k-focus": this.focused,
+        "k-invalid": !d,
+        "k-loading": this.$props.loading,
+        "k-required": s,
+        "k-disabled": this.$props.disabled
+      };
+    },
+    animationStyles() {
+      return this.windowWidth <= G ? {
+        top: 0,
+        width: "100%",
+        height: "100%"
+      } : void 0;
+    },
+    classNameAdaptive() {
+      return this.windowWidth <= G ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom";
+    },
+    adaptiveState() {
+      return this.windowWidth <= Ie && this.$props.adaptive;
+    },
+    isOpen() {
+      return this.opened !== void 0 ? this.opened : this.currentOpened;
+    },
+    computedValue() {
+      return this.value !== void 0 ? this.value : this.$props.modelValue !== void 0 ? this.$props.modelValue : this.currentValue;
+    },
+    hasValue() {
+      return Se(this.computedValue);
+    },
+    currentValueText() {
+      return this.hasValue ? $e(this.computedValue, this.$props.textField) : "";
+    }
+  },
+  watch: {
+    // This watch gets the state of the data when the adaptive mode is activated
+    isOpen: function(e) {
+      e && this.value ? this.initialAdaptiveRenderingValues = [...this.value] : this.initialAdaptiveRenderingValues = void 0;
+    }
+  },
+  mounted() {
+    this.observer = ge && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.elementRef = c(this, "kendoAnchor"), this.inputRef = c(this, "input"), this.selectRef = c(this, "select"), this.treeViewRef = c(this, "treeView"), this.skipFocusRef = !1, this.popupRef = c(this, "popup"), this.calculatePopupWidth();
+  },
+  updated() {
+    this.inputRef = c(this, "input"), this.treeViewRef = c(this, "treeView"), this.popupRef && this.isOpen && this.hasValue && this.popupRef.reposition(), this.setValidity(), this.calculatePopupWidth();
+  },
+  render() {
+    let e;
+    const t = this.$props.id || this.componentGuid, {
+      dataItems: s,
+      dataItemKey: n,
+      popupSettings: o,
+      disabled: d,
+      placeholder: r,
+      label: l,
+      name: p,
+      selectField: x,
+      subItemsField: R,
+      validationMessage: J,
+      valid: Q,
+      required: I,
+      validityStyles: X,
+      adaptiveTitle: Y
+    } = this.$props, k = ve(this.$props.tabIndex, d), D = we(this), Z = V({
+      validationMessage: J,
+      valid: Q,
+      required: I
+    }, this.hasValue), C = this.adaptiveState, g = this.$props.dir, O = h.call(this, this.item, f.call(this)), ee = h.call(this, this.valueRender, f.call(this)), te = h.call(this, this.$props.header, f.call(this)), ie = h.call(this, this.$props.footer, f.call(this)), S = w.call(this, {
+      h: u,
+      template: te
+    }), $ = w.call(this, {
+      h: u,
+      template: ie
+    }), se = h.call(this, this.$props.listNoData, f.call(this)), ne = i(Ve, null, H(e = D.toLanguageString(L, N[L])) ? e : {
+      default: () => [e]
+    }), M = w.call(this, {
+      h: u,
+      defaultRendering: ne,
+      template: se
+    }), oe = i("span", {
+      class: "k-input-value-text"
+    }, [this.currentValueText || r]), ae = w.call(this, {
+      h: u,
+      defaultRendering: oe,
+      template: ee,
+      additionalProps: {
+        value: this.computedValue
+      }
+    }), le = () => [i("div", {
+      class: "k-actionsheet-titlebar-group k-hbox"
+    }, [i("div", {
+      class: "k-actionsheet-title"
+    }, [i("div", {
+      class: "k-text-center"
+    }, [Y]), i("div", {
+      class: "k-actionsheet-subtitle k-text-center"
+    }, [r])]), i("div", {
+      class: "k-actionsheet-actions"
+    }, [i(q, {
+      tabIndex: 1,
+      "aria-label": "Cancel",
+      "aria-disabled": "false",
+      type: "button",
+      fillMode: "flat",
+      onClick: this.onWrapperClick,
+      icon: "x",
+      svgIcon: _
+    }, null)])]), i("div", {
+      class: "k-actionsheet-titlebar-group k-actionsheet-filter"
+    }, [this.$props.filterable && i(j, {
+      tabIndex: 0,
+      value: this.$props.filter === void 0 ? this.filterState : this.$props.filter,
+      ref: m(this, "input"),
+      onChange: this.onFilterChange,
+      onKeydown: this.onInputKeyDown,
+      size: v,
+      rounded: E,
+      fillMode: F,
+      onFocus: this.onFocus,
+      onBlur: this.onBlur
+    }, null)])], re = h.call(this, le, f.call(this)), de = () => {
+      const y = this.base.getTemplateDef.call(this, S, u), T = this.base.getTemplateDef.call(this, $, u);
+      return [y && i("div", {
+        class: "k-list-header"
+      }, [y]), s.length > 0 ? i(K, {
+        ref: m(this, "treeView"),
+        tabIndex: k,
+        dataItems: s,
+        focusIdField: n,
+        textField: this.$props.textField,
+        selectField: x,
+        expandField: this.$props.expandField,
+        childrenField: R,
+        expandIcons: !0,
+        onItemclick: this.onChange,
+        onExpandchange: this.onExpand,
+        onFocus: this.onFocus,
+        onBlur: this.onBlur,
+        onKeydown: this.onWrapperKeyDown,
+        size: "large",
+        item: O
+      }, null) : M, T && i("div", {
+        class: "k-list-footer"
+      }, [T])];
+    }, pe = h.call(this, de, f.call(this)), ue = function() {
+      return i(De, {
+        expand: this.isOpen,
+        animation: !0,
+        animationStyles: this.animationStyles,
+        className: this.classNameAdaptive,
+        header: re,
+        content: pe,
+        contentClassName: "!k-overflow-hidden",
+        onClose: this.onWrapperClick,
+        navigatableElements: ["input.k-input-inner", ".k-actionsheet-actions > button"]
+      }, null);
+    }, ce = !X || Z.valid, {
+      size: v,
+      rounded: E,
+      fillMode: F
+    } = this.$props, b = [u(function() {
+      return i("span", {
+        class: this.wrapperClass,
+        tabindex: k,
+        accesskey: this.$props.accessKey,
+        id: t,
+        dir: g,
+        ref: m(this, "kendoAnchor"),
+        onKeydown: this.onWrapperKeyDown,
+        onClick: this.onWrapperClick,
+        onMousedown: this.onWrapperMouseDown,
+        onFocusin: this.onFocus,
+        onFocusout: this.onBlur,
+        role: "combobox",
+        "aria-haspopup": "tree",
+        "aria-expanded": this.isOpen,
+        "aria-disabled": d,
+        "aria-label": l || this.$props.ariaLabel,
+        "aria-labelledby": this.$props.ariaLabelledBy,
+        "aria-describedby": this.$props.ariaDescribedBy,
+        "aria-required": I
+      }, [
+        i("span", {
+          class: "k-input-inner"
+        }, [ae]),
+        this.$props.loading && i(W, {
+          class: "k-input-loading-icon",
+          name: "loading"
+        }, null),
+        this.hasValue && !d && i("span", {
+          onClick: this.onClear,
+          class: "k-clear-value",
+          title: D.toLanguageString(z, N[z]),
+          role: "button",
+          tabindex: -1,
+          onMousedown: (y) => y.preventDefault()
+        }, [i(W, {
+          name: "x",
+          icon: _
+        }, null)]),
+        i(q, {
+          tabIndex: -1,
+          type: "button",
+          "aria-label": "select",
+          class: "k-input-button",
+          size: v,
+          fillMode: F,
+          themeColor: "base",
+          rounded: null,
+          icon: "caret-alt-down",
+          svgIcon: Re
+        }, null),
+        /* Dummy component to support forms */
+        i("select", {
+          name: p,
+          ref: m(this, "select"),
+          tabindex: -1,
+          "aria-hidden": !0,
+          title: l,
+          style: {
+            opacity: 0,
+            width: 1,
+            border: 0,
+            zIndex: -1,
+            position: "absolute",
+            left: "50%"
+          }
+        }, [i("option", {
+          value: this.$props.valueMap ? this.$props.valueMap.call(void 0, this.computedValue) : this.computedValue
+        }, null)]),
+        !C && i(ye, {
+          style: {
+            width: this.popupWidth,
+            direction: g
+          },
+          ref: m(this, "popup"),
+          class: A(o.className, {
+            "k-rtl": g === "rtl"
+          }),
+          popupClass: A(o.popupClass, "k-dropdowntree-popup", "popup-" + this.componentGuid),
+          animate: o.animate,
+          anchor: this.anchor,
+          show: this.isOpen,
+          onOpen: this.onPopupOpened,
+          onClose: this.onPopupClosed,
+          appendTo: o.appendTo
+        }, {
+          default: () => [this.$props.filterable && i(j, {
+            value: this.$props.filter === void 0 ? this.filterState : this.$props.filter,
+            ref: m(this, "input"),
+            onChange: this.onFilterChange,
+            onKeydown: this.onInputKeyDown,
+            onBlur: this.onBlur,
+            size: v,
+            rounded: E,
+            fillMode: F
+          }, null), S && i("div", {
+            class: "k-list-header"
+          }, [S]), s.length > 0 ? i(K, {
+            ref: m(this, "treeView"),
+            tabIndex: k,
+            dataItems: s,
+            focusIdField: n,
+            textField: this.$props.textField,
+            selectField: x,
+            expandField: this.$props.expandField,
+            childrenField: R,
+            expandIcons: !0,
+            onItemclick: this.onChange,
+            onExpandchange: this.onExpand,
+            onFocus: this.onFocus,
+            onBlur: this.onBlur,
+            onKeydown: this.onWrapperKeyDown,
+            size: v,
+            item: O
+          }, null) : M, $ && i("div", {
+            class: "k-list-footer"
+          }, [$])]
+        })
+      ]);
+    }.call(this), {
+      ...this.$attrs
+    }), C && ue.call(this)];
+    return l ? i(xe, {
+      label: l,
+      editorValue: this.currentValueText,
+      editorPlaceholder: r,
+      editorValid: ce,
+      editorDisabled: d,
+      editorId: t,
+      focused: this.focused,
+      dir: g
+    }, H(b) ? b : {
+      default: () => [b]
+    }) : b;
+  },
+  methods: {
+    calculateMedia(e) {
+      for (let t of e)
+        this.windowWidth = t.target.clientWidth;
+    },
+    calculatePopupWidth() {
+      this.elementRef && (this.popupWidth = this.popupSettings.width !== void 0 ? this.popupSettings.width : this.elementRef.offsetWidth + "px");
+    },
+    focus() {
+      this.$el && this.$el.focus();
+    },
+    setValidity() {
+      if (this.selectRef && this.selectRef.setCustomValidity) {
+        const {
+          validationMessage: e,
+          valid: t,
+          required: s
+        } = this.$props, n = V({
+          validationMessage: e,
+          valid: t,
+          required: s
+        }, this.hasValue);
+        this.selectRef.setCustomValidity(n.valid ? "" : this.validationMessage === void 0 ? Ee : this.validationMessage);
+      }
+    },
+    openPopup(e) {
+      if (!this.isOpen) {
+        const t = {
+          ...e
+        };
+        this.$emit("open", t), this.currentOpened = !0;
+      }
+    },
+    closePopup(e) {
+      if (this.isOpen) {
+        const t = {
+          ...e
+        };
+        this.$emit("close", t), this.currentOpened = !1;
+      }
+    },
+    onWrapperClick(e) {
+      if (this.onFilterChange({
+        ...e,
+        target: {
+          value: ""
+        }
+      }), !e.defaultPrevented && this.$el) {
+        this.focused = !0;
+        const t = {
+          event: e,
+          target: this
+        };
+        (this.isOpen ? this.closePopup : this.openPopup)(t);
+      }
+    },
+    switchFocus(e) {
+      this.skipFocusRef = !0, e(), window.setTimeout(() => this.skipFocusRef = !1, 0);
+    },
+    onWrapperKeyDown(e) {
+      const {
+        keyCode: t,
+        altKey: s
+      } = e, n = this.treeViewRef && this.treeViewRef.$el, o = this.inputRef && this.inputRef.input;
+      if (this.$props.disabled || e.defaultPrevented && o === e.target)
+        return;
+      const d = {
+        event: e,
+        target: this
+      };
+      if (this.isOpen)
+        if (t === a.esc || s && t === a.up)
+          e.preventDefault(), this.closePopup(d);
+        else if (n && n.querySelector(".k-focus") && (t === a.up || t === a.down || t === a.left || t === a.right || t === a.home || t === a.end)) {
+          if (t === a.up && o) {
+            const r = Array.from(n.querySelectorAll(".k-treeview-item")), l = [...r].reverse().find((p) => !!(p && p.querySelector(".k-focus")));
+            if (l && r.indexOf(l) === 0)
+              return this.switchFocus(() => {
+                this.focusElement(o);
+              });
+          }
+          this.switchFocus(P);
+        } else
+          t === a.down && this.switchFocus(() => {
+            this.focusElement(o || n);
+          });
+      else
+        s && t === a.down && (e.preventDefault(), this.openPopup(d));
+    },
+    onInputKeyDown(e) {
+      const {
+        keyCode: t,
+        altKey: s
+      } = e;
+      if (t === a.esc)
+        this.onWrapperClick(e);
+      else if (s || t !== a.up && t !== a.down)
+        return;
+      e.preventDefault(), this.switchFocus(t === a.up ? () => {
+        this.focusElement(this.elementRef);
+      } : () => {
+        this.focusElement(this.treeViewRef && this.treeViewRef.$el);
+      });
+    },
+    focusElement(e) {
+      e && this.switchFocus(() => e.focus());
+    },
+    onPopupOpened() {
+      if (!this.focused && this.isOpen && !this.currentOpened)
+        this.closePopup({
+          target: this
+        });
+      else if (this.$props.filterable) {
+        const e = this.inputRef && this.inputRef.input;
+        this.focusElement(e);
+      } else
+        this.focusElement(this.treeViewRef && this.treeViewRef.$el);
+    },
+    onPopupClosed() {
+      this.focused && this.focusElement(this.elementRef);
+    },
+    onFocus(e) {
+      if (!this.focused && !this.skipFocusRef) {
+        this.focused = !0;
+        const t = {
+          event: e,
+          target: this
+        };
+        this.$emit("focus", t);
+      }
+    },
+    onBlur(e) {
+      if (this.focused && !this.skipFocusRef) {
+        this.focused = !1;
+        const t = {
+          event: e,
+          target: this
+        }, s = {
+          ...t
+        };
+        (!e.relatedTarget || !e.relatedTarget.closest(".popup-" + this.componentGuid)) && !this.adaptiveState && (this.$emit("blur", s), this.closePopup(t));
+      }
+    },
+    onWrapperMouseDown() {
+      this.focused && this.switchFocus(P);
+    },
+    changeValue(e, t, s) {
+      const n = {
+        value: t,
+        level: s ? U(s) : [],
+        ...e
+      };
+      this.$emit("changemodel", t), this.$emit("update:modelValue", t), this.$emit("change", n), this.currentValue = t;
+    },
+    onChange(e) {
+      if (Fe(e.item, this.computedValue, this.dataItemKey) || !this.$el)
+        return;
+      const {
+        item: t,
+        itemHierarchicalIndex: s,
+        event: n
+      } = e, o = {
+        event: n,
+        target: this
+      };
+      this.changeValue(o, t, s), this.closePopup(o);
+    },
+    onClear(e) {
+      const t = {
+        event: e,
+        target: this
+      };
+      this.changeValue(t, null), this.closePopup(t), e.preventDefault();
+    },
+    onExpand(e) {
+      const {
+        item: t,
+        itemHierarchicalIndex: s,
+        event: n
+      } = e, o = {
+        level: U(s),
+        item: t,
+        event: n,
+        target: this
+      };
+      this.$emit("expandchange", o);
+    },
+    onFilterChange(e) {
+      const s = {
+        filter: {
+          field: this.$props.textField,
+          operator: "contains",
+          value: e.target.value
+        },
+        event: e,
+        target: this
+      };
+      this.$emit("filterchange", s), this.$props.filter === void 0 && (this.filterState = e.target.value);
+    }
+  }
+});
+export {
+  Xe as DropDownTree
+};

package/DropDownTree/ListNoData.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),o=require("@progress/kendo-vue-common"),n=e.defineComponent({name:"KendoListNoData",render(){const t=o.getDefaultSlots(this);return e.createVNode("div",{class:"k-nodata"},[e.createVNode("div",null,[t])])}});exports.ListNoData=n;