bulade-ui 1.0.0

package/src/bld-page/index.wxss

@@ -0,0 +1,16 @@
+page {
+  height: 100%;
+  width: 100%;
+}
+
+.page {
+  height: 100%;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex: 1;
+  width: 100%;
+}

package/src/bld-retry/index.js

@@ -0,0 +1,23 @@
+Component({
+  externalClasses: ["iclass"],
+  properties: {
+    title: {
+      type: String,
+      value: "加载失败",
+    },
+    description: {
+      type: String,
+      value: "发生了一些错误",
+    },
+    actionText: {
+      type: String,
+      value: "点击重试",
+    },
+  },
+
+  methods: {
+    retry() {
+      this.triggerEvent("on-retry");
+    },
+  },
+});

package/src/bld-retry/index.json

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

package/src/bld-retry/index.scss

@@ -0,0 +1,26 @@
+.retry {
+  padding: 24rpx;
+  color: #333;
+  padding: 24rpx 12rpx;
+  border-radius: 12rpx;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.title {
+  margin-bottom: 24rpx;
+}
+
+.action, .description {
+  font-size: var(--font-size-sm);
+}
+
+.description {
+  margin-bottom: 24rpx;
+}
+
+
+

package/src/bld-retry/index.wxml

@@ -0,0 +1,5 @@
+<view class="iclass retry" bind:tap="retry">
+  <view class="title">{{ title }}</view>
+  <view class="description">{{ description }}</view>
+  <view class="action">{{actionText}}</view>
+</view>

package/src/bld-retry/index.wxss

@@ -0,0 +1,23 @@
+.retry {
+  padding: 24rpx;
+  color: #333;
+  padding: 24rpx 12rpx;
+  border-radius: 12rpx;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.title {
+  margin-bottom: 24rpx;
+}
+
+.action, .description {
+  font-size: var(--font-size-sm);
+}
+
+.description {
+  margin-bottom: 24rpx;
+}

package/src/bld-scroll-view/index.js

@@ -0,0 +1,28 @@
+Component({
+  externalClasses: ["iclass"],
+  properties: {
+    type: {
+      type: String,
+      value: "list",
+    },
+    mode: {
+      type: String,
+      value: "nav-to-bottom",
+    },
+    scrollTop: {
+      type: Number,
+      value: 0,
+    },
+  },
+  methods: {
+    scroll(e) {
+      this.triggerEvent("scroll", { ...e.detail });
+    },
+    scrollEnd(e) {
+      this.triggerEvent("scrollEnd", { ...e.detail });
+    },
+    scrollToLower(e) {
+      this.triggerEvent("scrollToLower", { ...e.detail });
+    },
+  },
+});

package/src/bld-scroll-view/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {
+    "bld-wrapper": "../bld-wrapper/index"
+  }
+}

package/src/bld-scroll-view/index.scss

@@ -0,0 +1,7 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  height: 100%;
+  width: 100%;
+}

package/src/bld-scroll-view/index.wxml

@@ -0,0 +1,42 @@
+<template
+  is="{{ type }}"
+  data="{{ mode, scrollTop }}"
+/>
+
+<template name="list">
+  <bld-wrapper mode="{{ mode }}">
+    <scroll-view
+      enable-passive="{{ true }}"
+      show-scrollbar="{{ false }}"
+      type="list"
+      class="iclass container"
+      scroll-y
+      scroll-top="{{ scrollTop }}"
+      bind:scroll="scroll"
+      bind:scrollend="scrollEnd"
+      bind:scrolltolower="scrollToLower"
+    >
+      <slot />
+      <view style="height: 100rpx;" />
+    </scroll-view>
+  </bld-wrapper>
+</template>
+
+<template name="custom">
+  <bld-wrapper mode="{{ mode }}">
+    <scroll-view
+      enable-passive="{{ true }}"
+      show-scrollbar="{{ false }}"
+      type="custom"
+      class="iclass container"
+      scroll-y
+      scroll-top="{{ scrollTop }}"
+      bind:scroll="scroll"
+      bind:scrollend="scrollEnd"
+      bind:scrolltolower="scrollToLower"
+    >
+      <slot />
+      <view style="height: 100rpx;" />
+    </scroll-view>
+  </bld-wrapper>
+</template>

package/src/bld-scroll-view/index.wxss

@@ -0,0 +1,7 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  height: 100%;
+  width: 100%;
+}

package/src/bld-text/index.js

@@ -0,0 +1,46 @@
+Component({
+  externalClasses: ["iclass"],
+  properties: {
+    text: {
+      type: String,
+      value: "加载中...",
+    },
+    maxLines: {
+      type: Number,
+      value: 3,
+    },
+    stripHtml: {
+      type: Boolean,
+      value: true,
+    },
+    stripInVisible: {
+      type: Boolean,
+      value: true,
+    },
+    size: {
+      type: String,
+      value: "lg-r",
+    },
+  },
+  data: {
+    formattedText: "加载中...",
+  },
+  observers: {
+    text() {
+      let formattedText = this.data.text;
+      if (this.data.stripHtml) {
+        // 替换 html 标签
+        formattedText = formattedText.replace(/<[^>]*>|&nbsp;/gm, "");
+      }
+
+      if (this.data.stripInVisible) {
+        // 替换不可见字符
+        formattedText = formattedText.replace(/[\u0000-\u001F\u007F-\u009F]/g, "");
+      }
+
+      this.setData({
+        formattedText,
+      });
+    },
+  },
+});

package/src/bld-text/index.json

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

package/src/bld-text/index.scss

@@ -0,0 +1,30 @@
+.content {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &.sm {
+    line-height: calc(var(--font-size-sm) * 1.8);
+    letter-spacing: 1rpx;
+    font-size: var(--font-size-sm);
+  }
+
+  &.md {
+    line-height: calc(var(--font-size-md) * 1.8);
+    letter-spacing: 1rpx;
+    font-size: var(--font-size-md);
+  }
+
+  &.lg-r {
+    line-height: calc(var(--font-size-lg-r) * 1.8);
+    letter-spacing: 1rpx;
+    font-size: var(--font-size-lg-r);
+  }
+
+  &.lg {
+    line-height: calc(var(--font-size-lg) * 1.8);
+    letter-spacing: 1rpx;
+    font-size: var(--font-size-lg);
+  }
+}

package/src/bld-text/index.wxml

@@ -0,0 +1,3 @@
+<view class="content {{size}} iclass" style="-webkit-line-clamp: {{maxLines}}; line-clamp: {{maxLines}};">
+  <text max-lines="{{ maxLines }}" overflow="ellipsis">{{ formattedText }}</text>
+</view>

package/src/bld-text/index.wxss

@@ -0,0 +1,26 @@
+.content {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.content.sm {
+  line-height: calc(var(--font-size-sm) * 1.8);
+  letter-spacing: 1rpx;
+  font-size: var(--font-size-sm);
+}
+.content.md {
+  line-height: calc(var(--font-size-md) * 1.8);
+  letter-spacing: 1rpx;
+  font-size: var(--font-size-md);
+}
+.content.lg-r {
+  line-height: calc(var(--font-size-lg-r) * 1.8);
+  letter-spacing: 1rpx;
+  font-size: var(--font-size-lg-r);
+}
+.content.lg {
+  line-height: calc(var(--font-size-lg) * 1.8);
+  letter-spacing: 1rpx;
+  font-size: var(--font-size-lg);
+}

package/src/bld-toast/index.js

@@ -0,0 +1,115 @@
+const defaults_data = {
+  visible: false,
+  show: false,
+  mask: false,
+  ghost: true,
+  message: '',
+  position: 'middle', //top middle bottom
+  duration: 20000,
+  image: '',
+  icon: '',
+  iconColor: '#fff',
+  iconSize: 80,
+  type: '',
+  zIndex: -1
+}
+
+Component({
+  externalClasses: ['custom-class'],
+
+  options: {
+    addGlobalClass: true,
+  },
+
+  data: {
+    ...defaults_data,
+    transformStyle: '',
+  },
+
+  ready() {
+    if (wx.canIUse('getWindowInfo')) {
+      const windowInfo = wx.getWindowInfo()
+      this.computedBarH(windowInfo)
+    } else {
+      // 该方法为同步
+      wx.getSystemInfo({
+        success: (windowInfo) => {
+          this.computedBarH(windowInfo)
+        }
+      })
+    }
+  },
+
+  methods: {
+    computedBarH(windowInfo) {
+      const {
+        screenHeight,
+        windowHeight,
+        statusBarHeight
+      } = windowInfo;
+
+      // 自定义导航栏
+      if (screenHeight === windowHeight) {
+        let customBarH = 44;
+        let capsule = wx.getMenuButtonBoundingClientRect();
+        if (capsule) {
+          customBarH = capsule.bottom - statusBarHeight + 4;
+        }
+
+        defaults_data.top = customBarH + statusBarHeight + 'px'
+        this.setData({
+          top: customBarH + statusBarHeight + 'px'
+        })
+      }
+    },
+
+    open(options) {
+      debugger
+      const {
+        type = '',
+        icon = '',
+        image = '',
+        duration = 20000,
+        position = 'middle',
+        mask = false,
+        ghost = true,
+        zIndex = 2001
+      } = options
+
+      this.setData({
+        ...options,
+        type,
+        icon,
+        image,
+        mask,
+        ghost,
+        position,
+        visible: true,
+        zIndex
+      }, () => {
+        this.setData({
+          show: true
+        })
+      })
+
+      if (this.timer) clearTimeout(this.timer)
+
+      if (duration) {
+        this.timer = setTimeout(() => {
+          this.close()
+          this.timer = null
+        }, duration)
+      }
+    },
+
+    handleHide() {
+
+    },
+
+    close() {
+      this.setData({
+        ...defaults_data
+      })
+    }
+  }
+})

package/src/bld-toast/index.json

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

package/src/bld-toast/index.scss

@@ -0,0 +1,112 @@
+.m-toast__mask {
+	z-index: 2000;
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: var(--color-mask, rgba(0, 0, 0, 0.55));
+}
+
+.m-toast__wrap {
+	opacity: 0;
+	z-index: 2001;
+	position: fixed;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	transition: opacity 0.15s ease-in;
+
+	&.m-toast--top {
+		top: 110rpx;
+		animation: toast-top 0.25s ease-in-out;
+	}
+
+	&.m-toast--middle {
+		top: 45%;
+	}
+
+	&.m-toast--bottom {
+		bottom: 110rpx;
+		animation: toast-bottom 0.25s ease-in-out;
+	}
+
+	&.m-toast--show {
+		opacity: 1;
+	}
+
+	.m-toast {
+		margin: 0 auto;
+		padding: 24rpx 40rpx;
+		color: #fff;
+		font-size: 28rpx;
+		line-height: 28rpx;
+		text-align: center;
+		border-radius: 4rpx;
+		box-sizing: border-box;
+		background: rgba(0, 0, 0, 0.75);
+
+		.m-toast__icon {
+			padding: 30rpx 0 60rpx;
+		}
+
+		.m-toast__image {
+			padding-bottom: 20rpx;
+
+			.m-toast__image__inner {
+				max-width: 160rpx;
+				max-height: 160rpx;
+			}
+		}
+
+		.m-toast__loading {
+			display: inline-block;
+			margin: 26rpx 36rpx 36rpx;
+			width: 54rpx;
+			height: 54rpx;
+			border-radius: 50%;
+			border: 6rpx solid #fff;
+			border-left-color: transparent;
+			vertical-align: middle;
+			background: 0 0;
+			animation: btn-spinner 0.8s linear infinite;
+		}
+	}
+
+	@keyframes toast-top {
+		0% {
+			top: 40rpx;
+		}
+
+		60% {
+			top: 130rpx;
+		}
+
+		100% {
+			top: 110rpx;
+		}
+	}
+
+	@keyframes toast-bottom {
+		0% {
+			bottom: 40rpx;
+		}
+
+		60% {
+			bottom: 130rpx;
+		}
+
+		100% {
+			bottom: 110rpx;
+		}
+	}
+
+	@keyframes btn-spinner {
+		0% {
+			transform: rotate(0);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+}

package/src/bld-toast/index.wxml

@@ -0,0 +1,27 @@
+<view 
+  class="m-toast__mask" 
+  style="{{ 'z-index:' + zIndex + ';' + ghost ? 'opacity: 0' : '' }}" 
+  wx:if="{{ visible && mask }}" 
+  bindtap="handleHide"
+></view>
+
+<view 
+  class="custom-class m-toast__wrap m-toast--{{ position }} {{ show ? 'm-toast--show' : '' }}" 
+  style="z-index: {{ zIndex }};{{ position === 'top' ? transformStyle : '' }}" 
+  hidden="{{ !visible }}"
+>
+  <view class="m-toast">
+
+    <view wx:if="{{ icon }}" class="m-toast__icon">
+      <m-icon size="{{ iconSize }}" name="{{ icon }}" color="{{ iconColor }}" />
+    </view>
+
+    <view wx:elif="{{ image }}" class="m-toast__image">
+      <image class="m-toast__image__inner" src="{{ image }}" />
+    </view>
+
+    <view wx:if="{{ type === 'loading' }}" class="m-toast__loading"></view>
+    <view wx:if="{{ message }}">{{ message }}</view>
+    
+  </view>
+</view>

package/src/bld-toast/index.wxss

@@ -0,0 +1,95 @@
+.m-toast__mask {
+  z-index: 2000;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--color-mask, rgba(0, 0, 0, 0.55));
+}
+
+.m-toast__wrap {
+  opacity: 0;
+  z-index: 2001;
+  position: fixed;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transition: opacity 0.15s ease-in;
+}
+.m-toast__wrap.m-toast--top {
+  top: 110rpx;
+  animation: toast-top 0.25s ease-in-out;
+}
+.m-toast__wrap.m-toast--middle {
+  top: 45%;
+}
+.m-toast__wrap.m-toast--bottom {
+  bottom: 110rpx;
+  animation: toast-bottom 0.25s ease-in-out;
+}
+.m-toast__wrap.m-toast--show {
+  opacity: 1;
+}
+.m-toast__wrap .m-toast {
+  margin: 0 auto;
+  padding: 24rpx 40rpx;
+  color: #fff;
+  font-size: 28rpx;
+  line-height: 28rpx;
+  text-align: center;
+  border-radius: 4rpx;
+  box-sizing: border-box;
+  background: rgba(0, 0, 0, 0.75);
+}
+.m-toast__wrap .m-toast .m-toast__icon {
+  padding: 30rpx 0 60rpx;
+}
+.m-toast__wrap .m-toast .m-toast__image {
+  padding-bottom: 20rpx;
+}
+.m-toast__wrap .m-toast .m-toast__image .m-toast__image__inner {
+  max-width: 160rpx;
+  max-height: 160rpx;
+}
+.m-toast__wrap .m-toast .m-toast__loading {
+  display: inline-block;
+  margin: 26rpx 36rpx 36rpx;
+  width: 54rpx;
+  height: 54rpx;
+  border-radius: 50%;
+  border: 6rpx solid #fff;
+  border-left-color: transparent;
+  vertical-align: middle;
+  background: 0 0;
+  animation: btn-spinner 0.8s linear infinite;
+}
+@keyframes toast-top {
+  0% {
+    top: 40rpx;
+  }
+  60% {
+    top: 130rpx;
+  }
+  100% {
+    top: 110rpx;
+  }
+}
+@keyframes toast-bottom {
+  0% {
+    bottom: 40rpx;
+  }
+  60% {
+    bottom: 130rpx;
+  }
+  100% {
+    bottom: 110rpx;
+  }
+}
+@keyframes btn-spinner {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}