wedux-ui 0.1.0

package/miniprogram_dist/components/float-button/float-button.scss

@@ -0,0 +1,54 @@
+.w-fab {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 96rpx;
+  height: 96rpx;
+  box-shadow: var(--shadow-float);
+  transition: opacity 0.2s;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.w-fab--circle {
+  border-radius: 50%;
+}
+
+.w-fab--square {
+  border-radius: var(--radius-md);
+}
+
+/* Types */
+.w-fab--primary {
+  background: var(--color-brand);
+  color: #ffffff;
+}
+
+.w-fab--default {
+  background: var(--color-bg-elevated);
+  color: var(--color-text-primary);
+}
+
+/* Press overlay */
+.w-fab--active::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--color-press-overlay);
+  border-radius: inherit;
+}
+
+.w-fab--default.w-fab--active::after {
+  background: var(--color-press-overlay-light);
+}
+
+/* Disabled */
+.w-fab--disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}

package/miniprogram_dist/components/float-button/float-button.wxml

@@ -0,0 +1,9 @@
+<view
+  class="w-fab w-fab--{{shape}} w-fab--{{type}} {{disabled ? 'w-fab--disabled' : ''}}"
+  style="{{_style}}"
+  hover-class="{{disabled ? '' : 'w-fab--active'}}"
+  hover-stay-time="70"
+  bindtap="handleTap"
+>
+  <slot></slot>
+</view>

package/miniprogram_dist/components/form/form.js

@@ -0,0 +1,142 @@
+Component({
+  behaviors: ['wx://form-field-group'],
+
+  relations: {
+    '../form-item/form-item': {
+      type: 'descendant',
+      linked() {
+        this._updateChildren();
+      },
+      linkChanged() {
+        this._updateChildren();
+      },
+      unlinked() {
+        this._updateChildren();
+      },
+    },
+  },
+
+  properties: {
+    model: { type: Object, value: {} },
+    rules: { type: Object, value: {} },
+    size: { type: String, value: 'medium' },
+    disabled: { type: Boolean, value: false },
+    labelPlacement: { type: String, value: 'top' },
+    labelWidth: { type: String, value: '' },
+    showFeedback: { type: Boolean, value: true },
+    showLabel: { type: Boolean, value: true },
+    showRequireMark: { type: Boolean, value: true },
+    requireMarkPlacement: { type: String, value: 'right' },
+    inline: { type: Boolean, value: false },
+  },
+
+  observers: {
+    'model, rules, size, disabled, labelPlacement, labelWidth, showFeedback, showLabel, showRequireMark, requireMarkPlacement'() {
+      this._updateChildren();
+    },
+  },
+
+  lifetimes: {
+    created() {
+      // Store rules with functions here (not in data, to survive serialization)
+      this._rules = null;
+    },
+  },
+
+  methods: {
+    /**
+     * Set rules with custom validator functions.
+     * Use this instead of the rules property when rules contain functions,
+     * because setData/WXML data binding strips functions.
+     *
+     * Usage (in page's onReady):
+     *   this.selectComponent('#form').setRules({
+     *     age: [{ validator(rule, value) { ... }, trigger: 'blur' }]
+     *   })
+     */
+    setRules(rules) {
+      this._rules = rules || null;
+      this._updateChildren();
+    },
+
+    /**
+     * Get the effective rules (setRules > property).
+     */
+    _getEffectiveRules() {
+      return this._rules || this.data.rules || {};
+    },
+
+    _updateChildren() {
+      const children = this.getRelationNodes('../form-item/form-item');
+      if (!children) return;
+      const ctx = {
+        size: this.data.size,
+        disabled: this.data.disabled,
+        labelPlacement: this.data.labelPlacement,
+        labelWidth: this.data.labelWidth,
+        showFeedback: this.data.showFeedback,
+        showLabel: this.data.showLabel,
+        showRequireMark: this.data.showRequireMark,
+        requireMarkPlacement: this.data.requireMarkPlacement,
+        model: this.data.model,
+        rules: this._getEffectiveRules(),
+      };
+      children.forEach((child) => {
+        child._setFormContext(ctx);
+      });
+    },
+
+    getFieldValue(path) {
+      if (!path || !this.data.model) return undefined;
+      return this.data.model[path];
+    },
+
+    getRulesForPath(path) {
+      const rules = this._getEffectiveRules();
+      if (!path || !rules) return [];
+      const r = rules[path];
+      if (!r) return [];
+      return Array.isArray(r) ? r : [r];
+    },
+
+    /**
+     * Validate all form items (naive-ui style).
+     * @param {Function} [callback] - callback(errors)
+     *   errors: undefined if all valid, Array<{ field, message }> if invalid
+     *
+     * Usage:
+     *   form.validate((errors) => {
+     *     if (!errors) { // success }
+     *     else { console.log(errors) }
+     *   })
+     */
+    validate(callback) {
+      const children = this.getRelationNodes('../form-item/form-item');
+      if (!children || children.length === 0) {
+        callback && callback(undefined);
+        return;
+      }
+      const errors = [];
+      children.forEach((child) => {
+        const result = child._validate();
+        if (!result.valid) {
+          result.errors.forEach((error) => {
+            errors.push({
+              field: child.data.path,
+              message: error.message,
+            });
+          });
+        }
+      });
+      callback && callback(errors.length > 0 ? errors : undefined);
+    },
+
+    restoreValidation() {
+      const children = this.getRelationNodes('../form-item/form-item');
+      if (!children) return;
+      children.forEach((child) => {
+        child._restoreValidation();
+      });
+    },
+  },
+});

package/miniprogram_dist/components/form/form.json

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

package/miniprogram_dist/components/form/form.scss

@@ -0,0 +1,11 @@
+.w-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.w-form--inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+}

package/miniprogram_dist/components/form/form.wxml

@@ -0,0 +1,3 @@
+<view class="w-form {{inline ? 'w-form--inline' : ''}}">
+  <slot></slot>
+</view>

package/miniprogram_dist/components/form/validator.js

@@ -0,0 +1,220 @@
+/**
+ * Form validation engine - powered by validator.js
+ * style: validator(rule, value) => true | new Error('msg') | false
+ * API: validateField(value, rules) => { valid, errors }
+ */
+
+import validatorLib from '../../libs/validator_13_56_26.min.js';
+
+// Map rule.type to validator.js method + default message
+var typeMap = {
+  // Basic types
+  string: {
+    check(v) {
+      return typeof v === 'string';
+    },
+    msg: '请输入字符串',
+  },
+  number: {
+    check(v) {
+      return !isNaN(Number(v));
+    },
+    msg: '请输入数字',
+  },
+  integer: { fn: 'isInt', msg: '请输入整数' },
+  float: { fn: 'isFloat', msg: '请输入数字' },
+  boolean: {
+    check(v) {
+      return v === true || v === false || v === 'true' || v === 'false';
+    },
+    msg: '请输入布尔值',
+  },
+
+  // Format types
+  email: { fn: 'isEmail', msg: '邮箱格式不正确' },
+  url: { fn: 'isURL', msg: 'URL 格式不正确' },
+  phone: { fn: 'isMobilePhone', args: ['zh-CN'], msg: '手机号格式不正确' },
+  ip: { fn: 'isIP', msg: 'IP 地址格式不正确' },
+  date: { fn: 'isDate', msg: '日期格式不正确' },
+  hex: { fn: 'isHexadecimal', msg: '十六进制格式不正确' },
+  json: { fn: 'isJSON', msg: 'JSON 格式不正确' },
+  ascii: { fn: 'isAscii', msg: '请输入 ASCII 字符' },
+  alpha: { fn: 'isAlpha', msg: '请输入字母' },
+  alphanumeric: { fn: 'isAlphanumeric', msg: '请输入字母或数字' },
+  numeric: { fn: 'isNumeric', msg: '请输入数字' },
+  uuid: { fn: 'isUUID', msg: 'UUID 格式不正确' },
+  creditCard: { fn: 'isCreditCard', msg: '信用卡号格式不正确' },
+  postalCode: { fn: 'isPostalCode', args: ['CN'], msg: '邮编格式不正确' },
+  idCard: { fn: 'isIdentityCard', args: ['zh-CN'], msg: '身份证号格式不正确' },
+  hexColor: { fn: 'isHexColor', msg: '颜色格式不正确' },
+  lowercase: { fn: 'isLowercase', msg: '请输入小写字母' },
+  uppercase: { fn: 'isUppercase', msg: '请输入大写字母' },
+};
+
+function isEmpty(value) {
+  if (value === null || value === undefined) return true;
+  if (typeof value === 'string' && value.trim() === '') return true;
+  if (Array.isArray(value) && value.length === 0) return true;
+  return false;
+}
+
+/**
+ * Extract error message from validator result.
+ * style: new Error('msg'), string, false, true
+ */
+function extractError(result, fallbackMsg) {
+  if (result === true) return null;
+  if (result === false) return fallbackMsg || '校验失败';
+  if (result instanceof Error) return result.message || fallbackMsg || '校验失败';
+  if (typeof result === 'string') return result;
+  return fallbackMsg || '校验失败';
+}
+
+function validateRule(value, rule) {
+  // Custom validator takes priority
+  if (typeof rule.validator === 'function') {
+    var result = rule.validator(rule, value);
+    var err = extractError(result, rule.message);
+    if (err) return err;
+    return null;
+  }
+
+  // Required check
+  if (rule.required && isEmpty(value)) {
+    return rule.message || '此项为必填';
+  }
+
+  // Skip remaining rules if value is empty and not required
+  if (isEmpty(value)) return null;
+
+  var strVal = String(value);
+
+  // Type check via validator.js
+  if (rule.type) {
+    var typeDef = typeMap[rule.type];
+    if (typeDef) {
+      var passed = false;
+      if (typeDef.check) {
+        passed = typeDef.check(value);
+      } else if (typeDef.fn && typeof validatorLib[typeDef.fn] === 'function') {
+        var args = rule.validatorArgs || typeDef.args || [];
+        passed = validatorLib[typeDef.fn].apply(validatorLib, [strVal].concat(args));
+      }
+      if (!passed) {
+        return rule.message || typeDef.msg;
+      }
+    }
+  }
+
+  // Direct validator.js method: rule.validatorFn = 'isEmail' etc.
+  if (rule.validatorFn && typeof validatorLib[rule.validatorFn] === 'function') {
+    var fnArgs = rule.validatorArgs || [];
+    if (!validatorLib[rule.validatorFn].apply(validatorLib, [strVal].concat(fnArgs))) {
+      return rule.message || '格式不正确';
+    }
+  }
+
+  // Pattern check
+  if (rule.pattern) {
+    var patternReg = typeof rule.pattern === 'string' ? new RegExp(rule.pattern) : rule.pattern;
+    if (!patternReg.test(strVal)) {
+      return rule.message || '格式不正确';
+    }
+  }
+
+  // Length / range check
+  if (typeof rule.min === 'number' || typeof rule.max === 'number') {
+    if (rule.type === 'number' || rule.type === 'integer' || rule.type === 'float') {
+      var numVal = Number(value);
+      if (typeof rule.min === 'number' && numVal < rule.min) {
+        return rule.message || '不能小于 ' + rule.min;
+      }
+      if (typeof rule.max === 'number' && numVal > rule.max) {
+        return rule.message || '不能大于 ' + rule.max;
+      }
+    } else {
+      var lenOpts = {};
+      if (typeof rule.min === 'number') lenOpts.min = rule.min;
+      if (typeof rule.max === 'number') lenOpts.max = rule.max;
+      if (!validatorLib.isLength(strVal, lenOpts)) {
+        if (typeof rule.min === 'number' && typeof rule.max === 'number') {
+          return rule.message || '长度应在 ' + rule.min + '-' + rule.max + ' 之间';
+        }
+        if (typeof rule.min === 'number') {
+          return rule.message || '长度不能少于 ' + rule.min;
+        }
+        return rule.message || '长度不能超过 ' + rule.max;
+      }
+    }
+  }
+
+  // Whitelist / enum check
+  if (rule.enum && Array.isArray(rule.enum)) {
+    if (rule.enum.indexOf(value) === -1 && rule.enum.indexOf(strVal) === -1) {
+      return rule.message || '值不在允许范围内';
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Filter rules by trigger.
+ * @param {Array} rules
+ * @param {String} trigger
+ * @returns {Array}
+ */
+function filterByTrigger(rules, trigger) {
+  if (!trigger) return rules;
+  var filtered = [];
+  for (var i = 0; i < rules.length; i++) {
+    var r = rules[i];
+    if (!r.trigger) {
+      filtered.push(r);
+      continue;
+    }
+    var triggers = Array.isArray(r.trigger) ? r.trigger : [r.trigger];
+    if (triggers.indexOf(trigger) >= 0) {
+      filtered.push(r);
+    }
+  }
+  return filtered;
+}
+
+/**
+ * Validate a value against an array of rules.
+ * @param {*} value
+ * @param {Array|Object} rules - single rule or array of rules
+ * @param {Object} [options]
+ * @param {String} [options.trigger] - filter rules by trigger
+ * @param {Boolean} [options.first] - stop at first error
+ * @returns {{ valid: Boolean, errors: Array<{ message: String }> }}
+ */
+function validateField(value, rules, options) {
+  if (!rules) return { valid: true, errors: [] };
+  var ruleList = Array.isArray(rules) ? rules : [rules];
+  var opts = options || {};
+
+  if (opts.trigger) {
+    ruleList = filterByTrigger(ruleList, opts.trigger);
+  }
+
+  if (ruleList.length === 0) return { valid: true, errors: [] };
+
+  var errors = [];
+  for (var i = 0; i < ruleList.length; i++) {
+    var msg = validateRule(value, ruleList[i]);
+    if (msg) {
+      errors.push({ message: msg });
+      if (opts.first) break;
+    }
+  }
+  return {
+    valid: errors.length === 0,
+    errors: errors,
+  };
+}
+
+module.exports = {
+  validateField: validateField,
+};

package/miniprogram_dist/components/form-item/form-item.js

@@ -0,0 +1,240 @@
+const validator = require('../form/validator');
+const { makeDescendantRelations } = require('../../utils/relations');
+
+const FIELD_PATHS = [
+  '../input/input',
+  '../textarea/textarea',
+  '../switch/switch',
+  '../radio-group/radio-group',
+  '../checkbox-group/checkbox-group',
+  '../time-picker/time-picker',
+  '../date-picker/date-picker',
+  '../color-picker/color-picker',
+  '../rate/rate',
+  '../select/select',
+  '../upload/upload',
+  '../tree-select/tree-select',
+  '../input-otp/input-otp',
+  '../stepper/stepper',
+];
+
+Component({
+  options: {
+    multipleSlots: true,
+  },
+
+  relations: {
+    '../form/form': {
+      type: 'ancestor',
+    },
+    ...makeDescendantRelations(FIELD_PATHS, {
+      linked() {
+        this._updateFieldChildren();
+      },
+      linkChanged() {
+        this._updateFieldChildren();
+      },
+      unlinked() {
+        this._updateFieldChildren();
+      },
+    }),
+  },
+
+  properties: {
+    label: { type: String, value: '' },
+    path: { type: String, value: '' },
+    rule: { type: null, value: null },
+    required: { type: Boolean, value: false },
+    first: { type: Boolean, value: false },
+    size: { type: String, value: '' },
+    showFeedback: { type: null, value: null },
+    validationStatus: { type: String, value: '' },
+    feedback: { type: String, value: '' },
+    labelWidth: { type: String, value: '' },
+    requireMarkPlacement: { type: String, value: '' },
+  },
+
+  observers: {
+    'required, path, rule'() {
+      this._updateIsRequired();
+    },
+  },
+
+  lifetimes: {
+    created() {
+      this._rule = null;
+      // Store form rules as instance property to preserve function references
+      this._formRulesRef = {};
+    },
+  },
+
+  data: {
+    _validationMessage: '',
+    _validationStatus: '',
+    _formSize: 'medium',
+    _formDisabled: false,
+    _formLabelPlacement: 'top',
+    _formLabelWidth: '',
+    _formShowFeedback: true,
+    _formShowLabel: true,
+    _formShowRequireMark: true,
+    _formRequireMarkPlacement: 'right',
+    _formModel: {},
+    _isRequired: false,
+  },
+
+  methods: {
+    _setFormContext(ctx) {
+      // Store rules as instance property to preserve function references
+      this._formRulesRef = ctx.rules || {};
+      this.setData({
+        _formSize: ctx.size,
+        _formDisabled: ctx.disabled,
+        _formLabelPlacement: ctx.labelPlacement,
+        _formLabelWidth: ctx.labelWidth,
+        _formShowFeedback: ctx.showFeedback,
+        _formShowLabel: ctx.showLabel,
+        _formShowRequireMark: ctx.showRequireMark,
+        _formRequireMarkPlacement: ctx.requireMarkPlacement || 'right',
+        _formModel: ctx.model,
+      });
+      this._updateIsRequired();
+      this._updateFieldChildren();
+    },
+
+    _updateFieldChildren() {
+      const size = this.data.size || this.data._formSize;
+      const disabled = this.data._formDisabled;
+      const ctx = { size, disabled };
+      FIELD_PATHS.forEach((type) => {
+        const nodes = this.getRelationNodes(type);
+        if (nodes) {
+          nodes.forEach((node) => {
+            node._setFormItemContext(ctx);
+          });
+        }
+      });
+    },
+
+    _updateIsRequired() {
+      if (this.data.required) {
+        this.setData({ _isRequired: true });
+        return;
+      }
+      const rules = this._getRules();
+      let isRequired = false;
+      for (let i = 0; i < rules.length; i++) {
+        if (rules[i].required) {
+          isRequired = true;
+          break;
+        }
+      }
+      this.setData({ _isRequired: isRequired });
+    },
+
+    /**
+     * Set rules with custom validator functions on this form-item.
+     * Use this instead of the rule property when rules contain functions.
+     */
+    setRule(rule) {
+      this._rule = rule || null;
+      this._updateIsRequired();
+    },
+
+    _getRules() {
+      const rules = [];
+      // Form-level rules (from instance ref, preserves function references)
+      const path = this.data.path;
+      const formRulesObj = this._formRulesRef || {};
+      if (path && formRulesObj[path]) {
+        const formRules = formRulesObj[path];
+        rules.push(...(Array.isArray(formRules) ? formRules : [formRules]));
+      }
+      // Component-level rules (setRule > property)
+      const itemRule = this._rule || this.data.rule;
+      if (itemRule) {
+        rules.push(...(Array.isArray(itemRule) ? itemRule : [itemRule]));
+      }
+      // Auto-add required rule
+      if (this.data.required) {
+        let hasRequired = false;
+        for (let i = 0; i < rules.length; i++) {
+          if (rules[i].required) {
+            hasRequired = true;
+            break;
+          }
+        }
+        if (!hasRequired) {
+          rules.unshift({ required: true, message: '此项为必填' });
+        }
+      }
+      return rules;
+    },
+
+    _getValue() {
+      const path = this.data.path;
+      if (path && this.data._formModel) {
+        return this.data._formModel[path];
+      }
+      return undefined;
+    },
+
+    /**
+     * Public validate method (naive-ui style).
+     * Usage:
+     *   formItem.validate()
+     *   formItem.validate({ trigger: 'blur' })
+     *   formItem.validate({ trigger: 'password-input' })
+     * @param {Object} [options]
+     * @param {String} [options.trigger] - filter rules by trigger
+     * @returns {{ valid: Boolean, errors: Array }}
+     */
+    validate(options) {
+      const opts = options || {};
+      return this._validate(opts.trigger);
+    },
+
+    _validate(trigger) {
+      // Manual status overrides
+      if (this.data.validationStatus) {
+        return {
+          valid: this.data.validationStatus !== 'error',
+          errors: this.data.feedback ? [{ message: this.data.feedback }] : [],
+        };
+      }
+      const rules = this._getRules();
+      const value = this._getValue();
+      const result = validator.validateField(value, rules, {
+        trigger,
+        first: this.data.first,
+      });
+      this.setData({
+        _validationStatus: result.valid ? '' : 'error',
+        _validationMessage: result.errors.length > 0 ? result.errors[0].message : '',
+      });
+      return result;
+    },
+
+    _restoreValidation() {
+      this.setData({
+        _validationStatus: '',
+        _validationMessage: '',
+      });
+    },
+
+    /**
+     * Public alias for _restoreValidation.
+     */
+    restoreValidation() {
+      this._restoreValidation();
+    },
+
+    _handleFieldChange() {
+      this._validate('input');
+    },
+
+    _handleFieldBlur() {
+      this._validate('blur');
+    },
+  },
+});

package/miniprogram_dist/components/form-item/form-item.json

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