@nuxt/ui 3.1.3 → 3.2.0

package/.nuxt/ui/timeline.ts

@@ -0,0 +1,321 @@
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const size = [
+  "3xs",
+  "2xs",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl"
+] as const
+
+export default {
+  "slots": {
+    "root": "flex gap-1.5",
+    "item": "group relative flex flex-1 gap-3",
+    "container": "relative flex items-center gap-1.5",
+    "indicator": "group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted",
+    "separator": "flex-1 rounded-full bg-elevated",
+    "wrapper": "w-full",
+    "date": "text-dimmed text-xs/5",
+    "title": "font-medium text-highlighted text-sm",
+    "description": "text-muted text-wrap text-sm"
+  },
+  "variants": {
+    "orientation": {
+      "horizontal": {
+        "root": "flex-row w-full",
+        "item": "flex-col",
+        "separator": "h-0.5"
+      },
+      "vertical": {
+        "root": "flex-col",
+        "container": "flex-col",
+        "separator": "w-0.5"
+      }
+    },
+    "color": {
+      "primary": {
+        "indicator": "group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary"
+      },
+      "secondary": {
+        "indicator": "group-data-[state=completed]:bg-secondary group-data-[state=active]:bg-secondary"
+      },
+      "success": {
+        "indicator": "group-data-[state=completed]:bg-success group-data-[state=active]:bg-success"
+      },
+      "info": {
+        "indicator": "group-data-[state=completed]:bg-info group-data-[state=active]:bg-info"
+      },
+      "warning": {
+        "indicator": "group-data-[state=completed]:bg-warning group-data-[state=active]:bg-warning"
+      },
+      "error": {
+        "indicator": "group-data-[state=completed]:bg-error group-data-[state=active]:bg-error"
+      },
+      "neutral": {
+        "indicator": "group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted"
+      }
+    },
+    "size": {
+      "3xs": "",
+      "2xs": "",
+      "xs": "",
+      "sm": "",
+      "md": "",
+      "lg": "",
+      "xl": "",
+      "2xl": "",
+      "3xl": ""
+    },
+    "reverse": {
+      "true": ""
+    }
+  },
+  "compoundVariants": [
+    {
+      "color": "primary" as typeof color[number],
+      "reverse": false,
+      "class": {
+        "separator": "group-data-[state=completed]:bg-primary"
+      }
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "reverse": false,
+      "class": {
+        "separator": "group-data-[state=completed]:bg-secondary"
+      }
+    },
+    {
+      "color": "success" as typeof color[number],
+      "reverse": false,
+      "class": {
+        "separator": "group-data-[state=completed]:bg-success"
+      }
+    },
+    {
+      "color": "info" as typeof color[number],
+      "reverse": false,
+      "class": {
+        "separator": "group-data-[state=completed]:bg-info"
+      }
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "reverse": false,
+      "class": {
+        "separator": "group-data-[state=completed]:bg-warning"
+      }
+    },
+    {
+      "color": "error" as typeof color[number],
+      "reverse": false,
+      "class": {
+        "separator": "group-data-[state=completed]:bg-error"
+      }
+    },
+    {
+      "color": "primary" as typeof color[number],
+      "reverse": true,
+      "class": {
+        "separator": "group-data-[state=active]:bg-primary group-data-[state=completed]:bg-primary"
+      }
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "reverse": true,
+      "class": {
+        "separator": "group-data-[state=active]:bg-secondary group-data-[state=completed]:bg-secondary"
+      }
+    },
+    {
+      "color": "success" as typeof color[number],
+      "reverse": true,
+      "class": {
+        "separator": "group-data-[state=active]:bg-success group-data-[state=completed]:bg-success"
+      }
+    },
+    {
+      "color": "info" as typeof color[number],
+      "reverse": true,
+      "class": {
+        "separator": "group-data-[state=active]:bg-info group-data-[state=completed]:bg-info"
+      }
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "reverse": true,
+      "class": {
+        "separator": "group-data-[state=active]:bg-warning group-data-[state=completed]:bg-warning"
+      }
+    },
+    {
+      "color": "error" as typeof color[number],
+      "reverse": true,
+      "class": {
+        "separator": "group-data-[state=active]:bg-error group-data-[state=completed]:bg-error"
+      }
+    },
+    {
+      "color": "neutral" as typeof color[number],
+      "reverse": false,
+      "class": {
+        "separator": "group-data-[state=completed]:bg-inverted"
+      }
+    },
+    {
+      "color": "neutral" as typeof color[number],
+      "reverse": true,
+      "class": {
+        "separator": "group-data-[state=active]:bg-inverted group-data-[state=completed]:bg-inverted"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "3xs" as typeof size[number],
+      "class": {
+        "wrapper": "pe-4.5"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "2xs" as typeof size[number],
+      "class": {
+        "wrapper": "pe-5"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "xs" as typeof size[number],
+      "class": {
+        "wrapper": "pe-5.5"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "sm" as typeof size[number],
+      "class": {
+        "wrapper": "pe-6"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "md" as typeof size[number],
+      "class": {
+        "wrapper": "pe-6.5"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "lg" as typeof size[number],
+      "class": {
+        "wrapper": "pe-7"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "xl" as typeof size[number],
+      "class": {
+        "wrapper": "pe-7.5"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "2xl" as typeof size[number],
+      "class": {
+        "wrapper": "pe-8"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "3xl" as typeof size[number],
+      "class": {
+        "wrapper": "pe-8.5"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "3xs" as typeof size[number],
+      "class": {
+        "wrapper": "-mt-0.5 pb-4.5"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "2xs" as typeof size[number],
+      "class": {
+        "wrapper": "pb-5"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "xs" as typeof size[number],
+      "class": {
+        "wrapper": "mt-0.5 pb-5.5"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "sm" as typeof size[number],
+      "class": {
+        "wrapper": "mt-1 pb-6"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "md" as typeof size[number],
+      "class": {
+        "wrapper": "mt-1.5 pb-6.5"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "lg" as typeof size[number],
+      "class": {
+        "wrapper": "mt-2 pb-7"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "xl" as typeof size[number],
+      "class": {
+        "wrapper": "mt-2.5 pb-7.5"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "2xl" as typeof size[number],
+      "class": {
+        "wrapper": "mt-3 pb-8"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "3xl" as typeof size[number],
+      "class": {
+        "wrapper": "mt-3.5 pb-8.5"
+      }
+    }
+  ],
+  "defaultVariants": {
+    "size": "md" as typeof size[number],
+    "color": "primary" as typeof color[number]
+  }
+}

package/.nuxt/ui/toaster.ts

@@ -17,7 +17,7 @@ const swipeDirection = [
 export default {
   "slots": {
     "viewport": "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none",
-    "base": "pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
+    "base": "pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-100 data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
   },
   "variants": {
     "position": {

package/cli/templates.mjs

@@ -31,8 +31,9 @@ const component = ({ name, primitive, pro, prose, content }) => {
       ? `
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
+${pro ? `import type { ComponentConfig } from '@nuxt/ui'` : ''}
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import type { ComponentConfig } from '../types/utils'
+${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
 
 type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
 
@@ -62,7 +63,7 @@ defineSlots<${upperName}Slots>()
 
 const appConfig = useAppConfig() as ${upperName}['AppConfig']
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro' : 'ui'}?.${camelName} || {}) })())
 </script>
 
 <template>
@@ -75,8 +76,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName}
 <script lang="ts">
 import type { ${upperName}RootProps, ${upperName}RootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
+${pro ? `import type { ComponentConfig } from '@nuxt/ui'` : ''}
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import type { ComponentConfig } from '../types/utils'
+${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
 
 type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
 
@@ -105,7 +107,7 @@ const appConfig = useAppConfig() as ${upperName}['AppConfig']
 
 const rootProps = useForwardPropsEmits(reactivePick(props), emits)
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro' : 'ui'}?.${camelName} || {}) })())
 </script>
 
 <template>
@@ -186,6 +188,7 @@ links:${primitive
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/${pro ? 'ui-pro' : 'ui'}/tree/v3/src/runtime/components/${upperName}.vue
+navigation.badge: Soon
 ---
 
 ## Usage

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "3.1.3",
+  "version": "3.2.0",
   "docs": "https://ui.nuxt.com/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.Bix4DSU4.mjs';
+import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.BPVxSPGY.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -8,7 +8,7 @@ import 'tailwindcss/colors';
 import 'knitwork';
 
 const name = "@nuxt/ui";
-const version = "3.1.3";
+const version = "3.2.0";
 
 const module = defineNuxtModule({
   meta: {

package/dist/runtime/components/Alert.vue

@@ -75,7 +75,6 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.alert || {} }
         <UButton
           v-if="close"
           :icon="closeIcon || appConfig.ui.icons.close"
-          size="md"
           color="neutral"
           variant="link"
           :aria-label="t('alert.close')"

package/dist/runtime/components/Avatar.vue

@@ -10,6 +10,7 @@ import ImageComponent from "#build/ui-image-component";
 import { useAvatarGroup } from "../composables/useAvatarGroup";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
+import UChip from "./Chip.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "span" },
@@ -18,6 +19,7 @@ const props = defineProps({
   icon: { type: String, required: false },
   text: { type: String, required: false },
   size: { type: null, required: false },
+  chip: { type: [Boolean, Object], required: false },
   class: { type: null, required: false },
   style: { type: null, required: false },
   ui: { type: null, required: false }
@@ -51,7 +53,13 @@ function onError() {
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" :style="props.style">
+  <component
+    :is="props.chip ? UChip : Primitive"
+    :as="as"
+    v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :style="props.style"
+  >
     <component
       :is="ImageComponent"
       v-if="src && !error"
@@ -71,5 +79,5 @@ function onError() {
         <span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback || "\xA0" }}</span>
       </slot>
     </Slot>
-  </Primitive>
+  </component>
 </template>

package/dist/runtime/components/Avatar.vue.d.ts

@@ -1,5 +1,6 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/avatar';
+import type { ChipProps } from '../types';
 import type { ComponentConfig } from '../types/utils';
 type Avatar = ComponentConfig<typeof theme, AppConfig, 'avatar'>;
 export interface AvatarProps {
@@ -19,6 +20,7 @@ export interface AvatarProps {
      * @defaultValue 'md'
      */
     size?: Avatar['variants']['size'];
+    chip?: boolean | ChipProps;
     class?: any;
     style?: any;
     ui?: Avatar['slots'];

package/dist/runtime/components/Calendar.vue

@@ -36,6 +36,7 @@ const props = defineProps({
   allowNonContiguousRanges: { type: Boolean, required: false },
   pagedNavigation: { type: Boolean, required: false },
   preventDeselect: { type: Boolean, required: false },
+  maximumDays: { type: Number, required: false },
   weekStartsOn: { type: Number, required: false },
   weekdayFormat: { type: String, required: false },
   fixedWeeks: { type: Boolean, required: false, default: true },
@@ -49,7 +50,9 @@ const props = defineProps({
   isDateUnavailable: { type: Function, required: false },
   isDateHighlightable: { type: Function, required: false },
   nextPage: { type: Function, required: false },
-  prevPage: { type: Function, required: false }
+  prevPage: { type: Function, required: false },
+  disableDaysOutsideCurrentView: { type: Boolean, required: false },
+  fixedDate: { type: String, required: false }
 });
 const emits = defineEmits(["update:modelValue", "update:placeholder", "update:startValue"]);
 defineSlots();

package/dist/runtime/components/Carousel.vue

@@ -176,7 +176,6 @@ defineExpose({
         <UButton
           :disabled="!canScrollPrev"
           :icon="prevIcon"
-          size="md"
           color="neutral"
           variant="outline"
           :aria-label="t('carousel.prev')"
@@ -187,7 +186,6 @@ defineExpose({
         <UButton
           :disabled="!canScrollNext"
           :icon="nextIcon"
-          size="md"
           color="neutral"
           variant="outline"
           :aria-label="t('carousel.next')"
@@ -202,6 +200,7 @@ defineExpose({
           <button
             :aria-label="t('carousel.goto', { slide: index + 1 })"
             :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
+            :data-state="selectedIndex === index ? 'active' : void 0"
             @click="scrollTo(index)"
           />
         </template>

package/dist/runtime/components/Checkbox.vue

@@ -26,7 +26,7 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   name: { type: String, required: false },
-  value: { type: [String, Number, Object, null], required: false },
+  value: { type: null, required: false },
   id: { type: String, required: false },
   defaultValue: { type: [Boolean, String], required: false }
 });