chore(release): 2.0.4

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.0.4](https://github.com/nuxtlabs/ui/compare/v2.0.3...v2.0.4) (2023-05-15)
+
+
+### Bug Fixes
+
+* **SelectMenu:** add missing `inline-flex` on wrapper ([e8b4654](https://github.com/nuxtlabs/ui/commit/e8b46540d8767c7a63c0ff8e28263615626916e7))
+
 ### [2.0.3](https://github.com/nuxtlabs/ui/compare/v2.0.2...v2.0.3) (2023-05-15)
 
 ### [2.0.2](https://github.com/nuxtlabs/ui/compare/v2.0.1...v2.0.2) (2023-05-11)

docs/components/content/Alert.vue

@@ -2,7 +2,7 @@
   <component
     :is="to ? NuxtLink : 'div'"
     :to="to"
-    class="block pl-4 pr-6 py-3 rounded-md !border !border-gray-200 dark:!border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200 text-sm leading-6 my-5 last:mb-0 font-normal group relative prose-code:bg-gray-200 dark:prose-code:bg-gray-800"
+    class="block pl-4 pr-6 py-3 rounded-md !border !border-gray-200 dark:!border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200 text-sm leading-6 my-5 last:mb-0 font-normal group relative"
     :class="[to ? 'hover:!border-primary-500 dark:hover:!border-primary-400 hover:text-primary-500 dark:hover:text-primary-400 border-dashed' : '']"
   >
     <UIcon v-if="!!to" name="i-heroicons-link-20-solid" class="w-3 h-3 absolute right-2 top-2 text-gray-400 dark:text-gray-500 group-hover:text-primary-500 dark:group-hover:text-primary-400" />

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

@@ -99,7 +99,7 @@ Use the `loadingIcon` prop to set a different icon or change it globally in `ui.
 ---
 baseProps:
   name: 'input'
-  placeholder: 'Search'
+  placeholder: 'Searching...'
 props:
   loading: true
   icon: 'i-heroicons-magnifying-glass-20-solid'
@@ -110,6 +110,30 @@ 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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxthq/ui",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "repository": "https://github.com/nuxtlabs/ui",
   "license": "MIT",
   "exports": {

src/runtime/app.config.ts

@@ -316,7 +316,7 @@ const inputGroup = {
   label: 'block text-sm font-medium text-gray-700 dark:text-gray-200',
   labelWrapper: 'flex content-center justify-between',
   container: 'mt-1 relative',
-  required: 'text-red-400',
+  required: 'text-red-500 dark:text-red-400 ml-0.5',
   description: 'text-sm leading-5 text-gray-500 dark:text-gray-400',
   hint: 'text-sm leading-5 text-gray-500 dark:text-gray-400',
   help: 'mt-2 text-sm text-gray-500 dark:text-gray-400'
@@ -340,7 +340,7 @@ const select = {
 }
 
 const selectMenu = {
-  wrapper: 'relative',
+  wrapper: 'relative inline-flex',
   container: 'z-20',
   width: 'w-full',
   height: 'max-h-60',
@@ -398,7 +398,7 @@ const radio = {
   wrapper: 'relative flex items-start',
   base: 'h-4 w-4 text-primary-500 dark:text-primary-400 focus-visible:ring-2 focus-visible:ring-offset-2 bg-white dark:bg-gray-900 dark:checked:bg-current dark:checked:border-transparent focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:ring-offset-white dark:focus:ring-offset-gray-900 border-gray-300 dark:border-gray-700 disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent',
   label: 'font-medium text-gray-700 dark:text-gray-200',
-  required: 'text-red-400',
+  required: 'text-red-500 dark:text-red-400',
   help: 'text-gray-500 dark:text-gray-400'
 }
 

src/runtime/components/forms/SelectMenu.vue

@@ -11,7 +11,14 @@
     :class="ui.wrapper"
     @update:model-value="onUpdate"
   >
-    <input :value="modelValue" :required="required" class="absolute inset-0 w-px opacity-0 cursor-default" tabindex="-1" aria-hidden="true">
+    <input
+      v-if="required"
+      :value="modelValue"
+      :required="required"
+      class="absolute inset-0 w-px opacity-0 cursor-default"
+      tabindex="-1"
+      aria-hidden="true"
+    >
 
     <component
       :is="searchable ? 'ComboboxButton' : 'ListboxButton'"