@una-ui/nuxt 0.61.0 → 1.0.0-alpha.2

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

@@ -0,0 +1,23 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { DialogOverlay } from "reka-ui";
+import { cn } from "../../utils";
+const props = defineProps({
+  class: { type: null, required: false },
+  una: { type: Object, required: false },
+  forceMount: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false }
+});
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="sheet-overlay"
+    :class="cn('dialog-overlay', props.una?.sheetOverlay, props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogOverlay>
+</template>

package/dist/runtime/components/sheet/SheetOverlay.vue.d.ts

@@ -0,0 +1,12 @@
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -13,6 +13,7 @@ const delegatedProps = reactiveOmit(props, ["class"]);
 
 <template>
   <DialogTitle
+    data-slot="sheet-title"
     :class="cn('sheet-title', props.una?.sheetTitle, props.class)"
     v-bind="delegatedProps"
   >

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

@@ -7,7 +7,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <DialogTrigger v-bind="props">
+  <DialogTrigger
+    data-slot="sheet-trigger"
+    v-bind="props"
+  >
     <slot />
   </DialogTrigger>
 </template>

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

@@ -44,6 +44,7 @@ const [DefineSlot, ReuseSlot] = createReusableTemplate();
 
   <div
     v-if="collapsible === 'none'"
+    data-slot="sidebar"
     :class="cn(
   'sidebar-collapsible-none',
   props.una?.sidebar,
@@ -59,6 +60,7 @@ const [DefineSlot, ReuseSlot] = createReusableTemplate();
     :open="openMobile"
     v-bind="$attrs"
     :_sheet-content="{
+  dataSlot: 'sidebar',
   dataSidebar: 'sidebar',
   dataMobile: true,
   sheet,
@@ -70,13 +72,16 @@ const [DefineSlot, ReuseSlot] = createReusableTemplate();
 }"
     @update:open="setOpenMobile"
   >
-    <div class="sidebar-mobile-inner">
-      <ReuseSlot />
-    </div>
+    <template #body>
+      <div class="sidebar-mobile-inner">
+        <ReuseSlot />
+      </div>
+    </template>
   </Sheet>
 
   <div
     v-else :class="cn('group peer sidebar-desktop')"
+    data-slot="sidebar"
     :data-state="state"
     :data-collapsible="state === 'collapsed' ? collapsible : ''"
     :data-variant="sidebar"

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

@@ -9,6 +9,7 @@ const props = defineProps({
 
 <template>
   <div
+    data-slot="sidebar-content"
     data-sidebar="content"
     :class="cn(
   'sidebar-content',

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

@@ -8,6 +8,7 @@ const props = defineProps({
 
 <template>
   <div
+    data-slot="sidebar-footer"
     data-sidebar="footer"
     :class="cn(
   'sidebar-footer',

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

@@ -10,6 +10,7 @@ const props = defineProps({
 
 <template>
   <div
+    data-slot="sidebar-group"
     data-sidebar="group"
     :class="cn(
   'sidebar-group',

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

@@ -11,6 +11,7 @@ const props = defineProps({
 
 <template>
   <Primitive
+    data-slot="sidebar-group-action"
     data-sidebar="group-action"
     :as="as"
     :as-child="asChild"

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

@@ -8,6 +8,7 @@ const props = defineProps({
 
 <template>
   <div
+    data-slot="sidebar-group-content"
     data-sidebar="group-content"
     :class="cn(
   'sidebar-group-content',

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

@@ -11,6 +11,7 @@ const props = defineProps({
 
 <template>
   <Primitive
+    data-slot="sidebar-group-label"
     data-sidebar="group-label"
     :as="as"
     :as-child="asChild"

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

@@ -8,6 +8,7 @@ const props = defineProps({
 
 <template>
   <div
+    data-slot="sidebar-header"
     data-sidebar="header"
     :class="cn(
   'sidebar-header',

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

@@ -25,6 +25,7 @@ const props = defineProps({
 
 <template>
   <Input
+    data-slot="sidebar-input"
     data-sidebar="input"
     :class="cn(
   'sidebar-input',

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

@@ -8,6 +8,7 @@ const props = defineProps({
 
 <template>
   <main
+    data-slot="sidebar-inset"
     :class="cn(
   'sidebar-inset',
   props.una?.sidebarInset,

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

@@ -16,6 +16,7 @@ function getKey(item) {
 
 <template>
   <ul
+    data-slot="sidebar-menu"
     data-sidebar="menu"
     :class="cn(
   'sidebar-menu',

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

@@ -12,6 +12,7 @@ const props = defineProps({
 
 <template>
   <Primitive
+    data-slot="sidebar-menu-action"
     data-sidebar="menu-action"
     :class="cn(
   'sidebar-menu-action',

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

@@ -8,6 +8,7 @@ const props = defineProps({
 
 <template>
   <div
+    data-slot="sidebar-menu-badge"
     data-sidebar="menu-badge"
     :class="cn(
   'sidebar-menu-badge',

package/dist/runtime/components/sidebar/SidebarMenuButton.vue.d.ts

@@ -6,8 +6,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_17) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<NSidebarMenuButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NSidebarMenuButtonProps> & Readonly<{}>, {
-    as: import("reka-ui").AsTag | import("vue").Component;
     size: "default" | "sm" | "lg";
+    as: import("reka-ui").AsTag | import("vue").Component;
     variant: "default" | "outline";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

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

@@ -35,6 +35,7 @@ const sidebarMenuButtonVariants = cva(
 
 <template>
   <Primitive
+    data-slot="sidebar-menu-button-child"
     data-sidebar="menu_button"
     :data-size="size"
     :data-active="isActive"

package/dist/runtime/components/sidebar/SidebarMenuButtonChild.vue.d.ts

@@ -18,8 +18,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<NSidebarMenuButtonChildProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NSidebarMenuButtonChildProps> & Readonly<{}>, {
-    as: import("reka-ui").AsTag | import("vue").Component;
     size: "default" | "sm" | "lg";
+    as: import("reka-ui").AsTag | import("vue").Component;
     variant: "default" | "outline";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

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

@@ -8,6 +8,7 @@ const props = defineProps({
 
 <template>
   <li
+    data-slot="sidebar-menu-item"
     data-sidebar="menu-item"
     :class="cn(
   'group/menu_item sidebar-menu-item',

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

@@ -14,6 +14,7 @@ const width = computed(() => {
 
 <template>
   <div
+    data-slot="sidebar-menu-skeleton"
     data-sidebar="menu-skeleton"
     :class="cn(
   'sidebar-menu-skeleton',

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

@@ -8,6 +8,7 @@ const props = defineProps({
 
 <template>
   <ul
+    data-slot="sidebar-menu-sub"
     data-sidebar="menu-badge"
     :class="cn(
   'sidebar-menu-sub',

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

@@ -1,18 +1,20 @@
 <script setup>
 import { Primitive } from "reka-ui";
 import { cn } from "../../utils";
+import NLink from "../elements/Link.vue";
 const props = defineProps({
   isActive: { type: Boolean, required: false },
   size: { type: String, required: false, default: "md" },
   class: { type: null, required: false },
   una: { type: Object, required: false },
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false, default: "a" }
+  as: { type: null, required: false, default: NLink }
 });
 </script>
 
 <template>
   <Primitive
+    data-slot="sidebar-menu-sub-button"
     data-sidebar="menu-sub-button"
     :as="as"
     :as-child="asChild"

package/dist/runtime/components/sidebar/SidebarMenuSubButton.vue.d.ts

@@ -4,8 +4,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<NSidebarMenuSubButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NSidebarMenuSubButtonProps> & Readonly<{}>, {
-    as: import("reka-ui").AsTag | import("vue").Component;
     size: "sm" | "md";
+    as: import("reka-ui").AsTag | import("vue").Component;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -8,6 +8,8 @@ const props = defineProps({
 
 <template>
   <li
+    data-slot="sidebar-menu-sub-item"
+    data-sidebar="menu-sub-item"
     :class="cn(
   'sidebar-menu-sub-item',
   props.una?.sidebarMenuSubItem,

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

@@ -48,6 +48,7 @@ provideSidebarContext({
 <template>
   <TooltipProvider :delay-duration="0">
     <div
+      data-slot="sidebar-wrapper"
       :style="{
   '--sidebar-width': SIDEBAR_WIDTH,
   '--sidebar-width-icon': SIDEBAR_WIDTH_ICON

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

@@ -10,6 +10,7 @@ const { toggleSidebar } = useSidebar();
 
 <template>
   <button
+    data-slot="sidebar-rail"
     data-sidebar="rail"
     aria-label="Toggle Sidebar"
     :tabindex="-1"

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

@@ -9,6 +9,7 @@ const props = defineProps({
 
 <template>
   <Separator
+    data-slot="sidebar-separator"
     data-sidebar="separator"
     :class="cn(
   'sidebar-separator',

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

@@ -38,6 +38,7 @@ const { toggleSidebar } = useSidebar();
 
 <template>
   <Button
+    data-slot="sidebar-trigger"
     data-sidebar="trigger"
     v-bind="props"
     :class="cn(

package/dist/runtime/composables/useUnaSettings.js

@@ -1,27 +1,40 @@
-import { useAppConfig } from "#imports";
+import { useAppConfig, watch } from "#imports";
 import { useStorage } from "@vueuse/core";
 import { defu } from "defu";
-import { watchEffect } from "vue";
 import { useUnaThemes } from "./useUnaThemes.js";
 export function useUnaSettings() {
   const { una } = useAppConfig();
   const { getPrimaryColors, getGrayColors } = useUnaThemes();
   const defaultSettings = {
-    primaryColors: getPrimaryColors(una.primary),
-    grayColors: getGrayColors(una.gray),
+    primaryColors: una.primary ? getPrimaryColors(una.primary) : {},
+    grayColors: una.gray ? getGrayColors(una.gray) : {},
     primary: una.primary,
     gray: una.gray,
     radius: una.radius,
-    fontSize: una.fontSize
+    fontSize: una.fontSize,
+    theme: una.theme,
+    themes: una.themes
   };
   const settings = useStorage("una-settings", defaultSettings, void 0, {
     mergeDefaults: defu
   });
-  watchEffect(() => {
-    settings.value.primaryColors = getPrimaryColors(settings.value.primary || una.primary);
-    settings.value.grayColors = getGrayColors(settings.value.gray || una.gray);
-  });
+  watch(settings, () => {
+    console.log("settings.value.primary", settings.value.primary);
+    console.log("settings.value.gray", settings.value.gray);
+    if (settings.value.primary) {
+      settings.value.primaryColors = getPrimaryColors(settings.value.primary);
+    }
+    if (settings.value.gray) {
+      settings.value.grayColors = getGrayColors(settings.value.gray);
+    }
+  }, { immediate: true, deep: true });
   function reset() {
+    if (una.theme) {
+      settings.value.theme = una.theme;
+      settings.value.primary = false;
+      settings.value.gray = false;
+      return;
+    }
     settings.value.primary = defaultSettings.primary;
     settings.value.gray = defaultSettings.gray;
     settings.value.fontSize = defaultSettings.fontSize;

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

@@ -1,8 +1,8 @@
 import type { Colors } from '../types/index.js';
-export interface UseUnaThemesReturn {
+export declare function useUnaThemes(): {
     primaryThemes: [string, Colors][];
     grayThemes: [string, Colors][];
-    getPrimaryColors: (color: string) => Colors;
-    getGrayColors: (color: string) => Colors;
-}
-export declare function useUnaThemes(): UseUnaThemesReturn;
+    themes: never[];
+    getPrimaryColors: (color: string, defaultColor?: string) => Colors;
+    getGrayColors: (color: string, defaultColor?: string) => Colors;
+};

package/dist/runtime/composables/useUnaThemes.js

@@ -1,100 +1,39 @@
-import { colors } from "@unocss/preset-mini/colors";
-import { hexToRgb } from "../utils/index.js";
-const filteredPrimaryColors = Object.fromEntries(
-  Object.entries(colors).filter(([key]) => [
-    "blue",
-    "cyan",
-    "sky",
-    "amber",
-    "yellow",
-    "emerald",
-    "lime",
-    "orange",
-    "purple",
-    "indigo",
-    "pink",
-    "tomato",
-    "green",
-    "fuchsia",
-    "violet",
-    "rose",
-    "amber",
-    "red",
-    "teal"
-  ].includes(key)).map(([key, value]) => [key, Object.fromEntries(
-    Object.entries(value).filter(([key2]) => ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"].includes(key2))
-  )])
-);
-filteredPrimaryColors.tomato = {
-  50: "#fdf2f2",
-  100: "#fde8e8",
-  200: "#fbd5d5",
-  300: "#f8b4b4",
-  400: "#f98080",
-  500: "#f05252",
-  600: "#e02424",
-  700: "#c81e1e",
-  800: "#9b1c1c",
-  900: "#771d1d",
-  950: "#3f0708"
-};
+import { colors } from "@unocss/preset-wind4/colors";
+const filteredPrimaryColors = (() => {
+  const primaryColors = Object.fromEntries(
+    Object.entries(colors).filter(([key]) => [
+      "blue",
+      "cyan",
+      "sky",
+      "amber",
+      "yellow",
+      "emerald",
+      "lime",
+      "orange",
+      "purple",
+      "indigo",
+      "pink",
+      "tomato",
+      "green",
+      "fuchsia",
+      "violet",
+      "rose",
+      "red",
+      "teal"
+    ].includes(key)).map(([key, value]) => [
+      key,
+      Object.fromEntries(
+        Object.entries(value).filter(([key2]) => ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"].includes(key2))
+      )
+    ])
+  );
+  return primaryColors;
+})();
 const filteredGrayColors = Object.fromEntries(
   Object.entries(colors).filter(([key]) => ["slate", "gray", "zinc", "neutral", "stone"].includes(key)).map(([key, value]) => [key, Object.fromEntries(
     Object.entries(value).filter(([key2]) => ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"].includes(key2))
   )])
 );
-filteredGrayColors.sage = {
-  50: "#f2f2f2",
-  100: "#e6e6e6",
-  200: "#d9d9d9",
-  300: "#b8b8b8",
-  400: "#939393",
-  500: "#6f6f6f",
-  600: "#4b4b4b",
-  700: "#323232",
-  800: "#1f1f1f",
-  900: "#0b0b0b",
-  950: "#000000"
-};
-filteredGrayColors.ash = {
-  50: "#f9f9f8",
-  100: "#f1f0ee",
-  200: "#dad7d3",
-  300: "#c3beb8",
-  400: "#a9a49e",
-  500: "#908c84",
-  600: "#777168",
-  700: "#5e5950",
-  800: "#45403a",
-  900: "#2c2823",
-  950: "#161511"
-};
-filteredGrayColors.olive = {
-  50: "#fafaf2",
-  100: "#f5f5e6",
-  200: "#ebebd9",
-  300: "#d6d6b8",
-  400: "#b3b393",
-  500: "#8f8f6f",
-  600: "#6b6b4b",
-  700: "#4a4a32",
-  800: "#2a2a1f",
-  900: "#0e0e0b",
-  950: "#000000"
-};
-filteredGrayColors.leaf = {
-  50: "#f2faf2",
-  100: "#e6f5e6",
-  200: "#d9ebd9",
-  300: "#b8d6b8",
-  400: "#93b393",
-  500: "#6f8f6f",
-  600: "#4b6b4b",
-  700: "#326432",
-  800: "#1f2a1f",
-  900: "#0b0e0b",
-  950: "#000000"
-};
 const filteredColors = {
   ...filteredPrimaryColors,
   ...filteredGrayColors
@@ -113,20 +52,31 @@ export function useUnaThemes() {
     if (!colorPalette)
       throw new Error(`Invalid primary color: ${color}`);
     const colors2 = {};
+    for (const shade of Object.keys(colorPalette)) {
+      const value = colorPalette[shade];
+      if (value.startsWith("oklch("))
+        colors2[`--una-${prefix}-${shade}`] = value.replace("oklch(", "").replace(")", "");
+    }
     colors2[`--una-${prefix}-hex`] = colorPalette[600];
-    for (const shade of Object.keys(colorPalette))
-      colors2[`--una-${prefix}-${shade}`] = hexToRgb(colorPalette[shade]).join(", ");
     return colors2;
   }
-  function getPrimaryColors(color) {
-    return primaryThemes.filter(([colorName, _]) => colorName === color)[0][1];
+  function getPrimaryColors(color, defaultColor = "yellow") {
+    const theme = primaryThemes.find(([colorName, _]) => colorName === color);
+    if (!theme)
+      return getPrimaryColors(defaultColor);
+    return theme[1];
   }
-  function getGrayColors(color) {
-    return grayThemes.filter(([colorName, _]) => colorName === color)[0][1];
+  function getGrayColors(color, defaultColor = "stone") {
+    const theme = grayThemes.find(([colorName, _]) => colorName === color);
+    if (!theme)
+      return getGrayColors(defaultColor);
+    return theme[1];
   }
+  const themes = [];
   return {
     primaryThemes,
     grayThemes,
+    themes,
     getPrimaryColors,
     getGrayColors
   };

package/dist/runtime/plugins/theme.client.js

@@ -10,6 +10,19 @@ export default defineNuxtPlugin(() => {
   const html = document.documentElement;
   html.removeAttribute("style");
   const computedStyles = computed(() => {
+    const theme = settings.value.themes.find((t) => t.name === settings.value.theme);
+    if (settings.value.theme && theme) {
+      return `
+      :root {
+        ${Object.entries(theme.cssVars.light).map(([k, v]) => `${k}: ${v};`).join("\n")}
+        --una-radius: ${settings.value.radius}rem;
+        --una-font-size: ${settings.value.fontSize}px;
+      }
+      .dark {
+        ${Object.entries(theme.cssVars.dark).map(([k, v]) => `${k}: ${v};`).join("\n")}
+      }
+      `;
+    }
     return `
     :root {
         ${Object.entries(settings.value.primaryColors).map(([k, v]) => `${k}: ${v};`).join("\n")}

package/dist/runtime/plugins/theme.server.js

@@ -16,6 +16,18 @@ export default defineNuxtPlugin(() => {
           const html = document.documentElement
           ${process.dev ? "console.log({ settings })" : ""}
 
+          if (settings.theme) {
+            const theme = settings.themes.find(t => t.name === settings.theme)  
+            if (theme) {
+              Object.entries(theme.cssVars.light).map(i => html.style.setProperty(i[0], i[1]))
+              Object.entries(theme.cssVars.dark).map(i => html.style.setProperty(i[0], i[1]))
+            }
+
+            html.style.setProperty('--una-radius', settings.radius + 'rem')
+            html.style.setProperty('--una-font-size', settings.fontSize + 'px')
+            return
+          }
+
           if (settings.primary)
             Object.entries(settings.primaryColors).map(i => html.style.setProperty(i[0], i[1]))
           if (settings.gray)

package/dist/runtime/types/alert-dialog.d.ts

@@ -1,7 +1,7 @@
 import type { AlertDialogActionProps, AlertDialogCancelProps, AlertDialogContentProps, AlertDialogDescriptionProps, AlertDialogOverlayProps, AlertDialogProps, AlertDialogTitleProps, AlertDialogTriggerProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import type { NButtonProps } from './button.js';
-export interface NAlertDialogProps extends AlertDialogProps, Pick<NAlertDialogContentProps, 'preventClose' | 'overlay' | '_alertDialogCancel' | '_alertDialogAction' | '_alertDialogOverlay'> {
+export interface NAlertDialogProps extends AlertDialogProps, Pick<NAlertDialogContentProps, 'dismissible' | 'overlay' | '_alertDialogCancel' | '_alertDialogAction' | '_alertDialogOverlay'> {
     /**
      * The title of the dialog.
      */
@@ -40,7 +40,7 @@ export interface NAlertDialogContentProps extends AlertDialogContentProps, BaseE
      *
      * @default true
      */
-    preventClose?: boolean;
+    dismissible?: boolean;
     /**
      * Show overlay.
      *