bulade-ui 1.0.0

package/src/assets/style/border.wxss

@@ -0,0 +1,95 @@
+/* 1px */
+[class*='m-hairline'] {
+  position: relative;
+}
+
+/* 1倍屏 */
+[class*='m-hairline']::after {
+  z-index: 1;
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-width: 0;
+  border-color: var(--color-border, #dcdee2);
+  border-style: solid;
+  transform-origin: 0 0;
+  pointer-events: none;
+}
+
+.m-hairline--top::after {
+  border-top-width: 1px;
+}
+
+.m-hairline--right:after {
+  border-right-width: 1px;
+}
+
+.m-hairline--bottom:after {
+  border-bottom-width: 1px;
+}
+
+.m-hairline--left:after {
+  border-left-width: 1px;
+}
+
+.m-hairline--lt::after {
+  border-top-width: 1px;
+  border-left-width: 1px;
+}
+
+.m-hairline--tr::after {
+  border-top-width: 1px;
+  border-right-width: 1px;
+}
+
+.m-hairline--rb::after {
+  border-right-width: 1px;
+  border-bottom-width: 1px;
+}
+
+.m-hairline--lb::after {
+  border-left-width: 1px;
+  border-bottom-width: 1px;
+}
+
+.m-hairline--lr::after {
+  z-index: 1;
+  border-left-width: 1px;
+  border-right-width: 1px;
+}
+
+.m-hairline--tb::after {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
+
+.m-hairline--surround:after {
+  border-width: 1px;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
+  [class*='m-hairline']::after {
+    width: 150%;
+    height: 150%;
+    transform: scale(0.66666667);
+  }
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 2) {
+  [class*='m-hairline']::after {
+    width: 200%;
+    height: 200%;
+    transform: scale(0.5);
+  }
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 3) {
+  [class*='m-hairline']::after {
+    width: 300%;
+    height: 300%;
+    transform: scale(0.33333333);
+  }
+}

package/src/bld-button/index.js

@@ -0,0 +1,13 @@
+Component({
+  externalClasses: ["iclass"],
+  properties: {
+    type: {
+      type: String,
+      value: "default",
+    },
+    size: {
+      type: String,
+      value: "md",
+    },
+  },
+});

package/src/bld-button/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "isolated",
+  "usingComponents": {
+      "bld-icon": "../bld-icon/index"
+  }
+}

package/src/bld-button/index.scss

@@ -0,0 +1,39 @@
+.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;
+  }
+
+  &.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

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

package/src/bld-button/index.wxss

@@ -0,0 +1,33 @@
+.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.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-card/index.js

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

package/src/bld-card/index.json

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

package/src/bld-card/index.scss

@@ -0,0 +1,6 @@
+.card {
+  padding: 24rpx;
+  border-radius: 24rpx;
+  background: #ffff;
+  overflow: hidden;
+}

package/src/bld-card/index.wxml

@@ -0,0 +1,5 @@
+<view
+  class="card iclass"
+>
+  <slot />
+</view>

package/src/bld-card/index.wxss

@@ -0,0 +1,6 @@
+.card {
+  padding: 24rpx;
+  border-radius: 24rpx;
+  background: white;
+  overflow: hidden;
+}

package/src/bld-cell/index.js

@@ -0,0 +1,28 @@
+Component({
+  options: {
+    multipleSlots: true,
+  },
+  properties: {
+    title: {
+      type: String,
+    },
+    icon: {
+      type: String,
+    },
+    subtitle: {
+      type: String,
+    },
+    isLink: {
+      type: Boolean,
+      value: false,
+    },
+    type: {
+      type: String,
+      value: "text",
+    },
+    padding: {
+      type: String,
+      value: "0 24rpx",
+    },
+  },
+});

package/src/bld-cell/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "bld-icon": "../bld-icon/index",
+    "bld-text": "../bld-text/index"
+  }
+}

package/src/bld-cell/index.scss

@@ -0,0 +1,42 @@
+.cell {
+  background: #fff;
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-lg-r);
+}
+
+.title-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #eee;
+  padding: var(--font-size-lg-r) 0;
+}
+
+.icon {
+  margin-right: 12rpx;
+}
+
+.title {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  .sub-title {
+    margin-top: 6rpx;
+    color: #999;
+  }
+}
+
+.type-text .title {
+  .main-title {
+    color: #000;
+  }
+}
+
+.type-button .title {
+  align-items: center;
+  .main-title {
+    color: darkblue;
+  }
+}

package/src/bld-cell/index.wxml

@@ -0,0 +1,42 @@
+<view
+  class="cell type-{{ type }}"
+  style="padding: {{ padding }}"
+>
+  <slot name="image" />
+  <bld-icon
+    wx:if="{{ icon }}"
+    iclass="icon"
+    name="{{ icon }}"
+  />
+  <view class="title-wrapper">
+    <view
+      wx:if="{{ title }}"
+      class="title"
+    >
+      <view class="main-title">{{ title }}</view>
+      <view
+        wx:if="{{ subtitle }}"
+        class="sub-title"
+      >
+        <bld-text
+          max-lines="1"
+          text="{{ subtitle }}"
+          size="sm"
+        />
+      </view>
+    </view>
+    <view
+      wx:else
+      class="title"
+    >
+      <slot name="title" />
+    </view>
+    <slot name="description" />
+    <view
+      wx:if="{{ type == 'link' }}"
+      class="link-icon"
+    >
+      <bld-icon name="forward" />
+    </view>
+  </view>
+</view>

package/src/bld-cell/index.wxss

@@ -0,0 +1,39 @@
+.cell {
+  background: #fff;
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-lg-r);
+}
+
+.title-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #eee;
+  padding: var(--font-size-lg-r) 0;
+}
+
+.icon {
+  margin-right: 12rpx;
+}
+
+.title {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.title .sub-title {
+  margin-top: 6rpx;
+  color: #999;
+}
+
+.type-text .title .main-title {
+  color: #000;
+}
+
+.type-button .title {
+  align-items: center;
+}
+.type-button .title .main-title {
+  color: darkblue;
+}

package/src/bld-cell-field/index.js

@@ -0,0 +1,11 @@
+Component({
+  properties: {
+    title: {
+      type: String,
+    },
+    isLink: {
+      type: Boolean,
+      value: false,
+    },
+  },
+});

package/src/bld-cell-field/index.json

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

package/src/bld-cell-field/index.scss

@@ -0,0 +1,21 @@
+.cell {
+  background: #fff;
+}
+
+.cell-content {
+  padding: 12rpx 0;
+  margin: 0 24rpx;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-lg);
+
+  .title {
+    margin-right: 24rpx;
+    color: #666;
+  }
+
+  .field {
+    flex: 1;
+  }
+}

package/src/bld-cell-field/index.wxml

@@ -0,0 +1,8 @@
+<view class="cell">
+  <view class="cell-content">
+    <view wx:if="{{ title }}" class="title">{{ title }}</view>
+    <view class="field">
+      <slot />
+    </view>
+  </view>
+</view>

package/src/bld-cell-field/index.wxss

@@ -0,0 +1,19 @@
+.cell {
+  background: #fff;
+}
+
+.cell-content {
+  padding: 12rpx 0;
+  margin: 0 24rpx;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-lg);
+}
+.cell-content .title {
+  margin-right: 24rpx;
+  color: #666;
+}
+.cell-content .field {
+  flex: 1;
+}

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

@@ -0,0 +1,11 @@
+Component({
+  properties: {
+    title: {
+      type: String,
+    },
+    isFirst: {
+      type: Boolean,
+      value: false,
+    },
+  },
+});

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

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

package/src/bld-cell-group/index.scss

@@ -0,0 +1,13 @@
+.cell-group {
+  .title-wrapper {
+    padding-top: 24rpx;
+  }
+  .title {
+    font-size: var(--font-size-sm);
+    color: #666;
+    padding: 0 24rpx 12rpx;
+  }
+  .content {
+    background: #fff;
+  }
+}

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

@@ -0,0 +1,14 @@
+<view class="cell-group">
+  <view class="title-wrapper">
+    <view
+      wx:if="{{ title }}"
+      class="title"
+    >
+      {{ title }}
+    </view>
+  </view>
+
+  <view class="content">
+    <slot />
+  </view>
+</view>

package/src/bld-cell-group/index.wxss

@@ -0,0 +1,11 @@
+.cell-group .title-wrapper {
+  padding-top: 24rpx;
+}
+.cell-group .title {
+  font-size: var(--font-size-sm);
+  color: #666;
+  padding: 0 24rpx 12rpx;
+}
+.cell-group .content {
+  background: #fff;
+}

package/src/bld-form/bld-form-item/bld-form-date/index.js

@@ -0,0 +1,167 @@
+function nowDate() {
+  const date = new Date();
+  const years = date.getFullYear() - 1925;
+  const months = date.getMonth();
+  const days = date.getDate() - 1;
+  return [years, months, days];
+}
+Component({
+  externalClasses: ["form-item", "form-label", "form-value", "select-icon"],
+  properties: {
+    label: {
+      type: String,
+      value: "",
+    },
+    required: {
+      type: Boolean,
+      value: false,
+    },
+    labelWidth: {
+      type: String,
+      value: "auto",
+    },
+    value: {
+      type: String,
+      value: "",
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+  },
+  data: {
+    date: new Date(),
+    years: [],
+    year: "",
+    months: [],
+    month: "",
+    days: [],
+    day: "",
+    showActionsheet: false,
+    selectValue: nowDate(),
+    text: "",
+  },
+
+  observers: {
+    value: function () {
+      this.initDate(this.data.value);
+    },
+  },
+  lifetimes: {
+    ready() {
+      // this.initDate(this.data.value);
+    },
+  },
+  methods: {
+    initDate(value = "") {
+      const date = new Date();
+      const years = [];
+      const months = [];
+      const days = [];
+      for (let i = 1925; i <= date.getFullYear() + 10; i++) {
+        years.push(i);
+      }
+
+      for (let i = 1; i <= 12; i++) {
+        months.push(i);
+      }
+
+      for (let i = 1; i <= 31; i++) {
+        days.push(i);
+      }
+      this.setData({
+        years: years,
+        months: months,
+        days: days,
+      });
+      if (value) {
+        const valueDates = new Date(value.replace(/-/g, "/"));
+        const valueYear = valueDates.getFullYear() - 1925;
+        const valueMonth = valueDates.getMonth();
+        const valueDate = valueDates.getDate() - 1;
+
+        this.setData({
+          selectValue: [valueYear, valueMonth, valueDate],
+          text:
+            this.data.years[valueYear] + "年" + this.data.months[valueMonth] + "月" + this.data.days[valueDate] + "日",
+        });
+      } else {
+        this.setData({
+          selectValue: nowDate(),
+          text: "",
+        });
+      }
+    },
+    showSellect() {
+      if (this.data.disabled) return;
+
+      this.setData({
+        showActionsheet: true,
+      });
+    },
+    handelChoose() {
+      const year = this.data.year || this.data.years[this.data.selectValue[0]];
+      const month = this.data.month || this.data.months[this.data.selectValue[1]];
+      const day = this.data.day || this.data.days[this.data.selectValue[2]];
+
+      this.setData({
+        showActionsheet: false,
+        text: year + "年" + month + "月" + day + "日",
+        value: year + "-" + month + "-" + day,
+      });
+    },
+    bindChange(e) {
+      const val = e.detail.value;
+
+      this.setData({
+        year: this.data.years[val[0]],
+        month: this.data.months[val[1]].toString().padStart(2, "0"),
+        day: this.data.days[val[2]].toString().padStart(2, "0"),
+      });
+      if ([0, 2, 4, 6, 7, 9, 11].includes(val[1])) {
+        this.setDays(31);
+      } else if ([3, 5, 8, 10].includes(val[1])) {
+        this.setDays(30);
+        if (val[2] > 29) {
+          this.setDay(29);
+        }
+      } else if (this.data.years[val[0]] % 4 == 0) {
+        this.setDays(29);
+        if (val[2] > 28) {
+          this.setDay(28);
+        }
+      } else {
+        this.setDays(28);
+        if (val[2] > 27) {
+          this.setDay(27);
+        }
+      }
+    },
+    setMonth(month) {
+      const months = [];
+      for (let i = 1; i <= month; i++) {
+        months.push(i);
+      }
+      this.setData({
+        months: months,
+      });
+    },
+    setDays(day) {
+      const days = [];
+      for (let i = 1; i <= day; i++) {
+        days.push(i);
+      }
+      this.setData({
+        days: days,
+      });
+    },
+    setDay(maxDay) {
+      const selectValue = this.data.selectValue;
+
+      selectValue[2] = maxDay;
+      this.setData({
+        selectValue: selectValue,
+      });
+    },
+  },
+});

package/src/bld-form/bld-form-item/bld-form-date/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "bld-half-screen":"../../../bld-half-screen/index"
+  }
+}