vue-treeselectjs/dist/vue-treeselectjs.mjs

Treeselect Vue Component

import { defineComponent as w, ref as r, computed as f, watch as c, toRaw as s, onMounted as N, onUnmounted as E, openBlock as V, createElementBlock as x, createElementVNode as g, renderSlot as L } from "vue";
import O from "treeselectjs";
const R = ["modelValue", "options", "id", "iconElements"], k = w({
  name: "VueTreeselect",
  props: {
    modelValue: {
      type: [Array, Number, String],
      default: () => []
    },
    options: {
      type: Array,
      default: () => []
    },
    openLevel: {
      type: Number,
      default: 0
    },
    appendToBody: {
      type: Boolean,
      default: !1
    },
    alwaysOpen: {
      type: Boolean,
      default: !1
    },
    showTags: {
      type: Boolean,
      default: !0
    },
    tagsCountText: {
      type: String,
      default: "elements selected"
    },
    tagsSortFn: {
      type: Function,
      default: null
    },
    clearable: {
      type: Boolean,
      default: !0
    },
    searchable: {
      type: Boolean,
      default: !0
    },
    placeholder: {
      type: String,
      default: "Select..."
    },
    grouped: {
      type: Boolean,
      default: !0
    },
    disabled: {
      type: Boolean,
      default: !1
    },
    emptyText: {
      type: String,
      default: "No results found..."
    },
    staticList: {
      type: Boolean,
      default: !1
    },
    id: {
      type: String,
      default: ""
    },
    ariaLabel: {
      type: String,
      default: ""
    },
    isSingleSelect: {
      type: Boolean,
      default: !1
    },
    showCount: {
      type: Boolean,
      default: !1
    },
    isGroupedValue: {
      type: Boolean,
      default: !1
    },
    disabledBranchNode: {
      type: Boolean,
      default: !1
    },
    direction: {
      type: String,
      default: "auto"
    },
    expandSelected: {
      type: Boolean,
      default: !1
    },
    saveScrollPosition: {
      type: Boolean,
      default: !0
    },
    isIndependentNodes: {
      type: Boolean,
      default: !1
    },
    rtl: {
      type: Boolean,
      default: !1
    },
    isBoostedRendering: {
      type: Boolean,
      default: !1
    },
    listClassName: {
      type: String,
      default: ""
    },
    iconElements: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ["input", "open", "close", "name-change", "search", "open-close-group", "update:modelValue"],
  setup(e, { emit: a }) {
    const o = r(null), i = r(null), l = r(null), y = (t) => {
      a("update:modelValue", t), a("input", t);
    }, S = (t) => a("open", t), h = (t) => a("close", t), v = (t) => a("name-change", t), p = (t) => a("search", t), B = (t, n) => a("open-close-group", {
      groupId: t,
      isClosed: n
    }), T = f(() => JSON.stringify(e.modelValue)), C = f(() => JSON.stringify(e.options)), b = f(() => JSON.stringify(e.iconElements));
    return c(
      () => e,
      (t) => {
        if (l.value) {
          const n = s(l.value), u = s(t);
          let m = !1;
          Object.keys(u).forEach((d) => {
            const _ = u[d] === n[d];
            !R.includes(d) && !_ && (n[d] = u[d], m = !0);
          }), m && n.mount();
        }
      },
      { deep: !0 }
    ), c(
      () => T.value,
      () => {
        l.value && s(l.value).updateValue(e.modelValue);
      }
    ), c(
      () => e.id,
      (t) => {
        if (l.value) {
          const n = s(l.value);
          (n.id || t) && (n.id = t ?? "", n.mount());
        }
      }
    ), c(
      () => C.value,
      () => {
        if (l.value) {
          const t = s(l.value);
          t.options = e.options, t.mount(), t.updateValue(e.modelValue);
        }
      }
    ), c(
      () => b.value,
      () => {
        if (l.value) {
          const t = s(l.value);
          t.iconElements = {
            ...t.iconElements,
            ...e.iconElements
          }, t.mount();
        }
      }
    ), N(() => {
      if (!o.value)
        throw new Error("Treeselect container ref is not defined");
      l.value = new O({
        parentHtmlContainer: o.value,
        value: e.modelValue,
        options: e.options,
        openLevel: e.openLevel,
        appendToBody: e.appendToBody,
        alwaysOpen: e.alwaysOpen,
        showTags: e.showTags,
        tagsCountText: e.tagsCountText,
        tagsSortFn: e.tagsSortFn,
        clearable: e.clearable,
        searchable: e.searchable,
        placeholder: e.placeholder,
        grouped: e.grouped,
        disabled: e.disabled,
        emptyText: e.emptyText,
        staticList: e.staticList,
        id: e.id,
        ariaLabel: e.ariaLabel,
        isSingleSelect: e.isSingleSelect,
        showCount: e.showCount,
        isGroupedValue: e.isGroupedValue,
        disabledBranchNode: e.disabledBranchNode,
        direction: e.direction,
        expandSelected: e.expandSelected,
        saveScrollPosition: e.saveScrollPosition,
        isIndependentNodes: e.isIndependentNodes,
        rtl: e.rtl,
        isBoostedRendering: e.isBoostedRendering,
        listClassName: e.listClassName,
        inputCallback: y,
        openCallback: S,
        closeCallback: h,
        nameChangeCallback: v,
        searchCallback: p,
        openCloseGroupCallback: B,
        // We need a HTMLElement as a prop here. It is an additional component at the end of list.
        // We gets HTMLElement from refs. Vue events work fine.
        listSlotHtmlComponent: i.value ?? null,
        iconElements: e.iconElements
      });
    }), E(() => {
      l.value && s(l.value).destroy();
    }), {
      treeselectContainerRef: o,
      treeselectAfterListSlotRef: i
    };
  }
});
const A = (e, a) => {
  const o = e.__vccOpts || e;
  for (const [i, l] of a)
    o[i] = l;
  return o;
}, $ = { class: "vue-treeselect" }, G = { ref: "treeselectContainerRef" }, I = {
  ref: "treeselectAfterListSlotRef",
  class: "treeselect__after-list-slot"
};
function F(e, a, o, i, l, y) {
  return V(), x("div", $, [
    g("div", G, null, 512),
    g("div", I, [
      L(e.$slots, "default")
    ], 512)
  ]);
}
const j = /* @__PURE__ */ A(k, [["render", F]]);
export {
  j as default
};