t-fighting-design/es/tree/src/index2.js

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

import { defineComponent as a, computed as _, openBlock as t, createElementBlock as o, Fragment as i, renderList as f, unref as m, createElementVNode as u, normalizeStyle as k, toDisplayString as v } from "vue";
import { Props as g } from "./index3.js";
import { treeToFlat as h, treeAddLevel as y } from "../../_utils/index7.js";
const C = { class: "f-tree" }, F = ["onClick"], L = a({
  name: "FTree"
}), E = /* @__PURE__ */ a({
  ...L,
  props: g,
  setup(s) {
    const c = s, d = _(() => h(y(c.data))), p = (r, n) => {
      console.log(r, n);
    };
    return (r, n) => (t(), o("div", C, [
      (t(!0), o(i, null, f(m(d), (e, l) => (t(), o("div", {
        key: l,
        class: "f-tree__data",
        onClick: (b) => p(e, l)
      }, [
        u("div", {
          class: "f-tree__label",
          style: k({ paddingLeft: 25 * (e.level - 1) + "px" })
        }, v(e.label), 5)
      ], 8, F))), 128))
    ]));
  }
});
export {
  E as default
};