vxe-pc-ui 4.17.13 → 4.17.15

package/packages/backtop/src/backtop.ts

@@ -211,11 +211,8 @@ export default defineVxeComponent({
           return
         }
         if (XEUtils.isString(target)) {
-          const tEl = document.querySelector<HTMLElement>(target)
-          if (!tEl) {
-            errLog('vxe.error.errProp', [`target=${target}`, 'body'])
-          }
           const { targetEl } = internalData
+          const tEl = document.querySelector<HTMLElement>(target) || document.body
           if (targetEl !== tEl) {
             removeScrollEvent()
             internalData.targetEl = tEl

package/packages/input/src/input.ts

@@ -918,6 +918,8 @@ export default defineVxeComponent({
       const value = inputValue
       if (!inpImmediate) {
         handleChange(value, evnt)
+      } else {
+        updateDomValue()
       }
       afterCheckValue()
       if (!reactData.visiblePanel) {
@@ -2703,6 +2705,7 @@ export default defineVxeComponent({
           'is--prefix': !!prefix,
           'is--suffix': !!suffix,
           'is--visible': visiblePanel,
+          'is--clear': isClearable,
           'is--count': isWordCount,
           'is--disabled': isDisabled,
           'is--active': isActivated,

package/packages/textarea/src/textarea.ts

@@ -1,7 +1,7 @@
 import { h, ref, Ref, computed, nextTick, watch, PropType, reactive, inject, onMounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { getConfig, getI18n, createEvent, useSize } from '../../ui'
+import { getConfig, getIcon, getI18n, createEvent, useSize, renderEmptyElement } from '../../ui'
 import { getFuncText } from '../../ui/src/utils'
 import { createComponentLog } from '../../ui/src/log'
 
@@ -37,6 +37,10 @@ export default defineVxeComponent({
       type: Boolean as PropType<VxeTextareaPropTypes.Disabled>,
       default: null
     },
+    clearable: {
+      type: Boolean as PropType<VxeTextareaPropTypes.Clearable>,
+      default: () => getConfig().textarea.clearable
+    },
     placeholder: String as PropType<VxeTextareaPropTypes.Placeholder>,
     maxLength: [String, Number] as PropType<VxeTextareaPropTypes.MaxLength>,
     trim: {
@@ -53,6 +57,10 @@ export default defineVxeComponent({
     },
     showWordCount: Boolean as PropType<VxeTextareaPropTypes.ShowWordCount>,
     countMethod: Function as PropType<VxeTextareaPropTypes.CountMethod>,
+    autoFocus: {
+      type: Boolean as PropType<VxeTextareaPropTypes.AutoFocus>,
+      default: null
+    },
     /**
      * 已废弃，被 auto-size 替换
      * @deprecated
@@ -86,6 +94,7 @@ export default defineVxeComponent({
     'change',
     'focus',
     'blur',
+    'clear',
     'lazy-change'
   ] as VxeTextareaEmits,
   setup (props, context) {
@@ -268,7 +277,7 @@ export default defineVxeComponent({
       reactData.inputValue = value
       emit('update:modelValue', value)
       if (XEUtils.toValueString(props.modelValue) !== value) {
-        textareaMethods.dispatchEvent('change', { value }, evnt)
+        dispatchEvent('change', { value }, evnt)
         // 自动更新校验状态
         if ($xeForm && formItemInfo) {
           $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)
@@ -276,6 +285,15 @@ export default defineVxeComponent({
       }
     }
 
+    const clearValueEvent = (evnt: Event, value: VxeTextareaPropTypes.ModelValue) => {
+      const { autoFocus } = props
+      if (autoFocus || autoFocus === null) {
+        focus()
+      }
+      handleChange('', evnt)
+      dispatchEvent('clear', { value }, evnt)
+    }
+
     const inputEvent = (evnt: InputEvent) => {
       const { immediate } = props
       const textElem = evnt.target as HTMLTextAreaElement
@@ -308,6 +326,8 @@ export default defineVxeComponent({
       const { inputValue } = reactData
       if (!immediate) {
         handleChange(inputValue, evnt)
+      } else {
+        updateDomValue()
       }
       dispatchEvent('blur', { value: inputValue }, evnt)
     }
@@ -329,7 +349,7 @@ export default defineVxeComponent({
     Object.assign($xeTextarea, textareaMethods)
 
     const renderVN = () => {
-      const { className, inputClassName, resize, autosize, autoSize, showWordCount, countMethod, rows, cols } = props
+      const { className, inputClassName, resize, autosize, autoSize, showWordCount, countMethod, rows, cols, clearable } = props
       const { inputValue } = reactData
       const vSize = computeSize.value
       const isDisabled = computeIsDisabled.value
@@ -357,8 +377,10 @@ export default defineVxeComponent({
           'is--autosize': autosize || autoSize,
           'is--count': showWordCount,
           'is--disabled': isDisabled,
+          'is-clear': clearable,
           'is--rows': !XEUtils.eqNull(rows),
-          'is--cols': !XEUtils.eqNull(cols)
+          'is--cols': !XEUtils.eqNull(cols),
+          'show--clear': clearable && !isDisabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
         }],
         spellcheck: false
       }, [
@@ -385,13 +407,29 @@ export default defineVxeComponent({
           onFocus: triggerEvent,
           onBlur: blurEvent
         }),
-        showWordCount
-          ? h('span', {
-            class: ['vxe-textarea--count', {
-              'is--error': isCountError
-            }]
-          }, countMethod ? `${countMethod({ value: inputValue })}` : `${inputCount}${inpMaxLength ? `/${inpMaxLength}` : ''}`)
-          : null
+        clearable || showWordCount
+          ? h('div', {
+            class: 'vxe-textarea--suffix'
+          }, [
+            clearable
+              ? h('div', {
+                class: 'vxe-textarea--clear-icon',
+                onClick: clearValueEvent
+              }, [
+                h('i', {
+                  class: getIcon().TEXTAREA_CLEAR
+                })
+              ])
+              : renderEmptyElement($xeTextarea),
+            showWordCount
+              ? h('span', {
+                class: ['vxe-textarea--count', {
+                  'is--error': isCountError
+                }]
+              }, countMethod ? `${countMethod({ value: inputValue })}` : `${inputCount}${inpMaxLength ? `/${inpMaxLength}` : ''}`)
+              : renderEmptyElement($xeTextarea)
+          ])
+          : renderEmptyElement($xeTextarea)
       ])
     }
 

package/packages/ui/index.ts

@@ -550,6 +550,9 @@ setIcon({
   CHECKBOX_UNCHECKED: iconPrefix + 'checkbox-unchecked',
   CHECKBOX_DISABLED_UNCHECKED: iconPrefix + 'checkbox-unchecked-fill',
 
+  // textarea
+  TEXTAREA_CLEAR: iconPrefix + 'error-circle-fill',
+
   // input
   INPUT_CLEAR: iconPrefix + 'error-circle-fill',
   INPUT_SEARCH: iconPrefix + 'search',

package/styles/components/input.scss

@@ -110,7 +110,7 @@
   &.show--clear {
     &:hover {
       .vxe-input--clear-icon {
-        display: block;
+        visibility: visible;
       }
     }
   }
@@ -158,7 +158,7 @@
   cursor: pointer;
 }
 .vxe-input--clear-icon {
-  display: none;
+  visibility: hidden;
   &:hover {
     color: var(--vxe-ui-font-color);
   }

package/styles/components/textarea.scss

@@ -43,6 +43,21 @@
   }
 }
 
+.vxe-textarea {
+  &.is-clear {
+    .vxe-textarea--inner {
+      padding-right: 2em;
+    }
+  }
+  &.show--clear {
+    &:hover {
+      .vxe-textarea--clear-icon {
+        visibility: visible;
+      }
+    }
+  }
+}
+
 .vxe-textarea--inner,
 .vxe-textarea--autosize,
 .vxe-textarea--content {
@@ -67,7 +82,7 @@
 
 .vxe-textarea--count {
   position: absolute;
-  bottom: 0.2em;
+  bottom: 0.3em;
   right: 1.4em;
   padding-left: 0.2em;
   color: var(--vxe-ui-input-count-color);
@@ -77,6 +92,21 @@
   }
 }
 
+.vxe-textarea--clear-icon {
+  position: absolute;
+  top: 0.3rem;
+  right: 1.4em;
+  color: var(--vxe-ui-input-placeholder-color);
+  cursor: pointer;
+  visibility: hidden;
+  &:hover {
+    color: var(--vxe-ui-font-color);
+  }
+  &:active {
+    color: var(--vxe-ui-font-primary-color);
+  }
+}
+
 .vxe-textarea,
 .vxe-textarea--autosize {
   font-size: var(--vxe-ui-font-size-default);

package/types/components/grid.d.ts

@@ -201,7 +201,7 @@ export namespace VxeGridPropTypes {
      */
     ajax?: {
       /**
-       * 查询列表数据之前方法，用与在查询之前执行的方法
+       * 查询列表数据之前方法，可以返回 false 阻止本次操作
        */
       beforeQuery?(params: ProxyAjaxQueryParams<D>, ...args: any[]): boolean | Promise<boolean>
       /**
@@ -222,7 +222,7 @@ export namespace VxeGridPropTypes {
       queryError?(params: ProxyAjaxQueryParams<D> & ProxyAjaxResponseParams): void
 
       /**
-       * 查询全量数据之前方法，用与在查询之前执行的方法
+       * 查询全量数据之前方法，可以返回 false 阻止本次操作
        */
       beforeQueryAll?(params: ProxyAjaxQueryAllParams<D>): boolean | Promise<boolean>
       /**
@@ -243,7 +243,7 @@ export namespace VxeGridPropTypes {
       queryAllError?(params: ProxyAjaxQueryAllParams<D> & ProxyAjaxResponseParams): void
 
       /**
-       * 查询表尾数据之前方法，用与在查询之前执行的方法
+       * 查询表尾数据之前方法，可以返回 false 阻止本次操作
        */
       beforeQueryFooter?(params: ProxyAjaxQueryFooterParams<D>, ...args: any[]): boolean | Promise<boolean>
       /**
@@ -264,7 +264,7 @@ export namespace VxeGridPropTypes {
       queryFooterError?(params: ProxyAjaxQueryFooterParams<D> & ProxyAjaxResponseParams): void
 
       /**
-       * 删除列表数据之前方法，用与在删除之前执行的方法
+       * 删除列表数据之前方法，可以返回 false 阻止本次操作
        */
       beforeDelete?(params: ProxyAjaxDeleteParams<D>, ...args: any[]): boolean | Promise<boolean>
       /**
@@ -285,7 +285,7 @@ export namespace VxeGridPropTypes {
       deleteError?(params: ProxyAjaxDeleteParams<D> & ProxyAjaxResponseParams): void
 
       /**
-       * 保存数据之前方法，用与在保存之前执行的方法
+       * 保存数据之前方法，可以返回 false 阻止本次操作
        */
       beforeSave?(params: ProxyAjaxSaveParams<D>, ...args: any[]): boolean | Promise<boolean>
       /**

package/types/components/textarea.d.ts

@@ -33,6 +33,8 @@ export namespace VxeTextareaPropTypes {
   export type Readonly = boolean
   export type Editable = boolean
   export type Disabled = boolean
+  export type Clearable = boolean
+  export type AutoFocus = boolean
   export type Placeholder = string
   export type MaxLength = string | number | null
   export type Trim = boolean
@@ -94,6 +96,8 @@ export type VxeTextareaProps = {
    * 是否禁用
    */
   disabled?: VxeTextareaPropTypes.Disabled
+  clearable?: VxeTextareaPropTypes.Clearable
+  autoFocus?: VxeTextareaPropTypes.AutoFocus
   /**
    * 当值为空时，显示的占位符
    */
@@ -180,6 +184,7 @@ export type VxeTextareaEmits = [
   'change',
   'focus',
   'blur',
+  'clear',
   'lazy-change'
 ]
 

package/types/ui/global-icon.d.ts

@@ -106,6 +106,9 @@ declare module '@vxe-ui/core' {
     CHECKBOX_UNCHECKED?: string
     CHECKBOX_DISABLED_UNCHECKED?: string
 
+    // textarea
+    TEXTAREA_CLEAR?: string
+
     // input
     INPUT_CLEAR?: string
     INPUT_SEARCH?: string