bulade-ui 1.0.4 → 1.0.5

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"
+  }
+}

package/src/bld-modal/index.scss

@@ -0,0 +1,108 @@
+.m-mask {
+  z-index: 1000;
+  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;
+
+  &.is-hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+.m-modal-wrap {
+  z-index: 1001;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  visibility: visible;
+  transform: translate3d(-50%, -50%, 0);
+
+  &.is-hidden {
+    visibility: hidden;
+  }
+
+  .m-modal {
+    z-index: 9;
+    position: relative;
+    width: 540rpx;
+    transform: scale(.9);
+    opacity: 0;
+    transition: transform 0.2s ease-in-out, opacity .2s ease-in-out;
+
+    &.is-show {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    .m-modal__content {
+      position: relative;
+      padding-top: 30rpx;
+      height: 100%;
+      border: 0;
+      border-radius: 3rpx;
+      text-align: center;
+      background-color: #fff;
+      background-clip: padding-box;
+      overflow: hidden;
+    }
+
+    .m-modal__title {
+      margin: 0;
+      padding: 12rpx 30rpx 24rpx;
+      font-size: 36rpx;
+      line-height: 1;
+      color: #1c2438;
+      text-align: center;
+    }
+
+    .m-modal__body {
+      max-height: 300rpx;
+      margin-bottom: 30rpx;
+      padding: 20rpx 40rpx;
+      font-size: 28rpx;
+      color: #80848f;
+      line-height: 1.5;
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .m-modal__btn-group {
+      position: relative;
+      display: flex;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        transform: scaleY(0.5);
+        background: #ddd;
+      }
+
+      .m-modal__btn {
+        position: relative;
+        flex: 1;
+
+        &.m-modal__btn--cancel::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 1px;
+          height: 100%;
+          transform: scaleX(0.5);
+          background: #ddd;
+        }
+      }
+    }
+  }
+}

package/src/bld-modal/index.wxml

@@ -0,0 +1,23 @@
+<view class="m-mask custom-mask-class {{ visible ? '' : 'is-hidden' }}" bindtap="onMaskClick"></view>
+
+<view class="m-modal-wrap custom-class {{ visible ? '' : 'is-hidden' }}">
+  <view class="m-modal {{ visible ? 'is-show' : '' }}">
+    <view class="m-modal__content">
+      <view class="m-modal__title" wx:if="{{ title }}">{{ title }}</view>
+      <view class="m-modal__body custom-body-class" wx:if="{{ content }}">{{ content }}</view>
+      <view class="m-modal__body custom-body-class" wx:else>
+        <slot />
+      </view>
+      <view class="m-modal__btn-group">
+        <view class="m-modal__btn m-modal__btn--cancel" wx:if="{{ showCancelButton }}">
+          <m-button full type="ghost" bind:click="onCancel">{{ cancelButtonText }}</m-button>
+        </view>
+        <view class="m-modal__btn" wx:if="{{ showConfirmButton }}">
+          <m-button full type="ghost" loading="{{ loading }}" bind:click="onConfirm" color="{{ confirmTextColor }}">
+            {{ confirmButtonText }}
+          </m-button>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>

package/src/bld-modal/index.wxss

@@ -0,0 +1,97 @@
+.m-mask {
+  z-index: 1000;
+  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-modal-wrap {
+  z-index: 1001;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  visibility: visible;
+  transform: translate3d(-50%, -50%, 0);
+}
+.m-modal-wrap.is-hidden {
+  visibility: hidden;
+}
+.m-modal-wrap .m-modal {
+  z-index: 9;
+  position: relative;
+  width: 540rpx;
+  transform: scale(0.9);
+  opacity: 0;
+  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+}
+.m-modal-wrap .m-modal.is-show {
+  opacity: 1;
+  transform: scale(1);
+}
+.m-modal-wrap .m-modal .m-modal__content {
+  position: relative;
+  padding-top: 30rpx;
+  height: 100%;
+  border: 0;
+  border-radius: 3rpx;
+  text-align: center;
+  background-color: #fff;
+  background-clip: padding-box;
+  overflow: hidden;
+}
+.m-modal-wrap .m-modal .m-modal__title {
+  margin: 0;
+  padding: 12rpx 30rpx 24rpx;
+  font-size: 36rpx;
+  line-height: 1;
+  color: #1c2438;
+  text-align: center;
+}
+.m-modal-wrap .m-modal .m-modal__body {
+  max-height: 300rpx;
+  margin-bottom: 30rpx;
+  padding: 20rpx 40rpx;
+  font-size: 28rpx;
+  color: #80848f;
+  line-height: 1.5;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.m-modal-wrap .m-modal .m-modal__btn-group {
+  position: relative;
+  display: flex;
+}
+.m-modal-wrap .m-modal .m-modal__btn-group::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  transform: scaleY(0.5);
+  background: #ddd;
+}
+.m-modal-wrap .m-modal .m-modal__btn-group .m-modal__btn {
+  position: relative;
+  flex: 1;
+}
+.m-modal-wrap .m-modal .m-modal__btn-group .m-modal__btn.m-modal__btn--cancel::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 1px;
+  height: 100%;
+  transform: scaleX(0.5);
+  background: #ddd;
+}

package/src/bld-modal/modal.js

@@ -0,0 +1,38 @@
+function getCtx(selector) {
+  const pages = getCurrentPages()
+  const ctx = pages[pages.length - 1]
+  const componentCtx = ctx.selectComponent(selector)
+
+  if (!componentCtx) {
+    console.error('无法找到对应的组件，请按文档说明使用组件')
+    return null
+  }
+  return componentCtx
+}
+
+const Modal = options => {
+
+  return new Promise((resolve, reject) => {
+    const { selector = '#modal' } = options
+    const modal = getCtx(selector)
+    modal._reset()
+
+    modal._confirm = resolve
+    modal._cancel = reject
+    modal._show(options)
+
+    return modal
+  })
+}
+
+Modal.alert = options => Modal(Object.assign({
+  showCancelButton: false
+}, options))
+Modal.confirm = options => Modal(options)
+
+Modal.close = (selector = '#modal') => {
+  const ctx = getCtx(selector)
+  ctx.close()
+}
+
+export default Modal

package/src/bld-navbar/index.js

@@ -0,0 +1,63 @@
+Component({
+  externalClasses: ['custom-class'],
+
+  options: {
+    addGlobalClass: true,
+  },
+
+  relations: {
+    '../bld-navbar-group/index': {
+      type: 'parent',
+      linked(target) {
+        this.parent = target
+      },
+      unlinked() {
+        this.parent = null
+      }
+    }
+  },
+
+  properties: {
+    name: {
+      type: String,
+      value: ''
+    },
+    title: {
+      type: String,
+      value: ''
+    },
+    value: {
+      type: String,
+      optionalTypes: [Number, String],
+      value: ''
+    }
+  },
+
+  data: {
+    activeName: '',
+    activeColor: ''
+  },
+
+  methods: {
+    onClick(ev = null) {
+      const parent = this.parent
+
+      parent.triggerEvent('click', this.data.name)
+
+      const baseLeft = parent.data.baseLeft
+
+      const query = this.createSelectorQuery()
+
+      query.select('.m-tab-item').boundingClientRect()
+      query.select('.m-tab-item__text').boundingClientRect()
+
+      query.exec(res => {
+        const offsetLeft = ev ? ev.currentTarget.offsetLeft : res[0].left - baseLeft
+        const itemWidth = res[0].width
+        const textWidth = res[1].width
+
+        parent.updateScrollPositon(offsetLeft, itemWidth, textWidth, this.data.name)
+      })
+    }
+  }
+})

package/src/bld-navbar/index.json

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

package/src/bld-navbar/index.scss

@@ -0,0 +1,35 @@
+:host {
+  flex: 1;
+}
+
+.m-tab-item {
+  position: relative;
+  flex: 1;
+  box-sizing: border-box;
+  padding: 0 5px;
+  display: flex;
+  justify-content: center;
+  color: #7d7e80;
+  line-height: 88rpx;
+  font-size: 28rpx;
+  -webkit-tap-highlight-color: transparent;
+
+  &.is-active {
+    font-weight: 500;
+    color: #323233;
+  }
+
+  .m-tab-item__content {
+    margin: 0 20rpx;
+    white-space: nowrap;
+
+    .m-tab-item__text {
+      display: inline-block;
+
+      .m-badge-custom {
+        margin-left: 6rpx;
+        vertical-align: text-top;
+      }
+    }
+  }
+}

package/src/bld-navbar/index.wxml

@@ -0,0 +1,8 @@
+<view class="m-tab-item {{activeName === name ? 'is-active': ''}}" bind:tap="onClick">
+  <view class="m-tab-item__content">
+    <view class="m-tab-item__text" style="{{ activeColor ? 'color:' + activeColor: '' }}">
+      {{ title }}
+      <bld-badge wx:if="{{ value }}" custom-class="m-badge-custom" value="{{ value }}" static />
+    </view>
+  </view>
+</view>

package/src/bld-navbar/index.wxss

@@ -0,0 +1,31 @@
+:host {
+  flex: 1;
+}
+
+.m-tab-item {
+  position: relative;
+  flex: 1;
+  box-sizing: border-box;
+  padding: 0 5px;
+  display: flex;
+  justify-content: center;
+  color: #7d7e80;
+  line-height: 88rpx;
+  font-size: 28rpx;
+  -webkit-tap-highlight-color: transparent;
+}
+.m-tab-item.is-active {
+  font-weight: 500;
+  color: #323233;
+}
+.m-tab-item .m-tab-item__content {
+  margin: 0 20rpx;
+  white-space: nowrap;
+}
+.m-tab-item .m-tab-item__content .m-tab-item__text {
+  display: inline-block;
+}
+.m-tab-item .m-tab-item__content .m-tab-item__text .m-badge-custom {
+  margin-left: 6rpx;
+  vertical-align: text-top;
+}