@cloudbase/weda-ui-mp 0.2.20

package/components/form/formcell/index.js

@@ -0,0 +1,57 @@
+import classNames from '../../../utils/classnames';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    label: {
+      type: String,
+    },
+    layout: {
+      type: String,
+    },
+    multiCell: {
+      type: Boolean,
+      value: false,
+    },
+    requiredFlag: {
+      type: Boolean,
+      value: false,
+    },
+  },
+  data: {
+    isFlex: true,
+    cls: '',
+  },
+  lifetimes: {
+    attached() {},
+  },
+  observers: {
+    'layout, multiCell': function (layout, multiCell) {
+      // const { } = this.properties;
+      const isFlex = layout !== 'vertical';
+      const cls = classNames({
+        'weda-ui': true,
+        'weda-formcells': true,
+        'weui-cells': true,
+        'weui-cells_forms': !multiCell,
+        'weui-cells_checkbox': multiCell,
+        'weui-flex': isFlex,
+      });
+
+      this.setData({
+        isFlex: isFlex,
+        cls: cls,
+      });
+    },
+  },
+});

package/components/form/formcell/index.json

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

package/components/form/formcell/index.wxml

@@ -0,0 +1,11 @@
+<view class="{{className}}" style="{{style}}">
+  <view class="{{cls}}">
+    <view wx:if="{{!!label}}" class="weda-formcells__label weui-cell">
+      <label wx:if="{{requiredFlag}}" class="weda-formcells__flag">*</label>
+      <label>{{label}}</label>
+    </view>
+    <view class="weda-formcells__content {{isFlex ? 'weui-flex__item' : ''}}">
+      <slot></slot>
+    </view>
+  </view>
+</view>

package/components/form/formcell/index.wxss

@@ -0,0 +1,31 @@
+@import '../../../style/weda-ui.wxss';
+
+.weda-formcells__flag {
+  display: inline-block;
+  margin-left: 4px;
+  font-family: SimSun;
+  font-size: 12px;
+  color: #f60;
+  align-self: flex-start;
+}
+
+.weda-formcells.weui-flex .weda-formcells__label {
+  width: 130px;
+  padding-bottom: 16px;
+}
+
+.weui-cells__group_form .weui-cell {
+  padding: 16px 16px;
+}
+
+.weda-formcells .weda-formcells__label {
+  padding-bottom: 8px;
+}
+
+.weda-formcells__content.weui-flex__item .weui-cell_form {
+  padding: 0;
+}
+
+.weda-formcells__content.weui-flex__item .weui-cell_form {
+  padding-right: 16px;
+}

package/components/form/input/index.js

@@ -0,0 +1,116 @@
+Component({
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    label: {
+      type: String,
+      value: '标题',
+    },
+    labelVisible: {
+      type: Boolean,
+      value: true,
+    },
+    defaultValue: {
+      type: String,
+      value: '',
+    },
+    password: {
+      type: Boolean,
+      value: false,
+    },
+    placeholder: {
+      type: String,
+      value: '请输入',
+    },
+    type: {
+      type: String,
+      value: 'text',
+    },
+    maxLength: {
+      type: Number,
+      value: 140,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    focus: {
+      type: Boolean,
+      value: false,
+    },
+    layout: {
+      type: String,
+      value: 'horizontal',
+    },
+    requiredFlag: {
+      type: Boolean,
+      value: false,
+    },
+    clearable: {
+      type: Boolean,
+      value: true,
+    },
+    isNickNameType: {
+      type: Boolean,
+      value: false,
+    },
+  },
+  data: {
+    isFlex: true,
+    isFocus: false,
+    value: '',
+    hasInit: false,
+  },
+  lifetimes: {
+    attached() {
+      this.setData({
+        isFlex: this.properties.layout !== 'vertical',
+        isFocus: this.properties.focus,
+      });
+      // eslint-disable-next-line rulesdir/no-timer
+      setTimeout(() => this.setData({ hasInit: true }));
+    },
+  },
+  observers: {
+    defaultValue: function (defaultValue) {
+      if (defaultValue !== this.data.value) {
+        this.setData({ value: defaultValue });
+      }
+    },
+    'value,type,hasInit': function (value, type, hasInit) {
+      if (['number', 'digit'].includes(type) && value === '' && hasInit) {
+        this.triggerEvent('change', { value: null });
+      }
+    },
+  },
+  methods: {
+    handleFocus: function (e) {
+      this.triggerEvent('focus', e.detail);
+      this.setData({ isFocus: true });
+    },
+    handleBlur: function (e) {
+      this.triggerEvent('blur', e.detail);
+      this.setData({ isFocus: false });
+    },
+    handleChange: function (e) {
+      this.triggerEvent('change', e.detail);
+      this.setData({ value: e.detail.value });
+    },
+    handleClear: function (e) {
+      this.triggerEvent('clear', e.detail);
+      this.setData({ value: '' });
+    },
+    handleConfirm: function (e) {
+      this.triggerEvent('confirm', e.detail);
+    },
+  },
+});

package/components/form/input/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "formcell": "../formcell"
+  }
+}

package/components/form/input/index.wxml

@@ -0,0 +1,25 @@
+<formcell className="weda-ui weda-input {{className}}" style="{{style}}" label="{{labelVisible ? label : ''}}" layout="{{layout}}" multiCell="{{false}}" requiredFlag="{{requiredFlag}}">
+  <view class="weui-cell weui-cell_active weui-cell_form}} {{disabled ? 'weui-cell_disabled' : ''}}">
+    <view class="weui-cell__bd weui-flex">
+      <input
+        class="weui-input {{isFocus ? 'focus' : ''}} {{value ? 'not-placeholder-shown' : ''}}"
+        type="{{isNickNameType?'nickname':type}}"
+        placeholder="{{placeholder}}"
+        placeholder-class="weui-input__placeholder"
+        value="{{value}}"
+        disabled="{{disabled}}"
+        auto-focus="{{focus}}"
+        focus="{{focus}}"
+        password="{{password}}"
+        bindinput="handleChange"
+        bindfocus="handleFocus"
+        bindblur="handleBlur"
+        bindconfirm="handleConfirm"
+        maxlength="{{maxLength}}"
+      />
+      <view wx:if="{{clearable}}" class="weui-btn_reset weui-btn_icon weui-btn_input-clear" bindtap="handleClear">
+        <i class="weui-icon-clear" />
+      </view>
+    </view>
+  </view>
+</formcell>

package/components/form/input/index.wxss

@@ -0,0 +1,22 @@
+@import '../../../style/weda-ui.wxss';
+
+/*
+把weui-cell 的padding还回到input
+*/
+.weda-ui .weui-input {
+  padding: 14px 0;
+}
+
+.weui-btn_input-clear {
+  align-self: center;
+}
+.weda-ui.weda-input .weui-cell_form {
+  padding: 0 16px;
+}
+.weda-ui.weda-input .weui-flex__item .weui-cell_form {
+  padding: 0;
+  padding-right: 16px;
+}
+/**
+ * END
+ */