bulade-ui 1.0.0

package/src/bld-toast/toast.js

@@ -0,0 +1,35 @@
+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 Toast = options => {
+  const {
+    selector = '#toast'
+  } = options
+  const ctx = getCtx(selector)
+
+  if (typeof options === "string") {
+    options = {
+      message: options,
+      position: 'bottom'
+    }
+  }
+  ctx.open(options)
+
+  return ctx
+}
+
+Toast.close = (selector = '#toast') => {
+  const ctx = getCtx(selector)
+  ctx.close()
+}
+
+export default Toast

package/src/bld-wrapper/index.js

@@ -0,0 +1,75 @@
+const app = getApp();
+
+const menuButtonInfo = app.globalData.menuButtonDistance;
+const systemInfo = app.globalData.systemInfo
+// 计算 tab bar 的高度
+const safeArea = systemInfo.safeArea;
+const saleAreaHeight = systemInfo.screenHeight - safeArea.bottom;
+const tabBarHeight = 60 + saleAreaHeight;
+
+// 计算 nav bar 的高度
+const statusBarHeight = systemInfo.statusBarHeight;
+const gap = menuButtonInfo.top - statusBarHeight;
+
+const navBarHeight = statusBarHeight + menuButtonInfo.height + gap * 2;
+
+// 占据 nav bar 和 tab bar 之间的空间
+const navToTab = {
+  top: `${navBarHeight}px`,
+  height: `calc(100% - ${navBarHeight}px - ${tabBarHeight}px)`,
+};
+
+// 占据 nav bar 页面底部的空间
+const navToBottom = {
+  top: `${navBarHeight}px`,
+  height: `calc(100% - ${navBarHeight}px)`,
+};
+
+// 从页面顶部到 tab bar 之间的空间
+const topToTab = {
+  top: "0px",
+  height: `calc(100% - ${tabBarHeight}px)`,
+};
+
+// 占据所有空间
+const topToBottom = {
+  top: "0px",
+  height: "100%",
+};
+
+const modeStyleMap = {
+  "nav-to-tab": navToTab,
+  "nav-to-bottom": navToBottom,
+  "top-to-tab": topToTab,
+  "top-to-bottom": topToBottom,
+};
+
+function modeToStyle(mode) {
+  const styles = modeStyleMap[mode];
+  return Object.keys(styles)
+    .map((key) => {
+      return `${key}: ${styles[key]}`;
+    })
+    .join(";");
+}
+
+Component({
+  externalClasses: ["iclass"],
+  properties: {
+    mode: {
+      type: String,
+      value: "nav-to-bottom",
+    },
+  },
+  data: {
+    style: "height:100%",
+  },
+
+  observers: {
+    mode: function () {
+      this.setData({
+        style: modeToStyle(this.data.mode),
+      });
+    },
+  },
+});

package/src/bld-wrapper/index.json

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

package/src/bld-wrapper/index.scss

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

package/src/bld-wrapper/index.wxml

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

package/src/bld-wrapper/index.wxss

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

package/src/button/index.js

@@ -0,0 +1,92 @@
+Component({
+  externalClasses: ['custom-class'],
+
+  options: {
+    addGlobalClass: true,
+  },
+
+  properties: {
+    // ghost, primary, info, success, warning, error
+    type: {
+      type: String,
+      value: 'default',
+    },
+    plain: {
+      type: Boolean,
+      value: false,
+    },
+    inline: {
+      type: Boolean,
+      value: false
+    },
+    size: {
+      type: String,
+      value: '',
+    },
+    round: {
+      type: Boolean,
+      value: false
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    loading: {
+      type: Boolean,
+      value: false,
+    },
+    full: {
+      type: Boolean,
+      value: false
+    },
+    color: {
+      type: String,
+      value: ''
+    },
+    bgcolor: {
+      type: String,
+      value: ''
+    },
+    openType: String,
+    hoverStopPropagation: Boolean,
+    hoverStartTime: {
+      type: Number,
+      value: 20
+    },
+    hoverStayTime: {
+      type: Number,
+      value: 70
+    },
+    sendMessageTitle: String,
+    sendMessagePath: String,
+    sendMessageImg: String,
+    showMessageCard: Boolean
+  },
+
+  methods: {
+    onTap() {
+      if (this.data.disabled) return false
+      this.triggerEvent('click')
+    },
+    getuserinfo({
+      detail = {}
+    } = {}) {
+      this.triggerEvent('getuserinfo', detail)
+    },
+    contact({
+      detail = {}
+    } = {}) {
+      this.triggerEvent('contact', detail)
+    },
+    getphonenumber({
+      detail = {}
+    } = {}) {
+      this.triggerEvent('getphonenumber', detail)
+    },
+    error({
+      detail = {}
+    } = {}) {
+      this.triggerEvent('error', detail)
+    }
+  }
+});

package/src/button/index.json

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

package/src/button/index.scss

@@ -0,0 +1,207 @@
+.m-button {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin: 10px;
+	padding: 0 27rpx;
+	width: auto;
+	height: 86rpx;
+	line-height: 86rpx;
+	text-align: center;
+	vertical-align: middle;
+	white-space: nowrap;
+	letter-spacing: 4rpx;
+	font-size: 28rpx;
+	font-weight: normal;
+	border-radius: 6rpx;
+	border: 0 !important;
+	color: var(--color-text-primary, #303133);
+	overflow: visible;
+	box-sizing: border-box;
+	background-color: #fff;
+	transition: opacity .16s, background-color .16s;
+
+	.m-button__icon {
+		font-size: 28rpx;
+		width: 24rpx;
+		height: 24rpx;
+	}
+
+	&.is-hover {
+		opacity: 0.8;
+	}
+
+	&:not(.is-disabled).is-plain--hover::before,
+	&:not(.is-loading).is-plain--hover::before {
+		display: block;
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		opacity: .15;
+		content: " ";
+		background-color: currentColor;
+	}
+
+	&.is-round.is-plain--hover::before {
+		border-radius: 100rpx;
+	}
+
+	&.m-button--full {
+		margin: 0;
+		border-radius: 0;
+		box-shadow: none;
+	}
+
+	&.m-button--large {
+		padding: 0 32rpx;
+		height: 96rpx;
+		line-height: 96rpx;
+		font-size: 32rpx;
+	}
+
+	&.m-button--small {
+		padding: 0 18rpx;
+		height: 68rpx;
+		line-height: 68rpx;
+	}
+
+	&.m-button--primary {
+		color: #fff;
+		background-color: var(--color-primary, #409EFF);
+	}
+
+	&.m-button--default {
+		background-color: transparent;
+		color: var(--color-text-primary, #303133);
+
+		&::after {
+			content: " ";
+			display: block;
+			width: 200%;
+			height: 200%;
+			z-index: 1;
+			position: absolute;
+			top: 0;
+			left: 0;
+			border: 1px solid #dcdfe6;
+			transform: scale(0.5);
+			transform-origin: 0 0;
+			box-sizing: border-box;
+			border-radius: 6rpx;
+			pointer-events: none;
+		}
+
+		&.is-hover {
+			background-color: rgba(0, 0, 0, .07);
+		}
+	}
+
+	&.m-button--ghost {
+		background-color: transparent;
+		color: var(--color-text-primary, #303133);
+	}
+
+	&.m-button--success {
+		color: #fff;
+		background-color: var(--color-success, #67C23A);
+	}
+
+	&.m-button--warning {
+		color: #fff;
+		background-color: var(--color-warning, #E6A23C);
+	}
+
+	&.m-button--danger {
+		color: #fff;
+		background-color: var(--color-danger, #F56C6C);
+	}
+
+	&.m-button--info {
+		color: #fff;
+		background-color: var(--color-info, #909399);
+	}
+
+	/* plain */
+
+	.m-button--primary.is-plain {
+		color: var(--color-primary, #409EFF);
+		background-color: #fff;
+	}
+
+	.m-button--success.is-plain {
+		color: var(--color-success, #67C23A);
+		background-color: #fff;
+	}
+
+	.m-button--warning.is-plain {
+		color: var(--color-warning, #E6A23C);
+		background-color: #fff;
+	}
+
+	.m-button--danger.is-plain {
+		color: var(--color-danger, #F56C6C);
+		background-color: #fff;
+	}
+
+	.m-button--info.is-plain {
+		color: var(--color-info, #909399);
+		background-color: #fff;
+	}
+
+	&.is-plain::after {
+		content: " ";
+		display: block;
+		width: 200%;
+		height: 200%;
+		position: absolute;
+		top: 0;
+		left: 0;
+		border: 1px solid currentColor;
+		transform: scale(0.5);
+		transform-origin: 0 0;
+		box-sizing: border-box;
+		border-radius: 6rpx;
+		z-index: 1;
+		pointer-events: none;
+	}
+
+	&.is-round {
+		border-radius: 100rpx;
+	}
+
+	&.is-round.is-plain::after {
+		border-radius: 100rpx;
+	}
+
+	&.is-loading {
+		opacity: 0.85;
+	}
+
+	.m-button__loading {
+		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;
+	}
+
+	&.is-disabled {
+		opacity: 0.65;
+	}
+
+	&.is-inline {
+		display: inline-flex;
+	}
+
+	@keyframes btn-spinner {
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+}

package/src/button/index.wxml

@@ -0,0 +1,42 @@
+<button
+  class="m-button {{ full ? 'm-button--full' : '' }} {{ size ? 'm-button--' + size : '' }} {{ 'm-button--' + type }} {{ round ? 'is-round' : '' }} {{ plain ? 'is-plain' : '' }} {{ loading ? 'is-loading' : '' }} {{ disabled ? 'is-disabled' : ''}} {{ inline ? 'is-inline' : '' }} custom-class"
+  style="{{ button.getButtonStyle(color, bgcolor) }}"
+  hover-class="{{ loading || disabled ? '' : plain ? 'is-plain--hover' : 'is-hover' }}"
+  bind:tap="onTap"
+  open-type="{{ openType }}"
+  hover-stop-propagation="{{ hoverStopPropagation }}"
+  hover-start-time="{{ hoverStartTime }}"
+  hover-stay-time="{{ hoverStayTime }}"
+  send-message-title="{{ sendMessageTitle }}"
+  send-message-path="{{ sendMessagePath }}"
+  send-message-img="{{ sendMessageImg }}"
+  show-message-card="{{ showMessageCard }}"
+  bindcontact="contact"
+  bindgetuserinfo="getuserinfo"
+  bindgetphonenumber="getphonenumber"
+  binderror="error"
+  plain="true"
+>
+  <view wx:if="{{ loading }}" class="m-button__loading"></view>
+  <slot wx:else />
+</button>
+
+<wxs module="button">
+  function getButtonStyle(color, bgcolor) {
+
+    var styles = []
+    if(color) {
+      styles.push('color:' + color)
+    }
+
+    if(bgcolor) {
+      styles.push('background-color:' + bgcolor)
+    }
+
+    return styles.join(";")
+  }
+
+  module.exports = {
+    getButtonStyle: getButtonStyle
+  }
+</wxs>

package/src/button/index.wxss

@@ -0,0 +1,176 @@
+.m-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px;
+  padding: 0 27rpx;
+  width: auto;
+  height: 86rpx;
+  line-height: 86rpx;
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  letter-spacing: 4rpx;
+  font-size: 28rpx;
+  font-weight: normal;
+  border-radius: 6rpx;
+  border: 0 !important;
+  color: var(--color-text-primary, #303133);
+  overflow: visible;
+  box-sizing: border-box;
+  background-color: #fff;
+  transition: opacity 0.16s, background-color 0.16s;
+  /* plain */
+}
+.m-button .m-button__icon {
+  font-size: 28rpx;
+  width: 24rpx;
+  height: 24rpx;
+}
+.m-button.is-hover {
+  opacity: 0.8;
+}
+.m-button:not(.is-disabled).is-plain--hover::before, .m-button:not(.is-loading).is-plain--hover::before {
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  opacity: 0.15;
+  content: " ";
+  background-color: currentColor;
+}
+.m-button.is-round.is-plain--hover::before {
+  border-radius: 100rpx;
+}
+.m-button.m-button--full {
+  margin: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+.m-button.m-button--large {
+  padding: 0 32rpx;
+  height: 96rpx;
+  line-height: 96rpx;
+  font-size: 32rpx;
+}
+.m-button.m-button--small {
+  padding: 0 18rpx;
+  height: 68rpx;
+  line-height: 68rpx;
+}
+.m-button.m-button--primary {
+  color: #fff;
+  background-color: var(--color-primary, #409EFF);
+}
+.m-button.m-button--default {
+  background-color: transparent;
+  color: var(--color-text-primary, #303133);
+}
+.m-button.m-button--default::after {
+  content: " ";
+  display: block;
+  width: 200%;
+  height: 200%;
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 1px solid #dcdfe6;
+  transform: scale(0.5);
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  border-radius: 6rpx;
+  pointer-events: none;
+}
+.m-button.m-button--default.is-hover {
+  background-color: rgba(0, 0, 0, 0.07);
+}
+.m-button.m-button--ghost {
+  background-color: transparent;
+  color: var(--color-text-primary, #303133);
+}
+.m-button.m-button--success {
+  color: #fff;
+  background-color: var(--color-success, #67C23A);
+}
+.m-button.m-button--warning {
+  color: #fff;
+  background-color: var(--color-warning, #E6A23C);
+}
+.m-button.m-button--danger {
+  color: #fff;
+  background-color: var(--color-danger, #F56C6C);
+}
+.m-button.m-button--info {
+  color: #fff;
+  background-color: var(--color-info, #909399);
+}
+.m-button .m-button--primary.is-plain {
+  color: var(--color-primary, #409EFF);
+  background-color: #fff;
+}
+.m-button .m-button--success.is-plain {
+  color: var(--color-success, #67C23A);
+  background-color: #fff;
+}
+.m-button .m-button--warning.is-plain {
+  color: var(--color-warning, #E6A23C);
+  background-color: #fff;
+}
+.m-button .m-button--danger.is-plain {
+  color: var(--color-danger, #F56C6C);
+  background-color: #fff;
+}
+.m-button .m-button--info.is-plain {
+  color: var(--color-info, #909399);
+  background-color: #fff;
+}
+.m-button.is-plain::after {
+  content: " ";
+  display: block;
+  width: 200%;
+  height: 200%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 1px solid currentColor;
+  transform: scale(0.5);
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  border-radius: 6rpx;
+  z-index: 1;
+  pointer-events: none;
+}
+.m-button.is-round {
+  border-radius: 100rpx;
+}
+.m-button.is-round.is-plain::after {
+  border-radius: 100rpx;
+}
+.m-button.is-loading {
+  opacity: 0.85;
+}
+.m-button .m-button__loading {
+  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;
+}
+.m-button.is-disabled {
+  opacity: 0.65;
+}
+.m-button.is-inline {
+  display: inline-flex;
+}
+@keyframes btn-spinner {
+  100% {
+    transform: rotate(360deg);
+  }
+}