tyh-ui2/es/tree/src/index.js

The next generation ui component library of tyh-ui is based on vue3 Version, fully embrace vue3.

import { defineComponent as i, ref as p, resolveComponent as s, openBlock as o, createElementBlock as l, Fragment as u, renderList as y, createElementVNode as c, createVNode as r, normalizeClass as m, toDisplayString as f, Transition as v, withCtx as C, withDirectives as k, vShow as g, createCommentVNode as w } from "vue";
import { Props as b } from "./index2.js";
const x = { class: "tyh-three" }, N = ["onClick"], T = { class: "tyh-three-label-text" }, V = {
  key: 0,
  class: "tyh-three-children"
}, B = i({
  name: "TyhTree"
}), L = /* @__PURE__ */ i({
  ...B,
  props: b,
  setup(D) {
    const e = p(!1), a = (t) => {
      t.children && t.children.length && (e.value = !e.value);
    };
    return (t, E) => {
      const h = s("tyh-icon"), _ = s("tyh-tree");
      return o(), l("div", x, [
        (o(!0), l(u, null, y(t.data, (n, d) => (o(), l("div", {
          key: d,
          class: "tyh-three-list"
        }, [
          c("div", {
            class: "tyh-three-label",
            onClick: (S) => a(n)
          }, [
            r(h, {
              icon: "tyh-ui-arrow-right-filling",
              color: "#c0c4cc",
              class: m([{ "tyh-three-icon": e.value }])
            }, null, 8, ["class"]),
            c("span", T, f(n.label), 1)
          ], 8, N),
          r(v, { name: "slide-fade" }, {
            default: C(() => [
              n.children ? k((o(), l("div", V, [
                r(_, {
                  data: n.children
                }, null, 8, ["data"])
              ], 512)), [
                [g, e.value]
              ]) : w("", !0)
            ]),
            _: 2
          }, 1024)
        ]))), 128))
      ]);
    };
  }
});
export {
  L as default
};