@nuxt/ui 3.0.0-alpha.7 → 3.0.0-alpha.8

package/dist/runtime/components/Switch.vue

@@ -4,6 +4,7 @@ import type { SwitchRootProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/switch'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { PartialString } from '../types/utils'
 
 const appConfig = _appConfig as AppConfig & { ui: { switch: Partial<typeof theme> } }
@@ -15,7 +16,7 @@ type SwitchVariants = VariantProps<typeof switchTv>
 export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value'> {
   /**
    * The element or component this component should render as.
-   * @defaultValue `div`
+   * @defaultValue 'div'
    */
   as?: any
   color?: SwitchVariants['color']
@@ -48,6 +49,8 @@ export interface SwitchSlots {
   label(props: { label?: string }): any
   description(props: { description?: string }): any
 }
+
+extendDevtoolsMeta({ defaultProps: { label: 'Switch me!' } })
 </script>
 
 <script setup lang="ts">
@@ -56,6 +59,7 @@ import { SwitchRoot, SwitchThumb, useForwardProps, Label } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useFormField } from '../composables/useFormField'
+import UIcon from './Icon.vue'
 
 const props = defineProps<SwitchProps>()
 const slots = defineSlots<SwitchSlots>()

package/dist/runtime/components/Table.vue

@@ -19,7 +19,9 @@ import type {
   ExpandedOptions,
   SortingOptions,
   RowSelectionOptions,
-  Updater
+  Updater,
+  CellContext,
+  HeaderContext
 } from '@tanstack/vue-table'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/table'
@@ -87,10 +89,13 @@ export interface TableProps<T> {
   ui?: Partial<typeof table.slots>
 }
 
-export interface TableSlots<T> {
-  expanded(props: { row: Row<T> }): any
-  empty(props?: {}): any
-}
+type DynamicHeaderSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-header`, (props: HeaderContext<T, unknown>) => any>
+type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>
+
+export type TableSlots<T> = {
+  expanded: (props: { row: Row<T> }) => any
+  empty: (props?: {}) => any
+} & DynamicHeaderSlots<T> & DynamicCellSlots<T>
 
 </script>
 
@@ -193,7 +198,9 @@ defineExpose({
             :data-pinned="header.column.getIsPinned()"
             :class="ui.th({ class: [props.ui?.th], pinned: !!header.column.getIsPinned() })"
           >
-            <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
+            <slot :name="`${header.id}-header`" v-bind="header.getContext()">
+              <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
+            </slot>
           </th>
         </tr>
       </thead>
@@ -208,7 +215,9 @@ defineExpose({
                 :data-pinned="cell.column.getIsPinned()"
                 :class="ui.td({ class: [props.ui?.td], pinned: !!cell.column.getIsPinned() })"
               >
-                <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+                <slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
+                  <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+                </slot>
               </td>
             </tr>
             <tr v-if="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })">

package/dist/runtime/components/Tabs.vue

@@ -1,10 +1,10 @@
-<!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { TabsRootProps, TabsRootEmits, TabsContentProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tabs'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { AvatarProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
 
@@ -65,6 +65,23 @@ export type TabsSlots<T extends { slot?: string }> = {
   content: SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
 
+extendDevtoolsMeta({
+  defaultProps: {
+    items: [{
+      label: 'Tab1',
+      avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' },
+      content: 'This is the content shown for Tab1'
+    }, {
+      label: 'Tab2',
+      icon: 'i-lucide-user',
+      content: 'And, this is the content for Tab2'
+    }, {
+      label: 'Tab3',
+      icon: 'i-lucide-bell',
+      content: 'Finally, this is the content for Tab3'
+    }]
+  }
+})
 </script>
 
 <script setup lang="ts" generic="T extends TabsItem">
@@ -73,6 +90,8 @@ import { defu } from 'defu'
 import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { get } from '../utils'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
 
 const props = withDefaults(defineProps<TabsProps<T>>(), {
   content: true,

package/dist/runtime/components/Toast.vue

@@ -4,6 +4,7 @@ import type { ToastRootProps, ToastRootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/toast'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { AvatarProps, ButtonProps } from '../types'
 
 const appConfig = _appConfig as AppConfig & { ui: { toast: Partial<typeof theme> } }
@@ -53,6 +54,8 @@ export interface ToastSlots {
   actions(props?: {}): any
   close(props: { ui: any }): any
 }
+
+extendDevtoolsMeta<ToastProps>({ ignore: true })
 </script>
 
 <script setup lang="ts">
@@ -62,6 +65,7 @@ import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
+import UButton from './Button.vue'
 
 const props = withDefaults(defineProps<ToastProps>(), {
   close: true

package/dist/runtime/components/Toaster.vue

@@ -4,6 +4,7 @@ import type { ToastProviderProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/toaster'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
 const appConfig = _appConfig as AppConfig & { ui: { toaster: Partial<typeof theme> } }
 
@@ -25,6 +26,12 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
 export interface ToasterSlots {
   default(props?: {}): any
 }
+
+export default {
+  name: 'Toaster'
+}
+
+extendDevtoolsMeta({ example: 'ToasterExample' })
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Tooltip.vue

@@ -4,6 +4,7 @@ import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipAr
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tooltip'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import type { KbdProps } from '../types'
 
 const appConfig = _appConfig as AppConfig & { ui: { tooltip: Partial<typeof theme> } }
@@ -40,6 +41,8 @@ export interface TooltipSlots {
   default(props: { open: boolean }): any
   content(props?: {}): any
 }
+
+extendDevtoolsMeta({ example: 'TooltipExample', defaultProps: { text: 'Hello world!' } })
 </script>
 
 <script setup lang="ts">

package/dist/runtime/composables/defineShortcuts.js

@@ -1,6 +1,5 @@
 import { ref, computed, toValue } from "vue";
 import { useEventListener, useActiveElement, useDebounceFn } from "@vueuse/core";
-import { useKbd } from "../composables/useKbd.js";
 const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/;
 const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/;
 export function extractShortcuts(items) {
@@ -28,7 +27,6 @@ export function defineShortcuts(config, options = {}) {
     chainedInputs.value.splice(0, chainedInputs.value.length);
   };
   const debouncedClearChainedInput = useDebounceFn(clearChainedInput, options.chainDelay ?? 800);
-  const { macOS } = useKbd();
   const activeElement = useActiveElement();
   const onKeyDown = (e) => {
     if (!e.key) {
@@ -114,10 +112,6 @@ export function defineShortcuts(config, options = {}) {
         };
       }
       shortcut.chained = chained;
-      if (!macOS.value && shortcut.metaKey && !shortcut.ctrlKey) {
-        shortcut.metaKey = false;
-        shortcut.ctrlKey = true;
-      }
       if (typeof shortcutConfig === "function") {
         shortcut.handler = shortcutConfig;
       } else if (typeof shortcutConfig === "object") {

package/dist/runtime/composables/extendDevtoolsMeta.d.ts

@@ -0,0 +1,7 @@
+export type DevtoolsMeta<T> = {
+    defaultProps?: T;
+    example?: string;
+    ignore?: boolean;
+    ignoreProps?: string[];
+};
+export declare function extendDevtoolsMeta<T>(_meta: DevtoolsMeta<T>): void;

package/dist/runtime/composables/extendDevtoolsMeta.js

@@ -0,0 +1,2 @@
+export function extendDevtoolsMeta(_meta) {
+}

package/dist/runtime/composables/useKbd.d.ts

@@ -1,10 +1,16 @@
+type KbdKeysSpecificMap = {
+    meta: string;
+    alt: string;
+    ctrl: string;
+};
 export declare const kbdKeysMap: {
     meta: string;
+    ctrl: string;
+    alt: string;
+    win: string;
     command: string;
     shift: string;
-    ctrl: string;
     option: string;
-    alt: string;
     enter: string;
     delete: string;
     backspace: string;
@@ -21,8 +27,9 @@ export declare const kbdKeysMap: {
     end: string;
 };
 export type KbdKey = keyof typeof kbdKeysMap;
+export type KbdKeySpecific = keyof KbdKeysSpecificMap;
 export declare const useKbd: () => {
     macOS: import("vue").ComputedRef<false | "" | RegExpMatchArray | null | undefined>;
-    metaSymbol: import("vue").Ref<string, string>;
     getKbdKey: (value?: KbdKey | string) => string | undefined;
 };
+export {};

package/dist/runtime/composables/useKbd.js

@@ -1,12 +1,13 @@
+import { reactive, computed, onMounted } from "vue";
 import { createSharedComposable } from "@vueuse/core";
-import { ref, computed, onMounted } from "vue";
 export const kbdKeysMap = {
   meta: "",
+  ctrl: "",
+  alt: "",
+  win: "\u229E",
   command: "\u2318",
   shift: "\u21E7",
-  ctrl: "\u2303",
   option: "\u2325",
-  alt: "\u2387",
   enter: "\u21B5",
   delete: "\u2326",
   backspace: "\u232B",
@@ -24,22 +25,27 @@ export const kbdKeysMap = {
 };
 const _useKbd = () => {
   const macOS = computed(() => import.meta.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/));
-  const metaSymbol = ref(" ");
+  const kbdKeysSpecificMap = reactive({
+    meta: " ",
+    alt: " ",
+    ctrl: " "
+  });
   onMounted(() => {
-    metaSymbol.value = macOS.value ? kbdKeysMap.command : kbdKeysMap.ctrl;
+    kbdKeysSpecificMap.meta = macOS.value ? kbdKeysMap.command : kbdKeysMap.win;
+    kbdKeysSpecificMap.alt = macOS.value ? kbdKeysMap.option : "alt";
+    kbdKeysSpecificMap.ctrl = macOS.value ? "\u2303" : "ctrl";
   });
   function getKbdKey(value) {
     if (!value) {
       return;
     }
-    if (value === "meta") {
-      return metaSymbol.value;
+    if (["meta", "alt", "ctrl"].includes(value)) {
+      return kbdKeysSpecificMap[value];
     }
     return kbdKeysMap[value] || value.toUpperCase();
   }
   return {
     macOS,
-    metaSymbol,
     getKbdKey
   };
 };

package/dist/runtime/types/utils.d.ts

@@ -15,3 +15,10 @@ export type ArrayOrWrapped<T> = T extends any[] ? T : Array<T>;
 export type PartialString<T> = {
     [K in keyof T]?: string;
 };
+export type MaybeArrayOfArray<T> = T[] | T[][];
+export type MaybeArrayOfArrayItem<I> = I extends Array<infer T> ? T extends Array<infer U> ? U : T : never;
+export type SelectModelValue<T, V, M extends boolean = false, DV = T> = (T extends Record<string, any> ? V extends keyof T ? T[V] : DV : T) extends infer U ? M extends true ? U[] : U : never;
+export type SelectItemKey<T> = T extends Record<string, any> ? keyof T : string;
+export type SelectModelValueEmits<T, V, M extends boolean = false, DV = T> = {
+    'update:modelValue': [payload: SelectModelValue<T, V, M, DV>];
+};

package/dist/runtime/utils/index.js

@@ -46,5 +46,5 @@ export function looseToNumber(val) {
   return Number.isNaN(n) ? val : n;
 }
 export function escapeRegExp(string) {
-  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return string.replace(/[.*+?^${}()|[\]\\]/g, (match) => `\\${match}`);
 }

package/dist/runtime/utils/link.d.ts

@@ -3,6 +3,7 @@ export declare function pickLinkProps(link: LinkProps & {
     ariaLabel?: string;
     title?: string;
 }): {
+    replace: any;
     type: any;
     title: any;
     active: any;
@@ -23,7 +24,6 @@ export declare function pickLinkProps(link: LinkProps & {
     prefetch: any;
     prefetchedClass: any;
     rel: any;
-    replace: any;
     target: any;
     to: any;
 };

package/dist/runtime/vue/components/Icon.vue

@@ -0,0 +1,15 @@
+<script lang="ts">
+export interface IconProps {
+  name: string
+}
+</script>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+
+defineProps<IconProps>()
+</script>
+
+<template>
+  <Icon :icon="name.replace(/^i-/, '')" />
+</template>

package/dist/runtime/vue/components/Link.vue

@@ -0,0 +1,195 @@
+<script lang="ts">
+import type { ButtonHTMLAttributes } from 'vue'
+import { tv } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import type { RouterLinkProps, RouteLocationRaw } from 'vue-router'
+import theme from '#build/ui/link'
+
+interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
+  /**
+   * Route Location the link should navigate to when clicked on.
+   */
+  to?: RouteLocationRaw // need to manually type to avoid breaking typedPages
+  /**
+   * An alias for `to`. If used with `to`, `href` will be ignored
+   */
+  href?: NuxtLinkProps['to']
+  /**
+   * Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
+   */
+  external?: boolean
+  /**
+   * Where to display the linked URL, as the name for a browsing context.
+   */
+  target?: '_blank' | '_parent' | '_self' | '_top' | (string & {}) | null
+  /**
+   * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
+   */
+  rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null
+  /**
+   * If set to true, no rel attribute will be added to the link
+   */
+  noRel?: boolean
+  /**
+   * A class to apply to links that have been prefetched.
+   */
+  prefetchedClass?: string
+  /**
+   * When enabled will prefetch middleware, layouts and payloads of links in the viewport.
+   */
+  prefetch?: boolean
+  /**
+   * Allows controlling when to prefetch links. By default, prefetch is triggered only on visibility.
+   */
+  prefetchOn?: 'visibility' | 'interaction' | Partial<{
+    visibility: boolean
+    interaction: boolean
+  }>
+  /**
+   * Escape hatch to disable `prefetch` attribute.
+   */
+  noPrefetch?: boolean
+}
+
+const appConfig = _appConfig as AppConfig & { ui: { link: Partial<typeof theme> } }
+
+const link = tv({ extend: tv(theme), ...(appConfig.ui?.link || {}) })
+
+export interface LinkProps extends NuxtLinkProps {
+  /**
+   * The element or component this component should render as when not a link.
+   * @defaultValue 'button'
+   */
+  as?: any
+  /**
+   * The type of the button when not a link.
+   * @defaultValue 'button'
+   */
+  type?: ButtonHTMLAttributes['type']
+  disabled?: boolean
+  /** Force the link to be active independent of the current route. */
+  active?: boolean
+  /** Will only be active if the current route is an exact match. */
+  exact?: boolean
+  /** Will only be active if the current route query is an exact match. */
+  exactQuery?: boolean
+  /** Will only be active if the current route hash is an exact match. */
+  exactHash?: boolean
+  /** The class to apply when the link is inactive. */
+  inactiveClass?: string
+  custom?: boolean
+  /** When `true`, only styles from `class`, `activeClass`, and `inactiveClass` will be applied. */
+  raw?: boolean
+  class?: any
+}
+
+export interface LinkSlots {
+  default(props: { active: boolean }): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { isEqual } from 'ohash'
+import { useForwardProps } from 'radix-vue'
+import { reactiveOmit } from '@vueuse/core'
+import { hasProtocol } from 'ufo'
+import { useRoute } from '#imports'
+import { RouterLink } from 'vue-router'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<LinkProps>(), {
+  as: 'button',
+  type: 'button',
+  active: undefined,
+  activeClass: '',
+  inactiveClass: ''
+})
+defineSlots<LinkSlots>()
+
+const route = useRoute()
+const routerLinkProps = useForwardProps(reactiveOmit(props, 'as', 'type', 'disabled', 'active', 'exact', 'exactQuery', 'exactHash', 'activeClass', 'inactiveClass', 'to'))
+
+const ui = computed(() => tv({
+  extend: link,
+  variants: {
+    active: {
+      true: props.activeClass,
+      false: props.inactiveClass
+    }
+  }
+}))
+
+const isExternal = computed(() => typeof props.to === 'string' && hasProtocol(props.to, { acceptRelative: true }))
+
+function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
+  if (props.active !== undefined) {
+    return props.active
+  }
+
+  if (!props.to) {
+    return false
+  }
+
+  if (props.exactQuery && !isEqual(linkRoute.query, route.query)) {
+    return false
+  }
+  if (props.exactHash && linkRoute.hash !== route.hash) {
+    return false
+  }
+
+  if (props.exact && isExactActive) {
+    return true
+  }
+
+  if (!props.exact && isActive) {
+    return true
+  }
+
+  return false
+}
+
+function resolveLinkClass({ route, isActive, isExactActive }: any) {
+  const active = isLinkActive({ route, isActive, isExactActive })
+
+  if (props.raw) {
+    return [props.class, active ? props.activeClass : props.inactiveClass]
+  }
+
+  return ui.value({ class: props.class, active, disabled: props.disabled })
+}
+</script>
+
+<template>
+  <RouterLink v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }" v-bind="routerLinkProps" :to="to || '#'" custom>
+    <template v-if="custom">
+      <slot
+        v-bind="{
+          ...$attrs,
+          as,
+          type,
+          disabled,
+          href: to ? (isExternal ? to as string : href) : undefined,
+          navigate,
+          active: isLinkActive({ route: linkRoute, isActive, isExactActive })
+        }"
+      />
+    </template>
+    <ULinkBase
+      v-else
+      v-bind="{
+        ...$attrs,
+        as,
+        type,
+        disabled,
+        href: to ? (isExternal ? to as string : href) : undefined,
+        navigate
+      }"
+      :class="resolveLinkClass({ route: linkRoute, isActive: isActive, isExactActive: isExactActive })"
+    >
+      <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
+    </ULinkBase>
+  </RouterLink>
+</template>

package/dist/runtime/vue/plugins/color-mode.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    install(): void;
+};
+export default _default;

package/dist/runtime/vue/plugins/color-mode.js

@@ -0,0 +1,6 @@
+import { useDark } from "@vueuse/core";
+export default {
+  install() {
+    useDark();
+  }
+};

package/dist/runtime/vue/plugins/head.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    install(app: import("vue").App<any>): void;
+};
+export default _default;

package/dist/runtime/vue/plugins/head.js

@@ -0,0 +1,6 @@
+import { createHead } from "@unhead/vue";
+export default {
+  install(app) {
+    app.use(createHead());
+  }
+};

package/dist/runtime/vue/stubs.d.ts

@@ -0,0 +1,15 @@
+import type { Ref } from 'vue';
+import type { NuxtApp } from '#app';
+export { useHead } from '@unhead/vue';
+export { useRoute, useRouter } from 'vue-router';
+export declare const useAppConfig: () => any;
+export declare const useState: <T>(key: string, init: () => T) => Ref<T>;
+export declare function useNuxtApp(): {
+    isHydrating: boolean;
+    payload: {
+        serverRendered: boolean;
+    };
+};
+export declare function defineNuxtPlugin(plugin: (nuxtApp: NuxtApp) => void): {
+    install(app: import("vue").App<any>): void;
+};

package/dist/runtime/vue/stubs.js

@@ -0,0 +1,27 @@
+import { ref } from "vue";
+import appConfig from "#build/app.config";
+export { useHead } from "@unhead/vue";
+export { useRoute, useRouter } from "vue-router";
+export const useAppConfig = () => appConfig;
+const state = {};
+export const useState = (key, init) => {
+  if (state[key]) {
+    return state[key];
+  }
+  const value = ref(init());
+  state[key] = value;
+  return value;
+};
+export function useNuxtApp() {
+  return {
+    isHydrating: true,
+    payload: { serverRendered: false }
+  };
+}
+export function defineNuxtPlugin(plugin) {
+  return {
+    install(app) {
+      plugin({ vueApp: app });
+    }
+  };
+}