diff --git a/packages/components/textarea/src/Textarea.tsx b/packages/components/textarea/src/Textarea.tsx index 605bbb491..040cea907 100644 --- a/packages/components/textarea/src/Textarea.tsx +++ b/packages/components/textarea/src/Textarea.tsx @@ -5,7 +5,7 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import { type Ref, type StyleValue, computed, defineComponent, normalizeClass, onMounted, watch } from 'vue' +import { type StyleValue, computed, defineComponent, normalizeClass, onMounted, watch } from 'vue' import { type FormAccessor } from '@idux/cdk/forms' import { type TextareaConfig, useGlobalConfig } from '@idux/components/config' @@ -41,7 +41,7 @@ export default defineComponent({ handleCompositionEnd, handleClear, syncValue, - } = ɵUseInput(props, config) + } = ɵUseInput(props, config) expose({ focus, blur }) @@ -70,7 +70,7 @@ export default defineComponent({ }) const textareaStyle = computed(() => ({ resize: resize.value })) - const { resizeToFitContent } = useAutoRows(elementRef as Ref, autoRows) + const { resizeToFitContent } = useAutoRows(elementRef, autoRows) onMounted(() => { syncValue() watch(() => accessor.value, resizeToFitContent, { immediate: true }) diff --git a/packages/components/textarea/src/composables/useAutoRows.ts b/packages/components/textarea/src/composables/useAutoRows.ts index 9acdfc806..4119ca61e 100644 --- a/packages/components/textarea/src/composables/useAutoRows.ts +++ b/packages/components/textarea/src/composables/useAutoRows.ts @@ -180,7 +180,7 @@ export function useAutoRows( function reset() { if (initialHeight !== undefined) { - textareaRef.value!.style.height = initialHeight + textareaRef.value && (textareaRef.value.style.height = initialHeight) } } @@ -192,9 +192,14 @@ export function useAutoRows( }, 16) onMounted(() => { - initialHeight = textareaRef.value!.style.height - const watchStopHandlers = [ + watch( + textareaRef, + () => { + textareaRef.value && (initialHeight = textareaRef.value.style.height) + }, + { immediate: true }, + ), watch( autoRows, () => { diff --git a/packages/pro/textarea/src/ProTextarea.tsx b/packages/pro/textarea/src/ProTextarea.tsx index 87d3e5d66..b02284027 100644 --- a/packages/pro/textarea/src/ProTextarea.tsx +++ b/packages/pro/textarea/src/ProTextarea.tsx @@ -162,89 +162,3 @@ function useDataCount(props: ProTextareaProps, config: ProTextareaConfig, valueR return dataCount }) } - -// function useTexarea( -// props: ProTextareaProps, -// config: ProTextareaConfig, -// textareaCompRef: Ref, -// valueRef: Ref, -// setValue: (value: string | undefined) => void, -// ): { -// textareaRef: Ref -// lineHeight: ComputedRef -// boxSizingData: ComputedRef<ɵBoxSizingData> -// isFocused: ComputedRef -// textareaCompProps: ComputedRef -// } { -// const textareaRef = ref() -// const [isFocused, setIsFocused] = useState(false) - -// watch(textareaCompRef, textareaComp => { -// nextTick(() => { -// textareaRef.value = textareaComp?.getTextareaElement() -// }) -// }) - -// const lineHeight = ɵUseLineHeight(textareaRef) -// const boxSizingData = useTextareaBoxSizingData(textareaRef) - -// const textareaCompProps = computed(() => { -// const { -// control, -// clearable = config.clearable, -// clearIcon = config.clearIcon, -// disabled, -// readonly, -// size = config.size, -// trim, - -// onChange, -// onClear, -// onCompositionStart, -// onCompositionEnd, -// onInput, -// onFocus, -// onBlur, -// } = props - -// const handleTextareaCompFocus = (evt: FocusEvent) => { -// callEmit(onFocus, evt) -// setIsFocused(true) -// } -// const handleTextareaCompBlur = (evt: FocusEvent) => { -// callEmit(onBlur, evt) -// setIsFocused(false) -// } - -// return { -// value: valueRef.value, -// autoRows: true, -// borderless: true, -// showCount: false, -// control, -// clearable, -// clearIcon, -// disabled, -// readonly, -// size, -// trim, - -// 'onUpdate:value': setValue, -// onChange, -// onClear, -// onCompositionStart, -// onCompositionEnd, -// onInput, -// onFocus: handleTextareaCompFocus, -// onBlur: handleTextareaCompBlur, -// } -// }) - -// return { -// textareaRef, -// lineHeight, -// boxSizingData, -// isFocused, -// textareaCompProps, -// } -// } diff --git a/packages/pro/textarea/src/composables/useErrorLines.ts b/packages/pro/textarea/src/composables/useErrorLines.ts index 1ac3d5a5d..fece42142 100644 --- a/packages/pro/textarea/src/composables/useErrorLines.ts +++ b/packages/pro/textarea/src/composables/useErrorLines.ts @@ -6,7 +6,7 @@ */ import type { ProTextareaProps } from '../types' -import type { BoxSizingData } from '@idux/components/textarea/src/utils/getBoxSizingData' +import type { ɵBoxSizingData } from '@idux/components/textarea' import type { ComputedRef } from 'vue' import { useState } from '@idux/cdk/utils' @@ -21,7 +21,7 @@ export interface ErrorLinesContext { export function useErrorLines( props: ProTextareaProps, lineHeight: ComputedRef, - sizingData: ComputedRef, + sizingData: ComputedRef<ɵBoxSizingData>, ): ErrorLinesContext { const [visibleErrIndex, setvisibleErrIndex] = useState(-1) diff --git a/packages/pro/textarea/style/index.less b/packages/pro/textarea/style/index.less index 79b6b089a..6e81dbeff 100644 --- a/packages/pro/textarea/style/index.less +++ b/packages/pro/textarea/style/index.less @@ -129,6 +129,7 @@ outline: 0; width: 100%; resize: none; + overflow: hidden; &[disabled] { cursor: not-allowed;