From 670995c6ee66f4d12c773c3908aa1b0ca5fbc510 Mon Sep 17 00:00:00 2001
From: Selemondev <selemondev@Selemondevs-MacBook-Pro.local>
Date: Mon, 31 Jul 2023 22:18:38 +0300
Subject: [PATCH] feat(app): #36 Input

This pull request is intended to close issue #36

Closes: #36
---
 packages/windi/src/App.vue                    |  26 +-
 .../src/Types/componentsTypes/components.ts   |  24 ++
 packages/windi/src/Types/enums/Components.ts  |   1 +
 packages/windi/src/Types/enums/Variants.ts    |   1 +
 packages/windi/src/Types/variant.ts           |   3 +-
 .../windi/src/components/Button/WButton.vue   |   6 +
 .../windi/src/components/Input/WInput.vue     | 244 +++++++++++++++++-
 packages/windi/src/components/Input/index.ts  |   5 +
 packages/windi/src/index.ts                   |   3 +
 packages/windi/src/theme/windiTheme.ts        |  94 +++++++
 packages/windi/tailwind.config.cjs            |   1 +
 11 files changed, 391 insertions(+), 17 deletions(-)

diff --git a/packages/windi/src/App.vue b/packages/windi/src/App.vue
index 4208207..6a918f6 100644
--- a/packages/windi/src/App.vue
+++ b/packages/windi/src/App.vue
@@ -1,8 +1,7 @@
 <script setup lang='ts'>
-function handle() {
-  // eslint-disable-next-line no-console
-  return console.log('Hello there')
-}
+import { ref } from 'vue'
+
+const value = ref('')
 </script>
 
 <template>
@@ -19,17 +18,14 @@ function handle() {
         </WAlertDescription>
       </WAlert>
     </div> -->
-    <WButton
-      :variants="{
-        'my-variant': {
-          root: 'bg-black hover:bg-gray-800 disabled:hover:bg-black',
-          buttonLoading: '!bg-red-500',
-        },
-      }" :variant="['danger-ghost']" @click="handle()"
-    >
-      Button
-    </WButton>
-
+    <!-- <WButton link @click="handle()">
+      <WIcon name="ph:x" />
+    </WButton> -->
+    <div class="w-96">
+      <WInput
+        v-model="value" label="Email" type="email" help="You have to enter your email to proceed" placeholder="Search" size="xl" :variant="['my-variant']"
+      />
+    </div>
     <!-- <button @click="handle()">
       Button
     </button> -->
diff --git a/packages/windi/src/Types/componentsTypes/components.ts b/packages/windi/src/Types/componentsTypes/components.ts
index a05479a..1059b93 100644
--- a/packages/windi/src/Types/componentsTypes/components.ts
+++ b/packages/windi/src/Types/componentsTypes/components.ts
@@ -54,6 +54,7 @@ export interface WButton extends WComponentRoot {
   buttonPadding?: string
   buttonFlex?: string
   buttonLoadingIcon?: string
+  buttonLink?: string
 }
 
 export interface WButtonGroup extends WComponentRoot {
@@ -84,6 +85,27 @@ export interface WKbd extends WComponentRoot {
   KbdSize?: string
 }
 
+export interface WInput extends WComponentRoot {
+  inputWrapper?: string
+  inputPlaceholder?: string
+  inputSize?: string
+  inputGap?: string
+  inputPadding?: string
+  inputLeadingPadding?: string
+  inputTrailingPadding?: string
+  inputIcon?: string
+  inputIconSize?: string
+  inputIconLeading?: string
+  inputIconLeadingPadding?: string
+  inputIconTrailing?: string
+  inputIconTrailingPadding?: string
+  inputLoadingIcon?: string
+  inputLabel?: string
+  inputHelp?: string
+  inputRequiredDisplay?: string
+  inputRequired?: string
+}
+
 export type WAccordionVariant = WithVariantProps<WAccordion>
 
 export type WAccordionItemVariants = WithVariantProps<WAccordionItem>
@@ -105,3 +127,5 @@ export type WButtonGroupVariants = WithVariantProps<WButtonGroup>
 export type WAccordionVariants = WithVariantProps<WAccordion>
 
 export type WKbdVariants = WithVariantProps<WKbd>
+
+export type WInputVariants = WithVariantProps<WInput>
diff --git a/packages/windi/src/Types/enums/Components.ts b/packages/windi/src/Types/enums/Components.ts
index 1b067cc..aac9c9d 100644
--- a/packages/windi/src/Types/enums/Components.ts
+++ b/packages/windi/src/Types/enums/Components.ts
@@ -9,5 +9,6 @@ export enum Components {
   WBadge = 'WBadge',
   WButton = 'WButton',
   WButtonGroup = 'WButtonGroup',
+  WInput = 'WInput',
   WKbd = 'WKbd',
 }
diff --git a/packages/windi/src/Types/enums/Variants.ts b/packages/windi/src/Types/enums/Variants.ts
index bc45867..6eefd27 100644
--- a/packages/windi/src/Types/enums/Variants.ts
+++ b/packages/windi/src/Types/enums/Variants.ts
@@ -1,4 +1,5 @@
 export enum Variants {
+  DEFAULT = 'default',
   PRIMARY = 'primary',
   SUCCESS = 'success',
   WARNING = 'warning',
diff --git a/packages/windi/src/Types/variant.ts b/packages/windi/src/Types/variant.ts
index a764dbd..43ad851 100644
--- a/packages/windi/src/Types/variant.ts
+++ b/packages/windi/src/Types/variant.ts
@@ -1,5 +1,5 @@
 import type { Components } from './enums/Components'
-import type { WAccordionItemVariants, WAccordionVariants, WAlertVariants, WAvatarGroup, WAvatarVariants, WBadgeVariants, WButtonGroupVariants, WButtonVariants, WIconVariants, WKbdVariants } from './componentsTypes/components'
+import type { WAccordionItemVariants, WAccordionVariants, WAlertVariants, WAvatarGroup, WAvatarVariants, WBadgeVariants, WButtonGroupVariants, WButtonVariants, WIconVariants, WInputVariants, WKbdVariants } from './componentsTypes/components'
 
 export declare interface CSSClassKeyValuePair {
   [key: string]: any
@@ -40,4 +40,5 @@ export interface WindiUIConfiguration {
   [Components.WButton]?: WButtonVariants
   [Components.WButtonGroup]?: WButtonGroupVariants
   [Components.WKbd]?: WKbdVariants
+  [Components.WInput]?: WInputVariants
 }
diff --git a/packages/windi/src/components/Button/WButton.vue b/packages/windi/src/components/Button/WButton.vue
index 088bebe..99f174e 100644
--- a/packages/windi/src/components/Button/WButton.vue
+++ b/packages/windi/src/components/Button/WButton.vue
@@ -20,6 +20,11 @@ const props = defineProps({
     default: 'button',
   },
 
+  link: {
+    type: Boolean,
+    default: false,
+  },
+
   to: {
     type: [String, Object] as PropType<string | RouteLocationRaw>,
     default: null,
@@ -120,6 +125,7 @@ const buttonBlock = computed(() => {
 
 const buttonWrapperClass = computed(() => {
   return classNames(
+    props.link && variant.value.buttonLink,
     (props.to) && 'hover:underline',
     variant.value.root,
     variant.value.buttonFlex,
diff --git a/packages/windi/src/components/Input/WInput.vue b/packages/windi/src/components/Input/WInput.vue
index c3229b3..55d0608 100644
--- a/packages/windi/src/components/Input/WInput.vue
+++ b/packages/windi/src/components/Input/WInput.vue
@@ -1,7 +1,249 @@
 <script setup lang='ts'>
+import { computed, defineComponent, onMounted, ref, useSlots } from 'vue'
+import type { PropType } from 'vue'
+import classNames from 'classnames'
+import { Icon } from '@iconify/vue'
+import { getVariantPropsWithClassesList } from '../../utils/getVariantProps'
+import type { VariantJSWithClassesListProps } from '../../utils/getVariantProps'
+import type { WInput } from '../../Types/componentsTypes/components'
+import windiTheme from '../../theme/windiTheme'
+import { Components } from '../../Types/enums/Components'
+import { useVariants } from '../../composables/useVariants'
 
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+
+const props = defineProps({
+  ...getVariantPropsWithClassesList<WInput>(),
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  type: {
+    type: String,
+    default: 'text',
+  },
+  name: {
+    type: String,
+    default: null,
+  },
+  padded: {
+    type: Boolean,
+    default: true,
+  },
+  placeholder: {
+    type: String,
+    default: null,
+  },
+  required: {
+    type: Boolean,
+    default: true,
+  },
+  help: {
+    type: String,
+    default: null,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  autofocus: {
+    type: Boolean,
+    default: false,
+  },
+  label: {
+    type: String,
+    default: null,
+  },
+  icon: {
+    type: String,
+    default: null,
+  },
+  loadingIcon: {
+    type: String,
+    default: () => windiTheme.WInput.base.inputLoadingIcon,
+  },
+  leadingIcon: {
+    type: String,
+    default: null,
+  },
+  trailingIcon: {
+    type: String,
+    default: null,
+  },
+  trailing: {
+    type: Boolean,
+    default: false,
+  },
+  leading: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String as PropType<Size>,
+    default: 'md',
+    validator(value: string) {
+      return Object.keys(windiTheme.WInput.base.inputSize).includes(value)
+    },
+  },
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string | number): void
+}>()
+const slots = useSlots()
+const variant = computed(() => {
+  const customProps = {
+    ...props,
+    variant: props.variant,
+  }
+  return useVariants<WInput>(
+    Components.WInput,
+    customProps as VariantJSWithClassesListProps<WInput>,
+  )
+})
+
+function onInput(event: InputEvent) {
+  emit('update:modelValue', (event.target as HTMLInputElement).value)
+}
+const input = ref<HTMLInputElement | null>(null)
+
+function autoFocus() {
+  if (props.autofocus)
+    input.value?.focus()
+}
+
+const isLeading = computed(() => {
+  return (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing) || props.leadingIcon
+})
+
+const isTrailing = computed(() => {
+  return (props.icon && props.trailing) || (props.loading && props.trailing) || props.trailingIcon
+})
+
+const leadingIconName = computed(() => {
+  if (props.loading)
+    return props.loadingIcon
+
+  return props.leadingIcon || props.icon
+})
+
+const trailingIconName = computed(() => {
+  if (props.loading && !isLeading.value)
+    return props.loadingIcon
+
+  return props.trailingIcon || props.icon
+})
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, 100)
+})
+
+const inputLabelTextSize = computed(() => {
+  return classNames(
+    variant.value.inputLabel,
+    windiTheme.WInput.base.inputSize && windiTheme.WInput.base.inputSize[props.size],
+  )
+})
+
+const inputWrapperClass = computed(() => {
+  return classNames(
+    variant.value.inputWrapper,
+    variant.value.inputPlaceholder,
+    windiTheme.WInput.base.inputSize && windiTheme.WInput.base.inputSize[props.size],
+    props.padded ? windiTheme.WInput.base.inputPadding && windiTheme.WInput.base.inputPadding[props.size] : '!p-0',
+    (isLeading.value || slots.leading) && windiTheme.WInput.base.inputLeadingPadding && windiTheme.WInput.base.inputLeadingPadding[props.size],
+    (isTrailing.value || slots.trailing) && windiTheme.WInput.base.inputTrailingPadding && windiTheme.WInput.base.inputTrailingPadding[props.size],
+  )
+})
+
+const leadingIconClass = computed(() => {
+  return classNames(
+    variant.value.inputIcon,
+    windiTheme.WInput.base.inputIconSize && windiTheme.WInput.base.inputIconSize[props.size],
+    props.loading && 'animate-spin',
+  )
+})
+
+const iconLeadingWrapperClass = computed(() => {
+  return classNames(
+    variant.value.inputIconLeading,
+    windiTheme.WInput.base.inputIconLeadingPadding && windiTheme.WInput.base.inputIconLeadingPadding[props.size],
+  )
+})
+
+const iconTrailingWrapperClass = computed(() => {
+  return classNames(
+    variant.value.inputIconTrailing,
+    windiTheme.WInput.base.inputIconTrailingPadding && windiTheme.WInput.base.inputIconTrailingPadding[props.size],
+  )
+})
+
+const trailingIconClass = computed(() => {
+  return classNames(
+    variant.value.inputIcon,
+    windiTheme.WInput.base.inputIconSize && windiTheme.WInput.base.inputIconSize[props.size],
+    props.loading && !isLeading.value && 'animate-spin',
+  )
+})
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  name: Components.WInput,
+  inheritAttrs: false,
+})
 </script>
 
 <template>
-  <div />
+  <div>
+    <div :class="variant.inputRequiredDisplay">
+      <span v-if="props.label" :class="inputLabelTextSize">{{ props.label }}</span>
+      <span v-if="required" :class="variant.inputRequired">*</span>
+    </div>
+    <div :class="variant.root">
+      <!-- @vue-ignore -->
+      <input
+        :id="name"
+        ref="input"
+        :name="name"
+        :value="modelValue"
+        :type="type"
+        :required="required"
+        :placeholder="placeholder"
+        :disabled="disabled || loading"
+        class="form-input"
+        :class="inputWrapperClass"
+        v-bind="$attrs"
+        @input="onInput"
+      >
+      <slot />
+
+      <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="iconLeadingWrapperClass">
+        <slot name="leading" :disabled="disabled" :loading="loading">
+          <Icon :icon="leadingIconName" :class="leadingIconClass" />
+        </slot>
+      </span>
+
+      <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="iconTrailingWrapperClass">
+        <slot name="trailing" :disabled="disabled" :loading="loading">
+          <Icon :icon="trailingIconName" :class="trailingIconClass" />
+        </slot>
+      </span>
+    </div>
+    <div>
+      <span v-if="props.help" :class="variant.inputHelp">{{ props.help }}</span>
+    </div>
+  </div>
 </template>
+
+<style>
+.form-input {
+  appearance: none;
+}
+</style>
diff --git a/packages/windi/src/components/Input/index.ts b/packages/windi/src/components/Input/index.ts
index e69de29..98db388 100644
--- a/packages/windi/src/components/Input/index.ts
+++ b/packages/windi/src/components/Input/index.ts
@@ -0,0 +1,5 @@
+import Input from './WInput.vue'
+
+export default {
+  Input,
+}
diff --git a/packages/windi/src/index.ts b/packages/windi/src/index.ts
index 2a74bcc..dc08ac2 100644
--- a/packages/windi/src/index.ts
+++ b/packages/windi/src/index.ts
@@ -12,6 +12,7 @@ import ButtonGroup from './components/Button/WButtonGroup.vue'
 import Accordion from './components/Accordion/WAccordion.vue'
 import AccordionItem from './components/Accordion/WAccordionItem.vue'
 import Kbd from './components/Kbd/WKbd.vue'
+import Input from './components/Input/WInput.vue'
 import windiTheme from './theme/windiTheme'
 
 const components: Record<string, ReturnType<typeof defineComponent>> = {
@@ -26,6 +27,7 @@ const components: Record<string, ReturnType<typeof defineComponent>> = {
   Button,
   ButtonGroup,
   Kbd,
+  Input,
 }
 
 function install(app: App, configuration: WindiUIConfiguration) {
@@ -47,3 +49,4 @@ export { default as ButtonGroup } from './components/Button'
 export { default as Accordion } from './components/Accordion'
 export { default as AccordionItem } from './components/Accordion'
 export { default as Kbd } from './components/Kbd'
+export { default as Input } from './components/Input'
diff --git a/packages/windi/src/theme/windiTheme.ts b/packages/windi/src/theme/windiTheme.ts
index adf9132..055be7b 100644
--- a/packages/windi/src/theme/windiTheme.ts
+++ b/packages/windi/src/theme/windiTheme.ts
@@ -250,6 +250,7 @@ export default {
       buttonLoading: '!bg-opacity-50 pointer-events-none !cursor-not-allowed !hover:bg-opacity-50 inline-flex items-center',
       buttonFull: 'w-full flex justify-center items-center',
       buttonDisabled: '!shadow-none !cursor-not-allowed bg-opacity-100',
+      buttonLink: '!bg-transparent !text-black !p-0',
       buttonSize: {
         'xs': 'text-xs',
         'sm': 'text-sm',
@@ -405,6 +406,99 @@ export default {
     },
   },
 
+  WInput: {
+    base: {
+      root: 'relative',
+      inputWrapper: 'relative shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-400 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 mb-1 dark:text-white',
+      inputHelp: 'flex mt-1 text-sm text-gray-400 dark:text-gray-900',
+      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 pointer-events-none',
+
+      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 pointer-events-none',
+
+      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-400 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-900',
+        inputRequiredDisplay: 'relative flex items-start',
+        inputRequired: 'text-red-500',
+        inputLoadingIcon: 'svg-spinners:bars-rotate-fade',
+      },
+    },
+  },
+
   // chatgpt 😜
   WButtonGroup: {
     base: {
diff --git a/packages/windi/tailwind.config.cjs b/packages/windi/tailwind.config.cjs
index 07df9f4..b0bc0ab 100644
--- a/packages/windi/tailwind.config.cjs
+++ b/packages/windi/tailwind.config.cjs
@@ -2,6 +2,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', 'node_modules/windi-ui/dist/theme/*.{js,ts,json}'],
+  dark: 'class',
   theme: {
     extend: {
       backgroundColor: ['disabled'],