fix(app): form inputs' borders

This pull request is intended to fix the form inputs' border styling

Author: Selemondev

packages/nuxtlabs-ui-vue/src/App.vue

@@ -1,12 +1,26 @@
 <script setup lang='ts'>
 import { ref } from 'vue'
 
-const selected = ref(true)
+// const value = ref('')
+const countries = [{
+  name: 'United States',
+  value: 'US',
+}, {
+  name: 'Canada',
+  value: 'CA',
+  disabled: true,
+}, {
+  name: 'Mexico',
+  value: 'MX',
+}]
+
+const country = ref('CA')
 </script>
 
 <template>
   <div class="grid place-items-center w-full min-h-screen">
-    <!-- <UInput color="red" v-model="value" /> -->
-    <UCheckbox v-model="selected" name="notifications" label="Notifications" color="red" help="Please check this box" />
+    <USelect v-model="country" color="purple" :options="countries" option-attribute="name" />
+    <!-- <UInput v-model="value" color="cyan" icon="ph:sun" /> -->
+    <!-- <UCheckbox v-model="selected" name="notifications" label="Notifications" color="blue" help="Please check this box" /> -->
   </div>
 </template>

packages/nuxtlabs-ui-vue/src/components/forms/Input/UInput.vue

@@ -160,7 +160,7 @@ const inputClass = computed(() => {
     variant.value.placeholder,
     nuxtLabsTheme.UInput.base.size[props.size],
     props.padded ? nuxtLabsTheme.UInput.base.padding[props.size] : 'p-0',
-    variants?.replace('{color}', props.color),
+    variants?.replaceAll('{color}', props.color),
     (isLeading.value || slots.leading) && nuxtLabsTheme.UInput.base.leading.padding[props.size],
     (isTrailing.value || slots.trailing) && nuxtLabsTheme.UInput.base.trailing.padding[props.size],
   )
@@ -209,6 +209,7 @@ export default defineComponent({
 </script>
 
 <template>
+  {{ inputClass }}
   <div :class="variant.root">
     <!-- @vue-ignore -->
     <input

packages/nuxtlabs-ui-vue/src/components/forms/Select/USelect.vue

@@ -205,7 +205,7 @@ const selectClass = computed(() => {
     variant.value.rounded,
     nuxtLabsTheme.USelect.base.size[props.size],
     props.padded ? nuxtLabsTheme.USelect.base.padding[props.size] : 'p-0',
-    variants?.replace('{color}', props.color),
+    variants?.replaceAll('{color}', props.color),
     (isLeading.value || slots.leading) && nuxtLabsTheme.USelect.base.leading.padding[props.size],
     (isTrailing.value || slots.trailing) && nuxtLabsTheme.USelect.base.trailing.padding[props.size],
   )

packages/nuxtlabs-ui-vue/src/theme/nuxtLabsTheme.ts

@@ -435,7 +435,7 @@ export default {
   UInput: {
     base: {
       root: 'relative',
-      base: 'appearance-none relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0',
+      base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 border-none',
       rounded: 'rounded-md',
       placeholder: 'placeholder-gray-400 dark:placeholder-gray-500',
       size: {
@@ -491,7 +491,7 @@ export default {
         },
       },
       intent: {
-        outline: 'shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 focus:ring-2 focus:ring-{color}-500 dark:focus:ring-{color}-400',
+        outline: 'shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset focus:border focus:border-{color}-500 focus:ring-{color}-500 ring-{color}-500 dark:ring-{color}-400 focus:ring-2 focus:ring-{color}-500 dark:focus:ring-{color}-400',
         none: 'bg-transparent focus:ring-0 focus:shadow-none',
       },
       icon: {
@@ -541,7 +541,7 @@ export default {
     variants: {
       default: {
         root: 'relative',
-        base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0',
+        base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 border-0 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 focus:ring-2 focus:ring-{color}-500 dark:focus:ring-{color}-400',
         size: 'sm',
         color: 'white',
         intent: 'outline',
@@ -555,7 +555,7 @@ export default {
         },
       },
       intent: {
-        outline: 'shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 focus:ring-2 focus:ring-{color}-500 dark:focus:ring-{color}-400',
+        outline: 'shadow-sm bg-transparent text-gray-900 dark:text-white focus:border ring-1 ring-inset ring-{color}-500 focus:border-{color}-500 focus:ring-{color}-500 dark:ring-{color}-400 focus:ring-2 focus:ring-{color}-500 dark:focus:ring-{color}-400',
         none: 'bg-transparent focus:ring-0 focus:shadow-none',
       },
     },

packages/nuxtlabs-ui-vue/tailwind.config.js

@@ -36,8 +36,8 @@ export const darkMode = 'class'
 export const theme = {
   extend: {
     colors: tailwindColors,
-    backgroundColor: ['disabled', 'ring', 'focus', 'border'],
-    textColor: ['disabled', 'ring', 'focus', 'border'],
+    backgroundColor: ['disabled'],
+    textColor: ['disabled'],
     fontFamily: {
       Roboto: 'Roboto',
     },