@una-ui/nuxt 0.12.1-beta.1 → 0.13.0-beta.2

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "configKey": "una",
-  "version": "0.12.1-beta.1",
+  "version": "0.13.0-beta.2",
   "compatibility": {
     "nuxt": ">=3.0.0"
   },

package/dist/module.mjs

@@ -7,7 +7,7 @@ import '@una-ui/preset/prefixes';
 import '@una-ui/extractor-vue-script';
 
 const name = "@una-ui/nuxt";
-const version = "0.12.1-beta.1";
+const version = "0.13.0-beta.2";
 
 const module = defineNuxtModule({
   meta: {
@@ -82,6 +82,12 @@ const module = defineNuxtModule({
       global: options.global,
       watch: nuxt.options.dev
     });
+    addComponentsDir({
+      path: resolve(runtimeDir, "components/navigation", "breadcrumb"),
+      prefix: options.prefix,
+      global: options.global,
+      watch: nuxt.options.dev
+    });
     if (options.themeable) {
       addPlugin(resolve(runtimeDir, "plugins", "theme.client"));
       addPlugin(resolve(runtimeDir, "plugins", "theme.server"));

package/dist/runtime/components/elements/Button.vue

@@ -6,10 +6,6 @@ import type { NButtonProps } from '../../types'
 import NLink from '../elements/Link.vue'
 import { cn } from '../../utils'
 
-defineOptions({
-  inheritAttrs: false,
-})
-
 const props = withDefaults(defineProps<NButtonProps>(), {
   type: 'button',
   loadingPlacement: 'leading',
@@ -18,9 +14,27 @@ const props = withDefaults(defineProps<NButtonProps>(), {
   }),
 })
 
+const mergeVariants = computed(() => {
+  return {
+    'btn': props.btn,
+    'breadcrumb-active': props.breadcrumbActive,
+    'breadcrumb-inactive': props.breadcrumbInactive,
+  }
+})
+
 const btnVariants = ['solid', 'outline', 'soft', 'ghost', 'link', 'text'] as const
-const hasVariant = computed(() => btnVariants.some(btnVariants => props.btn?.includes(btnVariants)))
-const isBaseVariant = computed(() => props.btn?.includes('~'))
+
+const hasVariant = computed(() =>
+  Object.values(mergeVariants.value).some(variantList =>
+    btnVariants.some(variant => variantList?.includes(variant)),
+  ),
+)
+
+const isBaseVariant = computed(() =>
+  Object.values(mergeVariants.value).some(variantList =>
+    variantList?.includes('~'),
+  ),
+)
 
 const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
 </script>
@@ -38,9 +52,8 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
       una?.btn,
     )"
     :disabled="to ? null : disabled || loading"
-    :btn="btn"
     :aria-label="icon ? label : null"
-    v-bind="$attrs"
+    v-bind="mergeVariants"
     :size="size"
   >
     <DefineTemplate v-if="loading">

package/dist/runtime/components/elements/Progress.vue

@@ -45,13 +45,13 @@ const delegatedProps = computed(() => {
       >
         <ProgressIndicator
           :class="cn(
-            'progress increase progress-indeterminate',
+            'increase progress-indeterminate',
             props.una?.progressIndicator,
           )"
         />
         <ProgressIndicator
           :class="cn(
-            'progress decrease progress-indeterminate',
+            'decrease progress-indeterminate',
             props.una?.progressIndicator,
           )"
         />

package/dist/runtime/components/navigation/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import type { NBreadcrumbProps } from '../../../types'
+import { cn } from '../../../utils'
+import BreadcrumbRoot from './BreadcrumbRoot.vue'
+import BreadcrumbList from './BreadcrumbList.vue'
+import BreadcrumbItem from './BreadcrumbItem.vue'
+import BreadcrumbLink from './BreadcrumbLink.vue'
+import BreadcrumbSeparator from './BreadcrumbSeparator.vue'
+
+const props = defineProps<NBreadcrumbProps>()
+</script>
+
+<template>
+  <BreadcrumbRoot
+    :class="cn(
+      'breadcrumb',
+      props.class,
+      props.una?.breadcrumb,
+    )"
+    :una
+    :size
+    v-bind="_breadcrumbRoot"
+  >
+    <slot name="root" :items="items">
+      <BreadcrumbList
+        :una
+        :size
+        v-bind="_breadcrumbList"
+      >
+        <template
+          v-for="(item, i) in props.items"
+          :key="i"
+        >
+          <slot name="list" :item="item">
+            <BreadcrumbItem
+              :una
+              :size
+              v-bind="_breadcrumbItem"
+            >
+              <slot name="item" :item="item">
+                <BreadcrumbLink
+                  :active="i === items.length - 1"
+                  :breadcrumb-active="props.breadcrumbActive"
+                  :breadcrumb-inactive="props.breadcrumbInactive"
+                  :size
+                  v-bind="{
+                    ...item,
+                    ..._breadcrumbLink,
+                  }"
+                >
+                  <slot :item="item" />
+                </BreadcrumbLink>
+              </slot>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator
+              v-if="i < props.items!.length - 1"
+              :icon="props.separator"
+              :size
+              :una
+              v-bind="_breadcrumbSeparator"
+            >
+              <slot name="separator" />
+            </BreadcrumbSeparator>
+          </slot>
+        </template>
+      </BreadcrumbList>
+    </slot>
+  </BreadcrumbRoot>
+</template>

package/dist/runtime/components/navigation/breadcrumb/BreadcrumbEllipsis.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { cn } from '../../../utils'
+import type { NBreadcrumbEllipsisProps } from '../../../types'
+
+const props = withDefaults(defineProps<NBreadcrumbEllipsisProps>(), {
+  icon: 'breadcrumb-ellipsis-icon',
+  size: 'sm',
+})
+</script>
+
+<template>
+  <span
+    role="presentation"
+    aria-hidden="true"
+    :class="cn(
+      'breadcrumb-ellipsis',
+      props.class,
+      props.una?.breadcrumbEllipsis,
+    )"
+    :size
+  >
+    <slot>
+      <NIcon
+        :name="icon"
+        :class="props.una?.breadcrumbEllipsisIcon"
+        aria-hidden="true"
+      />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>

package/dist/runtime/components/navigation/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import type { NBreadcrumbItemProps } from '../../../types'
+import { cn } from '../../../utils'
+
+const props = defineProps<NBreadcrumbItemProps>()
+</script>
+
+<template>
+  <li
+    :class="cn(
+      'breadcrumb-item',
+      props.class,
+      props.una?.breadcrumbItem,
+    )"
+  >
+    <slot />
+  </li>
+</template>

package/dist/runtime/components/navigation/breadcrumb/BreadcrumbLink.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { cn } from '../../../utils'
+import Button from '../../elements/Button.vue'
+import type { NBreadcrumbLinkProps } from '../../../types'
+
+const props = withDefaults(defineProps<NBreadcrumbLinkProps>(), {
+  active: false,
+  breadcrumbActive: '~',
+  breadcrumbInactive: '~',
+  size: 'sm',
+})
+
+const activeAttrs = computed(() => {
+  if (!props.active) {
+    return {
+      'data-state': 'inactive',
+    }
+  }
+
+  return {
+    'aria-disabled': true,
+    'tabindex': -1,
+    'data-state': 'active',
+    'aria-current': 'page',
+  }
+})
+</script>
+
+<template>
+  <Button
+    v-bind="{ ...props, ...activeAttrs }"
+    :class="cn(
+      'breadcrumb-link',
+      { 'cursor-text': active },
+    )"
+    :to="disabled ? undefined : props.to"
+  >
+    <slot />
+  </Button>
+</template>

package/dist/runtime/components/navigation/breadcrumb/BreadcrumbList.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { cn } from '../../../utils'
+import type { NBreadcrumbListProps } from '../../../types'
+
+const props = defineProps<NBreadcrumbListProps>()
+</script>
+
+<template>
+  <ol
+    :class="cn(
+      'breadcrumb-list',
+      props.class,
+      props.una?.breadcrumbList,
+    )"
+  >
+    <slot />
+  </ol>
+</template>

package/dist/runtime/components/navigation/breadcrumb/BreadcrumbRoot.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import type { NBreadcrumbRootProps } from '../../../types'
+import { cn } from '../../../utils'
+
+const props = defineProps<NBreadcrumbRootProps>()
+</script>
+
+<template>
+  <nav
+    aria-label="breadcrumb"
+    :class="cn(
+      props.class,
+      props.una?.breadcrumbRoot,
+    )"
+  >
+    <slot />
+  </nav>
+</template>

package/dist/runtime/components/navigation/breadcrumb/BreadcrumbSeparator.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { NBreadcrumbSeparatorProps } from '../../../types'
+import { cn } from '../../../utils'
+import Icon from '../../elements/Icon.vue'
+
+const props = withDefaults(defineProps<NBreadcrumbSeparatorProps>(), {
+  icon: 'breadcrumb-separator-icon',
+  size: 'sm',
+})
+</script>
+
+<template>
+  <li
+    role="presentation"
+    aria-hidden="true"
+    :class="cn(
+      '',
+      props.class,
+      props.una?.breadcrumbSeparator,
+    )"
+    :size
+  >
+    <slot>
+      <Icon
+        :name="icon"
+        :class="props.una?.breadcrumbSeparatorIcon"
+      />
+    </slot>
+  </li>
+</template>

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

@@ -0,0 +1,115 @@
+import type { HTMLAttributes } from 'vue';
+import type { NButtonProps } from './button.js';
+interface BaseExtensions {
+    class?: HTMLAttributes['class'];
+}
+export interface NBreadcrumbProps extends BaseExtensions, Pick<NBreadcrumbLinkProps, 'breadcrumbActive' | 'breadcrumbInactive'> {
+    /**
+     * List of items to display in the breadcrumb.
+     *
+     * @example
+     * items: [{ label: 'Home', to: '/' }, { label: 'About', to: '/about' }]
+     */
+    items: Partial<NButtonProps>[];
+    separator?: NBreadcrumbSeparatorProps['icon'];
+    ellipsis?: NBreadcrumbEllipsisProps['icon'];
+    /**
+     * Allows you to change the size of the input.
+     *
+     * @default sm
+     *
+     * @example
+     * size="sm" | size="2cm" | size="2rem" | size="2px"
+     */
+    size?: string;
+    _breadcrumbSeparator?: Partial<NBreadcrumbSeparatorProps>;
+    _breadcrumbItem?: Partial<NBreadcrumbItemProps>;
+    _breadcrumbRoot?: Partial<NBreadcrumbRootProps>;
+    _breadcrumbList?: Partial<NBreadcrumbListProps>;
+    _breadcrumbLink?: Partial<NBreadcrumbLinkProps>;
+    _breadcrumbEllipsis?: Partial<NBreadcrumbEllipsisProps>;
+    /**
+     * `UnaUI` preset configuration
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/breadcrumb.ts
+     */
+    una?: NBreadcrumbUnaProps;
+}
+export interface NBreadcrumbRootProps extends BaseExtensions {
+    una?: Pick<NBreadcrumbUnaProps, 'breadcrumbRoot'>;
+}
+export interface NBreadcrumbItemProps extends BaseExtensions {
+    /**
+     * `UnaUI` preset configuration
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/breadcrumb.ts
+     */
+    una?: Pick<NBreadcrumbUnaProps, 'breadcrumbItem'>;
+}
+export interface NBreadcrumbSeparatorProps extends BaseExtensions {
+    /**
+     * Custom separator icon.
+     */
+    icon?: string;
+    /**
+     * Allows you to change the size of the input.
+     *
+     * @default sm
+     *
+     * @example
+     * size="sm" | size="2cm" | size="2rem" | size="2px"
+     */
+    size?: string;
+    /**
+     * `UnaUI` preset configuration
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/breadcrumb.ts
+     */
+    una?: Pick<NBreadcrumbUnaProps, 'breadcrumbSeparator' | 'breadcrumbSeparatorIcon'>;
+}
+export interface NBreadcrumbListProps extends BaseExtensions {
+    /**
+     * `UnaUI` preset configuration
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/breadcrumb.ts
+     */
+    una?: Pick<NBreadcrumbUnaProps, 'breadcrumbList'>;
+}
+export interface NBreadcrumbLinkProps extends BaseExtensions, NButtonProps {
+    active?: boolean;
+    breadcrumbActive?: string;
+    breadcrumbInactive?: string;
+}
+export interface NBreadcrumbEllipsisProps extends BaseExtensions {
+    /**
+     * Custom separator icon.
+     */
+    icon?: string;
+    /**
+     *  /**
+     * Allows you to change the size of the input.
+     *
+     * @default sm
+     *
+     * @example
+     * size="sm" | size="2cm" | size="2rem" | size="2px"
+     */
+    size?: string;
+    /**
+     * `UnaUI` preset configuration
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/breadcrumb.ts
+     */
+    una?: Pick<NBreadcrumbUnaProps, 'breadcrumbEllipsis' | 'breadcrumbEllipsisIcon'>;
+}
+interface NBreadcrumbUnaProps {
+    breadcrumb?: HTMLAttributes['class'];
+    breadcrumbRoot?: HTMLAttributes['class'];
+    breadcrumbItem?: HTMLAttributes['class'];
+    breadcrumbEllipsis?: HTMLAttributes;
+    breadcrumbEllipsisIcon?: HTMLAttributes['class'];
+    breadcrumbList?: HTMLAttributes['class'];
+    breadcrumbSeparator?: HTMLAttributes['class'];
+    breadcrumbSeparatorIcon?: HTMLAttributes['class'];
+}
+export {};

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

@@ -1,6 +1,8 @@
 import type { HTMLAttributes } from 'vue';
 interface Extensions {
     class?: HTMLAttributes['class'];
+    breadcrumbActive?: string;
+    breadcrumbInactive?: string;
 }
 export interface NButtonProps extends Extensions {
     /**

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

@@ -22,6 +22,7 @@ export * from './tabs.js';
 export * from './select.js';
 export * from './separator.js';
 export * from './card.js';
+export * from './breadcrumb.js';
 export * from './table.js';
 export interface Colors {
     [key: string]: string;

package/dist/runtime/types/index.js

@@ -22,4 +22,5 @@ export * from "./tabs.js";
 export * from "./select.js";
 export * from "./separator.js";
 export * from "./card.js";
+export * from "./breadcrumb.js";
 export * from "./table.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "type": "module",
-  "version": "0.12.1-beta.1",
+  "version": "0.13.0-beta.2",
   "description": "Nuxt module for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -35,10 +35,10 @@
     "@nuxt/kit": "^3.12.4",
     "@nuxtjs/color-mode": "^3.4.2",
     "@tanstack/vue-table": "^8.20.4",
-    "@unocss/core": "^0.61.9",
-    "@unocss/nuxt": "^0.61.9",
-    "@unocss/preset-attributify": "^0.61.9",
-    "@unocss/preset-icons": "^0.61.9",
+    "@unocss/core": "^0.62.2",
+    "@unocss/nuxt": "^0.62.2",
+    "@unocss/preset-attributify": "^0.62.2",
+    "@unocss/preset-icons": "^0.62.2",
     "@vueuse/core": "^10.11.1",
     "@vueuse/integrations": "^10.11.1",
     "@vueuse/nuxt": "^10.11.1",
@@ -46,10 +46,11 @@
     "ohash": "^1.1.3",
     "radix-vue": "^1.9.3",
     "tailwind-merge": "^2.5.1",
-    "unocss": "^0.61.9",
+    "typescript": "^5.5.4",
+    "unocss": "^0.62.2",
     "unocss-preset-animations": "^1.1.0",
-    "@una-ui/extractor-vue-script": "^0.12.1-beta.1",
-    "@una-ui/preset": "^0.12.1-beta.1"
+    "@una-ui/extractor-vue-script": "^0.13.0-beta.2",
+    "@una-ui/preset": "^0.13.0-beta.2"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.8.1",