feat(app): add rounded Input

This pull request is intended to add the rounded feature to the Input component
selemondev · Aug 1, 2023 · b99646f · b99646f
1 parent 0181544
commit b99646f
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 2 deletions.
diff --git a/packages/windi/src/App.vue b/packages/windi/src/App.vue
@@ -6,6 +6,6 @@ const agree = ref('')
 
 <template>
   <div class="grid place-items-center mt-72">
-    <WCheckbox v-model="agree" icon="quill:checkmark-double" variant="warning" help="Please check the checkbox" label="Checkbox" required />
+    <WInput v-model="agree" icon="quill:checkmark-double" help="Please check the checkbox" label="Checkbox" required />
   </div>
 </template>
diff --git a/packages/windi/src/Types/componentsTypes/components.ts b/packages/windi/src/Types/componentsTypes/components.ts
@@ -86,6 +86,7 @@ export interface WKbd extends WComponentRoot {
 }
 
 export interface WInput extends WComponentRoot {
+  inputRounded?: string
   inputWrapper?: string
   inputPlaceholder?: string
   inputSize?: string

diff --git a/packages/windi/src/components/Input/WInput.vue b/packages/windi/src/components/Input/WInput.vue
@@ -18,6 +18,10 @@ const props = defineProps({
     type: [String, Number],
     default: '',
   },
+  rounded: {
+    type: String,
+    default: 'md',
+  },
   type: {
     type: String,
     default: 'text',
@@ -153,6 +157,7 @@ const inputLabelTextSize = computed(() => {
 
 const inputWrapperClass = computed(() => {
   return classNames(
+    windiTheme.WInput.base.inputRounded[props.rounded],
     variant.value.inputWrapper,
     variant.value.inputPlaceholder,
     windiTheme.WInput.base.inputSize && windiTheme.WInput.base.inputSize[props.size],

diff --git a/packages/windi/src/theme/windiTheme.ts b/packages/windi/src/theme/windiTheme.ts
@@ -409,7 +409,14 @@ 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',
+      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',
+      inputRounded: {
+        sm: 'rounded-sm',
+        md: 'rounded-md',
+        lg: 'rounded-lg',
+        xl: 'rounded-xl',
+        full: 'rounded-full',
+      },
       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',