feat(calendar): add month/year picker

Author: onmax

docs/app/components/content/examples/calendar/CalendarMonthPickerExample.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { CalendarDate } from '@internationalized/date'
+
+const modelValue = shallowRef<CalendarDate>()
+
+const displayValue = computed(() => {
+  if (!modelValue.value) return 'Select month'
+  const d = new Date(modelValue.value.year, modelValue.value.month - 1, 1)
+  return new Intl.DateTimeFormat('en', { month: 'short', year: 'numeric' }).format(d)
+})
+</script>
+
+<template>
+  <UPopover>
+    <UButton variant="outline" color="neutral" trailing-icon="i-lucide-calendar">
+      {{ displayValue }}
+    </UButton>
+
+    <template #content>
+      <UCalendar v-model="modelValue" type="month" />
+    </template>
+  </UPopover>
+</template>

docs/app/components/content/examples/calendar/CalendarYearPickerExample.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { CalendarDate } from '@internationalized/date'
+
+const modelValue = shallowRef<CalendarDate>()
+
+const displayValue = computed(() => modelValue.value ? String(modelValue.value.year) : 'Select year')
+</script>
+
+<template>
+  <UPopover>
+    <UButton variant="outline" color="neutral" trailing-icon="i-lucide-calendar">
+      {{ displayValue }}
+    </UButton>
+
+    <template #content>
+      <UCalendar v-model="modelValue" type="year" />
+    </template>
+  </UPopover>
+</template>

docs/app/pages/team.vue

@@ -16,7 +16,7 @@ defineOgImageComponent('Docs')
 
 const { data: module } = await useFetch('/api/module.json')
 
-const contributors = computed(() => module.value?.contributors?.filter(contributor => !module.value?.team?.find(user => user.login === contributor.username)))
+const contributors = computed(() => module.value?.contributors?.filter((contributor: { username: string }) => !module.value?.team?.find((user: { login: string }) => user.login === contributor.username)))
 
 const icons = {
   website: 'i-lucide-link',

docs/content/docs/2.components/calendar.md

@@ -209,6 +209,65 @@ props:
 ---
 ::
 
+### Type
+
+Use the `type` prop to change the calendar picker type. Defaults to `date`.
+
+Set `type="month"` for a month-only picker.
+
+::component-code
+---
+cast:
+  modelValue: DateValue
+ignore:
+  - modelValue
+  - type
+external:
+  - modelValue
+props:
+  type: month
+  modelValue: [2022, 3, 1]
+---
+::
+
+Set `type="year"` for a year-only picker.
+
+::component-code
+---
+cast:
+  modelValue: DateValue
+ignore:
+  - modelValue
+  - type
+external:
+  - modelValue
+props:
+  type: year
+  modelValue: [2022, 1, 1]
+---
+::
+
+### Default View
+
+Use the `default-view` prop to set the initial view. Defaults to `day` when `type="date"`, or to the picker type when using `type="month"` or `type="year"`.
+
+::component-code
+---
+cast:
+  defaultValue: DateValue
+ignore:
+  - defaultView
+  - defaultValue
+external:
+  - defaultValue
+props:
+  defaultView: month
+  defaultValue: [2022, 2, 3]
+---
+::
+
+The heading is clickable when using `type="date"` (default) and allows switching between day, month, and year views. Selecting a month or year navigates back to the day view.
+
 ## Examples
 
 ### With chip events
@@ -275,6 +334,26 @@ name: 'calendar-external-controls-example'
 ---
 ::
 
+### As a MonthPicker
+
+Use `type="month"` with a [Popover](/docs/components/popover) to create a month picker.
+
+::component-example
+---
+name: 'calendar-month-picker-example'
+---
+::
+
+### As a YearPicker
+
+Use `type="year"` with a [Popover](/docs/components/popover) to create a year picker.
+
+::component-example
+---
+name: 'calendar-year-picker-example'
+---
+::
+
 ### As a DatePicker
 
 Use a [Button](/docs/components/button) and a [Popover](/docs/components/popover) component to create a date picker.

docs/package.json

@@ -9,12 +9,12 @@
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
-    "@ai-sdk/gateway": "^3.0.32",
-    "@ai-sdk/mcp": "^1.0.18",
-    "@ai-sdk/vue": "^3.0.68",
+    "@ai-sdk/gateway": "^3.0.22",
+    "@ai-sdk/mcp": "^1.0.13",
+    "@ai-sdk/vue": "^3.0.49",
     "@iconify-json/logos": "^1.2.10",
     "@iconify-json/lucide": "^1.2.87",
-    "@iconify-json/simple-icons": "^1.2.69",
+    "@iconify-json/simple-icons": "^1.2.68",
     "@iconify-json/vscode-icons": "^1.2.40",
     "@modelcontextprotocol/sdk": "^1.25.3",
     "@nuxt/a11y": "1.0.0-alpha.1",
@@ -25,15 +25,15 @@
     "@nuxtjs/mdc": "^0.20.0",
     "@nuxtjs/plausible": "^2.0.1",
     "@octokit/rest": "^22.0.1",
-    "@regle/core": "^1.17.4",
-    "@regle/rules": "^1.17.4",
-    "@tiptap/extension-emoji": "^3.18.0",
-    "@tiptap/extension-text-align": "^3.18.0",
+    "@regle/core": "^1.17.1",
+    "@regle/rules": "^1.17.1",
+    "@tiptap/extension-emoji": "^3.17.1",
+    "@tiptap/extension-text-align": "^3.17.1",
     "@vercel/analytics": "^1.6.1",
     "@vercel/speed-insights": "^1.3.1",
-    "@vueuse/integrations": "^14.2.0",
-    "@vueuse/nuxt": "^14.2.0",
-    "ai": "^6.0.68",
+    "@vueuse/integrations": "^14.1.0",
+    "@vueuse/nuxt": "^14.1.0",
+    "ai": "^6.0.49",
     "better-sqlite3": "^12.6.2",
     "capture-website": "^5.1.0",
     "joi": "^18.0.2",
@@ -46,7 +46,7 @@
     "nuxt-llms": "^0.2.0",
     "nuxt-og-image": "^5.1.13",
     "prettier": "^3.8.1",
-    "shiki": "^3.22.0",
+    "shiki": "^3.21.0",
     "shiki-stream": "^0.1.4",
     "shiki-transformer-color-highlight": "^1.0.0",
     "simple-git": "^3.30.0",
@@ -60,8 +60,5 @@
     "vue-component-meta": "^3.2.4",
     "yup": "^1.7.1",
     "zod": "^4.3.6"
-  },
-  "devDependencies": {
-    "@types/sortablejs": "^1.15.9"
   }
 }

package.json

@@ -2,7 +2,7 @@
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
   "version": "4.4.0",
-  "packageManager": "pnpm@10.28.2",
+  "packageManager": "pnpm@10.28.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -123,7 +123,7 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.5",
+    "@floating-ui/dom": "^1.7.4",
     "@iconify/vue": "^5.0.0",
     "@internationalized/date": "^3.10.1",
     "@internationalized/number": "^3.6.5",
@@ -137,27 +137,27 @@
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/vue-table": "^8.21.3",
     "@tanstack/vue-virtual": "^3.13.18",
-    "@tiptap/core": "^3.18.0",
-    "@tiptap/extension-bubble-menu": "^3.18.0",
-    "@tiptap/extension-code": "^3.18.0",
-    "@tiptap/extension-collaboration": "^3.18.0",
-    "@tiptap/extension-drag-handle": "^3.18.0",
-    "@tiptap/extension-drag-handle-vue-3": "^3.18.0",
-    "@tiptap/extension-floating-menu": "^3.18.0",
-    "@tiptap/extension-horizontal-rule": "^3.18.0",
-    "@tiptap/extension-image": "^3.18.0",
-    "@tiptap/extension-mention": "^3.18.0",
-    "@tiptap/extension-node-range": "^3.18.0",
-    "@tiptap/extension-placeholder": "^3.18.0",
-    "@tiptap/markdown": "^3.18.0",
-    "@tiptap/pm": "^3.18.0",
-    "@tiptap/starter-kit": "^3.18.0",
-    "@tiptap/suggestion": "^3.18.0",
-    "@tiptap/vue-3": "^3.18.0",
+    "@tiptap/core": "^3.17.1",
+    "@tiptap/extension-bubble-menu": "^3.17.1",
+    "@tiptap/extension-code": "^3.17.1",
+    "@tiptap/extension-collaboration": "^3.17.1",
+    "@tiptap/extension-drag-handle": "^3.17.1",
+    "@tiptap/extension-drag-handle-vue-3": "^3.17.1",
+    "@tiptap/extension-floating-menu": "^3.17.1",
+    "@tiptap/extension-horizontal-rule": "^3.17.1",
+    "@tiptap/extension-image": "^3.17.1",
+    "@tiptap/extension-mention": "^3.17.1",
+    "@tiptap/extension-node-range": "^3.17.1",
+    "@tiptap/extension-placeholder": "^3.17.1",
+    "@tiptap/markdown": "^3.17.1",
+    "@tiptap/pm": "^3.17.1",
+    "@tiptap/starter-kit": "^3.17.1",
+    "@tiptap/suggestion": "^3.17.1",
+    "@tiptap/vue-3": "^3.17.1",
     "@unhead/vue": "^2.1.2",
-    "@vueuse/core": "^14.2.0",
-    "@vueuse/integrations": "^14.2.0",
-    "@vueuse/shared": "^14.2.0",
+    "@vueuse/core": "^14.1.0",
+    "@vueuse/integrations": "^14.1.0",
+    "@vueuse/shared": "^14.1.0",
     "colortranslator": "^5.0.0",
     "consola": "^3.4.2",
     "defu": "^6.1.4",
@@ -176,7 +176,7 @@
     "motion-v": "^1.10.2",
     "ohash": "^2.0.11",
     "pathe": "^2.0.3",
-    "reka-ui": "2.8.0",
+    "reka-ui": "https://pkg.pr.new/unovue/reka-ui@2434",
     "scule": "^1.3.0",
     "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.2.2",
@@ -193,14 +193,17 @@
     "@nuxt/eslint-config": "^1.13.0",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/test-utils": "^3.23.0",
+    "@nuxtjs/mdc": "0.20.0",
     "@release-it/conventional-changelog": "^10.0.4",
     "@tanstack/table-core": "^8.21.3",
     "@vitejs/plugin-vue": "^6.0.2",
+    "@vue/compiler-dom": "^3.5.27",
+    "@vue/server-renderer": "^3.5.27",
     "@vue/test-utils": "^2.4.6",
-    "ai": "^6.0.68",
+    "ai": "^6.0.49",
     "embla-carousel": "^8.6.0",
     "eslint": "^9.39.2",
-    "happy-dom": "^20.5.0",
+    "happy-dom": "^20.3.9",
     "nuxt": "^4.3.0",
     "release-it": "^19.2.4",
     "unbuild": "^3.6.1",

playgrounds/nuxt/package.json

@@ -9,16 +9,17 @@
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
-    "@ai-sdk/gateway": "^3.0.32",
-    "@ai-sdk/vue": "^3.0.68",
+    "@ai-sdk/gateway": "^3.0.22",
+    "@ai-sdk/vue": "^3.0.49",
     "@iconify-json/lucide": "^1.2.87",
-    "@iconify-json/simple-icons": "^1.2.69",
+    "@iconify-json/simple-icons": "^1.2.68",
     "@internationalized/date": "^3.10.1",
     "@nuxt/content": "^3.11.0",
     "@nuxt/ui": "workspace:*",
-    "@tiptap/extension-emoji": "^3.18.0",
-    "@tiptap/extension-text-align": "^3.18.0",
-    "ai": "^6.0.68",
+    "@nuxtjs/mdc": "0.20.0",
+    "@tiptap/extension-emoji": "^3.17.1",
+    "@tiptap/extension-text-align": "^3.17.1",
+    "ai": "^6.0.49",
     "nuxt": "^4.3.0",
     "tailwindcss": "^4.1.18",
     "zod": "^4.3.6"

playgrounds/vue/package.json

@@ -11,8 +11,8 @@
   },
   "dependencies": {
     "@nuxt/ui": "workspace:*",
-    "@tiptap/extension-emoji": "^3.18.0",
-    "@tiptap/extension-text-align": "^3.18.0",
+    "@tiptap/extension-emoji": "^3.17.1",
+    "@tiptap/extension-text-align": "^3.17.1",
     "tailwindcss": "^4.1.18",
     "vue": "^3.5.25",
     "vue-router": "^4.6.3",