maooo-skyline-ui-system 0.1.1

package/miniprogram_dist/form-group/form-group.js

@@ -0,0 +1,53 @@
+function normalizeSize(size) {
+  return size === "small" ? "small" : "medium";
+}
+
+Component({
+  behaviors: ["wx://form-field-group"],
+  properties: {
+    label: {
+      type: String,
+      value: ""
+    },
+    required: {
+      type: Boolean,
+      value: false
+    },
+    requiredMark: {
+      type: String,
+      value: "*"
+    },
+    help: {
+      type: String,
+      value: ""
+    },
+    error: {
+      type: String,
+      value: ""
+    },
+    size: {
+      type: String,
+      value: "medium",
+      observer: "syncState"
+    },
+    customClass: {
+      type: String,
+      value: ""
+    }
+  },
+  data: {
+    sizeClass: "mo-form-group--medium"
+  },
+  lifetimes: {
+    attached() {
+      this.syncState();
+    }
+  },
+  methods: {
+    syncState() {
+      this.setData({
+        sizeClass: `mo-form-group--${normalizeSize(this.data.size)}`
+      });
+    }
+  }
+});

package/miniprogram_dist/form-group/form-group.json

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

package/miniprogram_dist/form-group/form-group.wxml

@@ -0,0 +1,11 @@
+<view class="mo-form-group {{sizeClass}} {{error ? 'is-error' : ''}} {{customClass}}">
+  <view wx:if="{{label || required}}" class="mo-form-group__label-row">
+    <text wx:if="{{label}}" class="mo-form-group__label">{{label}}</text>
+    <text wx:if="{{required}}" class="mo-form-group__required">{{requiredMark}}</text>
+  </view>
+  <view class="mo-form-group__body">
+    <slot></slot>
+  </view>
+  <text wx:if="{{error}}" class="mo-form-group__message mo-form-group__message--error">{{error}}</text>
+  <text wx:elif="{{help}}" class="mo-form-group__message">{{help}}</text>
+</view>

package/miniprogram_dist/form-group/form-group.wxss

@@ -0,0 +1,50 @@
+.mo-form-group {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.mo-form-group__label-row {
+  display: flex;
+  align-items: center;
+  min-height: 44rpx;
+  margin-bottom: 12rpx;
+}
+
+.mo-form-group__label {
+  color: var(--mo-color-text-primary, #111111);
+  font-size: 30rpx;
+  font-weight: 600;
+  line-height: 42rpx;
+}
+
+.mo-form-group__required {
+  margin-left: 6rpx;
+  color: var(--mo-color-brand-primary, #FECBE7);
+  font-size: 30rpx;
+  font-weight: 600;
+  line-height: 42rpx;
+}
+
+.mo-form-group__body {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.mo-form-group__message {
+  margin-top: 10rpx;
+  color: var(--mo-color-text-secondary, #666666);
+  font-size: 24rpx;
+  line-height: 34rpx;
+}
+
+.mo-form-group__message--error {
+  color: var(--mo-color-status-danger, #FA5051);
+}
+
+.mo-form-group--small .mo-form-group__label,
+.mo-form-group--small .mo-form-group__required {
+  font-size: 26rpx;
+  line-height: 38rpx;
+}

package/miniprogram_dist/form-input/form-input.js

@@ -0,0 +1,48 @@
+Component({
+  behaviors: ["wx://form-field-group"],
+  properties: {
+    label: { type: String, value: "" },
+    required: { type: Boolean, value: false },
+    requiredMark: { type: String, value: "*" },
+    help: { type: String, value: "" },
+    error: { type: String, value: "" },
+    size: { type: String, value: "medium" },
+    name: { type: String, value: "" },
+    value: { type: String, value: "" },
+    placeholder: { type: String, value: "请输入" },
+    type: { type: String, value: "text" },
+    focus: { type: Boolean, value: false },
+    maxlength: { type: Number, value: 140 },
+    confirmType: { type: String, value: "done" },
+    disabled: { type: Boolean, value: false },
+    allowClear: { type: Boolean, value: false },
+    prefixIcon: { type: String, value: "" },
+    suffixIcon: { type: String, value: "" },
+    customClass: { type: String, value: "" }
+  },
+  methods: {
+    emitValueEvent(type, event) {
+      const detail = event.detail || {};
+
+      this.triggerEvent(type, {
+        name: detail.name || this.data.name,
+        value: detail.value == null ? "" : detail.value
+      });
+    },
+    handleInput(event) {
+      this.emitValueEvent("input", event);
+    },
+    handleChange(event) {
+      this.emitValueEvent("change", event);
+    },
+    handleConfirm(event) {
+      this.emitValueEvent("confirm", event);
+    },
+    handleClear(event) {
+      this.emitValueEvent("clear", event);
+    },
+    handleSearch(event) {
+      this.emitValueEvent("search", event);
+    }
+  }
+});

package/miniprogram_dist/form-input/form-input.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {
+    "mo-form-group": "../form-group/form-group",
+    "mo-input": "../input/input"
+  }
+}

package/miniprogram_dist/form-input/form-input.wxml

@@ -0,0 +1,28 @@
+<mo-form-group
+  label="{{label}}"
+  required="{{required}}"
+  required-mark="{{requiredMark}}"
+  help="{{help}}"
+  error="{{error}}"
+  size="{{size}}"
+  custom-class="{{customClass}}"
+>
+  <mo-input
+    name="{{name}}"
+    value="{{value}}"
+    placeholder="{{placeholder}}"
+    type="{{type}}"
+    focus="{{focus}}"
+    maxlength="{{maxlength}}"
+    confirm-type="{{confirmType}}"
+    disabled="{{disabled}}"
+    allow-clear="{{allowClear}}"
+    prefix-icon="{{prefixIcon}}"
+    suffix-icon="{{suffixIcon}}"
+    bind:input="handleInput"
+    bind:change="handleChange"
+    bind:confirm="handleConfirm"
+    bind:clear="handleClear"
+    bind:search="handleSearch"
+  />
+</mo-form-group>

package/miniprogram_dist/form-input/form-input.wxss

@@ -0,0 +1,3 @@
+.mo-form-input {
+  width: 100%;
+}

package/miniprogram_dist/form-textarea/form-textarea.js

@@ -0,0 +1,34 @@
+Component({
+  behaviors: ["wx://form-field-group"],
+  properties: {
+    label: { type: String, value: "" },
+    required: { type: Boolean, value: false },
+    requiredMark: { type: String, value: "*" },
+    help: { type: String, value: "" },
+    error: { type: String, value: "" },
+    size: { type: String, value: "medium" },
+    name: { type: String, value: "" },
+    value: { type: String, value: "" },
+    placeholder: { type: String, value: "请输入" },
+    height: { type: Number, value: 200 },
+    maxlength: { type: Number, value: 500 },
+    disabled: { type: Boolean, value: false },
+    customClass: { type: String, value: "" }
+  },
+  methods: {
+    emitValueEvent(type, event) {
+      const detail = event.detail || {};
+
+      this.triggerEvent(type, {
+        name: detail.name || this.data.name,
+        value: detail.value == null ? "" : detail.value
+      });
+    },
+    handleInput(event) {
+      this.emitValueEvent("input", event);
+    },
+    handleConfirm(event) {
+      this.emitValueEvent("confirm", event);
+    }
+  }
+});

package/miniprogram_dist/form-textarea/form-textarea.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {
+    "mo-form-group": "../form-group/form-group",
+    "mo-textarea": "../textarea/textarea"
+  }
+}

package/miniprogram_dist/form-textarea/form-textarea.wxml

@@ -0,0 +1,20 @@
+<mo-form-group
+  label="{{label}}"
+  required="{{required}}"
+  required-mark="{{requiredMark}}"
+  help="{{help}}"
+  error="{{error}}"
+  size="{{size}}"
+  custom-class="{{customClass}}"
+>
+  <mo-textarea
+    name="{{name}}"
+    value="{{value}}"
+    placeholder="{{placeholder}}"
+    height="{{height}}"
+    maxlength="{{maxlength}}"
+    disabled="{{disabled}}"
+    bind:input="handleInput"
+    bind:confirm="handleConfirm"
+  />
+</mo-form-group>

package/miniprogram_dist/form-textarea/form-textarea.wxss

@@ -0,0 +1,3 @@
+.mo-form-textarea {
+  width: 100%;
+}

package/miniprogram_dist/icon/_iconfont/iconfont.js

@@ -0,0 +1,63 @@
+Component({
+  properties: {
+    // close | arrow-left | walking-dog
+    name: {
+      type: String,
+    },
+    // string | string[]
+    color: {
+      type: null,
+      observer: function(color) {
+        this.setData({
+          colors: this.fixColor(),
+          isStr: typeof color === 'string',
+        });
+      }
+    },
+    size: {
+      type: Number,
+      value: 88,
+      observer: function(size) {
+        this.setData({
+          svgSize: size / 750 * wx.getSystemInfoSync().windowWidth,
+        });
+      },
+    },
+  },
+  data: {
+    colors: '',
+    svgSize: 88 / 750 * wx.getSystemInfoSync().windowWidth,
+    quot: '"',
+    isStr: true,
+  },
+  methods: {
+    fixColor: function() {
+      var color = this.data.color;
+      var hex2rgb = this.hex2rgb;
+
+      if (typeof color === 'string') {
+        return color.indexOf('#') === 0 ? hex2rgb(color) : color;
+      }
+
+      return color.map(function (item) {
+        return item.indexOf('#') === 0 ? hex2rgb(item) : item;
+      });
+    },
+    hex2rgb: function(hex) {
+      var rgb = [];
+
+      hex = hex.substr(1);
+
+      if (hex.length === 3) {
+        hex = hex.replace(/(.)/g, '$1$1');
+      }
+
+      hex.replace(/../g, function(color) {
+        rgb.push(parseInt(color, 0x10));
+        return color;
+      });
+
+      return 'rgb(' + rgb.join(',') + ')';
+    }
+  }
+});

package/miniprogram_dist/icon/_iconfont/iconfont.json

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

package/miniprogram_dist/icon/_iconfont/iconfont.wxml

@@ -0,0 +1,8 @@
+<!--close-->
+<view wx:if="{{name === 'close'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M861 916.7L110.9 166.6c-15.6-15.6-15.6-40.9 0-56.5 15.6-15.6 40.9-15.6 56.5 0l750.1 750.1c15.6 15.6 15.6 40.9 0 56.5-15.6 15.6-40.9 15.6-56.5 0z' fill='{{(isStr ? colors : colors[0]) || 'rgb(74,56,58)'}}' /%3E%3Cpath d='M917.5 166.6L167.4 916.7c-15.6 15.6-40.9 15.6-56.5 0-15.6-15.6-15.6-40.9 0-56.5L861 110.1c15.6-15.6 40.9-15.6 56.5 0 15.6 15.6 15.6 40.9 0 56.5z' fill='{{(isStr ? colors : colors[1]) || 'rgb(74,56,58)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
+
+<!--arrow-left-->
+<view wx:if="{{name === 'arrow-left'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M304.56666667 568.00000001L651.36666667 914.8c15.6 15.6 40.9 15.6 56.5 0 15.6-15.6 15.6-40.9 0-56.5l-346.8-346.8 346.8-346.8c15.6-15.6 15.6-40.9 0-56.5-15.6-15.6-40.9-15.6-56.5 0L304.56666667 455l-21.1 21.1c-19.5 19.5-19.5 51.2 0 70.7L304.56666667 568.00000001z' fill='{{(isStr ? colors : colors[0]) || 'rgb(0,0,0)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />
+
+<!--walking-dog-->
+<view wx:if="{{name === 'walking-dog'}}" style="background-image: url({{quot}}data:image/svg+xml, %3Csvg viewBox='0 0 1117 1024' xmlns='http://www.w3.org/2000/svg' width='{{svgSize}}px' height='{{svgSize}}px'%3E%3Cpath d='M924.049455 781.824q4.266667-2.944 7.722666-6.826667 3.434667-3.882667 5.866667-8.469333 2.410667-4.586667 3.648-9.642667Q942.545455 751.850667 942.545455 746.666667q0-2.090667-0.213334-4.181334t-0.618666-4.138666q-0.405333-2.048-1.024-4.053334-0.597333-2.005333-1.408-3.946666-0.789333-1.941333-1.792-3.797334-0.981333-1.834667-2.133334-3.584-1.173333-1.749333-2.496-3.370666-1.344-1.6-2.816-3.093334-1.493333-1.493333-3.093333-2.816-1.621333-1.322667-3.370667-2.496-1.749333-1.152-3.584-2.133333-1.856-1.002667-3.797333-1.792-1.92-0.810667-3.946667-1.408-2.005333-0.618667-4.053333-1.024-2.048-0.426667-4.138667-0.618667Q901.969455 704 899.878788 704q-6.464 0-12.650667 1.92t-11.52 5.589333q-156.096 107.306667-426.730666 57.194667Q445.137455 768 441.212121 768q-2.090667 0-4.181333 0.213333t-4.138667 0.618667q-2.048 0.405333-4.053333 1.024-2.005333 0.597333-3.946667 1.408-1.941333 0.789333-3.797333 1.792-1.834667 0.981333-3.584 2.133333-1.749333 1.173333-3.370667 2.496-1.6 1.344-3.093333 2.816-1.493333 1.493333-2.816 3.093334-1.322667 1.621333-2.496 3.370666-1.152 1.749333-2.133333 3.584-1.002667 1.856-1.792 3.797334-0.810667 1.92-1.408 3.946666-0.618667 2.005333-1.024 4.053334-0.426667 2.048-0.618667 4.138666-0.213333 2.090667-0.213333 4.181334 0 1.856 0.170666 3.690666 0.149333 1.856 0.469334 3.669334 0.32 1.834667 0.810666 3.626666 0.469333 1.770667 1.109334 3.52 0.618667 1.728 1.386666 3.413334 0.789333 1.685333 1.706667 3.285333 0.917333 1.621333 1.984 3.136t2.24 2.944q1.173333 1.408 2.474667 2.730667 1.301333 1.322667 2.709333 2.517333 1.429333 1.194667 2.922667 2.261333 1.514667 1.066667 3.114666 2.005334t3.264 1.728q1.685333 0.810667 3.413334 1.450666 1.728 0.64 3.52 1.130667t3.605333 0.853333q305.365333 56.533333 490.602667-70.805333z' fill='{{(isStr ? colors : colors[0]) || 'rgb(17,17,17)'}}' /%3E%3Cpath d='M673.681455 583.850667q-17.386667-52.224 11.584-168.170667 1.28-5.098667 1.28-10.346667 0-2.090667-0.213334-4.181333t-0.618666-4.138667q-0.405333-2.069333-1.024-4.053333-0.597333-2.026667-1.408-3.946667-0.789333-1.941333-1.792-3.797333-0.981333-1.834667-2.133334-3.584-1.173333-1.749333-2.496-3.370667-1.344-1.621333-2.816-3.093333-1.493333-1.493333-3.093333-2.816-1.621333-1.322667-3.370667-2.496-1.749333-1.152-3.584-2.133333-1.856-1.002667-3.797333-1.813334-1.92-0.789333-3.946667-1.408-2.005333-0.597333-4.053333-1.002666-2.048-0.426667-4.138667-0.64Q645.969455 362.666667 643.878788 362.666667q-3.541333 0-7.04 0.597333-3.498667 0.576-6.826667 1.728-3.370667 1.152-6.485333 2.837333-3.114667 1.706667-5.909333 3.882667-2.773333 2.176-5.184 4.778667-2.389333 2.624-4.309334 5.589333-1.941333 2.986667-3.349333 6.208-1.429333 3.264-2.282667 6.698667-35.029333 140.053333-9.749333 215.829333Q623.782788 704 729.212121 704q80.213333 0 118.037334-83.733333 27.221333-60.309333 25.450666-153.429334-3.925333-205.653333-93.845333-285.418666-73.365333-65.109333-195.264-74.282667-105.514667-7.936-172.117333 25.365333-74.368 37.162667-121.6 156.8l-143.253334 71.616q-38.122667 19.072-35.114666 61.397334Q127.868121 652.8 275.857455 652.8q77.717333 0 135.872-24.469333 0.490667 142.997333-65.28 218.24v0.021333q-2.517333 2.901333-4.48 6.186667-1.984 3.306667-3.328 6.890666-1.344 3.605333-2.026667 7.381334-0.682667 3.776-0.682667 7.616 0 2.090667 0.213334 4.181333 0.192 2.090667 0.597333 4.138667 0.426667 2.048 1.024 4.053333t1.408 3.946667q0.789333 1.92 1.792 3.776 0.981333 1.856 2.133333 3.605333 1.173333 1.728 2.496 3.349333 1.344 1.621333 2.816 3.114667 1.493333 1.493333 3.114667 2.816 1.621333 1.322667 3.349333 2.474667 1.749333 1.173333 3.605334 2.154666 1.834667 1.002667 3.776 1.792 1.92 0.810667 3.946666 1.408 2.005333 0.618667 4.053334 1.024 2.048 0.426667 4.138666 0.618667 2.090667 0.213333 4.181334 0.213333 4.565333 0 9.024-0.981333 4.48-0.96 8.618666-2.858667 4.16-1.877333 7.808-4.608 3.669333-2.709333 6.677334-6.144 95.232-109.013333 85.44-308.970666-1.92-39.125333-38.528-55.296-31.786667-14.016-61.994667 2.922666-46.528 26.069333-119.765333 26.069334-65.130667 0-78.037334-136.746667l137.536-68.757333q22.421333-11.221333 31.402667-34.858667 35.989333-94.848 82.858667-118.272 45.546667-22.784 127.573333-16.597333 93.205333 7.018667 145.045333 53.013333 61.930667 54.954667 65.152 223.210667 1.408 73.898667-17.92 116.693333Q754.321455 618.666667 729.212121 618.666667q-43.904 0-55.530666-34.816z' fill='{{(isStr ? colors : colors[1]) || 'rgb(17,17,17)'}}' /%3E%3Cpath d='M430.545455 320a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z' fill='{{(isStr ? colors : colors[2]) || 'rgb(17,17,17)'}}' /%3E%3C/svg%3E{{quot}}); width: {{svgSize}}px; height: {{svgSize}}px; " class="icon" />

package/miniprogram_dist/icon/_iconfont/iconfont.wxss

@@ -0,0 +1,3 @@
+.icon {
+  background-repeat: no-repeat;
+}

package/miniprogram_dist/icon/icon.js

@@ -0,0 +1,41 @@
+function normalizeIconSize(size) {
+  const value = Number(size);
+  return Number.isFinite(value) && value > 0 ? value : 88;
+}
+
+Component({
+  properties: {
+    name: {
+      type: String,
+      value: ""
+    },
+    size: {
+      type: Number,
+      value: 88,
+      observer: "syncSize"
+    },
+    color: {
+      type: String,
+      value: "#111111"
+    },
+    customStyle: {
+      type: String,
+      value: ""
+    }
+  },
+  data: {
+    iconSize: 88
+  },
+  lifetimes: {
+    attached() {
+      this.syncSize(this.data.size);
+    }
+  },
+  methods: {
+    syncSize(size) {
+      this.setData({
+        iconSize: normalizeIconSize(size)
+      });
+    }
+  }
+});

package/miniprogram_dist/icon/icon.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {
+    "mo-iconfont": "./_iconfont/iconfont"
+  }
+}

package/miniprogram_dist/icon/icon.wxml

@@ -0,0 +1,3 @@
+<view wx:if="{{name}}" class="mo-icon" style="width: {{iconSize}}rpx; height: {{iconSize}}rpx; {{customStyle}}">
+  <mo-iconfont name="{{name}}" color="{{color}}" size="{{iconSize}}" />
+</view>

package/miniprogram_dist/icon/icon.wxss

@@ -0,0 +1,13 @@
+.mo-icon {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.mo-icon mo-iconfont {
+  display: block;
+}