bulade-ui 1.0.0

package/src/cell/index.js

@@ -0,0 +1,81 @@
+Component({
+  externalClasses: ['custom-class'],
+
+  options: {
+    addGlobalClass: true,
+  },
+
+  relations: {
+    '../cell-group/index': {
+      type: 'ancestor'
+    }
+  },
+
+  properties: {
+    icon: {
+      type: String,
+      value: ''
+    },
+
+    image: {
+      type: String,
+      value: ''
+    },
+
+    title: {
+      type: String,
+      value: ''
+    },
+
+    value: {
+      type: String,
+      value: ''
+    },
+
+    isMultiple: {
+      type: Boolean,
+      value: false
+    },
+
+    border: {
+      type: Boolean,
+      value: false
+    },
+
+    iconColor: {
+      type: String,
+      value: ''
+    },
+
+    // 链接类型，可选值为 navigateTo，redirectTo，switchTab
+    linkType: {
+      type: String,
+      value: 'navigateTo'
+    },
+
+    url: {
+      type: String,
+      value: ''
+    }
+  },
+
+
+  methods: {
+    updateCellBorder(border) {
+      this.setData({
+        border
+      })
+    },
+
+    onClick() {
+      this.triggerEvent('click')
+
+      const url = this.data.url
+      if (!url) return
+
+      wx[this.data.linkType].call(wx, {
+        url
+      })
+    }
+  }
+});

package/src/cell/index.json

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

package/src/cell/index.scss

@@ -0,0 +1,74 @@
+.m-cell {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	padding: 20rpx 32rpx;
+	line-height: 54rpx;
+	font-size: 28rpx;
+
+	&.m-cell__hairline {
+		&::after {
+			position: absolute;
+			box-sizing: border-box;
+			content: " ";
+			pointer-events: none;
+			right: 32rpx;
+			bottom: 0;
+			left: 32rpx;
+			border-bottom: 1px solid var(--color-border, #dcdee2);
+			transform: scaleY(0.5);
+		}
+	}
+
+	&.m-cell--hover {
+		background-color: #f7f8f9;
+	}
+
+	.m-cell__icon {
+		width: 38rpx;
+		text-align: center;
+	}
+
+	.m-cell__header {
+		margin-right: 12rpx;
+		display: flex;
+		align-items: center;
+	}
+
+	.m-cell__title {
+		display: flex;
+		align-items: center;
+		flex: 1;
+		color: var(--color-text-primary, #303133);
+		vertical-align: middle;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.m-cell__desc {
+		display: flex;
+		align-items: center;
+		margin-left: 20rpx;
+		max-width: 400rpx;
+		color: var(--color-text-secondary, #909399);
+		font-size: 28rpx;
+
+		&.is-ellipsis {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+
+	.m-cell__slot {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.m-cell__footer {
+		text-align: right;
+		margin-left: 24rpx;
+	}
+}

package/src/cell/index.wxml

@@ -0,0 +1,25 @@
+<view 
+  bindtap="onClick"
+  class="m-cell custom-class {{ border ? 'm-cell__hairline':'' }}"
+  hover-class="{{ url ? 'm-cell--hover' : '' }}"  
+> 
+  <!-- 头部图标 -->
+  <view wx:if="{{ icon }}" class="m-cell__icon m-cell__header">
+    <m-icon name="{{ icon }}" size="36" color="{{ iconColor ? iconColor : '' }}" />
+  </view>
+
+  <!-- 自定义标题 -->
+  <view wx:if="{{ title }}" class="m-cell__title">{{ title }}</view>
+  <slot wx:else name="title" />
+
+  <!-- 描述内容 -->
+  <view wx:if="{{ value }}" class="m-cell__desc {{ isMultiple ? '':'is-ellipsis' }}">{{ value }}</view>
+
+  <!-- 自定义内容 -->
+  <view wx:else class="m-cell__slot">
+    <slot />
+  </view>
+
+  <!-- 右侧跳转箭头 -->
+  <m-icon wx:if="{{ url }}" class="m-cell__icon m-cell__footer" catchtap="navigateTo" name="arrow-right" size="32" color="#999" />
+</view>

package/src/cell/index.wxss

@@ -0,0 +1,63 @@
+.m-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding: 20rpx 32rpx;
+  line-height: 54rpx;
+  font-size: 28rpx;
+}
+.m-cell.m-cell__hairline::after {
+  position: absolute;
+  box-sizing: border-box;
+  content: " ";
+  pointer-events: none;
+  right: 32rpx;
+  bottom: 0;
+  left: 32rpx;
+  border-bottom: 1px solid var(--color-border, #dcdee2);
+  transform: scaleY(0.5);
+}
+.m-cell.m-cell--hover {
+  background-color: #f7f8f9;
+}
+.m-cell .m-cell__icon {
+  width: 38rpx;
+  text-align: center;
+}
+.m-cell .m-cell__header {
+  margin-right: 12rpx;
+  display: flex;
+  align-items: center;
+}
+.m-cell .m-cell__title {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  color: var(--color-text-primary, #303133);
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.m-cell .m-cell__desc {
+  display: flex;
+  align-items: center;
+  margin-left: 20rpx;
+  max-width: 400rpx;
+  color: var(--color-text-secondary, #909399);
+  font-size: 28rpx;
+}
+.m-cell .m-cell__desc.is-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.m-cell .m-cell__slot {
+  display: inline-flex;
+  align-items: center;
+}
+.m-cell .m-cell__footer {
+  text-align: right;
+  margin-left: 24rpx;
+}

package/src/cell-group/index.js

@@ -0,0 +1,71 @@
+Component({
+  externalClasses: ['custom-class'],
+
+  options: {
+    addGlobalClass: true,
+    multipleSlots: true
+  },
+
+  relations: {
+    '../cell/index': {
+      type: 'descendant',
+
+      linked() {
+        this._updateChildren()
+      },
+
+      linkChanged() {
+        this._updateDataChange();
+      },
+
+      unlinked() {
+        this._updateChildren()
+      }
+    }
+  },
+
+  properties: {
+    title: {
+      type: String,
+      value: ''
+    },
+
+    card: {
+      type: Boolean,
+      value: false
+    },
+
+    border: {
+      type: Boolean,
+      value: false,
+      observer(val) {
+        this._updateChildren()
+      }
+    }
+  },
+
+  methods: {
+    _updateChildren() {
+
+      // 防抖减少重复触发
+      if (this.timer) {
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+
+      this.timer = setTimeout(() => {
+
+        let cells = this.getRelationNodes('../cell/index')
+        const len = cells.length
+
+        if (len > 0) {
+          let lastIndex = len - 1
+
+          cells.forEach((cell, index) => {
+            cell.updateCellBorder(this.data.border && index !== lastIndex)
+          })
+        }
+      }, 60)
+    }
+  }
+})

package/src/cell-group/index.json

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

package/src/cell-group/index.scss

@@ -0,0 +1,32 @@
+.m-cell-group {
+	position: relative;
+	margin: 0;
+	background: #fff;
+	transition: margin .2s ease-in-out;
+
+	&.m-cell-group--card {
+		margin: 32rpx;
+		border-radius: 12rpx;
+		overflow: hidden;
+	}
+
+	.m-cell-group__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex-shrink: 0;
+		position: relative;
+		padding: 0 32rpx;
+		height: 100rpx;
+		font-size: 32rpx;
+		color: var(--color-text-regular, #606266);
+		background-color: #fcfcfc;
+
+		.m-cell-group__title {
+			flex: 1;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+}

package/src/cell-group/index.wxml

@@ -0,0 +1,10 @@
+<view class="custom-class m-cell-group {{ card ? 'm-cell-group--card':'' }}">
+	<view wx:if="{{ title }}" class="m-cell-group__header">
+    <view class="m-cell-group__title">{{ title }}</view>
+    <slot name="group-suffix" />
+  </view>
+
+  <view class="m-cell-group__list">
+    <slot />
+  </view>
+</view>

package/src/cell-group/index.wxss

@@ -0,0 +1,29 @@
+.m-cell-group {
+  position: relative;
+  margin: 0;
+  background: #fff;
+  transition: margin 0.2s ease-in-out;
+}
+.m-cell-group.m-cell-group--card {
+  margin: 32rpx;
+  border-radius: 12rpx;
+  overflow: hidden;
+}
+.m-cell-group .m-cell-group__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  position: relative;
+  padding: 0 32rpx;
+  height: 100rpx;
+  font-size: 32rpx;
+  color: var(--color-text-regular, #606266);
+  background-color: #fcfcfc;
+}
+.m-cell-group .m-cell-group__header .m-cell-group__title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/grid/index.js

@@ -0,0 +1,67 @@
+Component({
+
+  options: {
+    addGlobalClass: true,
+  },
+
+  relations: {
+    '../grid-item/index': {
+      type: 'child',
+      linked() {
+        this._updateChildren()
+      },
+      unlinked() {
+        this._updateChildren()
+      }
+    }
+  },
+
+  properties: {
+    height: {
+      type: String,
+      value: 'auto',
+      observer: '_updateChildren'
+    },
+
+    columnCount: {
+      type: Number,
+      value: 4,
+      observer: '_updateChildren'
+    },
+
+    border: {
+      type: Boolean,
+      value: false,
+      observer: '_updateChildren'
+    }
+  },
+
+  methods: {
+    _updateChildren() {
+
+      // 防抖减少重复触发
+      if (this.timer) {
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+
+      this.timer = setTimeout(() => {
+
+        let children = this.getRelationNodes('../grid-item/index')
+        const len = children.length
+
+        const width = `${100 / this.data.columnCount}%`;
+
+        if (len > 0) {
+          children.forEach((child, index) => {
+            child.setData({
+              width,
+              height: this.data.height,
+              border: this.data.border
+            })
+          })
+        }
+      }, 60)
+    }
+  }
+})

package/src/grid/index.json

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

package/src/grid/index.scss

@@ -0,0 +1,21 @@
+.m-grid {
+	position: relative;
+	width: 100%;
+	box-sizing: border-box;
+	overflow: hidden;
+
+	&.m-grid--border::after {
+		content: " ";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 200%;
+		height: 200%;
+		transform: scale(0.5);
+		transform-origin: 0 0;
+		box-sizing: border-box;
+		border: 1px solid transparent;
+		border-top-color: var(--color-border, #dcdee2);
+		border-left-color: var(--color-border, #dcdee2);
+	}
+}

package/src/grid/index.wxml

@@ -0,0 +1,3 @@
+<view class="m-grid {{ border ? 'm-grid--border' : '' }}">
+  <slot />
+</view>

package/src/grid/index.wxss

@@ -0,0 +1,20 @@
+.m-grid {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.m-grid.m-grid--border::after {
+  content: " ";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 200%;
+  height: 200%;
+  transform: scale(0.5);
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-top-color: var(--color-border, #dcdee2);
+  border-left-color: var(--color-border, #dcdee2);
+}

package/src/grid-item/index.js

@@ -0,0 +1,72 @@
+Component({
+  options: {
+    addGlobalClass: true,
+  },
+
+  relations: {
+    '../grid/index': {
+      type: 'parent'
+    }
+  },
+
+  properties: {
+    icon: {
+      type: String,
+      value: ''
+    },
+    iconColor: {
+      type: String,
+      value: ''
+    },
+    iconSize: {
+      type: Number,
+      value: 48
+    },
+    badgeDot: {
+      type: Boolean,
+      value: false
+    },
+    badgeValue: {
+      type: String,
+      optionalTypes: [Number, String],
+      value: ''
+    },
+    text: {
+      type: String,
+      value: ''
+    },
+    useSlot: {
+      type: Boolean,
+      value: false
+    },
+
+    // 链接类型，可选值为 navigateTo，redirectTo，switchTab
+    linkType: {
+      type: String,
+      value: 'navigateTo'
+    },
+    url: {
+      type: String,
+      value: ''
+    }
+  },
+
+  data: {
+    width: '',
+    height: '',
+    border: false
+  },
+
+  methods: {
+    onClick() {
+      this.triggerEvent('click')
+
+      const url = this.data.url
+      if (!url) return
+
+      wx[this.data.linkType].call(wx, {
+        url
+      })
+    }
+  }
+})

package/src/grid-item/index.json

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

package/src/grid-item/index.scss

@@ -0,0 +1,59 @@
+.m-grid-item {
+  position: relative;
+  float: left;
+  box-sizing: border-box;
+  background-color: #fff;
+
+  &.m-grid-item--hover {
+    background-color: #f3f4f5;
+  }
+
+  .m-grid-item__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    padding: 32rpx 16rpx;
+    box-sizing: border-box;
+  }
+
+  .m-grid-item__content--border:after {
+    content: " ";
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    transform: scale(0.5);
+    transform-origin: 0 0;
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    border-right-color: var(--color-border, #dcdee2);
+    border-bottom-color: var(--color-border, #dcdee2);
+  }
+
+
+  .m-grid-item__content--clickable:active {
+    background-color: #f3f4f5;
+  }
+
+  .m-grid-item__icon {
+    font-size: 52rpx;
+    position: relative;
+  }
+
+  .m-grid-item__badge {
+    position: absolute !important;
+  }
+
+  .m-grid-item__text {
+    word-wrap: break-word;
+    color: var(--color-text-regular, #606266);
+    font-size: 28rpx;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

package/src/grid-item/index.wxml

@@ -0,0 +1,46 @@
+<view 
+  class="m-grid-item" 
+  hover-class="{{ url ? 'm-grid-item--hover' : '' }}"  
+  style="{{ grid.getItemStyle(width, height) }}" 
+  bind:tap="onClick"
+>
+  <view class="m-grid-item__content {{ border ? 'm-grid-item__content--border' : '' }}">
+
+    <block wx:if="{{ useSlot }}">
+      <slot />
+    </block>
+
+    <block wx:else>
+      <view class="m-grid-item__icon">
+        <m-icon wx:if="{{ icon }}" name="{{ icon }}" color="{{ iconColor }}" size="{{ iconSize }}" dot="{{ dot }}" info="{{ info }}" />
+        <slot wx:else name="icon" />
+
+      </view>
+
+      <view class="m-grid-item__text">
+        <text wx:if="{{ text }}">{{ text }}</text>
+        <slot wx:else name="text" />
+      </view>
+    </block>
+
+  </view>
+</view>
+
+<wxs module="grid">
+  function getItemStyle(width, height) {
+    var styles = []
+    if(width) {
+      styles.push('width:' + width)
+    }
+
+    if(height) {
+      styles.push('height:' + height)
+    }
+
+    return styles.join(";")
+  }
+
+  module.exports = {
+    getItemStyle: getItemStyle
+  }
+</wxs>