feat(Form): 表单支持 disabled

Author: Tenny

docs/components/form.md

@@ -62,8 +62,8 @@
     }
   </script>
   <template>
-    <nt-form :model="formFields" :rules="rules">
-      <nt-form-item label="用户名" required name="username">
+    <nt-form :model="formFields" :rules="rules" >
+      <nt-form-item label="用户名" required name="username" >
         <nt-input placeholder="请输入用户名" v-model="formFields.username"></nt-input>
       </nt-form-item>
       <nt-form-item label="密码" required name="password">

docs/components/input.md

@@ -64,6 +64,18 @@
   </CodePreview>
 </ClientOnly>
 
+### 禁用状态
+
+通过 `disabled` 属性设置输入框为禁用状态。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <nt-input placeholder="请输入内容" disabled></nt-input>
+  </textarea>
+  </CodePreview>
+</ClientOnly>
+
 ## API
 
 ### Input Props

eslint.config.js

@@ -1,7 +1,7 @@
 import globals from 'globals';
 import pluginJs from '@eslint/js';
 import tseslint from 'typescript-eslint';
-import pluginVue from 'eslint-plugin-vue';
+import pluginVue, { rules } from 'eslint-plugin-vue';
 import markdown from '@eslint/markdown';
 
 export default [

package.json

@@ -16,17 +16,17 @@
   "devDependencies": {
     "@eslint/js": "^9.10.0",
     "@eslint/markdown": "^6.1.0",
-    "@types/node": "^22.5.4",
-    "@vitejs/plugin-vue": "^5.1.3",
+    "@types/node": "^22.5.5",
+    "@vitejs/plugin-vue": "^5.1.4",
     "eslint": "^9.10.0",
     "eslint-plugin-vue": "^9.28.0",
     "globals": "^15.9.0",
     "less": "^4.2.0",
     "prettier": "^3.3.3",
-    "shiki": "^1.17.0",
+    "shiki": "^1.17.7",
     "typescript": "^5.6.2",
-    "typescript-eslint": "^8.5.0",
-    "vite": "^5.4.4",
+    "typescript-eslint": "^8.6.0",
+    "vite": "^5.4.6",
     "vite-plugin-dts": "4.2.1",
     "vitepress": "^1.3.4",
     "vue-tsc": "^2.1.6"
@@ -68,9 +68,9 @@
   "license": "MulanPSL-2.0",
   "dependencies": {
     "@tanstack/vue-table": "^8.20.5",
-    "ph-utils": "^0.9.1",
+    "ph-utils": "^0.9.3",
     "qrcode-generator-es": "^1.0.2",
-    "vue-router": "^4.4.4"
+    "vue-router": "^4.4.5"
   },
   "packageManager": "pnpm@9.0.2"
 }

pnpm-lock.yaml

@@ -16,7 +16,7 @@
 import { ref, provide, watch } from 'vue';
 import Validator from 'ph-utils/validator';
 import type { SchemaType } from 'ph-utils/validator';
-import { formContext } from './constant';
+import { formContext, formDisabledContext } from '../../utils/constant.js';
 
 const props = withDefaults(
   defineProps<{
@@ -28,9 +28,11 @@ const props = withDefaults(
     rules?: SchemaType[];
     /** 是否行内表单 */
     inline?: boolean;
+    disabled?: boolean;
   }>(),
   {
     inline: false,
+    disabled: false,
   },
 );
 
@@ -92,6 +94,8 @@ provide(formContext, {
   requiredKeys,
 });
 
+provide(formDisabledContext, () => props.disabled);
+
 function handleSubmit(e: Event) {
   e.preventDefault();
   if (validator != null) {

src/components/form/Form.vue

@@ -24,8 +24,8 @@
   </div>
 </template>
 <script setup lang="ts">
-import { Ref, computed, inject } from 'vue';
-import { formContext } from './constant';
+import { Ref, computed, inject, provide } from 'vue';
+import { formContext, formItemDisabledContext } from '../../utils/constant';
 
 const props = withDefaults(
   defineProps<{
@@ -39,11 +39,13 @@ const props = withDefaults(
     name?: string;
     /** 表单域验证错误时的提示信息。设置该值会导致表单验证状态变为 error，并显示该错误信息。 */
     error?: string;
+    disabled?: boolean;
   }>(),
   {
     required: undefined,
     error: undefined,
     label: undefined,
+    disabled: undefined,
   },
 );
 
@@ -78,4 +80,6 @@ const isRequired = computed(() => {
   }
   return false;
 });
+
+provide(formItemDisabledContext, () => props.disabled);
 </script>

src/components/form/FormItem.vue

@@ -9,11 +9,13 @@
     :placeholder="placeholder"
     @input="handleInput"
     ref="el"
+    :disabled="isDisabled"
   />
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import useDisabled from '../../hooks/useFormDisabled.js';
 
 const el = ref<HTMLInputElement>();
 
@@ -24,16 +26,20 @@ const props = withDefaults(
     autosize?: boolean;
     parser?: (value: string) => string;
     modelValue?: string | number;
+    disabled?: boolean;
   }>(),
   {
     htmlType: 'text',
     placeholder: '',
     autosize: false,
+    disabled: undefined,
   },
 );
 
 const emits = defineEmits(['update:modelValue', 'input']);
 
+const isDisabled = useDisabled(() => props.disabled);
+
 function focus() {
   if (el.value != null) {
     el.value.focus();

src/components/form/constant.ts

@@ -0,0 +1,23 @@
+import { inject, computed, toValue } from 'vue';
+import {
+  formDisabledContext,
+  formItemDisabledContext,
+} from '../utils/constant.js';
+import type { MaybeRefOrGetter } from 'vue';
+
+export default function useDisabled(
+  disabled?: MaybeRefOrGetter<boolean | undefined>,
+) {
+  const formDisabled = inject(formDisabledContext);
+  const formItemDisabeld = inject(formItemDisabledContext);
+
+  const isDisabled = computed(() => {
+    if (toValue(disabled) != null) return toValue<boolean>(disabled as boolean);
+    if (toValue(formItemDisabeld) != null)
+      return toValue<boolean>(formItemDisabeld as boolean);
+    if (toValue(formDisabled) != null)
+      return toValue<boolean>(formDisabled as boolean);
+  });
+
+  return isDisabled;
+}