fix(input): readonly prop should only be Boolean due to Vue casting…

… rule
tusen-ai · Sep 27, 2024 · b8d859c · b8d859c
1 parent 5038519
commit b8d859c
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 29 deletions.
diff --git a/src/input/demos/enUS/disabled.demo.vue b/src/input/demos/enUS/disabled.demo.vue
@@ -1,5 +1,5 @@
 <markdown>
-# Disabled
+# Disabled & Readonly
 
 Inputs can also be disabled.
 </markdown>
@@ -12,7 +12,8 @@ export default defineComponent({
   setup() {
     return {
       FlashOutline,
-      active: ref(false)
+      disabled: ref(false),
+      readonly: ref(false)
     }
   }
 })
@@ -24,21 +25,35 @@ export default defineComponent({
       type="text"
       size="small"
       placeholder="Oops! It is disabled."
-      :disabled="!active"
       round
+      clearable
+      :disabled="disabled"
+      :readonly="readonly"
     />
     <n-input
       type="textarea"
       size="small"
       placeholder="Oops! It is disabled."
-      :disabled="!active"
       round
+      clearable
+      :disabled="disabled"
+      :readonly="readonly"
     />
-    <n-input pair separator="to" clearable :disabled="!active">
-      <template #affix>
+    <n-input
+      pair
+      separator="to"
+      :placeholder="['from', 'to']"
+      clearable
+      :disabled="disabled"
+      :readonly="readonly"
+    >
+      <template #prefix>
         <n-icon :component="FlashOutline" />
       </template>
     </n-input>
-    <n-switch v-model:value="active" />
+    <n-flex>
+      <n-flex>Disabled <n-switch v-model:value="disabled" /> </n-flex>
+      <n-flex>Readonly <n-switch v-model:value="readonly" /> </n-flex>
+    </n-flex>
   </n-space>
 </template>
diff --git a/src/input/demos/zhCN/disabled.demo.vue b/src/input/demos/zhCN/disabled.demo.vue
@@ -1,5 +1,5 @@
 <markdown>
-# 禁用
+# 禁用 & 只读
 
 文本输入可以被禁用。
 </markdown>
@@ -12,7 +12,8 @@ export default defineComponent({
   setup() {
     return {
       FlashOutline,
-      active: ref(false)
+      disabled: ref(false),
+      readonly: ref(false)
     }
   }
 })
@@ -24,21 +25,35 @@ export default defineComponent({
       type="text"
       size="small"
       placeholder="噢！它被禁用了。"
-      :disabled="!active"
       round
+      clearable
+      :disabled="disabled"
+      :readonly="readonly"
     />
     <n-input
       type="textarea"
       size="small"
       placeholder="噢！它被禁用了。"
-      :disabled="!active"
       round
+      clearable
+      :disabled="disabled"
+      :readonly="readonly"
     />
-    <n-input pair separator="to" clearable :disabled="!active">
-      <template #affix>
+    <n-input
+      pair
+      separator="to"
+      :placeholder="['from', 'to']"
+      clearable
+      :disabled="disabled"
+      :readonly="readonly"
+    >
+      <template #prefix>
         <n-icon :component="FlashOutline" />
       </template>
     </n-input>
-    <n-switch v-model:value="active" />
+    <n-flex>
+      <n-flex>禁用 <n-switch v-model:value="disabled" /> </n-flex>
+      <n-flex>只读 <n-switch v-model:value="readonly" /> </n-flex>
+    </n-flex>
   </n-space>
 </template>
diff --git a/src/input/src/Input.tsx b/src/input/src/Input.tsx
@@ -102,10 +102,7 @@ export const inputProps = {
   },
   pair: Boolean,
   separator: String,
-  readonly: {
-    type: [String, Boolean],
-    default: false
-  },
+  readonly: Boolean,
   passivelyActivated: Boolean,
   showPasswordOn: String as PropType<'mousedown' | 'click'>,
   stateful: {
@@ -257,8 +254,8 @@ export default defineComponent({
       return (
         !isComposing
         && (isEmptyInputValue(mergedValue)
-          || (Array.isArray(mergedValue) && isEmptyInputValue(mergedValue[0])))
-          && mergedPlaceholder[0]
+        || (Array.isArray(mergedValue) && isEmptyInputValue(mergedValue[0])))
+        && mergedPlaceholder[0]
       )
     })
     const showPlaceholder2Ref = computed(() => {
@@ -269,7 +266,7 @@ export default defineComponent({
         !isComposing
         && mergedPlaceholder[1]
         && (isEmptyInputValue(mergedValue)
-          || (Array.isArray(mergedValue) && isEmptyInputValue(mergedValue[1])))
+        || (Array.isArray(mergedValue) && isEmptyInputValue(mergedValue[1])))
       )
     })
     // focus
@@ -575,8 +572,8 @@ export default defineComponent({
         !(
           e.relatedTarget !== null
           && (e.relatedTarget === inputElRef.value
-            || e.relatedTarget === inputEl2Ref.value
-            || e.relatedTarget === textareaElRef.value)
+          || e.relatedTarget === inputEl2Ref.value
+          || e.relatedTarget === textareaElRef.value)
         )
       ) {
         activatedRef.value = false
@@ -617,9 +614,9 @@ export default defineComponent({
       if (
         e.relatedTarget !== null
         && (e.relatedTarget === inputElRef.value
-          || e.relatedTarget === inputEl2Ref.value
-          || e.relatedTarget === textareaElRef.value
-          || e.relatedTarget === wrapperElRef.value)
+        || e.relatedTarget === inputEl2Ref.value
+        || e.relatedTarget === textareaElRef.value
+        || e.relatedTarget === wrapperElRef.value)
       ) {
         /**
          * activeElement transfer inside the input, do nothing
@@ -1183,7 +1180,7 @@ export default defineComponent({
                         disabled={this.mergedDisabled}
                         maxlength={countGraphemes ? undefined : this.maxlength}
                         minlength={countGraphemes ? undefined : this.minlength}
-                        readonly={this.readonly as any}
+                        readonly={this.readonly}
                         tabindex={
                           this.passivelyActivated && !this.activated
                             ? -1
@@ -1266,7 +1263,7 @@ export default defineComponent({
                     ? this.mergedValue[0]
                     : (this.mergedValue as any)
                 }
-                readonly={this.readonly as any}
+                readonly={this.readonly}
                 autofocus={this.autofocus}
                 size={this.attrSize}
                 onBlur={this.handleInputBlur}
@@ -1394,7 +1391,7 @@ export default defineComponent({
                     ? this.mergedValue[1]
                     : undefined
                 }
-                readonly={this.readonly as any}
+                readonly={this.readonly}
                 style={this.textDecorationStyle[1] as any}
                 onBlur={this.handleInputBlur}
                 onFocus={(e) => {