docs(app): #71 input

Closes: #71

docs/docs/.vitepress/config.ts

@@ -58,6 +58,7 @@ export default defineConfig({
             { text: 'Checkbox', link: '/guide/components/checkbox.md'},
             { text: 'Divider', link: '/guide/components/divider.md'},
             { text: 'Icon', link: '/guide/components/icon.md'},
+            { text: 'Input', link: '/guide/components/input.md'},
           ]
         }
       ],

docs/docs/components/Divider/dividerBasic.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="grid place-items-center w-full">
-       <div>
-        <p class="dark:text-white">Nuxt.js is a popular open-source framework for building web applications with Vue.js. It simplifies the process of creating server-rendered Vue applications and provides various features to enhance development</p>
+       <div class="space-y-2">
+        <p class="dark:text-white">Nuxt.js is a popular open-source framework for building web applications with Vue.js. It simplifies the process of creating server-rendered Vue applications and provides various features to enhance development.</p>
         <WDivider/>
-        <p class="dark:text-white">Next.js is a popular open-source React framework for building web applications</p>
+        <p class="dark:text-white">Next.js is a popular open-source React framework for building web applications.</p>
        </div>
     </div>
 </template>

docs/docs/components/Input/inputBasic.vue

@@ -0,0 +1,11 @@
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+const email = ref('')
+</script>
+
+<template>
+    <div class="grid place-items-center w-full">
+        <WInput v-model="email" label="Email" placeholder="Email Address" />
+    </div>
+</template>

docs/docs/components/Input/inputDisabled.vue

@@ -0,0 +1,11 @@
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+const email = ref('')
+</script>
+
+<template>
+    <div class="grid place-items-center w-full">
+        <WInput v-model="email" disabled placeholder="Email Address" />
+    </div>
+</template>

docs/docs/components/Input/inputHelp.vue

@@ -0,0 +1,11 @@
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+const email = ref('')
+</script>
+
+<template>
+    <div class="grid place-items-center w-full">
+        <WInput v-model="email" label="Email" placeholder="Email Address" help="Please enter your email address" required />
+    </div>
+</template>

docs/docs/components/Input/inputIconLeading.vue

@@ -0,0 +1,18 @@
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+const email = ref('')
+</script>
+
+<template>
+    <div class="grid place-items-center w-full">
+        <div class="space-y-3">
+            <WInput v-model="email" icon="ph:sun" label="Email" placeholder="Email Address" />
+            <WInput v-model="email" label="Email" placeholder="Email Address" >
+                <template #leading>
+                    <WIcon name="ph:sun" size="xl" class="text-gray-500" />
+                </template>
+            </WInput>
+        </div>
+    </div>
+</template>

docs/docs/components/Input/inputIconLeadingAndTrailing.vue

@@ -0,0 +1,19 @@
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+const searchTerm = ref('')
+
+function clearSearchTerm() {
+  return searchTerm.value = ''
+}
+</script>
+
+<template>
+    <div class="grid place-items-center w-full">
+        <WInput v-model="searchTerm" icon="carbon:search" placeholder="Search">
+            <template #trailing v-if="searchTerm !== ''">
+                <WIcon name="heroicons:x-mark-20-solid" @click="clearSearchTerm()" class="text-gray-500" />
+            </template>
+        </WInput>
+    </div>
+</template>

docs/docs/components/Input/inputIconTrailing.vue

@@ -0,0 +1,28 @@
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+const password = ref('')
+
+const email = ref('')
+
+const inputType = ref('password')
+
+const togglePasswordVisibility = () => {
+    inputType.value = inputType.value === 'password' ? 'text' : 'password';
+};
+</script>
+
+<template>
+    <div class="grid place-items-center w-full">
+        <div class="space-y-3">
+            <WInput v-model="email" icon="ph:envelope" :trailing="true" placeholder="Email Address" label="Email"/>
+
+            <WInput v-model="password" :type="inputType" label="Password" placeholder="Password" >
+                <template #trailing>
+                    <WIcon v-if="inputType === 'text'" name="ic:sharp-remove-red-eye" @click="togglePasswordVisibility()" size="xl" class="text-gray-500" />
+                    <WIcon v-else name="mdi:eye-off" @click="togglePasswordVisibility()" size="xl" class="text-gray-500" />
+                </template>
+            </WInput>
+        </div>
+    </div>
+</template>

docs/docs/components/Input/inputLoading.vue

@@ -0,0 +1,11 @@
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+const email = ref('')
+</script>
+
+<template>
+    <div class="grid place-items-center w-full">
+        <WInput v-model="email" loading label="Email" placeholder="Email Address" />
+    </div>
+</template>

docs/docs/components/Input/inputRequired.vue

@@ -0,0 +1,11 @@
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+const email = ref('')
+</script>
+
+<template>
+    <div class="grid place-items-center w-full">
+        <WInput v-model="email" label="Email" placeholder="Email Address" required />
+    </div>
+</template>

docs/docs/components/Input/inputRounded.vue

@@ -0,0 +1,16 @@
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+const email = ref('')
+</script>
+
+<template>
+    <div class="grid place-items-center w-full">
+        <div class="space-y-6">
+            <WInput v-model="email" label="Email" placeholder="Email Address" rounded="sm" />
+            <WInput v-model="email" label="Email" placeholder="Email Address" rounded="md" />
+            <WInput v-model="email" label="Email" placeholder="Email Address" rounded="lg" />
+            <WInput v-model="email" label="Email" placeholder="Email Address" rounded="xl" />
+        </div>
+    </div>
+</template>

docs/docs/components/Input/inputSize.vue

@@ -0,0 +1,18 @@
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+const email = ref('')
+</script>
+
+<template>
+    <div class="w-full">
+        <div class="space-y-3">
+            <div class="flex space-x-3">
+                <WInput v-model="email" label="Email" placeholder="Email Address" size="sm" />
+                <WInput v-model="email" label="Email" placeholder="Email Address" size="md" />
+                <WInput v-model="email" label="Email" placeholder="Email Address" size="lg" />
+                <WInput v-model="email" label="Email" placeholder="Email Address" size="xl" />
+            </div>
+        </div>
+    </div>
+</template>

docs/docs/guide/components/input.md

@@ -0,0 +1,180 @@
+---
+title: Input
+lang: en-US
+---
+
+# Input
+
+An input component is a user interface element that is used to get user input in a text or number field.
+
+## Basic Usage
+
+You can use the `placeholder` prop to set a placeholder text for the `WInput` component as well as use `v-model` to make the `WInput` component reactive and also pass a text to the `label` prop as shown below:
+
+<demo src="../../components/Input/inputBasic.vue" />
+
+## Size
+
+You can set the size of the `WInput` component by using the size prop as shown below:
+
+<demo src="../../components/Input/inputSize.vue" />
+
+By default, the `WInput` component's size is set to `md`.
+
+## Disabled
+
+You can disable the `WInput` component by setting the `disabled` prop as shown below:
+
+<demo src="../../components/Input/inputDisabled.vue" />
+
+## Rounded
+
+You can round the borders of the `WInput` component by using the `rounded` prop as shown below:
+
+<demo src="../../components/Input/inputRounded.vue" />
+
+By default, the `WInput` component's roundedness is set to `md`.
+
+## Required
+
+You can use the `required` prop to display a red star next to the label to indicate that a an input is required as shown below:
+
+<demo src="../../components/Input/inputRequired.vue" />
+
+## Help
+
+You can use the `help` prop to display some helper texts under the the `WInput` component as shown below:
+
+<demo src="../../components/Input/inputHelp.vue" />
+
+## Loading
+
+You can use the `loading` prop to show a loading icon as well as disable the input as shown below:
+
+<demo src="../../components/Input/inputLoading.vue" />
+
+## Icon
+
+You can use any icon from the [iconify](https://icones.netlify.app/) library by passing it to the `icon` prop and by specifying whether it is `leading` or `trailing` as shown below:
+
+## Leading
+
+You can set the icon to `leading` by just using the `icon` prop or by using the `leading` slot as shown below:
+
+<demo src="../../components/Input/inputIconLeading.vue" />
+
+
+## Trailing
+
+You can set the icon to `trailing` by just using the `icon` prop and setting the `trailing` to `true` or by using the `trailing` slot as shown below:
+
+<demo src="../../components/Input/inputIconTrailing.vue" />
+
+or you can use both the `leading` and `trailing` icons.
+
+Type anything in the input field so as to clear it using the `x` icon:
+
+<demo src="../../components/Input/inputIconLeadingAndTrailing.vue" />
+
+## Preset
+
+```js
+  WInput: {
+    base: {
+      root: 'relative',
+      inputWrapper: 'relative shadow-sm bg-transparent text-gray-900 dark:text-white focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none',
+      inputRounded: {
+        sm: 'rounded-sm',
+        md: 'rounded-md',
+        lg: 'rounded-lg',
+        xl: 'rounded-xl',
+      },
+      inputPlaceholder: 'placeholder-gray-400 dark:placeholder-gray-500',
+      inputLabel: 'flex mb-1 dark:text-white',
+      inputHelp: 'flex mt-1 text-sm text-gray-400 dark:text-gray-500',
+      inputRequiredDisplay: 'relative flex items-start',
+      inputRequired: 'text-red-500',
+      inputSize: {
+        xs: 'text-xs',
+        sm: 'text-sm',
+        md: 'text-sm',
+        lg: 'text-sm',
+        xl: 'text-base',
+      },
+      inputGap: {
+        xs: 'gap-x-1.5',
+        sm: 'gap-x-2',
+        md: 'gap-x-2',
+        lg: 'gap-x-2',
+        xl: 'gap-x-2',
+      },
+
+      inputPadding: {
+        xs: 'px-2.5 py-1.5',
+        sm: 'px-2.5 py-1.5',
+        md: 'px-3 py-2',
+        lg: 'px-3.5 py-2.5',
+        xl: 'px-3.5 py-2.5',
+      },
+
+      inputLeadingPadding: {
+        xs: 'ps-8',
+        sm: 'ps-9',
+        md: 'ps-10',
+        lg: 'ps-11',
+        xl: 'ps-12',
+      },
+
+      inputTrailingPadding: {
+        xs: 'pe-8',
+        sm: 'pe-9',
+        md: 'pe-10',
+        lg: 'pe-11',
+        xl: 'pe-12',
+      },
+
+      inputIcon: 'flex-shrink-0 text-gray-400 dark:text-gray-500',
+      inputIconSize: {
+        xs: 'h-4 w-4',
+        sm: 'h-5 w-5',
+        md: 'h-5 w-5',
+        lg: 'h-5 w-5',
+        xl: 'h-6 w-6',
+      },
+
+      inputIconLeading: 'absolute inset-y-0 start-0 flex items-center',
+
+      inputIconLeadingPadding: {
+        xs: 'ps-2.5',
+        sm: 'ps-2.5',
+        md: 'ps-3',
+        lg: 'ps-3.5',
+        xl: 'ps-3.5',
+      },
+
+      inputIconTrailing: 'absolute inset-y-0 end-0 flex items-center cursor-pointer',
+
+      inputIconTrailingPadding: {
+        xs: 'pe-2.5',
+        sm: 'pe-2.5',
+        md: 'pe-3',
+        lg: 'pe-3.5',
+        xl: 'pe-3.5',
+      },
+      inputLoadingIcon: 'svg-spinners:bars-rotate-fade',
+    },
+
+    variants: {
+      default: {
+        root: 'relative',
+        inputWrapper: 'relative shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-800 focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none rounded-md',
+        inputPlaceholder: 'placeholder-gray-400 dark:placeholder-gray-500',
+        inputLabel: 'flex text-sm mb-1 dark:text-white',
+        inputHelp: 'flex mt-1 text-sm text-gray-400 dark:text-gray-500',
+        inputRequiredDisplay: 'relative flex items-start',
+        inputRequired: 'text-red-500',
+        inputLoadingIcon: 'svg-spinners:bars-rotate-fade',
+      },
+    },
+  },
+```