@una-ui/nuxt 0.40.0-beta.1 → 0.41.0-beta.1

package/dist/module.json

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

package/dist/module.mjs

@@ -1,5 +1,6 @@
 import { defineNuxtModule, createResolver, addComponentsDir, addPlugin, addImportsDir, installModule } from '@nuxt/kit';
 import extendUnocssOptions from './una.config.mjs';
+import '@iconify/utils/lib/loader/external-pkg';
 import '@una-ui/extractor-vue-script';
 import '@una-ui/preset';
 import '@una-ui/preset/prefixes';
@@ -7,7 +8,7 @@ import 'unocss';
 import 'unocss-preset-animations';
 
 const name = "@una-ui/nuxt";
-const version = "0.40.0-beta.1";
+const version = "0.41.0-beta.1";
 
 const module = defineNuxtModule({
   meta: {
@@ -169,6 +170,13 @@ const module = defineNuxtModule({
       watch: nuxt.options.dev,
       priority: 10
     });
+    addComponentsDir({
+      path: resolve(runtimeDir, "components", "sidebar"),
+      prefix: options.prefix,
+      global: options.global,
+      watch: nuxt.options.dev,
+      priority: 10
+    });
     addComponentsDir({
       path: resolve(runtimeDir, "components", "scroll-area"),
       prefix: options.prefix,
@@ -180,10 +188,8 @@ const module = defineNuxtModule({
       addPlugin(resolve(runtimeDir, "plugins", "theme.client"));
       addPlugin(resolve(runtimeDir, "plugins", "theme.server"));
     }
-    if (!options.dev)
-      nuxt.options.unocss = extendUnocssOptions(nuxt.options.unocss);
     addImportsDir(resolve(runtimeDir, "utils", "cn"));
-    await installModule("@unocss/nuxt");
+    await installModule("@unocss/nuxt", extendUnocssOptions(nuxt.options.unocss));
     await installModule("@nuxtjs/color-mode", {
       classSuffix: ""
     });

package/dist/runtime/components/data/table/Table.vue

@@ -296,6 +296,7 @@ defineExpose({
                   :key="header.id"
                   :una
                   :colspan="header.colSpan"
+                  class="font-normal"
                   :data-pinned="header.column.getIsPinned()"
                   v-bind="{ ...props._tableHead, ...header.column.columnDef.meta }"
                 >

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

@@ -8,6 +8,7 @@ import NLink from '../elements/Link.vue'
 
 const props = withDefaults(defineProps<NButtonProps>(), {
   type: 'button',
+  size: 'sm',
   loadingPlacement: 'leading',
   square: false,
   una: () => ({

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

@@ -1,6 +1,7 @@
 <script>
 import { NuxtLink } from "#components";
-import { isEqual } from "ohash";
+import { useRoute } from "#imports";
+import { diff, isEqual } from "ohash/utils";
 import { defineComponent } from "vue";
 export default defineComponent({
   inheritAttrs: false,
@@ -24,7 +25,7 @@ export default defineComponent({
       type: String,
       default: void 0
     },
-    // preset
+    // TODO: convert to sidebar preset
     navLinkActive: {
       type: String,
       default: void 0
@@ -35,10 +36,11 @@ export default defineComponent({
     }
   },
   setup(props) {
-    function resolveLinkClass(route, $route, { isActive, isExactActive }) {
-      if (props.exactQuery && !isEqual(route.query, $route.query))
+    const route = useRoute();
+    function resolveLinkClass(route2, $route, { isActive, isExactActive }) {
+      if (props.exactQuery && !isEqual(route2.query, $route.query))
         return props.inactiveClass;
-      if (props.exactHash && !isEqual(route.hash, $route.hash))
+      if (props.exactHash && !isEqual(route2.hash, $route.hash))
         return props.inactiveClass;
       if (props.exact && isExactActive)
         return props.exactActiveClass;
@@ -46,10 +48,10 @@ export default defineComponent({
         return props.activeClass;
       return props.inactiveClass;
     }
-    function resolveNavLinkActive(route, $route, { isActive, isExactActive }) {
-      if (props.exactQuery && !isEqual(route.query, $route.query))
+    function resolveNavLinkActive(route2, $route, { isActive, isExactActive }) {
+      if (props.exactQuery && !isEqual(route2.query, $route.query))
         return null;
-      if (props.exactHash && !isEqual(route.hash, $route.hash))
+      if (props.exactHash && !isEqual(route2.hash, $route.hash))
         return null;
       if (props.exact && isExactActive)
         return props.navLinkActive;
@@ -57,42 +59,75 @@ export default defineComponent({
         return props.navLinkActive;
       return null;
     }
-    function resolveNavLinkInactive(route, $route, { isActive, isExactActive }) {
-      if (props.exactQuery && !isEqual(route.query, $route.query))
+    function resolveNavLinkInactive(route2, $route, { isActive, isExactActive }) {
+      if (props.exactQuery && !isEqual(route2.query, $route.query))
         return props.navLinkInactive;
-      if (props.exactHash && !isEqual(route.hash, $route.hash))
+      if (props.exactHash && !isEqual(route2.hash, $route.hash))
         return props.navLinkInactive;
       if (!props.exact && isActive || props.exact && isExactActive)
         return null;
       return props.navLinkInactive;
     }
+    function isPartiallyEqual(item1, item2) {
+      const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
+        if (q.type === "added") {
+          filtered.add(q.key);
+        }
+        return filtered;
+      }, /* @__PURE__ */ new Set());
+      const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key)));
+      const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key)));
+      return isEqual(item1Filtered, item2Filtered);
+    }
+    function isLinkActive({ route: linkRoute, isActive, isExactActive }) {
+      if (props.active !== void 0) {
+        return props.active;
+      }
+      if (props.exactQuery === "partial") {
+        if (!isPartiallyEqual(linkRoute.query, route.query))
+          return false;
+      } else if (props.exactQuery === true) {
+        if (!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;
+    }
     return {
       resolveLinkClass,
       resolveNavLinkActive,
-      resolveNavLinkInactive
+      resolveNavLinkInactive,
+      isLinkActive
     };
   }
 });
 </script>
 
 <template>
-  <!-- eslint-disable vue/no-template-shadow -->
   <NuxtLink
-    v-slot="{ route, href, target, rel, navigate, isActive, isExactActive, isExternal, exact }"
+    v-slot="{ route, href, target, rel, navigate, isActive, isExactActive, isExternal }"
     v-bind="$props"
     custom
   >
     <a
       v-bind="$attrs"
-      :href="href"
-      :rel="rel"
-      :target="target"
+      :href
+      :rel="rel ?? undefined"
+      :target="target ?? undefined"
       :class="resolveLinkClass(route, $route, { isActive, isExactActive })"
       :nav-link-active="resolveNavLinkActive(route, $route, { isActive, isExactActive })"
       :nav-link-inactive="resolveNavLinkInactive(route, $route, { isActive, isExactActive })"
       @click="(e) => !isExternal && navigate(e)"
     >
-      <slot v-bind="{ isActive: exact ? isExactActive : isActive }" />
+      <slot :active="isLinkActive({ route, isActive, isExactActive })" />
     </a>
   </NuxtLink>
 </template>

package/dist/runtime/components/elements/Link.vue.d.ts

@@ -11,6 +11,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         isActive: boolean;
         isExactActive: boolean;
     }) => string | null;
+    isLinkActive: ({ route: linkRoute, isActive, isExactActive }: any) => any;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {} | {
     [x: string]: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/forms/select/SelectTrigger.vue

@@ -25,7 +25,7 @@ const statusClassVariants = computed(() => {
     success: props.una?.selectTriggerSuccessIcon ?? 'select-trigger-success-icon',
     warning: props.una?.selectTriggerWarningIcon ?? 'select-trigger-warning-icon',
     error: props.una?.selectTriggerErrorIcon ?? 'select-trigger-error-icon',
-    default: props.una?.selectTriggerTrailingIcon ?? 'select-trigger-trailing-icon',
+    default: props?.trailing ?? props.una?.selectTriggerTrailingIcon ?? 'select-trigger-trailing-icon',
   }
 
   return {
@@ -35,6 +35,7 @@ const statusClassVariants = computed(() => {
 })
 
 const id = computed(() => props.id ?? randomId('select-trigger'))
+const status = computed(() => props.status ?? 'default')
 </script>
 
 <template>

package/dist/runtime/components/misc/ThemeSwitcher.vue

@@ -48,9 +48,11 @@ function shuffleTheme(): void {
 </script>
 
 <template>
-  <Popover :_popover-content="{ align: 'end', class: 'w-73 bg-muted' }">
-    <template #trigger>
-      <slot name="trigger">
+  <Popover
+    :_popover-content="{ align: 'end', class: 'w-73 bg-muted' }"
+  >
+    <template #trigger="{ open }">
+      <slot name="trigger" :open="open">
         <Button
           btn="soft"
           square

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

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('font-normal text-base', props.class)"
+  >
+    <slot />
+  </span>
+</template>

package/dist/runtime/components/overlays/toast/Toast.vue

@@ -23,7 +23,7 @@ const props = withDefaults(defineProps<NToastProps>(), {
 })
 
 const emits = defineEmits<ToastRootEmits>()
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'duration', 'type'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'asChild', 'defaultOpen', 'open', 'duration', 'type', 'forceMount'), emits)
 </script>
 
 <template>
@@ -31,10 +31,10 @@ const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen',
     v-slot="{ remaining, duration }"
     :class="cn(
       'group toast data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
-      props.class,
       props.una?.toast,
+      props.class,
     )"
-    v-bind="rootProps"
+    v-bind="{ ...rootProps, ...$attrs }"
     :toast
     @update:open="onOpenChange"
   >

package/dist/runtime/components/overlays/toast/ToastClose.vue

@@ -19,8 +19,8 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="cn(
       'toast-close',
-      props.class,
       props.una?.toastClose,
+      props.class,
     )"
   >
     <Icon

package/dist/runtime/components/overlays/toast/ToastDescription.vue

@@ -18,8 +18,8 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="cn(
       'toast-description',
-      props.class,
       props.una?.toastDescription,
+      props.class,
     )"
   >
     <slot />

package/dist/runtime/components/overlays/toast/ToastInfo.vue

@@ -9,8 +9,8 @@ const props = defineProps<NToastInfoProps>()
   <div
     :class="cn(
       'toast-info',
-      props.class,
       props.una?.toastInfo,
+      props.class,
     )"
   >
     <slot />

package/dist/runtime/components/overlays/toast/ToastTitle.vue

@@ -18,8 +18,8 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="cn(
       'toast-title',
-      props.class,
       props.una?.toastTitle,
+      props.class,
     )"
   >
     <slot />

package/dist/runtime/components/overlays/toast/ToastViewport.vue

@@ -18,8 +18,8 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="cn(
       'toast-viewport',
-      props.class,
       props.una?.toastViewport,
+      props.class,
     )"
   />
 </template>

package/dist/runtime/components/sheet/Sheet.vue

@@ -30,73 +30,75 @@ const forwarded = useForwardPropsEmits(rootProps, emits)
 
 <template>
   <DialogRoot v-slot="{ open }" v-bind="forwarded">
-    <SheetTrigger
-      v-if="$slots.trigger"
-      v-bind="_sheetTrigger"
-    >
-      <slot name="trigger" :open />
-    </SheetTrigger>
+    <slot name="root">
+      <SheetTrigger
+        v-if="$slots.trigger"
+        v-bind="_sheetTrigger"
+      >
+        <slot name="trigger" :open />
+      </SheetTrigger>
 
-    <SheetContent
-      :_sheet-close
-      :_sheet-overlay
-      :_sheet-portal
-      :sheet
-      :prevent-close
-      :show-close
-      :overlay
-      v-bind="_sheetContent"
-      :una
-    >
-      <VisuallyHidden v-if="(title === DEFAULT_TITLE || !!$slots.title) || (description === DEFAULT_DESCRIPTION || !!$slots.description)">
-        <SheetTitle v-if="title === DEFAULT_TITLE || !!$slots.title">
-          {{ title }}
-        </SheetTitle>
+      <SheetContent
+        :_sheet-close
+        :_sheet-overlay
+        :_sheet-portal
+        :sheet
+        :prevent-close
+        :show-close
+        :overlay
+        v-bind="_sheetContent"
+        :una
+      >
+        <VisuallyHidden v-if="(title === DEFAULT_TITLE || !!$slots.title) || (description === DEFAULT_DESCRIPTION || !!$slots.description)">
+          <SheetTitle v-if="title === DEFAULT_TITLE || !!$slots.title">
+            {{ title }}
+          </SheetTitle>
 
-        <SheetDescription v-if="description === DEFAULT_DESCRIPTION || !!$slots.description">
-          {{ description }}
-        </SheetDescription>
-      </VisuallyHidden>
+          <SheetDescription v-if="description === DEFAULT_DESCRIPTION || !!$slots.description">
+            {{ description }}
+          </SheetDescription>
+        </VisuallyHidden>
 
-      <slot name="content">
-        <SheetHeader
-          v-if="!!$slots.header || (title !== DEFAULT_TITLE || !!$slots.title) || (description !== DEFAULT_DESCRIPTION || !!$slots.description)"
-          v-bind="_sheetHeader"
-          :una
-        >
-          <slot name="header">
-            <SheetTitle
-              v-if="$slots.title || title !== DEFAULT_TITLE"
-              v-bind="_sheetTitle"
-              :una
-            >
-              <slot name="title">
-                {{ title }}
-              </slot>
-            </SheetTitle>
+        <slot name="content">
+          <SheetHeader
+            v-if="!!$slots.header || (title !== DEFAULT_TITLE || !!$slots.title) || (description !== DEFAULT_DESCRIPTION || !!$slots.description)"
+            v-bind="_sheetHeader"
+            :una
+          >
+            <slot name="header">
+              <SheetTitle
+                v-if="$slots.title || title !== DEFAULT_TITLE"
+                v-bind="_sheetTitle"
+                :una
+              >
+                <slot name="title">
+                  {{ title }}
+                </slot>
+              </SheetTitle>
 
-            <SheetDescription
-              v-if="$slots.description || description !== DEFAULT_DESCRIPTION"
-              v-bind="_sheetDescription"
-              :una
-            >
-              <slot name="description">
-                {{ description }}
-              </slot>
-            </SheetDescription>
-          </slot>
-        </SheetHeader>
+              <SheetDescription
+                v-if="$slots.description || description !== DEFAULT_DESCRIPTION"
+                v-bind="_sheetDescription"
+                :una
+              >
+                <slot name="description">
+                  {{ description }}
+                </slot>
+              </SheetDescription>
+            </slot>
+          </SheetHeader>
 
-        <slot />
+          <slot />
 
-        <SheetFooter
-          v-if="$slots.footer"
-          v-bind="_sheetFooter"
-          :una
-        >
-          <slot name="footer" />
-        </SheetFooter>
-      </slot>
-    </SheetContent>
+          <SheetFooter
+            v-if="$slots.footer"
+            v-bind="_sheetFooter"
+            :una
+          >
+            <slot name="footer" />
+          </SheetFooter>
+        </slot>
+      </SheetContent>
+    </slot>
   </DialogRoot>
 </template>

package/dist/runtime/components/sidebar/Sidebar.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { NSidebarProps } from '../../types'
+import { createReusableTemplate } from '@vueuse/core'
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from '../../composables/useSidebar'
+import { cn } from '../../utils'
+import Sheet from '../sheet/Sheet.vue'
+import SidebarContent from './SidebarContent.vue'
+import SidebarFooter from './SidebarFooter.vue'
+import SidebarHeader from './SidebarHeader.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<NSidebarProps>(), {
+  sheet: 'left',
+  sidebar: 'sidebar',
+  collapsible: 'offcanvas',
+  rail: true,
+})
+
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+const [DefineSlot, ReuseSlot] = createReusableTemplate()
+</script>
+
+<template>
+  <DefineSlot>
+    <slot>
+      <SidebarHeader v-bind="props._sidebarHeader">
+        <slot name="header" />
+      </SidebarHeader>
+      <SidebarContent v-bind="props._sidebarContent">
+        <slot name="content" />
+      </SidebarContent>
+      <SidebarFooter v-bind="props._sidebarFooter">
+        <slot name="footer" />
+      </SidebarFooter>
+      <NSidebarRail v-if="rail" v-bind="props._sidebarRail" />
+    </slot>
+  </DefineSlot>
+
+  <div
+    v-if="collapsible === 'none'"
+    :class="cn(
+      'sidebar-collapsible-none',
+      props.una?.sidebar,
+      props.class,
+    )"
+    v-bind="$attrs"
+  >
+    <ReuseSlot />
+  </div>
+
+  <Sheet
+    v-else-if="isMobile"
+    :open="openMobile"
+    v-bind="$attrs"
+    :_sheet-content="{
+      dataSidebar: 'sidebar',
+      dataMobile: true,
+      sheet,
+      class: 'sidebar-mobile',
+      style: {
+        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+      },
+      ...props._sheetContent,
+    }"
+    @update:open="setOpenMobile"
+  >
+    <div class="sidebar-mobile-inner">
+      <ReuseSlot />
+    </div>
+  </Sheet>
+
+  <div
+    v-else :class="cn('group peer sidebar-desktop')"
+    :data-state="state"
+    :data-collapsible="state === 'collapsed' ? collapsible : ''"
+    :data-variant="sidebar"
+    :data-side="sheet"
+  >
+    <!-- This is what handles the sidebar gap on desktop  -->
+    <div
+      :class="cn(
+        'sidebar-desktop-gap',
+        sidebar === 'floating' || sidebar === 'inset'
+          ? 'sidebar-desktop-gap-floating'
+          : 'sidebar-desktop-gap-default',
+      )"
+    />
+    <div
+      :class="cn(
+        'sidebar-desktop-position',
+        sheet === 'left'
+          ? 'sidebar-desktop-position-left'
+          : 'sidebar-desktop-position-right',
+        // Adjust the padding for floating and inset variants.
+        sidebar === 'floating' || sidebar === 'inset'
+          ? 'sidebar-desktop-padding-floating'
+          : 'sidebar-desktop-padding-default',
+        props.una?.sidebar,
+        props.class,
+      )"
+      v-bind="$attrs"
+    >
+      <div
+        data-sidebar="sidebar"
+        class="sidebar-desktop-inner"
+      >
+        <ReuseSlot />
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/sidebar/SidebarContent.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { NSidebarContentProps } from '../../types'
+import { cn } from '../../utils'
+import ScrollArea from '../scroll-area/ScrollArea.vue'
+
+const props = defineProps<NSidebarContentProps>()
+</script>
+
+<template>
+  <div
+    data-sidebar="content"
+    :class="cn(
+      'sidebar-content',
+      props.una?.sidebarContent,
+      props.class,
+    )"
+  >
+    <ScrollArea>
+      <slot />
+    </ScrollArea>
+  </div>
+</template>

package/dist/runtime/components/sidebar/SidebarFooter.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { NSidebarFooterProps } from '../../types'
+import { cn } from '../../utils'
+
+const props = defineProps<NSidebarFooterProps>()
+</script>
+
+<template>
+  <div
+    data-sidebar="footer"
+    :class="cn(
+      'sidebar-footer',
+      props.una?.sidebarFooter,
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/sidebar/SidebarGroup.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { NSidebarGroupProps } from '../../types'
+import { cn } from '../../utils'
+import SidebarGroupLabel from './SidebarGroupLabel.vue'
+
+const props = defineProps<NSidebarGroupProps>()
+</script>
+
+<template>
+  <div
+    data-sidebar="group"
+    :class="cn(
+      'sidebar-group',
+      props.una?.sidebarGroup,
+      props.class,
+    )"
+  >
+    <slot name="root">
+      <SidebarGroupLabel v-if="props.label">
+        <slot name="label">
+          {{ props.label }}
+        </slot>
+      </SidebarGroupLabel>
+
+      <slot />
+    </slot>
+  </div>
+</template>