@cloudbase/weda-ui 2.0.11 → 2.0.27

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

@@ -50,8 +50,8 @@
   .wedatea2td-menu__title
   .wedatea2td-menu__title-icon {
   display: block;
-  width: 32px;
-  height: 32px;
+  width: 2.28571em;
+  height: 2.28571em;
   margin-right: 12px;
 }
 
@@ -60,8 +60,8 @@
   .weda-menu__menu-content
   .wedatea2td-menu__title
   .wedatea2td-h2 {
-  font-size: 16px;
-  line-height: 18px;
+  font-size: 1.1428571em;
+  line-height: 1.28571em;
   color: #000000;
   margin-top: 0;
   font-weight: normal;
@@ -85,8 +85,8 @@
   .wedatea2td-menu__body
   .wedatea2td-menu__item
   .wedatea2td-menu__list-icon {
-  width: 20px;
-  height: 20px;
+  width: 1.42857em;
+  height: 1.42857em;
   margin-top: 0;
 }
 
@@ -96,8 +96,8 @@
   .wedatea2td-menu__item
   .wedatea2td-menu__text {
   font-weight: normal;
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1em;
+  line-height: 1.5714em;
   color: rgba(0, 0, 0, 0.9);
   padding: 0;
 }
@@ -298,7 +298,7 @@
 
 .weda-menu-horizontal .weda-menu__nav .weda-menu__nav-title .weda-menu__title {
   font-weight: normal;
-  font-size: 16px;
+  font-size: 1.14285em;
   line-height: 18px;
   color: #000000;
   margin-left: 12px;
@@ -410,8 +410,8 @@
 
 .weda-menu-horizontal .wedatea2td-dropdown .wedatea2td-dropdown__value {
   font-weight: 400;
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1em;
+  line-height: 1.5714em;
   color: #000000;
   white-space: nowrap;
 }
@@ -437,8 +437,8 @@
   .weda-menu__dropdown
   .wedatea2td-dropdown__value {
   font-weight: normal;
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1em;
+  line-height: 1.5714em;
   color: #000000;
   padding: 0;
   white-space: nowrap;
@@ -450,7 +450,7 @@
   .wedatea2td-dropdown__header {
   padding-left: 0;
   padding-right: 23px;
-  height: 22px;
+  height: 21.5714em;
 }
 
 .weda-menu-horizontal
@@ -515,8 +515,8 @@
   margin-bottom: 4px;
   color: rgba(0, 0, 0, 0.9);
   font-weight: 400;
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1em;
+  line-height: 1.5714em;
 }
 
 .weda-menu__dropdown-menu-list .weda-menu__dropdown-list-item:last-child {
@@ -543,7 +543,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 20px 0 16px;
-  height: 64px;
+  height: 4.5714em;
   background-color: #fff;
   position: relative;
   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05);
@@ -557,8 +557,8 @@
 
 .weda-menu-mobile .weda-menu__bar-main .weda-menu__main-logo {
   font-weight: normal;
-  font-size: 18px;
-  line-height: 18px;
+  font-size: 1.28571em;
+  line-height: 1.28571em;
   color: #000000;
   text-decoration: none;
   display: flex;
@@ -566,8 +566,8 @@
 }
 
 .weda-menu-mobile .weda-menu__bar-main .weda-menu__main-icon {
-  width: 32px;
-  height: 32px;
+  width: 2.2857em;
+  height: 2.2857em;
   margin-right: 12px;
 }
 
@@ -579,8 +579,8 @@
 
 .weda-menu-mobile .weda-menu__bar-extra .weda-menu__bar-btn,
 .weda-menu-mobile .weda-menu__bar-extra .weda-menu__bar-btn--close {
-  width: 24px;
-  height: 24px;
+  width: 1.71428em;
+  height: 1.71428em;
 }
 
 .weda-menu__drawer {
@@ -676,8 +676,8 @@
   .wedatea2td-menu__submenu
   .wedatea2td-menu__list
   .wedatea2td-menu__text {
-  font-size: 16px;
-  line-height: 20px;
+  font-size: 1.14285em;
+  line-height: 1.142857em;
   color: rgba(0, 0, 0, 0.9);
   padding: 0;
   max-width: 100%;
@@ -719,7 +719,7 @@
 .weda-menu__fonticon.lcap-icon,
 .weda-menu__fonticon.t-icon {
   margin: 0 4px 0 0;
-  font-size: 14px;
+  font-size: 1em;
 }
 .weda-menu__fonticon.lcap-icon:hover {
   background-color: unset;

package/src/web/components/picker/datePicker.tsx

@@ -2,14 +2,14 @@ import * as React from 'react';
 import weui from '../../utils/weui';
 
 import classNames from '../../utils/classnames';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 
 export interface PropsType extends CommonPropsType {
   start: string;
   end: string;
   defaultValue: string;
   title: string;
-  children?: React.ReactNode|undefined
+  children?: React.ReactNode | undefined;
 }
 
 export default function DatePicker(props: PropsType) {
@@ -45,4 +45,4 @@ export default function DatePicker(props: PropsType) {
       {children}
     </div>
   );
-}
+}

package/src/web/components/picker/picker.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import weui from '../../utils/weui';
 import classNames from '../../utils/classnames';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 
 export interface PropsType extends CommonPropsType {
-  title?: string
+  title?: string;
 }
 
 export default function Picker(props: PropsType) {
@@ -56,4 +56,4 @@ export default function Picker(props: PropsType) {
       {children}
     </div>
   );
-}
+}

package/src/web/components/richText/index.jsx

@@ -17,7 +17,7 @@ import {
   Text,
 } from 'tea-component';
 import { v4 as uuidv4 } from 'uuid';
-import {defaultBase64} from './const';
+import { defaultBase64 } from './const';
 
 import './index.css';
 import 'braft-editor/dist/index.css';
@@ -34,7 +34,6 @@ const IMAGE_TYPES = [
   'image/svg+xml',
 ];
 
-
 export default function RichText({
   // 系统属性
   id,
@@ -53,7 +52,7 @@ export default function RichText({
   acceptTypes,
   cloudPath,
   disabled,
-  decorator
+  decorator,
 }) {
   const [editorState, setEditorState] = useState();
 
@@ -71,7 +70,6 @@ export default function RichText({
     'weui-cell_disabled': isH5 && disabled,
   });
 
-
   const onDataChange = function (value) {
     events.change && events.change({ value: value === '<p></p>' ? '' : value });
     if (onChange) {
@@ -125,49 +123,47 @@ export default function RichText({
   };
 
   const richTextEl = (
-    
-      
-      <div className={subCls}>
-        <div
-          style={{
-            border: '1px solid #d1d1d1',
-            backgroundColor: '#fff',
-            ...style,
+    <div className={subCls}>
+      <div
+        style={{
+          border: '1px solid #d1d1d1',
+          backgroundColor: '#fff',
+          ...style,
+        }}
+      >
+        <BraftEditor
+          key={id}
+          value={editorState}
+          readOnly={readOnly}
+          blockRendererFn={blockRenderFn}
+          onBlur={(s) => {
+            setEditorState(s);
+            onDataChange(s.toHTML());
+            if (s.toHTML().length > 32768) {
+              message.warning({
+                content: '富文本长度过长，可能导致保存失败',
+              });
+            }
           }}
-        >
-          <BraftEditor
-            key={id}
-            value={editorState}
-            readOnly={readOnly}
-            blockRendererFn={blockRenderFn}
-            onBlur={(s) => {
-              setEditorState(s);
-              onDataChange(s.toHTML());
-              if (s.toHTML().length > 32768) {
-                message.warning({
-                  content: '富文本长度过长，可能导致保存失败',
-                });
-              }
-            }}
-            excludeControls={['media', 'fullscreen']}
-            /** @ts-ignore */
-            extendControls={extendControls}
-            handleKeyCommand={(command, editState) => {
-              const newState = ContentUtils.handleKeyCommand(
-                editState,
-                command
-              );
-              if (newState) {
-                setEditorState(newState);
-                return true;
-              }
-              return false;
-            }}
-          />
-        </div>
+          excludeControls={['media', 'fullscreen']}
+          /** @ts-ignore */
+          extendControls={extendControls}
+          handleKeyCommand={(command, editState) => {
+            const newState = ContentUtils.handleKeyCommand(editState, command);
+            if (newState) {
+              setEditorState(newState);
+              return true;
+            }
+            return false;
+          }}
+        />
       </div>
+    </div>
   );
-  return renderDecorator(richTextEl, decorator)({
+  return renderDecorator(
+    richTextEl,
+    decorator
+  )({
     id,
     className: cls,
     style,
@@ -436,8 +432,7 @@ RichText.propTypes = {
   acceptTypes: PropsTypes.array,
   cloudPath: PropsTypes.string,
   disabled: PropsTypes.bool,
-  decorator: PropsTypes.oneOfType([PropsTypes.array, PropsTypes.node])
-
+  decorator: PropsTypes.oneOfType([PropsTypes.array, PropsTypes.node]),
 };
 
 RichText.defaultProps = {

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

@@ -1,3 +1,6 @@
+.weda-RichTextView {
+  font-size: 14px;
+}
 .weda-RichTextView blockquote {
   margin: 0 0 10px;
   padding: 15px 20px;
@@ -17,9 +20,10 @@
   border-radius: 3px;
   color: #666;
   font-family: monospace;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 16px;
+  font-size: 1em;
+  /* font-weight: 400; */
+  font-weight: inherit;
+  line-height: 1.14285px;
   word-wrap: break-word;
   white-space: pre-wrap;
 }

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

@@ -3,18 +3,18 @@ import classNames from '../../utils/classnames';
 import { getTempFileURL } from '../../utils/tcb';
 import './index.css';
 import { LOAD_ERR_IMG_BASE64 } from '../../utils/constant';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 import destr from 'destr';
 
 export interface PropsType extends CommonPropsType {
-    value: string
+  value: string;
 }
 
 export default function RichTextView({
   value = '',
   className,
   style,
-  id
+  id,
 }: PropsType) {
   let parseValue = destr(value);
   const cls = classNames({
@@ -55,9 +55,7 @@ export default function RichTextView({
 
   return (
     displayValue && (
-      <div className={cls} style={style}
-        id={id}
-      >
+      <div className={cls} style={style} id={id}>
         <div dangerouslySetInnerHTML={{ __html: displayValue }}></div>
       </div>
     )

package/src/web/components/scrollView/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 interface PropsType extends CommonPropsType {
@@ -145,4 +145,4 @@ export default function ScrollView({
       {children}
     </div>
   );
-}
+}

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

@@ -1,10 +1,9 @@
 import * as React from 'react';
 
 export interface PropsType {
-  className?: string,
-  name: string,
-  compositeParent: any
-
+  className?: string;
+  name: string;
+  compositeParent: any;
 }
 export default function Slot({ compositeParent, name, className }: PropsType) {
   if (!compositeParent) {

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

@@ -35,7 +35,7 @@
   height: 100%;
 }
 
-.weda-ui.g-swiper .g-swiper-item > div  {
+.weda-ui.g-swiper .g-swiper-item > div {
   height: auto;
 }
 

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

@@ -2,10 +2,14 @@ import * as React from 'react';
 import { useState, useEffect, useRef } from 'react';
 import classNames from '../../utils/classnames';
 import Swipe from 'react-easy-swipe';
-import {useDebouncedCallback, useEventListener, useResizeObserver} from '@react-hookz/web';
+import {
+  useDebouncedCallback,
+  useEventListener,
+  useResizeObserver,
+} from '@react-hookz/web';
 
 import './index.css';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 
 export interface PropsType extends CommonPropsType {
   /**
@@ -180,7 +184,16 @@ export default function Swiper({
         >
           {itemsClone[itemCount - 1]}
           {React.Children.map(children, (x, i) => {
-            return <SwiperItem height={height} setHeight={setHeight} currentIndex={currentIndex} index={i}>{x}</SwiperItem>;
+            return (
+              <SwiperItem
+                height={height}
+                setHeight={setHeight}
+                currentIndex={currentIndex}
+                index={i}
+              >
+                {x}
+              </SwiperItem>
+            );
           })}
           {itemsClone[0]}
         </Swipe>
@@ -234,21 +247,26 @@ export default function Swiper({
 }
 
 const SwiperItem: React.FC<{
-  setHeight: React.Dispatch<React.SetStateAction<number>>,
-  currentIndex: number,
-  index: number,
-  height: number,
-  children?: React.ReactNode
-}> = ({height, setHeight, children, currentIndex, index}) => {
+  setHeight: React.Dispatch<React.SetStateAction<number>>;
+  currentIndex: number;
+  index: number;
+  height: number;
+  children?: React.ReactNode;
+}> = ({ height, setHeight, children, currentIndex, index }) => {
   const firstChildRef = useRef<HTMLDivElement>(null);
-  const syncHeight = useDebouncedCallback((e) => {
-    setHeight(e.contentRect.height);
-  }, [setHeight], 500, 2000); // 必须debounce延迟，让resize完成后再设置高度
+  const syncHeight = useDebouncedCallback(
+    (e) => {
+      setHeight(e.contentRect.height);
+    },
+    [setHeight],
+    500,
+    2000
+  ); // 必须debounce延迟，让resize完成后再设置高度
 
   // 因为有loading 所以得用resizeobserver
   // @ts-ignore
   useResizeObserver(firstChildRef, (e) => {
-    if(currentIndex === index) {
+    if (currentIndex === index) {
       syncHeight(e);
     }
   });
@@ -263,11 +281,11 @@ const SwiperItem: React.FC<{
       <div
         ref={firstChildRef}
         style={{
-          height: height > 0 ? '100%' : 'auto'
+          height: height > 0 ? '100%' : 'auto',
         }}
       >
         {children}
       </div>
     </div>
   );
-};
+};

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

@@ -11,7 +11,6 @@
   align-items: center;
   background-color: #fff;
   position: relative;
-  font-size: 0;
   white-space: nowrap;
   border-bottom: 1px solid #eee;
   overflow-x: auto;
@@ -30,7 +29,7 @@
   flex-basis: 0;
   flex-grow: 1;
   height: 100%;
-  font-size: 14px;
+  font-size: 1em;
   color: #000;
   box-sizing: border-box;
   padding: 0 16px;
@@ -62,4 +61,4 @@
   content: '';
   width: 100%;
   border-top: 2px solid #0052d9;
-}
+}

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import loadable from '@loadable/component';
-import { CommonPropsType } from '../../types';
+// import loadable from '@loadable/component';
+import type { CommonPropsType } from '../../types';
 import { usePlatform } from '../../utils/platform';
-import { fallback } from '../../utils/loading-fallback';
+// import { fallback } from '../../utils/loading-fallback';
 import TabsH5 from './tabs.h5';
 import TabsPc from './tabs.pc';
 
@@ -17,9 +17,9 @@ export interface PropsType extends CommonPropsType {
     // @deprecated
     name?: string;
   }[];
-  selectedIndex: number|string
-  isMultipleSlot: boolean
-  [key: string]: React.ReactNode
+  selectedIndex: number | string;
+  isMultipleSlot: boolean;
+  [key: string]: React.ReactNode;
   // [panel: `panel${number}`]: React.ReactNode; // require typescript@4.4
 }
 

package/src/web/components/tabs/tabs.h5.tsx

@@ -3,8 +3,12 @@ import React, { useEffect, useMemo } from 'react';
 import './index.css';
 import classNames from '../../utils/classnames';
 import { useSyncValue } from '../../utils/useSyncValue';
-import {PropsType} from './index';
-import { useCustomCompareEffect, usePrevious, useSyncedRef } from '@react-hookz/web';
+import { PropsType } from './index';
+import {
+  useCustomCompareEffect,
+  usePrevious,
+  useSyncedRef,
+} from '@react-hookz/web';
 import isObjectEqual from '../../utils/isObjectEqual';
 
 export default function TabsH5({
@@ -17,27 +21,28 @@ export default function TabsH5({
   ...restProps
 }: PropsType) {
   const [currentIndex, setCurrentIndex] = useSyncValue(
-    typeof selectedIndex === 'string' ?
-    parseInt(selectedIndex) : selectedIndex
+    typeof selectedIndex === 'string' ? parseInt(selectedIndex) : selectedIndex
   );
   const stickyStyle = useMemo(() => {
     const length = tabs.length;
     return {
-      width: `${1 / length * 100}%`,
-      transform: `translate3d( ${currentIndex * 100}%, 0, 0)`
+      width: `${(1 / length) * 100}%`,
+      transform: `translate3d( ${currentIndex * 100}%, 0, 0)`,
     };
   }, [tabs, currentIndex]);
 
   const eventRef = useSyncedRef(events);
-  useCustomCompareEffect(() => {
-    eventRef.current.change(
-      {
+  useCustomCompareEffect(
+    () => {
+      eventRef.current.change({
         id: currentIndex,
         label: tabs[currentIndex]?.title,
         value: tabs[currentIndex]?.value,
-      },
-    );
-  }, [currentIndex, tabs], isObjectEqual);
+      });
+    },
+    [currentIndex, tabs],
+    isObjectEqual
+  );
   return (
     <div
       data-testid="tabs"