xt-element-ui 2.1.21 → 2.1.61

package/src/components/xt-grid-item/index.vue

@@ -12,13 +12,13 @@ export default {
     span: {
       type: Number,
       default: 1,
-      validator: (val) => val > 0
+      validator: (val) => val >= 1
     },
     // 跨行数
     rowSpan: {
       type: Number,
       default: 1,
-      validator: (val) => val > 0
+      validator: (val) => val >= 1
     },
     // 起始列
     start: {

package/src/components/xt-input/index.vue

@@ -3,22 +3,35 @@
     class="xt-input"
     :class="[
       size ? 'xt-input--' + size : '',
-      { 'is-disabled': disabled }
+      { 'is-disabled': disabled },
+      { 'is-error': hasError }
     ]"
   >
     <el-input
       :value="displayValue"
       :placeholder="placeholder"
-      :type="isNumberType ? 'text' : type"
+      :type="inputType"
       :size="size"
       :disabled="disabled"
       :readonly="readonly"
       :style="inputStyle"
+      :maxlength="maxlength"
+      :show-word-limit="showWordLimit"
+      :prefix-icon="prefixIcon"
+      :suffix-icon="suffixIcon"
       @input="handleInput"
       @change="handleChange"
       @focus="handleFocus"
       @blur="handleBlur"
-    />
+      @clear="handleClear"
+    >
+      <template v-if="$slots.prefix" #prefix>
+        <slot name="prefix"></slot>
+      </template>
+      <template v-if="$slots.suffix" #suffix>
+        <slot name="suffix"></slot>
+      </template>
+    </el-input>
   </div>
 </template>
 
@@ -33,7 +46,8 @@ export default {
     },
     type: {
       type: String,
-      default: 'text'
+      default: 'text',
+      validator: (val) => ['text', 'number', 'integer', 'decimal', 'money', 'phone', 'email', 'idcard', 'password', 'textarea'].includes(val)
     },
     size: {
       type: String,
@@ -50,31 +64,87 @@ export default {
     color: {
       type: String,
       default: ''
+    },
+    precision: {
+      type: Number,
+      default: 2,
+      validator: (val) => val >= 0 && val <= 10
+    },
+    min: {
+      type: Number,
+      default: undefined
+    },
+    max: {
+      type: Number,
+      default: undefined
+    },
+    allowNegative: {
+      type: Boolean,
+      default: false
+    },
+    thousandSeparator: {
+      type: Boolean,
+      default: false
+    },
+    maxlength: {
+      type: Number,
+      default: undefined
+    },
+    showWordLimit: {
+      type: Boolean,
+      default: false
+    },
+    prefixIcon: {
+      type: String,
+      default: ''
+    },
+    suffixIcon: {
+      type: String,
+      default: ''
+    },
+    trim: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
     return {
       currentStr: '',
-      isFocused: false
+      isFocused: false,
+      hasError: false
     }
   },
   computed: {
+    inputType() {
+      if (this.type === 'textarea') {
+        return 'textarea'
+      }
+      if (this.type === 'password') {
+        return 'password'
+      }
+      if (this.isNumberType) {
+        return 'text'
+      }
+      return 'text'
+    },
     isNumberType() {
-      return this.type === 'number'
+      return ['number', 'integer', 'decimal', 'money'].includes(this.type)
     },
     displayValue() {
       if (this.isNumberType) {
+        if (this.thousandSeparator && this.currentStr) {
+          return this.formatThousand(this.currentStr)
+        }
         return this.currentStr
       }
       return this.value
     },
     inputStyle() {
+      const style = {}
       if (this.color) {
-        return {
-          '--xt-input-focus-color': this.color
-        }
+        style['--xt-input-focus-color'] = this.color
       }
-      return {}
+      return style
     }
   },
   watch: {
@@ -82,34 +152,141 @@ export default {
       immediate: true,
       handler(val) {
         if (this.isNumberType && !this.isFocused) {
-          this.currentStr = val === null || val === undefined || val === '' ? '' : String(val)
+          if (val === null || val === undefined || val === '') {
+            this.currentStr = ''
+          } else {
+            const strVal = String(val)
+            if (this.thousandSeparator) {
+              this.currentStr = this.parseThousand(strVal)
+            } else {
+              this.currentStr = strVal
+            }
+          }
         }
       }
     }
   },
   methods: {
     isValidNumber(str) {
-      return /^[+-]?\d*\.?\d*$/.test(str)
+      if (!str) return true
+      const negativePattern = this.allowNegative ? '[-+]?' : ''
+      if (this.type === 'integer') {
+        return new RegExp(`^${negativePattern}\\d*$`).test(str)
+      }
+      if (this.type === 'decimal' || this.type === 'number') {
+        if (this.precision === 0) {
+          return new RegExp(`^${negativePattern}\\d*$`).test(str)
+        }
+        return new RegExp(`^${negativePattern}\\d*\\.?\\d{0,${this.precision}}$`).test(str)
+      }
+      if (this.type === 'money') {
+        return new RegExp(`^${negativePattern}\\d*\\.?\\d{0,${this.precision}}$`).test(str)
+      }
+      return true
+    },
+    isValidPhone(str) {
+      return /^1[3-9]\d{0,9}$/.test(str)
+    },
+    isValidEmail(str) {
+      if (!str) return true
+      return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(str)
+    },
+    isValidIdCard(str) {
+      return /^[1-9]\d{0,17}$/.test(str)
+    },
+    formatThousand(str) {
+      if (!str) return ''
+      const parts = str.split('.')
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+      return parts.join('.')
+    },
+    parseThousand(str) {
+      return str.replace(/,/g, '')
+    },
+    parseToNumber(str) {
+      if (!str || str === '+' || str === '-' || str === '.' || str === '+.' || str === '-.' || str === '-.') {
+        return undefined
+      }
+      const num = parseFloat(str)
+      return isNaN(num) ? undefined : num
     },
     handleInput(val) {
+      let inputVal = val
+      
+      if (this.thousandSeparator && this.isNumberType) {
+        inputVal = this.parseThousand(val)
+      }
+
+      if (this.type === 'phone') {
+        inputVal = val.replace(/[^\d]/g, '')
+        if (!this.isValidPhone(inputVal)) {
+          inputVal = inputVal.slice(0, -1)
+        }
+        this.$emit('input', inputVal)
+        return
+      }
+
+      if (this.type === 'idcard') {
+        inputVal = val.replace(/[^\dXx]/g, '')
+        if (!this.isValidIdCard(inputVal)) {
+          inputVal = inputVal.slice(0, -1)
+        }
+        this.$emit('input', inputVal.toUpperCase())
+        return
+      }
+
+      if (this.type === 'email') {
+        if (!this.isValidEmail(inputVal)) {
+          this.hasError = true
+        } else {
+          this.hasError = false
+        }
+        this.$emit('input', inputVal)
+        return
+      }
+
       if (this.isNumberType) {
-        if (this.isValidNumber(val)) {
-          this.currentStr = val
-          const num = this.parseToNumber(val)
+        if (this.isValidNumber(inputVal)) {
+          this.currentStr = inputVal
+          const num = this.parseToNumber(inputVal)
           if (num !== undefined) {
-            this.$emit('input', num)
+            let finalNum = num
+            if (this.min !== undefined && num < this.min) {
+              finalNum = this.min
+              this.currentStr = String(finalNum)
+            }
+            if (this.max !== undefined && num > this.max) {
+              finalNum = this.max
+              this.currentStr = String(finalNum)
+            }
+            this.$emit('input', finalNum)
+            this.hasError = false
+          } else {
+            this.$emit('input', undefined)
           }
         }
       } else {
-        this.$emit('input', val)
+        if (this.trim) {
+          inputVal = inputVal.trim()
+        }
+        this.$emit('input', inputVal)
       }
     },
     handleChange(val) {
+      let changeVal = val
+      
+      if (this.thousandSeparator && this.isNumberType) {
+        changeVal = this.parseThousand(val)
+      }
+
       if (this.isNumberType) {
-        const num = this.parseToNumber(val)
+        const num = this.parseToNumber(changeVal)
         this.$emit('change', num)
       } else {
-        this.$emit('change', val)
+        if (this.trim) {
+          changeVal = changeVal.trim()
+        }
+        this.$emit('change', changeVal)
       }
     },
     handleFocus(e) {
@@ -118,29 +295,48 @@ export default {
     },
     handleBlur(e) {
       this.isFocused = false
+      
       if (this.isNumberType) {
         const num = this.parseToNumber(this.currentStr)
-        this.$emit('blur', num, e)
         if (num !== undefined) {
-          this.currentStr = String(num)
-          this.$emit('input', num)
+          let finalNum = num
+          if (this.precision > 0) {
+            finalNum = Number(num.toFixed(this.precision))
+          }
+          this.currentStr = String(finalNum)
+          this.$emit('input', finalNum)
+          this.$emit('blur', finalNum, e)
+          this.hasError = false
         } else {
           if (this.currentStr !== '') {
             this.currentStr = ''
             this.$emit('input', undefined)
           }
+          this.$emit('blur', undefined, e)
+          this.hasError = false
         }
       } else {
+        if (this.type === 'email') {
+          if (!this.isValidEmail(this.value)) {
+            this.hasError = true
+          }
+        }
         this.$emit('blur', e)
       }
     },
-    parseToNumber(str) {
-      if (!str || str === '+' || str === '-' || str === '.' || str === '+.' || str === '-.' || str === '-.') {
-        return undefined
+    handleClear() {
+      if (this.isNumberType) {
+        this.currentStr = ''
       }
-      const num = parseFloat(str)
-      return isNaN(num) ? undefined : num
+      this.hasError = false
+      this.$emit('input', this.isNumberType ? undefined : '')
+      this.$emit('clear')
+    },
+    reset() {
+      this.currentStr = ''
+      this.hasError = false
+      this.$emit('input', this.isNumberType ? undefined : '')
     }
   }
 }
-</script>
+</script>

package/src/components/xt-input/style/index.scss

@@ -82,3 +82,13 @@
 .xt-input.is-disabled .el-input__inner::placeholder {
   color: var(--xt-input-disabled-text-color);
 }
+
+// error 状态
+.xt-input.is-error .el-input__inner {
+  border-color: var(--xt-color-danger, #f56c6c);
+}
+
+.xt-input.is-error .el-input__inner:focus {
+  border-color: var(--xt-color-danger, #f56c6c);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--xt-color-danger, #f56c6c) 20%, transparent);
+}

package/src/components/xt-layout/ExFieldset.vue

@@ -1,16 +1,16 @@
 <template>
   <fieldset class="exFieldset" :class="[border ? 'is-border' : 'part',type ? `is-${type}`: '',effect?`effect-${effect}`:'' ]">
     <legend class="fix-top legend">
-      <BaseFlexBox class="title" content="between">
+      <XtFlexBox class="title" content="between">
         <slot name="legend">
           {{ legend }}
         </slot>
-      </BaseFlexBox>
+      </XtFlexBox>
     </legend>
     <legend class="fix-top tool" v-if="$slots.tool">
-      <BaseFlexBox content="end" gap="0 5">
+      <XtFlexBox content="end" gap="0 5">
         <slot name="tool"></slot>
-      </BaseFlexBox>
+      </XtFlexBox>
     </legend>
     <div class="field" v-if="$slots.default">
       <slot />

package/src/components/xt-list/index.js

@@ -1,8 +1,8 @@
-import XtList from './index.vue'
-
-XtList.install = function (Vue) {
-  Vue.component(XtList.name, XtList)
-}
-
-export default XtList
+import XtList from './index.vue'
+
+XtList.install = function (Vue) {
+  Vue.component(XtList.name, XtList)
+}
+
+export default XtList
 export { XtList }