vexip-ui/es/components/table/table-column.mjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

import { defineComponent as P, computed as x, inject as C, reactive as K, watch as l, onBeforeUnmount as z, renderSlot as a } from "vue";
import { useProps as F, createSizeProp as k } from "@vexip-ui/config";
import { isNull as m, warnOnce as v } from "@vexip-ui/utils";
import { tableColumnProps as g } from "./props.mjs";
import { columnTypes as O, TABLE_ACTIONS as T, COLUMN_GROUP_ACTIONS as _, noopFormatter as I } from "./symbol.mjs";
const W = Object.keys(g), L = {
  idKey: "key"
}, N = [
  "renderer",
  "headRenderer",
  "filterRenderer",
  "summaryRenderer"
], U = [
  "idKey",
  "fixed",
  "type",
  "width",
  "minWidth",
  "maxWidth",
  "sorter",
  "order",
  "orderLabel",
  "disableRow",
  "headSpan",
  "cellSpan"
], b = ["left", "center", "right"], s = {
  default: null,
  isFunc: !0,
  static: !0
}, H = P({
  name: "TableColumn",
  inheritAttrs: !1,
  props: g,
  setup(w, { slots: u }) {
    const r = F("tableColumn", w, {
      idKey: {
        default: null,
        validator: (e) => !m(e),
        static: !0
      },
      name: {
        default: "",
        static: !0
      },
      accessor: {
        default: null,
        isFunc: !0,
        static: !0
      },
      fixed: {
        default: !1,
        static: !0
      },
      class: null,
      style: null,
      attrs: null,
      type: {
        default: null,
        validator: (e) => O.includes(e),
        static: !0
      },
      width: null,
      minWidth: 100,
      maxWidth: null,
      filter: null,
      sorter: !1,
      renderer: s,
      headRenderer: s,
      filterRenderer: s,
      order: {
        default: 0,
        static: !0
      },
      ellipsis: null,
      checkboxSize: {
        ...k(),
        default: null
      },
      selectionSize: {
        ...k(),
        default: null
      },
      disableRow: {
        default: null,
        isFunc: !0
      },
      truthIndex: !1,
      orderLabel: {
        default: null,
        isFunc: !0
      },
      meta: null,
      textAlign: {
        default: "left",
        validator: (e) => b.includes(e)
      },
      headSpan: {
        default: 1,
        static: !0
      },
      cellSpan: s,
      noSummary: !1,
      summaryRenderer: s,
      indented: !1,
      formatter: {
        default: null,
        isFunc: !0
      },
      singleSelect: !1
    }), p = x(() => (r.checkboxSize && v("'checkboxSize' has been deprecated, please use 'selectionSize' instead."), r.selectionSize ?? r.checkboxSize ?? "default")), n = C(T, null), c = C(_, null), t = K({});
    for (const e of W) {
      if (N.includes(e)) continue;
      if (e === "selectionSize" || e === "checkboxSize") {
        t.selectionSize = p.value, l(p, (i) => {
          t.selectionSize = i, n == null || n.setColumnProp(t.key, "selectionSize", i);
        });
        continue;
      }
      const f = L[e] || e;
      if (t[f] = r[e], e === "idKey") {
        const i = (o) => {
          m(o) && r.type ? t[f] = o = `__vxp_${r.type}` : t[f] = o;
        };
        i(r.idKey), l(
          () => r.idKey,
          (o) => {
            i(o), n == null || n.updateColumns();
          }
        );
      } else if (e === "filter") {
        const i = x(() => {
          if (r.filter) {
            const { meta: o, ...d } = r.filter;
            return d;
          }
          return r.filter;
        });
        l(
          i,
          () => {
            t.filter = r.filter, n == null || n.updateColumns();
          },
          { deep: !0 }
        );
      } else {
        const i = U.includes(e);
        l(
          () => r[e],
          (o) => {
            t[f] = o, i ? n == null || n.updateColumns() : n == null || n.setColumnProp(t.key, e, o);
          }
        );
      }
    }
    l(() => r.renderer, y), l(() => r.headRenderer, R), l(() => r.filterRenderer, h), l(() => r.summaryRenderer, S), y(), R(), h(), S(), c ? (c.increaseColumn(t), z(() => {
      c.decreaseColumn(t);
    })) : (n == null || n.increaseColumn(t), z(() => {
      n == null || n.decreaseColumn(t);
    }));
    function y() {
      if (t.type && t.type !== "expand") {
        t.renderer = void 0;
        return;
      }
      t.renderer = (e) => {
        if (typeof u.default == "function")
          return a(u, "default", e);
        if (typeof r.renderer == "function")
          return r.renderer(e);
        if (t.type === "expand")
          return "";
        const f = e.row, i = e.rowIndex, d = (typeof t.formatter == "function" ? t.formatter : I)(
          typeof r.accessor == "function" ? r.accessor(f, i) : f[t.key]
        );
        return m(d) ? "" : String(d);
      };
    }
    function R() {
      if (t.type === "selection") {
        t.renderer = void 0;
        return;
      }
      t.headRenderer = (e) => typeof u.head == "function" ? a(u, "head", e) : typeof r.headRenderer == "function" ? r.headRenderer(e) : r.name;
    }
    function h() {
      typeof u.filter == "function" || typeof r.filterRenderer == "function" ? t.filterRenderer = (e) => typeof u.filter == "function" ? a(u, "filter", e) : r.filterRenderer(e) : t.filterRenderer = void 0;
    }
    function S() {
      typeof u.summary == "function" || typeof r.summaryRenderer == "function" ? t.summaryRenderer = (e) => typeof u.summary == "function" ? a(u, "summary", e) : typeof r.summaryRenderer == "function" ? r.summaryRenderer(e) : "" : t.summaryRenderer = void 0;
    }
    return () => null;
  }
});
export {
  H as default
};
//# sourceMappingURL=table-column.mjs.map