bulade-ui 1.1.2 → 1.1.4

package/src/bld-button/index.scss

@@ -1,44 +1,44 @@
-.button {
-  display: flex;
-  justify-content: center;
-  border: 1rpx solid #eee;
-  padding: 0 24rpx;
-
-  &.default {
-    background: #fff;
-    color: #000;
-  }
-
-  &.danger {
-    background: red;
-    color: #fff;
-  }
-
-  &.success {
-    background: green;
-    color: #fff;
-  }
-
-  &.rxb {
-    background: #206AFF;
-    color: #fff;
-  }
-
-  &.sm {
-    font-size: var(--font-size-sm);
-    line-height: calc(var(--font-size-sm) * 2.5);
-    border-radius: calc(var(--font-size-sm) * 2.5);
-  }
-
-  &.md {
-    font-size: var(--font-size-md);
-    line-height: calc(var(--font-size-md) * 2.5);
-    border-radius: calc(var(--font-size-md) * 2.5);
-  }
-
-  &.lg {
-    font-size: var(--font-size-lg);
-    line-height: calc(var(--font-size-lg) * 2.5);
-    border-radius: calc(var(--font-size-lg) * 2.5);
-  }
-}
+.button {
+  display: flex;
+  justify-content: center;
+  border: 1rpx solid #eee;
+  padding: 0 24rpx;
+
+  &.default {
+    background: #fff;
+    color: #000;
+  }
+
+  &.danger {
+    background: red;
+    color: #fff;
+  }
+
+  &.success {
+    background: green;
+    color: #fff;
+  }
+
+  &.rxb {
+    background: #206AFF;
+    color: #fff;
+  }
+
+  &.sm {
+    font-size: var(--font-size-sm);
+    line-height: calc(var(--font-size-sm) * 2.5);
+    border-radius: calc(var(--font-size-sm) * 2.5);
+  }
+
+  &.md {
+    font-size: var(--font-size-md);
+    line-height: calc(var(--font-size-md) * 2.5);
+    border-radius: calc(var(--font-size-md) * 2.5);
+  }
+
+  &.lg {
+    font-size: var(--font-size-lg);
+    line-height: calc(var(--font-size-lg) * 2.5);
+    border-radius: calc(var(--font-size-lg) * 2.5);
+  }
+}

package/src/bld-button/index.wxml

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

package/src/bld-button/index.wxss

@@ -1,37 +1,37 @@
-.button {
-  display: flex;
-  justify-content: center;
-  border: 1rpx solid #eee;
-  padding: 0 24rpx;
-}
-.button.default {
-  background: #fff;
-  color: #000;
-}
-.button.danger {
-  background: red;
-  color: #fff;
-}
-.button.success {
-  background: green;
-  color: #fff;
-}
-.button.rxb {
-  background: #206AFF;
-  color: #fff;
-}
-.button.sm {
-  font-size: var(--font-size-sm);
-  line-height: calc(var(--font-size-sm) * 2.5);
-  border-radius: calc(var(--font-size-sm) * 2.5);
-}
-.button.md {
-  font-size: var(--font-size-md);
-  line-height: calc(var(--font-size-md) * 2.5);
-  border-radius: calc(var(--font-size-md) * 2.5);
-}
-.button.lg {
-  font-size: var(--font-size-lg);
-  line-height: calc(var(--font-size-lg) * 2.5);
-  border-radius: calc(var(--font-size-lg) * 2.5);
+.button {
+  display: flex;
+  justify-content: center;
+  border: 1rpx solid #eee;
+  padding: 0 24rpx;
+}
+.button.default {
+  background: #fff;
+  color: #000;
+}
+.button.danger {
+  background: red;
+  color: #fff;
+}
+.button.success {
+  background: green;
+  color: #fff;
+}
+.button.rxb {
+  background: #206AFF;
+  color: #fff;
+}
+.button.sm {
+  font-size: var(--font-size-sm);
+  line-height: calc(var(--font-size-sm) * 2.5);
+  border-radius: calc(var(--font-size-sm) * 2.5);
+}
+.button.md {
+  font-size: var(--font-size-md);
+  line-height: calc(var(--font-size-md) * 2.5);
+  border-radius: calc(var(--font-size-md) * 2.5);
+}
+.button.lg {
+  font-size: var(--font-size-lg);
+  line-height: calc(var(--font-size-lg) * 2.5);
+  border-radius: calc(var(--font-size-lg) * 2.5);
 }

package/src/bld-button-v2/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/bld-button-v2/index.json

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

package/src/bld-button-v2/index.scss

@@ -0,0 +1,209 @@
+.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;
+  &::after{
+		 border: 0;
+	}
+	.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/bld-button-v2/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/bld-button-v2/index.wxss

@@ -0,0 +1,178 @@
+.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;
+  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::after {
+  border: 0;
+}
+.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);
+  }
+}

package/src/bld-card/index.js

@@ -1,3 +1,3 @@
-Component({
-  externalClasses: ["iclass"],
-});
+Component({
+  externalClasses: ["iclass"],
+});

package/src/bld-card/index.json

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