vxe-pc-ui 3.17.13 → 3.17.15

package/packages/textarea/src/textarea.ts

@@ -1,7 +1,7 @@
 import { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { getConfig, getI18n, createEvent, globalMixins } from '../../ui'
+import { getConfig, getIcon, getI18n, createEvent, globalMixins, renderEmptyElement } from '../../ui'
 import { getFuncText } from '../../ui/src/utils'
 import { createComponentLog } from '../../ui/src/log'
 
@@ -44,6 +44,10 @@ export default /* define-vxe-component start */ 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: {
@@ -60,6 +64,10 @@ export default /* define-vxe-component start */ 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
@@ -316,6 +324,17 @@ export default /* define-vxe-component start */ defineVxeComponent({
         }
       }
     },
+    clearValueEvent (evnt: Event, value: VxeTextareaPropTypes.ModelValue) {
+      const $xeTextarea = this
+      const props = $xeTextarea
+
+      const { autoFocus } = props
+      if (autoFocus || autoFocus === null) {
+        focus()
+      }
+      $xeTextarea.handleChange('', evnt)
+      $xeTextarea.dispatchEvent('clear', { value }, evnt)
+    },
     inputEvent (evnt: InputEvent) {
       const $xeTextarea = this
       const props = $xeTextarea
@@ -372,7 +391,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeTextarea
       const reactData = $xeTextarea.reactData
 
-      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 = $xeTextarea.computeSize
       const isDisabled = $xeTextarea.computeIsDisabled
@@ -400,8 +419,10 @@ export default /* define-vxe-component start */ 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))
         }],
         attrs: {
           spellcheck: false
@@ -437,13 +458,31 @@ export default /* define-vxe-component start */ defineVxeComponent({
             blur: $xeTextarea.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',
+                on: {
+                  click: $xeTextarea.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

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

@@ -25,6 +25,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
@@ -86,6 +88,8 @@ export interface VxeTextareaProps {
    * 是否禁用
    */
   disabled?: VxeTextareaPropTypes.Disabled
+  clearable?: VxeTextareaPropTypes.Clearable
+  autoFocus?: VxeTextareaPropTypes.AutoFocus
   /**
    * 当值为空时，显示的占位符
    */
@@ -172,6 +176,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