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

src/runtime/components/forms/FormGroup.ts

@@ -0,0 +1,82 @@
+import { computed, defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import { defu } from 'defu'
+import { getSlotsChildren } from '../../utils'
+import { useAppConfig } from '#imports'
+// TODO: Remove
+// @ts-expect-error
+import appConfig from '#build/app.config'
+
+// const appConfig = useAppConfig()
+
+export default defineComponent({
+  props: {
+    name: {
+      type: String,
+      default: null
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    description: {
+      type: String,
+      default: null
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    help: {
+      type: String,
+      default: null
+    },
+    error: {
+      type: [String, Boolean],
+      default: null
+    },
+    hint: {
+      type: String,
+      default: null
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof appConfig.ui.formGroup>>,
+      default: () => appConfig.ui.formGroup
+    }
+  },
+  setup (props, { slots }) {
+    // TODO: Remove
+    const appConfig = useAppConfig()
+
+    const ui = computed<Partial<typeof appConfig.ui.formGroup>>(() => defu({}, props.ui, appConfig.ui.formGroup))
+
+    const children = computed(() => getSlotsChildren(slots))
+
+    const clones = computed(() => children.value.map((node) => {
+      if (props.error) {
+        node.props.oldColor = node.props.color
+        node.props.color = 'red'
+      } else {
+        node.props.color = node.props.oldColor
+      }
+
+      if (props.name) {
+        node.props.name = props.name
+      }
+
+      return node
+    }))
+
+    return () => h('div', { class: [ui.value.wrapper] }, [
+      props.label && h('div', { class: [ui.value.label.wrapper] }, [
+        h('label', { for: props.name, class: [ui.value.label.base, props.required && ui.value.label.required] }, props.label),
+        props.hint && h('span', { class: [ui.value.hint] }, props.hint)
+      ]),
+      props.description && h('p', { class: [ui.value.description] }, props.description),
+      h('div', { class: [!!props.label && ui.value.container] }, [
+        ...clones.value,
+        props.error && typeof props.error === 'string' ? h('p', { class: [ui.value.error] }, props.error) : props.help ? h('p', { class: [ui.value.help] }, props.help) : null
+      ])
+    ])
+  }
+})

src/runtime/components/forms/Input.vue

@@ -113,6 +113,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    padded: {
+      type: Boolean,
+      default: true
+    },
     size: {
       type: String,
       default: () => appConfig.ui.input.default.size,
@@ -120,11 +124,21 @@ export default defineComponent({
         return Object.keys(appConfig.ui.input.size).includes(value)
       }
     },
-    appearance: {
+    color: {
       type: String,
-      default: () => appConfig.ui.input.default.appearance,
+      default: () => appConfig.ui.input.default.color,
       validator (value: string) {
-        return Object.keys(appConfig.ui.input.appearance).includes(value)
+        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.input.color)].includes(value)
+      }
+    },
+    variant: {
+      type: String,
+      default: () => appConfig.ui.input.default.variant,
+      validator (value: string) {
+        return [
+          ...Object.keys(appConfig.ui.input.variant),
+          ...Object.values(appConfig.ui.input.color).flatMap(value => Object.keys(value))
+        ].includes(value)
       }
     },
     ui: {
@@ -158,11 +172,15 @@ export default defineComponent({
     })
 
     const inputClass = computed(() => {
+      const variant = ui.value.color?.[props.color as string]?.[props.variant as string] || ui.value.variant[props.variant]
+
       return classNames(
         ui.value.base,
+        ui.value.rounded,
+        ui.value.placeholder,
         ui.value.size[props.size],
-        ui.value.padding[props.size],
-        ui.value.appearance[props.appearance],
+        props.padded && ui.value.padding[props.size],
+        variant?.replaceAll('{color}', props.color),
         isLeading.value && ui.value.leading.padding[props.size],
         isTrailing.value && ui.value.trailing.padding[props.size],
         ui.value.custom
@@ -196,6 +214,7 @@ export default defineComponent({
     const iconClass = computed(() => {
       return classNames(
         ui.value.icon.base,
+        appConfig.ui.colors.includes(props.color) && ui.value.icon.color.replaceAll('{color}', props.color),
         ui.value.icon.size[props.size],
         props.loading && 'animate-spin'
       )

src/runtime/components/forms/InputGroup.vue

@@ -1,78 +0,0 @@
-<template>
-  <div :class="ui.wrapper">
-    <div v-if="label || $slots.label" :class="ui.labelWrapper">
-      <label :for="name" :class="ui.label">
-        <slot name="label">{{ label }}</slot>
-        <span v-if="required" :class="ui.required">*</span>
-      </label>
-      <span v-if="$slots.hint || hint" :class="ui.hint">
-        <slot name="hint">{{ hint }}</slot>
-      </span>
-    </div>
-    <p v-if="description" :class="ui.description">
-      {{ description }}
-    </p>
-    <div :class="!!label && ui.container">
-      <slot />
-      <p v-if="help" :class="ui.help">
-        {{ help }}
-      </p>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from 'vue'
-import type { PropType } from 'vue'
-import { defu } from 'defu'
-import { useAppConfig } from '#imports'
-// TODO: Remove
-// @ts-expect-error
-import appConfig from '#build/app.config'
-
-// const appConfig = useAppConfig()
-
-export default defineComponent({
-  props: {
-    name: {
-      type: String,
-      default: null
-    },
-    label: {
-      type: String,
-      default: null
-    },
-    description: {
-      type: String,
-      default: null
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    help: {
-      type: String,
-      default: null
-    },
-    hint: {
-      type: String,
-      default: null
-    },
-    ui: {
-      type: Object as PropType<Partial<typeof appConfig.ui.inputGroup>>,
-      default: () => appConfig.ui.inputGroup
-    }
-  },
-  setup (props) {
-    // TODO: Remove
-    const appConfig = useAppConfig()
-
-    const ui = computed<Partial<typeof appConfig.ui.inputGroup>>(() => defu({}, props.ui, appConfig.ui.inputGroup))
-
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui
-    }
-  }
-})
-</script>

src/runtime/components/forms/Select.vue

@@ -97,6 +97,10 @@ export default defineComponent({
       type: Array,
       default: () => []
     },
+    padded: {
+      type: Boolean,
+      default: true
+    },
     size: {
       type: String,
       default: () => appConfig.ui.select.default.size,
@@ -104,11 +108,21 @@ export default defineComponent({
         return Object.keys(appConfig.ui.select.size).includes(value)
       }
     },
-    appearance: {
+    color: {
       type: String,
-      default: () => appConfig.ui.select.default.appearance,
+      default: () => appConfig.ui.select.default.color,
       validator (value: string) {
-        return Object.keys(appConfig.ui.select.appearance).includes(value)
+        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.select.color)].includes(value)
+      }
+    },
+    variant: {
+      type: String,
+      default: () => appConfig.ui.select.default.variant,
+      validator (value: string) {
+        return [
+          ...Object.keys(appConfig.ui.select.variant),
+          ...Object.values(appConfig.ui.select.color).flatMap(value => Object.keys(value))
+        ].includes(value)
       }
     },
     textAttribute: {
@@ -188,11 +202,15 @@ export default defineComponent({
     })
 
     const selectClass = computed(() => {
+      const variant = ui.value.color?.[props.color as string]?.[props.variant as string] || ui.value.variant[props.variant]
+
       return classNames(
         ui.value.base,
+        ui.value.rounded,
+        ui.value.placeholder,
         ui.value.size[props.size],
-        ui.value.padding[props.size],
-        ui.value.appearance[props.appearance],
+        props.padded && ui.value.padding[props.size],
+        variant?.replaceAll('{color}', props.color),
         !!props.icon && ui.value.leading.padding[props.size],
         ui.value.trailing.padding[props.size],
         ui.value.custom
@@ -202,6 +220,7 @@ export default defineComponent({
     const iconClass = computed(() => {
       return classNames(
         ui.value.icon.base,
+        appConfig.ui.colors.includes(props.color) && ui.value.icon.color.replaceAll('{color}', props.color),
         ui.value.icon.size[props.size]
       )
     })

src/runtime/components/forms/SelectMenu.vue

@@ -198,6 +198,10 @@ export default defineComponent({
       type: String,
       default: null
     },
+    padded: {
+      type: Boolean,
+      default: true
+    },
     size: {
       type: String,
       default: () => appConfig.ui.select.default.size,
@@ -205,11 +209,21 @@ export default defineComponent({
         return Object.keys(appConfig.ui.select.size).includes(value)
       }
     },
-    appearance: {
+    color: {
       type: String,
-      default: () => appConfig.ui.select.default.appearance,
+      default: () => appConfig.ui.select.default.color,
       validator (value: string) {
-        return Object.keys(appConfig.ui.select.appearance).includes(value)
+        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.select.color)].includes(value)
+      }
+    },
+    variant: {
+      type: String,
+      default: () => appConfig.ui.select.default.variant,
+      validator (value: string) {
+        return [
+          ...Object.keys(appConfig.ui.select.variant),
+          ...Object.values(appConfig.ui.select.color).flatMap(value => Object.keys(value))
+        ].includes(value)
       }
     },
     optionAttribute: {
@@ -249,13 +263,17 @@ export default defineComponent({
     const searchInput = ref<ComponentPublicInstance<HTMLElement>>()
 
     const selectMenuClass = computed(() => {
+      const variant = uiSelect.value.color?.[props.color as string]?.[props.variant as string] || uiSelect.value.variant[props.variant]
+
       return classNames(
         uiSelect.value.base,
+        uiSelect.value.rounded,
+        uiSelect.value.placeholder,
         'text-left cursor-default',
         uiSelect.value.size[props.size],
         uiSelect.value.gap[props.size],
-        uiSelect.value.padding[props.size],
-        uiSelect.value.appearance[props.appearance],
+        props.padded && uiSelect.value.padding[props.size],
+        variant?.replaceAll('{color}', props.color),
         !!props.icon && uiSelect.value.leading.padding[props.size],
         uiSelect.value.trailing.padding[props.size],
         uiSelect.value.custom,
@@ -266,6 +284,7 @@ export default defineComponent({
     const iconClass = computed(() => {
       return classNames(
         uiSelect.value.icon.base,
+        appConfig.ui.colors.includes(props.color) && uiSelect.value.icon.color.replaceAll('{color}', props.color),
         uiSelect.value.icon.size[props.size]
       )
     })

src/runtime/components/forms/Textarea.vue

@@ -72,6 +72,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    padded: {
+      type: Boolean,
+      default: true
+    },
     size: {
       type: String,
       default: () => appConfig.ui.textarea.default.size,
@@ -79,11 +83,21 @@ export default defineComponent({
         return Object.keys(appConfig.ui.textarea.size).includes(value)
       }
     },
-    appearance: {
+    color: {
       type: String,
-      default: () => appConfig.ui.textarea.default.appearance,
+      default: () => appConfig.ui.textarea.default.color,
       validator (value: string) {
-        return Object.keys(appConfig.ui.textarea.appearance).includes(value)
+        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.textarea.color)].includes(value)
+      }
+    },
+    variant: {
+      type: String,
+      default: () => appConfig.ui.textarea.default.variant,
+      validator (value: string) {
+        return [
+          ...Object.keys(appConfig.ui.textarea.variant),
+          ...Object.values(appConfig.ui.textarea.color).flatMap(value => Object.keys(value))
+        ].includes(value)
       }
     },
     ui: {
@@ -146,11 +160,15 @@ export default defineComponent({
     })
 
     const textareaClass = computed(() => {
+      const variant = ui.value.color?.[props.color as string]?.[props.variant as string] || ui.value.variant[props.variant]
+
       return classNames(
         ui.value.base,
+        ui.value.rounded,
+        ui.value.placeholder,
         ui.value.size[props.size],
-        ui.value.padding[props.size],
-        ui.value.appearance[props.appearance],
+        props.padded && ui.value.padding[props.size],
+        variant?.replaceAll('{color}', props.color),
         !props.resize && 'resize-none',
         ui.value.custom
       )