@opensig/opendesign/es/table/OTable.vue.mjs

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, Fragment, renderList, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createVNode, unref } from "vue";
import { tableProps } from "./types.mjs";
import { getColumnData, getBodyData } from "./table.mjs";
import { IconLoading } from "../_utils/icons.mjs";
import { isString } from "../_utils/is.mjs";
import { useI18n } from "../locale/index.mjs";
const _hoisted_1 = { key: 0 };
const _hoisted_2 = { key: 1 };
const _hoisted_3 = ["rowspan", "colspan"];
const _hoisted_4 = {
  key: 0,
  class: "o-table-tip-wrap"
};
const _hoisted_5 = { class: "o-table-empty-label" };
const _hoisted_6 = {
  key: 0,
  class: "o-table-loading-wrap"
};
const _hoisted_7 = { class: "o-table-loading-label" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "OTable",
  props: tableProps,
  setup(__props) {
    const props = __props;
    const { t } = useI18n();
    const columnData = computed(() => getColumnData(props.columns));
    const tableData = computed(() => getBodyData(columnData, props.data, props.cellSpan));
    const emptyLabel = computed(() => props.emptyLabel || t("common.empty"));
    const loadingLabel = computed(() => props.loadingLabel || t("common.loading"));
    const boderClass = computed(() => {
      if (isString(props.border)) {
        return props.border.split("-").map((item) => `o-table-border-${item}`);
      }
      return "";
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass(["o-table", [
            {
              "o-table-small": props.small,
              "o-table-medium": !props.small
            }
          ]])
        },
        [
          createElementVNode(
            "div",
            {
              class: normalizeClass(["o-table-wrap", boderClass.value])
            },
            [
              createElementVNode("table", null, [
                createElementVNode("colgroup", null, [
                  (openBlock(true), createElementBlock(
                    Fragment,
                    null,
                    renderList(columnData.value, (col) => {
                      return openBlock(), createElementBlock(
                        "col",
                        {
                          key: col.key,
                          style: normalizeStyle(col.style)
                        },
                        null,
                        4
                        /* STYLE */
                      );
                    }),
                    128
                    /* KEYED_FRAGMENT */
                  ))
                ]),
                columnData.value.length > 1 ? (openBlock(), createElementBlock("thead", _hoisted_1, [
                  renderSlot(_ctx.$slots, "header", { columns: columnData.value }, () => [
                    createElementVNode("tr", null, [
                      (openBlock(true), createElementBlock(
                        Fragment,
                        null,
                        renderList(columnData.value, (col, idx) => {
                          return openBlock(), createElementBlock(
                            "th",
                            {
                              key: col.key || idx,
                              class: normalizeClass({ last: idx + 1 === columnData.value.length })
                            },
                            [
                              renderSlot(_ctx.$slots, `th_${col.key}`, { column: col }, () => [
                                createTextVNode(
                                  toDisplayString(col.label),
                                  1
                                  /* TEXT */
                                )
                              ])
                            ],
                            2
                            /* CLASS */
                          );
                        }),
                        128
                        /* KEYED_FRAGMENT */
                      ))
                    ])
                  ])
                ])) : createCommentVNode("v-if", true),
                tableData.value.length > 0 ? (openBlock(), createElementBlock("tbody", _hoisted_2, [
                  renderSlot(_ctx.$slots, "body", { body: tableData.value }, () => [
                    (openBlock(true), createElementBlock(
                      Fragment,
                      null,
                      renderList(tableData.value, (row, rIdx) => {
                        return openBlock(), createElementBlock(
                          "tr",
                          {
                            key: row.key || rIdx,
                            class: normalizeClass({ last: rIdx + 1 === tableData.value.length })
                          },
                          [
                            (openBlock(true), createElementBlock(
                              Fragment,
                              null,
                              renderList(row.data, (col, idx) => {
                                return openBlock(), createElementBlock("td", {
                                  rowspan: col.rowspan,
                                  colspan: col.colspan,
                                  class: normalizeClass({ last: col.last }),
                                  key: col.key || idx
                                }, [
                                  renderSlot(_ctx.$slots, `td_${col.key}`, {
                                    row: props.data ? props.data[rIdx] : {}
                                  }, () => [
                                    createTextVNode(
                                      toDisplayString(col.value),
                                      1
                                      /* TEXT */
                                    )
                                  ])
                                ], 10, _hoisted_3);
                              }),
                              128
                              /* KEYED_FRAGMENT */
                            ))
                          ],
                          2
                          /* CLASS */
                        );
                      }),
                      128
                      /* KEYED_FRAGMENT */
                    ))
                  ])
                ])) : createCommentVNode("v-if", true)
              ]),
              !props.data || props.data.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_4, [
                !props.loading ? renderSlot(_ctx.$slots, "empty", { key: 0 }, () => [
                  createElementVNode(
                    "div",
                    _hoisted_5,
                    toDisplayString(emptyLabel.value),
                    1
                    /* TEXT */
                  )
                ]) : createCommentVNode("v-if", true)
              ])) : createCommentVNode("v-if", true)
            ],
            2
            /* CLASS */
          ),
          props.loading ? (openBlock(), createElementBlock("div", _hoisted_6, [
            renderSlot(_ctx.$slots, "loading", {}, () => [
              createVNode(unref(IconLoading), { class: "o-rotating" }),
              createElementVNode(
                "div",
                _hoisted_7,
                toDisplayString(loadingLabel.value),
                1
                /* TEXT */
              )
            ])
          ])) : createCommentVNode("v-if", true)
        ],
        2
        /* CLASS */
      );
    };
  }
});
export {
  _sfc_main as default
};