bulade-ui 1.0.9 → 1.1.0

package/src/bld-radio/index.js

@@ -0,0 +1,64 @@
+Component({
+  externalClasses: ['iclass'],
+
+  options: {
+    addGlobalClass: true,
+  },
+
+  relations: {
+    '../bld-radio-group/index': {
+      type: 'ancestor',
+      linked(target) {
+        this.parent = target;
+      },
+      unlinked() {
+        this.parent = null;
+      }
+    }
+  },
+
+  properties: {
+    name: {
+      type: null
+    },
+    value: {
+      type: null
+    },
+    disabled: {
+      type: Boolean,
+      value: false
+    },
+    checkedColor: {
+      type: String,
+      value: ''
+    },
+    labelLeft: {
+      type: Boolean,
+      value: false
+    },
+    shape: {
+      type: String,
+      value: 'round'
+    }
+  },
+
+  methods: {
+    emitChange(value) {
+      const instance = this.parent || this;
+      
+      instance.triggerEvent('input', value);
+      instance.triggerEvent('change', value);
+    },
+
+    onChange(event) {
+      this.emitChange(this.data.name);
+    },
+
+    onClickLabel() {
+      const { disabled, labelDisabled, name } = this.data;
+      if (!disabled && !labelDisabled) {
+        this.emitChange(name);
+      }
+    }
+  }
+})

package/src/bld-radio/index.json

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

package/src/bld-radio/index.scss

@@ -0,0 +1,68 @@
+.m-radio {
+  display: flex;
+  padding: 3rpx 0;
+}
+.m-radio .m-radio__icon-wrap {
+  display: flex;
+  align-items: center;
+}
+.m-radio .m-radio__icon-wrap .m-radio__icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42rpx;
+  height: 42rpx;
+  color: var(--color-primary, #409EFF);
+  border: 1px solid #e5e5e5;
+  border-radius: 100%;
+  box-sizing: content-box;
+  transition-property: color, border-color, background-color;
+  transition-duration: 0.15s;
+}
+.m-radio .m-radio__icon-wrap .m-radio__icon::after {
+  content: " ";
+  display: block;
+  margin: auto;
+  width: 20rpx;
+  height: 20rpx;
+  border-radius: 100%;
+  background-color: currentColor;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(0);
+  transition: transform 0.15s ease-in;
+}
+.m-radio .m-radio__icon-wrap .m-radio__icon.m-radio__icon--checked {
+  border-color: currentColor;
+}
+.m-radio .m-radio__icon-wrap .m-radio__icon.m-radio__icon--checked::after {
+  transform: scale(1);
+}
+.m-radio .m-radio__icon-wrap .m-radio__icon--disabled {
+  border-color: #c8c9cc;
+  background-color: #ebedf0;
+}
+.m-radio .m-radio__icon-wrap .m-radio__icon--disabled.m-radio__icon--checked {
+  color: #c8c9cc;
+  border-color: currentColor;
+}
+.m-radio .m-radio__icon-wrap .m-radio__icon--disabled.m-radio__icon--checked::after {
+  background-color: currentColor;
+}
+.m-radio .m-radio__label {
+  display: inline-flex;
+  align-items: center;
+  flex: 1;
+  word-wrap: break-word;
+  color: var(--color-text-regular, #606266);
+}
+.m-radio .m-radio__label.m-radio__label--left {
+  margin-right: 20rpx;
+}
+.m-radio .m-radio__label.m-radio__label--right {
+  margin-left: 20rpx;
+}

package/src/bld-radio/index.wxml

@@ -0,0 +1,24 @@
+<view class="m-radio {{ disabled ? 'm-radio--disabled' : '' }} iclass">
+  <view
+    wx:if="{{ labelLeft }}"
+    class="m-radio__label m-radio__label--left"
+    bindtap="onClickLabel"
+  >
+    <slot />
+  </view>
+
+  <view class="m-radio__icon-wrap" bindtap="onChange">
+    <view 
+      class="m-radio__icon {{ disabled ? 'm-radio__icon--disabled' : '' }} {{ value === name ? 'm-radio__icon--checked' :'' }}"
+      style="{{ checkedColor ? 'color: ' + checkedColor : '' }}"
+    ></view>
+  </view>
+
+  <view
+    wx:if="{{ !labelLeft }}"
+    class="m-radio__label m-radio__label--right"
+    bindtap="onClickLabel"
+  >
+    <slot />
+  </view>
+</view>

package/src/bld-radio/index.wxss

@@ -0,0 +1,79 @@
+.m-radio {
+  display: flex;
+  padding: 3rpx 0;
+}
+
+.m-radio .m-radio__icon-wrap {
+  display: flex;
+  align-items: center;
+}
+
+.m-radio .m-radio__icon-wrap .m-radio__icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42rpx;
+  height: 42rpx;
+  color: var(--color-primary, #409EFF);
+  border: 1px solid #e5e5e5;
+  border-radius: 100%;
+  box-sizing: content-box;
+  transition-property: color, border-color, background-color;
+  transition-duration: 0.15s;
+}
+
+.m-radio .m-radio__icon-wrap .m-radio__icon::after {
+  content: " ";
+  display: block;
+  margin: auto;
+  width: 20rpx;
+  height: 20rpx;
+  border-radius: 100%;
+  background-color: currentColor;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(0);
+  transition: transform 0.15s ease-in;
+}
+
+.m-radio .m-radio__icon-wrap .m-radio__icon.m-radio__icon--checked {
+  border-color: currentColor;
+}
+
+.m-radio .m-radio__icon-wrap .m-radio__icon.m-radio__icon--checked::after {
+  transform: scale(1);
+}
+
+.m-radio .m-radio__icon-wrap .m-radio__icon--disabled {
+  border-color: #c8c9cc;
+  background-color: #ebedf0;
+}
+
+.m-radio .m-radio__icon-wrap .m-radio__icon--disabled.m-radio__icon--checked {
+  color: #c8c9cc;
+  border-color: currentColor;
+}
+
+.m-radio .m-radio__icon-wrap .m-radio__icon--disabled.m-radio__icon--checked::after {
+  background-color: currentColor;
+}
+
+.m-radio .m-radio__label {
+  display: inline-flex;
+  align-items: center;
+  flex: 1;
+  word-wrap: break-word;
+  color: var(--color-text-regular, #606266);
+}
+
+.m-radio .m-radio__label.m-radio__label--left {
+  margin-right: 20rpx;
+}
+
+.m-radio .m-radio__label.m-radio__label--right {
+  margin-left: 20rpx;
+}

package/src/bld-radio-group/index.js

@@ -0,0 +1,83 @@
+Component({
+  externalClasses: ['iclass'],
+
+  options: {
+    addGlobalClass: true,
+  },
+  
+  relations: {
+    '../bld-radio/index': {
+      type: 'descendant',
+
+      linked(target) {
+        this._updateChildren()
+      },
+
+      linkChanged() {
+        this._updateChildren()
+      },
+
+      unlinked(target) {
+        this._updateChildren()
+      }
+    }
+  },
+
+  properties: {
+    value: {
+      type: null,
+      observer: '_updateChildren'
+    },
+    disabled: {
+      type: Boolean,
+      observer: '_updateChildren'
+    },
+    checkedColor: {
+      type: String,
+      value: ''
+    },
+    labelLeft: {
+      type: Boolean,
+      value: false
+    },
+  },
+
+  methods: {
+    _updateChildren() {
+      // 防抖减少重复触发
+      if (this.timer) {
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+
+      this.timer = setTimeout(() => {
+
+        let children = this.getRelationNodes('../bld-radio/index')
+
+        const len = children.length
+
+        if (len > 0) {
+          children.forEach((child, index) => {
+            this._updateChild(child)
+          })
+        }
+      }, 60)
+    },
+
+    _updateChild(child) {
+      const {
+        checkedColor,
+        value,
+        labelLeft,
+        disabled
+      } = this.data
+
+      child.setData({
+        checkedColor: child.data.checkedColor || checkedColor,
+        value,
+        labelLeft: child.data.labelLeft || labelLeft,
+        disabled: disabled || child.data.disabled
+      });
+    }
+  }
+})

package/src/bld-radio-group/index.json

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

package/src/bld-radio-group/index.wxml

@@ -0,0 +1 @@
+<slot />