feat(pro:textarea): add IxProTextarea compoent (#1074)

refactor(comp:textarea): refactor and export useAutoRows

packages/components/input/index.ts

@@ -17,3 +17,4 @@ export type { InputInstance, InputComponent, InputPublicProps as InputProps } fr
 
 export { commonProps as ɵCommonProps } from './src/types'
 export { useInput as ɵUseInput } from './src/useInput'
+export type { InputContext as ɵInputContext } from './src/useInput'

packages/components/input/src/Input.tsx

@@ -39,7 +39,7 @@ export default defineComponent({
       handleCompositionEnd,
       handleClear,
       syncValue,
-    } = useInput(props, config)
+    } = useInput<HTMLInputElement>(props, config)
 
     expose({ focus, blur })
 

packages/components/input/src/useInput.ts

@@ -6,7 +6,6 @@
  */
 
 import type { CommonProps } from './types'
-import type { InputConfig, TextareaConfig } from '@idux/components/config'
 import type { ComputedRef, Ref } from 'vue'
 
 import { computed, nextTick, ref, toRaw, watch } from 'vue'
@@ -22,6 +21,7 @@ export interface InputContext<T extends HTMLInputElement | HTMLTextAreaElement>
   clearVisible: ComputedRef<boolean>
   clearable: ComputedRef<boolean>
   isFocused: Ref<boolean>
+  isComposing: Ref<boolean>
 
   focus: (options?: FocusOptions) => void
   blur: () => void
@@ -35,10 +35,10 @@ export interface InputContext<T extends HTMLInputElement | HTMLTextAreaElement>
   syncValue: () => void
 }
 
-export function useInput(
+export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement | HTMLTextAreaElement>(
   props: CommonProps,
-  config: InputConfig | TextareaConfig,
-): InputContext<HTMLInputElement | HTMLTextAreaElement> {
+  config: { clearable: boolean; clearIcon: string },
+): InputContext<T> {
   const { accessor, control } = useAccessorAndControl()
   useFormItemRegister(control)
 
@@ -57,11 +57,11 @@ export function useInput(
     callEmit(props.onBlur, evt)
 
     if (props.trim) {
-      setValue((evt.target as HTMLInputElement).value.trim())
+      setValue((evt.target as T).value.trim())
     }
   }
 
-  const { elementRef, focus, blur } = useFormFocusMonitor<HTMLInputElement | HTMLTextAreaElement>({
+  const { elementRef, focus, blur } = useFormFocusMonitor<T>({
     handleFocus,
     handleBlur,
   })
@@ -97,7 +97,7 @@ export function useInput(
       return
     }
 
-    setValue((evt.target as HTMLInputElement).value)
+    setValue((evt.target as T).value)
   }
 
   const handleCompositionStart = (evt: CompositionEvent) => {
@@ -124,6 +124,7 @@ export function useInput(
     clearIcon,
     clearVisible,
     isFocused,
+    isComposing,
 
     focus,
     blur,

packages/components/textarea/__tests__/__snapshots__/textarea.spec.ts.snap

@@ -2,10 +2,10 @@
 
 exports[`Textarea > render work 1`] = `"<span class=\\"ix-textarea ix-textarea-md\\" data-count=\\"\\"><textarea class=\\"ix-textarea-inner\\" style=\\"resize: vertical;\\"></textarea><!----></span>"`;
 
-exports[`Textarea > resize and autoRows work 1`] = `"<span class=\\"ix-textarea ix-textarea-md\\" data-count=\\"\\"><textarea class=\\"ix-textarea-inner\\" style=\\"resize: none;\\"></textarea><!----></span>"`;
+exports[`Textarea > resize and autoRows work 1`] = `"<span class=\\"ix-textarea ix-textarea-md\\" data-count=\\"\\"><textarea class=\\"ix-textarea-inner\\" style=\\"resize: none; height: 0px; overflow: hidden;\\"></textarea><!----></span>"`;
 
-exports[`Textarea > resize and autoRows work 2`] = `"<span class=\\"ix-textarea ix-textarea-md\\" data-count=\\"\\"><textarea class=\\"ix-textarea-inner\\" style=\\"resize: none;\\"></textarea><!----></span>"`;
+exports[`Textarea > resize and autoRows work 2`] = `"<span class=\\"ix-textarea ix-textarea-md\\" data-count=\\"\\"><textarea class=\\"ix-textarea-inner\\" style=\\"resize: none; height: 0px; overflow: hidden;\\"></textarea><!----></span>"`;
 
-exports[`Textarea > resize and autoRows work 3`] = `"<span class=\\"ix-textarea ix-textarea-md\\" data-count=\\"\\"><textarea class=\\"ix-textarea-inner\\" style=\\"resize: none;\\"></textarea><!----></span>"`;
+exports[`Textarea > resize and autoRows work 3`] = `"<span class=\\"ix-textarea ix-textarea-md\\" data-count=\\"\\"><textarea class=\\"ix-textarea-inner\\" style=\\"resize: none; height: 0px; overflow: hidden; max-height: -12px;\\"></textarea><!----></span>"`;
 
-exports[`Textarea > resize and autoRows work 4`] = `"<span class=\\"ix-textarea ix-textarea-md\\" data-count=\\"\\"><textarea class=\\"ix-textarea-inner\\" style=\\"resize: none;\\"></textarea><!----></span>"`;
+exports[`Textarea > resize and autoRows work 4`] = `"<span class=\\"ix-textarea ix-textarea-md\\" data-count=\\"\\"><textarea class=\\"ix-textarea-inner\\" style=\\"resize: none; height: 0px; overflow: hidden; max-height: -12px;\\"></textarea><!----></span>"`;

packages/components/textarea/index.ts

@@ -13,10 +13,16 @@ const IxTextarea = Textarea as unknown as TextareaComponent
 
 export { IxTextarea }
 
+export { getBoxSizingData as ɵGetBoxSizingData } from './src/utils/getBoxSizingData'
+export { measureTextarea as ɵMeasureTextarea } from './src/utils/measureTextarea'
+export { useLineHeight as ɵUseLineHeight } from './src/composables/useLineHeight'
+export { useAutoRows as ɵUseAutoRows } from './src/composables/useAutoRows'
+
 export type {
   TextareaInstance,
   TextareaComponent,
   TextareaPublicProps as TextareaProps,
   TextareaAutoRows,
   TextareaResize,
 } from './src/types'
+export type { BoxSizingData as ɵBoxSizingData } from './src/utils/getBoxSizingData'

packages/components/textarea/src/Textarea.tsx

@@ -5,15 +5,15 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { type Ref, type StyleValue, computed, defineComponent, normalizeClass, onMounted } from 'vue'
+import { type Ref, type StyleValue, computed, defineComponent, normalizeClass, onMounted, watch } from 'vue'
 
 import { type FormAccessor } from '@idux/cdk/forms'
 import { type TextareaConfig, useGlobalConfig } from '@idux/components/config'
 import { IxIcon } from '@idux/components/icon'
 import { ɵUseInput } from '@idux/components/input'
 
+import { useAutoRows } from './composables/useAutoRows'
 import { type TextareaProps, textareaProps } from './types'
-import { useAutoRows } from './useAutoRows'
 
 export default defineComponent({
   name: 'IxTextarea',
@@ -31,6 +31,7 @@ export default defineComponent({
       clearIcon,
       clearVisible,
       isFocused,
+      isComposing,
 
       focus,
       blur,
@@ -44,10 +45,6 @@ export default defineComponent({
 
     expose({ focus, blur })
 
-    onMounted(() => {
-      syncValue()
-    })
-
     const classes = computed(() => {
       const { showCount = config.showCount, size = config.size } = props
       const prefixCls = mergedPrefixCls.value
@@ -73,7 +70,18 @@ export default defineComponent({
     })
     const textareaStyle = computed(() => ({ resize: resize.value }))
 
-    useAutoRows(elementRef as Ref<HTMLTextAreaElement>, autoRows, accessor)
+    const { resizeToFitContent } = useAutoRows(elementRef as Ref<HTMLTextAreaElement>, autoRows)
+    onMounted(() => {
+      syncValue()
+      watch(() => accessor.value, resizeToFitContent, { immediate: true })
+    })
+
+    const _handleInput = (evt: Event) => {
+      handleInput(evt)
+      if (isComposing.value) {
+        resizeToFitContent()
+      }
+    }
 
     return () => {
       const { class: className, style, ...rest } = attrs
@@ -87,7 +95,7 @@ export default defineComponent({
             style={textareaStyle.value}
             disabled={accessor.disabled}
             readonly={props.readonly}
-            onInput={handleInput}
+            onInput={_handleInput}
             onCompositionstart={handleCompositionStart}
             onCompositionend={handleCompositionEnd}
           />