@zhsz/cool-design-dv/es/packages/dv-list/List.vue.mjs

import { defineComponent, ref, useAttrs, computed, watch, onMounted, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, createVNode, createElementVNode, Fragment, renderList, renderSlot, createTextVNode, toDisplayString, createCommentVNode, nextTick } from "vue";
import Box from "../dv-box/index.mjs";
import _sfc_main$1 from "./ColGroup.vue.mjs";
import DvMarquee from "../dv-marquee/index.mjs";
import { uid } from "../../utils/util.mjs";
import "./style.css";
const _hoisted_1 = {
  key: 0,
  class: "my-dv-list__body",
  cellspacing: "0",
  cellpadding: "0"
};
const _hoisted_2 = {
  key: 1,
  class: "my-dv-list__empty"
};
const __default__ = defineComponent({
  name: "DvList"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    rows: {
      type: Array,
      default() {
        return [];
      }
    },
    header: {
      type: Boolean,
      default: true
    },
    border: Boolean,
    radius: Boolean,
    background: Boolean,
    scroll: [Boolean, Object],
    customStyle: Object
  },
  setup(__props) {
    const props = __props;
    const marquee = ref();
    const headerHeight = ref(0);
    const headerWidth = ref(0);
    const contentHeight = ref("auto");
    const headerRef = ref();
    const $attrs = useAttrs();
    const _uid = uid();
    const tableColumns = computed(() => {
      return props.columns.map((col) => {
        return typeof col === "object" ? col : { label: col };
      });
    });
    const classes = computed(() => {
      return {
        "is-border": props.border,
        "is-radius": props.radius,
        "is-no-header": !props.header,
        "is-odd": props.rows.length % 2 === 0,
        "is-no-background": !props.background
      };
    });
    const bodyStyle = computed(() => {
      return {
        height: `calc(100% - ${headerHeight.value}px)`,
        ...props.customStyle
      };
    });
    const scrollProps = computed(() => {
      if (typeof props.scroll === "boolean") {
        return {
          disabled: !props.scroll,
          speed: 0.5
        };
      }
      if (typeof props.scroll === "object") {
        return {
          disabled: false,
          speed: 0.5,
          ...props.scroll
        };
      }
      return {
        disabled: true,
        speed: 0.5
      };
    });
    const cellWidth = computed(() => {
      let total = headerWidth.value;
      let count = 0;
      tableColumns.value.forEach((n) => {
        if (n.width || n.minWidth) {
          total -= n.width || n.minWidth || 0;
        } else {
          ++count;
        }
      });
      return count > 0 ? total / count : 0;
    });
    function getRow(row) {
      if (Array.isArray(row)) {
        return row.slice(0, props.columns.length);
      }
      return tableColumns.value.map((col) => row[col.prop]);
    }
    function getSlotName(itemIndex) {
      const col = tableColumns.value[itemIndex];
      return col == null ? void 0 : col.prop;
    }
    function updateHeaderHeight() {
      const rect = headerRef.value.getBoundingClientRect();
      headerHeight.value = rect ? rect.height : 0;
      headerWidth.value = rect ? rect.width : 0;
      if (marquee.value) {
        nextTick(marquee.value.renderCopyHtml);
      }
    }
    function marqueeResize({ height }) {
      if ($attrs.height) {
        contentHeight.value = $attrs.height;
      } else {
        contentHeight.value = height ? `${height}px` : "auto";
      }
    }
    watch(
      () => props.header,
      () => {
        updateHeaderHeight();
      }
    );
    onMounted(() => {
      updateHeaderHeight();
      marqueeResize({});
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(Box), mergeProps({
        class: ["my-dv-list", classes.value],
        "default-height": contentHeight.value
      }, unref($attrs)), {
        default: withCtx(() => [
          __props.header ? (openBlock(), createElementBlock("table", {
            key: 0,
            ref_key: "headerRef",
            ref: headerRef,
            class: "my-dv-list__header",
            cellspacing: "0",
            cellpadding: "0"
          }, [
            createVNode(_sfc_main$1, {
              columns: tableColumns.value,
              "default-width": cellWidth.value
            }, null, 8, ["columns", "default-width"]),
            createElementVNode("thead", null, [
              createElementVNode("tr", null, [
                (openBlock(true), createElementBlock(Fragment, null, renderList(tableColumns.value, (col, index) => {
                  return openBlock(), createElementBlock("th", {
                    key: `tr_${unref(_uid)}_col_${index}`
                  }, [
                    renderSlot(_ctx.$slots, "column", {
                      col,
                      index
                    }, () => [
                      createTextVNode(toDisplayString(col.label), 1)
                    ])
                  ]);
                }), 128))
              ])
            ])
          ], 512)) : createCommentVNode("", true),
          createVNode(unref(DvMarquee), mergeProps({
            class: "my-dv-list__body-wrapper",
            ref_key: "marquee",
            ref: marquee,
            data: __props.rows,
            style: bodyStyle.value,
            onResize: marqueeResize
          }, scrollProps.value), {
            default: withCtx(() => [
              __props.rows.length ? (openBlock(), createElementBlock("table", _hoisted_1, [
                createVNode(_sfc_main$1, {
                  columns: tableColumns.value,
                  "default-width": cellWidth.value
                }, null, 8, ["columns", "default-width"]),
                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.rows, (row, rowIndex) => {
                  return openBlock(), createElementBlock("tr", {
                    key: `row_${rowIndex}`
                  }, [
                    (openBlock(true), createElementBlock(Fragment, null, renderList(getRow(row), (item, itemIndex) => {
                      return openBlock(), createElementBlock("td", {
                        key: `item_${itemIndex}`
                      }, [
                        renderSlot(_ctx.$slots, getSlotName(itemIndex), {
                          row,
                          item,
                          index: itemIndex,
                          rowIndex
                        }, () => [
                          createTextVNode(toDisplayString(item), 1)
                        ])
                      ]);
                    }), 128))
                  ]);
                }), 128))
              ])) : (openBlock(), createElementBlock("div", _hoisted_2, [
                renderSlot(_ctx.$slots, "empty", {}, () => [
                  createTextVNode("暂无数据")
                ])
              ]))
            ]),
            _: 3
          }, 16, ["data", "style"])
        ]),
        _: 3
      }, 16, ["class", "default-height"]);
    };
  }
});
export {
  _sfc_main as default
};