@farris/ui-vue/components/tree-view/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { getCustomClass as Ue, withInstall as Je } from "../common/index.esm.js";
import { createVNode as H, defineComponent as ne, ref as c, computed as V, onMounted as Ke, nextTick as Qe, inject as Xe } from "vue";
import { useResizeObserver as Ze } from "@vueuse/core";
import { resolveAppearance as _e, createPropsResolver as et } from "../dynamic-resolver/index.esm.js";
import { getHierarchyRow as tt, useFilter as oe, useIdentify as ie, useHierarchy as ae, useDataView as le, useSelection as se, useSelectHierarchyItem as re, useDataViewContainerStyle as ce, useColumn as ue, useGroupColumn as nt, useRow as de, useEdit as fe, useVisualDataBound as me, useVisualDataCell as ve, useVisualDataRow as ye, useVisualData as pe, useCellPosition as Ce, useVirtualScroll as he, useSidebar as ot, getVerticalScrollbar as it, getHorizontalScrollbar as at, getSidebar as lt, useFitColumn as st, getEmpty as rt } from "../data-view/index.esm.js";
import { useDesignerComponent as ct } from "../designer-canvas/index.esm.js";
const ut = /* @__PURE__ */ new Map([
  ["appearance", _e]
]);
function dt(e, n, l) {
  return n;
}
const ft = "tree-view", mt = "A Farris Component", vt = "object", yt = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "select",
        editor: {
          type: "waiting for modification",
          enum: []
        }
      }
    }
  }
}, pt = {
  title: ft,
  description: mt,
  type: vt,
  categories: yt
}, Ct = "https://json-schema.org/draft/2020-12/schema", ht = "https://farris-design.gitee.io/tree-view.schema.json", gt = "tree-view", wt = "A Farris Component", bt = "object", It = {
  id: {
    description: "The unique identifier for tree-view",
    type: "string"
  },
  type: {
    description: "The type string of tree-view",
    type: "string",
    default: "tree-view"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  binding: {
    description: "",
    type: "object",
    default: {}
  },
  disable: {
    type: "string",
    default: !1
  },
  editable: {
    description: "",
    type: "boolean",
    default: !0
  },
  placeholder: {
    description: "",
    type: "string",
    default: ""
  },
  readonly: {
    description: "",
    type: "boolean",
    default: !1
  },
  require: {
    description: "",
    type: "boolean",
    default: !1
  },
  tabindex: {
    description: "",
    type: "number",
    default: -1
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  },
  idField: {
    description: "",
    type: "string",
    default: "id"
  }
}, St = [
  "id",
  "type"
], Vt = {
  $schema: Ct,
  $id: ht,
  title: gt,
  description: wt,
  type: bt,
  properties: It,
  required: St
}, Tt = {
  /** 自动列宽。设为true后，所有列将填满表格并不会出现横向滚动条。 */
  fitColumns: { type: Boolean, default: !1 },
  /** 自动适配列宽度模式 */
  fitMode: { type: String, default: "average" },
  groups: { type: Array, defaut: [] },
  /** 允许拖动表头改变列显示顺序 */
  reorderColumn: { type: Boolean, default: !1 },
  /** 允许拖动改变列宽度 */
  resizeColumn: { type: Boolean, default: !0 },
  /** 双击表头列自适应内容宽度 */
  resizeColumnOnDoubleClick: { type: Boolean, default: !0 }
}, Q = {
  /** 自定义样式 */
  customClass: { type: String, default: "" },
  /** 列集合 */
  columns: {
    type: Array,
    default: [
      { field: "name", title: "", dataType: "string", width: "100%" }
    ]
  },
  columnOption: { type: Object },
  displayField: { type: String, default: "name", require: !0 },
  /** 是否显示连接线 */
  showLines: { type: Boolean, default: !1 },
  /** 树表数据 */
  /** 被绑定数据 */
  data: { type: Object, default: [] },
  /** 禁用组件 */
  disable: { type: Boolean, default: !1 },
  disabledField: { type: String, default: "disabled" },
  /** 适配父组件尺寸 */
  fit: { type: Boolean, default: !1 },
  /** 高度 */
  height: { type: Number, default: -1 },
  /** DataGrid组件唯一标识 */
  id: { type: String, default: "" },
  /** 被绑定数据的标识字段 */
  idField: { type: String, default: "id", require: !0 },
  /** 最小高度 */
  minHeight: { type: Number, default: 300 },
  /** 最小宽度 */
  minWidth: { type: Number, default: 400 },
  /** 分页配置 */
  pagination: {
    type: Object,
    default: {
      enable: !1,
      size: -1
    }
  },
  /** 行号配置 */
  rowNumber: {
    type: Object,
    default: {
      enable: !1,
      width: 36,
      heading: "序号"
    }
  },
  /** 选择配置 */
  selection: {
    type: Object,
    default: {
      enableSelectRow: !0,
      multiSelect: !1,
      multiSelectMode: "DependOnCheck",
      showCheckbox: !1,
      showSelectAll: !1,
      showSelection: !1
    }
  },
  /** 已选数据标识 */
  selectionValues: { type: Array, default: [] },
  /** 是否显示图标集 */
  showTreeNodeIcons: { type: Boolean, default: !1 },
  /** 树节点图标数据 */
  treeNodeIconsData: { type: [Object, String], default: {} },
  /** 绑定数据中的图标属性key值 */
  iconField: { type: String, default: "" },
  /** 宽度 */
  width: { type: Number, default: -1 },
  /** 新增值 */
  newDataItem: {
    type: [Function, Object],
    default: () => {
    }
  },
  /** 连接线颜色 */
  lineColor: { type: String, default: "#9399a0" },
  /** 单元格高度 */
  cellHeight: { type: Number, default: 28 },
  onOutputValue: { type: Function, default: () => {
  } },
  onCurrentEvent: { type: Function, default: () => {
  } },
  hierarchy: {
    type: Object,
    default: {
      cascadeOption: {
        autoCheckChildren: !1,
        autoCheckParent: !1,
        selectionRange: "All"
      },
      parentIdField: "parent"
    }
  },
  /** 行配置 */
  rowOption: { type: Object },
  /** 虚拟化渲染数据 */
  virtualized: { type: Boolean, default: !1 },
  /** 是否出现省略号 */
  showEllipsis: { type: Boolean, default: !1 },
  /** 自动高度 **/
  autoHeight: { type: Boolean, default: !1 },
  /** async loading data */
  loadData: { type: Function },
  checkboxPosition: { type: String, default: "after-expand" }
}, ge = et(Q, Vt, ut, dt, pt);
function we(e, n, l, v, s, D, h, g, a, B, u, w, o, r, d, R, x) {
  const {
    calculateCellPositionInRow: P
  } = v, {
    columnContext: T
  } = s, {
    gridDataStyle: M
  } = w, {
    renderDataRow: b
  } = tt(e, n, T, l, D, h, g, a, B, u, w, o, r, R, x);
  function z() {
    const p = P(T.value.primaryColumns);
    return l.value.filter((I) => I.visible !== !1).map((I, C) => b(I, p, "primary", C));
  }
  function y() {
    return (
      // <div class="fv-tree-data" style={gridDataStyle.value}>
      H("div", {
        ref: d,
        class: "fv-grid-content-primary"
      }, [H("div", {
        class: "fv-grid-data",
        style: M.value
      }, [z()])])
    );
  }
  return {
    renderTreeArea: y
  };
}
function te(e, n) {
  function l() {
    return n.slots.header && H("div", {
      class: "f-tree-view-header"
    }, [n.slots.header()]);
  }
  return {
    renderHeader: l
  };
}
const q = /* @__PURE__ */ ne({
  name: "FTreeView",
  props: Q,
  emits: ["outputValue", "currentEvent", "clickRow", "selectItem", "unSelectItem", "selectionChange", "expandNode", "dblclickNode", "clickRow", "selectionUpdate"],
  setup(e, n) {
    var ee;
    const l = c(((ee = e.rowOption) == null ? void 0 : ee.height) || 28), v = c(!1), s = c(), D = c(!1), h = c(), g = c(20), a = c([]), B = oe(e, n), u = ie(e), w = ae(e), o = le(e, /* @__PURE__ */ new Map(), B, w, u), r = se(e, o, u, a, n), d = re(e, a, o, u, r, n), R = V(() => Ue({
      // 'fv-tree': true
      "fv-grid": !0,
      "fv-tree-view": !0
    }, e.customClass)), x = V(() => ({
      // 'fv-tree-content': true
      "fv-grid-content": !0,
      "fv-grid-content-hover": D.value
    })), {
      containerStyleObject: P
    } = ce(e, a), T = c(e.columns), M = ue(e, n), {
      columnContext: b
    } = M, z = nt(e, b), y = 0, p = V(() => e.virtualized ? Math.min(o.dataView.value.length, g.value) : o.dataView.value.length), I = V(() => !a.value || !a.value.length), C = de(e, n, r, u), N = fe(e, n, u, C, a), O = me(e, o, l), E = ve(e, {}, O), W = ye(e, o, N, w, u, O, E, l), F = pe(e, T, o, p, y, W), {
      getVisualData: j
    } = F, L = Ce(e, b, l, v), f = he(e, o, a, b, F, p, y, c(0), l, v), Y = ot(e, r), {
      onWheel: U,
      dataGridWidth: G,
      viewPortHeight: $,
      viewPortWidth: A,
      resetScroll: k,
      updateVisibleRowsOnLatestVisibleScope: be
    } = f, {
      renderVerticalScrollbar: Ie
    } = it(e, s, f), {
      renderHorizontalScrollbar: Se
    } = at(e, s, f), {
      renderDataGridSidebar: Ve
    } = lt(e, C, r, Y, f), De = st(e, b, s, A, z), {
      calculateColumnsSize: X
    } = De;
    function Re() {
      return e.header === "ContentHeader", te;
    }
    const Oe = Re(), {
      renderHeader: Fe
    } = Oe(e, n), {
      renderTreeArea: je
    } = we(e, n, a, L, M, o, N, w, C, r, d, f, F, O, h, l, v);
    function J() {
      const t = r.getSelectionRow();
      return t ? t.dataIndex - 1 : -1;
    }
    function He() {
      var i, m;
      const t = Math.ceil(s.value.clientHeight / l.value);
      t > g.value && (g.value = t, be()), $.value = ((i = h.value) == null ? void 0 : i.clientHeight) || 0, G.value = ((m = s.value) == null ? void 0 : m.clientWidth) || 0, X();
    }
    const {
      renderEmpty: Be
    } = rt(e, n);
    Ke(() => {
      s.value && (g.value = Math.max(Math.ceil(s.value.clientHeight / l.value), g.value), a.value = j(0, p.value + y - 1), Ze(s.value, He), X(), Qe(() => {
        s.value && (G.value = s.value.clientWidth), h.value && (A.value = h.value.clientWidth, $.value = h.value.clientHeight);
      }));
    });
    function Te() {
      const t = J();
      o.insertNewDataItem(t), a.value = j(0, p.value + y - 1);
    }
    function Me() {
      const t = J();
      o.insertNewChildDataItem(t), a.value = j(0, p.value + y - 1);
    }
    function Ne() {
      const t = J(), i = d.getNextSelectableHierarchyItemId(t);
      o.removeHierarchyDataItem(t), a.value = j(0, p.value + y - 1), i && d.selectItemById(i);
    }
    function xe(t, i) {
      o.editDataItem(t, i), a.value = j(0, p.value + y - 1);
    }
    function Pe() {
    }
    function ze() {
    }
    function Ae(t) {
      return Object.prototype.hasOwnProperty.call(t, "raw") ? o.hasRealChildren(t.raw) : o.hasRealChildren(t);
    }
    function ke(t, i) {
      const m = a.value.find((K) => K.raw[u.idField.value] === i), S = m ? m.dataIndex - 1 : -1;
      o.insertNewChildDataItems(t, S);
    }
    function Z(t) {
      if (t > -1) {
        const i = a.value[t];
        i && r.selectItem(i);
      }
    }
    function Ee(t, i) {
      if (t) {
        const m = r.getSelectionRow();
        if (o.load(t), o.reOrderVisibleIndex(), i != null && i.keepScrollPosition) {
          const S = f.offsetY.value;
          k(), f.scrollTo(S);
        } else
          k();
        if (m && m.raw && m.raw.originalId) {
          const S = t.findIndex((K) => K.originalId === m.raw.originalId);
          S > -1 && Z(S);
        }
      }
    }
    function We() {
      r.clearSelection();
    }
    function Ge(t) {
      d.selectItemByIds(t);
    }
    function _(t) {
      C.activeRowById(t);
    }
    function $e(t, i = {
      isCurrent: !0
    }) {
      i != null && i.isCurrent && _(t), d.selectItemById(t);
    }
    function qe(t) {
      const i = u.idField.value, m = a.value.find((S) => S.raw[i] === t);
      m && C.changeRow(m);
    }
    function Le() {
      r.emptyCurrentRowId();
    }
    n.expose({
      addNewDataItem: Te,
      addNewChildDataItem: Me,
      removeDataItem: Ne,
      editDataItem: xe,
      acceptDataItem: Pe,
      cancelDataItem: ze,
      selectItem: Z,
      updateDataSource: Ee,
      clearSelection: We,
      selectItemById: $e,
      activeRowById: _,
      hasChildren: Ae,
      addChildrenToNode: ke,
      selectRowById: qe,
      selectItemByIds: Ge,
      emptyCurrentRowId: Le
    });
    const Ye = V(() => {
      const t = {};
      return f.shouldShowHorizontalScrollbar.value && (t.paddingBottom = "10px"), f.shouldShowVirticalScrollbar.value && (t.paddingRight = "10px"), t;
    });
    return () => H("div", {
      class: R.value,
      style: P.value,
      onWheel: U
    }, [Fe(), H("div", {
      ref: s,
      class: x.value,
      onMouseover: () => {
        D.value = !0;
      },
      onMouseleave: () => {
        D.value = !1;
      },
      style: Ye.value
    }, [s.value && Ve(a), je(), s.value && I.value && Be(), s.value && Se(), s.value && Ie()])]);
  }
}), Dt = /* @__PURE__ */ ne({
  name: "FTreeViewDesign",
  props: Q,
  emits: ["outputValue", "currentEvent", "selectionChange"],
  setup(e, n) {
    var A;
    const l = c(!1), v = c(((A = e.rowOption) == null ? void 0 : A.height) || 28), s = c(), D = Xe("design-item-context"), h = ct(s, D), g = c();
    c(e.idField);
    const a = c(), B = c(!1), u = c([]), w = oe(e, n), o = ae(e), r = ie(e), d = le(e, /* @__PURE__ */ new Map(), w, o, r), R = se(e, d, r, u, n), x = re(e, u, d, r, R, n), P = V(() => ({
      "fv-tree": !0
    })), T = V(() => ({
      "fv-tree-content": !0
    })), {
      containerStyleObject: M
    } = ce(e, u);
    function b(k) {
    }
    function z() {
      return [];
    }
    function y() {
      return [];
    }
    const p = c(e.columns), I = ue(e, n), {
      columnContext: C
    } = I, N = 0, O = V(() => d.dataView.value.length), E = de(e, n, R, r), W = fe(e, n, r, E, u), F = me(e, d, v), j = ve(e, {}, F), L = ye(e, d, W, o, r, F, j, v), f = pe(e, p, d, O, N, L), {
      getVisualData: Y
    } = f, U = Ce(e, C, v, l);
    u.value = Y(0, O.value + N - 1);
    const G = he(e, d, u, C, f, O, N, c(0), v, l), {
      renderTreeArea: $
    } = we(e, n, u, U, I, d, W, o, E, R, x, G, f, F, g, v, l);
    return n.expose(h.value), () => H("div", {
      class: P.value,
      style: M.value,
      onWheel: b
    }, [H("div", {
      ref: a,
      class: T.value,
      onMouseover: () => {
        B.value = !0;
      },
      onMouseleave: () => {
        B.value = !1;
      }
    }, [$(), z(), y()])]);
  }
});
q.register = (e, n, l) => {
  e["tree-view"] = q, n["tree-view"] = ge;
};
q.registerDesigner = (e, n, l) => {
  e["tree-view"] = Dt, n["tree-view"] = ge;
};
const Mt = Je(q);
export {
  q as FTreeView,
  Tt as columnOptions,
  Mt as default,
  ge as propsResolver,
  Q as treeViewProps
};