@cloudbase/lowcode-builder 1.8.43 → 1.8.44

package/lib/builder/mp/index.js

@@ -138,6 +138,7 @@ async function generateWxMp({ buildContext, weapps, calses, plugins, deployOptio
             'common/flow.js': {},
             'common/info': {},
             'common/privacyModal': {},
+            'common/modal': {},
             /**
              * 调试用
              */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/lowcode-builder",
-  "version": "1.8.43",
+  "version": "1.8.44",
   "description": "云开发 Tencent CloudBase Framework Low Code Plugin，将低码配置生成完整项目并一键部署云开发资源。",
   "author": "yhsunshining@gmail.com",
   "homepage": "https://github.com/TencentCloudBase/cloudbase-framework#readme",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@babel/core": "7.21.4",
     "@babel/preset-env": "7.21.4",
-    "@cloudbase/cals": "^1.0.28",
+    "@cloudbase/cals": "^1.0.29",
     "@cloudbase/lowcode-generator": "^1.8.14",
     "axios": "^0.21.0",
     "browserfs": "^1.4.3",
@@ -84,4 +84,4 @@
     "webpack-dev-server": "^4.7.3",
     "worker-loader": "^3.0.8"
   }
-}
+}

package/template/mp/common/modal/index.js

@@ -0,0 +1,200 @@
+function classNames(...args) {
+  const classes = [];
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (!arg) continue;
+
+    const argType = typeof arg;
+
+    if (argType === 'string' || argType === 'number') {
+      classes.push(arg);
+    } else if (Array.isArray(arg)) {
+      if (arg.length) {
+        const inner = classes.push(classNames(...arg));
+        if (inner) {
+          classes.push(inner);
+        }
+      }
+    } else if (argType === 'object') {
+      if (arg.toString === Object.prototype.toString) {
+        Object.keys(arg).forEach((key) => {
+          arg[key] && classes.push(key);
+        });
+      } else {
+        classes.push(arg.toString());
+      }
+    }
+  }
+
+  return classes.join(' ');
+}
+
+const WD_PREFIX = 'wd'
+
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+  behaviors: [],
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+    defaultShow: {
+      type: Boolean,
+      value: false,
+    },
+    position: {
+      type: String,
+      value: 'bottom',
+    },
+    closeType: {
+      type: Array,
+      value: ['mask'],
+    },
+    defaultMaskShow: {
+      type: Boolean,
+      value: true,
+    },
+  },
+  data: {
+    cls: '',
+    styleMain: '',
+    styleShow: '',
+    classPrefix: WD_PREFIX,
+    modalMaskClasses: '', // 遮罩层样式
+    modalBdClasses: '', // 主体内容样式
+    isBdShow: true, // 弹窗主体内容显示控制
+    isMaskShow: false, // 弹窗遮罩层显示控制
+    maskPreToShow: false, // 弹窗遮罩层预显示控制，为了动画
+    openInfo: null,
+    closeInfo: null,
+  },
+  lifetimes: {
+    attached() {
+      // this.updateWidgetAPI();
+    },
+  },
+  methods: {
+    updateWidgetAPI() {
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          open: this.onOpen.bind(this),
+          close: this.onClose.bind(this),
+          modalState: this.data.isBdShow ? 'open' : 'close',
+          openInfo: this.data.openInfo,
+          closeInfo: this.data.closeInfo,
+        });
+    },
+    /**
+     * 控制弹窗打开/关闭
+     * @param {Boolean} isOpen
+     */
+    dealShow(isOpen) {
+      let setImmediately = {
+        maskPreToShow: true,
+        isMaskShow: !isOpen,
+        isBdShow: isOpen,
+      };
+
+      if (!isOpen) {
+        setImmediately = {
+          isBdShow: isOpen,
+          isMaskShow: !isOpen,
+          maskPreToShow: false,
+        };
+      }
+
+      this.setData(setImmediately);
+
+      this.triggerEvent(isOpen ? 'open' : 'close');
+    },
+    /**
+     * 关闭弹窗
+     */
+    onClose(params) {
+      this.dealShow(false);
+      this.setData({ closeInfo: params?.info || params });
+    },
+    /**
+     * 开启弹窗
+     */
+    onOpen(params) {
+      this.dealShow(true);
+      this.setData({ openInfo: params?.info || params });
+    },
+    /**
+     * 点击遮罩层
+     */
+    maskClick() {
+      if (this.data.closeType.includes('mask')) {
+        this.onClose();
+      }
+    },
+  },
+  observers: {
+    'style,className,position,isMaskShow,defaultMaskShow,isBdShow': function (
+      style,
+      className,
+      position,
+      isMaskShow,
+      defaultMaskShow,
+      isBdShow
+    ) {
+      const defaultWidth = { center: 'calc(100% - 4.57rem)', bottom: '100%' }[
+        position
+      ];
+      const styleShow = `width: ${defaultWidth};` + style;
+      const styleMain = style?.match(/(display:).*?(;)/g)?.join('');
+
+      // 响应式css api
+      const cls = classNames({
+        [`${WD_PREFIX}-modal`]: true,
+        [`${WD_PREFIX}-modal-center`]: position === 'center',
+        [`${WD_PREFIX}-mp-modal`]: true,
+        [`${WD_PREFIX}-mp-modal-hide`]: !isBdShow,
+        [className]: className,
+      });
+      // 遮罩层样式
+      const modalMaskClasses = classNames({
+        [`${WD_PREFIX}-modal-mask`]: true,
+        [`${WD_PREFIX}-modal-mask__fadein`]: true,
+        [`${WD_PREFIX}-modal-mask__fadeout`]: isMaskShow,
+        [`${WD_PREFIX}-modal-mask__hide`]: !defaultMaskShow,
+      });
+      // 主体内容样式
+      const modalBdClasses = classNames({
+        'weda-modal-new': true,
+        [`${WD_PREFIX}-modal-bd`]: true,
+        [`${WD_PREFIX}-modal-bd__toggle`]: isBdShow,
+        [`${WD_PREFIX}-modal-bd__box`]:
+          !defaultMaskShow && position === 'center',
+      });
+
+      this.setData({
+        styleMain,
+        styleShow,
+        cls,
+        modalMaskClasses,
+        modalBdClasses,
+      });
+    },
+    defaultShow: function (defaultShow) {
+      this.dealShow(defaultShow);
+    },
+    'isBdShow,openInfo,closeInfo': function () {
+      this.updateWidgetAPI();
+    },
+  },
+});

package/template/mp/common/modal/index.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {}
+}

package/template/mp/common/modal/index.wxml

@@ -0,0 +1,16 @@
+<view id="{{id}}" style="{{styleMain}}" class="{{cls}}">
+  <block wx:if="{{maskPreToShow}}">
+    <view class="{{modalMaskClasses}}" bindtap="maskClick" />
+    <view style="{{styleShow}}" class="{{modalBdClasses}}">
+      <view class="{{classPrefix + '-modal-bd__hd'}}">
+        <slot name="headerSlot"></slot>
+      </view>
+      <view class="{{classPrefix + '-modal-bd__main'}}">
+        <slot name="contentSlot"></slot>
+      </view>
+      <view class="{{classPrefix + '-modal-bd__ft'}}">
+        <slot name="footerSlot"></slot>
+      </view>
+    </view>
+  </block>
+</view>

package/template/mp/common/modal/index.wxss

@@ -0,0 +1 @@
+@import './wd-modal.wxss';

package/template/mp/common/modal/wd-modal.wxss

@@ -0,0 +1,177 @@
+@charset "UTF-8";
+@-webkit-keyframes wd-fadein {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes wd-fadein {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes wd-fadeout {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes wd-fadeout {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.wd-modal {
+  position: fixed;
+  z-index: 1000;
+}
+.wd-modal-mask {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  z-index: 1000;
+}
+.wd-modal-mask__fadein {
+  animation: wd-fadein 0.3s forwards;
+}
+.wd-modal-mask__fadeout {
+  animation: wd-fadeout 0.3s forwards;
+}
+.wd-modal-mask__hide {
+  background: transparent;
+}
+.wd-modal-bd {
+  overflow: hidden;
+  position: fixed;
+  left: 50%;
+  bottom: 0;
+  background: #fff;
+  box-sizing: border-box;
+  z-index: 1001;
+  transform: translate(-50%, 100%);
+  transition: all 0.3s;
+  height: inherit;
+  width: inherit;
+  overflow-y: auto;
+  border: 0.5px solid #dcdcdc;
+  display: flex;
+  flex-direction: column;
+}
+.wd-modal-bd__box {
+  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.05), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 8px 10px rgba(0, 0, 0, 0.08);
+}
+.wd-modal-bd__toggle {
+  transform: translate(-50%, 0);
+}
+.wd-modal-bd__hd {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font: var(--wd-typography-title-lg);
+}
+.wd-modal-bd__hd:empty {
+  margin-bottom: 0;
+}
+.wd-modal-bd__hd .wd-icon {
+  margin-left: auto;
+}
+.wd-modal-bd__main {
+  flex: 1;
+  overflow-y: auto;
+  color: #16181a;
+}
+.wd-modal-bd__main:empty {
+  margin-top: 0;
+}
+.wd-modal-bd__ft {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.wd-modal-bd__ft:empty {
+  margin-top: 0;
+}
+.wd-modal-bd__ft .wd-btn {
+  margin-right: 12px;
+}
+
+.wd-modal-center .wd-modal-bd {
+  bottom: 50%;
+  transform: translate(-50%, 50%);
+  opacity: 0;
+}
+.wd-modal-center .wd-modal-bd__toggle {
+  opacity: 1;
+}
+
+.wd-modal {
+  left: 0;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+.wd-modal.wd-mp-modal-hide {
+  z-index: -1;
+}
+.wd-modal-center {
+  align-items: center;
+}
+.wd-modal-center .wd-modal-bd {
+  transform: unset;
+}
+.wd-modal-bd {
+  border-radius: 24rpx 24rpx 0 0;
+  padding: 64rpx 48rpx 48rpx 48rpx;
+  max-height: 1412rpx;
+  position: static;
+}
+.wd-modal-bd__hd {
+  margin-bottom: 16rpx;
+}
+.wd-modal-bd__main {
+  font-size: 32rpx;
+}
+.wd-modal-bd__ft {
+  margin-top: 48rpx;
+}
+.wd-modal-bd__ft-btn {
+  border-radius: 12rpx;
+  margin-right: 24rpx;
+  padding: 16rpx 48rpx;
+  font-size: 32rpx;
+}
+.wd-modal-bd__toggle {
+  transform: unset;
+}
+
+.wd-modal-center .wd-modal-bd {
+  border-radius: 24rpx;
+}
+
+.weda-modal-new.wd-modal-bd {
+  padding: 32rpx 24rpx 24rpx 24rpx;
+  padding-bottom: 24rpx;
+  padding-bottom: calc(constant(safe-area-inset-bottom) + 24rpx);
+  /* 兼容 iOS < 11.2 */
+  padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
+  /* 兼容 iOS >= 11.2 */
+}

package/template/mp/common/privacyModal/index.json

@@ -1,10 +1,7 @@
 {
   "component": true,
-  "styleIsolation": "shared",
+  "styleIsolation": "apply-shared",
   "usingComponents": {
-    "modal": "/materials/gsd-h5-react/components/wd-modal/index",
-    "text": "/materials/gsd-h5-react/components/wd-text/index",
-    "icon": "/materials/gsd-h5-react/components/wd-icon/index",
-    "wd-button": "/materials/gsd-h5-react/components/wd-button/index"
+    "modal": "/common/modal/index"
   }
 }

package/template/mp/common/privacyModal/index.wxml

@@ -1,11 +1,11 @@
-<modal defaultShow="{{visible}}" closeType="{{[]}}">
-  <text level="title-6" text="{{title}}" slot="headerSlot">{{title}}</text>
-  <icon style="color: rgba(0, 0, 0, 0.6);" name="td:close" size="md" bind:tap="handleDisagree" slot="headerSlot"/>
+<modal className="privacy" defaultShow="{{visible}}" closeType="{{[]}}">
+  <text class="{{textClass}} wd-typography-title-lg" slot="headerSlot">{{title}}</text>
+  <view class="wd-icon t-icon t-icon-close wd-icon--md wd-mp-icon" style="color: rgba(0, 0, 0, 0.6);" bind:tap="handleDisagree" slot="headerSlot"></view>
 
-  <text style="display:inline;" level="body-default" text="{{desc1}}" slot="contentSlot" />
-  <text style="display:inline;color: var(--wd-color-brand)" level="body-default" text="{{urlTitle}}" slot="contentSlot" bindtap="openPrivacyContract" />
-  <text style="display:inline;" level="body-default" text="{{desc2}}" slot="contentSlot" />
+  <text class="{{textClass}}" style="display:inline;" level="body-default" slot="contentSlot">{{desc1}}</text>
+  <text class="{{textClass}}" style="display:inline;color: var(--wd-color-brand)" level="body-default" slot="contentSlot" bindtap="openPrivacyContract">{{urlTitle}}</text>
+  <text class="{{textClass}}" style="display:inline;" level="body-default" slot="contentSlot">{{desc2}}</text>
 
-  <wd-button text="取消" slot="footerSlot" theme="secondary" variant="outline" size="md" bindtap="handleDisagree"/>
-  <button class="wd-btn wd-btn--primary wd-btn--base wd-btn--md wd-mp-btn" id="agree-btn" theme="primary" variant="base" size="md" open-type="agreePrivacyAuthorization" bindtap="close" bindagreeprivacyauthorization="handleAgree" slot="footerSlot">同意</button>
+  <button class="privacy-btn wd-btn wd-btn--secondary wd-btn--outline wd-btn--md wd-mp-btn" slot="footerSlot" theme="secondary" variant="outline" size="md" bind:tap="handleDisagree">取消</button>
+  <button class="privacy-btn wd-btn wd-btn--primary wd-btn--base wd-btn--md wd-mp-btn" id="agree-btn" type="primary" variant="base" size="default" open-type="agreePrivacyAuthorization" bindtap="close" bindagreeprivacyauthorization="handleAgree" slot="footerSlot">同意</button>
 </modal>

package/template/mp/common/privacyModal/index.wxss

@@ -1,5 +1,18 @@
 /* common/privacyModel/index.wxss */
-.weda-modal-new {
+
+.privacy .weda-modal-new {
   padding: 32rpx 24rpx 24rpx 24rpx;
-  padding-bottom: 24rpx !important;
+  padding-bottom: 24rpx;
+  padding-bottom: calc(constant(safe-area-inset-bottom) + 24rpx);
+  /* 兼容 iOS < 11.2 */
+  padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
+  /* 兼容 iOS >= 11.2 */
+}
+
+.privacy-btn {
+  font-size: 28rpx;
+  width: 200rpx;
+  height: 70rpx;
+  line-height: 70rpx;
+  margin: 0
 }

package/template/mp/package.json

@@ -6,7 +6,7 @@
 		"@cloudbase/js-sdk": "2.5.6-beta.1",<%
     } %>
 		"@cloudbase/oauth": "0.1.1-alpha.5",
-    "@cloudbase/weda-client": "1.0.9",
+    "@cloudbase/weda-client": "1.0.10",
     "@cloudbase/weda-cloud-sdk": "1.0.45",
     "mobx": "^5.15.4",
     "lodash.get": "^4.4.2",