react-vant-nova 1.0.5 → 1.0.7-test

package/lib/table/PropsType.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { BaseTypeProps } from '../utils';
+export interface TableColumn {
+    /** 列标题 */
+    title: React.ReactNode;
+    /** 列数据对应的字段名 */
+    dataIndex: string;
+    /** 列宽度 */
+    width?: string | number;
+    /** 列对齐方式 */
+    align?: 'left' | 'center' | 'right';
+    /** 自定义单元格渲染函数 */
+    render?: (text: any, record: any, index: number) => React.ReactNode;
+    /** 自定义表头渲染函数 */
+    titleRender?: (column: TableColumn) => React.ReactNode;
+}
+export interface TableProps<T = any> extends BaseTypeProps {
+    /** 表格数据 */
+    dataSource: T[];
+    /** 列配置 */
+    columns: TableColumn[];
+    /** 表格行Key的取值字段 */
+    rowKey?: string | ((record: T, index: number) => string);
+    /** 是否显示边框 */
+    bordered?: boolean;
+    /** 是否显示表头 */
+    showHeader?: boolean;
+    /** 空数据时显示的内容 */
+    emptyText?: React.ReactNode;
+    /** 空数据时显示的图片 */
+    emptyImage?: string;
+}

package/lib/table/PropsType.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/table/Table.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TableProps } from './PropsType';
+declare const Table: React.FC<TableProps>;
+export default Table;

package/lib/table/Table.js

@@ -0,0 +1,218 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _tslib() {
+  const data = require("tslib");
+  _tslib = function () {
+    return data;
+  };
+  return data;
+}
+function _jsxRuntime() {
+  const data = require("react/jsx-runtime");
+  _jsxRuntime = function () {
+    return data;
+  };
+  return data;
+}
+function _clsx() {
+  const data = _interopRequireDefault(require("clsx"));
+  _clsx = function () {
+    return data;
+  };
+  return data;
+}
+var _utils = require("../utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const [bem] = (0, _utils.createNamespace)('table');
+const Table = props => {
+  const containerRef = (0, _react().useRef)(null);
+  const [containerWidth, setContainerWidth] = (0, _react().useState)(0);
+  // 监听容器尺寸变化（适配窗口缩放/响应式）
+  (0, _react().useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    // 初始化宽度
+    const updateWidth = () => {
+      setContainerWidth(container.clientWidth);
+    };
+    updateWidth();
+    // 监听窗口缩放
+    const resizeObserver = new ResizeObserver(updateWidth);
+    resizeObserver.observe(container);
+    return () => {
+      resizeObserver.unobserve(container);
+    };
+  }, []);
+  const {
+      className,
+      style,
+      dataSource = [],
+      columns = [],
+      rowKey = 'id',
+      bordered = false,
+      showHeader = true,
+      emptyText = '暂无数据',
+      emptyImage
+    } = props,
+    restProps = (0, _tslib().__rest)(props
+    // 检查是否有列设置了宽度
+    , ["className", "style", "dataSource", "columns", "rowKey", "bordered", "showHeader", "emptyText", "emptyImage"]);
+  // 检查是否有列设置了宽度
+  const hasColumnWithWidth = (0, _react().useMemo)(() => {
+    return columns.some(col => col.width);
+  }, [columns]);
+  // 核心：计算每列的最终宽度
+  const columnStyles = (0, _react().useMemo)(() => {
+    if (!hasColumnWithWidth) return columns.map(() => ({
+      width: '0px'
+    }));
+    if (containerWidth === 0) return columns.map(() => ({
+      width: '0px'
+    }));
+    let fixedWidthTotal = 0; // 已配置列宽总和（像素）
+    const flexibleColumns = []; // 未配置宽度的列索引
+    const finalWidths = [];
+    // 第一步：解析用户配置的宽度（转像素）
+    columns.forEach((col, index) => {
+      if (col.width) {
+        let widthPx = 0;
+        const width = col.width.toString();
+        // 处理百分比宽度：容器宽度 × 百分比
+        if (width.endsWith('%')) {
+          const percent = parseFloat(width) / 100;
+          widthPx = containerWidth * percent;
+        }
+        // 处理像素宽度：数字/px字符串
+        else if (width.endsWith('px')) {
+          widthPx = parseFloat(width);
+        }
+        // 纯数字（默认px）
+        else {
+          widthPx = parseFloat(width);
+        }
+        fixedWidthTotal += widthPx;
+        finalWidths.push(widthPx);
+      } else {
+        // 未配置宽度的列，先占位，后续均分
+        flexibleColumns.push(index);
+        finalWidths.push(0);
+      }
+    });
+    // 第二步：给未配置宽度的列均分剩余宽度
+    const flexCount = flexibleColumns.length;
+    if (flexCount > 0) {
+      // 剩余宽度 = 容器宽度 - 已配置宽度总和（最小为0）
+      const remainingWidth = Math.max(0, containerWidth - fixedWidthTotal);
+      const flexWidthPerCol = remainingWidth / flexCount;
+      // 赋值给未配置宽度的列
+      flexibleColumns.forEach(index => {
+        finalWidths[index] = flexWidthPerCol > 70 ? flexWidthPerCol : 70;
+      });
+    }
+    // 转成样式对象（px）
+    return finalWidths.map(width => ({
+      width: `${width}px`,
+      minWidth: `${width}px` // 关键：防止列宽被压缩
+    }));
+  }, [columns, containerWidth]);
+  // 获取行的key值
+  const getRowKey = (record, index) => {
+    if (typeof rowKey === 'function') {
+      return rowKey(record, index);
+    }
+    return String(record[rowKey] || index);
+  };
+  // 渲染表头
+  const renderHeader = () => {
+    if (!showHeader) return null;
+    return (0, _jsxRuntime().jsx)("thead", Object.assign({
+      className: (0, _clsx().default)(bem('header'))
+    }, {
+      children: (0, _jsxRuntime().jsx)("tr", {
+        children: columns.map((column, index) =>
+        // 渲染表头时
+        (0, _jsxRuntime().jsx)("th", Object.assign({
+          className: (0, _clsx().default)(bem('header-cell')),
+          style: Object.assign(Object.assign({}, columnStyles[index]), {
+            textAlign: column.align || 'left'
+          })
+        }, {
+          children: column.titleRender ? column.titleRender(column) : column.title
+        }), column.dataIndex || index))
+      })
+    }));
+  };
+  // 渲染表格内容
+  const renderBody = () => {
+    if (dataSource.length === 0) {
+      return (0, _jsxRuntime().jsx)("tbody", Object.assign({
+        className: (0, _clsx().default)(bem('body'))
+      }, {
+        children: (0, _jsxRuntime().jsx)("tr", {
+          children: (0, _jsxRuntime().jsxs)("td", Object.assign({
+            colSpan: columns.length,
+            className: (0, _clsx().default)(bem('empty-cell'))
+          }, {
+            children: [(0, _jsxRuntime().jsx)("div", Object.assign({
+              className: (0, _clsx().default)(bem('empty-image'))
+            }, {
+              children: emptyImage && (0, _jsxRuntime().jsx)("img", {
+                src: emptyImage
+              })
+            })), (0, _jsxRuntime().jsx)("div", {
+              children: emptyText
+            })]
+          }))
+        })
+      }));
+    }
+    return (0, _jsxRuntime().jsx)("tbody", Object.assign({
+      className: (0, _clsx().default)(bem('body'))
+    }, {
+      children: dataSource.map((record, rowIndex) => (0, _jsxRuntime().jsx)("tr", Object.assign({
+        className: (0, _clsx().default)(bem('row'))
+      }, {
+        children: columns.map((column, colIndex) => {
+          const text = record[column.dataIndex];
+          return (0, _jsxRuntime().jsx)("td", Object.assign({
+            className: (0, _clsx().default)(bem('cell')),
+            style: Object.assign(Object.assign({}, columnStyles[colIndex]), {
+              textAlign: column.align || 'left'
+            })
+          }, {
+            children: column.render ? column.render(text, record, rowIndex) : text
+          }), column.dataIndex || colIndex);
+        })
+      }), getRowKey(record, rowIndex)))
+    }));
+  };
+  const classes = (0, _clsx().default)(className, bem([{
+    bordered
+  }]));
+  return (0, _jsxRuntime().jsx)("div", Object.assign({
+    className: (0, _clsx().default)(bem('wrapper')),
+    ref: containerRef
+  }, {
+    children: (0, _jsxRuntime().jsxs)("table", Object.assign({
+      className: classes,
+      style: Object.assign(Object.assign({}, style), !hasColumnWithWidth && {
+        tableLayout: 'auto'
+      })
+    }, restProps, {
+      children: [renderHeader(), renderBody()]
+    }))
+  }));
+};
+var _default = exports.default = Table;

package/lib/table/index.d.ts

@@ -0,0 +1,5 @@
+import './style/index.less';
+import Table from './Table';
+export default Table;
+export { Table };
+export type { TableProps, TableColumn } from './PropsType';

package/lib/table/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function () {
+    return _Table.default;
+  }
+});
+exports.default = void 0;
+require("./style/index.css");
+var _Table = _interopRequireDefault(require("./Table"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Table.default;

package/lib/table/style/index.css

@@ -0,0 +1,74 @@
+.rv-table__wrapper {
+  overflow-x: auto;
+  width: 100%;
+  position: relative;
+  scrollbar-width: thin;
+  scrollbar-color: #e5e7eb #f9fafb;
+}
+.rv-table {
+  width: 100%;
+  table-layout: fixed;
+  /* 添加这一行 */
+  border-spacing: 0;
+  font-size: 14px;
+  color: var(--rv-gray-8);
+  min-width: fit-content;
+  word-break: break-word;
+  /* 关键！列宽总和超容器时，表格宽度自适应，触发滚动 */
+  border-collapse: collapse;
+  /* 合并边框，避免间隙 */
+}
+.rv-table--bordered {
+  border: 1px solid var(--rv-gray-3);
+}
+.rv-table__header {
+  background-color: #fafafa;
+}
+.rv-table__header-cell {
+  padding: 8px 12px;
+  text-align: left;
+  font-weight: 500;
+  border-bottom: 1px solid var(--rv-gray-3);
+}
+.rv-table__row:last-child .rv-table__cell {
+  border-bottom: none;
+}
+.rv-table__cell {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--rv-gray-3);
+}
+.rv-table__empty-cell {
+  padding: 24px;
+  text-align: center;
+  color: #969799;
+}
+.rv-table--bordered .rv-table__header-cell,
+.rv-table--bordered .rv-table__cell {
+  border-right: 1px solid var(--rv-gray-3);
+  box-sizing: border-box;
+}
+.rv-table--bordered .rv-table__header-cell:last-child,
+.rv-table--bordered .rv-table__cell:last-child {
+  border-right: none;
+}
+.rv-table--bordered .rv-table__empty-cell {
+  border-right: 1px solid var(--rv-gray-3);
+}
+.rv-table--bordered .rv-table__empty-cell:last-child {
+  border-right: none;
+}
+.rv-table__empty-cell {
+  padding: 48px 24px;
+  text-align: center;
+  color: #969799;
+  background-color: #fff;
+}
+.rv-table__empty-image {
+  margin: 0 auto 12px;
+  width: 90px;
+  height: 90px;
+}
+.rv-table__empty-image img {
+  width: 100%;
+  height: 100%;
+}

package/lib/toast/Toast.js

@@ -82,6 +82,7 @@ const Toast = p => {
       });
     }
     if (type === 'loading') {
+      // @ts-ignore
       return (0, _jsxRuntime().jsx)(_loading.default, {
         className: (0, _clsx().default)(bem('loading')),
         type: loadingType
@@ -90,36 +91,42 @@ const Toast = p => {
     return null;
   };
   const renderMessage = () => {
-    const {
-      message
-    } = props;
-    if ((0, _utils.isDef)(message) && message !== '') {
-      return (0, _jsxRuntime().jsx)("div", Object.assign({
-        className: (0, _clsx().default)(bem('info'))
-      }, {
-        children: message
-      }));
-    }
-    return null;
+    // 调试用加延时
+    setTimeout(() => {
+      const {
+        message
+      } = props;
+      if ((0, _utils.isDef)(message) && message !== '') {
+        return (0, _jsxRuntime().jsx)("div", Object.assign({
+          className: (0, _clsx().default)(bem('info'))
+        }, {
+          children: message
+        }));
+      }
+      return null;
+    }, 100);
   };
-  return (0, _jsxRuntime().jsxs)(_popup.default, Object.assign({
-    className: (0, _clsx().default)([bem([props.position, {
-      [props.type]: !props.icon
-    }]), props.className]),
-    visible: props.visible,
-    overlay: props.overlay,
-    transition: props.transition,
-    overlayClass: props.overlayClass,
-    overlayStyle: props.overlayStyle,
-    closeOnClickOverlay: props.closeOnClickOverlay,
-    lockScroll: false,
-    onClick: onClick,
-    onClose: props.onClose,
-    onClosed: props.onClosed,
-    onOpened: props.onOpened,
-    teleport: props.teleport
-  }, {
-    children: [renderIcon(), renderMessage()]
-  }));
+  return (
+    // @ts-ignore
+    (0, _jsxRuntime().jsxs)(_popup.default, Object.assign({
+      className: (0, _clsx().default)([bem([props.position, {
+        [props.type]: !props.icon
+      }]), props.className]),
+      visible: props.visible,
+      overlay: props.overlay,
+      transition: props.transition,
+      overlayClass: props.overlayClass,
+      overlayStyle: props.overlayStyle,
+      closeOnClickOverlay: props.closeOnClickOverlay,
+      lockScroll: false,
+      onClick: onClick,
+      onClose: props.onClose,
+      onClosed: props.onClosed,
+      onOpened: props.onOpened,
+      teleport: props.teleport
+    }, {
+      children: [renderIcon(), renderMessage()]
+    }))
+  );
 };
 var _default = exports.default = Toast;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-vant-nova",
-  "version": "1.0.5",
-  "description": "基于 Vant UI 迭代维护的 React 移动端 UI 组件库（兼容 React 19+）",
+  "version": "1.0.7test",
+  "description": "React Mobile UI Components based on Vant UI (兼容 React 19+,新增轻量 Table 组件)",
   "keywords": [
     "ui",
     "react",
@@ -16,12 +16,12 @@
   "homepage": "https://react-vant.fenewbee.com/",
   "repository": {
     "type": "git",
-    "url": "暂无git地址，如有问题请联系作者wx: wpp_rvn",
+    "url": "https://github.com/prayone/react-vant-nova",
     "branch": "main",
     "package": "./packages/react-vant"
   },
   "license": "MIT",
-  "author": "ping97274@gmail.com",
+  "author": "wx: wpp_rvn",
   "sideEffects": [
     "**/*.css",
     "**/*.less",