fix(Form): extend Form<...> type with HTMLFormElement

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [2.15.1](https://github.com/nuxt/ui/compare/v2.15.0...v2.15.1) (2024-04-02)
+
+
+### Features
+
+* **Avatar:** add `as` prop to use `NuxtImg` underneath ([49b73aa](https://github.com/nuxt/ui/commit/49b73aa024be14a9aa150a2804f4dcb18542fa49)), closes [#1577](https://github.com/nuxt/ui/issues/1577)
+
+
+### Bug Fixes
+
+* **Checkbox:** `[@change](https://github.com/change)` event value ([#1580](https://github.com/nuxt/ui/issues/1580)) ([c98d6e3](https://github.com/nuxt/ui/commit/c98d6e31c0e3f46b97957d5cf3de7f9da1f70c58))
+* **Divider:** add `w-full` only on horizontal wrapper ([#1565](https://github.com/nuxt/ui/issues/1565)) ([bd8b737](https://github.com/nuxt/ui/commit/bd8b737642280e6a83b67f9a27dd7a823a77e963))
+* **Dropdown:** missing `mouseenter` event on container ([7288953](https://github.com/nuxt/ui/commit/72889535e7e9763e7ebf59498f22c39bf09d6477))
+* **Input/SelectMenu:** handle `file` type and `change` events ([#1570](https://github.com/nuxt/ui/issues/1570)) ([878f707](https://github.com/nuxt/ui/commit/878f7078a28c5e70a662682d1293db466d518c7d))
+* **Popover:** missing `mouseenter` event on container ([8517897](https://github.com/nuxt/ui/commit/8517897c34adaa9e3624f867b43106deb59fcbe8)), closes [#1564](https://github.com/nuxt/ui/issues/1564)
+
 ## [2.15.0](https://github.com/nuxt/ui/compare/v2.14.2...v2.15.0) (2024-03-26)
 
 

docs/app.vue

@@ -72,7 +72,7 @@ const links = computed(() => {
     active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components') || route.path.startsWith('/pro/prose')
   }, {
     label: 'Pricing',
-    icon: 'i-heroicons-credit-card',
+    icon: 'i-heroicons-ticket',
     to: '/pro/pricing'
   }, {
     label: 'Templates',

docs/error.vue

@@ -79,7 +79,7 @@ const links = computed(() => {
     active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components') || route.path.startsWith('/pro/prose')
   }, {
     label: 'Pricing',
-    icon: 'i-heroicons-credit-card',
+    icon: 'i-heroicons-ticket',
     to: '/pro/pricing'
   }, {
     label: 'Templates',

docs/nuxt.config.ts

@@ -74,16 +74,6 @@ export default defineNuxtConfig({
   image: {
     provider: 'ipx'
   },
-  fontMetrics: {
-    fonts: ['DM Sans']
-  },
-  googleFonts: {
-    display: 'swap',
-    download: true,
-    families: {
-      'DM+Sans': [400, 500, 600, 700]
-    }
-  },
   nitro: {
     prerender: {
       routes: [

docs/package.json

@@ -7,24 +7,24 @@
   },
   "devDependencies": {
     "@iconify-json/heroicons": "^1.1.20",
-    "@iconify-json/simple-icons": "^1.1.97",
+    "@iconify-json/simple-icons": "^1.1.98",
     "@nuxt/content": "^2.12.1",
-    "@nuxt/eslint-config": "^0.2.0",
-    "@nuxt/fonts": "^0.5.1",
-    "@nuxt/image": "^1.4.0",
-    "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@1.1.0-28524317.f36a434",
-    "@nuxtjs/plausible": "^0.2.4",
-    "@octokit/rest": "^20.0.2",
+    "@nuxt/eslint-config": "^0.3.0",
+    "@nuxt/fonts": "^0.6.1",
+    "@nuxt/image": "^1.5.0",
+    "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@1.1.0-28538540.a353e68",
+    "@nuxtjs/plausible": "^1.0.0",
+    "@octokit/rest": "^20.1.0",
     "@vueuse/nuxt": "^10.9.0",
     "date-fns": "^3.6.0",
     "eslint": "^8.57.0",
-    "joi": "^17.12.2",
-    "nuxt": "^3.11.1",
+    "joi": "^17.12.3",
+    "nuxt": "^3.11.2",
     "nuxt-cloudflare-analytics": "^1.0.8",
     "nuxt-component-meta": "^0.6.3",
     "nuxt-og-image": "^2.2.4",
     "prettier": "^3.2.5",
-    "typescript": "^5.4.3",
+    "typescript": "^5.4.4",
     "ufo": "^1.5.3",
     "v-calendar": "^3.1.2",
     "valibot": "^0.30.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.15.0",
+  "version": "2.15.1",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",
   "type": "module",
@@ -37,14 +37,14 @@
     "@headlessui/tailwindcss": "^0.2.0",
     "@headlessui/vue": "^1.7.19",
     "@iconify-json/heroicons": "^1.1.20",
-    "@nuxt/kit": "^3.11.1",
+    "@nuxt/kit": "^3.11.2",
     "@nuxtjs/color-mode": "^3.3.3",
     "@nuxtjs/tailwindcss": "^6.11.4",
     "@popperjs/core": "^2.11.8",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.12",
     "@vueuse/core": "^10.9.0",
     "@vueuse/integrations": "^10.9.0",
     "@vueuse/math": "^10.9.0",
@@ -55,32 +55,32 @@
     "pathe": "^1.1.2",
     "scule": "^1.3.0",
     "tailwind-merge": "^2.2.2",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.3"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.2.0",
+    "@nuxt/eslint-config": "^0.3.0",
     "@nuxt/module-builder": "^0.5.5",
     "@nuxt/test-utils": "^3.12.0",
     "@release-it/conventional-changelog": "^8.0.1",
     "@vue/test-utils": "^2.4.5",
     "eslint": "^8.57.0",
-    "happy-dom": "^14.3.6",
-    "joi": "^17.12.2",
-    "nuxt": "^3.11.1",
+    "happy-dom": "^14.5.1",
+    "joi": "^17.12.3",
+    "nuxt": "^3.11.2",
     "release-it": "^17.1.1",
-    "typescript": "^5.4.3",
+    "typescript": "^5.4.4",
     "unbuild": "^2.0.0",
     "valibot": "^0.30.0",
     "vitest": "^1.4.0",
     "vitest-environment-nuxt": "^1.0.0",
-    "vue-tsc": "^2.0.7",
+    "vue-tsc": "^2.0.10",
     "yup": "^1.4.0",
     "zod": "^3.22.4"
   },
   "resolutions": {
-    "@nuxt/kit": "^3.11.1",
-    "@nuxt/schema": "3.11.1",
-    "tailwindcss": "3.4.1",
+    "@nuxt/kit": "^3.11.2",
+    "@nuxt/schema": "3.11.2",
+    "tailwindcss": "^3.4.3",
     "@headlessui/vue": "1.7.19",
     "vue": "3.4.21"
   }

src/runtime/components/data/Table.vue

@@ -280,8 +280,8 @@ export default defineComponent({
       })
     }
 
-    function onChange (event: any) {
-      if (event.target.checked) {
+    function onChange (checked: boolean) {
+      if (checked) {
         selectAllRows()
       } else {
         selected.value = []

src/runtime/components/elements/Accordion.vue

@@ -39,13 +39,27 @@
         @before-leave="onBeforeLeave"
         @leave="onLeave"
       >
-        <div v-show="open">
-          <HDisclosurePanel :class="[ui.item.base, ui.item.size, ui.item.color, ui.item.padding]" static>
-            <slot :name="item.slot || 'item'" :item="item" :index="index" :open="open" :close="close">
-              {{ item.content }}
-            </slot>
-          </HDisclosurePanel>
-        </div>
+        <HDisclosurePanel
+          v-if="unmount"
+          :class="[ui.item.base, ui.item.size, ui.item.color, ui.item.padding]"
+          unmount
+        >
+          <slot :name="item.slot || 'item'" :item="item" :index="index" :open="open" :close="close">
+            {{ item.content }}
+          </slot>
+        </HDisclosurePanel>
+        <template v-else>
+          <div v-show="open">
+            <HDisclosurePanel
+              :class="[ui.item.base, ui.item.size, ui.item.color, ui.item.padding]"
+              static
+            >
+              <slot :name="item.slot || 'item'" :item="item" :index="index" :open="open" :close="close">
+                {{ item.content }}
+              </slot>
+            </HDisclosurePanel>
+          </div>
+        </template>
       </Transition>
     </HDisclosure>
   </div>
@@ -91,6 +105,10 @@ export default defineComponent({
       type: String,
       default: () => config.default.openIcon
     },
+    unmount: {
+      type: Boolean,
+      default: false
+    },
     closeIcon: {
       type: String,
       default: () => config.default.closeIcon

src/runtime/components/elements/Avatar.vue

@@ -1,13 +1,14 @@
 <template>
   <span :class="wrapperClass">
-    <img
+    <component
+      :is="as"
       v-if="url && !error"
       :class="imgClass"
       :alt="alt"
       :src="url"
       v-bind="attrs"
       @error="onError"
-    >
+    />
     <span v-else-if="text" :class="ui.text">{{ text }}</span>
     <UIcon v-else-if="icon" :name="icon" :class="iconClass" />
     <span v-else-if="placeholder" :class="ui.placeholder">{{ placeholder }}</span>
@@ -39,6 +40,10 @@ export default defineComponent({
   },
   inheritAttrs: false,
   props: {
+    as: {
+      type: [String, Object],
+      default: 'img'
+    },
     src: {
       type: [String, Boolean],
       default: null

src/runtime/components/elements/Carousel.vue

@@ -56,7 +56,7 @@
 </template>
 
 <script lang="ts">
-import { ref, toRef, toRefs, computed, defineComponent } from 'vue'
+import { ref, toRef, computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge } from 'tailwind-merge'
 import { mergeConfig } from '../../utils'
@@ -112,10 +112,9 @@ export default defineComponent({
     const carouselRef = ref<HTMLElement>()
     const itemWidth = ref(0)
 
-    const { x, arrivedState } = useScroll(carouselRef, { behavior: 'smooth' })
-    const { width: carouselWidth } = useElementSize(carouselRef)
+    const { x } = useScroll(carouselRef, { behavior: 'smooth' })
 
-    const { left: isFirst, right: isLast } = toRefs(arrivedState)
+    const { width: carouselWidth } = useElementSize(carouselRef)
 
     useCarouselScroll(carouselRef)
 
@@ -125,7 +124,13 @@ export default defineComponent({
       itemWidth.value = entry?.target?.firstElementChild?.clientWidth || 0
     })
 
-    const currentPage = computed(() => Math.round(x.value / itemWidth.value) + 1)
+    const currentPage = computed(() => {
+      if (!itemWidth.value) {
+        return 0
+      }
+
+      return Math.round(x.value / itemWidth.value) + 1
+    })
 
     const pages = computed(() => {
       if (!itemWidth.value) {
@@ -135,6 +140,9 @@ export default defineComponent({
       return props.items.length - Math.round(carouselWidth.value / itemWidth.value) + 1
     })
 
+    const isFirst = computed(() => currentPage.value <= 1)
+    const isLast = computed(() => currentPage.value === pages.value)
+
     function onClickNext () {
       x.value += itemWidth.value
     }

src/runtime/components/elements/Dropdown.vue

@@ -182,8 +182,8 @@ export default defineComponent({
       }
     })
 
-    function onTouchStart () {
-      if (!menuApi.value) {
+    function onTouchStart (event: TouchEvent) {
+      if (!event.cancelable || !menuApi.value) {
         return
       }
 

src/runtime/components/forms/Checkbox.vue

@@ -119,7 +119,7 @@ export default defineComponent({
     })
 
     const onChange = (event: Event) => {
-      emit('change', (event.target as HTMLInputElement).value)
+      emit('change', (event.target as HTMLInputElement).checked)
       emitFormChange()
     }
 

src/runtime/components/overlays/Modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <TransitionRoot :appear="appear" :show="isOpen" as="template">
+  <TransitionRoot :appear="appear" :show="isOpen" as="template" @after-leave="onAfterLeave">
     <HDialog :class="ui.wrapper" v-bind="attrs" @close="close">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
@@ -82,7 +82,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ['update:modelValue', 'close', 'close-prevented'],
+  emits: ['update:modelValue', 'close', 'close-prevented', 'after-leave'],
   setup (props, { emit }) {
     const { ui, attrs } = useUI('modal', toRef(props, 'ui'), config, toRef(props, 'class'))
 
@@ -117,6 +117,10 @@ export default defineComponent({
       emit('close')
     }
 
+    const onAfterLeave = () => {
+      emit('after-leave')
+    }
+
     provideUseId(() => useId())
 
     return {
@@ -125,6 +129,7 @@ export default defineComponent({
       attrs,
       isOpen,
       transitionClass,
+      onAfterLeave,
       close
     }
   }

src/runtime/components/overlays/Modals.client.vue

@@ -1,5 +1,11 @@
 <template>
-  <component :is="modalState.component" v-if="modalState" v-bind="modalState.props" v-model="isOpen" />
+  <component
+    :is="modalState.component"
+    v-if="modalState"
+    v-bind="modalState.props"
+    v-model="isOpen"
+    @after-leave="reset"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -8,5 +14,5 @@ import { useModal, modalInjectionKey } from '../../composables/useModal'
 
 const modalState = inject(modalInjectionKey)
 
-const { isOpen } = useModal()
+const { isOpen, reset } = useModal()
 </script>

src/runtime/components/overlays/Popover.vue

@@ -154,8 +154,8 @@ export default defineComponent({
       }
     })
 
-    function onTouchStart () {
-      if (!popoverApi.value) {
+    function onTouchStart (event: TouchEvent) {
+      if (!event.cancelable || !popoverApi.value) {
         return
       }
 

src/runtime/components/overlays/Slideover.vue

@@ -1,5 +1,5 @@
 <template>
-  <TransitionRoot as="template" :appear="appear" :show="isOpen">
+  <TransitionRoot as="template" :appear="appear" :show="isOpen" @after-leave="onAfterLeave">
     <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" v-bind="attrs" @close="close">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
@@ -71,7 +71,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ['update:modelValue', 'close', 'close-prevented'],
+  emits: ['update:modelValue', 'close', 'close-prevented', 'after-leave'],
   setup (props, { emit }) {
     const { ui, attrs } = useUI('slideover', toRef(props, 'ui'), config, toRef(props, 'class'))
 
@@ -109,6 +109,10 @@ export default defineComponent({
       emit('close')
     }
 
+    const onAfterLeave = () => {
+      emit('after-leave')
+    }
+
     provideUseId(() => useId())
 
     return {
@@ -117,6 +121,7 @@ export default defineComponent({
       attrs,
       isOpen,
       transitionClass,
+      onAfterLeave,
       close
     }
   }

src/runtime/components/overlays/Slideovers.client.vue

@@ -4,6 +4,7 @@
     v-if="slideoverState"
     v-bind="slideoverState.props"
     v-model="isOpen"
+    @after-leave="reset"
   />
 </template>
 
@@ -13,5 +14,5 @@ import { useSlideover, slidOverInjectionKey } from '../../composables/useSlideov
 
 const slideoverState = inject(slidOverInjectionKey)
 
-const { isOpen } = useSlideover()
+const { isOpen, reset } = useSlideover()
 </script>

src/runtime/composables/useModal.ts

@@ -8,19 +8,29 @@ export const modalInjectionKey: InjectionKey<ShallowRef<ModalState>> = Symbol('n
 
 function _useModal () {
   const modalState = inject(modalInjectionKey)
-  
+
   const isOpen = ref(false)
 
   function open<T extends Component> (component: T, props?: Modal & ComponentProps<T>) {
+    if (!modalState) {
+      throw new Error('useModal() is called without provider')
+    }
+
     modalState.value = {
       component,
       props: props ?? {}
     }
+
     isOpen.value = true
   }
 
-  function close () {
+  async function close () {
+    if (!modalState) return
+
     isOpen.value = false
+  }
+
+  function reset () {
     modalState.value = {
       component: 'div',
       props: {}
@@ -31,6 +41,8 @@ function _useModal () {
    * Allows updating the modal props
    */
   function patch <T extends Component = {}> (props: Partial<Modal & ComponentProps<T>>) {
+    if (!modalState) return
+
     modalState.value = {
       ...modalState.value,
       props: {
@@ -41,11 +53,12 @@ function _useModal () {
   }
 
   return {
-    isOpen,
     open,
     close,
-    patch
+    reset,
+    patch,
+    isOpen
   }
 }
 
-export const useModal = createSharedComposable(_useModal)
+export const useModal = createSharedComposable(_useModal)

src/runtime/composables/useSlideover.ts

@@ -1,55 +1,64 @@
 import { ref, inject } from 'vue'
-import { createSharedComposable } from '@vueuse/core'
 import type { ShallowRef, Component, InjectionKey } from 'vue'
+import { createSharedComposable } from '@vueuse/core'
 import type { ComponentProps } from '../types/component'
 import type { Slideover, SlideoverState } from '../types/slideover'
 
-export const slidOverInjectionKey: InjectionKey<ShallowRef<SlideoverState>> =
-    Symbol('nuxt-ui.slideover')
+export const slidOverInjectionKey: InjectionKey<ShallowRef<SlideoverState>> = Symbol('nuxt-ui.slideover')
 
 function _useSlideover () {
-    const slideoverState = inject(slidOverInjectionKey)
-    const isOpen = ref(false)
+  const slideoverState = inject(slidOverInjectionKey)
 
-    function open<T extends Component> (component: T, props?: Slideover & ComponentProps<T>) {
-        if (!slideoverState) {
-            throw new Error('useSlideover() is called without provider')
-        }
+  const isOpen = ref(false)
 
-        slideoverState.value = {
-            component,
-            props: props ?? {}
-        }
-
-        isOpen.value = true
+  function open<T extends Component> (component: T, props?: Slideover & ComponentProps<T>) {
+    if (!slideoverState) {
+      throw new Error('useSlideover() is called without provider')
     }
 
-    function close () {
-        if (!slideoverState) return
-
-        isOpen.value = false
+    slideoverState.value = {
+      component,
+      props: props ?? {}
     }
 
-    /**
-     * Allows updating the slideover props
-     */
-    function patch<T extends Component = {}> (props: Partial<Slideover & ComponentProps<T>>) {
-        if (!slideoverState) return
+    isOpen.value = true
+  }
 
-        slideoverState.value = {
-            ...slideoverState.value,
-            props: {
-                ...slideoverState.value.props,
-                ...props
-            }
-        }
+  async function close () {
+    if (!slideoverState) return
+
+    isOpen.value = false
+  }
+
+  function reset () {
+    slideoverState.value = {
+      component: 'div',
+      props: {}
     }
-    return {
-        open,
-        close,
-        patch,
-        isOpen
+  }
+
+  /**
+   * Allows updating the slideover props
+   */
+  function patch<T extends Component = {}> (props: Partial<Slideover & ComponentProps<T>>) {
+    if (!slideoverState) return
+
+    slideoverState.value = {
+      ...slideoverState.value,
+      props: {
+        ...slideoverState.value.props,
+        ...props
+      }
     }
+  }
+
+  return {
+    open,
+    close,
+    reset,
+    patch,
+    isOpen
+  }
 }
 
 export const useSlideover = createSharedComposable(_useSlideover)

src/runtime/types/form.d.ts

@@ -9,7 +9,7 @@ export interface FormErrorWithId extends FormError {
   id: string
 }
 
-export interface Form<T> {
+export interface Form<T> extends HTMLFormElement {
   validate(path?: string | string[], opts?: { silent?: true }): Promise<T | false>;
   validate(path?: string | string[], opts?: { silent?: false }): Promise<T>;
   clear(path?: string): void