vue-treeselectjs/dist/vue-treeselectjs.mjs

Treeselect Vue Component

import { defineComponent as w, ref as d, computed as f, watch as i, toRaw as s, onMounted as E, onUnmounted as V, openBlock as N, createElementBlock as O, createElementVNode as m, renderSlot as R } from "vue";
import k from "treeselectjs";
const x = () => ({
  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 },
  isGroupedValue: { type: Boolean, default: !1 },
  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 },
  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 },
  listClassName: { type: String, default: "" },
  isBoostedRendering: { type: Boolean, default: !1 },
  iconElements: { type: Object, default: () => ({}) }
}), A = ["modelValue", "options", "id", "iconElements"], $ = w({
  name: "VueTreeselect",
  props: x(),
  emits: {
    "update:modelValue": (t) => !0,
    input: (t) => !0,
    open: (t) => !0,
    close: (t) => !0,
    "name-change": (t) => !0,
    search: (t) => !0,
    "open-close-group": (t) => !0
  },
  setup(t, { emit: o }) {
    const n = d(null), u = d(null), l = d(null), p = (e) => {
      o("update:modelValue", e), o("input", e);
    }, v = (e) => o("open", e), g = (e) => o("close", e), S = (e) => o("name-change", e), h = (e) => o("search", e), _ = (e, a) => o("open-close-group", {
      groupId: e,
      isClosed: a
    }), B = f(() => JSON.stringify(t.modelValue)), C = f(() => JSON.stringify(t.options)), T = f(() => JSON.stringify(t.iconElements));
    return i(
      () => t,
      (e) => {
        if (l.value) {
          const a = s(l.value), r = s(e);
          let y = !1;
          Object.keys(r).forEach((c) => {
            const b = r[c] === a[c];
            !A.includes(c) && !b && (a[c] = r[c], y = !0);
          }), y && a.mount();
        }
      },
      { deep: !0 }
    ), i(
      () => B.value,
      () => {
        l.value && s(l.value).updateValue(t.modelValue);
      }
    ), i(
      () => t.id,
      (e) => {
        if (l.value) {
          const a = s(l.value);
          (a.id || e) && (a.id = e ?? "", a.mount());
        }
      }
    ), i(
      () => C.value,
      () => {
        if (l.value) {
          const e = s(l.value);
          e.options = t.options ?? [], e.mount(), e.updateValue(t.modelValue);
        }
      }
    ), i(
      () => T.value,
      () => {
        if (l.value) {
          const e = s(l.value);
          e.iconElements = {
            ...e.iconElements,
            ...t.iconElements
          }, e.mount();
        }
      }
    ), E(() => {
      if (!n.value)
        throw new Error("Treeselect container ref is not defined");
      const { modelValue: e, ...a } = t, r = {
        ...a,
        value: e,
        parentHtmlContainer: n.value,
        listSlotHtmlComponent: u.value ?? null,
        inputCallback: p,
        openCallback: v,
        closeCallback: g,
        nameChangeCallback: S,
        searchCallback: h,
        openCloseGroupCallback: _
      };
      l.value = new k(r);
    }), V(() => {
      l.value && s(l.value).destroy();
    }), {
      treeselectContainerRef: n,
      treeselectAfterListSlotRef: u
    };
  }
}), L = (t, o) => {
  const n = t.__vccOpts || t;
  for (const [u, l] of o)
    n[u] = l;
  return n;
}, P = { class: "vue-treeselect" }, G = { ref: "treeselectContainerRef" }, I = {
  ref: "treeselectAfterListSlotRef",
  class: "treeselect__after-list-slot"
};
function J(t, o, n, u, l, p) {
  return N(), O("div", P, [
    m("div", G, null, 512),
    m("div", I, [
      R(t.$slots, "default")
    ], 512)
  ]);
}
const H = /* @__PURE__ */ L($, [["render", J]]);
export {
  H as default
};