feat!: handle color states on form elements (#234)

docs/components/ThemeSelect.vue

@@ -5,7 +5,7 @@
         v-model="primary"
         name="primary"
         class="w-full [&>div>button]:!rounded-r-none"
-        appearance="gray"
+        color="gray"
         :ui="{ width: 'w-[194px]' }"
         :popper="{ placement: 'bottom-start' }"
         :options="primaryOptions"
@@ -29,7 +29,7 @@
         v-model="gray"
         name="gray"
         class="w-full [&>div>button]:!rounded-l-none [&>div>button]:-ml-px"
-        appearance="gray"
+        color="gray"
         :ui="{ width: 'w-[194px]' }"
         :popper="{ placement: 'bottom-end' }"
         :options="grayOptions"

docs/components/content/ComponentCard.vue

@@ -7,7 +7,7 @@
           v-if="prop.type === 'boolean'"
           v-model="componentProps[prop.name]"
           :name="prop.name"
-          appearance="none"
+          variant="none"
           class="justify-center"
         />
         <USelectMenu
@@ -16,7 +16,7 @@
           :options="prop.options"
           :name="prop.name"
           :label="componentProps[prop.name]"
-          appearance="none"
+          variant="none"
           class="inline-flex"
           :ui="{ width: 'w-32 !-mt-px', rounded: 'rounded-b-md' }"
           :ui-select="{ custom: '!py-0' }"
@@ -27,7 +27,7 @@
           :model-value="componentProps[prop.name]"
           :type="prop.type === 'number' ? 'number' : 'text'"
           :name="prop.name"
-          appearance="none"
+          variant="none"
           autocomplete="off"
           :ui="{ custom: '!py-0' }"
           @update:model-value="val => componentProps[prop.name] = prop.type === 'number' ? Number(val) : val"
@@ -79,6 +79,10 @@ const props = defineProps({
     type: Array,
     default: () => []
   },
+  extraColors: {
+    type: Array,
+    default: () => []
+  },
   backgroundClass: {
     type: String,
     default: 'bg-white dark:bg-gray-900'
@@ -121,7 +125,8 @@ const propsToSelect = computed(() => Object.keys(componentProps).map((key) => {
   const keys = useGet(ui.value, dottedKey, {})
   let options = typeof keys === 'object' && Object.keys(keys)
   if (key.toLowerCase().endsWith('color')) {
-    options = appConfig.ui.colors
+    // @ts-ignore
+    options = [...appConfig.ui.colors, ...props.extraColors]
   }
 
   return {

docs/content/2.elements/1.avatar.md

@@ -36,6 +36,8 @@ Use the `chip-color` and `chip-position` props to display a chip on the Avatar.
 props:
   chipColor: 'primary'
   chipPosition: 'top-right'
+extraColors:
+  - gray
 baseProps:
   src: 'https://avatars.githubusercontent.com/u/739984?v=4'
   alt: 'Avatar'

docs/content/3.forms/1.input.md

@@ -12,43 +12,76 @@ baseProps:
 ---
 ::
 
-### Size
+### Style
 
-Use the `size` prop to change the size of the Input.
+Use the `color` and `variant` props to change the visual style of the Input.
 
 ::component-card
 ---
 baseProps:
   name: 'input'
+  placeholder: 'Search...'
 props:
-  size: 'sm'
+  color: 'primary'
+  variant: 'outline'
 ---
 ::
 
-### Placeholder
+Besides all the colors from the `ui.colors` object, you can also use the `white` (default) and `gray` colors with their pre-defined variants.
 
-Use the `placeholder` prop to set a placeholder text.
+#### White
 
 ::component-card
 ---
 baseProps:
   name: 'input'
+  placeholder: 'Search...'
 props:
+  color: 'white'
+  variant: 'outline'
+excludedProps:
+  - color
+---
+::
+
+#### Gray
+
+::component-card
+---
+baseProps:
+  name: 'input'
   placeholder: 'Search...'
+props:
+  color: 'gray'
+  variant: 'outline'
+excludedProps:
+  - color
 ---
 ::
 
-### Appearance
+### Size
 
-Use the `appearance` prop to change the style of the Input.
+Use the `size` prop to change the size of the Input.
+
+::component-card
+---
+baseProps:
+  name: 'input'
+props:
+  size: 'sm'
+---
+::
+
+### Placeholder
+
+Use the `placeholder` prop to set a placeholder text.
 
 ::component-card
 ---
 baseProps:
   name: 'input'
-  placeholder: 'Search...'
 props:
-  appearance: 'white'
+  placeholder: 'Search...'
 ---
 ::
 
@@ -65,9 +98,12 @@ baseProps:
   placeholder: 'Search...'
 props:
   icon: 'i-heroicons-magnifying-glass-20-solid'
-  appearance: 'white'
   size: 'sm'
+  color: 'white'
   trailing: false
+extraColors:
+  - white
+  - gray
 excludedProps:
   - icon
 ---
@@ -81,12 +117,9 @@ Use the `disabled` prop to disable the Input.
 ---
 baseProps:
   name: 'input'
-props:
   placeholder: 'Search...'
-  appearance: 'white'
+props:
   disabled: true
-excludedProps:
-  - placeholder
 ---
 ::
 
@@ -109,32 +142,6 @@ excludedProps:
 ---
 ::
 
-### Group
-
-You can use the `InputGroup` component to add a label and additional informations to a form element.
-
-::component-card{slug="InputGroup"}
----
-baseProps:
-  name: 'group'
-props:
-  label: 'Email'
-  help: "We'll only use this for spam."
-  hint: 'Required'
-  required: true
-code: >-
-
-  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
----
-
-#default
-:u-input{name="group" placeholder="you@example.com" icon="i-heroicons-envelope"}
-::
-
-::alert{icon="i-heroicons-light-bulb"}
-This also works with `Textarea`, `Select` and `SelectMenu` components.
-::
-
 ## Props
 
 :component-props

docs/content/3.forms/2.textarea.md

@@ -12,43 +12,76 @@ baseProps:
 ---
 ::
 
-### Size
+### Style
 
-Use the `size` prop to change the size of the Textarea.
+Use the `color` and `variant` props to change the visual style of the Textarea.
 
 ::component-card
 ---
 baseProps:
   name: 'textarea'
+  placeholder: 'Search...'
 props:
-  size: 'sm'
+  color: 'primary'
+  variant: 'outline'
 ---
 ::
 
-### Placeholder
+Besides all the colors from the `ui.colors` object, you can also use the `white` (default) and `gray` colors with their pre-defined variants.
 
-Use the `placeholder` prop to set a placeholder text.
+#### White
 
 ::component-card
 ---
 baseProps:
   name: 'textarea'
+  placeholder: 'Search...'
 props:
+  color: 'white'
+  variant: 'outline'
+excludedProps:
+  - color
+---
+::
+
+#### Gray
+
+::component-card
+---
+baseProps:
+  name: 'textarea'
   placeholder: 'Search...'
+props:
+  color: 'gray'
+  variant: 'outline'
+excludedProps:
+  - color
 ---
 ::
 
-### Appearance
+### Size
 
-Use the `appearance` prop to change the style of the Textarea.
+Use the `size` prop to change the size of the Textarea.
+
+::component-card
+---
+baseProps:
+  name: 'textarea'
+props:
+  size: 'sm'
+---
+::
+
+### Placeholder
+
+Use the `placeholder` prop to set a placeholder text.
 
 ::component-card
 ---
 baseProps:
   name: 'textarea'
-  placeholder: 'Search...'
 props:
-  appearance: 'white'
+  placeholder: 'Search...'
 ---
 ::
 
@@ -62,7 +95,6 @@ baseProps:
   name: 'input'
   placeholder: 'Search...'
 props:
-  appearance: 'white'
   disabled: true
 ---
 ::