bulade-ui 1.0.4 → 1.0.6

package/src/bld-action-sheet/index.wxss

@@ -0,0 +1,160 @@
+.m-mask {
+  z-index: 1998;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 1;
+  visibility: visible;
+  background: var(--color-mask, rgba(0, 0, 0, 0.55));
+  transition: all 0.25s ease-in-out;
+}
+.m-mask.is-hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.m-sheet {
+  z-index: 1999;
+  position: fixed;
+  width: 100%;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  visibility: visible;
+  background: #fff;
+  transform: translate3d(0, 0, 0);
+  transform-origin: center;
+  transition: all 0.25s ease-in-out;
+  box-sizing: border-box;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.m-sheet.is-hidden {
+  transform: translate3d(0, 100%, 0);
+  visibility: hidden;
+}
+.m-sheet .m-sheet__header {
+  background: #fff;
+  text-align: center;
+  position: relative;
+  font-size: 24rpx;
+  color: #80848f;
+}
+.m-sheet .m-sheet__header::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 200%;
+  height: 200%;
+  transform: scale(0.5);
+  transform-origin: 0 0;
+  pointer-events: none;
+  box-sizing: border-box;
+  border: 0 solid var(--color-border, #dcdee2);
+  border-bottom-width: 1px;
+}
+.m-sheet .m-sheet__item {
+  position: relative;
+}
+.m-sheet .m-sheet__item::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 200%;
+  height: 200%;
+  transform: scale(0.5);
+  transform-origin: 0 0;
+  pointer-events: none;
+  box-sizing: border-box;
+  border: 0 solid var(--color-border, #dcdee2);
+  border-bottom-width: 1px;
+}
+.m-sheet .m-sheet__item:nth-last-child(1)::after {
+  display: none;
+}
+.m-sheet .m-sheet__cancel {
+  border-top: 24rpx solid #e3e3e3;
+}
+.m-sheet .m-sheet__loading {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 20rpx;
+  width: 24rpx;
+  height: 24rpx;
+  background: 0 0;
+  border-radius: 50%;
+  border: 4rpx solid #e5e5e5;
+  border-left-color: #666;
+  animation: btn-spin 0.6s linear infinite;
+}
+.m-sheet .m-sheet__text {
+  display: inline-block;
+  vertical-align: middle;
+}
+.m-sheet .m-sheet__btn-icon {
+  margin-right: 8rpx;
+}
+@keyframes btn-spin {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.m-sheet .m-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  white-space: nowrap;
+  letter-spacing: 4rpx;
+  height: 96rpx;
+  font-size: 32rpx;
+  border: 0 !important;
+  border-radius: 0;
+  color: #495060;
+  overflow: visible;
+  background-color: #fff;
+  box-sizing: border-box;
+  transition: opacity 0.16s, background-color 0.16s;
+}
+.m-sheet .m-button.is-hover {
+  background-color: #f9f9f9;
+}
+.m-sheet .m-button.is-disabled {
+  color: #c8c9cc;
+}
+.m-sheet .m-button::after {
+  border: none;
+  content: " ";
+  height: 1px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  transform: scaleY(0.5);
+  transform-origin: 0 0;
+  box-sizing: border-box;
+}
+.m-sheet .m-button .m-sheet__btn-icon {
+  display: inline-block;
+  font-size: 28rpx;
+  width: 24rpx;
+  height: 24rpx;
+}
+.m-sheet .m-button .m-button__loading {
+  display: inline-block;
+  vertical-align: middle;
+  width: 32rpx;
+  height: 32rpx;
+  background-color: 0 0;
+  border-radius: 50%;
+  border: 4rpx solid currentColor;
+  border-left-color: transparent;
+  animation: btn-spinner 0.8s linear;
+  animation-iteration-count: infinite;
+}

package/src/bld-badge/index.js

@@ -0,0 +1,53 @@
+Component({
+  externalClasses: ['custom-class'],
+
+  options: {
+    addGlobalClass: true,
+  },
+
+  properties: {
+    value: {
+      type: Number,
+      optionalTypes: [Number, String],
+      value: '',
+      observer: '_valueObserver'
+    },
+    max: {
+      type: Number,
+      value: 99
+    },
+    bgcolor: {
+      type: String,
+      value: ''
+    },
+    isDot: {
+      type: Boolean,
+      value: false
+    },
+    static: {
+      type: Boolean,
+      value: false
+    }
+  },
+
+  data: {
+    _value: 0
+  },
+
+  methods: {
+    _valueObserver() {
+      const { value, max } = this.data
+
+      let _value = ''
+      if (!isNaN(value)) {
+        _value = parseInt(value) > parseInt(max) ? `${max}+` : value
+      } else {
+        _value = value
+      }
+
+      this.setData({
+        _value
+      })
+    }
+  }
+})

package/src/bld-badge/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/src/bld-badge/index.scss

@@ -0,0 +1,46 @@
+.m-badge {
+	position: relative;
+	display: inline-block;
+	line-height: 1;
+
+	.m-badge-dot {
+		z-index: 1;
+		position: absolute;
+		top: 0;
+		right: 0;
+		height: 18rpx;
+		width: 18rpx;
+		transform: translate(50%, -50%);
+		transform-origin: 0;
+		border-radius: 50%;
+		background-color: var(--color-danger, #F56C6C);
+		box-shadow: 0 0 0 1px #fff;
+	}
+
+	.m-badge-count {
+		z-index: 1;
+		position: absolute;
+		top: 0;
+		right: 0;
+		padding: 0 6rpx;
+		min-width: 20rpx;
+		height: 28rpx;
+		line-height: 28rpx;
+		color: #fff;
+		font-size: 24rpx;
+		border-radius: 40rpx;
+		border: 1px solid transparent;
+		text-align: center;
+		white-space: nowrap;
+		transform: translate(80%, -50%);
+		background-color: var(--color-danger, #F56C6C);
+		box-shadow: 0 0 0 4rpx #fff;
+		box-sizing: content-box;
+
+		&.m-badge-count__static {
+			display: inline-block;
+			position: static;
+			transform: translateX(0);
+		}
+	}
+}

package/src/bld-badge/index.wxml

@@ -0,0 +1,14 @@
+<view class="m-badge custom-class">
+  <slot />
+  <view 
+    wx:if="{{ isDot }}"
+    class="m-badge-dot" 
+    style="{{ bgcolor ? 'background-color: ' + bgcolor : '' }}"
+  ></view>
+
+  <view 
+    wx:elif="{{ value }}"
+    class="m-badge-count {{ static ? 'm-badge-count__static':'' }}" 
+    style="{{ bgcolor ? 'background-color: ' + bgcolor : '' }}"
+  >{{ _value }}</view>
+</view>

package/src/bld-badge/index.wxss

@@ -0,0 +1,43 @@
+.m-badge {
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+}
+.m-badge .m-badge-dot {
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 18rpx;
+  width: 18rpx;
+  transform: translate(50%, -50%);
+  transform-origin: 0;
+  border-radius: 50%;
+  background-color: var(--color-danger, #F56C6C);
+  box-shadow: 0 0 0 1px #fff;
+}
+.m-badge .m-badge-count {
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0 6rpx;
+  min-width: 20rpx;
+  height: 28rpx;
+  line-height: 28rpx;
+  color: #fff;
+  font-size: 24rpx;
+  border-radius: 40rpx;
+  border: 1px solid transparent;
+  text-align: center;
+  white-space: nowrap;
+  transform: translate(80%, -50%);
+  background-color: var(--color-danger, #F56C6C);
+  box-shadow: 0 0 0 4rpx #fff;
+  box-sizing: content-box;
+}
+.m-badge .m-badge-count.m-badge-count__static {
+  display: inline-block;
+  position: static;
+  transform: translateX(0);
+}

package/src/bld-button/index.wxml

@@ -1,4 +1,3 @@
 <view class="button {{ type }} {{ size }} iclass">
   <slot />
-  <bld-icon name="loading" />
 </view>

package/src/bld-content-container/index.js

@@ -0,0 +1,46 @@
+const app = getApp();
+
+const menuButtonInfo = app.globalData.menuButtonDistance;
+const systemInfo = app.globalData.systemInfo;
+const paddingBottomUnit = 40;
+const statusBarHeight = app.globalData.systemInfo.statusBarHeight;
+const gap = menuButtonInfo.top - statusBarHeight;
+const navBarHeight = statusBarHeight + menuButtonInfo.height + gap * 2;
+
+Component({
+  externalClasses: ["iclass"],
+  options: {
+    styleIsolation: 'apply-shared'
+  },
+  properties: {
+    navBarPosition: {
+      type: String,
+      value: "",
+    },
+    top: {
+      type: Number,
+      value: 1,
+    },
+    bottom: {
+      type: Number,
+      value: 1,
+    },
+  },
+  data: {
+    style: `padding-top: ${gap}px;padding-bottom: ${paddingBottomUnit}px`,
+  },
+
+  observers: {
+    "navBarPosition, top, bottom": function (navBarPosition, top, bottom) {
+      if (navBarPosition === "fixed") {
+        this.setData({
+          style: `padding-top: ${navBarHeight + gap * this.data.top}px;padding-bottom: ${bottom * paddingBottomUnit}px`,
+        });
+      } else {
+        this.setData({
+          style: `padding-top: ${gap * this.data.top}px;padding-bottom: ${bottom * paddingBottomUnit}px`,
+        });
+      }
+    },
+  },
+});

package/src/bld-content-container/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/src/bld-content-container/index.wxml

@@ -0,0 +1,5 @@
+<view
+  class="content-container iclass"
+  style="{{ style }}">
+  <slot />
+</view>

package/src/bld-drawer/index.scss

@@ -24,7 +24,8 @@
     right: 0;
     bottom: 0;
     background-color: var(--color-mask, rgba(0, 0, 0, 0.55));
-    transition: opacity .25s ease-in-out, visibility .25s ease-in-out;
+    // transition: opacity .25s ease-in-out, visibility .25s ease-in-out;
+    transition: all 200ms ease;
   }
 
   .m-drawer__content {
@@ -33,7 +34,9 @@
     position: fixed;
     transform-origin: center;
     background-color: #fff;
-    transition: transform .25s ease-in-out, opacity .25s ease-in-out, visibility .25s ease-in-out;
+    // transition: transform .25s ease-in-out, opacity .25s ease-in-out, visibility .25s ease-in-out;
+    transition: all 300ms ease;
+    border-radius:20rpx;
   }
 
   &.m-drawer--left {
@@ -41,6 +44,7 @@
       top: 0;
       left: 0;
       transform: translate3d(-100%, 0, 0);
+      
     }
   }
 
@@ -66,7 +70,8 @@
       left: 0;
       bottom: 0;
       width: 100%;
-      transform: translate3d(0, 100%, 0);
+      // transform: translate3d(0, 100%, 0);
+      transform: scale(1) translate3d(0, 100%, 0);
       padding-bottom: constant(safe-area-inset-bottom);
       padding-bottom: env(safe-area-inset-bottom);
     }

package/src/bld-drawer/index.wxss

@@ -21,7 +21,7 @@
   right: 0;
   bottom: 0;
   background-color: var(--color-mask, rgba(0, 0, 0, 0.55));
-  transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
+  transition: all 200ms ease;
 }
 .m-drawer .m-drawer__content {
   opacity: 0;
@@ -29,7 +29,8 @@
   position: fixed;
   transform-origin: center;
   background-color: #fff;
-  transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
+  transition: all 300ms ease;
+  border-radius: 20rpx;
 }
 .m-drawer.m-drawer--left .m-drawer__content {
   top: 0;
@@ -51,7 +52,7 @@
   left: 0;
   bottom: 0;
   width: 100%;
-  transform: translate3d(0, 100%, 0);
+  transform: scale(1) translate3d(0, 100%, 0);
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
 }

package/src/bld-empty-page/index.js

@@ -0,0 +1,23 @@
+const app = getApp();
+
+Component({
+  externalClasses: ["iclass"],
+  properties: {
+    content: {
+      type: String,
+      value: "这里什么都没有",
+    },
+    imageSrc: {
+      type: String,
+      value: "empty/empty-default.png",
+    },
+    padding: {
+      type: String,
+      value: "40% 0",
+    },
+    showImage: {
+      type: Boolean,
+      value: true,
+    },
+  },
+});

package/src/bld-empty-page/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/src/bld-empty-page/index.scss

@@ -0,0 +1,15 @@
+.empty {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+
+  font-weight: 400;
+  color: #a3a3a3;
+  .img {
+    height: 300rpx;
+    width: 300rpx;
+    margin-bottom: 32rpx;
+    background: none;
+  }
+}

package/src/bld-empty-page/index.wxml

@@ -0,0 +1,11 @@
+<view
+  class="empty iclass"
+  style="padding: {{ padding }}"
+>
+  <cloud-image
+    wx:if="{{ showImage }}"
+    iclass="img iclass"
+    src="{{ imageSrc }}"
+  />
+  <text>{{ content }}</text>
+</view>

package/src/bld-empty-page/index.wxss

@@ -0,0 +1,14 @@
+.empty {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  font-weight: 400;
+  color: #a3a3a3;
+}
+.empty .img {
+  height: 300rpx;
+  width: 300rpx;
+  margin-bottom: 32rpx;
+  background: none;
+}

package/src/bld-modal/index.js

@@ -0,0 +1,123 @@
+Component({
+  externalClasses: ['custom-class', 'custom-mask-class', 'custom-body-class'],
+
+  options: {
+    addGlobalClass: true,
+  },
+
+  properties: {
+    visible: {
+      type: Boolean,
+      value: false
+    },
+    title: {
+      type: String,
+      value: ''
+    },
+    content: {
+      type: String,
+      value: ''
+    },
+    closeOnClickModal: {
+      type: Boolean,
+      value: true
+    },
+    showConfirmButton: {
+      type: Boolean,
+      value: true
+    },
+    showCancelButton: {
+      type: Boolean,
+      value: true
+    },
+    confirmButtonText: {
+      type: String,
+      value: '确定'
+    },
+    cancelButtonText: {
+      type: String,
+      value: '取消'
+    },
+    confirmTextColor: {
+      type: String,
+      value: '#409EFF'
+    },
+    loading: {
+      type: Boolean,
+      value: false
+    },
+    asyncClose: {
+      type: Boolean,
+      value: false
+    }
+  },
+
+  methods: {
+    _reset() {
+      this.setData({
+        title: '',
+        content: '',
+        showConfirmButton: true,
+        showCancelButton: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        confirmTextColor: '#409EFF',
+        loading: false,
+        asyncClose: false
+      })
+    },
+
+    // 确定
+    onConfirm() {
+      // 异步
+      if (this.data.asyncClose) {
+        this.setData({
+          loading: true
+        })
+        if (this._confirm) {
+          this._confirm()
+        }
+      } else {
+        if (this._confirm) {
+          this.close()
+        }
+      }
+      this.triggerEvent('confirm')
+    },
+
+    onCancel() {
+      if (this.data.loading) return
+
+      this.setData({
+        visible: false
+      })
+      this.triggerEvent('cancel')
+
+      if (this._cancel) {
+        this._cancel()
+        this.close()
+      }
+    },
+
+    onMaskClick() {
+      if (!this.data.closeOnClickModal) return;
+      this.close()
+    },
+
+    _show(options) {
+      this.setData({
+        ...options,
+        visible: true
+      })
+    },
+
+    // 关闭并重置默认参数
+    close() {
+      this.setData({
+        visible: false
+      })
+
+      this.triggerEvent('close')
+    }
+  }
+})

package/src/bld-modal/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "m-button": "../button/index"
+  }
+}