@cloudbase/weda-ui 3.5.2-mp → 3.5.3

package/dist/web/components/table/index.css

@@ -0,0 +1,336 @@
+.weda-table .wedatea2td-input,
+.weda-table .wedatea2td-text-area {
+  caret-color: #0052d9;
+}
+.weda-table .wedatea2td-form .wedatea2td-form {
+  background-color: #f3f3f3;
+  padding: 24px 40px 24px 20px;
+}
+.weda-table
+  .wedatea2td-form
+  > .wedatea2td-form__item:last-child
+  .wedatea2td-form--vertical
+  .wedatea2td-form__label,
+.weda-table
+  .wedatea2td-form
+  > .wedatea2td-form__item:last-child
+  .wedatea2td-form
+  > .wedatea2td-form__item:last-child
+  .wedatea2td-form__controls,
+.weda-table
+  .wedatea2td-form
+  > .wedatea2td-form__item:last-child
+  .wedatea2td-form
+  > .wedatea2td-form__item:last-child
+  .wedatea2td-form__label {
+  padding-bottom: 16px;
+}
+.weda-table
+  .wedatea2td-form
+  > .wedatea2td-form__item:last-child
+  .wedatea2td-form--vertical
+  .wedatea2td-form__label,
+.weda-table
+  .wedatea2td-form
+  > .wedatea2td-form__item:last-child
+  .wedatea2td-form
+  > .wedatea2td-form__item:last-child
+  > .wedatea2td-form__controls,
+.weda-table
+  .wedatea2td-form
+  > .wedatea2td-form__item:last-child
+  .wedatea2td-form
+  > .wedatea2td-form__item:last-child
+  > .wedatea2td-form__label {
+  padding-bottom: 0px;
+}
+.weda-table .wedatea2td-icon-plus--primary {
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+YWRkPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJJY29ucyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTgwLjAwMDAwMCwgLTk1MS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9ImFkZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODAuMDAwMDAwLCA5NTEuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTYsMCBMMTYsMTYgTDAsMTYgTDAsMCBMMTYsMCBaIiBpZD0i55+p5b2iIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNy4zNDk5NzU1OSwxMi41IEw4LjY0OTk3NTc4LDEyLjUgTDguNjQ5OTc1NzgsOC42NTAwOTc4NSBMMTIuNSw4LjY1MDA5Nzg1IEwxMi41LDcuMzUwMDk3NjYgTDguNjQ5OTc1NzgsNy4zNTAwOTc2NiBMOC42NDk5NzU3OCwzLjUgTDcuMzQ5OTc1NTksMy41IEw3LjM0OTk3NTU5LDcuMzUwMDk3NjYgTDMuNSw3LjM1MDA5NzY2IEwzLjUsOC42NTAwOTc4NSBMNy4zNDk5NzU1OSw4LjY1MDA5Nzg1IEw3LjM0OTk3NTU5LDEyLjUgWiIgaWQ9IlVuaW9uIiBmaWxsPSIjMDA1MmQ5IiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
+}
+.weda-table ._wedamodal-form-nested {
+  background-color: #f3f3f3;
+  position: relative;
+}
+.weda-table ._wedamodal-form-nested .wedatea2td-form {
+  padding: 24px 40px 24px 20px;
+  width: 100%;
+}
+.weda-table ._wedamodal-form-nested__op {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px 12px 0 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.weda-table ._wedamodal-form-nested__op .wedatea2td-icon-close.size-s,
+.weda-table ._wedamodal-form-nested__op .wedatea2td-icon-dismiss {
+  cursor: pointer;
+}
+.weda-table ._wedamodal-form-nested--inner {
+  background-color: #fff;
+}
+.weda-table ._wedamodal-form-nested--inner .wedatea2td-form {
+  background-color: #fff;
+}
+.weda-table .wedatea2td-form ._wedamodal-form--white,
+.weda-table ._wedamodal-form--white {
+  background-color: #fff;
+}
+.weda-table ._wedamodal-btn--full {
+  width: 100%;
+}
+.weda-table .wedatea2td-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.weda-table ._wedamodal-btn--dashed {
+  border-style: dashed;
+}
+.weda-table ._wedamodal-btn--dashed .wedatea2td-icon {
+  margin-right: 8px;
+}
+.weda-table .wedatea2td-timepicker__input .wedatea2td-input,
+.weda-table .wedatea2td-datepicker__input .wedatea2td-input {
+  /* width: 260px; */
+}
+.weda-table .wedatea2td-tabs__backward,
+.weda-table .wedatea2td-tabs__forward {
+  display: none;
+}
+.weda-table ._wedamodal-fn-data-filter .wedatea2td-form {
+  max-width: initial;
+}
+.weda-table ._wedamodal-fn-data-filter .wedatea2td-form__label {
+  /* width: 6em; */
+  padding-right: 10px;
+}
+.weda-table ._wedamodal-fn-data-filter .wedatea2td-form__label > label {
+  /* white-space: initial; */
+  /* width: 6em; */
+}
+.weda-table ._wedamodal-fn-data-filter .wedatea2td-form .wedatea2td-grid {
+  margin: 0;
+}
+.weda-table
+  ._wedamodal-fn-data-filter
+  .wedatea2td-form
+  .wedatea2td-grid
+  [class*='wedatea2td-grid__item'] {
+  padding: 0;
+}
+.weda-table ._wedamodal-fn-data-filter .wedatea2td-input-group {
+  display: inline-flex;
+  width: 100%;
+}
+.weda-table
+  ._wedamodal-fn-data-filter
+  .wedatea2td-input-group
+  > ._wedamodal-fn-input-range,
+.weda-table
+  ._wedamodal-fn-data-filter
+  .wedatea2td-input-group
+  > .wedatea2td-datetimepicker,
+.weda-table
+  ._wedamodal-fn-data-filter
+  .wedatea2td-input-group
+  > .wedatea2td-datetimepicker
+  .wedatea2td-datetimepicker__input,
+.weda-table
+  ._wedamodal-fn-data-filter
+  .wedatea2td-input-group
+  > .wedatea2td-timepicker,
+.weda-table
+  ._wedamodal-fn-data-filter
+  .wedatea2td-input-group
+  > .wedatea2td-timepicker
+  .wedatea2td-timepicker__input,
+.weda-table
+  ._wedamodal-fn-data-filter
+  .wedatea2td-input-group
+  > .wedatea2td-dropdown,
+.weda-table
+  ._wedamodal-fn-data-filter
+  .wedatea2td-input-group
+  > .wedatea2td-dropdown
+  .wedatea2td-dropdown__header,
+.weda-table
+  ._wedamodal-fn-data-filter
+  .wedatea2td-input-group
+  > .wedatea2td-input {
+  flex: 1 1 1px;
+  width: auto;
+}
+.weda-table
+  ._wedamodal-fn-data-filter
+  .wedatea2td-input-group
+  > .wedatea2td-datetimepicker
+  .wedatea2td-datetimepicker__input,
+.weda-table
+  ._wedamodal-fn-data-filter
+  .wedatea2td-input-group
+  > .wedatea2td-datetimepicker
+  .wedatea2td-input,
+.weda-table
+  ._wedamodal-fn-data-filter
+  .wedatea2td-input-group
+  > .wedatea2td-timepicker
+  .wedatea2td-timepicker__input,
+.weda-table
+  ._wedamodal-fn-data-filter
+  .wedatea2td-input-group
+  > .wedatea2td-timepicker
+  .wedatea2td-input {
+  width: 100%;
+}
+.weda-table
+  ._wedamodal-fn-data-filter
+  .wedatea2td-input-group
+  > .wedatea2td-datetimepicker
+  .wedatea2td-input,
+.weda-table
+  ._wedamodal-fn-data-filter
+  .wedatea2td-input-group
+  > .wedatea2td-timepicker
+  .wedatea2td-input {
+  /* padding-right: 30px; */
+}
+.weda-table
+  ._wedamodal-fn-data-filter
+  .wedatea2td-input-group
+  > .wedatea2td-input {
+  min-width: 0;
+  width: 0;
+}
+.weda-table ._wedamodal-fn-data-filter .wedatea2td-dropdown,
+.weda-table
+  ._wedamodal-fn-data-filter
+  .wedatea2td-dropdown
+  .wedatea2td-dropdown__header {
+  width: 100%;
+}
+.weda-table ._wedamodal-fn-data-filter__panel {
+  position: absolute;
+  background-color: #fff;
+  left: -20px;
+  right: -20px;
+  top: 0;
+  padding: 0 20px;
+  max-width: 100%;
+  z-index: 11;
+  box-shadow: 0 2px 4px 0 rgba(54, 58, 80, 0.32);
+}
+.weda-table ._wedamodal-fn-data-filter__panel-header {
+  height: 32px;
+  display: flex;
+  align-items: center;
+  /* justify-content: flex-end; */
+}
+.weda-table ._wedamodal-fn-data-filter__panel-footer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 48px;
+  border-top: 1px solid #dcdcdc;
+  display: flex;
+}
+.weda-table ._wedamodal-fn-data-filter__panel-footer .wedatea2td-btn--weak {
+  flex: 1 1 0px;
+  margin-right: 0;
+  border-width: 0;
+  height: 100%;
+  border-left-width: 1px;
+  border-radius: 0;
+}
+.weda-table ._wedamodal-fn-data-filter ._wedamodal-form__op {
+  /* display: block; */
+}
+.weda-table ._wedamodal-fn-data-filter--mobile {
+  /* display: flex; */
+  /* align-items: center; */
+  margin-bottom: 20px;
+  position: relative;
+}
+.weda-table ._wedamodal-fn-data-filter--mobile .wedatea2td-btn {
+  display: inline-flex;
+  flex: 1 1 0px;
+  margin-right: 12px;
+}
+.weda-table ._wedamodal-fn-data-filter--mobile .wedatea2td-form {
+  display: block;
+  width: 100%;
+}
+.weda-table ._wedamodal-fn-data-filter--mobile .wedatea2td-form__item {
+  display: flex;
+  width: 100%;
+}
+.weda-table ._wedamodal-fn-data-filter--mobile .wedatea2td-form__label {
+  display: block;
+  flex: 0 0 6em;
+  margin-right: 10px;
+}
+.weda-table ._wedamodal-fn-data-filter--mobile .wedatea2td-form__label > label {
+  white-space: initial;
+  width: 6em;
+}
+.weda-table ._wedamodal-fn-data-filter--mobile .wedatea2td-form__controls {
+  display: block;
+  flex: 1 1 1px;
+}
+.weda-table
+  ._wedamodal-fn-data-filter--mobile
+  ._wedamodal-form__op
+  .wedatea2td-form__label {
+  display: none;
+}
+.weda-table
+  ._wedamodal-fn-data-filter--mobile
+  ._wedamodal-form__op
+  .wedatea2td-form__controls {
+  display: flex;
+  width: 100%;
+  /* margin-left: -20px;
+  margin-right: -20px; */
+  padding-right: 0;
+  border-top: 1px solid #dcdcdc;
+  height: 48px;
+  padding-top: 0;
+}
+.weda-table
+  ._wedamodal-fn-data-filter--mobile
+  ._wedamodal-form__op
+  .wedatea2td-form__controls
+  .wedatea2td-btn--link {
+  flex: 1 1 0px;
+  margin-right: 0;
+  border-width: 0;
+  height: 100%;
+  border-left: 1px solid #dcdcdc;
+  border-radius: 0;
+}
+.weda-table ._wedamodal-fn-input-range {
+  display: inline-flex;
+  border: 1px solid #dcdcdc;
+  align-items: center;
+  height: 32px;
+  box-sizing: border-box;
+  vertical-align: middle;
+}
+.weda-table ._wedamodal-fn-input-range:hover,
+.weda-table ._wedamodal-fn-input-range:focus {
+  border-color: #0052d9;
+  z-index: 2;
+  position: relative;
+}
+.weda-table ._wedamodal-fn-input-range__split {
+  flex: 0 0 10px;
+  font-size: 14px;
+}
+.weda-table ._wedamodal-fn-input-range .wedatea2td-input {
+  border: none;
+  height: 30px;
+  flex: 1 1 1px;
+  width: 1px;
+}

package/dist/web/components/table/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BaseTable } from './BaseTable';
+import './style';
+/**
+ * 列表组件
+ */
+declare const _default: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
+export default _default;
+export { BaseTable };

package/dist/web/components/table/index.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
+import { ConfigProvider } from 'tea-component';
+import { PageContent, PageNullDb } from '../pageLayout/PageContent';
+import { BaseTable } from './BaseTable';
+import { getAuthFields } from '../../utils/datasource';
+import classNames from '../../utils/classnames';
+import { TABLE_BUTTONS, TABLE_SETTINGS, TABLE_SLOT_PREFIX, GLOBAL_BUTTON, } from '../../utils/constant';
+import { EnumHoc } from '../../utils/hooks/EnumHoc';
+import { alertErrorMessage } from '../../utils/platform';
+import './style';
+/**
+ * 列表组件
+ */
+export default React.forwardRef(function ModelTable(props, ref) {
+    const { dataSourceType = 'data-model', bindConnectMetadata = {
+        datasource: { id: '', name: '', title: '' },
+    }, // APImock数据
+    connectorMethod = { name: '', inParams: [], outParams: [], title: '' }, // API方法
+    connectorParams, // API查询入参
+    isOrderBy = true, // API是否支持排序
+    bindMetadata = {
+        datasource: {},
+        enabledFieldNames: [],
+        selectedViewIds: [],
+    }, // 数据源+字段data对象
+    filterType = 'searchbox', // 条件筛选类型
+    filterFields, // 筛选字段
+    buttons = TABLE_BUTTONS, // 选区按钮集合
+    settings = TABLE_SETTINGS, // 列表操作列默认按钮选区
+    _selectableBlockEvents: selectableBlockEvents, // 选区的事件集合
+    columnSets, // 列管理，具备列排序/列勾选/列自定义渲染作用，存在时代替enabledFieldNames
+    rowColor, // 行背景色
+    id: compId, // 组件id
+    events, // 事件
+    where, // 搜索条件
+    orderBy, // 排序字段
+    orderType, // 排序方式
+    fixedFront = '', // 冻结首列至本列
+    fixedEnd = '', // 冻结本列至尾列
+    enableCellCustomOption, // 是否显示插槽操作列
+    enableGlobalButton, // 是否显示插槽全局按钮
+    className, emptyText = '暂无数据', ...rest } = props;
+    const isModel = dataSourceType !== 'custom-connector';
+    const { datasource, enabledFieldNames, selectedViewIds: selectedView, isNewData, } = isModel ? bindMetadata : bindConnectMetadata;
+    const { outParams } = connectorMethod;
+    const dbName = datasource === null || datasource === void 0 ? void 0 : datasource.name;
+    const dbFieldNames = isModel ? enabledFieldNames : outParams;
+    const [showFields, setShowFields] = useState([]);
+    const [getFieldsLoading, setGetFieldsLoading] = useState(true);
+    useEffect(() => {
+        try {
+            // eslint-disable-next-line no-inner-declarations
+            async function getShowFields() {
+                const { showFields: value } = await getAuthFields(dbName, dbFieldNames, true, !!isNewData, isModel, connectorMethod);
+                setShowFields(value);
+                setGetFieldsLoading(false);
+            }
+            getShowFields();
+        }
+        catch (err) {
+            setGetFieldsLoading(false);
+            setShowFields([]);
+            alertErrorMessage({ message: `获取数据源字段失败,错误信息:${err}` });
+            console.error(`获取数据源字段失败,错误信息:${err}`);
+        }
+    }, [dbName]);
+    /**
+     * 通过前缀过滤出插槽属性，传入属性是确定的，所以可以通过前缀识别
+     */
+    const slots = Object.keys(rest).reduce((acc, key) => {
+        if (key.startsWith(TABLE_SLOT_PREFIX) || key === GLOBAL_BUTTON) {
+            acc[key] = rest[key];
+        }
+        return acc;
+    }, {});
+    /**
+     * 获取选中的筛选字段
+     */
+    const getFilterFields = (filterFields) => {
+        var _a;
+        let result = [];
+        try {
+            const filterFieldsObj = JSON.parse(JSON.stringify(filterFields));
+            result =
+                ((_a = filterFieldsObj === null || filterFieldsObj === void 0 ? void 0 : filterFieldsObj.selected) === null || _a === void 0 ? void 0 : _a.map((i) => showFields.find((j) => j.name === i))) || [];
+        }
+        catch (error) {
+            result = [];
+        }
+        return result;
+    };
+    /**
+     * 处理选择视图的意外情况(存量用户不会更新数据源的默认视图可能会出现[null])
+     */
+    const getSelectedView = (selectedViews) => {
+        if (selectedViews && (selectedViews === null || selectedViews === void 0 ? void 0 : selectedViews.length) > 0) {
+            return selectedViews.filter((item) => !!item);
+        }
+        return [];
+    };
+    // 1、编辑器内未绑定数据源时返回
+    if ((isModel && !dbName) || (!isModel && !(connectorMethod === null || connectorMethod === void 0 ? void 0 : connectorMethod.name))) {
+        return (_jsx(PageNullDb, { ...rest, className: classNames('weda-table', className) }));
+    }
+    // 2、正常返回
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(EnumHoc, { fields: showFields, children: _jsx(PageContent, { ...rest, className: classNames('weda-table', className), loading: getFieldsLoading, children: _jsx(BaseTable, { filterType: filterType, filterFields: getFilterFields(filterFields), actionColumn: true, tableAction: true, enableCellCustomOption: enableCellCustomOption, enableGlobalButton: enableGlobalButton, dbName: dbName, fields: showFields, connectorParams: connectorParams, isOrderBy: isOrderBy, isModel: isModel, tableSearch: !!isModel, connectorMethod: connectorMethod === null || connectorMethod === void 0 ? void 0 : connectorMethod.name, compId: compId, buttons: buttons, settings: settings, selectableBlockEvents: selectableBlockEvents, selectedView: getSelectedView(selectedView), columnSets: columnSets, slots: slots, rowColor: rowColor, events: events, onSelectConfirm: undefined, onSelectCancel: undefined, defaultSearchValue: undefined, outerRef: ref, where: where, orderBy: orderBy, orderType: orderType, fixedFront: fixedFront, fixedEnd: fixedEnd, emptyText: emptyText }) }) }) }));
+});
+export { BaseTable };

package/dist/web/components/table/style.d.ts

@@ -0,0 +1,3 @@
+import './index.css';
+import './baseTable.css';
+import '../style';

package/dist/web/components/table/style.js

@@ -0,0 +1,4 @@
+import './index.css';
+import './baseTable.css';
+// common style
+import '../style';

package/dist/web/components/tabs/index.css

@@ -0,0 +1,68 @@
+.weda-tabs {
+  width: 100%;
+}
+.weda-tabs__panel {
+  min-height: 50px;
+}
+.weda-tabs__nav {
+  width: 100%;
+  height: 45px;
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  position: relative;
+  white-space: nowrap;
+  border-bottom: 1px solid #eee;
+  overflow-x: auto;
+  scrollbar-width: none;
+  /* firefox */
+  -ms-overflow-style: none;
+  /* IE 10+ */
+}
+.weda-tabs__nav::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+
+.weda-tabs__nav-cell {
+  flex-basis: 0;
+  flex-grow: 1;
+  height: 100%;
+  font-size: 1em;
+  color: #000;
+  box-sizing: border-box;
+  padding: 0 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: unset;
+  position: relative;
+}
+.weda-tabs__nav-cell.active {
+  color: #0052d9;
+}
+.weda-tabs__nav-cell.scroll {
+  flex-basis: auto;
+  flex-shrink: 0;
+  flex-grow: 0;
+  width: unset;
+}
+
+.weda-tabs__nav-cell::after {
+  display: block;
+  position: absolute;
+  content: '';
+  bottom: 0;
+  left: 0;
+  width: 0;
+  border-bottom: 2px solid transparent;
+}
+
+.weda-tabs__nav-cell.active::after {
+  width: 100%;
+  border-bottom-color: #0052d9;
+  transition: border-color 0.15s ease-in-out, width 0.15s ease-in-out,
+    height 0.15s ease-in-out;
+}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/tabs';
+import type { Except } from 'type-fest';
+import './style';
+export type TabsProps = CommonPropsType & Except<DataType, 'tabs'> & {
+    tabs: ReadonlyArray<DataType['tabs'][number] & {
+        name: string;
+    }>;
+    showType: 'h5' | 'pc';
+};
+export default function Tabs(props: TabsProps): JSX.Element;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePlatform } from '../../utils/platform';
+import { CommonErrorBoundary } from '../common/error-boundary';
+// import { fallback } from '../../utils/loading-fallback';
+import TabsH5 from './tabs.h5';
+import TabsPc from './tabs.pc';
+import './style';
+function TabsImpl(props) {
+    const platform = usePlatform();
+    if ((props === null || props === void 0 ? void 0 : props.showType) === 'pc') {
+        return _jsx(TabsPc, { ...props });
+    }
+    if ((props === null || props === void 0 ? void 0 : props.showType) === 'h5') {
+        return _jsx(TabsH5, { ...props });
+    }
+    return platform === 'h5' ? _jsx(TabsH5, { ...props }) : _jsx(TabsPc, { ...props });
+}
+export default function Tabs(props) {
+    return (_jsx(CommonErrorBoundary, { children: _jsx(TabsImpl, { ...props }) }));
+}

package/dist/web/components/tabs/style.d.ts

@@ -0,0 +1,2 @@
+import './index.css';
+import '../style';

package/dist/web/components/tabs/style.js

@@ -0,0 +1,2 @@
+import './index.css';
+import '../style';

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { TabsProps } from './index';
+export default function TabsH5({ tabs, selectedIndex, events, className, style, isMultipleSlot, ...restProps }: TabsProps): JSX.Element;

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from '../../utils/classnames';
+import { useSyncValue } from '../../utils/hooks/useSyncValue';
+import { useCustomCompareEffect, useSyncedRef } from '@react-hookz/web';
+import isObjectEqual from '../../utils/isObjectEqual';
+import { emptyArray } from '../../utils/constant';
+import { useLoopRenderDetect } from '../common/use-loop-render-detect';
+export default function TabsH5({ tabs = emptyArray, selectedIndex, events, className, style, isMultipleSlot = true, ...restProps }) {
+    useLoopRenderDetect();
+    const [currentIndex, setCurrentIndex] = useSyncValue(typeof selectedIndex === 'string' ? parseInt(selectedIndex) : selectedIndex);
+    const eventRef = useSyncedRef(events);
+    useCustomCompareEffect(() => {
+        // 延迟触发change事件，避免在slot未渲染完成时在事件中操作里面的组件方法
+        // eslint-disable-next-line rulesdir/no-timer
+        setTimeout(() => {
+            var _a, _b;
+            eventRef.current &&
+                eventRef.current.change({
+                    id: currentIndex,
+                    label: (_a = tabs[currentIndex]) === null || _a === void 0 ? void 0 : _a.title,
+                    value: (_b = tabs[currentIndex]) === null || _b === void 0 ? void 0 : _b.value,
+                });
+        }, 0);
+    }, [currentIndex, tabs], isObjectEqual);
+    return (_jsxs("div", { "data-testid": "tabs", className: classNames('weda-tabs weda-ui', {
+            [className]: className,
+        }), style: style, children: [_jsx("div", { className: "weda-tabs__nav", children: tabs === null || tabs === void 0 ? void 0 : tabs.map(({ name, title }, index) => (_jsx("div", { className: classNames('weda-tabs__nav-cell', {
+                        active: currentIndex === index,
+                        scroll: currentIndex > 5,
+                    }), onClick: () => {
+                        setCurrentIndex(index);
+                    }, children: title }, name || index))) }), _jsx("div", { className: classNames({
+                    'weda-tabs__panel': true,
+                }), children: isMultipleSlot
+                    ? restProps[`panel${currentIndex + 1}`]
+                    : restProps['panel1'] })] }));
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TabsProps } from './index';
+export default function TabsPc({ tabs, selectedIndex, events, className, style, isMultipleSlot, ...restProps }: TabsProps): JSX.Element;

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCustomCompareEffect, useSyncedRef } from '@react-hookz/web';
+import * as React from 'react';
+import { Tabs as TeaTabs, TabPanel, ConfigProvider } from 'tea-component';
+import classNames from '../../utils/classnames';
+import { emptyArray } from '../../utils/constant';
+import isObjectEqual from '../../utils/isObjectEqual';
+import { useSyncValue } from '../../utils/hooks/useSyncValue';
+export default function TabsPc({ tabs = emptyArray, selectedIndex, events, className, style, isMultipleSlot = true, ...restProps }) {
+    const [activeIndex, setActiveIndex] = useSyncValue(selectedIndex);
+    const _tabs = React.useMemo(() => {
+        if (!Array.isArray(tabs) || tabs.length <= 0) {
+            return [];
+        }
+        return tabs.map((item, index) => {
+            return {
+                id: index.toString(),
+                label: item.title,
+                value: item.value,
+            };
+        });
+    }, [tabs]);
+    const eventsRef = useSyncedRef(events);
+    useCustomCompareEffect(() => {
+        // 延迟触发change事件，避免在slot未渲染完成时在事件中操作里面的组件方法
+        // eslint-disable-next-line rulesdir/no-timer
+        setTimeout(() => {
+            var _a, _b, _c;
+            eventsRef.current &&
+                eventsRef.current.change({
+                    id: (_a = _tabs[activeIndex]) === null || _a === void 0 ? void 0 : _a.id,
+                    label: (_b = _tabs[activeIndex]) === null || _b === void 0 ? void 0 : _b.label,
+                    value: (_c = _tabs[activeIndex]) === null || _c === void 0 ? void 0 : _c.value,
+                });
+        }, 0);
+    }, [activeIndex, _tabs], isObjectEqual);
+    const onActive = (e) => {
+        setActiveIndex(e.id);
+    };
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(TeaTabs, { style: style, tabs: _tabs, activeId: String(activeIndex), onActive: onActive, className: classNames('weda-tabs_pc', {
+                [className]: className,
+            }), children: _tabs === null || _tabs === void 0 ? void 0 : _tabs.map((item, index) => (_jsx(TabPanel, { id: item.id, children: isMultipleSlot
+                    ? restProps[`panel${index + 1}`]
+                    : restProps['panel1'] }, item.id))) }) }));
+}