@cloudbase/weda-ui 2.0.10 → 2.0.26

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import classNames from '../../../utils/classnames';
 import './index.css';
-import {ConfigProvider, Form as TeaForm} from 'tea-component';
+import { ConfigProvider, Form as TeaForm } from 'tea-component';
 import { usePlatform } from '../../../utils/platform';
-import { CommonFormPropsType } from '../types';
+import type { CommonFormPropsType } from '../types';
 
 export default function Form({
   // 系统属性
@@ -16,6 +16,7 @@ export default function Form({
   // buttonSlot,
   style,
   id,
+  layout,
 }) {
   const platform = usePlatform();
   const cls = classNames({
@@ -26,14 +27,14 @@ export default function Form({
     'gsd-h5-react-form-pc': platform === 'pc',
     [className]: className,
   });
-  if(platform === 'pc') {
+  if (platform === 'pc') {
     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>
+        </TeaForm>
+      </ConfigProvider>
     );
   }
   return (

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

@@ -1,22 +1,31 @@
 .weda-formcells__flag {
   display: inline-block;
-  margin-right: 4px;
+  margin-left: 4px;
   font-family: SimSun;
   font-size: 12px;
   color: #f60;
   align-self: flex-start;
 }
 
+.weda-formcells__label.weui-cell {
+  align-items: flex-start;
+}
+
 .weda-ui .weui-cells__group_form .weui-cells {
   margin: 0;
 }
 .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;
 }
@@ -25,7 +34,6 @@
   padding-right: 16px;
 }
 
-
 /* formcell 在 form container 外部兼容 and 独立 layout 适配 */
 
 .weda-formcells__pc.vertical .wedatea2td-form__controls,
@@ -35,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;
 }
@@ -58,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;
@@ -70,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

@@ -4,7 +4,7 @@ import classNames from '../../../utils/classnames';
 import './index.css';
 import { usePlatform } from '../../../utils/platform';
 import { ConfigProvider, Form as TeaForm } from 'tea-component';
-import { CommonFormPropsType } from '../types';
+import type { CommonFormPropsType } from '../types';
 
 export default function FormCell({
   className,
@@ -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;
+}

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

@@ -5,7 +5,7 @@ import { Input as TeaInput, ConfigProvider } from 'tea-component';
 import { renderDecorator } from '../renderDecorator';
 import { useSyncValue } from '../../../utils/useSyncValue';
 import './index.css';
-import { CommonFormPropsType } from '../types';
+import type { CommonFormPropsType } from '../types';
 
 export default function Input({
   id,
@@ -80,69 +80,77 @@ export default function Input({
   const onBlur = function (e) {
     events.blur({ value: e.target.value }, { originEvent: e });
   };
-const fieldEl = platform === 'h5' ? <div className={subCls}>
-  <div className="weui-cell__bd weui-flex">
-    <input
-        className="weui-input"
-        type={inputType}
-        placeholder={placeholder}
-        value={value}
-        disabled={disabled}
-        name={name}
-        autoFocus={autoFocus}
-        onChange={onChange}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onKeyDown={onKeyDown}
-        role="input"
-      />
-      {clearable &&
-        <button
-          className="weui-btn_reset weui-btn_icon weui-btn_input-clear"
-          onMouseDown={onClear}
-        >
-          <i className="weui-icon-clear"></i>
-        </button>
-      }
-  </div>
-</div> : <ConfigProvider classPrefix="wedatea2td">
-  <TeaInput
-  size={size}
-  type={inputType}
-  placeholder={placeholder}
-  value={value}
-  disabled={disabled}
-  name={name}
-  autoFocus={autoFocus}
-  onChange={onChange}
-  onFocus={onFocus}
-  onBlur={onBlur}
-  onKeyDown={onKeyDown}
-/></ConfigProvider>;
-return renderDecorator(fieldEl, decorator)({
-  id,
-  className: cls,
-  style,
-  label: labelVisible ? label : null,
-  layout,
-  multiCell: false,
-  requiredFlag,
-  size
-});
+  const fieldEl =
+    platform === 'h5' ? (
+      <div className={subCls}>
+        <div className="weui-cell__bd weui-flex">
+          <input
+            className="weui-input"
+            type={inputType}
+            placeholder={placeholder}
+            value={value}
+            disabled={disabled}
+            name={name}
+            autoFocus={autoFocus}
+            onChange={onChange}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onKeyDown={onKeyDown}
+            role="input"
+          />
+          {clearable && (
+            <button
+              className="weui-btn_reset weui-btn_icon weui-btn_input-clear"
+              onMouseDown={onClear}
+            >
+              <i className="weui-icon-clear"></i>
+            </button>
+          )}
+        </div>
+      </div>
+    ) : (
+      <ConfigProvider classPrefix="wedatea2td">
+        <TeaInput
+          size={size}
+          type={inputType}
+          placeholder={placeholder}
+          value={value}
+          disabled={disabled}
+          name={name}
+          autoFocus={autoFocus}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onKeyDown={onKeyDown}
+        />
+      </ConfigProvider>
+    );
+  return renderDecorator(
+    fieldEl,
+    decorator
+  )({
+    id,
+    className: cls,
+    style,
+    label: labelVisible ? label : null,
+    layout,
+    multiCell: false,
+    requiredFlag,
+    size,
+  });
 }
 
 export interface PropsType extends CommonFormPropsType {
   defaultValue?: string;
   password?: boolean;
   placeholder?: string;
-  type?: "text" | "number" | "idcard" | "digit";
+  type?: 'text' | 'number' | 'idcard' | 'digit';
   maxLength?: number;
   focus?: boolean;
-  size?: "s" | "m" | "l" | "full";
+  size?: 's' | 'm' | 'l' | 'full';
   clearable?: boolean;
 }
 
-
 function getInputType(type, password) {
   if (password) {
     return 'password';

package/src/web/components/form/location/common/mapChoose.css

@@ -1,4 +1,6 @@
 /* mapChoose组件 */
+
+/* em = 16px */
 .weda-ui_map-choose {
   width: 100%;
   height: 100%;
@@ -35,8 +37,8 @@
   padding-left: 10px;
   padding-right: 10px;
   color: #b4b4b4;
-  font-size: 15px;
-  line-height: 31px;
+  font-size: 1em;
+  line-height: 2em;
   border-radius: 5px;
   overflow: hidden;
   white-space: nowrap;
@@ -57,9 +59,9 @@
   right: 0;
   width: 55px;
   height: 46px;
-  line-height: 46px;
+  line-height: 2.875em;
   text-align: center;
-  font-size: 16px;
+  font-size: 1em;
   color: #0079ff;
   background-color: #fff;
   cursor: pointer;
@@ -76,8 +78,8 @@
   padding-top: 6px;
   padding-bottom: 6px;
   border: 0;
-  font-size: 14px;
-  line-height: 18px;
+  font-size: 0.875em;
+  line-height: 1.125em;
   background: 0 0;
   position: relative;
   z-index: 1;
@@ -143,11 +145,11 @@
 }
 .map-choose-warp_sugges_choosed span {
   position: absolute;
-  right: 20px;
+  right: 1.25em;
   top: 50%;
   transform: translate(0, -50%);
-  width: 16px;
-  height: 16px;
+  width: 1em;
+  height: 1em;
   display: block !important;
   background-image: url('https://qcloudimg.tencent-cloud.cn/raw/354c15c0cb845120ac3e9c474e6737b3.png');
   background-size: 100% 100%;
@@ -162,8 +164,8 @@
 }
 .map-choose-warp_sugges_title,
 .map-choose-explore_title {
-  font-size: 14px;
-  line-height: 27px;
+  font-size: 0.875em;
+  line-height: 1.6875em;
   color: #333;
   font-weight: 400;
   display: block;

package/src/web/components/form/location/common/selectModal.jsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Modal, Button } from 'tea-component';
-import * as PropTypes from 'prop-types';
 import { usePlatform } from '../../../../utils/platform';
 import classNames from '../../../../utils/classnames';
 import MapChoose from './mapChoose';
@@ -32,9 +31,10 @@ export default function SelectModal({
   };
 
   const getPosition = (value) => {
-    const { title, location } = value;
+    const { title, location, address } = value;
     let loc = {
       poiname: title,
+      detailedAddress: address,
       latlng: { lat: location.lat, lng: location.lng },
     };
     positionRef.current = loc;
@@ -71,12 +71,3 @@ export default function SelectModal({
     </Modal>
   );
 }
-
-SelectModal.propTypes = {
-  location: PropTypes.object,
-  isSelectMapVisible: PropTypes.bool,
-  APIKEY: PropTypes.string,
-  setLocation: PropTypes.func,
-  setIsSelectMapVisible: PropTypes.func,
-  chooseLocation: PropTypes.func,
-};