feat()�[DMdInput): 新增 Material 风格 Input 输入框

Author: Tenny

docs/.vitepress/config.ts

@@ -90,6 +90,10 @@ export default defineConfig({
             text: 'Input 输入框',
             link: '/components/input',
           },
+          {
+            text: 'MdInput 输入框',
+            link: '/components/mdinput',
+          },
           {
             text: 'Checkbox 复选框',
             link: '/components/checkbox',

docs/.vitepress/theme/index.ts

@@ -39,6 +39,7 @@ import '../../../style/page-header';
 import '../../../style/tag';
 import '../../../style/pagination';
 import '../../../style/tanstack-table';
+import '../../../style/md-input';
 
 export default {
   extends: DefaultTheme,

docs/components/mdinput.md

@@ -0,0 +1,73 @@
+# MdInput
+
+`Material Design` 风格的输入框; `Material Design` 是由 `Google` 设计的视觉语言。
+
+> 组件使用名称为: `nt-md-input`
+
+## 演示
+
+<script setup>
+  import { MdInput } from "../../src"
+  import { ref, watch } from 'vue'
+
+  const value = ref('')
+</script>
+
+### 使用
+
+传递 `v-model` 接收输入。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <script setup lang="ts">
+    import { ref, watch } from 'vue'
+    //-
+    const value = ref('')
+  </script>
+  <template>
+    <nt-md-input v-model="value" label="姓名"></nt-md-input>
+  </template>
+  </textarea>
+  <template #preview>
+    <MdInput v-model="value" label="姓名"></MdInput>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+### 四周边框
+
+只需要传递 `outline` 属性，就能让输入框带有边框。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <nt-md-input v-model="value" label="姓名" outline></nt-md-input>
+  </textarea>
+  <template #preview>
+    <MdInput v-model="value" label="姓名" outline></MdInput>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+## API
+
+### MdInput Props
+
+<!-- prettier-ignore -->
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| `outline` | 是否显示四周边框 | `boolean` | `false` |
+| `id` | 输入框的 id | `string` | - |
+| `label` | 输入框的标签 | `string` | - |
+| `placeholder` | 输入框的占位提示 | `string` | - |
+| `name` | 输入框的 name | `string` | - |
+| `html-type` | 对应输入框的原生属性 `type` | `string` | `text` |
+| `v-model` | 双向绑定的值 | `string \| number` | - |
+
+### MdInput Expose
+
+<!-- prettier-ignore -->
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| `focus` | 聚焦输入框 | - | - |

package.json

@@ -12,19 +12,19 @@
     "inspect:eslint": "eslint --inspect-config"
   },
   "devDependencies": {
-    "@types/node": "^22.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.17.0",
-    "@typescript-eslint/parser": "^7.17.0",
-    "@vitejs/plugin-vue": "^5.1.1",
-    "eslint": "^9.8.0",
+    "@types/node": "^22.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.1.0",
+    "@typescript-eslint/parser": "^8.1.0",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "eslint": "^9.9.0",
     "eslint-plugin-vue": "^9.27.0",
-    "globals": "^15.8.0",
+    "globals": "^15.9.0",
     "prettier": "^3.3.3",
-    "shiki": "^1.12.0",
+    "shiki": "^1.13.0",
     "typescript": "^5.5.4",
-    "vite": "^5.3.5",
-    "vite-plugin-dts": "4.0.0-beta.1",
-    "vitepress": "^1.3.1",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "4.0.3",
+    "vitepress": "^1.3.2",
     "vue-tsc": "^2.0.29"
   },
   "peerDependencies": {
@@ -63,10 +63,10 @@
   },
   "license": "MulanPSL-2.0",
   "dependencies": {
-    "@tanstack/vue-table": "^8.20.2",
-    "ph-utils": "^0.8.2",
+    "@tanstack/vue-table": "^8.20.4",
+    "ph-utils": "^0.8.4",
     "qrcode-generator-es": "^0.0.4",
-    "vue-router": "^4.4.0"
+    "vue-router": "^4.4.3"
   },
   "packageManager": "pnpm@9.0.2"
 }