feat(ui-kit): Make NTextInput more generic (#181)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
nuxt · Apr 17, 2023 · f3d61da · f3d61da
1 parent 2791d3e
commit f3d61da
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 29 deletions.
diff --git a/packages/devtools-ui-kit/playground/pages/index.vue b/packages/devtools-ui-kit/playground/pages/index.vue
@@ -188,27 +188,39 @@ const radio = ref('a')
       </NCard>
 
       <NCard class="p4">
-        <div class="n-header-upper">
-          TextInput
-        </div>
-        <div class="flex flex-col gap-2">
-          <NTextInput
-            n="lime6 dark:lime5"
-            icon="carbon:checkmark-outline"
-            placeholder="Hi!"
-          />
-          <NTextInput
-            n="pink6 dark:pink5"
-            icon="carbon:user"
-            placeholder="Your name..."
-          />
-          <NTextInput
-            n="lime6 dark:lime5"
-            icon="carbon:password"
-            type="password"
-            placeholder="Your password..."
-          />
-        </div>
+        <form>
+          <div class="n-header-upper">
+            TextInput
+          </div>
+          <div class="flex flex-col gap-2">
+            <NTextInput
+              n="lime6 dark:lime5"
+              icon="carbon:checkmark-outline"
+              placeholder="Hi!"
+            />
+            <NTextInput
+              n="pink6 dark:pink5"
+              icon="carbon:user"
+              placeholder="Your name..."
+            />
+            <NTextInput
+              n="pink6 dark:pink5"
+              icon="carbon-character-whole-number"
+              placeholder="Your age..."
+              type="number"
+            />
+            <NTextInput
+              n="lime6 dark:lime5"
+              icon="carbon:password"
+              type="password"
+              placeholder="Your password..."
+              required
+            />
+            <NButton class="self-start">
+              Submit
+            </NButton>
+          </div>
+        </form>
         <ShowSource src="/playground/pages/index.vue#L190-L205" />
       </NCard>
 

diff --git a/packages/devtools-ui-kit/src/components/NTextInput.vue b/packages/devtools-ui-kit/src/components/NTextInput.vue
@@ -4,15 +4,10 @@ import { useVModel } from '@vueuse/core'
 const props = withDefaults(
   defineProps<{
     modelValue?: string | number
-    placeholder?: string
     icon?: string
-    disabled?: boolean
-    type?: string
   }>(),
   {
     modelValue: '',
-    disabled: false,
-    type: 'text',
   },
 )
 const emit = defineEmits<{ (...args: any): void }>()
@@ -26,10 +21,9 @@ const input = useVModel(props, 'modelValue', emit, { passive: true })
     </slot>
     <input
       v-model="input"
+      type="text"
+      v-bind="$attrs"
       class="ml-0.4em w-full flex-auto n-bg-base !outline-none"
-      :type="type"
-      :disabled="disabled"
-      :placeholder="placeholder"
     >
   </div>
 </template>