@cloudbase/weda-ui 2.0.12 → 2.0.26

package/src/mp/components/richText/index.wxss

@@ -1,4 +1,7 @@
-rich-text .blockquote {
+.weda-RichTextView {
+  font-size: 14px;
+}
+.weda-RichTextView .blockquote {
   margin: 0 0 10px;
   padding: 15px 20px;
   background-color: #f1f2f3;
@@ -7,7 +10,7 @@ rich-text .blockquote {
   font-style: italic;
 }
 
-rich-text .pre {
+.weda-RichTextView .pre {
   max-width: 100%;
   max-height: 100%;
   margin: 10px 0;
@@ -17,9 +20,8 @@ rich-text .pre {
   border-radius: 3px;
   color: #666;
   font-family: monospace;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 16px;
+  font-size: 1em;
+  line-height: 1.14285em;
   word-wrap: break-word;
   white-space: pre-wrap;
 }

package/src/mp/components/tabs/index.wxss

@@ -9,7 +9,6 @@
   height: 45px;
   background-color: #fff;
   position: relative;
-  font-size: 0;
   white-space: nowrap;
   border-bottom: 1px solid #eee;
 }
@@ -23,7 +22,7 @@
   flex-basis: 0;
   flex-grow: 1;
   height: 100%;
-  font-size: 14px;
+  font-size: 1em;
   color: #000;
   box-sizing: border-box;
   padding: 0 16px;

package/src/mp/style/weda-ui.wxss

@@ -38,9 +38,11 @@ page .weda-ui {
 }
 
 .weda-ui .weui-cell {
-  font-size: 16px; /* 修改默认weui的17为16 */
+  font-size: inherit;
+}
+.weda-ui .weui-cells {
+  font-size: 1em;
 }
-
 .weui-cells__group_form .weui-cell::before,
 .weui-cells__group_form .weui-cells::before {
   left: 16px;

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

@@ -1,5 +1,9 @@
 /* weda_calendar */
 
+.weda-calendar {
+  font-size: 14px;
+}
+
 /* pc 日历样式 start */
 .weda-calendar.weda-calendar-pc {
   background: #ffffff;
@@ -59,27 +63,9 @@
   margin-right: 0;
 }
 
-.weda-calendar-pc
-  .weda-calendar__control-section
-  .tea-dropdown
-  .tea-dropdown__header {
-  background: #e7e7e7;
-  border-radius: 3px;
-  padding: 5px 32px 5px 12px;
-  height: 32px;
-}
-
-.weda-calendar-pc
-  .weda-calendar__control-section
-  .tea-dropdown
-  .tea-dropdown__value {
-  font-size: 14px;
-  line-height: 22px;
-}
-
 .weda-calendar-pc .weda-calendar__control_pc .weda-calendar__current-date {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1em;
+  line-height: 1.57142em;
   color: rgba(0, 0, 0, 0.9);
 }
 
@@ -91,6 +77,7 @@
 }
 
 .weda-calendar .weda-calendar__table {
+  font-size: inherit;
   border-collapse: collapse;
   border-spacing: 0;
   width: 100%;
@@ -126,8 +113,8 @@
   justify-content: flex-end;
   height: 100%;
   padding: 0;
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1em;
+  line-height: 1.57142em;
   color: rgba(0, 0, 0, 0.6);
   margin-right: 12px;
   position: relative;
@@ -189,9 +176,9 @@
 }
 
 .weda-calendar .weda-calendar__table .weda-calendar__table-body-cell-value {
-  font-size: 14px;
+  font-size: 1em;
   font-weight: 400;
-  line-height: 22px;
+  line-height: 1.57142em;
   color: rgba(0, 0, 0, 0.9);
   margin-top: 3px;
   position: relative;
@@ -252,8 +239,8 @@
   .weda-calendar_nextMonth.wedatea2td-icon-arrowright--line {
   position: absolute;
   top: 17px;
-  width: 20px;
-  height: 20px;
+  width: 1.42857em;
+  height: 1.42857em;
 }
 
 .weda-calendar__control_h5
@@ -266,13 +253,13 @@
 }
 
 .weda-calendar__control_h5 .weda-calendar__current-date {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1em;
+  line-height: 1.57142em;
   font-weight: bold;
 }
 
 .weda-calendar-h5 .weda-calendar__panel {
-  height: 306px;
+  height: 21.85714em;
   padding: 20px 16px 16px 16px;
   width: 100%;
   box-sizing: border-box;
@@ -299,7 +286,7 @@
 }
 
 .weda-calendar-h5 .weda-calendar__table .weda-calendar__table-head-cell {
-  font-size: 12px;
+  font-size: 0.85714em;
   line-height: 20px;
   width: 100%;
   height: 100%;
@@ -307,8 +294,8 @@
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
-  font-size: 12px;
-  line-height: 20px;
+  font-size: 0.85714em;
+  line-height: 1.428571em;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
@@ -346,8 +333,8 @@
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
-  font-size: 12px;
-  line-height: 20px;
+  font-size: 0.85714em;
+  line-height: 1.42857em;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-pack: center;
@@ -367,11 +354,11 @@
 .weda-calendar-h5
   .weda-calendar__table-body
   .weda-calendar__table-body-cell-value {
-  font-size: 14px;
+  font-size: 1em;
   text-align: center;
   border-radius: 50%;
   width: 40px;
-  line-height: 40px;
+  line-height: 2.85714em;
   margin: 0;
   box-sizing: border-box;
 }
@@ -388,12 +375,12 @@
   .weda-calendar__table-body-cell.is-now
   .weda-calendar__table-body-cell-bg {
   position: absolute;
-  width: 24px;
-  height: 24px;
+  width: 1.714285em;
+  height: 1.714285em;
   background: #0052d9;
   border-radius: 100%;
-  left: calc(50% - 12px);
-  top: calc(50% - 12px);
+  left: calc(50% - 0.85714em);
+  top: calc(50% - 0.85714em);
   z-index: -1;
 }
 

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/form/formcell/index.css

@@ -43,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;
 }
@@ -66,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;
@@ -78,18 +71,12 @@
 .weda-formcells__pc .wedatea2td-form__label label,
 .weda-formcells__pc .wedatea2td-form__label legend {
   display: inline-block;
-  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%;
 }

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

@@ -34,3 +34,7 @@
 /**
  * END
  */
+
+.weda-input .weui-input {
+  font-weight: inherit;
+}

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/components/LocationH5/index.css

@@ -43,17 +43,17 @@
 }
 
 .form-location-addr-title {
-  font-size: 16px;
+  font-size: 1em;
 }
 .form-location-addr-lat {
-  font-size: 12px;
+  font-size: 0.75em;
   color: rgba(0, 0, 0, 0.4);
-  line-height: 20px;
+  line-height: 1.25em;
 }
 
 .form-location-addr > img {
-  width: 19px;
-  height: 19px;
+  width: 1.25em;
+  height: 1.25em;
 }
 .form-location-addr > div {
   margin-left: 12px;
@@ -115,8 +115,8 @@
   padding-left: 10px;
   padding-right: 10px;
   color: #b4b4b4;
-  font-size: 15px;
-  line-height: 31px;
+  font-size: 1em;
+  line-height: 2.21428em;
   border-radius: 5px;
   overflow: hidden;
   white-space: nowrap;
@@ -135,19 +135,19 @@
   position: absolute;
   top: 0;
   right: 0;
-  width: 55px;
-  height: 46px;
-  line-height: 46px;
+  width: 3.4375em;
+  height: 2.875em;
+  line-height: 2.875em;
   text-align: center;
-  font-size: 16px;
+  font-size: 1em;
   color: #0079ff;
   background-color: #fff;
   cursor: pointer;
   display: none;
 }
 .map-choose-header_search img {
-  width: 16px;
-  height: 16px;
+  width: 1em;
+  height: 1em;
   margin-right: 4px;
 }
 .map-choose-header_search input {
@@ -156,8 +156,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;
@@ -215,8 +215,8 @@
   right: 20px;
   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%;
@@ -231,8 +231,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/select/h5.tsx

@@ -184,7 +184,7 @@ PropsType) {
     if (records && records.length !== 0 && primaryField) {
       const option = records.map((item) => {
         return {
-          label: item[primaryField],
+          label: item[primaryField] || item._id,
           value: item._id,
         };
       });

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

@@ -227,7 +227,7 @@ function SelectPc({
     if (records && records.length !== 0 && primaryField) {
       const option = records.map((item) => {
         return {
-          label: item[primaryField],
+          label: item[primaryField] || item._id,
           value: item._id,
         };
       });

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

@@ -52,6 +52,14 @@ export default function Textarea({
     events.change({ value: text });
   };
 
+  const onFocus = function (e) {
+    events.focus?.({ value: e.target.value }, { originEvent: e });
+  };
+
+  const onBlur = function (e) {
+    events.blur?.({ value: e.target.value }, { originEvent: e });
+  };
+
   let textAreaElement;
   if (platform === 'h5') {
     textAreaElement = (
@@ -62,6 +70,8 @@ export default function Textarea({
             placeholder={placeholder}
             value={value}
             onChange={onChange}
+            onFocus={onFocus}
+            onBlur={onBlur}
             maxLength={maxLength}
             disabled={disabled}
             autoFocus={autoFocus}
@@ -82,6 +92,8 @@ export default function Textarea({
           placeholder={placeholder}
           value={value}
           onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
           maxLength={maxLength}
           disabled={disabled}
           autoFocus={autoFocus}

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

@@ -106,3 +106,13 @@
 .weui-uploader__hd.vertical {
   padding-bottom: 0;
 }
+
+.weda-ui .weui-uploader__file {
+  width: 6.85714em;
+  height: 6.85714em;
+}
+
+.weda-ui .weui-uploader__input-box {
+  width: 6.85714em;
+  height: 6.85714em;
+}

package/src/web/components/form/uploader/uploader.h5.tsx

@@ -4,10 +4,9 @@ import classNames from '../../../utils/classnames';
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import isObjectEqual from '../../../utils/isObjectEqual';
 import { useSyncValue } from '../../../utils/useSyncValue';
-import { isCloudFileID } from '../../../utils/platform';
+import { isCloudFileID, randomUuid } from '../../../utils/platform';
 import { IMAGE_TYPES } from './uploader.pc';
 import type { CommonFormPropsType } from '../types';
-import { v4 } from 'uuid';
 
 const uploadPath = 'weda-uploader';
 /**
@@ -40,7 +39,7 @@ export function ImageUploaderH5({
   //上传进度
   const [progress, setProgress] = React.useState(0);
   const [inputValue, setInputValue] = useSyncValue(defaultValue, isObjectEqual);
-
+  const inputValueRef = React.useRef(inputValue);
   const fileIdList = React.useMemo(() => {
     //兼容h5默认值为空时情况
     if (inputValue === null) {
@@ -94,9 +93,7 @@ export function ImageUploaderH5({
     getCloudInstance().then(async (tcb) => {
       try {
         const fileType = file.type.split('/')?.[1];
-        const cloudPath = `${uploadPath}/${v4().replaceAll('-', '')}-${
-          file?.name
-        }`;
+        const cloudPath = `${uploadPath}/${randomUuid()}-${file?.name}`;
         const { fileID } = await tcb.uploadFile({
           cloudPath,
           filePath: file,

package/src/web/components/form/uploader/uploader.pc.tsx

@@ -8,10 +8,9 @@ import {
   ImagePreview,
   ConfigProvider,
 } from 'tea-component';
-import { v4 } from 'uuid';
 import classNames from '../../../utils/classnames';
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
-import { isCloudFileID } from '../../../utils/platform';
+import { isCloudFileID, randomUuid } from '../../../utils/platform';
 import isObjectEqual from '../../../utils/isObjectEqual';
 import { H5UploaderProps } from './uploader.h5';
 // 默认组件类前缀
@@ -79,7 +78,7 @@ export function UploaderPCInner(props) {
   const [progress, setProgress] = React.useState(0);
   // 文件列表
   const [fileIDList, setfileIDList] = React.useState([]);
-  const fileRef = React.useRef(fileIDList);
+  const fileRef = React.useRef(['']);
   React.useEffect(() => {
     let initialValue = []
       .concat(defaultValue)
@@ -130,9 +129,7 @@ export function UploaderPCInner(props) {
     getCloudInstance().then(async (tcb) => {
       try {
         const fileType = file.type.split('/')?.[1];
-        const cloudPath = `${uploadPath}/${v4().replaceAll('-', '')}-${
-          file?.name
-        }`;
+        const cloudPath = `${uploadPath}/${randomUuid()}-${file?.name}`;
         const { fileID } = await tcb.uploadFile({
           cloudPath,
           filePath: file,