ideaz-element/es/element/table/src/hooks/useTableColumnSlots.mjs

<p align="center"> <a href="" target="_blank" rel="noopener noreferrer"> <img src="./docs/public/logo.svg" alt="Ideaz Element" width="180" style="width: 180px;" /> </a> </p>

import { isVNode as N, shallowRef as j, watch as z, createVNode as r, mergeProps as O } from "vue";
import { Operation as _, QuestionFilled as k } from "@element-plus/icons-vue";
import "../../../../utils/index.mjs";
import { ElIcon as C, ElFormItem as F, ElTooltip as L } from "element-plus";
import V from "../TableButton.mjs";
import "../../../form/src/hooks/index.mjs";
import q from "../TableCustomColumnContainer.mjs";
import { useNamespace as D } from "../../../../hooks/useNamespace.mjs";
import { useLocale as w } from "../../../../hooks/useLocale.mjs";
import { isFunction as c, isObject as x, isEmptyObject as I, isArray as R, isSlot as $, isString as A } from "../../../../utils/is.mjs";
import { SELECT_TYPES as B } from "../../../form/src/hooks/useFormItems.mjs";
import { getEventsFromCamel as Q } from "../../../../utils/getEventsFromCamel.mjs";
function U(l) {
  return typeof l == "function" || Object.prototype.toString.call(l) === "[object Object]" && !N(l);
}
function Y(l) {
  const i = ["select", "checkbox", "radio", "input"], f = typeof l == "function" ? l() : l;
  return i.includes(f) ? `z-${f}` : f || "unknown";
}
function le(l, i, f) {
  const b = j({}), s = D("table-column"), {
    t: P
  } = w(), E = (e) => {
    var u, p, a, g, h;
    const {
      column: o = {}
    } = l, m = l.tableProps.options, n = o.prop, t = c(o.component) ? o.component() : x(o.component) ? o.component.name : o.component;
    if (t === "radio" || t === "select" && !((u = o.fieldProps) != null && u.multiple)) return m[n] ? (p = m[n].find((d) => d.value === (e == null ? void 0 : e[n]))) == null ? void 0 : p.label : "";
    if (t === "select" && ((a = o.fieldProps) != null && a.multiple) || t === "checkbox") {
      const d = [];
      return e[n] && e[n].forEach((v) => {
        var y;
        d.push((y = m[n].find((T) => T.value === v)) == null ? void 0 : y.label);
      }), d.join(",");
    }
    return t === "el-switch" ? e[n] ? ((g = o.fieldProps) == null ? void 0 : g.activeText) || "true" : ((h = o.fieldProps) == null ? void 0 : h.inactiveText) || "false" : e[n];
  }, S = () => {
    var u;
    const e = l.column, o = l.column.label, m = c(e.component) ? e.component() : x(e.component) ? e.component.name : e.component;
    let n = "", t = {};
    return B.includes((m || "").toLowerCase()) ? n = o ? `${P("form.selectPlaceholder")}${o}` : `${P("form.selectPlaceholder")}` : n = o ? `${P("form.inputPlaceholder")}${o}` : `${P("form.inputPlaceholder")}`, (e.required === !0 || (u = e.rules) != null && u.required) && (t = {
      required: !0,
      message: n,
      ...e.rules
    }), I(t) ? void 0 : t;
  };
  return z(() => l.column, () => {
    const {
      column: e = {},
      size: o,
      tableProps: m
    } = l, n = e.prop || "";
    if ((!["index", "selection", "radio", void 0].includes(e.type) || e.slot || e.render || e.component) && (b.value.default = (t) => {
      var p;
      const u = () => {
        var g;
        const a = Q(e);
        return r(q, {
          modelValue: t.row[n],
          "onUpdate:modelValue": (h) => {
            const d = {
              ...t.row,
              [n]: h
            }, v = [...l.tableProps.data];
            v.splice(t.$index, 1, d), f("update:data", v);
          },
          componentName: Y(e.component),
          evts: a,
          size: o,
          options: ((g = m.options) == null ? void 0 : g[n]) || [],
          scope: t,
          column: e,
          fieldProps: e.fieldProps
        }, null);
      };
      if (e.type === "expand" && c(i.expand)) return i.expand(t);
      if (e.slot && i[e.slot]) return i[e.slot](t);
      if (e.type === "sort" && c(i.sort)) return r("div", {
        class: s.b("draggable")
      }, [i.sort(t)]);
      if (e.type === "sort" && c(e.render)) return r("div", {
        class: s.b("draggable")
      }, [e.render(t)]);
      if (c(e.render)) return e.render(t);
      if (e.type === "button" && R(e.buttons))
        return r("div", {
          class: s.e("operation")
        }, [(p = e.buttons) == null ? void 0 : p.map((a) => r(V, {
          button: a,
          scope: t,
          size: o
        }, null))]);
      if (e.type === "sort") return r("div", {
        class: s.b("draggable")
      }, [r(C, {
        class: s.be("draggable", "handle"),
        size: 24
      }, {
        default: () => [r(_, null, null)]
      })]);
      if (m.editable) {
        let a;
        return t.row.__isEdit === !0 ? r(F, {
          prop: `tableData.${t.$index}.${e.prop}`,
          rules: S(),
          class: [s.b("form-item"), s.bm("form-item", o)]
        }, U(a = u()) ? a : {
          default: () => [a]
        }) : r("span", null, [E(t.row)]);
      }
      return e.slot && !i[e.slot] || e.type === "expand" && !c(i.expand) ? null : u();
    }), $(e.label) && i[e.label] && (b.value.header = (t) => i[e.label](t)), c(e.label) && (b.value.header = (t) => e.label(t)), !$(e.label) && !c(e.label) && e.tooltip) {
      const t = e.tooltip, u = x(t) ? t : {
        content: A(t) ? t : ""
      }, p = {};
      b.value.header = (a) => (c(t) && (p.content = () => t(a)), r("span", null, [e.label, r(L, O({
        effect: "dark",
        placement: "top"
      }, u), {
        default: () => [t && r(C, {
          class: s.be("label", "icon")
        }, {
          default: () => [r(k, null, null)]
        })],
        ...p
      })]));
    }
  }, {
    immediate: !0,
    deep: !0
  }), {
    scopedSlots: b
  };
}
export {
  le as useTableColumnSlots
};
//# sourceMappingURL=useTableColumnSlots.mjs.map