@cloudbase/weda-ui 1.0.24 → 2.0.8

package/src/mp/components/form/uploader/weui-uploader.wxml

@@ -0,0 +1,45 @@
+<view class="weui-uploader {{extClass}}">
+    <view class="weui-uploader__hd {{layout}}">
+        <view class="weda-formcells__label weui-cell">
+            <block wx:if="{{layout === 'horizontal'}}">
+                <view class="">
+                    <view class="weui-uploader__title">{{title}}</view>
+                    <view class="weui-uploader__info" wx:if="{{maxCount > 1}}">{{currentFiles.length}}/{{maxCount}}</view>
+                </view>
+                <label wx:if="{{true}}" class="weda-formcells__flag">*</label>
+            </block>
+            <block wx:if="{{layout === 'vertical'}}">
+                <view class="weui-uploader__label">
+                    <view class="weui-uploader__title">{{title}}</view>
+                    <label wx:if="{{true}}" class="weda-formcells__flag">*</label>
+                </view>
+                <view class="weui-uploader__info" wx:if="{{maxCount > 1}}">{{currentFiles.length}}/{{maxCount}}</view>
+            </block>
+        </view>
+    </view>
+    <view class="weui-uploader__bd">
+        <view class="weui-uploader__files">
+            <block wx:for="{{currentFiles}}" wx:key="*this">
+                <view wx:if="{{item.error}}" data-index="{{index}}" bindtap="previewImage" class="weui-uploader__file weui-uploader__file_status">
+                    <image class="weui-uploader__img" src="{{item.url}}" mode="aspectFill" />
+                    <view class="weui-uploader__file-content">
+                        <icon type="warn" size="23" color="#F43530"></icon>
+                    </view>
+                </view>
+                <view wx:elif="{{item.loading}}" data-index="{{index}}" bindtap="previewImage" class="weui-uploader__file weui-uploader__file_status">
+                    <image class="weui-uploader__img" src="{{item.url}}" mode="aspectFill" />
+                    <view class="weui-uploader__file-content">
+                        <view class="weui-loading"></view>
+                    </view>
+                </view>
+                <view wx:else class="weui-uploader__file" data-index="{{index}}" bindtap="previewImage">
+                    <image class="weui-uploader__img" src="{{item.url}}" mode="aspectFill" />
+                </view>
+            </block>
+        </view>
+        <view wx:if="{{currentFiles.length < maxCount}}" class="weui-uploader__input-box" hover-class="weui-active">
+            <view class="weui-uploader__input" bindtap="chooseImage"></view>
+        </view>
+    </view>
+    <mp-gallery class="gallery" hide-on-click="{{true}}" show-delete="{{showDelete}}" show="{{showPreview}}" binddelete="deletePic" img-urls="{{previewImageUrls}}" current="{{previewCurrent}}"></mp-gallery>
+</view>

package/src/mp/components/form/uploader/weui-uploader.wxss

@@ -0,0 +1 @@
+/* materials/gsd-h5-react/components/form/uploader/weui-uploader.wxss */

package/src/mp/components/form/uploaderFile/index.wxss

@@ -5,7 +5,8 @@
 }
 .weda-uploader-files__hd {
   width: 100%;
-  padding: 24px 20px 8px 20px;
+  padding: 16px;
+  padding-left: 0;
   display: flex;
   background-color: #ffffff;
 }
@@ -20,9 +21,8 @@
 .weda-uploader-files__title {
   font-size: 14px;
   line-height: 20px;
-  color: #000;
-  margin-right: 20px;
-  padding-top: 6px;
+  padding: 16px;
+  width: 130px;
 }
 .weda-uploader-files__btn {
   margin: 0;

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

@@ -32,7 +32,8 @@
 }
 
 .weda-image-error {
-  position: relative;
+  position: relative !important;
+  display: inline-block !important;
 }
 
 .weda-image-error::before {
@@ -43,4 +44,4 @@
   top: 0;
   width: 100%;
   height: 100%;
-}
+}

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

@@ -40,3 +40,17 @@ page .weda-ui {
 .weda-ui.weda-picker .weui-btn_primary:not(.weui-btn_disabled):active {
   background-color: var(--weui-TAG-TEXT-BLUE);
 }
+
+.weda-ui .weui-cell {
+  font-size: 16px; /* 修改默认weui的17为16 */
+}
+
+.weui-cells__group_form .weui-cell::before, .weui-cells__group_form .weui-cells::before {
+  left: 16px;
+  right: 16px;
+}
+
+.weui-cells__group_form .weui-cells::after {
+    left: 16px;
+    right: 16px;
+}

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

@@ -8,13 +8,13 @@ import './index.css';
 
 // 不用 react-weui 而直接用底层实现的原因是 react-weui 不能支持表单类型
 const Button = ({
-  text = '按钮',
-  size = 'default',
-  type = 'primary',
+  text,
+  size,
+  type,
   contentSlot,
   formType,
-  loading = false,
-  disabled = false,
+  loading,
+  disabled,
   events = ({} as Record<string, unknownFunction>),
   className,
   style,
@@ -61,7 +61,7 @@ const Button = ({
 return (
   <ConfigProvider classPrefix="wedatea2td">
     <TeaButton
-      loading={loading} 
+      loading={loading}
       onClick={onClick}
       disabled={disabled}
       htmlType={formType}
@@ -112,4 +112,4 @@ export interface PropsType extends CommonPropsType {
   contentSlot?: string;
 }
 
-export default Button;
+export default Button;

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

@@ -19,7 +19,7 @@ const isShowWeekend = true; // 是否显示周末
 export default function Calendar({
   className,
   style,
-  initVisible = true,
+  initVisible,
   initValue,
   configData = [],
 }) {

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

@@ -50,15 +50,15 @@ export interface PropsType extends CommonPropsType {
 export default function Carousel({
   className,
   style = {},
-  autoplay = true,
-  circular = true,
-  vertical = false,
+  autoplay,
+  circular,
+  vertical,
   indicatorDots,
-  indicatorColor = 'rgba(200, 200, 200, 0.9)',
-  indicatorActiveColor = 'rgba(0, 0, 0, 0.9)',
-  duration = 500,
-  interval = 5000,
-  current = 0,
+  indicatorColor,
+  indicatorActiveColor,
+  duration,
+  interval,
+  current,
   events = {},
   id,
   images,

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

@@ -5,4 +5,8 @@
 .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 {
+  padding-left: 24px;
+}

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

@@ -22,6 +22,8 @@ export default function Form({
     'weda-ui': true,
     'weda-form': true,
     'weui-form': platform === 'h5',
+    'weda-form-pc': platform === 'pc',
+    'gsd-h5-react-form-pc': platform === 'pc',
     [className]: className,
   });
   if(platform === 'pc') {
@@ -45,4 +47,4 @@ export default function Form({
 
 export interface PropsType extends CommonFormPropsType {
   contentSlot?: any;
-}
+}

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

@@ -4,7 +4,28 @@
   font-family: SimSun;
   font-size: 12px;
   color: #f60;
+  align-self: flex-start;
 }
+
+.weda-ui .weui-cells__group_form .weui-cells {
+  margin: 0;
+}
+.weda-formcells.weui-flex .weda-formcells__label {
+  width: 130px;
+}
+.weui-cells__group_form .weui-cell {
+  padding: 16px 16px;
+}
+
+.weda-formcells__content.weui-flex__item .weui-cell_form {
+  padding: 0;
+}
+
+.weda-formcells__content.weui-flex__item .weui-cell_form {
+  padding-right: 16px;
+}
+
+
 /* formcell 在 form container 外部兼容 and 独立 layout 适配 */
 
 .weda-formcells__pc.vertical .wedatea2td-form__controls,
@@ -68,4 +89,4 @@
 /*formcell end*/
 
 
-/* formcell 在 form container 外部兼容 */
+/* formcell 在 form container 外部兼容 */

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

@@ -35,8 +35,8 @@ export default function FormCell({
           })}
           label={
             <>
-              {requiredFlag && <span className="weda-formcells__flag">*</span>}
               {label}
+              {requiredFlag && <span className="weda-formcells__flag">*</span>}
             </>
           }
         >
@@ -64,10 +64,10 @@ export default function FormCell({
               'weui-cell': true,
             })}
           >
+            <label>{label}</label>
             {requiredFlag ? (
               <label className="weda-formcells__flag">*</label>
             ) : null}
-            <label>{label}</label>
           </div>
         ) : null}
         <div

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

@@ -7,22 +7,17 @@
 /*
 把weui-cell 的padding还回到input
 */
-.weda-ui.weda-input input.weui-input {
-    padding: 28px 16px;
+.weda-ui input.weui-input {
+    padding: 28px 0;
 }
 
-.weda-ui.weda-input .weui-cell.weda-formcells__label {
-    padding: 16px;
-}
-.weda-ui.weda-input .weda-formcells__label.weui-cell label {
-    padding: 0;
-}
-.weda-ui.weda-input .weui-cell {
+.weda-ui.weda-input .weui-flex__item .weui-cell_form {
     padding: 0;
+    padding-right: 16px;
 }
 
-.weda-ui.weda-input .weui-btn_input-clear {
-    padding-right: 16px;
+.weda-ui.weda-input .weui-cell_form {
+  padding: 0 16px;
 }
 
 /**
@@ -38,4 +33,4 @@
 }
 /**
  * END
- */
+ */

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

@@ -1,7 +1,3 @@
-.weda-ui_form-location {
-  padding: 1.14286rem 0;
-}
-
 .form-location-warp {
   display: flex;
   white-space: nowrap;
@@ -10,7 +6,9 @@
 .form-location-label {
   display: flex;
   align-items: center;
-  padding: 0 1.14286rem;
+  padding: 16px;
+  width: 130px;
+
 }
 .form-location-label > span {
   margin-right: 0.28571rem;
@@ -19,8 +17,7 @@
   color: #f60;
 }
 
-.form-location-con {
-  padding-left: 1.14286rem;
+.weda-ui .form-location-con {
   display: flex;
   align-items: center;
 }

package/src/web/components/form/location/components/LocationH5/location.h5.jsx

@@ -329,8 +329,8 @@ export default function LocationH5(props) {
       <div className="form-location-warp">
         {labelVisible && (
           <div className="form-location-label">
-            {requiredFlag && <span>*</span>}
             {label}
+            {requiredFlag && <span>*</span>}
           </div>
         )}
         <div className="form-location-con">

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

@@ -1,3 +1,8 @@
+.weda-ui .weui-cell.weui-check__label {
+  padding: 16px;
+  padding-left: 0;
+}
+
 .year-picker__overlay {
   width: 300px;
 }

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

@@ -1,3 +1,7 @@
 .weda-textarea textarea {
   height: 8.6rem;
 }
+
+.weda-ui .weda-textarea .weui-cell_form {
+  padding: 16px;
+}

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

@@ -45,7 +45,7 @@ export default function Textarea({
   // 两次默认值不同时, 需要刷新value
   const [value, setValue] = useSyncValue(defaultValue);
   const counter = React.useMemo(() => (value?.length || 0), [value]);
-  
+
   const onChange = function (e) {
     const text = typeof e === 'string' ? e : e.target.value;
     setValue(text);
@@ -111,4 +111,4 @@ export interface PropsType extends CommonFormPropsType {
   focus?: boolean;
   counterVisible?: boolean;
   size?: 's' | 'm' | 'l' | 'full';
-}
+}

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

@@ -79,6 +79,30 @@
   display: flex;
   justify-content: space-between;
 }
-.weui-uploader.horizontal .weui-uploader__bd {
-  padding-left: 2.28571rem;
+
+.weui-uploader.horizontal .weda-formcells__label {
+  width: 130px;
+}
+
+.weda-ui .weui-uploader__hd {
+  display: block;
+}
+
+.weui-uploader__label {
+  display: flex;
+  flex: 1;
+}
+.weui-uploader.vertical .weui-uploader__title {
+  flex: unset;
+}
+
+.weda-ui .weui-uploader.horizontal .weui-uploader__bd {
+  padding: 16px 0;
+}
+.weda-ui .weui-uploader.vertical .weui-uploader__bd {
+  padding: 16px;
+}
+
+.weui-uploader__hd.vertical {
+  padding-bottom: 0;
 }

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

@@ -130,65 +130,55 @@ export function ImageUploaderH5({
   }, [fileIdList, single, maxUploadCount]);
   return (
     <div className={cls} id={id} style={style}>
-      <div className="weui-cell">
-        <div className="weui-cell__bd">
-          <div className={classNames('weui-uploader', layout)}>
-            <div className={classNames('weui-uploader__hd', layout)}>
-              {requiredFlag && (
-                <label className="weda-formcells__flag">*</label>
-              )}
-              <p className="weui-uploader__title">{title}</p>
-              <div className="weui-uploader__info">
-                <span id="uploadCount">{fileIdList.length}</span>
-                {`/${finalMaxImgCount}`}
-              </div>
-            </div>
-            <div className="weui-uploader__bd">
-              <ul className="weui-uploader__files" id="uploaderFiles">
-                {(fileIdList ?? []).map((f) => (
-                  <SingleImage key={f} src={f} deleteBySrc={deleteFile} />
-                ))}
-                {uploading && (
-                  <li className="weui-uploader__file weui-uploader__file_status">
-                    <div className="weui-uploader__file-content">
-                      {progress}%
-                    </div>
-                  </li>
-                )}
-              </ul>
-              {showAdd && (
-                <div className="weui-uploader__input-box">
-                  <input
-                    id="uploaderInput"
-                    className="weui-uploader__input"
-                    type="file"
-                    accept={accepts.join(',')}
-                    multiple
-                    onChange={(e) => {
-                      const files = [...e.target.files];
-                      if (files.some((f) => f.size > maxSize * 1024 * 1024)) {
-                        weui.alert('请上传不超过10M的图片');
-                        return false;
-                      }
+      <div className={classNames('weui-uploader', layout)}>
+        <div className={classNames('weui-uploader__hd', layout)}>
+          <UploaderLabel layout={layout} title={title} currentCount={fileIdList.length} maxCount={finalMaxImgCount} requiredFlag={requiredFlag} />
+        </div>
 
-                      if (files.length > finalMaxImgCount) {
-                        // 防止一下子选择过多文件
-                        weui.alert(
-                          `最多只能上传${finalMaxImgCount}张图片，请重新选择`
-                        );
-                        return false;
-                      }
-                      if (fileIdList.length + files.length > finalMaxImgCount) {
-                        weui.alert(`最多只能上传${finalMaxImgCount}张图片`);
-                        return false;
-                      }
-                      files.forEach((f) => uploadToTcb(f));
-                    }}
-                  />
+        <div className="weui-uploader__bd">
+          <ul className="weui-uploader__files" id="uploaderFiles">
+            {(fileIdList ?? []).map((f) => (
+              <SingleImage key={f} src={f} deleteBySrc={deleteFile} />
+            ))}
+            {uploading && (
+              <li className="weui-uploader__file weui-uploader__file_status">
+                <div className="weui-uploader__file-content">
+                  {progress}%
                 </div>
-              )}
+              </li>
+            )}
+          </ul>
+          {showAdd && (
+            <div className="weui-uploader__input-box">
+              <input
+                id="uploaderInput"
+                className="weui-uploader__input"
+                type="file"
+                accept={accepts.join(',')}
+                multiple
+                onChange={(e) => {
+                  const files = [...e.target.files];
+                  if (files.some((f) => f.size > maxSize * 1024 * 1024)) {
+                    weui.alert('请上传不超过10M的图片');
+                    return false;
+                  }
+
+                  if (files.length > finalMaxImgCount) {
+                    // 防止一下子选择过多文件
+                    weui.alert(
+                      `最多只能上传${finalMaxImgCount}张图片，请重新选择`
+                    );
+                    return false;
+                  }
+                  if (fileIdList.length + files.length > finalMaxImgCount) {
+                    weui.alert(`最多只能上传${finalMaxImgCount}张图片`);
+                    return false;
+                  }
+                  files.forEach((f) => uploadToTcb(f));
+                }}
+              />
             </div>
-          </div>
+          )}
         </div>
       </div>
     </div>
@@ -260,3 +250,38 @@ export interface H5UploaderProps extends CommonFormPropsType {
   single?: boolean; // 单张上传还是多张上传，对应 onChange 参数为字符串还是字符串数组，value 在处理过程统一转为字符串数组;
   onChange?: (v: any) => void;
 }
+
+const UploaderLabel = ({layout, title, currentCount, maxCount, requiredFlag}) => {
+  if(layout === 'horizontal') {
+    return (
+      <React.Fragment>
+        <div className='weda-formcells__label weui-cell'>
+          <div>
+            <p className="weui-uploader__title">{title}</p>
+            <div className="weui-uploader__info">
+              <span id="uploadCount">{currentCount}</span>
+              {`/${maxCount}`}
+            </div>
+          </div>
+          {requiredFlag && (
+              <label className="weda-formcells__flag">*</label>
+          )}
+        </div>
+      </React.Fragment>
+    )
+  }
+  return (
+    <div className='weda-formcells__label weui-cell'>
+      <div className='weui-uploader__label'>
+        <p className="weui-uploader__title">{title}</p>
+        {requiredFlag && (
+                <label className="weda-formcells__flag">*</label>
+        )}
+      </div>
+      <div className="weui-uploader__info">
+        <span id="uploadCount">{currentCount}</span>
+        {`/${maxCount}`}
+      </div>
+    </div>
+  )
+}

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

@@ -76,9 +76,6 @@
   display: flex;
   justify-content: space-between;
 }
-.weui-uploader.horizontal .weui-uploader__bd {
-  padding-left: 2.28571rem;
-}
 
 /* ----上传文件----  pc */
 .weda-upload-file-pc .weda-upload-file-pc__file-item {
@@ -230,7 +227,8 @@
 
 .weda-upload-file-mobile .weda-upload-file-mobile__hd {
   width: 100%;
-  padding: 24px 20px 8px 20px;
+  padding: 16px;
+  padding-left: 0;
   display: flex;
   background-color: #fff;
 }

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

@@ -36,8 +36,8 @@
 }
 
 .weda-image.weda-image-error {
-  position: relative;
-  display: inline-block;
+  position: relative !important;
+  display: inline-block !important;
 }
 
 .weda-image:not([src]):before,
@@ -49,4 +49,4 @@
     top: 0;
     width: 100%;
     height: 100%;
-}
+}

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

@@ -23,12 +23,12 @@ export default function Image({
   events = {},
   style = {},
   // 组件属性
-  src = defaultSrc,
-  alt = '[图片]',
-  mode = 'scaleToFill',
-  lazyLoad = false,
-  imgPreview = false,
-  maskClosable = true,
+  src,
+  alt,
+  mode,
+  lazyLoad,
+  imgPreview,
+  maskClosable,
   fit,
 }: PropsType) {
   const [isError, setIsError] = useState(false);
@@ -102,4 +102,3 @@ function getObjectFitByWxImageMode(mode: TMode): React.CSSProperties['objectFit'
   const item = array.find((item) => item.mode === mode);
   return item?.h5;
 }
- 

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

@@ -23,14 +23,14 @@ export interface PropsType extends CommonPropsType {
 // 所有绝对地址直接交由浏览器，新开窗口交由浏览器
 // 当前窗口相对地址交给平台
 export default function Link({
-  content = '这是一个链接',
+  content,
   url = '',
   events = {},
   style,
   className,
   contentSlot,
   params = [], // TODO 格式定义,
-  isOpenInNewWindow = false,
+  isOpenInNewWindow,
 }: PropsType) {
   url = url.trim();
   const cls = classNames({

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

@@ -50,9 +50,9 @@ export default function ListView(props: IListView) {
     orderBy,
     orderType,
     where,
-    template = 'simpleList',
+    template,
     pageSize = 5,
-    pagination = 'loadMoreButton',
+    pagination,
     events,
     className,
     children,

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

@@ -14,8 +14,8 @@ const CLASS_PREFIX = 'weda-grid-navigation';
 
 export default function NavLayout({
   navOption,
-  mobileCol = 4,
-  pcCol = 4,
+  mobileCol,
+  pcCol,
   iconSize,
   textColor,
   fontSize,

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

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-key */
 import React, { useState, useEffect } from 'react';
 import { CommonPropsType } from '../../types';
 import classNames from '../../utils/classnames';