@cloudbase/weda-ui 3.5.2 → 3.6.0

package/dist/web/components/wd-table/wd-table.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable max-lines */
-import { useRef, useEffect, useState, useMemo, useImperativeHandle, forwardRef, memo, } from 'react';
+import { useRef, useEffect, useState, useMemo, forwardRef, memo, } from 'react';
 import { ConfigProvider } from 'tea-component';
 import { Table, ExportFileModal, ImportFileModal, InOrOutRecordModal, deleteRecord, importHandleByApi, exportHandleByApi, exportHandle, FilterFieldsPanel, ToolBar, } from './components';
 import classNames from '../../utils/classnames';
 import { useConfig } from '../../utils/config-context';
 import { DataSource } from '../../utils/datasource';
-import { CELL_CUSTOM_OPTION } from '../../utils/constant';
+import { CELL_CUSTOM_OPTION, emptyArray } from '../../utils/constant';
 import { useEnumContext } from '../../utils/hooks/context';
 import { EnumHoc } from '../../utils/hooks/EnumHoc';
 import { usePlatform, isInIde } from '../../utils/platform';
@@ -22,16 +22,14 @@ import { Mock } from './mock';
 import { getTableColumns, slotRender, mapColumKey, } from './components/FieldRender';
 import Modal from '../modal';
 import { WdButton } from '../wd-button';
+import { useSetWidgetApi } from '../../utils/widget-api/use-set-widget-api';
 import '../style';
+import './utils/style';
 export const _defaultPageIndex = 1;
 export const _defaultPageSize = 10;
-export const TableOption = memo(function TableOption({ slots, ...props }) {
-    const component = useMemo(() => {
-        // 计算单元格的值
-        return slotRender(slots[CELL_CUSTOM_OPTION], props);
-    }, [props, slots]);
-    return component;
-});
+export const TableOption = function TableOption({ slots, ...props }) {
+    return slotRender(slots[CELL_CUSTOM_OPTION], props);
+};
 export const GlobalButton = memo(function GlobalButtonDom({ classPrefix, slots, }) {
     return _jsx("div", { className: `${classPrefix}-global-btn`, children: slotRender(slots) });
 });
@@ -58,8 +56,9 @@ export const WdTable = forwardRef(function TableComp(tableProps, ref) {
     fixedFront = '', // 冻结首列至本列
     fixedEnd = '', // 冻结本列至尾列
     enableCellCustomOption, // 是否显示插槽操作列
+    customOptionTitle = '操作', // 操作列标题
     enableGlobalButton, // 是否显示插槽全局按钮
-    enablePagination = true, columnSelectType = 'select', defaultPageIndex = _defaultPageIndex, defaultPageSize = _defaultPageSize, 
+    enablePagination = true, columnSelectType = 'select', defaultPageIndex = _defaultPageIndex, defaultPageSize = _defaultPageSize, loading: exprLoading = false, 
     // 以下为非标准属性，config中没有
     // isOrderBy, // API是否支持排序(旧的表格有该属性)
     isMock = false, //是否mock数据
@@ -68,7 +67,13 @@ export const WdTable = forwardRef(function TableComp(tableProps, ref) {
     total: _total, // 表格总条数
     enableTotal = false, //是否开启动态分页
     supportManyRelated, // 支持新版数据源关联查询
-    ...props } = tableProps;
+    selectFieldType = 'table', // 查询字段范围类型
+    selectFields = emptyArray, // 查询字段范围自定义
+    isSuspendHeader = true, //是否开启表头在页面顶部悬停
+    isSuspendFooter = true, // 是否分页器在页面底部悬停
+    isSupportMultipleSort = false, // 是否支持多字段排序
+    sorter, // 排序规则
+    __innerSlot, ...props } = tableProps;
     const wList = convertWhere(props, supportManyRelated); // 查询参数
     const { classPrefix } = useConfig();
     const platform = usePlatform();
@@ -104,6 +109,8 @@ export const WdTable = forwardRef(function TableComp(tableProps, ref) {
     // wrap类名
     const wrapClassList = {
         [`${classPrefix}-table-wrap`]: true,
+        'is-suspend-header': isSuspendHeader,
+        'is-suspend-footer': isSuspendFooter,
         [`${classPrefix}-${platform}-table-wrap`]: true,
         // 响应式css api
         [`${classPrefix}-${platform}-table`]: true,
@@ -136,16 +143,32 @@ export const WdTable = forwardRef(function TableComp(tableProps, ref) {
     let initPageSize = isModel || isExpression ? defaultPageSize : connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageSize;
     initPageIndex = parseInt(initPageIndex);
     initPageSize = parseInt(initPageSize);
+    // 排序规则
+    const _sort = useMemo(() => {
+        var _a;
+        return ((_a = sorter === null || sorter === void 0 ? void 0 : sorter.filter((n) => n.orderBy && n.orderType)) === null || _a === void 0 ? void 0 : _a.map((i) => ({ by: i.orderBy, order: i.orderType }))) || [];
+    }, [sorter]);
     const [queryParams, setQueryParams] = useState({
         pageIndex: initPageIndex,
         pageSize: initPageSize,
-        sort: [],
+        sort: _sort,
         searchValues: [],
         orderBy,
         orderType,
     });
+    const columnSetsKey = columnSets === null || columnSets === void 0 ? void 0 : columnSets.map((i) => i.key);
     // 过滤权限字段
-    const { authFields, fieldsLoading, isError: fieldsError, } = useAuthFields(dbName, dbFieldNames, isNewData, isModel, connectorMethod, isNoDataSourceBind, isExpression, isApis);
+    const { authFields, fieldsLoading, isError: fieldsError, } = useAuthFields({
+        dbName,
+        dbFieldNames,
+        isNewData,
+        isModel,
+        connectorMethod,
+        isNoDataSourceBind,
+        isExpression,
+        isApis,
+        columnSetsKey,
+    });
     // 视图
     const { viewFieldsData, viewFields, viewLoading } = useViewFields({
         selectedView,
@@ -165,6 +188,11 @@ export const WdTable = forwardRef(function TableComp(tableProps, ref) {
     }
     // 筛选字段
     const filterFieldsData = getFilterFields(filterFields, fields);
+    const [filterConfig, setFilterConfig] = useState(() => {
+        return filterFieldsData.map((i) => (i === null || i === void 0 ? void 0 : i.filterConfig) || { name: i.name, label: i.title });
+    });
+    // 重置筛选器方法
+    const filterMethodsRef = useRef({});
     // 可排序字段
     const sortColumns = getSortColumns({ fields, columnSets });
     // 表格 columns
@@ -193,7 +221,7 @@ export const WdTable = forwardRef(function TableComp(tableProps, ref) {
             // 展示插槽操作列
             baseColumns.push({
                 key: 'button',
-                header: '操作',
+                header: customOptionTitle,
                 width: 150,
                 align: 'left',
                 fixed: 'right',
@@ -236,6 +264,7 @@ export const WdTable = forwardRef(function TableComp(tableProps, ref) {
         fixedEnd,
         isH5,
         enableCellCustomOption,
+        customOptionTitle,
         columnSelectType,
         classPrefix,
         supportManyRelated,
@@ -259,6 +288,9 @@ export const WdTable = forwardRef(function TableComp(tableProps, ref) {
         columns,
         authFields,
         supportManyRelated,
+        selectFieldType,
+        selectFields,
+        isSupportMultipleSort,
     });
     // 查询数据
     const { tableData, tableTotal, tableLoading, getNewList, isError, errorObj, emptyTable, } = useTableData({
@@ -283,9 +315,12 @@ export const WdTable = forwardRef(function TableComp(tableProps, ref) {
             setQueryParams((queryParams) => ({ ...queryParams, pageIndex: 1 }));
         }
     };
-    // 1.绑定数据源时请求返回的联合加载状态2.绑定表达式时，无加载状态
+    // 1.绑定数据源时请求返回的联合加载状态；2.绑定表达式时，加载状态由外部loading属性控制
     const getLoadingStatus = () => {
-        if (isExpression || isNoDataSourceBind) {
+        if (isExpression) {
+            return exprLoading;
+        }
+        if (isNoDataSourceBind) {
             return false;
         }
         if (isModel) {
@@ -301,6 +336,8 @@ export const WdTable = forwardRef(function TableComp(tableProps, ref) {
         }
         // 绑定表达式则直接返回表达式的值
         if (isExpression) {
+            if (exprLoading)
+                return [];
             return Array.isArray(dataSourceData) ? dataSourceData : [];
         }
         // 加载过程中,pc端每次查询置空,h5端仅首页置空
@@ -344,7 +381,7 @@ export const WdTable = forwardRef(function TableComp(tableProps, ref) {
         refreshTable();
     };
     // 事件属性
-    useImperativeHandle(ref, () => ({
+    useSetWidgetApi(() => ({
         deleteOne: async (params) => {
             const selectedKeys = [];
             const { id } = params;
@@ -495,6 +532,20 @@ export const WdTable = forwardRef(function TableComp(tableProps, ref) {
                 });
             }
         },
+        // 重置筛选器，仅数据模型有筛选器
+        resetFilter: () => {
+            const { isSupport, message } = checkSupport(dataSourceType, 'resetFilter');
+            if (isSupport) {
+                if (typeof filterMethodsRef.current.resetFilter === 'function') {
+                    filterMethodsRef.current.resetFilter();
+                }
+            }
+            else {
+                throw new WdCompError(`${message}` || '', {
+                    code: 'WdTable.ResetFilter',
+                });
+            }
+        },
         // 当前页数据
         records: dataRef.current.tableRecords,
         // 当前总数
@@ -514,6 +565,7 @@ export const WdTable = forwardRef(function TableComp(tableProps, ref) {
             : [{ orderBy: query.orderBy, orderType: query.orderType }],
         filter: supportManyRelated ? query.filter : query === null || query === void 0 ? void 0 : query.where,
         dataSourceVersion: supportManyRelated ? 'v2' : 'v1',
+        filterConfig,
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
@@ -539,7 +591,8 @@ export const WdTable = forwardRef(function TableComp(tableProps, ref) {
         query === null || query === void 0 ? void 0 : query.where,
         query === null || query === void 0 ? void 0 : query.filter,
         supportManyRelated,
-    ]);
+        filterConfig,
+    ], ref);
     // 表格更改上下文数据
     // 移动端和自定义APIs场景不支持导入功能，监听变化存到表格上下文中
     useEffect(() => {
@@ -576,6 +629,7 @@ export const WdTable = forwardRef(function TableComp(tableProps, ref) {
                 pageSize: defaultPageSize,
                 orderBy: orderBy,
                 orderType: orderType,
+                sort: _sort,
             }));
         }
         else {
@@ -598,6 +652,7 @@ export const WdTable = forwardRef(function TableComp(tableProps, ref) {
         connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.orderBy,
         connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.orderType,
         isExpression,
+        _sort,
     ]);
     useEffect(() => {
         if (isH5) {
@@ -630,7 +685,11 @@ export const WdTable = forwardRef(function TableComp(tableProps, ref) {
         });
     };
     // 选择事件
-    const onSelectChange = (keys, context) => {
+    const onSelectChange = (keys, context, empty = false) => {
+        if (empty) {
+            setSelectedKeys([]);
+            return;
+        }
         setSelectedKeys([].concat(keys));
         const selectValue = columnSelectType === 'radio' ? context === null || context === void 0 ? void 0 : context.record : context === null || context === void 0 ? void 0 : context.selectedRecords;
         const data = [].concat(selectValue);
@@ -645,7 +704,17 @@ export const WdTable = forwardRef(function TableComp(tableProps, ref) {
     };
     // 查询参数改变
     const onQueryChange = (query) => {
-        setQueryParams((queryParams) => ({ ...queryParams, ...query }));
+        setQueryParams((queryParams) => {
+            var _a, _b;
+            const queryParamsRes = { ...queryParams, ...query };
+            //  v2协议支持多字段排序，默认排序规则(_sort)始终存在，运行态排序规则(query.sort)优先级最底
+            //  数组下标越小优先级越高
+            if (isSupportMultipleSort && (query === null || query === void 0 ? void 0 : query.sort) && (_sort === null || _sort === void 0 ? void 0 : _sort.length)) {
+                queryParamsRes.sort =
+                    ((_b = (_a = _sort === null || _sort === void 0 ? void 0 : _sort.filter((i) => { var _a, _b; return i.by !== ((_b = (_a = query.sort) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.by); })) === null || _a === void 0 ? void 0 : _a.concat(query.sort)) === null || _b === void 0 ? void 0 : _b.filter((n) => n.by && n.order)) || [];
+            }
+            return queryParamsRes;
+        });
     };
     // 点击刷新按钮
     const onRefreshBtnClick = () => {
@@ -669,7 +738,7 @@ export const WdTable = forwardRef(function TableComp(tableProps, ref) {
     };
     const errorStatus = isError || fieldsError;
     const errorMsg = isError ? errorObj : fieldsError;
-    return (_jsx(ConfigProvider, { classPrefix: classPrefix, children: _jsx(EnumHoc, { fields: authFields, children: _jsxs("div", { className: classNames(wrapClassList, className), style: style, id: id, children: [hasFilterButton && (_jsx(FilterFieldsPanel, { openMobileFilter: openMobileFilter, setOpenMobileFilter: setOpenMobileFilter, filterFields: filterFieldsData, fetchData: onFilterChange })), _jsxs("div", { className: `${classPrefix}-table-container`, children: [!isH5 && !isNoDataSourceBind && (_jsxs("div", { className: `${classPrefix}-table-wrap-toolbar`, children: [enableGlobalButton && (_jsx("div", { className: `${classPrefix}-table-wrap-toolbar__col ${classPrefix}-table-wrap-toolbar__col-start`, children: _jsx(GlobalButton, { classPrefix: classPrefix, slots: slots === null || slots === void 0 ? void 0 : slots.globalButton }) })), (enableRefreshBtn || enableTableHeightSizeBtn) && (_jsx("div", { className: `${classPrefix}-table-wrap-toolbar__col ${classPrefix}-table-wrap-toolbar__col-end`, children: _jsx(ToolBar, { hasFilterButton: hasFilterButton, total: total, refreshTable: onRefreshBtnClick, setTableHightSize: setTableHightSize, currentSize: tableHightSize, setOpenMobileFilter: () => {
+    return (_jsx(ConfigProvider, { classPrefix: classPrefix, children: _jsx(EnumHoc, { fields: authFields, children: _jsxs("div", { className: classNames(wrapClassList, className), style: style, id: id, children: [hasFilterButton && (_jsx(FilterFieldsPanel, { ref: filterMethodsRef, openMobileFilter: openMobileFilter, setOpenMobileFilter: setOpenMobileFilter, filterFields: filterFieldsData, fetchData: onFilterChange, setFilterConfig: setFilterConfig })), _jsxs("div", { className: `${classPrefix}-table-container`, children: [!isH5 && !isNoDataSourceBind && (_jsxs("div", { className: `${classPrefix}-table-wrap-toolbar`, children: [enableGlobalButton && (_jsx("div", { className: `${classPrefix}-table-wrap-toolbar__col ${classPrefix}-table-wrap-toolbar__col-start`, children: _jsx(GlobalButton, { classPrefix: classPrefix, slots: slots === null || slots === void 0 ? void 0 : slots.globalButton }) })), (enableRefreshBtn || enableTableHeightSizeBtn) && (_jsx("div", { className: `${classPrefix}-table-wrap-toolbar__col ${classPrefix}-table-wrap-toolbar__col-end`, children: _jsx(ToolBar, { hasFilterButton: hasFilterButton, total: total, refreshTable: onRefreshBtnClick, setTableHightSize: setTableHightSize, currentSize: tableHightSize, setOpenMobileFilter: () => {
                                                 setOpenMobileFilter(true);
                                             }, enableRefreshBtn: enableRefreshBtn, enableTableHeightSizeBtn: enableTableHeightSizeBtn, enablePagination: enablePagination }) }))] })), isH5 &&
                                 (enablePagination ||
@@ -677,7 +746,7 @@ export const WdTable = forwardRef(function TableComp(tableProps, ref) {
                                     enableTableHeightSizeBtn ||
                                     hasFilterButton) && (_jsx(ToolBar, { hasFilterButton: hasFilterButton, total: total, refreshTable: onRefreshBtnClick, setTableHightSize: setTableHightSize, currentSize: tableHightSize, setOpenMobileFilter: () => {
                                     setOpenMobileFilter(true);
-                                }, enableRefreshBtn: enableRefreshBtn, enableTableHeightSizeBtn: enableTableHeightSizeBtn, enablePagination: enablePagination })), _jsx(Table, { events: events, emptyText: emptyText, isH5: isH5, isNoDataSourceBind: isNoDataSourceBind, className: tableClassList, recordKey: recordKey, currentSize: tableHightSize, defaultPageIndex: defaultPageIndex, defaultPageSize: defaultPageSize, sortColumns: sortColumns, enablePagination: !isH5 && enablePagination, columnSelectType: columnSelectType, columns: columns, setColumns: setColumns, records: tableRecords, sort: queryParams.sort, selectedKeys: selectedKeys, onSelectChange: onSelectChange, isLoading: isTableLoading, rowColor: rowColor, queryParams: queryParams, total: total, onQueryChange: onQueryChange, rowClick: rowClick, isError: errorStatus, errorObj: errorMsg }), isH5 && enableGlobalButton && !isNoDataSourceBind && (_jsx("div", { className: `${classPrefix}-h5-table-wrap-footer`, children: _jsx(GlobalButton, { classPrefix: classPrefix, slots: slots === null || slots === void 0 ? void 0 : slots.globalButton }) }))] }), _jsx(ImportFileModal, { dbName: dbName, datasourceTitle: datasourceTitle, fields: fields, setIsImportFileModalByApiVisible: setIsImportFileModalByApiVisible, isImportFileModalByApiVisible: isImportFileModalByApiVisible, setIsInOrOutRecordModalVisible: setIsInOrOutRecordModalVisible, refresh: refreshTable, supportManyRelated: supportManyRelated }), _jsx(ExportFileModal, { whereList: wList, fields: fields, columns: mapColumKey(columns), isExportFileModalByApiVisible: isExportFileModalByApiVisible, selectedKeys: selectedKeys, dbName: dbName, query: query, setIsExportFileModalByApiVisible: setIsExportFileModalByApiVisible, setIsInOrOutRecordModalVisible: setIsInOrOutRecordModalVisible, supportManyRelated: supportManyRelated }), _jsx(InOrOutRecordModal, { dbName: dbName, isInOrOutRecordModalVisible: isInOrOutRecordModalVisible, setIsImportFileModalByApiVisible: setIsImportFileModalByApiVisible, setIsExportFileModalByApiVisible: setIsExportFileModalByApiVisible, setIsInOrOutRecordModalVisible: setIsInOrOutRecordModalVisible }), isH5 && (_jsx(Modal, { overlayClassName: `${classPrefix}-h5-table-overlay`, className: `${classPrefix}-h5-table-option-modal-wrap`, disableCloseIcon: true, title: "\u64CD\u4F5C", visible: isMobileOptionVisible, outerRef: modalRef, events: {
+                                }, enableRefreshBtn: enableRefreshBtn, enableTableHeightSizeBtn: enableTableHeightSizeBtn, enablePagination: enablePagination })), _jsx(Table, { events: events, emptyText: emptyText, isH5: isH5, isNoDataSourceBind: isNoDataSourceBind, className: tableClassList, recordKey: recordKey, currentSize: tableHightSize, defaultPageIndex: defaultPageIndex, defaultPageSize: defaultPageSize, sortColumns: sortColumns, enablePagination: !isH5 && enablePagination, columnSelectType: columnSelectType, columns: columns, setColumns: setColumns, records: tableRecords, sort: queryParams.sort, selectedKeys: selectedKeys, onSelectChange: onSelectChange, isLoading: isTableLoading, rowColor: rowColor, queryParams: queryParams, total: total, onQueryChange: onQueryChange, rowClick: rowClick, isError: errorStatus, errorObj: errorMsg, __innerSlot: __innerSlot }), isH5 && enableGlobalButton && !isNoDataSourceBind && (_jsx("div", { className: `${classPrefix}-h5-table-wrap-footer`, children: _jsx(GlobalButton, { classPrefix: classPrefix, slots: slots === null || slots === void 0 ? void 0 : slots.globalButton }) }))] }), _jsx(ImportFileModal, { columnSets: columnSets, dbName: dbName, datasourceTitle: datasourceTitle, fields: fields, setIsImportFileModalByApiVisible: setIsImportFileModalByApiVisible, isImportFileModalByApiVisible: isImportFileModalByApiVisible, setIsInOrOutRecordModalVisible: setIsInOrOutRecordModalVisible, refresh: refreshTable, supportManyRelated: supportManyRelated }), _jsx(ExportFileModal, { whereList: wList, fields: fields, columns: mapColumKey(columns), isExportFileModalByApiVisible: isExportFileModalByApiVisible, selectedKeys: selectedKeys, dbName: dbName, query: query, setIsExportFileModalByApiVisible: setIsExportFileModalByApiVisible, setIsInOrOutRecordModalVisible: setIsInOrOutRecordModalVisible, supportManyRelated: supportManyRelated }), _jsx(InOrOutRecordModal, { dbName: dbName, isInOrOutRecordModalVisible: isInOrOutRecordModalVisible, setIsImportFileModalByApiVisible: setIsImportFileModalByApiVisible, setIsExportFileModalByApiVisible: setIsExportFileModalByApiVisible, setIsInOrOutRecordModalVisible: setIsInOrOutRecordModalVisible }), isH5 && (_jsx(Modal, { overlayClassName: `${classPrefix}-h5-table-overlay`, className: `${classPrefix}-h5-table-option-modal-wrap`, disableCloseIcon: true, title: "\u64CD\u4F5C", visible: isMobileOptionVisible, outerRef: modalRef, events: {
                             close: () => {
                                 setIsMobileOptionVisible(false);
                             },

package/dist/web/components/wd-tabs/index.d.ts

@@ -0,0 +1,3 @@
+import { WdTabs } from './tabs';
+export { WdTabs, type WdTabsProps } from './tabs';
+export default WdTabs;

package/dist/web/components/wd-tabs/index.js

@@ -0,0 +1,3 @@
+import { WdTabs } from './tabs';
+export { WdTabs } from './tabs';
+export default WdTabs;

package/dist/web/components/wd-tabs/tabs-h5.d.ts

@@ -0,0 +1,2 @@
+import { WdTabsProps } from './tabs';
+export declare const WdTabsH5: ({ isMultipleSlot, tabsDatas, selectedIndex, ...restProps }: WdTabsProps) => JSX.Element;

package/dist/web/components/wd-tabs/tabs-h5.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { useConfig } from '../../utils/config-context';
+import { usePlatform } from '../../utils/platform';
+import WdIcon from '../wd-icon';
+import { useSyncedRef } from '@react-hookz/web';
+export const WdTabsH5 = ({ isMultipleSlot, tabsDatas, selectedIndex, ...restProps }) => {
+    const { classPrefix } = useConfig();
+    const $node = useSyncedRef(restProps.$node);
+    // 展示遮罩
+    const [showMask, setShowMask] = useState(true);
+    const [itemOffset, setItemOffset] = useState(0);
+    const [itemOffsetData, setItemOffsetData] = useState(new Map());
+    const [selectedTab, setSelectedTab] = useState(selectedIndex);
+    const navWrapRef = useRef();
+    const platform = usePlatform();
+    // 导航移动逻辑
+    const getMenuOffset = useCallback(() => {
+        var _a, _b, _c;
+        const parentWidth = (_b = (_a = navWrapRef === null || navWrapRef === void 0 ? void 0 : navWrapRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.clientWidth;
+        const menuItem = (_c = navWrapRef === null || navWrapRef === void 0 ? void 0 : navWrapRef.current) === null || _c === void 0 ? void 0 : _c.children;
+        const data = { 0: 0, 1: 0 };
+        const itemData = new Map();
+        itemData.set(0, { offset: 0, clientWidth: 0 });
+        let index = 1;
+        let itemIndex = 1;
+        for (const i of menuItem) {
+            if (data[index] + (i === null || i === void 0 ? void 0 : i.clientWidth) > parentWidth) {
+                index = index + Number('1');
+                data[index] = i === null || i === void 0 ? void 0 : i.clientWidth;
+            }
+            else {
+                data[index] += i === null || i === void 0 ? void 0 : i.clientWidth;
+            }
+            itemData.set(itemIndex, {
+                offset: itemData.get(itemIndex - Number('1'))['offset'] +
+                    itemData.get(itemIndex - Number('1'))['clientWidth'],
+                clientWidth: i === null || i === void 0 ? void 0 : i.clientWidth,
+            });
+            itemIndex = itemIndex + Number('1');
+        }
+        const showMask = itemData.get(menuItem.length)['offset'] +
+            itemData.get(menuItem.length)['clientWidth'] >
+            parentWidth;
+        setShowMask(showMask);
+        setItemOffsetData(itemData);
+    }, [navWrapRef]);
+    useEffect(() => {
+        var _a;
+        if ((_a = navWrapRef === null || navWrapRef === void 0 ? void 0 : navWrapRef.current) === null || _a === void 0 ? void 0 : _a.children) {
+            getMenuOffset();
+        }
+    }, [platform, navWrapRef, getMenuOffset, tabsDatas]);
+    useEffect(() => {
+        setSelectedTab(selectedIndex);
+    }, [selectedIndex]);
+    // 渲染菜单
+    const RenderTabItem = (index, item) => {
+        return (_jsxs("div", { className: `${classPrefix}-tabs__item ${(item === null || item === void 0 ? void 0 : item.selected) ? 'is-selected' : ''} ${(item === null || item === void 0 ? void 0 : item.isDisabled) ? 'is-disabled' : ''}`, onClick: () => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+                if (!(item === null || item === void 0 ? void 0 : item.isDisabled) && !(item === null || item === void 0 ? void 0 : item.selected)) {
+                    if (restProps.direction !== 'vertical') {
+                        const parentWidths = (_b = (_a = navWrapRef === null || navWrapRef === void 0 ? void 0 : navWrapRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.clientWidth;
+                        const result = parentWidths -
+                            (((_c = itemOffsetData.get(index + Number('1'))) === null || _c === void 0 ? void 0 : _c.clientWidth) +
+                                ((_d = itemOffsetData.get(index + Number('1'))) === null || _d === void 0 ? void 0 : _d.offset));
+                        if (((_e = itemOffsetData.get(index + Number('1'))) === null || _e === void 0 ? void 0 : _e.offset) < itemOffset) {
+                            (_f = navWrapRef === null || navWrapRef === void 0 ? void 0 : navWrapRef.current) === null || _f === void 0 ? void 0 : _f.scrollTo((_g = itemOffsetData.get(index + Number('1'))) === null || _g === void 0 ? void 0 : _g.offset, 0);
+                        }
+                        if (result < 0 &&
+                            ((_h = itemOffsetData.get(index + Number('1'))) === null || _h === void 0 ? void 0 : _h.clientWidth) +
+                                ((_j = itemOffsetData.get(index + Number('1'))) === null || _j === void 0 ? void 0 : _j.offset) -
+                                itemOffset >
+                                parentWidths) {
+                            (_k = navWrapRef === null || navWrapRef === void 0 ? void 0 : navWrapRef.current) === null || _k === void 0 ? void 0 : _k.scrollTo(((_l = itemOffsetData.get(index + Number('1'))) === null || _l === void 0 ? void 0 : _l.offset) -
+                                (parentWidths -
+                                    ((_m = itemOffsetData.get(index + Number('1'))) === null || _m === void 0 ? void 0 : _m.clientWidth)), 0);
+                        }
+                    }
+                    setSelectedTab(index);
+                    restProps.getIndex(index);
+                    // HACK widget 时序
+                    if ((_p = (_o = $node.current) === null || _o === void 0 ? void 0 : _o._getInstanceRef()) === null || _p === void 0 ? void 0 : _p.current) {
+                        const currentSelectedValue = item === null || item === void 0 ? void 0 : item.value;
+                        if (currentSelectedValue !==
+                            $node.current._getInstanceRef().current.selectedValue) {
+                            $node.current._getInstanceRef().current.selectedValue =
+                                currentSelectedValue;
+                        }
+                    }
+                    (_q = restProps === null || restProps === void 0 ? void 0 : restProps.events) === null || _q === void 0 ? void 0 : _q.change({ value: item === null || item === void 0 ? void 0 : item.value });
+                }
+            }, children: [(item === null || item === void 0 ? void 0 : item.iconType) !== 'none' && (item === null || item === void 0 ? void 0 : item.iconPosition) === 'prefix' ? (_jsx("div", { className: `${classPrefix}-tabs__item-icon`, children: _jsx(WdIcon, { type: item === null || item === void 0 ? void 0 : item.iconType, name: (item === null || item === void 0 ? void 0 : item.iconType) === 'inner' ? item === null || item === void 0 ? void 0 : item.innerIcon : item === null || item === void 0 ? void 0 : item.outerImage, src: (item === null || item === void 0 ? void 0 : item.iconType) === 'custom' ? item === null || item === void 0 ? void 0 : item.outerImage : '', size: "xs" }) })) : null, _jsx("div", { className: `${classPrefix}-tabs__item-text`, children: item === null || item === void 0 ? void 0 : item.label }), (item === null || item === void 0 ? void 0 : item.iconType) !== 'none' && (item === null || item === void 0 ? void 0 : item.iconPosition) === 'suffix' ? (_jsx("div", { className: `${classPrefix}-tabs__item-icon`, children: _jsx(WdIcon, { type: item === null || item === void 0 ? void 0 : item.iconType, name: (item === null || item === void 0 ? void 0 : item.iconType) === 'inner' ? item === null || item === void 0 ? void 0 : item.innerIcon : item === null || item === void 0 ? void 0 : item.outerImage, src: (item === null || item === void 0 ? void 0 : item.iconType) === 'custom' ? item === null || item === void 0 ? void 0 : item.outerImage : '', size: "xs" }) })) : null] }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: `${classPrefix}-tabs__header`, children: _jsxs("div", { className: `${classPrefix}-tabs__header-item-wrap `, children: [_jsx("div", { ref: navWrapRef, className: `${classPrefix}-tabs__header-item-content`, onScroll: (event) => {
+                                var _a;
+                                //滚动条高度
+                                setItemOffset((_a = event === null || event === void 0 ? void 0 : event.currentTarget) === null || _a === void 0 ? void 0 : _a.scrollLeft);
+                            }, children: tabsDatas === null || tabsDatas === void 0 ? void 0 : tabsDatas.map((item, index) => RenderTabItem(index, item)) }), showMask && restProps.direction !== 'vertical' && (_jsx("div", { className: `${classPrefix}-tabs__header-item-mask` }))] }) }), _jsx("div", { className: `${classPrefix}-tabs__body`, children: _jsx("div", { className: `${classPrefix}-tabs__body-content`, children: isMultipleSlot
+                        ? restProps[`panel${selectedTab + Number('1')}`]
+                        : restProps[`panel1`] }) })] }));
+};

package/dist/web/components/wd-tabs/tabs-pc.d.ts

@@ -0,0 +1,2 @@
+import { WdTabsProps } from './tabs';
+export declare const WdTabsPc: ({ isMultipleSlot, tabsDatas, selectedIndex, ...restProps }: WdTabsProps) => JSX.Element;

package/dist/web/components/wd-tabs/tabs-pc.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { useConfig } from '../../utils/config-context';
+import { usePlatform } from '../../utils/platform';
+import WdIcon from '../wd-icon';
+import { useSyncedRef } from '@react-hookz/web';
+export const WdTabsPc = ({ isMultipleSlot, tabsDatas, selectedIndex, ...restProps }) => {
+    const { classPrefix } = useConfig();
+    const $node = useSyncedRef(restProps.$node);
+    //  判断是否出现右侧的滚动按钮
+    const [showButton, setShowButton] = useState(true);
+    // 横行导航移动
+    const [position, setPosition] = useState({ index: 0, offset: 0 });
+    const [menuPosition, setMenuPosition] = useState(0);
+    const [menuOffset, setMenuOffset] = useState({});
+    const [itemOffsetData, setItemffset] = useState(new Map());
+    const [selectedTab, setSelectedTab] = useState(selectedIndex);
+    const navWrapRef = useRef();
+    const platform = usePlatform();
+    // 导航移动逻辑
+    const getMenuOffset = useCallback(() => {
+        var _a, _b, _c, _d;
+        const parentWidth = (_b = (_a = navWrapRef === null || navWrapRef === void 0 ? void 0 : navWrapRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.clientWidth;
+        const contentWidth = (_c = navWrapRef === null || navWrapRef === void 0 ? void 0 : navWrapRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth;
+        const showButton = contentWidth > parentWidth;
+        setShowButton(showButton);
+        const menuItem = (_d = navWrapRef === null || navWrapRef === void 0 ? void 0 : navWrapRef.current) === null || _d === void 0 ? void 0 : _d.children;
+        const data = { 0: 0, 1: 0 };
+        const itemData = new Map();
+        itemData.set(0, { offset: 0, clientWidth: 0 });
+        let index = 1;
+        let itemIndex = 1;
+        for (const i of menuItem) {
+            if (data[index] + (i === null || i === void 0 ? void 0 : i.clientWidth) > parentWidth) {
+                index = index + Number('1');
+                data[index] = i === null || i === void 0 ? void 0 : i.clientWidth;
+            }
+            else {
+                data[index] += i === null || i === void 0 ? void 0 : i.clientWidth;
+            }
+            itemData.set(itemIndex, {
+                offset: itemData.get(itemIndex - Number('1'))['offset'] + (i === null || i === void 0 ? void 0 : i.clientWidth),
+                clientWidth: i === null || i === void 0 ? void 0 : i.clientWidth,
+            });
+            itemIndex = itemIndex + Number('1');
+        }
+        setItemffset(itemData);
+        setMenuOffset(data);
+    }, [navWrapRef]);
+    useEffect(() => {
+        var _a;
+        if ((_a = navWrapRef === null || navWrapRef === void 0 ? void 0 : navWrapRef.current) === null || _a === void 0 ? void 0 : _a.children) {
+            getMenuOffset();
+        }
+    }, [platform, navWrapRef, getMenuOffset, tabsDatas]);
+    useEffect(() => {
+        setSelectedTab(selectedIndex);
+    }, [selectedIndex]);
+    // 渲染菜单
+    const RenderTabItem = (index, item) => {
+        return (_jsxs("div", { className: `${classPrefix}-tabs__item ${(item === null || item === void 0 ? void 0 : item.selected) ? 'is-selected' : ''} ${(item === null || item === void 0 ? void 0 : item.isDisabled) ? 'is-disabled' : ''}`, onClick: () => {
+                var _a, _b, _c, _d, _e, _f, _g;
+                if (!(item === null || item === void 0 ? void 0 : item.isDisabled) && !(item === null || item === void 0 ? void 0 : item.selected)) {
+                    if (restProps.direction !== 'vertical') {
+                        const parentWidths = (_b = (_a = navWrapRef === null || navWrapRef === void 0 ? void 0 : navWrapRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.clientWidth;
+                        const result = parentWidths * ((position === null || position === void 0 ? void 0 : position.index) + Number('1')) -
+                            (((_c = itemOffsetData.get(index)) === null || _c === void 0 ? void 0 : _c.clientWidth) +
+                                ((_d = itemOffsetData.get(index)) === null || _d === void 0 ? void 0 : _d.offset));
+                        if (result >= 0 &&
+                            itemOffsetData.get(index).offset <=
+                                parentWidths * (position === null || position === void 0 ? void 0 : position.index)) {
+                            setPosition({
+                                index: position.index,
+                                offset: -itemOffsetData.get(index).offset,
+                            });
+                        }
+                        // 大于父级容器
+                        if (result < 0 &&
+                            result - parentWidths * (position === null || position === void 0 ? void 0 : position.index) < position.offset) {
+                            setPosition({
+                                index: position.index,
+                                offset: result + position.offset,
+                            });
+                        }
+                    }
+                    setSelectedTab(index);
+                    restProps.getIndex(index);
+                    // HACK widget 时序
+                    if ((_f = (_e = $node.current) === null || _e === void 0 ? void 0 : _e._getInstanceRef()) === null || _f === void 0 ? void 0 : _f.current) {
+                        const currentSelectedValue = item === null || item === void 0 ? void 0 : item.value;
+                        if (currentSelectedValue !==
+                            $node.current._getInstanceRef().current.selectedValue) {
+                            $node.current._getInstanceRef().current.selectedValue =
+                                currentSelectedValue;
+                        }
+                    }
+                    (_g = restProps === null || restProps === void 0 ? void 0 : restProps.events) === null || _g === void 0 ? void 0 : _g.change({ value: item === null || item === void 0 ? void 0 : item.value });
+                }
+            }, children: [(item === null || item === void 0 ? void 0 : item.iconType) !== 'none' && (item === null || item === void 0 ? void 0 : item.iconPosition) === 'prefix' ? (_jsx("div", { className: `${classPrefix}-tabs__item-icon`, children: _jsx(WdIcon, { type: item === null || item === void 0 ? void 0 : item.iconType, name: (item === null || item === void 0 ? void 0 : item.iconType) === 'inner' ? item === null || item === void 0 ? void 0 : item.innerIcon : item === null || item === void 0 ? void 0 : item.outerImage, src: (item === null || item === void 0 ? void 0 : item.iconType) === 'custom' ? item === null || item === void 0 ? void 0 : item.outerImage : '', size: "xs" }) })) : null, _jsx("div", { className: `${classPrefix}-tabs__item-text`, children: item === null || item === void 0 ? void 0 : item.label }), (item === null || item === void 0 ? void 0 : item.iconType) !== 'none' && (item === null || item === void 0 ? void 0 : item.iconPosition) === 'suffix' ? (_jsx("div", { className: `${classPrefix}-tabs__item-icon`, children: _jsx(WdIcon, { type: item === null || item === void 0 ? void 0 : item.iconType, name: (item === null || item === void 0 ? void 0 : item.iconType) === 'inner' ? item === null || item === void 0 ? void 0 : item.innerIcon : item === null || item === void 0 ? void 0 : item.outerImage, src: (item === null || item === void 0 ? void 0 : item.iconType) === 'custom' ? item === null || item === void 0 ? void 0 : item.outerImage : '', size: "xs" }) })) : null] }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${classPrefix}-tabs__header`, children: [showButton && position.index > 0 && (_jsx("div", { className: `${classPrefix}-tabs__header-nav-left`, onClick: () => {
+                            const result = menuPosition + menuOffset[position.index];
+                            setMenuPosition(result);
+                            setPosition({
+                                index: position.index - Number('1'),
+                                offset: result,
+                            });
+                        } })), _jsx("div", { className: `${classPrefix}-tabs__header-item-wrap`, children: _jsx("div", { ref: navWrapRef, className: `${classPrefix}-tabs__header-item-content`, style: {
+                                transform: `translate(${position.offset}px, 0px)`,
+                            }, children: tabsDatas === null || tabsDatas === void 0 ? void 0 : tabsDatas.map((item, index) => RenderTabItem(index, item)) }) }), showButton &&
+                        position.index + Number('2') < Object.keys(menuOffset).length && (_jsx("div", { className: `${classPrefix}-tabs__header-nav-right`, onClick: () => {
+                            const result = menuPosition - menuOffset[position.index + Number('1')];
+                            setMenuPosition(result);
+                            setPosition({
+                                index: position.index + Number('1'),
+                                offset: result,
+                            });
+                        } }))] }), _jsx("div", { className: `${classPrefix}-tabs__body`, children: _jsx("div", { className: `${classPrefix}-tabs__body-content`, children: isMultipleSlot
+                        ? restProps[`panel${selectedTab + Number('1')}`]
+                        : restProps[`panel1`] }) })] }));
+};

package/dist/web/components/wd-tabs/tabs.d.ts

@@ -0,0 +1,13 @@
+import type { CommonPropsType } from '../../types';
+export declare const WdTabs: (props: WdTabsProps) => JSX.Element;
+export interface WdTabsProps extends CommonPropsType {
+    isMultipleSlot: boolean;
+    selectedIndex: number;
+    tabsDatas: {
+        value: string;
+        label: string;
+        selected?: boolean;
+    }[];
+    direction: string;
+    getIndex: (val: number) => void;
+}

package/dist/web/components/wd-tabs/tabs.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useConfig } from '../../utils/config-context';
+import { usePlatform } from '../../utils/platform';
+import { WdTabsPc } from './tabs-pc';
+import { WdTabsH5 } from './tabs-h5';
+export const WdTabs = (props) => {
+    const { classPrefix } = useConfig();
+    const platform = usePlatform();
+    const isH5 = platform === 'h5';
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [index, setIndex] = useState(0);
+    const getIndex = (val) => {
+        setIndex(val);
+    };
+    return (_jsx("div", { "data-testid": "wd-tabs", className: `${classPrefix}-tabs-root ${props.direction === 'vertical'
+            ? `${classPrefix}-tabs--vertical ${classPrefix}-side-tab-root ${isH5
+                ? `${classPrefix}-h5-side-tab-root`
+                : `${classPrefix}-pc-side-tab-root`}`
+            : `${classPrefix}-top-tab-root ${isH5
+                ? `${classPrefix}-h5-top-tab-root`
+                : `${classPrefix}-pc-top-tab-root`}`} ${isH5 ? `${classPrefix}-tabs-h5-root` : ''} ${props === null || props === void 0 ? void 0 : props.className}`, style: props === null || props === void 0 ? void 0 : props.style, onClick: (e) => { var _a; return (_a = props === null || props === void 0 ? void 0 : props.events) === null || _a === void 0 ? void 0 : _a.tap({}, { originEvent: e }); }, children: !isH5 ? (_jsx(WdTabsPc, { getIndex: getIndex, ...props })) : (_jsx(WdTabsH5, { getIndex: getIndex, ...props })) }));
+};

package/dist/web/components/wd-tag/_design.d.ts

@@ -0,0 +1,5 @@
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-layout';
+export interface WdTagProps extends CommonPropsType, DataType {
+}
+export declare const WdTag: ({ className }: WdTagProps) => JSX.Element;

package/dist/web/components/wd-tag/_design.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useConfig } from '../../utils/config-context';
+import { usePlatform } from '../../utils/platform';
+import { WdIcon } from '../index';
+export const WdTag = ({ className }) => {
+    // 样式
+    const { classPrefix } = useConfig();
+    const platform = usePlatform();
+    const isH5 = platform === 'h5';
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${isH5 ? `${classPrefix}-h5-tag-root` : `${classPrefix}-pc-tag-root`} ${classPrefix}-tag-root ${className} ${classPrefix}-tag--gap-md ${classPrefix}-tag--horizontal`, children: [_jsx("span", { className: `${classPrefix}-tag-item`, children: "\u9ED8\u8BA4\u5C3A\u5BF8" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--sm`, children: "\u5C0F\u6807\u7B7E" }), _jsxs("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--md`, children: [_jsx(WdIcon, { name: "td:discount-filled", size: "xxs" }), " \u4E2D\u6807\u7B7E"] }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--lg`, children: "\u5927\u6807\u7B7E" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--dark `, children: "\u6DF1\u8272\u9ED8\u8BA4" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--light `, children: "\u6D45\u8272\u9ED8\u8BA4" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--outline`, children: "\u8FB9\u6846" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--dark is-disabled `, children: "\u6DF1\u8272\u7981\u7528" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--light is-disabled `, children: "\u6D45\u8272\u7981\u7528" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--outline is-disabled`, children: "\u8FB9\u6846\u7981\u7528" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--dark is-selected `, children: "\u6DF1\u8272\u9009\u4E2D" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--light is-selected `, children: "\u6D45\u8272\u9009\u4E2D" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--outline is-selected`, children: "\u8FB9\u6846\u9009\u4E2D" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--dark is-selected is-disabled`, children: "\u6DF1\u8272\u9009\u4E2D\u7981\u7528" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--light is-selected is-disabled`, children: "\u6D45\u8272\u9009\u4E2D\u7981\u7528" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--outline is-selected is-disabled`, children: "\u8FB9\u6846\u9009\u4E2D\u7981\u7528" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--dark`, children: "\u9ED8\u8BA4\u72B6\u6001" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--dark is-selected`, children: "\u9009\u4E2D" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--dark is-disabled`, children: "\u7981\u7528" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--dark is-selected is-disabled`, children: "\u9009\u4E2D\u7981\u7528" }), _jsx("span", { className: `${classPrefix}-tag-item  ${classPrefix}-tag--sm`, children: "pc\u5C0F\u53F7" }), _jsx("span", { className: `${classPrefix}-tag-item  ${classPrefix}-tag--md`, children: "\u9ED8\u8BA4\u4E2D\u53F7" }), _jsx("span", { className: `${classPrefix}-tag-item  ${classPrefix}-tag--lg`, children: "\u5927\u53F7" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag-item--radius-lg ${classPrefix}-tag--lg`, children: "\u5927\u5706\u89D2" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag-item--radius-sm  ${classPrefix}-tag--lg`, children: "\u5C0F\u5706\u89D2" }), _jsx("span", { className: `${classPrefix}-tag-item`, children: "\u79FB\u52A8\u7AEF\u9ED8\u8BA4\u5C3A\u5BF8" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--sm`, children: "\u79FB\u52A8\u7AEF\u5C0F\u6807\u7B7E" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--md`, children: "\u79FB\u52A8\u7AEF\u4E2D\u6807\u7B7E" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--lg`, children: "\u79FB\u52A8\u7AEF\u4E2D\u5927\u6807\u7B7E" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--xl`, children: "\u79FB\u52A8\u7AEF\u5927\u6807\u7B7E" })] }), _jsxs("div", { style: { marginTop: '24px' }, className: `${isH5 ? `${classPrefix}-h5-tag-root` : `${classPrefix}-pc-tag-root`} ${classPrefix}-tag-root ${className} ${classPrefix}-tag--gap-md ${classPrefix}-tag--vertical`, children: [_jsx("span", { className: `${classPrefix}-tag-item`, children: "\u9ED8\u8BA4\u5C3A\u5BF8" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--sm`, children: "\u5C0F\u6807\u7B7E" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--md`, children: "\u4E2D\u6807\u7B7E" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--lg`, children: "\u5927\u6807\u7B7E" })] }), _jsxs("div", { style: { marginTop: '24px' }, className: `${isH5 ? `${classPrefix}-h5-tag-root` : `${classPrefix}-pc-tag-root`} ${classPrefix}-tag-root ${className} ${classPrefix}-tag--gap-md `, children: [_jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--warning ${classPrefix}-tag--light  is-selected`, children: "warning" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--warning ${classPrefix}-tag--dark  is-selected`, children: "warning" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--warning ${classPrefix}-tag--outline is-selected`, children: "warning" })] }), _jsxs("div", { style: { marginTop: '24px' }, className: `${isH5 ? `${classPrefix}-h5-tag-root` : `${classPrefix}-pc-tag-root`} ${classPrefix}-tag-root ${className} ${classPrefix}-tag--gap-md `, children: [_jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--danger ${classPrefix}-tag--light  is-selected`, children: "danger" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--danger ${classPrefix}-tag--dark  is-selected`, children: "danger" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--danger ${classPrefix}-tag--outline is-selected`, children: "danger" })] }), _jsxs("div", { style: { marginTop: '24px' }, className: `${isH5 ? `${classPrefix}-h5-tag-root` : `${classPrefix}-pc-tag-root`} ${classPrefix}-tag-root ${className} ${classPrefix}-tag--gap-md `, children: [_jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--success ${classPrefix}-tag--light  is-selected`, children: "success" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--success ${classPrefix}-tag--dark  is-selected`, children: "success" }), _jsx("span", { className: `${classPrefix}-tag-item ${classPrefix}-tag--success ${classPrefix}-tag--outline is-selected`, children: "success" })] })] }));
+};

package/dist/web/components/wd-tag/index.d.ts

@@ -0,0 +1,6 @@
+import { WdTagSelect } from './wd-tag-select';
+import { WdTag } from './wd-tag';
+export { WdTagSelect, WdTag };
+export type { WdTagSelectProps } from './wd-tag-select';
+export type { WdTagProps } from './wd-tag';
+export default WdTagSelect;

package/dist/web/components/wd-tag/index.js

@@ -0,0 +1,4 @@
+import { WdTagSelect } from './wd-tag-select';
+import { WdTag } from './wd-tag';
+export { WdTagSelect, WdTag };
+export default WdTagSelect;