@cloudbase/weda-ui 2.0.10 → 2.0.26

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

@@ -1,4 +1,8 @@
-import { useCustomCompareEffect, useMountEffect, useSyncedRef } from '@react-hookz/web';
+import {
+  useCustomCompareEffect,
+  useMountEffect,
+  useSyncedRef,
+} from '@react-hookz/web';
 import * as React from 'react';
 import { Tabs as TeaTabs, TabPanel, ConfigProvider } from 'tea-component';
 import classNames from '../../utils/classnames';
@@ -6,7 +10,6 @@ import isObjectEqual from '../../utils/isObjectEqual';
 import { useSyncValue } from '../../utils/useSyncValue';
 import { PropsType } from './index';
 
-
 export default function TabsPc({
   tabs = [],
   selectedIndex,
@@ -16,48 +19,56 @@ export default function TabsPc({
   isMultipleSlot = true,
   ...restProps
 }: PropsType) {
-
   const [activeIndex, setActiveIndex] = useSyncValue(selectedIndex);
   const _tabs = React.useMemo(() => {
-    return Array.isArray(tabs) && tabs.length && tabs.map((item, index) => {
-      return {
-        id: index.toString(),
-        label: item.title,
-        value: item.value
-      };
-    });
+    return (
+      Array.isArray(tabs) &&
+      tabs.length &&
+      tabs.map((item, index) => {
+        return {
+          id: index.toString(),
+          label: item.title,
+          value: item.value,
+        };
+      })
+    );
   }, [tabs]);
 
   const eventsRef = useSyncedRef(events);
-  useCustomCompareEffect(() => {
-    eventsRef.current && eventsRef.current.change({
-      id: _tabs[activeIndex]?.id,
-      label: _tabs[activeIndex]?.label,
-      value: _tabs[activeIndex]?.value,
-    });
-  }, [activeIndex, _tabs], isObjectEqual);
+  useCustomCompareEffect(
+    () => {
+      eventsRef.current &&
+        eventsRef.current.change({
+          id: _tabs[activeIndex]?.id,
+          label: _tabs[activeIndex]?.label,
+          value: _tabs[activeIndex]?.value,
+        });
+    },
+    [activeIndex, _tabs],
+    isObjectEqual
+  );
   const onActive = (e) => {
     setActiveIndex(e.id);
   };
   return (
     <ConfigProvider classPrefix="wedatea2td">
-    <TeaTabs  style={style} tabs={_tabs} activeId={String(activeIndex)} onActive={onActive} className={classNames(
-      "weda-tabs_pc",
-      {
-        [className]: className
-      }
-      )}>
-      {_tabs?.map(
-        (item, index) => (
-          <TabPanel
-          key={item.id}
-          id={item.id}
-          >
-            {isMultipleSlot ? restProps[`panel${index + 1}`] : restProps['panel1']}
+      <TeaTabs
+        style={style}
+        tabs={_tabs}
+        activeId={String(activeIndex)}
+        onActive={onActive}
+        className={classNames('weda-tabs_pc', {
+          [className]: className,
+        })}
+      >
+        {_tabs?.map((item, index) => (
+          <TabPanel key={item.id} id={item.id}>
+            {isMultipleSlot
+              ? restProps[`panel${index + 1}`]
+              : restProps['panel1']}
           </TabPanel>
-        )
-        )}
-    </TeaTabs>
-  </ConfigProvider>
+        ))}
+      </TeaTabs>
+    </ConfigProvider>
   );
 }

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

@@ -23,4 +23,4 @@
 }
 .weda-text.level_6 {
   font-size: 24px !important;
-}
+}

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

@@ -1,20 +1,19 @@
 import * as React from 'react';
 import classNames from '../../utils/classnames';
-import { CommonPropsType, unknownFunction } from '../../types';
+import type { CommonPropsType, unknownFunction } from '../../types';
 import './index.css';
 
 export interface PropsType extends CommonPropsType {
-  text: string,
-  level: string,
-  maxLines: number,
-  space: boolean,
-  userSelect: boolean,
-  textAlign: string,
-  textColor: string,
-  contenteditable: HTMLParagraphElement['contentEditable'],
-  onInput: unknownFunction,
-  onBlur: unknownFunction
-
+  text: string;
+  level: string;
+  maxLines: number;
+  space: boolean;
+  userSelect: boolean;
+  textAlign: string;
+  textColor: string;
+  contenteditable: HTMLParagraphElement['contentEditable'];
+  onInput: unknownFunction;
+  onBlur: unknownFunction;
 }
 export default function Text({
   text,
@@ -28,7 +27,7 @@ export default function Text({
   level,
   contenteditable,
   onInput,
-  onBlur
+  onBlur,
 }: PropsType) {
   const textStyle: React.CSSProperties = {
     WebkitLineClamp: maxLines,
@@ -38,7 +37,7 @@ export default function Text({
   if (!userSelect) {
     textStyle.userSelect = 'none';
   }
-  const levelName = (level === '0' || !level) ? '' : `level_${level}`;
+  const levelName = level === '0' || !level ? '' : `level_${level}`;
 
   const inlineStyle = React.useMemo(
     () => ({ ...textStyle, ...style }),

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

@@ -0,0 +1,42 @@
+.weda-ui_video {
+  height: 500px;
+  overflow: hidden;
+  background-color: #000;
+  position: relative;
+}
+
+.weda-ui_video-h5 {
+  height: 250px;
+}
+
+.weda-ui_video_control .vjs-control-bar {
+  background: none !important;
+}
+
+.weda-ui_video__video-wrap {
+  padding-top: 0 !important;
+  height: 100% !important;
+}
+
+.vjs-paused .vjs-big-play-button,
+.vjs-paused.vjs-has-started .vjs-big-play-button {
+  display: block;
+}
+
+.vjs-slider-vertical .vjs-volume-level:before {
+  left: -0.5em !important;
+}
+
+.weda-ui_video__video-loading {
+  position: absolute;
+  z-index: 100;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}

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

@@ -0,0 +1,208 @@
+import * as React from 'react';
+import videojs from 'video.js';
+import 'video.js/dist/video-js.css';
+import './index.css';
+import { usePlatform, isCloudFileID, isInIde } from '../../utils/platform';
+import { getTempFileURL } from '../../utils/tcb';
+import classNames from '../../utils/classnames';
+import type { CommonPropsType } from '../../types';
+import { ConfigProvider, Icon } from 'tea-component';
+
+const { useEffect, useRef, useMemo, useState } = React;
+export interface VideoProps {
+  videoDataSource: string;
+  posterImage: string;
+  autoPlay: boolean;
+  loopPlay: boolean;
+  mutePlay: boolean;
+  controlBarStatus: boolean;
+  startTime: number;
+  endTime: number;
+}
+
+export type WedaVideoProps = Partial<CommonPropsType & VideoProps>;
+
+const MimetypesKind = {
+  opus: 'video/ogg',
+  ogv: 'video/ogg',
+  mp4: 'video/mp4',
+  mov: 'video/mp4',
+  m4v: 'video/mp4',
+  mkv: 'video/x-matroska',
+  m4a: 'audio/mp4',
+  mp3: 'audio/mpeg',
+  aac: 'audio/aac',
+  caf: 'audio/x-caf',
+  flac: 'audio/flac',
+  oga: 'audio/ogg',
+  wav: 'audio/wav',
+  m3u8: 'application/x-mpegURL',
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  gif: 'image/gif',
+  png: 'image/png',
+  svg: 'image/svg+xml',
+  webp: 'image/webp',
+};
+
+const CLASS_PREFIX = 'weda-ui_video';
+
+const WedaVideo: React.FC<WedaVideoProps> = ({
+  className,
+  style,
+  id,
+  videoDataSource,
+  posterImage,
+  autoPlay,
+  loopPlay,
+  mutePlay,
+  controlBarStatus,
+  startTime,
+  endTime,
+}) => {
+  const platform = usePlatform();
+  const cls = classNames({
+    [className]: className,
+    [CLASS_PREFIX]: true,
+    [`${CLASS_PREFIX}-h5`]: platform === 'h5',
+    'weda-ui_video_control': !controlBarStatus,
+  });
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const playerRef = useRef(null);
+
+  const [realSrc, setRealSrc] = useState(null);
+  const [videoModalStatus, setVideoModalStatus] = useState(true);
+  const [videoErrMsg, setVideoErrMsg] = useState('');
+
+  const videoType = useMemo(() => {
+    return realSrc?.substring(realSrc.lastIndexOf('.') + 1).toLowerCase();
+  }, [realSrc]);
+
+  useEffect(() => {
+    async function getCloudUrl(fileID) {
+      if (isCloudFileID(fileID)) {
+        try {
+          const fileSrc = await getTempFileURL(fileID);
+          setVideoErrMsg('');
+          setRealSrc(fileSrc);
+        } catch (err) {
+          console.error('getCloudUrl error', err);
+          setVideoErrMsg('获取云文件资源失败');
+          setRealSrc('');
+        }
+      } else {
+        setRealSrc(videoDataSource);
+      }
+    }
+    getCloudUrl(videoDataSource);
+  }, [videoDataSource]);
+
+  useEffect(() => {
+    const videoElement = videoRef.current;
+    if (!playerRef.current) {
+      const videoOptions = {
+        poster: posterImage,
+        autoplay: autoPlay, //自动播放
+        bigPlayButton: true, //全屏按钮
+        loop: loopPlay, //循环播放
+        muted: mutePlay, // 是否静音
+        controls: controlBarStatus, //显示控制栏
+        language: 'zh-CN', // 设置语言
+        fluid: true, // 自适应宽高
+        controlBar: {
+          children: [
+            { name: 'playToggle' }, // 底部暂停按钮
+            { name: 'currentTimeDisplay' }, // 当前已播放时间
+            { name: 'progressControl' }, // 进度条
+            { name: 'durationDisplay' }, // 总时间
+            {
+              name: 'volumePanel', // 音量控制
+              inline: false, // 不使用水平方式
+            },
+            { name: 'FullscreenToggle' }, // 全屏按钮
+          ],
+        },
+        sources: [
+          {
+            src: realSrc || 'no',
+            type: MimetypesKind[videoType] || 'video/mp4',
+          },
+        ],
+      };
+      playerRef.current = videojs(videoElement, videoOptions, () => {
+        players.currentTime(startTime); //指定播放时间
+        setVideoModalStatus(false);
+        setVideoErrMsg('');
+      });
+      const players = playerRef.current;
+      // 指定结束时间
+      if (endTime) {
+        players.on('timeupdate', () => {
+          //播放时间改变
+          const currentTime = players.currentTime();
+          if (startTime >= endTime) return;
+          if (currentTime > endTime) {
+            players.currentTime(startTime);
+            setTimeout(() => {
+              !loopPlay && players.pause();
+            }, 200);
+          }
+        });
+      }
+      players.on('canplaythrough', function () {
+        setVideoModalStatus(false);
+        setVideoErrMsg('');
+      });
+      players.on('error', function () {
+        let errorMsg = `视频资源加载出错，错误信息：${
+          players?.error().message
+        }`;
+        let pattern = new RegExp('^(((https?)://)|/resources/)[^\\s]+$');
+        if (
+          isInIde() &&
+          !pattern.test(videoDataSource) &&
+          !isCloudFileID(videoDataSource)
+        ) {
+          errorMsg = '请在预览区查看视频效果';
+        }
+        console.log('player error', errorMsg);
+        setVideoErrMsg(errorMsg);
+        setVideoModalStatus(true);
+      });
+    }
+  }, [videoRef]);
+
+  useEffect(() => {
+    // 切换视频源
+    if (playerRef.current && videoType) {
+      let srcOption = [
+        {
+          src: realSrc,
+          type: MimetypesKind[videoType],
+        },
+      ];
+      playerRef.current.src(srcOption);
+      playerRef.current.load(realSrc);
+    }
+  }, [realSrc]);
+
+  return (
+    <ConfigProvider classPrefix="wedatea2td">
+      <div className={cls} id={id} style={style} data-testid="wedaVideo">
+        <div data-vjs-player>
+          <video
+            ref={videoRef}
+            className={`video-js vjs-big-play-centered ${CLASS_PREFIX}__video-wrap`}
+          />
+        </div>
+        {videoModalStatus && (
+          <div className={`${CLASS_PREFIX}__video-loading`}>
+            {realSrc === null ? <Icon type="loading" /> : videoErrMsg}
+          </div>
+        )}
+      </div>
+    </ConfigProvider>
+  );
+};
+
+export default WedaVideo;

package/src/web/utils/constant.ts

@@ -4,7 +4,8 @@ export const TitleType = {
   NONE: 'none',
 } as const;
 
-export const LOAD_ERR_IMG_BASE64 = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjUuMzIgMTYuMzU5N0MyNi4wNzY0IDE2LjM1OTcgMjYuODI1NCAxNi41MDg3IDI3LjUyNDMgMTYuNzk4MUMyOC4yMjMxIDE3LjA4NzYgMjguODU4MSAxNy41MTE5IDI5LjM5MjkgMTguMDQ2OEMyOS45Mjc4IDE4LjU4MTYgMzAuMzUyMSAxOS4yMTY2IDMwLjY0MTYgMTkuOTE1NEMzMC45MzEgMjAuNjE0MyAzMS4wOCAyMS4zNjMzIDMxLjA4IDIyLjExOTdDMzEuMDggMjIuODc2MSAzMC45MzEgMjMuNjI1MSAzMC42NDE2IDI0LjMyMzlDMzAuMzUyMSAyNS4wMjI4IDI5LjkyNzggMjUuNjU3OCAyOS4zOTI5IDI2LjE5MjZDMjguODU4MSAyNi43Mjc1IDI4LjIyMzEgMjcuMTUxOCAyNy41MjQzIDI3LjQ0MTJDMjYuODI1NCAyNy43MzA3IDI2LjA3NjQgMjcuODc5NyAyNS4zMiAyNy44Nzk3QzIzLjc5MjQgMjcuODc5NyAyMi4zMjczIDI3LjI3MjggMjEuMjQ3MSAyNi4xOTI2QzIwLjE2NjkgMjUuMTEyNCAxOS41NiAyMy42NDczIDE5LjU2IDIyLjExOTdDMTkuNTYgMjAuNTkyIDIwLjE2NjkgMTkuMTI3IDIxLjI0NzEgMTguMDQ2OEMyMi4zMjczIDE2Ljk2NjUgMjMuNzkyNCAxNi4zNTk3IDI1LjMyIDE2LjM1OTdaTTI4IDMuNTU5NjlWMTQuODc2OEMyNy4xNzc3IDE0LjU4NjYgMjYuMTkyIDE0LjQzODggMjUuMzIgMTQuNDM5N0MyNC4wMzEgMTQuNDM5NyAyMi44MTU3IDE0Ljc1NzEgMjEuNzQ4OCAxNS4zMTg0TDIwLjc5NTIgMTMuMTU5N0wxNi4wMjU5IDIwLjAyNzVMOC40NDU3NiAxNi40NDFMMy41NiAyMy4zOTk3SDE3Ljc0NjJDMTcuOTg2NyAyNC44MjkgMTguNjI4MiAyNi4xNjA2IDE5LjU5NTggMjcuMjM5N0gxVjMuNTU5NjlIMjhaTTI1Ljk2IDI0LjAzOTdIMjQuNjhWMjUuMzE5N0gyNS45NlYyNC4wMzk3Wk0yNS45NiAxOC45MTk3SDI0LjY4VjIzLjM5OTdIMjUuOTZWMTguOTE5N1pNNi4xMiAxMC41OTk3QzYuMTIgMTEuOTk4MSA3LjE5OTA0IDEzLjEwODUgOC42MDc2OCAxMy4xNTg0QzEwLjAyMDggMTMuMjA3NyAxMS4yNCAxMi4wNDggMTEuMjQgMTAuNTk5N0MxMS4yNCA5LjI0NjA5IDEwLjA2NDMgOC4wODU3NyA4Ljc1MjMyIDguMDQwOTdDNy4yOTU2OCA3Ljk5MTY5IDYuMTIgOS4xNTEzNyA2LjEyIDEwLjU5OTdaIiBmaWxsPSIjQkNDNEQwIj48L3BhdGg+Cjwvc3ZnPgo=' as const;
+export const LOAD_ERR_IMG_BASE64 =
+  'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjUuMzIgMTYuMzU5N0MyNi4wNzY0IDE2LjM1OTcgMjYuODI1NCAxNi41MDg3IDI3LjUyNDMgMTYuNzk4MUMyOC4yMjMxIDE3LjA4NzYgMjguODU4MSAxNy41MTE5IDI5LjM5MjkgMTguMDQ2OEMyOS45Mjc4IDE4LjU4MTYgMzAuMzUyMSAxOS4yMTY2IDMwLjY0MTYgMTkuOTE1NEMzMC45MzEgMjAuNjE0MyAzMS4wOCAyMS4zNjMzIDMxLjA4IDIyLjExOTdDMzEuMDggMjIuODc2MSAzMC45MzEgMjMuNjI1MSAzMC42NDE2IDI0LjMyMzlDMzAuMzUyMSAyNS4wMjI4IDI5LjkyNzggMjUuNjU3OCAyOS4zOTI5IDI2LjE5MjZDMjguODU4MSAyNi43Mjc1IDI4LjIyMzEgMjcuMTUxOCAyNy41MjQzIDI3LjQ0MTJDMjYuODI1NCAyNy43MzA3IDI2LjA3NjQgMjcuODc5NyAyNS4zMiAyNy44Nzk3QzIzLjc5MjQgMjcuODc5NyAyMi4zMjczIDI3LjI3MjggMjEuMjQ3MSAyNi4xOTI2QzIwLjE2NjkgMjUuMTEyNCAxOS41NiAyMy42NDczIDE5LjU2IDIyLjExOTdDMTkuNTYgMjAuNTkyIDIwLjE2NjkgMTkuMTI3IDIxLjI0NzEgMTguMDQ2OEMyMi4zMjczIDE2Ljk2NjUgMjMuNzkyNCAxNi4zNTk3IDI1LjMyIDE2LjM1OTdaTTI4IDMuNTU5NjlWMTQuODc2OEMyNy4xNzc3IDE0LjU4NjYgMjYuMTkyIDE0LjQzODggMjUuMzIgMTQuNDM5N0MyNC4wMzEgMTQuNDM5NyAyMi44MTU3IDE0Ljc1NzEgMjEuNzQ4OCAxNS4zMTg0TDIwLjc5NTIgMTMuMTU5N0wxNi4wMjU5IDIwLjAyNzVMOC40NDU3NiAxNi40NDFMMy41NiAyMy4zOTk3SDE3Ljc0NjJDMTcuOTg2NyAyNC44MjkgMTguNjI4MiAyNi4xNjA2IDE5LjU5NTggMjcuMjM5N0gxVjMuNTU5NjlIMjhaTTI1Ljk2IDI0LjAzOTdIMjQuNjhWMjUuMzE5N0gyNS45NlYyNC4wMzk3Wk0yNS45NiAxOC45MTk3SDI0LjY4VjIzLjM5OTdIMjUuOTZWMTguOTE5N1pNNi4xMiAxMC41OTk3QzYuMTIgMTEuOTk4MSA3LjE5OTA0IDEzLjEwODUgOC42MDc2OCAxMy4xNTg0QzEwLjAyMDggMTMuMjA3NyAxMS4yNCAxMi4wNDggMTEuMjQgMTAuNTk5N0MxMS4yNCA5LjI0NjA5IDEwLjA2NDMgOC4wODU3NyA4Ljc1MjMyIDguMDQwOTdDNy4yOTU2OCA3Ljk5MTY5IDYuMTIgOS4xNTEzNyA2LjEyIDEwLjU5OTdaIiBmaWxsPSIjQkNDNEQwIj48L3BhdGg+Cjwvc3ZnPgo=' as const;
 
 export const REL_DICT = {
   equal: 'eq', // 等于

package/src/web/utils/isObjectEqual.js

@@ -7,7 +7,8 @@ export function serde(a) {
 const isObj = (a) => typeof a === 'object' && a !== null;
 
 export default function (a, b, shouldSerde = false) {
-  if(shouldSerde && isObj(a) && isObj(b)) { // for Proxy created by mbox
+  if (shouldSerde && isObj(a) && isObj(b)) {
+    // for Proxy created by mbox
     return isEqual(serde(a), serde(b));
   }
   return isEqual(a, b);

package/src/web/utils/loading-fallback.tsx

@@ -1,2 +1,2 @@
-import * as React from "react";
-export const fallback =  <div>组件加载中...</div>;
+import * as React from 'react';
+export const fallback = <div>组件加载中...</div>;

package/src/web/utils/lodash.ts

@@ -1,2 +1,2 @@
 // https://github.com/lodash/lodash/blob/4.17.15/lodash.js#L11973
-export const isNil = (val: any): val is (null | undefined) => val == null;
+export const isNil = (val: any): val is null | undefined => val == null;

package/src/web/utils/platform.js

@@ -141,3 +141,16 @@ const reg =
   /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
 
 export const isUrl = (path) => reg.test(path);
+
+/**
+ * 生成随机数
+ */
+export const randomUuid = () => {
+  var s = [];
+  var hexDigits = '0123456789abcdef';
+  for (var i = 0; i < 32; i++) {
+    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+  }
+  var uuid = s.join('');
+  return uuid;
+};

package/src/web/utils/useSetState.ts

@@ -6,9 +6,13 @@ export const useSetState = <T extends object>(
   const [state, set] = useState<T>(initialState);
   const setState = useCallback((patch) => {
     set((prevState) =>
-      Object.assign({}, prevState, patch instanceof Function ? patch(prevState) : patch)
+      Object.assign(
+        {},
+        prevState,
+        patch instanceof Function ? patch(prevState) : patch
+      )
     );
   }, []);
 
   return [state, setState];
-};
+};

package/src/web/weda-ui.css

@@ -40,19 +40,13 @@ body .weda-ui {
   background-color: var(--weui-TAG-TEXT-BLUE);
 }
 
-.weda-ui .wedatea2td-form__controls {
-  font-size: 1rem;
-}
-
 @media (min-width: 1024px) {
   .weda-ui .weui-cells {
     /* prettier-ignore */
-    font-size: 14PX;
+    font-size: 1em;
   }
 }
 @media (min-width: 1024px) {
-  .weda-ui .weui-cell {
-  }
   .weui .weui-cell_active:active {
     background-color: unset !important;
   }
@@ -67,5 +61,26 @@ body .weda-ui {
 }
 
 .weda-ui .weui-cell {
-  font-size: 16px; /* 修改默认weui的17为16 */
+  font-size: inherit; /* 要让内联样式生效 */
+}
+
+.weda-ui .weui-cells {
+  font-size: 1em;
+}
+
+.weui-picker a:link:hover {
+  text-decoration: none;
+}
+
+.weda-formcells__pc.vertical .wedatea2td-form__label label {
+  width: auto; /* vertcal 情况下label不固定宽度 */
+}
+
+.weda-ui .weui-btn_input-clear {
+  visibility: hidden; /* visibilty 防止居中而且宽度auto时，出现输入时宽度抖动 */
+  display: inline;
+}
+.weui-input:focus:not(:placeholder-shown) + .weui-btn_input-clear {
+  visibility: visible;
+  display: inline;
 }

package/src/docs/common/format.tsx

@@ -1,112 +0,0 @@
-export interface ICompsConfig {
-  type: String;
-  name: string;
-  title: string;
-  description: string;
-  'x-platforms': string[];
-  default: string;
-  platforms: string;
-  'x-index': number;
-}
-export type TCompsConfig = ICompsConfig;
-
-export const sortBy = (props) => {
-  return function (a, b) {
-    return a[props] - b[props];
-  };
-};
-
-export const objFormat = (args: any, type, origin) => {
-  //判断属性title值是否为拓展写法
-  const uuidReg = /(?<=text)\('(.*)(?=',)/;
-  let transformData: any = [];
-  for (let i in args) {
-    if (type && type == 'event') {
-      transformData.push({
-        name: origin == 'lowCode' ? args[i]?.name : args[i]?.title,
-        title: origin == 'lowCode' ? args[i]?.eventName : args[i]?.name,
-        description: args[i]?.remarks || '-',
-        platforms: args[i]['x-platforms']
-          ? args[i]['x-platforms'].indexOf('MP') > -1
-            ? '小程序端'
-            : args[i]['x-platforms'].indexOf('WEB') > -1
-            ? 'web端'
-            : '兼容三端'
-          : '兼容三端',
-      });
-    } else if (type && type == 'attribute' && args[i].type != 'slot') {
-      if (
-        args[i]?.display == false ||
-        args[i]?.isReactNode == true ||
-        args[i]['x-component'] == 'sub-category-title' ||
-        args[i]['x-component'] == 'Divider'
-      ) {
-        continue;
-      }
-      transformData.push({
-        code: i,
-        title: args[i].title.indexOf('{{')!=-1?args[i]?.title.match(uuidReg)[1]:args[i]?.title,
-        description: args[i]?.remarks || '-',
-        type: args[i]?.type || '-',
-        default: JSON.stringify(args[i]?.default) || '-',
-        'x-index': args[i]['x-index'] ? args[i]['x-index'] : 999999,
-        'x-category': args[i]['x-category']
-          ? args[i]['x-category']
-          : '基础属性',
-      });
-    } else if (type && type == 'slot' && args[i].type == 'slot') {
-      transformData.push({
-        code: i,
-        title: args[i]?.title,
-        description: args[i]?.description || '-',
-      });
-    }
-  }
-
-  if (type && type == 'attribute') transformData.sort(sortBy('x-index'));
-
-  if (type && type == 'attribute') {
-    transformData = groupByType(transformData, 'x-category');
-  }
-  return transformData;
-};
-function groupByType(arr, param) {
-  var map = {};
-  var dest = [];
-  var structureMap = [];
-  var storgeType = [];
-  for (var i = 0; i < arr.length; i++) {
-    var ai = arr[i];
-    if (ai[param] && !map[ai[param]]) {
-      dest.push({
-        name: ai[param],
-        data: [ai],
-      });
-      map[ai[param]] = ai;
-    } else if (!ai[param]) {
-      dest.push({
-        name: '基础属性',
-        data: [ai],
-      });
-      map[ai[param]] = ai;
-    } else {
-      for (var j = 0; j < dest.length; j++) {
-        var dj = dest[j];
-        if (dj.name == ai[param]) {
-          dj.data.push(ai);
-          break;
-        }
-      }
-    }
-  }
-  for (var k = 0; k < dest.length; k++) {
-    if (k == 0 && dest[k]?.name != '基础属性') {
-      storgeType = storgeType.concat(dest[k]?.data);
-      continue;
-    }
-    structureMap = structureMap.concat(dest[k]?.data);
-  }
-
-  storgeType.length != 0 ? structureMap.push(...storgeType) : null;
-  return structureMap;
-}