From 4a75cec783c69171a9ffbb5bebf6f784d3638010 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 10 Feb 2023 10:45:36 +0800
Subject: [PATCH 01/10] =?UTF-8?q?=E5=88=86=E9=A1=B5=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/input-number/OInputNumber.vue  | 10 ++--
 .../src/components/pagination/OPagination.vue | 47 +++++++++++++++----
 .../pagination/__demo__/PaginationBasic.vue   | 16 +++++--
 .../src/components/pagination/pagination.ts   |  6 ++-
 .../components/pagination/style/index.scss    |  2 +-
 .../src/components/select/OSelect.vue         |  8 ++--
 6 files changed, 66 insertions(+), 23 deletions(-)

diff --git a/packages/opendesign/src/components/input-number/OInputNumber.vue b/packages/opendesign/src/components/input-number/OInputNumber.vue
index 651a3ce4..73a10659 100644
--- a/packages/opendesign/src/components/input-number/OInputNumber.vue
+++ b/packages/opendesign/src/components/input-number/OInputNumber.vue
@@ -121,6 +121,7 @@ watch(
 
 let numberValue = getRealValue(currentValue.value);
 let lastNumberValue = numberValue;
+let lastChangedNumberValue = numberValue;
 
 const canAdd = computed(() => {
   if (props.disabled) {
@@ -157,9 +158,11 @@ const updateValue = (val: string) => {
 
   emits('update:modelValue', numberValue);
 
-  if (numberValue !== lastNumberValue) {
+  if (numberValue !== lastChangedNumberValue) {
     emits('change', numberValue);
-  } else {
+  }
+
+  if (numberValue === lastNumberValue) {
     if (isFunction(props.format)) {
       currentValue.value = props.format(numberValue);
     } else {
@@ -169,6 +172,7 @@ const updateValue = (val: string) => {
   }
 
   lastNumberValue = numberValue;
+  lastChangedNumberValue = numberValue;
   return numberValue;
 };
 
@@ -177,7 +181,7 @@ const onInput = (val: string, evt: Event) => {
 };
 
 const onFocus = (val: string, evt: FocusEvent) => {
-  lastNumberValue = numberValue;
+  // lastNumberValue = numberValue;
   emits('focus', numberValue, evt);
   // console.log('focus', numberValue);
 };
diff --git a/packages/opendesign/src/components/pagination/OPagination.vue b/packages/opendesign/src/components/pagination/OPagination.vue
index 714d5702..6d626850 100644
--- a/packages/opendesign/src/components/pagination/OPagination.vue
+++ b/packages/opendesign/src/components/pagination/OPagination.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, nextTick, watch } from 'vue';
 import { getPagerItem, PagerItemT, getSizeOptions } from './pagination';
 import { OPopover } from '../popover';
 import { OInputNumber } from '../input-number';
@@ -61,6 +61,12 @@ const defaultSizeLabel = currentPageSize.value + Labels.sizeLabel;
 const totalPage = computed(() => Math.ceil(props.total / currentPageSize.value));
 
 const pages = ref(getPagerItem(totalPage.value, currentPage.value, props.showPageCount));
+watch(
+  () => totalPage.value,
+  () => {
+    pages.value = getPagerItem(totalPage.value, currentPage.value, props.showPageCount);
+  }
+);
 
 const updateCurrentPage = (page: number) => {
   if (isNaN(page)) {
@@ -103,17 +109,44 @@ const moreClick = (more: PagerItemT[0]) => {
 const goToChange = (val: string | number) => {
   updateCurrentPage(Number(val));
 };
+
+const pageSizeChange = (val: string | number) => {
+  // updateCurrentPage(Number(val));
+  const currentIndex = currentPageSize.value * currentPage.value;
+  currentPageSize.value = Number(val);
+  nextTick(() => {
+    currentPage.value = Math.ceil(currentIndex / currentPageSize.value);
+    console.log(currentIndex, totalPage.value, currentPage.value, currentPageSize.value);
+
+    pages.value = getPagerItem(totalPage.value, currentPage.value, props.showPageCount);
+  });
+};
 </script>
 <template>
   <div class="o-pagination">
     <div class="o-pagination-wrap">
       <div class="o-pagination-total">{{ Labels.total }}&nbsp;{{ props.total }}</div>
+      <template v-if="!props.simple">
+        <div class="o-pagination-size">
+          <OSelect :model-value="currentPageSize" class="o-pagination-select" :default-label="defaultSizeLabel" @change="pageSizeChange">
+            <OOption v-for="item in pageSizeList" :key="item.value" :label="item.label" :value="item.value" />
+          </OSelect>
+        </div>
+      </template>
       <div class="o-pagination-pager">
         <div class="o-pagination-prev" :class="{ disabled: currentPage === 1 }" @click="() => currentPage !== 1 && clickPageBtn(false)">&lt;</div>
         <div class="o-pagination-pages">
           <template v-if="props.simple">
             <div class="o-pagination-simple">
-              <OInputNumber :model-value="currentPage" :clearable="false" class="o-pagination-input" controls="none" />&nbsp;/&nbsp;<span>{{ totalPage }}</span>
+              <OInputNumber
+                :model-value="currentPage"
+                :clearable="false"
+                class="o-pagination-input"
+                controls="none"
+                :min="1"
+                :max="totalPage"
+                @change="goToChange"
+              />&nbsp;/&nbsp;<span>{{ totalPage }}</span>
             </div>
           </template>
           <template v-else>
@@ -143,18 +176,14 @@ const goToChange = (val: string | number) => {
         </div>
       </div>
       <template v-if="!props.simple">
-        <div class="o-pagination-size">
-          <OSelect :model-value="currentPageSize" class="o-pagination-select" :default-label="defaultSizeLabel">
-            <OOption v-for="item in pageSizeList" :key="item.value" :label="item.label" :value="item.value" />
-          </OSelect>
-        </div>
         <div class="o-pagination-goto">
           {{ Labels.goto }}&nbsp;<OInputNumber
             :model-value="currentPage"
             class="o-pagination-input"
             controls="none"
-            @blur="goToChange"
-            @press-enter="goToChange"
+            :min="1"
+            :max="totalPage"
+            @change="goToChange"
           />
         </div>
       </template>
diff --git a/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue b/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue
index 5472ad90..74086d10 100644
--- a/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue
+++ b/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue
@@ -2,9 +2,14 @@
 import { ref } from 'vue';
 import { OPagination } from '../index';
 const currentPage = ref(5);
-// setTimeout(() => {
-//   currentPage.value = 3;
-// }, 2000);
+const total = ref(100);
+
+setTimeout(() => {
+  total.value = 50;
+}, 2000);
+
+const pageSize = 8;
+const pageSizes = [8, 16, 32, 64];
 const onChange = (value: { current: number; size: number }) => {
   console.log(value);
 };
@@ -12,11 +17,12 @@ const onChange = (value: { current: number; size: number }) => {
 <template>
   <h4>Basic</h4>
   <div class="sec">
-    <OPagination :total="100" :current-page="currentPage" @change="onChange" />
+    <OPagination :total="total" :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" @change="onChange" />
   </div>
   <h4>Simple</h4>
   <div class="sec">
-    <OPagination :total="100" :current-page="currentPage" simple @change="onChange" />
+    <div>当前页：{{ currentPage }}</div>
+    <OPagination v-model:current-page="currentPage" :total="100" simple @change="onChange" />
   </div>
 </template>
 <style lang="scss">
diff --git a/packages/opendesign/src/components/pagination/pagination.ts b/packages/opendesign/src/components/pagination/pagination.ts
index 384471d0..cce67a5b 100644
--- a/packages/opendesign/src/components/pagination/pagination.ts
+++ b/packages/opendesign/src/components/pagination/pagination.ts
@@ -6,6 +6,8 @@ function getNumbers(min: number, max: number) {
   return arr;
 }
 export function getPagerItem(totalPage: number, currentPage = 1, showPageCount = 9) {
+  const activePage = currentPage > totalPage ? totalPage : currentPage;
+
   const maxCount = showPageCount > 3 ? showPageCount : 3;
   let pages: Array<{ value: number | 'left' | 'right', isMore?: boolean, list?: number[] }> = [];
 
@@ -36,8 +38,8 @@ export function getPagerItem(totalPage: number, currentPage = 1, showPageCount =
   } else {
     const d = (maxCount - 3) / 2;
 
-    let min = currentPage - Math.floor(d);
-    let max = currentPage + Math.ceil(d);
+    let min = activePage - Math.floor(d);
+    let max = activePage + Math.ceil(d);
 
     // 处理边缘问题
     if (max > totalPage - 1) {
diff --git a/packages/opendesign/src/components/pagination/style/index.scss b/packages/opendesign/src/components/pagination/style/index.scss
index b470b419..60a58164 100644
--- a/packages/opendesign/src/components/pagination/style/index.scss
+++ b/packages/opendesign/src/components/pagination/style/index.scss
@@ -5,7 +5,7 @@
   align-items: center;
   white-space: nowrap;
 
-  > *:not(first-child) {
+  > *:not(:first-child) {
     margin-left: 12px;
   }
 }
diff --git a/packages/opendesign/src/components/select/OSelect.vue b/packages/opendesign/src/components/select/OSelect.vue
index 7896254e..d8e82025 100644
--- a/packages/opendesign/src/components/select/OSelect.vue
+++ b/packages/opendesign/src/components/select/OSelect.vue
@@ -88,12 +88,14 @@ provide(selectOptionInjectKey, {
   value: activeVal,
   update: (val: SelectOptionT, emit?: boolean) => {
     activeLabel.value = val.label;
-    console.log(activeLabel.value);
 
     if (emit) {
+      if (activeVal.value !== val.value) {
+        emits('change', val.value);
+        activeVal.value = val.value;
+        console.log('选中change', val.value, activeLabel.value);
+      }
       emits('update:modelValue', val.value);
-      emits('change', val.value);
-      activeVal.value = val.value;
       showOption.value = false;
     }
   },
-- 
Gitee


From 415575d2f10a69df14aeebb78dfab3e17cbfcd9c Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 10 Feb 2023 19:52:27 +0800
Subject: [PATCH 02/10] =?UTF-8?q?=E5=A2=9E=E5=8A=A0textarea?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/input/OInput.vue           |   9 +-
 .../src/components/input/provide.ts           |   6 -
 .../src/components/input/style/index.scss     |  56 ++--
 .../src/components/input/style/var.scss       |   1 +
 .../src/components/textarea/OTextarea.vue     | 260 ++++++++++++++++++
 .../textarea/__demo__/IndexTextarea.vue       |  12 +
 .../textarea/__demo__/TextareaBasic.vue       | 100 +++++++
 .../src/components/textarea/index.ts          |   9 +
 .../src/components/textarea/style/index.scss  | 155 +++++++++++
 .../src/components/textarea/style/index.ts    |   2 +
 .../src/components/textarea/style/var.scss    |  54 ++++
 .../src/components/textarea/textarea.ts       |   8 +
 packages/portal/src/router.ts                 |   6 +
 packages/portal/src/style.scss                |   2 +-
 14 files changed, 640 insertions(+), 40 deletions(-)
 delete mode 100644 packages/opendesign/src/components/input/provide.ts
 create mode 100644 packages/opendesign/src/components/textarea/OTextarea.vue
 create mode 100644 packages/opendesign/src/components/textarea/__demo__/IndexTextarea.vue
 create mode 100644 packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue
 create mode 100644 packages/opendesign/src/components/textarea/index.ts
 create mode 100644 packages/opendesign/src/components/textarea/style/index.scss
 create mode 100644 packages/opendesign/src/components/textarea/style/index.ts
 create mode 100644 packages/opendesign/src/components/textarea/style/var.scss
 create mode 100644 packages/opendesign/src/components/textarea/textarea.ts

diff --git a/packages/opendesign/src/components/input/OInput.vue b/packages/opendesign/src/components/input/OInput.vue
index fd37793b..8d0ef9f3 100644
--- a/packages/opendesign/src/components/input/OInput.vue
+++ b/packages/opendesign/src/components/input/OInput.vue
@@ -49,7 +49,7 @@ interface InputPropT {
   /**
    * 是否是密码输入
    */
-  type?: 'text' | 'password' | 'textarea';
+  type?: 'text' | 'password';
   /**
    * 解析输入框的值
    */
@@ -102,10 +102,6 @@ const displayValue = computed(() => {
   return v;
 });
 
-// 输入框状态
-const status = ref<undefined | 'warning' | 'warn' | 'error'>();
-const statusClass = computed(() => (status.value || props.status ? `is-${status.value || props.status}` : ''));
-
 // 是否聚焦状态
 const isFocus = ref(false);
 let lastValue: string = realValue.value;
@@ -201,10 +197,9 @@ const onMouseDown = (e: MouseEvent) => {
   <label
     class="o-input"
     :class="[
-      statusClass,
       `o-input-size-${props.size || defaultSize}`,
       `o-input-shape-${props.shape || defaultShape}`,
-      `o-input-status-${props.status}`,
+      props.status ? `o-input-status-${props.status}` : '',
       {
         'o-input-disabled': props.disabled,
         'o-input-focus': isFocus,
diff --git a/packages/opendesign/src/components/input/provide.ts b/packages/opendesign/src/components/input/provide.ts
deleted file mode 100644
index dadbbb51..00000000
--- a/packages/opendesign/src/components/input/provide.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { InjectionKey } from 'vue';
-
-export const tabsInjectKey: InjectionKey<{
-  validator: (value: string | number) => boolean
-}> = Symbol('provide-form-item');
-
diff --git a/packages/opendesign/src/components/input/style/index.scss b/packages/opendesign/src/components/input/style/index.scss
index c37f0eaa..d523e1d0 100644
--- a/packages/opendesign/src/components/input/style/index.scss
+++ b/packages/opendesign/src/components/input/style/index.scss
@@ -35,32 +35,6 @@
   }
 }
 
-.o-input-disabled {
-  .o-input-clear {
-    display: none;
-  }
-  .o-input-wrap {
-    color: var(--input-color-disabled);
-    cursor: not-allowed;
-    border-color: var(--input-border-disabled);
-    background-color: var(--input-bg-disabled);
-  }
-}
-
-.o-input-clearable {
-  &:hover {
-    .o-input-suffix-wrap {
-      visibility: hidden;
-      opacity: 0;
-    }
-    .o-input-clear {
-      visibility: visible;
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-}
-
 .o-input-input {
   outline: none;
   border: none;
@@ -83,6 +57,9 @@
   align-items: center;
   justify-content: center;
   color: var(--input-icon-color);
+  background-color: var(--input-icon-bg);
+  border-radius: 50%;
+
   &:hover {
     color: var(--input-icon-color-hover);
   }
@@ -92,6 +69,33 @@
     height: 100%;
   }
 }
+
+.o-input-disabled {
+  .o-input-clear {
+    display: none;
+  }
+  .o-input-wrap {
+    color: var(--input-color-disabled);
+    cursor: not-allowed;
+    border-color: var(--input-border-disabled);
+    background-color: var(--input-bg-disabled);
+  }
+}
+
+.o-input-clearable {
+  &:hover {
+    .o-input-suffix-wrap {
+      visibility: hidden;
+      opacity: 0;
+    }
+    .o-input-clear {
+      visibility: visible;
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+
 .o-input-suffix-wrap {
   transition: all var(var(--o-duration-m1)) var(--o-easing-standard-out);
 }
diff --git a/packages/opendesign/src/components/input/style/var.scss b/packages/opendesign/src/components/input/style/var.scss
index 04db1135..b32fc21e 100644
--- a/packages/opendesign/src/components/input/style/var.scss
+++ b/packages/opendesign/src/components/input/style/var.scss
@@ -29,6 +29,7 @@
 
   --input-icon-color: var(--o-color-text3);
   --input-icon-color-hover: var(--o-color-primary1);
+  --input-icon-bg: var(--o-color-bg4);
 
   --input-border-success: var(--o-color-success1);
   --input-border-success-hover: var(--o-color-success2);
diff --git a/packages/opendesign/src/components/textarea/OTextarea.vue b/packages/opendesign/src/components/textarea/OTextarea.vue
new file mode 100644
index 00000000..1f0b9413
--- /dev/null
+++ b/packages/opendesign/src/components/textarea/OTextarea.vue
@@ -0,0 +1,260 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { defaultSize, defaultShape, SizeT, ShapeT } from '../_shared/global';
+import { isFunction } from '../_shared/is';
+import { IconX } from '../icons';
+import { trigger } from '../_shared/event';
+import { toInputString } from './textarea';
+
+interface InputPropT {
+  /**
+   * 下拉框的值
+   * v-model
+   */
+  modelValue?: string;
+  /**
+   * 下拉框的默认值
+   * 非受控
+   */
+  defaultValue?: string;
+  /**
+   * 大小
+   */
+  size?: SizeT;
+  /**
+   * 形状
+   */
+  shape?: ShapeT;
+  /**
+   * 提示文本
+   */
+  placeholder?: string;
+  /**
+   * 状态，显示指定，用于非表单场景
+   */
+  status?: 'success' | 'warning' | 'error';
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
+  /**
+   * 是否只读
+   */
+  readonly?: boolean;
+  /**
+   * 是否可以清除
+   */
+  clearable?: boolean;
+  /**
+   * 是否支持调整尺寸
+   */
+  resize?: 'both' | 'horizontal' | 'vertical' | 'none';
+  /**
+   * 显示的行数
+   */
+  rows?: number;
+  /**
+   * 显示的行数
+   */
+  cols?: number;
+  /**
+   * 最大字符长度
+   */
+  maxLength?: number;
+  /**
+   * 超过最大字符长度时是否允许输入
+   */
+  inputOutLimit?: boolean;
+  /**
+   * 获取长度方法
+   */
+  getLength?: (val: string) => number;
+  /**
+   * 高度自适应
+   */
+  autoResize?: boolean;
+}
+const props = withDefaults(defineProps<InputPropT>(), {
+  modelValue: undefined,
+  defaultValue: '',
+  size: undefined,
+  shape: undefined,
+  placeholder: '',
+  clearable: true,
+  status: undefined,
+  resize: 'vertical',
+  rows: 3,
+  cols: 20,
+  maxLength: undefined,
+  getLength: undefined,
+  inputOutLimit: true,
+});
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+  (e: 'change', value: string): void;
+  (e: 'input', value: string, evt: Event): void;
+  (e: 'blur', value: string, evt: FocusEvent): void;
+  (e: 'focus', value: string, evt: FocusEvent): void;
+  (e: 'clear', evt: Event): void;
+  (e: 'keydown', value: string, evt: KeyboardEvent): void;
+}>();
+
+const textareaRef = ref<HTMLElement | null>(null);
+// 数字输入框当前值
+const realValue = ref(toInputString(props.modelValue ?? props.defaultValue));
+// 监听属性变化，刷新值
+watch(
+  () => props.modelValue,
+  (val) => {
+    // console.log('watch', val);
+    realValue.value = toInputString(val);
+  }
+);
+
+const resizeValue = computed(() => {
+  return props.disabled ? 'none' : props.resize;
+});
+
+const getValueLength = (val: string) => {
+  if (isFunction(props.getLength)) {
+    return props.getLength(val);
+  }
+  return val.length ?? 0;
+};
+// 是否超出最大长度限制
+const currentLength = computed(() => getValueLength(realValue.value));
+const isOutLengthLimit = computed(() => (props.maxLength !== undefined ? currentLength.value > props.maxLength : false));
+
+const status = computed(() => {
+  return props.status ?? (isOutLengthLimit.value ? 'error' : '');
+});
+
+// 是否聚焦状态
+const isFocus = ref(false);
+let lastValue: string = realValue.value;
+
+const updateValue = (val: string) => {
+  emits('update:modelValue', val);
+
+  if (lastValue !== val) {
+    emits('change', val);
+    lastValue = val;
+  }
+  return val;
+};
+
+// 正在输入中文，处理输入过程中触发input事件
+let isComposing = false;
+// 解决点击组件内的非textarea区域触发focus、blur问题
+let clickInside = false;
+
+// 开始中文输入
+const onCompositionStart = () => {
+  isComposing = true;
+};
+// 结束中文输入
+const onCompositionEnd = (e: Event) => {
+  if (!isComposing) {
+    return;
+  }
+
+  isComposing = false;
+  trigger(e.target as HTMLElement, 'input');
+};
+
+const onInput = (e: Event) => {
+  if (isComposing) {
+    return;
+  }
+  const val = (e.target as HTMLInputElement)?.value;
+  emits('input', val, e);
+
+  emits('update:modelValue', val);
+};
+
+const onFocus = (e: FocusEvent) => {
+  clickInside = false;
+  if (isFocus.value) {
+    return;
+  }
+  isFocus.value = true;
+  emits('focus', realValue.value, e);
+};
+
+const onBlur = (e: FocusEvent) => {
+  if (clickInside) {
+    clickInside = false;
+    return;
+  }
+  isFocus.value = false;
+  const val = (e.target as HTMLInputElement)?.value;
+  const v = updateValue(val);
+  emits('blur', v, e);
+};
+
+const onKeyDown = (e: KeyboardEvent) => {
+  if (!isComposing) {
+    const val = (e.target as HTMLInputElement)?.value;
+    emits('keydown', val, e);
+  }
+};
+// 清除值
+const clearClick = (e: Event) => {
+  updateValue('');
+  emits('clear', e);
+};
+const onMouseDown = (e: MouseEvent) => {
+  if ((e.target as HTMLInputElement) !== textareaRef.value) {
+    clickInside = true;
+  }
+};
+</script>
+<template>
+  <label
+    class="o-textarea"
+    :class="[
+      `o-textarea-size-${props.size || defaultSize}`,
+      `o-textarea-shape-${props.shape || defaultShape}`,
+      status ? `o-textarea-status-${status}` : '',
+      {
+        'o-textarea-disabled': props.disabled,
+        'o-textarea-focus': isFocus,
+      },
+    ]"
+    @mousedown="onMouseDown"
+  >
+    <div
+      class="o-textarea-wrap"
+      :class="{
+        'o-textarea-clearable': props.clearable && realValue !== '' && !props.disabled,
+      }"
+    >
+      <textarea
+        ref="textareaRef"
+        class="o-textarea-textarea"
+        :placeholder="props.placeholder"
+        :value="realValue"
+        :readonly="props.readonly"
+        :disabled="props.disabled"
+        :style="{
+          resize: resizeValue,
+        }"
+        :maxlength="props.inputOutLimit ? '' : props.maxLength"
+        :rows="props.rows"
+        :cols="props.cols"
+        @focus="onFocus"
+        @blur="onBlur"
+        @input="onInput"
+        @keydown="onKeyDown"
+        @compositionstart="onCompositionStart"
+        @compositionend="onCompositionEnd"
+      ></textarea>
+      <div v-if="props.clearable" class="o-textarea-clear" @click="clearClick"><IconX class="o-textarea-clear-icon" /></div>
+      <div v-if="props.maxLength" class="o-textarea-limit">
+        <span :class="{ 'is-error': isOutLengthLimit }">{{ currentLength }}</span
+        >/{{ props.maxLength }}
+      </div>
+    </div>
+  </label>
+</template>
diff --git a/packages/opendesign/src/components/textarea/__demo__/IndexTextarea.vue b/packages/opendesign/src/components/textarea/__demo__/IndexTextarea.vue
new file mode 100644
index 00000000..7c00eccc
--- /dev/null
+++ b/packages/opendesign/src/components/textarea/__demo__/IndexTextarea.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import '../style';
+import '../../option/style';
+
+import TextareaBasic from './TextareaBasic.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <TextareaBasic />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue b/packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue
new file mode 100644
index 00000000..7a44006d
--- /dev/null
+++ b/packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OTextarea } from '../index';
+
+const val1 = ref('this is input value');
+const val2 = ref('this is input value');
+setTimeout(() => {
+  // val1.value += '---';
+}, 2000);
+
+const printEvent = (event: string, val?: string | number) => {
+  console.log(`[${event}]`, val);
+};
+</script>
+<template>
+  <h4>Clearable</h4>
+  <section>
+    <OTextarea v-model="val1" :max-length="10" size="large" shape="round" clearable />
+  </section>
+  <h4>MaxLength</h4>
+  <section>
+    <div>
+      <div>MaxLength: 10 | val2:{{ val2 }}</div>
+      <OTextarea v-model="val1" :max-length="10" />
+    </div>
+    <div>
+      <div>input-out-limit：超出长度时不能输入</div>
+      <OTextarea v-model="val1" :max-length="10" :input-out-limit="false" />
+    </div>
+  </section>
+  <h4>Size</h4>
+  <div>
+    <div>val1:{{ val1 }}</div>
+    <section style="align-items: flex-start">
+      <OTextarea
+        v-model="val1"
+        size="small"
+        @blur="(v) => printEvent('blur', v)"
+        @change="(v) => printEvent('change', v)"
+        @input="(v) => printEvent('input', v)"
+        @focus="(v) => printEvent('focus', v)"
+        @keydown="(v) => printEvent('keydown', v)"
+      />
+      <OTextarea v-model="val1" size="normal" />
+      <OTextarea v-model="val1" size="large" />
+    </section>
+  </div>
+  <h4>Round</h4>
+  <div>
+    <div>val1:{{ val1 }}</div>
+    <section style="align-items: flex-start">
+      <OTextarea v-model="val1" size="small" shape="round" />
+      <OTextarea v-model="val1" size="normal" resize="both" shape="round" />
+      <OTextarea v-model="val1" size="large" shape="round" />
+    </section>
+  </div>
+  <h4>Status</h4>
+  <section>
+    <div>
+      <div>success:</div>
+      <OTextarea v-model="val1" status="success" />
+    </div>
+    <div>
+      <div>warning:</div>
+      <OTextarea v-model="val1" status="warning" />
+    </div>
+    <div>
+      <div>error:(default)</div>
+      <OTextarea v-model="val1" status="error" />
+    </div>
+  </section>
+  <h4>Disabled & Readonly</h4>
+  <div>
+    <div>val1:{{ val1 }}</div>
+    <section>
+      <OTextarea v-model="val1" disabled />
+      <OTextarea v-model="val1" readonly />
+    </section>
+  </div>
+  <h4>Resize</h4>
+  <section>
+    <div>
+      <div>both:</div>
+      <OTextarea v-model="val1" resize="both" />
+    </div>
+    <div>
+      <div>horizontal:</div>
+      <OTextarea v-model="val1" resize="horizontal" />
+    </div>
+    <div>
+      <div>vertical:(default)</div>
+      <OTextarea v-model="val1" resize="vertical" />
+    </div>
+    <div>
+      <div>none:</div>
+      <OTextarea v-model="val1" resize="none" />
+    </div>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/textarea/index.ts b/packages/opendesign/src/components/textarea/index.ts
new file mode 100644
index 00000000..4e45e3fc
--- /dev/null
+++ b/packages/opendesign/src/components/textarea/index.ts
@@ -0,0 +1,9 @@
+import _OTextarea from './OTextarea.vue';
+import type { App } from 'vue';
+
+const OTextarea = Object.assign(_OTextarea, {
+  install(app: App) {
+    app.component(_OTextarea.name, _OTextarea);
+  },
+});
+export { OTextarea };
diff --git a/packages/opendesign/src/components/textarea/style/index.scss b/packages/opendesign/src/components/textarea/style/index.scss
new file mode 100644
index 00000000..a0449182
--- /dev/null
+++ b/packages/opendesign/src/components/textarea/style/index.scss
@@ -0,0 +1,155 @@
+@use './var.scss';
+
+.o-textarea {
+  cursor: pointer;
+  color: var(--textarea-color);
+  display: inline-flex;
+  font-size: var(--textarea-text-size);
+  line-height: var(--textarea-text-height);
+}
+
+.o-textarea-wrap {
+  display: flex;
+  border-radius: var(--textarea-radius);
+  border: 1px solid var(--textarea-border);
+  background-color: var(--textarea-bg);
+  position: relative;
+
+  &:hover {
+    border-color: var(--textarea-border-hover);
+    background-color: var(--textarea-bg-hover);
+  }
+  &.is-focus {
+    border-color: var(--textarea-border-focus);
+    background-color: var(--textarea-bg-focus);
+  }
+}
+
+.o-textarea-textarea {
+  padding: var(--textarea-padding);
+  outline: none;
+  border: none;
+  color: inherit;
+  cursor: inherit;
+  background-color: transparent;
+  display: inline-flex;
+  width: 100%;
+  caret-color: var(--o-color-primary1);
+  line-height: inherit;
+  .o-textarea-disabled & {
+    resize: none;
+  }
+}
+
+.o-textarea-clear {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  font-size: 16px;
+  margin-top: -8px;
+  border-radius: 50%;
+  visibility: hidden;
+  opacity: 0;
+  transform: scale(0.1);
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--textarea-icon-color);
+  background-color: var(--textarea-icon-bg);
+
+  &:hover {
+    color: var(--textarea-icon-color-hover);
+  }
+}
+
+.o-textarea-clear-icon {
+  stroke-width: 0.5px;
+}
+
+.o-textarea-clearable {
+  &:hover {
+    .o-textarea-clear {
+      visibility: visible;
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+
+.o-textarea-disabled {
+  .o-textarea-clear {
+    display: none;
+  }
+  .o-textarea-wrap {
+    color: var(--textarea-color-disabled);
+    cursor: not-allowed;
+    border-color: var(--textarea-border-disabled);
+    background-color: var(--textarea-bg-disabled);
+  }
+}
+
+.o-textarea-limit {
+  position: absolute;
+  right: 8px;
+  bottom: 4px;
+  color: var(--textarea-limit-color);
+  font-size: var(--textarea-limit-text-size);
+  line-height: var(--textarea-limit-text-height);
+  > .is-error {
+    color: var(--textarea-limit-color-error);
+  }
+}
+
+.o-textarea-size-small {
+  --textarea-text-size: var(--textarea-text-size-s);
+  --textarea-text-height: var(--textarea-text-height-s);
+  --textarea-padding: 2px 8px;
+  --textarea-radius: var(--textarea-radius-s);
+  &.o-textarea-shape-round {
+    --textarea-radius: 12px;
+  }
+}
+.o-textarea-size-normal {
+  --textarea-text-size: var(--textarea-text-size-m);
+  --textarea-text-height: var(--textarea-text-height-m);
+  --textarea-padding: 4px 12px;
+  --textarea-radius: var(--textarea-radius-m);
+  &.o-textarea-shape-round {
+    --textarea-radius: 16px;
+  }
+}
+.o-textarea-size-large {
+  --textarea-text-size: var(--textarea-text-size-l);
+  --textarea-text-height: var(--textarea-text-height-l);
+  --textarea-padding: 6px 12px;
+  --textarea-radius: var(--textarea-radius-l);
+  &.o-textarea-shape-round {
+    --textarea-radius: 20px;
+  }
+}
+
+.o-textarea-status-success {
+  --textarea-border: var(--textarea-border-success);
+  --textarea-border-hover: var(--textarea-border-success-hover);
+  --textarea-border-focus: var(--textarea-border-success-focus);
+  --textarea-bg: var(--textarea-bg-success);
+  --textarea-bg-hover: var(--textarea-bg-success-hover);
+  --textarea-bg-focus: var(--textarea-bg-success-focus);
+}
+.o-textarea-status-warning {
+  --textarea-border: var(--textarea-border-warning);
+  --textarea-border-hover: var(--textarea-border-warning-hover);
+  --textarea-border-focus: var(--textarea-border-warning-focus);
+  --textarea-bg: var(--textarea-bg-warning);
+  --textarea-bg-hover: var(--textarea-bg-warning-hover);
+  --textarea-bg-focus: var(--textarea-bg-warning-focus);
+}
+.o-textarea-status-error {
+  --textarea-border: var(--textarea-border-error);
+  --textarea-border-hover: var(--textarea-border-error-hover);
+  --textarea-border-focus: var(--textarea-border-error-focus);
+  --textarea-bg: var(--textarea-bg-error);
+  --textarea-bg-hover: var(--textarea-bg-error-hover);
+  --textarea-bg-focus: var(--textarea-bg-error-focus);
+}
diff --git a/packages/opendesign/src/components/textarea/style/index.ts b/packages/opendesign/src/components/textarea/style/index.ts
new file mode 100644
index 00000000..591b2fbd
--- /dev/null
+++ b/packages/opendesign/src/components/textarea/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/textarea/style/var.scss b/packages/opendesign/src/components/textarea/style/var.scss
new file mode 100644
index 00000000..3bba34f5
--- /dev/null
+++ b/packages/opendesign/src/components/textarea/style/var.scss
@@ -0,0 +1,54 @@
+.o-textarea {
+  --textarea-text-size-s: var(--o-font_size-tip1);
+  --textarea-text-height-s: var(--o-line_height-tip1);
+  --textarea-text-size-m: var(--o-font_size-text);
+  --textarea-text-height-m: var(--o-line_height-text);
+  --textarea-text-size-l: var(--o-font_size-h4);
+  --textarea-text-height-l: var(--o-line_height-h4);
+
+  --textarea-radius-s: var(--o-radius-s);
+  --textarea-radius-m: var(--o-radius-s);
+  --textarea-radius-l: var(--o-radius-s);
+
+  --textarea-border: var(--o-color-info1);
+  --textarea-border-hover: var(--o-color-primary2);
+  --textarea-border-focus: var(--o-color-primary3);
+  --textarea-border-disabled: var(--o-color-info1);
+
+  --textarea-bg: var(--o-color-bg1);
+  --textarea-bg-hover: var(--o-color-bg3);
+  --textarea-bg-focus: var(--o-color-bg3);
+  --textarea-bg-disabled: var(--o-color-info4);
+
+  --textarea-color: var(--o-color-text2);
+  --textarea-color-disabled: var(--o-color-text4);
+
+  --textarea-icon-color: var(--o-color-text3);
+  --textarea-icon-bg: var(--o-color-bg4);
+  --textarea-icon-color-hover: var(--o-color-primary1);
+
+  --textarea-border-success: var(--o-color-success1);
+  --textarea-border-success-hover: var(--o-color-success2);
+  --textarea-border-success-focus: var(--o-color-success3);
+  --textarea-border-warning: var(--o-color-warning1);
+  --textarea-border-warning-hover: var(--o-color-warning2);
+  --textarea-border-warning-focus: var(--o-color-warning3);
+  --textarea-border-error: var(--o-color-danger1);
+  --textarea-border-error-hover: var(--o-color-danger2);
+  --textarea-border-error-focus: var(--o-color-danger3);
+
+  --textarea-bg-success: var(--o-color-bg1);
+  --textarea-bg-success-hover: var(--o-color-bg1);
+  --textarea-bg-success-focus: var(--o-color-bg1);
+  --textarea-bg-warning: var(--o-color-bg1);
+  --textarea-bg-warning-hover: var(--o-color-bg1);
+  --textarea-bg-warning-focus: var(--o-color-bg1);
+  --textarea-bg-error: var(--o-color-bg1);
+  --textarea-bg-error-hover: var(--o-color-bg1);
+  --textarea-bg-error-focus: var(--o-color-bg1);
+
+  --textarea-limit-color: var(--o-color-text3);
+  --textarea-limit-color-error: var(--o-color-danger1);
+  --textarea-limit-text-size: var(--o-font_size-tip2);
+  --textarea-limit-text-height: var(--o-line_height-tip2);
+}
diff --git a/packages/opendesign/src/components/textarea/textarea.ts b/packages/opendesign/src/components/textarea/textarea.ts
new file mode 100644
index 00000000..7c05e51f
--- /dev/null
+++ b/packages/opendesign/src/components/textarea/textarea.ts
@@ -0,0 +1,8 @@
+import { isNull, isUndefined } from '../_shared/is';
+
+export function toInputString(val: unknown): string {
+  if (isUndefined(val) || isNull(val) || (typeof val === 'number' && isNaN(val as number))) {
+    return '';
+  }
+  return String(val);
+}
\ No newline at end of file
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 82ee0927..91d99718 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -69,6 +69,12 @@ export const routes = [
     label: '数字输入框',
     component: () => import('@demo/input-number/__demo__/IndexInputNumber.vue'),
   },
+  {
+    path: '/textarea',
+    name: 'Textarea',
+    label: '文本域',
+    component: () => import('@demo/textarea/__demo__/IndexTextarea.vue'),
+  },
   {
     path: '/select',
     name: 'Select',
diff --git a/packages/portal/src/style.scss b/packages/portal/src/style.scss
index 3ae61d4f..b05e7b7c 100644
--- a/packages/portal/src/style.scss
+++ b/packages/portal/src/style.scss
@@ -72,5 +72,5 @@ section {
   align-items: center;
   justify-content: flex-start;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 16px;
 }
-- 
Gitee


From 2b65326b297f107e552859f46c5f808e82e0ef69 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 10 Feb 2023 21:10:20 +0800
Subject: [PATCH 03/10] add auto width

---
 .../src/components/input/OInput.vue           | 49 ++++++++++++-------
 .../components/input/__demo__/IndexInput.vue  |  2 +
 .../input/__demo__/InputAutoWidth.vue         | 15 ++++++
 .../opendesign/src/components/input/input.ts  | 11 +++++
 .../src/components/input/style/index.scss     | 26 +++++++++-
 .../textarea/__demo__/TextareaBasic.vue       | 30 ++++++------
 6 files changed, 99 insertions(+), 34 deletions(-)
 create mode 100644 packages/opendesign/src/components/input/__demo__/InputAutoWidth.vue

diff --git a/packages/opendesign/src/components/input/OInput.vue b/packages/opendesign/src/components/input/OInput.vue
index 8d0ef9f3..b64bb058 100644
--- a/packages/opendesign/src/components/input/OInput.vue
+++ b/packages/opendesign/src/components/input/OInput.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue';
 import { defaultSize, defaultShape, SizeT, ShapeT } from '../_shared/global';
 import { isFunction } from '../_shared/is';
 import { IconX } from '../icons';
 import { trigger } from '../_shared/event';
 import { Enter } from '../_shared/keycode';
-import { toInputString } from './input';
+import { toInputString, getInputAutoWidth } from './input';
 
 interface InputPropT {
   /**
@@ -46,6 +46,10 @@ interface InputPropT {
    * 是否可以清除
    */
   clearable?: boolean;
+  /**
+   * 是否自动增加宽度
+   */
+  autoWidth?: boolean;
   /**
    * 是否是密码输入
    */
@@ -86,12 +90,15 @@ const emits = defineEmits<{
 const inputRef = ref<HTMLElement | null>(null);
 // 数字输入框当前值
 const realValue = ref(toInputString(props.modelValue ?? props.defaultValue));
+// 当前input文本值
+const inputText = ref(realValue.value);
 // 监听属性变化，刷新值
 watch(
   () => props.modelValue,
   (val) => {
     // console.log('watch', val);
     realValue.value = toInputString(val);
+    inputText.value = realValue.value;
   }
 );
 
@@ -143,6 +150,8 @@ const onInput = (e: Event) => {
   emits('input', val, e);
   // console.log('input', val);
 
+  inputText.value = val;
+
   if (!props.parse) {
     emits('update:modelValue', val);
     // console.log('update:modelValue', val);
@@ -223,21 +232,27 @@ const onMouseDown = (e: MouseEvent) => {
       <div v-if="$slots.prefix" class="o-input-prefix">
         <slot name="prefix"></slot>
       </div>
-      <input
-        ref="inputRef"
-        :value="displayValue"
-        :type="type"
-        :placeholder="props.placeholder"
-        class="o-input-input"
-        :readonly="props.readonly"
-        :disabled="props.disabled"
-        @focus="onFocus"
-        @blur="onBlur"
-        @input="onInput"
-        @keydown="onKeyDown"
-        @compositionstart="onCompositionStart"
-        @compositionend="onCompositionEnd"
-      />
+      <div class="o-input-input-wrap">
+        <input
+          ref="inputRef"
+          :value="displayValue"
+          :type="type"
+          :placeholder="props.placeholder"
+          class="o-input-input"
+          :class="{
+            'is-auto-size': props.autoWidth,
+          }"
+          :readonly="props.readonly"
+          :disabled="props.disabled"
+          @focus="onFocus"
+          @blur="onBlur"
+          @input="onInput"
+          @keydown="onKeyDown"
+          @compositionstart="onCompositionStart"
+          @compositionend="onCompositionEnd"
+        />
+        <div v-if="props.autoWidth" class="o-input-mirror">{{ inputText }}</div>
+      </div>
       <div v-if="props.clearable || $slots.suffix" class="o-input-suffix">
         <span v-if="$slots.suffix" class="o-input-suffix-wrap">
           <slot name="suffix"></slot>
diff --git a/packages/opendesign/src/components/input/__demo__/IndexInput.vue b/packages/opendesign/src/components/input/__demo__/IndexInput.vue
index 288cd57d..d3a2ad6c 100644
--- a/packages/opendesign/src/components/input/__demo__/IndexInput.vue
+++ b/packages/opendesign/src/components/input/__demo__/IndexInput.vue
@@ -6,9 +6,11 @@ import InputBasic from './InputBasic.vue';
 import InputEvent from './InputEvent.vue';
 import InputSlot from './InputSlot.vue';
 import InputMethod from './InputMethod.vue';
+import InputAutoWidth from './InputAutoWidth.vue';
 </script>
 <template>
   <div class="page-demo">
+    <InputAutoWidth />
     <InputBasic />
     <InputEvent />
     <InputSlot />
diff --git a/packages/opendesign/src/components/input/__demo__/InputAutoWidth.vue b/packages/opendesign/src/components/input/__demo__/InputAutoWidth.vue
new file mode 100644
index 00000000..5c345161
--- /dev/null
+++ b/packages/opendesign/src/components/input/__demo__/InputAutoWidth.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OInput } from '../index';
+
+const val1 = ref('this is input value this is input value');
+const val2 = ref('123');
+</script>
+<template>
+  <h4>Auto Width</h4>
+  <section>
+    <OInput v-model="val1" auto-width style="max-width: 300px" />
+    <OInput v-model="val2" auto-width />
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/input/input.ts b/packages/opendesign/src/components/input/input.ts
index 7c05e51f..2128d65d 100644
--- a/packages/opendesign/src/components/input/input.ts
+++ b/packages/opendesign/src/components/input/input.ts
@@ -5,4 +5,15 @@ export function toInputString(val: unknown): string {
     return '';
   }
   return String(val);
+}
+
+export function getInputAutoWidth(inputEl: HTMLElement) {
+  if (inputEl) {
+    const { clientWidth, scrollWidth } = inputEl;
+    if (clientWidth < scrollWidth) {
+      return `${scrollWidth}` + 'px';
+    }
+  }
+
+  return '';
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/components/input/style/index.scss b/packages/opendesign/src/components/input/style/index.scss
index d523e1d0..96650678 100644
--- a/packages/opendesign/src/components/input/style/index.scss
+++ b/packages/opendesign/src/components/input/style/index.scss
@@ -15,7 +15,8 @@
   border-radius: var(--input-radius);
   border: 1px solid var(--input-border);
   background-color: var(--input-bg);
-
+  width: 100%;
+  overflow: auto;
   &:hover {
     border-color: var(--input-border-hover);
     background-color: var(--input-bg-hover);
@@ -44,8 +45,17 @@
   display: inline-flex;
   width: 100%;
   caret-color: var(--o-color-primary1);
-  padding: 4px 0;
+  padding: 0;
   line-height: inherit;
+  height: 100%;
+  font-size: inherit;
+  &.is-auto-size {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
 }
 
 .o-input-clear {
@@ -130,6 +140,18 @@
   border-bottom-right-radius: var(--input-append-prepend-border-radius);
 }
 
+.o-input-input-wrap {
+  position: relative;
+}
+.o-input-mirror {
+  white-space: pre;
+  line-height: inherit;
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  visibility: hidden;
+}
+
 .o-input-prepend {
   border: 1px solid var(--o-color-border2);
   border-right: 0;
diff --git a/packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue b/packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue
index 7a44006d..7a0cf621 100644
--- a/packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue
+++ b/packages/opendesign/src/components/textarea/__demo__/TextareaBasic.vue
@@ -13,21 +13,6 @@ const printEvent = (event: string, val?: string | number) => {
 };
 </script>
 <template>
-  <h4>Clearable</h4>
-  <section>
-    <OTextarea v-model="val1" :max-length="10" size="large" shape="round" clearable />
-  </section>
-  <h4>MaxLength</h4>
-  <section>
-    <div>
-      <div>MaxLength: 10 | val2:{{ val2 }}</div>
-      <OTextarea v-model="val1" :max-length="10" />
-    </div>
-    <div>
-      <div>input-out-limit：超出长度时不能输入</div>
-      <OTextarea v-model="val1" :max-length="10" :input-out-limit="false" />
-    </div>
-  </section>
   <h4>Size</h4>
   <div>
     <div>val1:{{ val1 }}</div>
@@ -96,5 +81,20 @@ const printEvent = (event: string, val?: string | number) => {
       <OTextarea v-model="val1" resize="none" />
     </div>
   </section>
+  <h4>MaxLength</h4>
+  <section>
+    <div>
+      <div>MaxLength: 10 | val2:{{ val2 }}</div>
+      <OTextarea v-model="val1" :max-length="10" />
+    </div>
+    <div>
+      <div>input-out-limit：超出长度时不能输入</div>
+      <OTextarea v-model="val1" :max-length="10" :input-out-limit="false" />
+    </div>
+  </section>
+  <h4>Clearable</h4>
+  <section>
+    <OTextarea v-model="val1" :max-length="10" size="large" shape="round" :clearable="false" />
+  </section>
 </template>
 <style lang="scss"></style>
-- 
Gitee


From faccb9763642f732728629fda804f91df7f1e327 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 10 Feb 2023 21:50:16 +0800
Subject: [PATCH 04/10] =?UTF-8?q?=E6=94=AF=E6=8C=81input=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E9=80=82=E5=BA=94=E6=96=87=E6=9C=AC=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/input/OInput.vue           | 51 +++++++++++--------
 .../components/input/__demo__/IndexInput.vue  |  2 +-
 .../input/__demo__/InputAutoWidth.vue         |  9 ++--
 .../src/components/input/style/index.scss     | 18 +++----
 4 files changed, 45 insertions(+), 35 deletions(-)

diff --git a/packages/opendesign/src/components/input/OInput.vue b/packages/opendesign/src/components/input/OInput.vue
index b64bb058..b8847d7a 100644
--- a/packages/opendesign/src/components/input/OInput.vue
+++ b/packages/opendesign/src/components/input/OInput.vue
@@ -6,6 +6,7 @@ import { IconX } from '../icons';
 import { trigger } from '../_shared/event';
 import { Enter } from '../_shared/keycode';
 import { toInputString, getInputAutoWidth } from './input';
+import { OResizeObserver } from '../resize-observer';
 
 interface InputPropT {
   /**
@@ -88,6 +89,7 @@ const emits = defineEmits<{
 }>();
 
 const inputRef = ref<HTMLElement | null>(null);
+const inputWidth = ref();
 // 数字输入框当前值
 const realValue = ref(toInputString(props.modelValue ?? props.defaultValue));
 // 当前input文本值
@@ -201,6 +203,10 @@ const onMouseDown = (e: MouseEvent) => {
     clickInside = true;
   }
 };
+
+const onMirrorResize = (en: ResizeObserverEntry) => {
+  inputWidth.value = en.contentRect.width;
+};
 </script>
 <template>
   <label
@@ -232,27 +238,30 @@ const onMouseDown = (e: MouseEvent) => {
       <div v-if="$slots.prefix" class="o-input-prefix">
         <slot name="prefix"></slot>
       </div>
-      <div class="o-input-input-wrap">
-        <input
-          ref="inputRef"
-          :value="displayValue"
-          :type="type"
-          :placeholder="props.placeholder"
-          class="o-input-input"
-          :class="{
-            'is-auto-size': props.autoWidth,
-          }"
-          :readonly="props.readonly"
-          :disabled="props.disabled"
-          @focus="onFocus"
-          @blur="onBlur"
-          @input="onInput"
-          @keydown="onKeyDown"
-          @compositionstart="onCompositionStart"
-          @compositionend="onCompositionEnd"
-        />
-        <div v-if="props.autoWidth" class="o-input-mirror">{{ inputText }}</div>
-      </div>
+      <input
+        ref="inputRef"
+        :value="displayValue"
+        :type="type"
+        :placeholder="props.placeholder"
+        class="o-input-input"
+        :class="{
+          'is-auto-size': props.autoWidth,
+        }"
+        :style="{
+          width: inputWidth + 'px',
+        }"
+        :readonly="props.readonly"
+        :disabled="props.disabled"
+        @focus="onFocus"
+        @blur="onBlur"
+        @input="onInput"
+        @keydown="onKeyDown"
+        @compositionstart="onCompositionStart"
+        @compositionend="onCompositionEnd"
+      />
+      <OResizeObserver v-if="props.autoWidth" @resize="onMirrorResize">
+        <div class="o-input-mirror">{{ inputText }}</div>
+      </OResizeObserver>
       <div v-if="props.clearable || $slots.suffix" class="o-input-suffix">
         <span v-if="$slots.suffix" class="o-input-suffix-wrap">
           <slot name="suffix"></slot>
diff --git a/packages/opendesign/src/components/input/__demo__/IndexInput.vue b/packages/opendesign/src/components/input/__demo__/IndexInput.vue
index d3a2ad6c..d9f6fe6d 100644
--- a/packages/opendesign/src/components/input/__demo__/IndexInput.vue
+++ b/packages/opendesign/src/components/input/__demo__/IndexInput.vue
@@ -10,11 +10,11 @@ import InputAutoWidth from './InputAutoWidth.vue';
 </script>
 <template>
   <div class="page-demo">
-    <InputAutoWidth />
     <InputBasic />
     <InputEvent />
     <InputSlot />
     <InputMethod />
+    <InputAutoWidth />
   </div>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/input/__demo__/InputAutoWidth.vue b/packages/opendesign/src/components/input/__demo__/InputAutoWidth.vue
index 5c345161..cd67c284 100644
--- a/packages/opendesign/src/components/input/__demo__/InputAutoWidth.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputAutoWidth.vue
@@ -2,14 +2,17 @@
 import { ref } from 'vue';
 import { OInput } from '../index';
 
-const val1 = ref('this is input value this is input value');
-const val2 = ref('123');
+const val1 = ref('max width: 300px');
+const val2 = ref('min width: 100px');
+setTimeout(() => {
+  val1.value = '123';
+}, 2000);
 </script>
 <template>
   <h4>Auto Width</h4>
   <section>
     <OInput v-model="val1" auto-width style="max-width: 300px" />
-    <OInput v-model="val2" auto-width />
+    <OInput v-model="val2" auto-width style="min-width: 200px" />
   </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/input/style/index.scss b/packages/opendesign/src/components/input/style/index.scss
index 96650678..3f638475 100644
--- a/packages/opendesign/src/components/input/style/index.scss
+++ b/packages/opendesign/src/components/input/style/index.scss
@@ -16,7 +16,8 @@
   border: 1px solid var(--input-border);
   background-color: var(--input-bg);
   width: 100%;
-  overflow: auto;
+  overflow: hidden;
+  position: relative;
   &:hover {
     border-color: var(--input-border-hover);
     background-color: var(--input-bg-hover);
@@ -43,19 +44,12 @@
   cursor: inherit;
   background-color: transparent;
   display: inline-flex;
-  width: 100%;
   caret-color: var(--o-color-primary1);
   padding: 0;
   line-height: inherit;
   height: 100%;
+  width: 100%;
   font-size: inherit;
-  &.is-auto-size {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-  }
 }
 
 .o-input-clear {
@@ -76,7 +70,6 @@
   .o-input-suffix-wrap + & {
     position: absolute;
     right: 0;
-    height: 100%;
   }
 }
 
@@ -111,6 +104,7 @@
 }
 .o-input-suffix {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   position: relative;
   margin-left: 4px;
@@ -150,6 +144,10 @@
   align-items: center;
   height: 100%;
   visibility: hidden;
+  position: absolute;
+  left: 0;
+  top: 100%;
+  pointer-events: none;
 }
 
 .o-input-prepend {
-- 
Gitee


From 3835d9cc0eafd1758bfe0fb1e8d95912db40247f Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 13 Feb 2023 22:59:22 +0800
Subject: [PATCH 05/10] =?UTF-8?q?textarea=E6=94=AF=E6=8C=81=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/input/OInput.vue           | 56 ++++++++++---------
 .../input/__demo__/InputAutoWidth.vue         | 10 +++-
 .../opendesign/src/components/input/input.ts  | 11 ----
 .../src/components/input/style/index.scss     |  2 +-
 .../src/components/textarea/OTextarea.vue     | 24 +++++++-
 .../textarea/__demo__/IndexTextarea.vue       |  6 +-
 .../textarea/__demo__/TextareaAutoHeight.vue  | 28 ++++++++++
 .../src/components/textarea/style/index.scss  | 42 +++++++++++---
 8 files changed, 127 insertions(+), 52 deletions(-)
 create mode 100644 packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue

diff --git a/packages/opendesign/src/components/input/OInput.vue b/packages/opendesign/src/components/input/OInput.vue
index b8847d7a..9a2d7f9a 100644
--- a/packages/opendesign/src/components/input/OInput.vue
+++ b/packages/opendesign/src/components/input/OInput.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, computed, watch, onMounted } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { defaultSize, defaultShape, SizeT, ShapeT } from '../_shared/global';
 import { isFunction } from '../_shared/is';
 import { IconX } from '../icons';
 import { trigger } from '../_shared/event';
 import { Enter } from '../_shared/keycode';
-import { toInputString, getInputAutoWidth } from './input';
+import { toInputString } from './input';
 import { OResizeObserver } from '../resize-observer';
 
 interface InputPropT {
@@ -205,7 +205,7 @@ const onMouseDown = (e: MouseEvent) => {
 };
 
 const onMirrorResize = (en: ResizeObserverEntry) => {
-  inputWidth.value = en.contentRect.width;
+  inputWidth.value = en.target.clientWidth;
 };
 </script>
 <template>
@@ -238,30 +238,32 @@ const onMirrorResize = (en: ResizeObserverEntry) => {
       <div v-if="$slots.prefix" class="o-input-prefix">
         <slot name="prefix"></slot>
       </div>
-      <input
-        ref="inputRef"
-        :value="displayValue"
-        :type="type"
-        :placeholder="props.placeholder"
-        class="o-input-input"
-        :class="{
-          'is-auto-size': props.autoWidth,
-        }"
-        :style="{
-          width: inputWidth + 'px',
-        }"
-        :readonly="props.readonly"
-        :disabled="props.disabled"
-        @focus="onFocus"
-        @blur="onBlur"
-        @input="onInput"
-        @keydown="onKeyDown"
-        @compositionstart="onCompositionStart"
-        @compositionend="onCompositionEnd"
-      />
-      <OResizeObserver v-if="props.autoWidth" @resize="onMirrorResize">
-        <div class="o-input-mirror">{{ inputText }}</div>
-      </OResizeObserver>
+      <div class="o-input-auto-wrap">
+        <input
+          ref="inputRef"
+          :value="displayValue"
+          :type="type"
+          :placeholder="props.placeholder"
+          class="o-input-input"
+          :class="{
+            'is-auto-size': props.autoWidth,
+          }"
+          :style="{
+            width: inputWidth + 'px',
+          }"
+          :readonly="props.readonly"
+          :disabled="props.disabled"
+          @focus="onFocus"
+          @blur="onBlur"
+          @input="onInput"
+          @keydown="onKeyDown"
+          @compositionstart="onCompositionStart"
+          @compositionend="onCompositionEnd"
+        />
+        <OResizeObserver v-if="props.autoWidth" @resize="onMirrorResize">
+          <div class="o-input-mirror">{{ inputText }}</div>
+        </OResizeObserver>
+      </div>
       <div v-if="props.clearable || $slots.suffix" class="o-input-suffix">
         <span v-if="$slots.suffix" class="o-input-suffix-wrap">
           <slot name="suffix"></slot>
diff --git a/packages/opendesign/src/components/input/__demo__/InputAutoWidth.vue b/packages/opendesign/src/components/input/__demo__/InputAutoWidth.vue
index cd67c284..ebb62b94 100644
--- a/packages/opendesign/src/components/input/__demo__/InputAutoWidth.vue
+++ b/packages/opendesign/src/components/input/__demo__/InputAutoWidth.vue
@@ -11,8 +11,14 @@ setTimeout(() => {
 <template>
   <h4>Auto Width</h4>
   <section>
-    <OInput v-model="val1" auto-width style="max-width: 300px" />
-    <OInput v-model="val2" auto-width style="min-width: 200px" />
+    <div>
+      max-width: 300px:
+      <OInput v-model="val1" auto-width style="max-width: 300px" />
+    </div>
+    <div>
+      min-width: 200px:
+      <OInput v-model="val2" auto-width style="min-width: 200px" />
+    </div>
   </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/input/input.ts b/packages/opendesign/src/components/input/input.ts
index 2128d65d..e2148989 100644
--- a/packages/opendesign/src/components/input/input.ts
+++ b/packages/opendesign/src/components/input/input.ts
@@ -6,14 +6,3 @@ export function toInputString(val: unknown): string {
   }
   return String(val);
 }
-
-export function getInputAutoWidth(inputEl: HTMLElement) {
-  if (inputEl) {
-    const { clientWidth, scrollWidth } = inputEl;
-    if (clientWidth < scrollWidth) {
-      return `${scrollWidth}` + 'px';
-    }
-  }
-
-  return '';
-}
\ No newline at end of file
diff --git a/packages/opendesign/src/components/input/style/index.scss b/packages/opendesign/src/components/input/style/index.scss
index 3f638475..3a970d9f 100644
--- a/packages/opendesign/src/components/input/style/index.scss
+++ b/packages/opendesign/src/components/input/style/index.scss
@@ -134,7 +134,7 @@
   border-bottom-right-radius: var(--input-append-prepend-border-radius);
 }
 
-.o-input-input-wrap {
+.o-input-auto-wrap {
   position: relative;
 }
 .o-input-mirror {
diff --git a/packages/opendesign/src/components/textarea/OTextarea.vue b/packages/opendesign/src/components/textarea/OTextarea.vue
index 1f0b9413..64675775 100644
--- a/packages/opendesign/src/components/textarea/OTextarea.vue
+++ b/packages/opendesign/src/components/textarea/OTextarea.vue
@@ -5,6 +5,7 @@ import { isFunction } from '../_shared/is';
 import { IconX } from '../icons';
 import { trigger } from '../_shared/event';
 import { toInputString } from './textarea';
+import { OResizeObserver } from '../resize-observer';
 
 interface InputPropT {
   /**
@@ -65,6 +66,10 @@ interface InputPropT {
    * 超过最大字符长度时是否允许输入
    */
   inputOutLimit?: boolean;
+  /**
+   * 是否自动计算高度
+   */
+  autoHeight?: boolean;
   /**
    * 获取长度方法
    */
@@ -100,20 +105,25 @@ const emits = defineEmits<{
   (e: 'keydown', value: string, evt: KeyboardEvent): void;
 }>();
 
+const textareaHeight = ref();
+
 const textareaRef = ref<HTMLElement | null>(null);
 // 数字输入框当前值
 const realValue = ref(toInputString(props.modelValue ?? props.defaultValue));
+// 当前textarea文本值
+const textareaText = ref(realValue.value);
 // 监听属性变化，刷新值
 watch(
   () => props.modelValue,
   (val) => {
     // console.log('watch', val);
     realValue.value = toInputString(val);
+    textareaText.value = `${realValue.value}\r\n`;
   }
 );
 
 const resizeValue = computed(() => {
-  return props.disabled ? 'none' : props.resize;
+  return props.autoHeight || props.disabled ? 'none' : props.resize;
 });
 
 const getValueLength = (val: string) => {
@@ -169,6 +179,7 @@ const onInput = (e: Event) => {
   }
   const val = (e.target as HTMLInputElement)?.value;
   emits('input', val, e);
+  textareaText.value = `${val}\r\n`;
 
   emits('update:modelValue', val);
 };
@@ -209,6 +220,11 @@ const onMouseDown = (e: MouseEvent) => {
     clickInside = true;
   }
 };
+
+const onMirrorResize = (en: ResizeObserverEntry) => {
+  textareaHeight.value = en.target.clientHeight;
+  console.log(en);
+};
 </script>
 <template>
   <label
@@ -220,6 +236,7 @@ const onMouseDown = (e: MouseEvent) => {
       {
         'o-textarea-disabled': props.disabled,
         'o-textarea-focus': isFocus,
+        'o-textarea-auto-height': props.autoHeight,
       },
     ]"
     @mousedown="onMouseDown"
@@ -239,6 +256,7 @@ const onMouseDown = (e: MouseEvent) => {
         :disabled="props.disabled"
         :style="{
           resize: resizeValue,
+          height: textareaHeight + 'px',
         }"
         :maxlength="props.inputOutLimit ? '' : props.maxLength"
         :rows="props.rows"
@@ -250,6 +268,10 @@ const onMouseDown = (e: MouseEvent) => {
         @compositionstart="onCompositionStart"
         @compositionend="onCompositionEnd"
       ></textarea>
+
+      <OResizeObserver v-if="props.autoHeight" @resize="onMirrorResize">
+        <div class="o-textarea-mirror">{{ textareaText }}</div>
+      </OResizeObserver>
       <div v-if="props.clearable" class="o-textarea-clear" @click="clearClick"><IconX class="o-textarea-clear-icon" /></div>
       <div v-if="props.maxLength" class="o-textarea-limit">
         <span :class="{ 'is-error': isOutLengthLimit }">{{ currentLength }}</span
diff --git a/packages/opendesign/src/components/textarea/__demo__/IndexTextarea.vue b/packages/opendesign/src/components/textarea/__demo__/IndexTextarea.vue
index 7c00eccc..19bc4d8e 100644
--- a/packages/opendesign/src/components/textarea/__demo__/IndexTextarea.vue
+++ b/packages/opendesign/src/components/textarea/__demo__/IndexTextarea.vue
@@ -2,11 +2,13 @@
 import '../style';
 import '../../option/style';
 
-import TextareaBasic from './TextareaBasic.vue';
+// import TextareaBasic from './TextareaBasic.vue';
+import TextareaAutoHeight from './TextareaAutoHeight.vue';
 </script>
 <template>
   <div class="page-demo">
-    <TextareaBasic />
+    <!-- <TextareaBasic /> -->
+    <TextareaAutoHeight />
   </div>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue b/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue
new file mode 100644
index 00000000..6db26272
--- /dev/null
+++ b/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OTextarea } from '../index';
+
+const val1 = ref('max width: 300px <OTextarea v-model="val1" auto-height /> <OTextarea v-model="val1" auto-height />');
+const val2 = ref('min width: 100px');
+// setTimeout(() => {
+//   val1.value = '123';
+//   val2.value = 'max width: 300px <OTextarea v-model="val1" auto-height />';
+// }, 2000);
+</script>
+<template>
+  <h4>Auto Width</h4>
+  <section>
+    <!-- <div>
+      <OTextarea v-model="val1" auto-height />
+    </div> -->
+    <div>
+      max-height: 120px:
+      <OTextarea v-model="val1" auto-height style="max-height: 120px" />
+    </div>
+    <div>
+      min-width: 200px:
+      <OTextarea v-model="val2" auto-height style="min-height: 120px" />
+    </div>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/textarea/style/index.scss b/packages/opendesign/src/components/textarea/style/index.scss
index a0449182..ef7a7f5f 100644
--- a/packages/opendesign/src/components/textarea/style/index.scss
+++ b/packages/opendesign/src/components/textarea/style/index.scss
@@ -10,11 +10,14 @@
 
 .o-textarea-wrap {
   display: flex;
+  padding-top: var(--textarea-padding-v);
+  padding-bottom: var(--textarea-padding-v);
   border-radius: var(--textarea-radius);
   border: 1px solid var(--textarea-border);
   background-color: var(--textarea-bg);
   position: relative;
-
+  flex-direction: column;
+  justify-items: stretch;
   &:hover {
     border-color: var(--textarea-border-hover);
     background-color: var(--textarea-bg-hover);
@@ -26,7 +29,8 @@
 }
 
 .o-textarea-textarea {
-  padding: var(--textarea-padding);
+  padding-left: var(--textarea-padding-h);
+  padding-right: var(--textarea-padding-h);
   outline: none;
   border: none;
   color: inherit;
@@ -36,9 +40,9 @@
   width: 100%;
   caret-color: var(--o-color-primary1);
   line-height: inherit;
-  .o-textarea-disabled & {
-    resize: none;
-  }
+
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
 }
 
 .o-textarea-clear {
@@ -101,10 +105,30 @@
   }
 }
 
+.o-textarea-mirror {
+  padding-left: var(--textarea-padding-h);
+  padding-right: var(--textarea-padding-h);
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  line-height: inherit;
+  display: inline-flex;
+  // align-items: center;
+  flex-direction: column;
+  width: 100%;
+  // visibility: hidden;
+  min-height: var(--textarea-text-height);
+  position: absolute;
+  left: 100%;
+  top: 0;
+  pointer-events: none;
+  background-color: rgba($color: #ff0000, $alpha: 0.5);
+}
+
 .o-textarea-size-small {
   --textarea-text-size: var(--textarea-text-size-s);
   --textarea-text-height: var(--textarea-text-height-s);
-  --textarea-padding: 2px 8px;
+  --textarea-padding-v: 2px;
+  --textarea-padding-h: 8px;
   --textarea-radius: var(--textarea-radius-s);
   &.o-textarea-shape-round {
     --textarea-radius: 12px;
@@ -113,7 +137,8 @@
 .o-textarea-size-normal {
   --textarea-text-size: var(--textarea-text-size-m);
   --textarea-text-height: var(--textarea-text-height-m);
-  --textarea-padding: 4px 12px;
+  --textarea-padding-v: 4px;
+  --textarea-padding-h: 12px;
   --textarea-radius: var(--textarea-radius-m);
   &.o-textarea-shape-round {
     --textarea-radius: 16px;
@@ -122,7 +147,8 @@
 .o-textarea-size-large {
   --textarea-text-size: var(--textarea-text-size-l);
   --textarea-text-height: var(--textarea-text-height-l);
-  --textarea-padding: 6px 12px;
+  --textarea-padding-v: 6px;
+  --textarea-padding-h: 12px;
   --textarea-radius: var(--textarea-radius-l);
   &.o-textarea-shape-round {
     --textarea-radius: 20px;
-- 
Gitee


From f76764c4cce79d2338d1a2443f6c1d82c65c38b5 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 13 Feb 2023 23:00:18 +0800
Subject: [PATCH 06/10] fix

---
 .../components/textarea/__demo__/IndexTextarea.vue   |  4 ++--
 .../textarea/__demo__/TextareaAutoHeight.vue         | 12 ++++++------
 .../src/components/textarea/style/index.scss         |  2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/opendesign/src/components/textarea/__demo__/IndexTextarea.vue b/packages/opendesign/src/components/textarea/__demo__/IndexTextarea.vue
index 19bc4d8e..20a9d3be 100644
--- a/packages/opendesign/src/components/textarea/__demo__/IndexTextarea.vue
+++ b/packages/opendesign/src/components/textarea/__demo__/IndexTextarea.vue
@@ -2,12 +2,12 @@
 import '../style';
 import '../../option/style';
 
-// import TextareaBasic from './TextareaBasic.vue';
+import TextareaBasic from './TextareaBasic.vue';
 import TextareaAutoHeight from './TextareaAutoHeight.vue';
 </script>
 <template>
   <div class="page-demo">
-    <!-- <TextareaBasic /> -->
+    <TextareaBasic />
     <TextareaAutoHeight />
   </div>
 </template>
diff --git a/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue b/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue
index 6db26272..b7952938 100644
--- a/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue
+++ b/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue
@@ -4,17 +4,17 @@ import { OTextarea } from '../index';
 
 const val1 = ref('max width: 300px <OTextarea v-model="val1" auto-height /> <OTextarea v-model="val1" auto-height />');
 const val2 = ref('min width: 100px');
-// setTimeout(() => {
-//   val1.value = '123';
-//   val2.value = 'max width: 300px <OTextarea v-model="val1" auto-height />';
-// }, 2000);
+setTimeout(() => {
+  val1.value = '123';
+  val2.value = 'max width: 300px <OTextarea v-model="val1" auto-height />';
+}, 2000);
 </script>
 <template>
   <h4>Auto Width</h4>
   <section>
-    <!-- <div>
+    <div>
       <OTextarea v-model="val1" auto-height />
-    </div> -->
+    </div>
     <div>
       max-height: 120px:
       <OTextarea v-model="val1" auto-height style="max-height: 120px" />
diff --git a/packages/opendesign/src/components/textarea/style/index.scss b/packages/opendesign/src/components/textarea/style/index.scss
index ef7a7f5f..9c67f8d6 100644
--- a/packages/opendesign/src/components/textarea/style/index.scss
+++ b/packages/opendesign/src/components/textarea/style/index.scss
@@ -115,7 +115,7 @@
   // align-items: center;
   flex-direction: column;
   width: 100%;
-  // visibility: hidden;
+  visibility: hidden;
   min-height: var(--textarea-text-height);
   position: absolute;
   left: 100%;
-- 
Gitee


From 9ab2a2b05f83015276e7b6083096b753af462e1f Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 14 Feb 2023 14:39:12 +0800
Subject: [PATCH 07/10] fix

---
 packages/opendesign/src/components/textarea/OTextarea.vue       | 1 -
 .../src/components/textarea/__demo__/TextareaAutoHeight.vue     | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/opendesign/src/components/textarea/OTextarea.vue b/packages/opendesign/src/components/textarea/OTextarea.vue
index 64675775..e20e96dc 100644
--- a/packages/opendesign/src/components/textarea/OTextarea.vue
+++ b/packages/opendesign/src/components/textarea/OTextarea.vue
@@ -223,7 +223,6 @@ const onMouseDown = (e: MouseEvent) => {
 
 const onMirrorResize = (en: ResizeObserverEntry) => {
   textareaHeight.value = en.target.clientHeight;
-  console.log(en);
 };
 </script>
 <template>
diff --git a/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue b/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue
index b7952938..3eea2a6c 100644
--- a/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue
+++ b/packages/opendesign/src/components/textarea/__demo__/TextareaAutoHeight.vue
@@ -20,7 +20,7 @@ setTimeout(() => {
       <OTextarea v-model="val1" auto-height style="max-height: 120px" />
     </div>
     <div>
-      min-width: 200px:
+      min-height: 200px:
       <OTextarea v-model="val2" auto-height style="min-height: 120px" />
     </div>
   </section>
-- 
Gitee


From 92954efa86a8967f631f2732b0e5a53fff886c0c Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 14 Feb 2023 14:39:18 +0800
Subject: [PATCH 08/10] scrollbar

---
 .../src/components/scrollbar/OScrollbar.vue   |  5 +++++
 .../scrollbar/__demo__/IndexScrollbar.vue     |  9 ++++++++
 .../scrollbar/__demo__/ScrollbarBasic.vue     |  9 ++++++++
 .../src/components/scrollbar/index.ts         | 11 ++++++++++
 .../src/components/scrollbar/scrollbar.ts     | 22 +++++++++++++++++++
 .../src/components/scrollbar/style/index.scss |  4 ++++
 .../src/components/scrollbar/style/index.ts   |  2 ++
 .../src/components/scrollbar/style/var.scss   |  2 ++
 8 files changed, 64 insertions(+)
 create mode 100644 packages/opendesign/src/components/scrollbar/OScrollbar.vue
 create mode 100644 packages/opendesign/src/components/scrollbar/__demo__/IndexScrollbar.vue
 create mode 100644 packages/opendesign/src/components/scrollbar/__demo__/ScrollbarBasic.vue
 create mode 100644 packages/opendesign/src/components/scrollbar/index.ts
 create mode 100644 packages/opendesign/src/components/scrollbar/scrollbar.ts
 create mode 100644 packages/opendesign/src/components/scrollbar/style/index.scss
 create mode 100644 packages/opendesign/src/components/scrollbar/style/index.ts
 create mode 100644 packages/opendesign/src/components/scrollbar/style/var.scss

diff --git a/packages/opendesign/src/components/scrollbar/OScrollbar.vue b/packages/opendesign/src/components/scrollbar/OScrollbar.vue
new file mode 100644
index 00000000..a3891b87
--- /dev/null
+++ b/packages/opendesign/src/components/scrollbar/OScrollbar.vue
@@ -0,0 +1,5 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div></div>
+</template>
diff --git a/packages/opendesign/src/components/scrollbar/__demo__/IndexScrollbar.vue b/packages/opendesign/src/components/scrollbar/__demo__/IndexScrollbar.vue
new file mode 100644
index 00000000..2ec5dc7c
--- /dev/null
+++ b/packages/opendesign/src/components/scrollbar/__demo__/IndexScrollbar.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import ScrollbarBasic from './ScrollbarBasic.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <ScrollbarBasic />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/scrollbar/__demo__/ScrollbarBasic.vue b/packages/opendesign/src/components/scrollbar/__demo__/ScrollbarBasic.vue
new file mode 100644
index 00000000..39b8f290
--- /dev/null
+++ b/packages/opendesign/src/components/scrollbar/__demo__/ScrollbarBasic.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { OScrollbar } from '../index';
+</script>
+<template>
+  <h4>resize observer</h4>
+
+  <OScrollbar />
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/opendesign/src/components/scrollbar/index.ts b/packages/opendesign/src/components/scrollbar/index.ts
new file mode 100644
index 00000000..d55162bd
--- /dev/null
+++ b/packages/opendesign/src/components/scrollbar/index.ts
@@ -0,0 +1,11 @@
+import type { App } from 'vue';
+
+import _OScrollbar from './OScrollbar.vue';
+
+const OScrollbar = Object.assign(_OScrollbar, {
+  install(app: App) {
+    app.component(_OScrollbar.name, _OScrollbar);
+  },
+});
+
+export { OScrollbar };
diff --git a/packages/opendesign/src/components/scrollbar/scrollbar.ts b/packages/opendesign/src/components/scrollbar/scrollbar.ts
new file mode 100644
index 00000000..7d0993fe
--- /dev/null
+++ b/packages/opendesign/src/components/scrollbar/scrollbar.ts
@@ -0,0 +1,22 @@
+import { defineComponent, cloneVNode, withDirectives } from 'vue';
+import { useReiszeObserverDirective } from '../hooks';
+
+/**
+ * 子元素resize监听
+ * 如果有多个子元素，每个子元素都会被监听到
+ */
+export default defineComponent({
+  name: 'OResizeObserver',
+  emits: ['resize'],
+  setup(props, { emit, slots }) {
+    const { vResizeObserver } = useReiszeObserverDirective((entry: ResizeObserverEntry, isFirst: boolean) => {
+      // 触发resize事件
+      emit('resize', entry, isFirst);
+    });
+
+    return () => {
+      const children = slots.default?.();
+      return children?.map((item) => withDirectives(cloneVNode(item), [[vResizeObserver]]));
+    };
+  },
+});
diff --git a/packages/opendesign/src/components/scrollbar/style/index.scss b/packages/opendesign/src/components/scrollbar/style/index.scss
new file mode 100644
index 00000000..bce181a7
--- /dev/null
+++ b/packages/opendesign/src/components/scrollbar/style/index.scss
@@ -0,0 +1,4 @@
+@use './var.scss';
+
+.o-scrollbar {
+}
diff --git a/packages/opendesign/src/components/scrollbar/style/index.ts b/packages/opendesign/src/components/scrollbar/style/index.ts
new file mode 100644
index 00000000..591b2fbd
--- /dev/null
+++ b/packages/opendesign/src/components/scrollbar/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/scrollbar/style/var.scss b/packages/opendesign/src/components/scrollbar/style/var.scss
new file mode 100644
index 00000000..8b9ec5be
--- /dev/null
+++ b/packages/opendesign/src/components/scrollbar/style/var.scss
@@ -0,0 +1,2 @@
+.o-scrollbar {
+}
-- 
Gitee


From e253710126f0896fc33a28ed1388c6fb1e471a2d Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 14 Feb 2023 14:50:40 +0800
Subject: [PATCH 09/10] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/textarea/style/index.scss        | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/opendesign/src/components/textarea/style/index.scss b/packages/opendesign/src/components/textarea/style/index.scss
index 9c67f8d6..1ce6ab27 100644
--- a/packages/opendesign/src/components/textarea/style/index.scss
+++ b/packages/opendesign/src/components/textarea/style/index.scss
@@ -10,8 +10,6 @@
 
 .o-textarea-wrap {
   display: flex;
-  padding-top: var(--textarea-padding-v);
-  padding-bottom: var(--textarea-padding-v);
   border-radius: var(--textarea-radius);
   border: 1px solid var(--textarea-border);
   background-color: var(--textarea-bg);
@@ -29,8 +27,7 @@
 }
 
 .o-textarea-textarea {
-  padding-left: var(--textarea-padding-h);
-  padding-right: var(--textarea-padding-h);
+  padding: var(--textarea-padding-v) var(--textarea-padding-h);
   outline: none;
   border: none;
   color: inherit;
@@ -40,6 +37,7 @@
   width: 100%;
   caret-color: var(--o-color-primary1);
   line-height: inherit;
+  min-height: calc(var(--textarea-text-height) + var(--textarea-padding-v) * 2);
 
   white-space: pre-wrap;
   overflow-wrap: break-word;
@@ -106,13 +104,11 @@
 }
 
 .o-textarea-mirror {
-  padding-left: var(--textarea-padding-h);
-  padding-right: var(--textarea-padding-h);
+  padding: var(--textarea-padding-v) var(--textarea-padding-h);
   white-space: pre-wrap;
   overflow-wrap: break-word;
   line-height: inherit;
   display: inline-flex;
-  // align-items: center;
   flex-direction: column;
   width: 100%;
   visibility: hidden;
@@ -129,6 +125,7 @@
   --textarea-text-height: var(--textarea-text-height-s);
   --textarea-padding-v: 2px;
   --textarea-padding-h: 8px;
+  --textarea-padding: 2px 8px;
   --textarea-radius: var(--textarea-radius-s);
   &.o-textarea-shape-round {
     --textarea-radius: 12px;
@@ -139,6 +136,7 @@
   --textarea-text-height: var(--textarea-text-height-m);
   --textarea-padding-v: 4px;
   --textarea-padding-h: 12px;
+  --textarea-padding: 4px 12px;
   --textarea-radius: var(--textarea-radius-m);
   &.o-textarea-shape-round {
     --textarea-radius: 16px;
@@ -149,6 +147,7 @@
   --textarea-text-height: var(--textarea-text-height-l);
   --textarea-padding-v: 6px;
   --textarea-padding-h: 12px;
+  --textarea-padding: 6px 12px;
   --textarea-radius: var(--textarea-radius-l);
   &.o-textarea-shape-round {
     --textarea-radius: 20px;
-- 
Gitee


From 696da7900178fd5d22a763e9c1b91d66ede83df6 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 14 Feb 2023 15:42:29 +0800
Subject: [PATCH 10/10] fix

---
 .../components/input-number/OInputNumber.vue  | 21 ++++++-----
 .../components/input-number/input-number.ts   |  1 +
 .../components/input-number/style/index.scss  | 35 ++++++++++---------
 3 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/packages/opendesign/src/components/input-number/OInputNumber.vue b/packages/opendesign/src/components/input-number/OInputNumber.vue
index 73a10659..973cccfd 100644
--- a/packages/opendesign/src/components/input-number/OInputNumber.vue
+++ b/packages/opendesign/src/components/input-number/OInputNumber.vue
@@ -106,6 +106,10 @@ const emits = defineEmits<{
 const currentValue = ref<number | string | undefined>(props.modelValue ?? props.defaultValue);
 const isValid = ref(isValidNumber(currentValue.value, props.min, props.max));
 
+let numberValue = getRealValue(currentValue.value);
+let lastNumberValue = numberValue;
+let lastInputValue = currentValue.value;
+
 watch(
   () => props.modelValue,
   (val) => {
@@ -115,14 +119,13 @@ watch(
     } else {
       currentValue.value = val;
     }
+    numberValue = getRealValue(currentValue.value);
+    lastNumberValue = numberValue;
+    lastInputValue = currentValue.value;
     // console.log('watch', val);
   }
 );
 
-let numberValue = getRealValue(currentValue.value);
-let lastNumberValue = numberValue;
-let lastChangedNumberValue = numberValue;
-
 const canAdd = computed(() => {
   if (props.disabled) {
     return false;
@@ -158,11 +161,11 @@ const updateValue = (val: string) => {
 
   emits('update:modelValue', numberValue);
 
-  if (numberValue !== lastChangedNumberValue) {
+  if (numberValue !== lastNumberValue) {
     emits('change', numberValue);
   }
 
-  if (numberValue === lastNumberValue) {
+  if (val !== lastInputValue) {
     if (isFunction(props.format)) {
       currentValue.value = props.format(numberValue);
     } else {
@@ -172,7 +175,7 @@ const updateValue = (val: string) => {
   }
 
   lastNumberValue = numberValue;
-  lastChangedNumberValue = numberValue;
+  lastInputValue = currentValue.value;
   return numberValue;
 };
 
@@ -255,7 +258,7 @@ const controlClick = (type: 'plus' | 'minus', e: MouseEvent) => {
     <template v-if="['both', 'left'].includes(props.controls)" #prepend>
       <div
         v-if="props.controls === 'both'"
-        class="o-input-number-btn prepend"
+        class="o-input-number-btn both-left"
         :class="{
           'is-disabled': !canMinus,
         }"
@@ -287,7 +290,7 @@ const controlClick = (type: 'plus' | 'minus', e: MouseEvent) => {
     <template v-if="['both', 'right'].includes(props.controls)" #append>
       <div
         v-if="props.controls === 'both'"
-        class="o-input-number-btn append"
+        class="o-input-number-btn both-right"
         :class="{
           'is-disabled': !canAdd,
         }"
diff --git a/packages/opendesign/src/components/input-number/input-number.ts b/packages/opendesign/src/components/input-number/input-number.ts
index 3d24dcf4..a863fa60 100644
--- a/packages/opendesign/src/components/input-number/input-number.ts
+++ b/packages/opendesign/src/components/input-number/input-number.ts
@@ -44,6 +44,7 @@ export function correctValue(val: string | number, lastVal: number, min?: number
     } if (!isUndefined(min) && v < min) {
       return min;
     }
+    return v;
   }
   return lastVal;
 }
\ No newline at end of file
diff --git a/packages/opendesign/src/components/input-number/style/index.scss b/packages/opendesign/src/components/input-number/style/index.scss
index b9806789..666fea56 100644
--- a/packages/opendesign/src/components/input-number/style/index.scss
+++ b/packages/opendesign/src/components/input-number/style/index.scss
@@ -9,13 +9,6 @@
     overflow: hidden;
   }
 
-  // &.is-disabled {
-  //   .o-input-prepend,
-  //   .o-input-append {
-  //     background-color: var(--input-number-btn-bg-disabled);
-  //     color: var(--input-number-btn-color-disabled);
-  //   }
-  // }
   &.is-invalid {
     .o-input-input {
       text-decoration: line-through;
@@ -32,21 +25,24 @@
   flex-wrap: wrap;
   color: var(--input-number-btn-color);
 
-  &:not(.is-vertical):hover {
-    color: var(--input-number-btn-color-hover);
-    background-color: var(--input-number-btn-bg);
-  }
-  &.is-disabled {
-    cursor: not-allowed;
-    background-color: var(--input-number-btn-bg-disabled);
-    color: var(--input-number-btn-color-disabled);
+  &.both-left,
+  &.both-right {
+    &:hover {
+      color: var(--input-number-btn-color-hover);
+      background-color: var(--input-number-btn-bg);
+    }
+    &.is-disabled {
+      cursor: not-allowed;
+      background-color: var(--input-number-btn-bg-disabled);
+      color: var(--input-number-btn-color-disabled);
+    }
   }
 
   .o-input-shape-round & {
-    &.append {
+    &.both-right {
       padding-right: 2px;
     }
-    &.prepend {
+    &.both-left {
       padding-left: 2px;
     }
   }
@@ -65,6 +61,11 @@
     color: var(--input-number-btn-color-hover);
     background-color: var(--input-number-btn-bg);
   }
+  &.is-disabled {
+    cursor: not-allowed;
+    background-color: var(--input-number-btn-bg-disabled);
+    color: var(--input-number-btn-color-disabled);
+  }
 }
 .o-input-number-icon-minus {
   position: absolute;
-- 
Gitee