misp-ui-library-test 0.0.1

package/src/packages/form/src/form-item.vue

@@ -0,0 +1,464 @@
+<template>
+  <div
+    class="ui-form-item"
+    :class="[
+      {
+        'ui-form-item--feedback': uiForm && uiForm.statusIcon,
+        'is-error': validateState === 'error',
+        'is-validating': validateState === 'validating',
+        'is-success': validateState === 'success',
+        'is-required': isRequired || required,
+        'is-no-asterisk': uiForm && uiForm.hideRequiredAsterisk,
+      },
+      sizeClass ? 'ui-form-item--' + sizeClass : '',
+    ]"
+  >
+    <label-wrap :is-auto-width="labelStyle && labelStyle.width === 'auto'" :update-all="form.labelWidth === 'auto'">
+      <label :for="labelFor" class="ui-form-item__label" :style="labelStyle" v-if="label || $slots.label">
+        <slot name="label">{{ label + form.labelSuffix }}</slot>
+      </label>
+    </label-wrap>
+    <div class="ui-form-item__content" :style="contentStyle">
+      <slot></slot>
+      <transition name="ui-zoom-in-top">
+        <slot v-if="validateState === 'error' && showMessage && form.showMessage" name="error" :error="validateMessage">
+          <div
+            class="ui-form-item__error"
+            :class="{
+              'ui-form-item__error--inline': typeof inlineMessage === 'boolean' ? inlineMessage : (uiForm && uiForm.inlineMessage) || false,
+            }"
+          >
+            {{ validateMessage }}
+          </div>
+        </slot>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import LabelWrap from './label-wrap.vue'
+
+import emitter from '../../../mixins/emitter.js'
+import AsyncValidator from '../../../utils/async-validator/index.js'
+import { merge, noop, getPropByPath } from '../../../utils/lodash/index.js'
+
+/**
+ * UiFormItem 组件
+ * 表单域组件，用于包裹表单控件，提供标签、校验状态显示、错误提示等功能。
+ * 通常作为 UiForm 的子组件使用。
+ */
+export default {
+  name: 'UiFormItem',
+  components: { LabelWrap },
+  mixins: [emitter],
+  props: {
+    /**
+     * 标签文本
+     */
+    label: String,
+    /**
+     * 标签宽度，如 '80px'
+     */
+    labelWidth: String,
+    /**
+     * 字段属性名，对应 model 中的键值，用于校验和取值
+     */
+    prop: String,
+    /**
+     * 是否必填，如果未设置，则根据 rules 判断
+     */
+    required: {
+      type: Boolean,
+      default: undefined,
+    },
+    /**
+     * 表单验证规则，可以是对象或数组
+     */
+    rules: [Object, Array],
+    /**
+     * 错误信息，当设置时，组件将显示为错误状态
+     */
+    error: String,
+    /**
+     * 表单域验证状态，可选值：'success' | 'error' | 'validating'
+     */
+    validateStatus: String,
+    /**
+     * label 内部 for 属性，默认使用 prop
+     */
+    for: String,
+    /**
+     * 是否行内显示错误信息，默认为父级 form 的 inlineMessage 值
+     */
+    inlineMessage: {
+      type: [String, Boolean],
+      default: '',
+    },
+    /**
+     * 是否显示错误信息
+     */
+    showMessage: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * 尺寸，可选值：'medium' | 'small' | 'mini'，默认继承 form 的 size
+     */
+    size: String,
+  },
+  data: () => ({
+    /**
+     * 当前校验状态: '' | 'success' | 'error' | 'validating'
+     */
+    validateState: '',
+    /**
+     * 校验错误信息
+     */
+    validateMessage: '',
+    /**
+     * 是否禁用校验，用于 resetField 时避免触发校验
+     */
+    validateDisabled: false,
+    /**
+     * 校验器实例
+     */
+    validator: {},
+    /**
+     * 是否嵌套在另一个 UiFormItem 中
+     */
+    isNested: false,
+    /**
+     * 计算后的标签宽度，用于 auto 宽度场景
+     */
+    computedLabelWidth: '',
+  }),
+  inject: ['uiForm'],
+  provide() {
+    return {
+      uiFormItem: this,
+    }
+  },
+  filters: {},
+  computed: {
+    /**
+     * label 的 for 属性值
+     * @returns {string}
+     */
+    labelFor() {
+      return this.for || this.prop
+    },
+    /**
+     * label 的样式对象
+     * @returns {object}
+     */
+    labelStyle() {
+      const ret = {}
+      if (this.form.labelPosition === 'top') return ret
+      const labelWidth = this.labelWidth || this.form.labelWidth
+      if (labelWidth) {
+        ret.width = labelWidth
+      }
+      return ret
+    },
+    /**
+     * 内容区域的样式对象，主要用于处理 label 宽度带来的 margin
+     * @returns {object}
+     */
+    contentStyle() {
+      const ret = {}
+      const label = this.label
+      if (this.form.labelPosition === 'top' || this.form.inline) return ret
+      if (!label && !this.labelWidth && this.isNested) return ret
+      const labelWidth = this.labelWidth || this.form.labelWidth
+      if (labelWidth === 'auto') {
+        if (this.labelWidth === 'auto') {
+          ret.marginLeft = this.computedLabelWidth
+        } else if (this.form.labelWidth === 'auto') {
+          ret.marginLeft = this.uiForm.autoLabelWidth
+        }
+      } else {
+        ret.marginLeft = labelWidth
+      }
+      return ret
+    },
+    /**
+     * 获取父级 UiForm 实例
+     * @returns {object} UiForm 实例
+     */
+    form() {
+      let parent = this.$parent
+      let parentName = parent.$options.name
+      while (parentName !== 'UiForm') {
+        if (parentName === 'UiFormItem') {
+          this.isNested = true
+        }
+        parent = parent.$parent
+        parentName = parent.$options.name
+      }
+      return parent
+    },
+    /**
+     * 获取当前字段在 model 中的值
+     * @returns {*}
+     */
+    fieldValue() {
+      const model = this.form.model
+      if (!model || !this.prop) return
+
+      let path = this.prop
+      if (~path.indexOf(':')) {
+        path = path.replace(/:/, '.')
+      }
+      return getPropByPath(model, path).v
+    },
+    /**
+     * 判断当前字段是否必填（基于 rules）
+     * @returns {boolean}
+     */
+    isRequired() {
+      let rules = this.getRules()
+      let isRequired = false
+
+      if (rules && rules.length) {
+        rules.every((rule) => {
+          if (rule.required) {
+            isRequired = true
+            return false
+          }
+          return true
+        })
+      }
+      return isRequired
+    },
+    /**
+     * 获取父级 Form 的尺寸
+     * @returns {string}
+     */
+    _formSize() {
+      return this.uiForm.size
+    },
+    /**
+     * 获取当前 Item 的尺寸，优先使用自身 size，其次继承 form
+     * @returns {string}
+     */
+    uiFormItemSize() {
+      return this.size || this._formSize
+    },
+    /**
+     * 获取尺寸对应的 class 后缀
+     * @returns {string}
+     */
+    sizeClass() {
+      return this.uiFormItemSize || (this.$ELEMENT || {}).size
+    },
+  },
+  watch: {
+    error: {
+      /**
+       * 监听外部传入的 error 属性，更新校验状态和信息
+       * @param {string} value - 错误信息
+       */
+      handler(value) {
+        this.validateMessage = value
+        this.validateState = value ? 'error' : ''
+        this.notifyFormStatusChange()
+      },
+      immediate: true,
+    },
+    /**
+     * 监听外部传入的 validateStatus 属性
+     * @param {string} value - 校验状态
+     */
+    validateStatus(value) {
+      this.validateState = value
+      this.notifyFormStatusChange()
+    },
+    /**
+     * 监听 rules 变化，如果 rules 清空且 required 未定义，则清除校验状态
+     * @param {Array|Object} value - 新的规则
+     */
+    rules(value) {
+      if ((!value || value.length === 0) && this.required === undefined) {
+        this.clearValidate()
+      }
+    },
+  },
+  created() {},
+  mounted() {
+    if (this.prop) {
+      // 向父级 Form 注册当前字段
+      this.dispatch('UiForm', 'ui.form.addField', [this])
+      // 保存初始值，用于重置
+      let initialValue = this.fieldValue
+      if (Array.isArray(initialValue)) {
+        initialValue = [].concat(initialValue)
+      }
+      Object.defineProperty(this, 'initialValue', {
+        value: initialValue,
+      })
+      // 添加校验事件监听
+      this.addValidateEvents()
+    }
+  },
+  activated() {},
+  beforeDestroy() {
+    // 从父级 Form 移除当前字段
+    this.dispatch('UiForm', 'ui.form.removeField', [this])
+  },
+  methods: {
+    /**
+     * 通知父级 Form 状态已改变，需要重新计算完成度
+     */
+    notifyFormStatusChange() {
+      if (this.uiForm && this.uiForm.notifyStatusChange) {
+        // 使用 nextTick 确保状态已更新
+        this.$nextTick(() => {
+          this.uiForm.notifyStatusChange()
+        })
+      }
+    },
+    /**
+     * 执行字段校验
+     * @param {string} trigger - 触发校验的事件类型，如 'blur', 'change'
+     * @param {function} callback - 校验完成后的回调函数 (errorMessage, invalidFields) => void
+     * @returns {boolean|undefined} 如果没有规则且非必填，返回 true；否则异步执行
+     */
+    validate(trigger, callback = noop) {
+      this.validateDisabled = false
+      const rules = this.getFilteredRule(trigger)
+      if ((!rules || rules.length === 0) && this.required === undefined) {
+        callback()
+        return true
+      }
+
+      this.validateState = 'validating'
+      const descriptor = {}
+      if (rules && rules.length > 0) {
+        rules.forEach((rule) => {
+          delete rule.trigger
+        })
+      }
+      descriptor[this.prop] = rules
+      const validator = new AsyncValidator(descriptor)
+      const model = {}
+      model[this.prop] = this.fieldValue
+
+      validator.validate(model, { firstFields: true }, (errors, invalidFields) => {
+        this.validateState = !errors ? 'success' : 'error'
+        this.validateMessage = errors ? errors[0].message : ''
+        this.notifyFormStatusChange()
+        callback(this.validateMessage, invalidFields)
+        this.uiForm && this.uiForm.$emit('validate', this.prop, !errors, this.validateMessage || null)
+      })
+    },
+    /**
+     * 清除校验状态和错误信息
+     */
+    clearValidate() {
+      this.validateState = ''
+      this.validateMessage = ''
+      this.validateDisabled = false
+      this.notifyFormStatusChange()
+    },
+    /**
+     * 重置字段值和校验状态到初始值
+     */
+    resetField() {
+      this.validateState = ''
+      this.validateMessage = ''
+
+      let model = this.form.model
+      let value = this.fieldValue
+      let path = this.prop
+      if (path.indexOf(':') !== -1) {
+        path = path.replace(/:/, '.')
+      }
+
+      let prop = getPropByPath(model, path)
+      this.validateDisabled = true
+      if (Array.isArray(value)) {
+        prop.o[prop.k] = [].concat(this.initialValue)
+      } else {
+        prop.o[prop.k] = this.initialValue
+      }
+      this.$nextTick(() => {
+        this.validateDisabled = false
+      })
+      // 广播重置事件，针对特定组件如 TimeSelect
+      this.broadcast('UiTimeSelect', 'fieldReset', this.initialValue)
+    },
+    /**
+     * 获取当前字段的校验规则，合并 form.rules、自身 rules 和 required 属性
+     * @returns {Array} 校验规则数组
+     */
+    getRules() {
+      let formRules = this.form.rules
+      const selfRules = this.rules
+      const requiredRule = this.required !== undefined ? { required: !!this.required } : []
+      const prop = getPropByPath(formRules, this.prop || '')
+      formRules = formRules ? prop.o[this.prop || ''] || prop.v : []
+      return [].concat(selfRules || formRules || []).concat(requiredRule)
+    },
+    /**
+     * 根据触发类型过滤校验规则
+     * @param {string} trigger - 触发类型
+     * @returns {Array} 过滤后的规则数组
+     */
+    getFilteredRule(trigger) {
+      const rules = this.getRules()
+      return rules
+        .filter((rule) => {
+          if (!rule.trigger || trigger === '') return true
+          if (Array.isArray(rule.trigger)) {
+            return rule.trigger.indexOf(trigger) > -1
+          } else {
+            return rule.trigger === trigger
+          }
+        })
+        .map((rule) => merge({}, rule))
+    },
+    /**
+     * 字段失去焦点时的处理函数，触发 blur 校验
+     */
+    onFieldBlur() {
+      this.validate('blur')
+    },
+    /**
+     * 字段值变化时的处理函数，触发 change 校验
+     */
+    onFieldChange() {
+      if (this.validateDisabled) {
+        this.validateDisabled = false
+        return
+      }
+      this.validate('change')
+    },
+    /**
+     * 更新计算后的标签宽度
+     * @param {number|string} width - 宽度值
+     */
+    updateComputedLabelWidth(width) {
+      this.computedLabelWidth = width ? `${width}px` : ''
+    },
+    /**
+     * 添加校验事件监听（blur/change）
+     */
+    addValidateEvents() {
+      const rules = this.getRules()
+      if (rules.length || this.required !== undefined) {
+        this.$on('ui.form.blur', this.onFieldBlur)
+        this.$on('ui.form.change', this.onFieldChange)
+      }
+    },
+    /**
+     * 移除所有事件监听
+     */
+    removeValidateEvents() {
+      this.$off()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

package/src/packages/form/src/label-wrap.vue

@@ -0,0 +1,127 @@
+<script>
+/**
+ * UiLabelWrap 标签包裹组件
+ * 用于处理 FormItem 中标签的自动宽度计算和对齐。
+ * 当表单设置为自动标签宽度时，此组件负责计算实际标签宽度，并通过 margin-left 实现视觉上的右对齐或左对齐一致性。
+ * @component UiLabelWrap
+ */
+export default {
+  name: 'UiLabelWrap',
+  components: {},
+  mixins: [],
+  props: {
+    /**
+     * 是否启用自动宽度模式
+     * 如果为 true，组件将计算标签的实际宽度并应用样式以对齐其他标签
+     * @type {Boolean}
+     */
+    isAutoWidth: Boolean,
+
+    /**
+     * 是否更新所有相关组件的标签宽度状态
+     * 如果为 true，当宽度变化时会通知父级 Form 和 FormItem 进行更新
+     * @type {Boolean}
+     */
+    updateAll: Boolean,
+  },
+  data: () => ({
+    /**
+     * 计算得出的标签宽度（像素）
+     * @type {Number}
+     */
+    computedWidth: 0,
+  }),
+  /**
+   * 注入依赖
+   * @property {Object} uiForm - 父级 UiForm 实例
+   * @property {Object} uiFormItem - 父级 UiFormItem 实例
+   */
+  inject: ['uiForm', 'uiFormItem'],
+  filters: {},
+  computed: {},
+  watch: {
+    /**
+     * 监听计算宽度的变化
+     * 当宽度改变且需要全局更新时，注册新的宽度并通知 FormItem 更新
+     * @param {Number} val - 新宽度
+     * @param {Number} oldVal - 旧宽度
+     */
+    computedWidth(val, oldVal) {
+      if (this.updateAll) {
+        this.uiForm.registerLabelWidth(val, oldVal)
+        this.uiFormItem.updateComputedLabelWidth(val)
+      }
+    },
+  },
+  /**
+   * 渲染函数
+   * 根据 isAutoWidth 属性决定渲染方式：
+   * 1. 如果是自动宽度模式，包裹在一个 div 中并计算 marginLeft 以实现对齐
+   * 2. 否则，直接渲染默认插槽内容
+   * @returns {VNode|null} 虚拟节点
+   */
+  render() {
+    const slots = this.$slots.default
+    if (!slots) return null
+    if (this.isAutoWidth) {
+      const autoLabelWidth = this.uiForm ? this.uiForm.autoLabelWidth : this.uiForm?.autoLabelWidth
+      const style = {}
+      if (autoLabelWidth && autoLabelWidth !== 'auto') {
+        const marginLeft = parseInt(autoLabelWidth, 10) - this.computedWidth
+        if (marginLeft) {
+          style.marginLeft = marginLeft + 'px'
+        }
+      }
+      return (
+        <div class="ui-form-item__label-wrap" style={style}>
+          {slots}
+        </div>
+      )
+    } else {
+      return slots[0]
+    }
+  },
+  mounted() {
+    this.updateLabelWidth('update')
+  },
+  updated() {
+    this.updateLabelWidth('update')
+  },
+  beforeDestroy() {
+    this.updateLabelWidth('remove')
+  },
+  methods: {
+    /**
+     * 获取标签元素的实际计算宽度
+     * @returns {Number} 标签宽度（向上取整的像素值）
+     */
+    getLabelWidth() {
+      if (this.$el && this.$el.firstElementChild) {
+        const computedWidth = window.getComputedStyle(this.$el.firstElementChild).width
+        return Math.ceil(parseFloat(computedWidth))
+      } else {
+        return 0
+      }
+    },
+
+    /**
+     * 更新标签宽度状态
+     * @param {'update' | 'remove'} action - 操作类型：'update' 为重新计算宽度，'remove' 为注销宽度
+     */
+    updateLabelWidth(action = 'update') {
+      if (this.$slots.default && this.isAutoWidth && this.$el.firstElementChild) {
+        if (action === 'update') {
+          this.computedWidth = this.getLabelWidth()
+        } else if (action === 'remove') {
+          const formInstance = this.uiForm || this.uiForm
+          if (formInstance) {
+            formInstance.deregisterLabelWidth(this.computedWidth)
+          }
+        }
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>