@cloudbase/weda-ui 2.0.11 → 2.0.27

package/src/web/components/chart/common/echart.css

@@ -17,17 +17,17 @@
 }
 .weda-ui-echart .echart-light-box {
   position: relative;
-  background-color: #F4F5F6;
+  background-color: #f4f5f6;
 }
 .weda-ui-echart .echart-light-body {
   background-color: #ffffff;
 }
 .weda-ui-echart .echart-dark-box {
   position: relative;
-  background-color: #4B5D6C;
+  background-color: #4b5d6c;
 }
 .weda-ui-echart .echart-dark-body {
-  background-color: #1D1F24;
+  background-color: #1d1f24;
   margin: 6px;
 }
 .weda-ui-echart .btn-grounp {
@@ -67,20 +67,20 @@
   user-select: none;
   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
   position: relative;
-  color: #4B5D6C;
+  color: #4b5d6c;
   background-color: #fff;
-  border-color: #CCD2D8;
+  border-color: #ccd2d8;
 }
 .weda-ui-echart .button,
-.weda-ui-echart html [type="button"],
-.weda-ui-echart [type="reset"],
-.weda-ui-echart [type="submit"] {
+.weda-ui-echart html [type='button'],
+.weda-ui-echart [type='reset'],
+.weda-ui-echart [type='submit'] {
   -webkit-appearance: button;
 }
 .weda-ui-echart .ant-btn-primary {
   color: #fff;
-  background-color: #4A62E7;
-  border-color: #4A62E7;
+  background-color: #4a62e7;
+  border-color: #4a62e7;
 }
 .weda-ui-echart .ant-btn:not([disabled]):hover {
   text-decoration: none;
@@ -94,9 +94,9 @@
 }
 .weda-ui-echart .ant-btn:hover,
 .weda-ui-echart .ant-btn:focus {
-  color: #4A62E7;
+  color: #4a62e7;
   background-color: #fff;
-  border-color: #4A62E7;
+  border-color: #4a62e7;
 }
 .weda-ui-echart .ant-btn-primary:hover,
 .weda-ui-echart .ant-btn-primary:focus {

package/src/web/components/chart/common/echarts.ts

@@ -7,7 +7,7 @@ import {
   TitleComponent,
   TooltipComponent,
   LegendComponent,
-  GridComponent
+  GridComponent,
 } from 'echarts/components';
 // 标签自动布局，全局过渡动画等特性
 import { LabelLayout, UniversalTransition } from 'echarts/features';
@@ -25,9 +25,7 @@ echarts.use([
   CanvasRenderer,
   BarChart,
   LineChart,
-  PieChart
+  PieChart,
 ]);
 
-export {
-  echarts
-};
+export { echarts };

package/src/web/components/chart/common/useChart.tsx

@@ -1,14 +1,28 @@
-import { useAsync, useDeepCompareEffect, useEventListener, useIsMounted, useMountEffect } from "@react-hookz/web";
-import { MutableRefObject, RefObject, useCallback, useEffect, useMemo, useRef } from "react";
-import { IEchartModalBase } from "./core/eChartBase";
-import { echarts } from "./echarts";
+import {
+  useAsync,
+  useDeepCompareEffect,
+  useEventListener,
+  useIsMounted,
+  useMountEffect,
+} from '@react-hookz/web';
+import {
+  MutableRefObject,
+  RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import { IEchartModalBase } from './core/eChartBase';
+import { echarts } from './echarts';
 
-export function useChart(ref: RefObject<HTMLElement> | MutableRefObject<HTMLElement>) {
+export function useChart(
+  ref: RefObject<HTMLElement> | MutableRefObject<HTMLElement>
+) {
   const chartRef = useRef<echarts.ECharts>();
   const isMounted = useIsMounted();
   useMountEffect(() => {
-
-    if(!ref.current || !isMounted) {
+    if (!ref.current || !isMounted) {
       return;
     }
 
@@ -28,16 +42,19 @@ export function useChart(ref: RefObject<HTMLElement> | MutableRefObject<HTMLElem
   return chartRef.current;
 }
 
-
 /**
  * @deprecated The method should not be used
  */
-export function useWedaChart(domRef, ModalClass: IEchartModalBase, options: echarts.EChartsCoreOption) {
+export function useWedaChart(
+  domRef,
+  ModalClass: IEchartModalBase,
+  options: echarts.EChartsCoreOption
+) {
   const chart = useChart(domRef);
-  const getOptions = async() => {
+  const getOptions = async () => {
     const chartModal = new ModalClass();
     let finalOptions: any = await chartModal.setOptions(options);
-    if(!finalOptions) {
+    if (!finalOptions) {
       finalOptions = chartModal.getOptions() as any;
     }
     return finalOptions;
@@ -50,18 +67,19 @@ export function useWedaChart(domRef, ModalClass: IEchartModalBase, options: echa
   useDeepCompareEffect(() => {
     actions.execute();
   }, [
-  // options 变化，包含所有配置项，包括纯前端的配置项变化都会触发setOptions里发请求，但改不动了
-  options,
-  actions]);
+    // options 变化，包含所有配置项，包括纯前端的配置项变化都会触发setOptions里发请求，但改不动了
+    options,
+    actions,
+  ]);
   useEffect(() => {
-    if(state.status === 'success' && chart) {
+    if (state.status === 'success' && chart) {
       console.log(ModalClass.name, options, state.result, window.location.href);
       chart.setOption(
         state.result,
         true // noMerge 全刷
       );
     } else {
-      if(state.status === 'error') {
+      if (state.status === 'error') {
         console.error(state.error);
       }
     }

package/src/web/components/chart/statisticsCard/index.css

@@ -6,6 +6,7 @@
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
   border-radius: 6px;
   box-sizing: border-box;
+  font-size: 14px;
 }
 .weda-statistics-card.weda-statistics-card-pc {
   width: 276px;
@@ -18,8 +19,8 @@
 }
 
 .weda-statistics-card .weda-statistics-card__title {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1em;
+  line-height: 1.57142em;
   color: rgba(0, 0, 0, 0.6);
 }
 
@@ -28,15 +29,15 @@
 }
 
 .weda-statistics-card .weda-statistics-card__count {
-  font-size: 32px;
-  line-height: 44px;
+  font-size: 2.28571em;
+  line-height: 3.14285em;
   color: rgba(0, 0, 0, 0.9);
   word-break: break-all;
 }
 
 .weda-statistics-card .weda-statistics-card__unit {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1em;
+  line-height: 1.57142em;
   color: rgba(0, 0, 0, 0.4);
   margin-left: 4px;
   vertical-align: middle;
@@ -57,6 +58,6 @@
 }
 
 .weda-statistics-card-mobile .weda-statistics-card__count {
-  font-size: 28px;
-  line-height: 34px;
+  font-size: 2em;
+  line-height: 2.42857em;
 }

package/src/web/components/container/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 import classNames from '../../utils/classnames';
 
 export default function Container({
@@ -8,7 +8,7 @@ export default function Container({
   events = {},
   className,
   style,
-  id
+  id,
 }: PropsType) {
   return (
     <div
@@ -31,5 +31,4 @@ export default function Container({
 
 export interface PropsType extends CommonPropsType {
   title?: string;
-
-}
+}

package/src/web/components/drawer/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ConfigProvider, Drawer, DrawerProps } from 'tea-component';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 
 const TeaDrawer = ({
   size,
@@ -38,19 +38,30 @@ const TeaDrawer = ({
         disableCloseIcon={disableCloseIcon}
         outerClickClosable={outerClickClosable}
         {...eventsList}
-        >
+      >
         {childrenSlot}
       </Drawer>
     </ConfigProvider>
   );
 };
 
-export interface PropsType extends CommonPropsType, Pick<DrawerProps, 'size'|'title'|'showMask'|'placement'|'disableCloseIcon'|'outerClickClosable'|'subtitle'> {
+export interface PropsType
+  extends CommonPropsType,
+    Pick<
+      DrawerProps,
+      | 'size'
+      | 'title'
+      | 'showMask'
+      | 'placement'
+      | 'disableCloseIcon'
+      | 'outerClickClosable'
+      | 'subtitle'
+    > {
   visible: boolean;
   title?: string;
   extraSlot?: React.ReactNode;
   footerSlot?: React.ReactNode;
-  childrenSlot?: React.ReactNode;  
+  childrenSlot?: React.ReactNode;
 }
 
 export default TeaDrawer;

package/src/web/components/form/checkbox/index.tsx

@@ -7,7 +7,7 @@ import isObjectEqual from '../../../utils/isObjectEqual';
 import fromEntries from 'object.fromentries';
 import { usePlatform } from '../../../utils/platform';
 import { renderDecorator } from '../renderDecorator';
-import { CommonFormPropsType } from '../types';
+import type { CommonFormPropsType } from '../types';
 import { callWedaApi } from '../../../utils/tcb';
 import destr from 'destr';
 
@@ -27,7 +27,7 @@ export default function Checkbox({
   layout = 'horizontal',
   disabled = false,
   requiredFlag = false,
-  decorator
+  decorator,
 }: PropsType) {
   const cls = classNames({
     'weda-ui': true,
@@ -46,7 +46,8 @@ export default function Checkbox({
 
   const [option, setOption] = useState(range);
   const [checkedItems, setCheckedItems] = React.useState(
-    platform === 'h5' ? fromEntries(option.map(({ value, checked }) => [value, !!checked]))
+    platform === 'h5'
+      ? fromEntries(option.map(({ value, checked }) => [value, !!checked]))
       : option.filter(({ checked }) => checked).map(({ value }) => value)
   );
   // 两次range不同时, 需要刷新checkedItems
@@ -69,23 +70,25 @@ export default function Checkbox({
 
   useEffect(() => {
     if (format !== 'x-enum') {
-      setOption(range)
+      setOption(range);
     }
   }, [range]);
 
-  const fetchData = async (param:
-    { OptNameList?: object, PageIndex?: number, PageSize?: number }
-  ) => {
+  const fetchData = async (param: {
+    OptNameList?: object;
+    PageIndex?: number;
+    PageSize?: number;
+  }) => {
     let data = await callWedaApi({
       action: 'DescribeGeneralOptionsDetailList',
       data: param,
     });
     const config = destr(data?.Items?.[0]?.Config) ?? [];
-    const enumOption = config.map(item => {
+    const enumOption = config.map((item) => {
       return {
         label: item.value,
         value: item.key,
-        checked: false
+        checked: false,
       };
     });
     setOption(enumOption);
@@ -153,9 +156,8 @@ export default function Checkbox({
           disabled={disabled}
           value={Object.entries(checkedItems)
             .filter(([, checked]) => checked)
-            .map(([value]) => value)
-          }
-          onChange={value => {
+            .map(([value]) => value)}
+          onChange={(value) => {
             const newMap = option
               .map((opt) => opt.value)
               .reduce((acc, cur) => {
@@ -168,13 +170,11 @@ export default function Checkbox({
                 return acc;
               }, {});
             setCheckedItems(newMap);
-            events.change(
-              {
-                value: Object.entries(newMap)
-                  .filter(([, checked]) => checked)
-                  .map(([value]) => value),
-              },
-            );
+            events.change({
+              value: Object.entries(newMap)
+                .filter(([, checked]) => checked)
+                .map(([value]) => value),
+            });
           }}
         >
           {option.map(({ value, label }, index) => {
@@ -189,21 +189,22 @@ export default function Checkbox({
       </ConfigProvider>
     );
   }
-  return renderDecorator(checkboxElement, decorator)(
-    {
-      id,
-      className: cls,
-      style,
-      label: labelVisible ? label : null,
-      layout,
-      multiCell: true,
-      requiredFlag,
-    }
-  );
+  return renderDecorator(
+    checkboxElement,
+    decorator
+  )({
+    id,
+    className: cls,
+    style,
+    label: labelVisible ? label : null,
+    layout,
+    multiCell: true,
+    requiredFlag,
+  });
 }
 
 export interface PropsType extends CommonFormPropsType {
-  range?: { label: string, value: any;[key: string]: any }[];
+  range?: { label: string; value: any; [key: string]: any }[];
   format?: string;
   enumName?: string;
 }

package/src/web/components/form/enumSelect/NormalSelect.tsx

@@ -9,8 +9,6 @@ import { useSyncValue } from '../../../utils/useSyncValue';
 
 const { useState, useEffect } = React;
 
-
-
 const NormalSelect = ({
   // 系统属性
   id,

package/src/web/components/form/form/index.css

@@ -2,11 +2,8 @@
   color: inherit;
 }
 
-.wedatea2td-form > .gsd-h5-react-formitem,
-.wedatea2td-form > div > .gsd-h5-react-formitem {
-  padding-left: 32px;
-}
-
-.weda-ui.weda-form-pc, .weda-ui.gsd-h5-react-form-pc {
+.weda-ui.weda-form-pc,
+.weda-ui.gsd-h5-react-form-pc {
   padding-left: 24px;
+  padding-right: 24px;
 }

package/src/web/components/form/form/index.tsx

@@ -16,6 +16,7 @@ export default function Form({
   // buttonSlot,
   style,
   id,
+  layout,
 }) {
   const platform = usePlatform();
   const cls = classNames({
@@ -30,7 +31,7 @@ export default function Form({
     return (
       <ConfigProvider classPrefix="wedatea2td">
         {/** @ts-expect-error tea form id */}
-        <TeaForm className={cls} style={style} id={id}>
+        <TeaForm layout={layout} className={cls} style={style} id={id}>
           {contentSlot}
         </TeaForm>
       </ConfigProvider>

package/src/web/components/form/formcell/index.css

@@ -16,11 +16,16 @@
 }
 .weda-formcells.weui-flex .weda-formcells__label {
   width: 130px;
+  padding-bottom: 16px;
 }
 .weui-cells__group_form .weui-cell {
   padding: 16px 16px;
 }
 
+.weda-formcells .weda-formcells__label {
+  padding-bottom: 8px;
+}
+
 .weda-formcells__content.weui-flex__item .weui-cell_form {
   padding: 0;
 }
@@ -29,7 +34,6 @@
   padding-right: 16px;
 }
 
-
 /* formcell 在 form container 外部兼容 and 独立 layout 适配 */
 
 .weda-formcells__pc.vertical .wedatea2td-form__controls,
@@ -39,14 +43,10 @@
 .weda-formcells__pc.vertical .wedatea2td-form__label {
   padding-bottom: 0;
   padding-top: 0;
-  font-size: 1rem;
   width: auto;
   margin-bottom: 10px;
 }
 
-.weda-formcells__pc.vertical .wedatea2td-form__label label {
-  color: rgba(0, 0, 0, 0.9);
-}
 .weda-formcells__pc.vertical .wedatea2td-form__help-text {
   margin-top: 4px;
 }
@@ -62,11 +62,8 @@
 .weda-formcells__pc .wedatea2td-form__label {
   display: table-cell; /*container 外适配*/
   vertical-align: baseline;
-  color: rgba(0, 0, 0, 0.9);
-  padding-right: 20px;
   padding-top: 7px;
   padding-bottom: 7px;
-  width: 1px;
 }
 .wedatea2td-form .wedatea2td-form__label .wedatea2td-icon {
   vertical-align: -4px;
@@ -74,23 +71,15 @@
 .weda-formcells__pc .wedatea2td-form__label label,
 .weda-formcells__pc .wedatea2td-form__label legend {
   display: inline-block;
-  white-space: nowrap;
-  font-size: 1rem;
   transform: translateZ(0);
+  width: 98px;
 }
 
 /*formcell*/
-.wedatea2td-form__item.weda-ui {
-  display: block;
-}
 
-.wedatea2td-form .wedatea2td-form__item {
-  display: table-row;
-}
 .weda-formcells__full-width .wedatea2td-form__controls {
   width: 100%;
 }
 /*formcell end*/
 
-
 /* formcell 在 form container 外部兼容 */

package/src/web/components/form/formcell/index.tsx

@@ -33,12 +33,8 @@ export default function FormCell({
             [layout]: layout,
             [className]: [className],
           })}
-          label={
-            <>
-              {label}
-              {requiredFlag && <span className="weda-formcells__flag">*</span>}
-            </>
-          }
+          label={label}
+          required={requiredFlag}
         >
           {children}
         </TeaForm.Item>

package/src/web/components/form/input/index.css

@@ -8,12 +8,12 @@
 把weui-cell 的padding还回到input
 */
 .weda-ui input.weui-input {
-    padding: 28px 0;
+  padding: 28px 0;
 }
 
 .weda-ui.weda-input .weui-flex__item .weui-cell_form {
-    padding: 0;
-    padding-right: 16px;
+  padding: 0;
+  padding-right: 16px;
 }
 
 .weda-ui.weda-input .weui-cell_form {
@@ -29,8 +29,12 @@
     START
 */
 .weda-ui .wedatea2td-input {
-    background: inherit;
+  background: inherit;
 }
 /**
  * END
  */
+
+.weda-input .weui-input {
+  font-weight: inherit;
+}