@una-ui/nuxt 0.4.0-beta.5 → 0.6.0-beta.1

package/dist/module.json

@@ -1,8 +1,12 @@
 {
   "name": "@una-ui/nuxt",
   "configKey": "una",
-  "version": "0.4.0-beta.5",
+  "version": "0.6.0-beta.1",
   "compatibility": {
     "nuxt": "^3.0.0-rc.8"
+  },
+  "builder": {
+    "@nuxt/module-builder": "0.8.1",
+    "unbuild": "2.0.0"
   }
 }

package/dist/module.mjs

@@ -6,7 +6,7 @@ import '@una-ui/preset/prefixes';
 import '@una-ui/extractor-vue-script';
 
 const name = "@una-ui/nuxt";
-const version = "0.4.0-beta.5";
+const version = "0.6.0-beta.1";
 
 const module = defineNuxtModule({
   meta: {
@@ -63,6 +63,7 @@ const module = defineNuxtModule({
     }
     if (!options.dev)
       nuxt.options.unocss = extendUnocssOptions(nuxt.options.unocss);
+    await installModule("radix-vue/nuxt");
     await installModule("@unocss/nuxt");
     await installModule("@nuxtjs/color-mode", {
       classSuffix: ""

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

@@ -59,9 +59,10 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
   close: () => void
 }>()
 
-// TODO: optimized this one
+const pickedProps = pickProps(props, ['reverse', 'icon', 'btn', 'label', 'leading', 'loading', 'loadingPlacement', 'una', 'trailing', 'leading', 'to', 'type', 'disabled'])
+
 function mergedProps(itemProps: NAccordionItemProps) {
-  return Object.assign(pickProps(props, ['reverse', 'icon', 'btn', 'label', 'leading', 'loading', 'loadingPlacement', 'una', 'trailing', 'leading', 'to', 'type', 'disabled']), itemProps)
+  return Object.assign(pickedProps, itemProps)
 }
 
 // TODO: refactor this to sync with NButton variants

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

@@ -12,7 +12,7 @@ const props = withDefaults(defineProps<NAlertProps>(), {
   icon: false,
 })
 
-const emit = defineEmits<{ (...args: any): void }>()
+const emit = defineEmits(['close'])
 
 const slots = defineSlots<{
   default?: any

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

@@ -2,6 +2,7 @@
 import { useImage } from '@vueuse/core'
 import { computed } from 'vue'
 import type { NAvatarProps } from '../../types'
+import NIcon from './Icon.vue'
 
 const props = withDefaults(defineProps<NAvatarProps>(), {
   delay: 0,
@@ -25,6 +26,7 @@ const placeholder = computed(() => {
 <template>
   <span
     :avatar="avatar"
+    :size="size"
     class="avatar"
     :class="[
       { 'avatar-default-variant': !hasVariant && !isBaseVariant },

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

@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<NBadgeProps>(), {
   }),
 })
 
-const emit = defineEmits<{ (...args: any): void }>()
+const emit = defineEmits(['close'])
 
 const badgeVariants = ['solid', 'soft', 'outline'] as const
 const hasVariant = computed(() => badgeVariants.some(badgeVariants => props.badge?.includes(badgeVariants)))

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

@@ -11,7 +11,7 @@ declare const _default: import("vue").DefineComponent<any, {
         isActive: boolean;
         isExactActive: boolean;
     }) => any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<any>, {} | {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<any>, {} | {
     [x: string]: any;
 }, {}>;
 export default _default;

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  ProgressIndicator,
+  ProgressRoot,
+} from 'radix-vue'
+import { cn } from '../../utils'
+import type { NProgressProps } from '../../types'
+
+const props = withDefaults(
+  defineProps<NProgressProps>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ProgressRoot
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'progress-root',
+        props.una?.progressRoot,
+        props.class,
+      )
+    "
+  >
+    <slot>
+      <ProgressIndicator
+        :class="cn(
+          'progress-indicator',
+          props.una?.progressIndicator,
+        )"
+        :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+      />
+    </slot>
+  </ProgressRoot>
+</template>

package/dist/runtime/components/forms/Input.vue

@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<NInputProps>(), {
   rows: 3,
 })
 
-const emit = defineEmits<{ (...args: any): void }>()
+const emit = defineEmits(['leading', 'trailing', 'update:modelValue'])
 
 const slots = defineSlots<{
   leading?: any

package/dist/runtime/components/forms/Slider.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { SliderRootEmits } from 'radix-vue'
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'
+import type { NSliderProps } from '../../types'
+import { cn } from '../../utils'
+
+const props = defineProps<NSliderProps>()
+const emits = defineEmits<SliderRootEmits>()
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const isVertical = computed(() => props.orientation === 'vertical')
+</script>
+
+<template>
+  <SliderRoot
+    :class="cn(
+      'slider-root',
+      isVertical && 'slider-root-vertical',
+      props.size,
+      props.class,
+      props.una?.sliderRoot,
+      disabled && 'slider-disabled',
+    )"
+    v-bind="forwarded"
+  >
+    <slot name="slider-track">
+      <SliderTrack
+        :class="cn(
+          'slider-track',
+          isVertical && 'slider-track-vertical',
+          props.una?.sliderTrack,
+        )"
+      >
+        <slot name="slider-range">
+          <SliderRange
+            :class="cn(
+              'slider-range',
+              isVertical && 'slider-range-vertical',
+              props.una?.sliderRange,
+            )"
+          />
+        </slot>
+      </SliderTrack>
+    </slot>
+
+    <slot name="slider-thumb">
+      <SliderThumb
+        v-for="(_, key) in modelValue"
+        :key="key"
+        :class="cn(
+          'slider-thumb',
+          isVertical && 'slider-thumb-vertical',
+          props.una?.sliderThumb,
+        )"
+      />
+    </slot>
+  </SliderRoot>
+</template>

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

@@ -51,7 +51,7 @@ function shuffleTheme() {
         class="rounded-lg"
         aria-label="Theme"
       >
-        <span i-heroicons-swatch-20-solid text-md />
+        <span i-lucide-paintbrush text-md />
       </PopoverButton>
 
       <transition enter-active-class="transition ease-out duration-200" enter-from-class="opacity-0 translate-y-1" enter-to-class="opacity-100 translate-y-0" leave-active-class="transition ease-in duration-150" leave-from-class="opacity-100 translate-y-0" leave-to-class="opacity-0 translate-y-1">
@@ -91,7 +91,7 @@ function shuffleTheme() {
                 btn="~ solid block"
                 class="transition"
                 label="Shuffle"
-                leading="i-heroicons-adjustments-horizontal-solid"
+                leading="i-lucide-paintbrush-vertical"
                 :una="{
                   btnLeading: value ? 'rotate-180 transform' : 'rotate-0',
                 }"
@@ -102,7 +102,7 @@ function shuffleTheme() {
                 btn="~ solid-gray"
                 size="xs"
                 icon
-                label="i-heroicons-arrow-uturn-left"
+                label="i-lucide-delete"
                 @click="reset"
               />
             </div>

package/dist/runtime/components/navigation/NavLink.vue

@@ -3,6 +3,8 @@ import { computed } from 'vue'
 import type { NNavLinkProps } from '../../types'
 import { omitProps } from '../../utils'
 import NButton from '../elements/Button.vue'
+import NBadge from '../elements/Badge.vue'
+import NIcon from '../elements/Icon.vue'
 
 defineOptions({
   inheritAttrs: false,

package/dist/runtime/components/slots/AvatarGroupDefault.d.ts

@@ -1,5 +1,5 @@
 import type { PropType, VNode } from 'vue';
-import type { NAvatarGroupProps } from '../../types';
+import type { NAvatarGroupProps } from '../../types.js';
 declare const _default: import("vue").DefineComponent<{
     max: {
         type: NumberConstructor;
@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, (() => null) | (() => (VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}> | null)[]), unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}> | null)[]), unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     max: {
         type: NumberConstructor;
         required: true;

package/dist/runtime/components/slots/FormGroupDefault.d.ts

@@ -11,7 +11,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, (() => null) | (() => VNode<unknown, unknown, {
     [key: string]: any;
-}>[]), unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>[]), unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;
         required: true;

package/dist/runtime/components/slots/FormGroupLabel.d.ts

@@ -1,22 +1,23 @@
 import type { PropType } from 'vue';
+import type { NFormGroupProps } from '../../types.js';
 declare const _default: import("vue").DefineComponent<{
     for: {
-        type: PropType<string | boolean | undefined>;
+        type: PropType<NFormGroupProps["for"]>;
         required: false;
     };
     id: {
-        type: PropType<string | undefined>;
+        type: PropType<NFormGroupProps["id"]>;
         required: false;
     };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}> | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}> | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     for: {
-        type: PropType<string | boolean | undefined>;
+        type: PropType<NFormGroupProps["for"]>;
         required: false;
     };
     id: {
-        type: PropType<string | undefined>;
+        type: PropType<NFormGroupProps["id"]>;
         required: false;
     };
 }>>, {}, {}>;

package/dist/runtime/composables/{useUnaSettings.mjs → useUnaSettings.js}

@@ -1,6 +1,6 @@
 import { useStorage } from "@vueuse/core";
 import { watchEffect } from "vue";
-import { useUnaThemes } from "./useUnaThemes.mjs";
+import { useUnaThemes } from "./useUnaThemes.js";
 import { useAppConfig } from "#imports";
 export function useUnaSettings() {
   const { una } = useAppConfig();

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

@@ -1,4 +1,4 @@
-import type { Colors } from '../types';
+import type { Colors } from '../types.js';
 export declare function useUnaThemes(): {
     primaryThemes: [string, Colors][];
     grayThemes: [string, Colors][];

package/dist/runtime/composables/{useUnaThemes.mjs → useUnaThemes.js}

@@ -1,5 +1,5 @@
 import { colors } from "@unocss/preset-mini/colors";
-import { hexToRgb } from "../utils/index.mjs";
+import { hexToRgb } from "../utils/index.js";
 const filteredPrimaryColors = Object.fromEntries(
   Object.entries(colors).filter(([key]) => [
     "blue",

package/dist/runtime/plugins/{theme.client.mjs → theme.client.js}

@@ -1,5 +1,5 @@
 import { watchEffect } from "vue";
-import { useUnaSettings } from "../composables/useUnaSettings.mjs";
+import { useUnaSettings } from "../composables/useUnaSettings.js";
 import { defineNuxtPlugin } from "#app";
 let unaUIStyle;
 export default defineNuxtPlugin(() => {

package/dist/runtime/plugins/{theme.server.mjs → theme.server.js}

@@ -1,4 +1,4 @@
-import { useUnaSettings } from "../composables/useUnaSettings.mjs";
+import { useUnaSettings } from "../composables/useUnaSettings.js";
 import { defineNuxtPlugin, useHead } from "#app";
 export default defineNuxtPlugin(() => {
   const { defaultSettings } = useUnaSettings();

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

@@ -1,4 +1,4 @@
-import type { NButtonProps } from './button';
+import type { NButtonProps } from './button.js';
 export interface NAccordionProps extends Omit<NButtonProps, 'una'> {
     /**
      * Allows you to add `UnaUI` accordion preset properties,
@@ -109,4 +109,9 @@ export interface NAccordionItemProps extends NButtonProps {
      * @default false
      */
     mounted?: boolean;
+    /**
+     * Allow dynamic attributes to be added to the accordion item,
+     *
+     */
+    [key: string]: any;
 }

package/dist/runtime/types/avatar-group.d.ts

@@ -1,4 +1,4 @@
-import type { NAvatarProps } from './avatar';
+import type { NAvatarProps } from './avatar.js';
 /**
  * This extends the `NAvatarProps` interface.
  *

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

@@ -22,6 +22,10 @@ export interface NAvatarProps {
      * label="PR"
      */
     label?: string;
+    /**
+     * Set the size of the avatar.
+     */
+    size?: string;
     /**
      * Add src of the image.
      *

package/dist/runtime/types/form-group.d.ts

@@ -45,14 +45,14 @@ export interface NFormGroupProps {
      * @example
      * hint="Enter your email address"
      */
-    hint?: string;
+    hint?: any;
     /**
      * Display `Description` message for the form group.
      *
      * @example
      * description="We will never share your email with anyone else."
      */
-    description?: string;
+    description?: any;
     /**
      * Display `Message` for the form group.
      * Useful for displaying validation errors.
@@ -60,7 +60,7 @@ export interface NFormGroupProps {
      * @example
      * message="Email is required"
      */
-    message?: string;
+    message?: any;
     /**
      * Display `counter` for the form group.
      * Useful for displaying character count.

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

@@ -1,20 +1,22 @@
-export * from './input';
-export * from './button';
-export * from './form-group';
-export * from './icon';
-export * from './accordion';
-export * from './switch';
-export * from './alert';
-export * from './badge';
-export * from './avatar';
-export * from './avatar-group';
-export * from './indicator';
-export * from './kbd';
-export * from './nav-link';
-export * from './nav-link-group';
-export * from './link';
-export * from './radio';
-export * from './checkbox';
+export * from './input.js';
+export * from './button.js';
+export * from './form-group.js';
+export * from './icon.js';
+export * from './accordion.js';
+export * from './switch.js';
+export * from './alert.js';
+export * from './badge.js';
+export * from './avatar.js';
+export * from './avatar-group.js';
+export * from './indicator.js';
+export * from './kbd.js';
+export * from './nav-link.js';
+export * from './nav-link-group.js';
+export * from './link.js';
+export * from './radio.js';
+export * from './checkbox.js';
+export * from './slider.js';
+export * from './progress.js';
 export interface Colors {
     [key: string]: string;
 }

package/dist/runtime/types/index.js

@@ -0,0 +1,19 @@
+export * from "./input.js";
+export * from "./button.js";
+export * from "./form-group.js";
+export * from "./icon.js";
+export * from "./accordion.js";
+export * from "./switch.js";
+export * from "./alert.js";
+export * from "./badge.js";
+export * from "./avatar.js";
+export * from "./avatar-group.js";
+export * from "./indicator.js";
+export * from "./kbd.js";
+export * from "./nav-link.js";
+export * from "./nav-link-group.js";
+export * from "./link.js";
+export * from "./radio.js";
+export * from "./checkbox.js";
+export * from "./slider.js";
+export * from "./progress.js";

package/dist/runtime/types/nav-link-group.d.ts

@@ -1,4 +1,4 @@
-import type { NNavLinkProps } from './nav-link';
+import type { NNavLinkProps } from './nav-link.js';
 export interface NNavLinkGroupLink extends NNavLinkProps {
     children?: NNavLinkProps[];
     defaultOpen?: boolean;

package/dist/runtime/types/nav-link.d.ts

@@ -1,5 +1,5 @@
-import type { NBadgeProps } from './badge';
-import type { NButtonProps } from './button';
+import type { NBadgeProps } from './badge.js';
+import type { NButtonProps } from './button.js';
 export interface NNavLinkProps extends Omit<NButtonProps, 'una'> {
     navLink?: string;
     navLinkInactive?: string;

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

@@ -0,0 +1,35 @@
+import type { ProgressRootProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+type Extensions = ProgressRootProps & {
+    class?: HTMLAttributes['class'];
+};
+export interface NProgressProps extends Extensions {
+    /**
+     * Allows you to add `UnaUI` progress preset properties,
+     * Think of it as a shortcut for adding options or variants to the preset if available.
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/progress.ts
+     * @example
+     * progress="red""
+     */
+    progress?: string;
+    /**
+     * Allows you to change the size of the progress.
+     *
+     * @default base|md
+     *
+     * @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/progress.ts
+     */
+    una?: {
+        progressRoot?: HTMLAttributes['class'];
+        progressIndicator?: HTMLAttributes['class'];
+    };
+}
+export {};

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

@@ -0,0 +1,37 @@
+import type { SliderRootProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+type Extensions = SliderRootProps & {
+    class?: HTMLAttributes['class'];
+};
+export interface NSliderProps extends Extensions {
+    /**
+     * Allows you to add `UnaUI` slider preset properties,
+     * Think of it as a shortcut for adding options or variants to the preset if available.
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/slider.ts
+     * @example
+     * slider="green""
+     */
+    slider?: string;
+    /**
+     * Allows you to change the size of the slider.
+     *
+     * @default base|md
+     *
+     * @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/slider.ts
+     */
+    una?: {
+        sliderRoot?: HTMLAttributes['class'];
+        sliderTrack?: HTMLAttributes['class'];
+        sliderRange?: HTMLAttributes['class'];
+        sliderThumb?: HTMLAttributes['class'];
+    };
+}
+export {};

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

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/runtime/utils/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}

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

@@ -1,3 +1,4 @@
+export * from './cn.js';
 export declare function rgbToHex(r: number, g: number, b: number): string;
 export declare function hexToRgb(hex: string): [number, number, number];
 export declare function randomId(prefix: string): string;

package/dist/runtime/utils/{index.mjs → index.js}

@@ -1,3 +1,4 @@
+export * from "./cn.js";
 export function rgbToHex(r, g, b) {
   return `#${[r, g, b].map((x) => {
     const hex = x.toString(16);

package/dist/types.d.mts

@@ -1,16 +1 @@
-
-import type { ModuleOptions } from './module'
-
-
-declare module '@nuxt/schema' {
-  interface NuxtConfig { ['una']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['una']?: ModuleOptions }
-}
-
-declare module 'nuxt/schema' {
-  interface NuxtConfig { ['una']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['una']?: ModuleOptions }
-}
-
-
-export type { ModuleOptions, default } from './module'
+export { type ModuleOptions, default } from './module.js'

package/dist/types.d.ts

@@ -1,16 +1 @@
-
-import type { ModuleOptions } from './module'
-
-
-declare module '@nuxt/schema' {
-  interface NuxtConfig { ['una']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['una']?: ModuleOptions }
-}
-
-declare module 'nuxt/schema' {
-  interface NuxtConfig { ['una']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['una']?: ModuleOptions }
-}
-
-
-export type { ModuleOptions, default } from './module'
+export { type ModuleOptions, default } from './module'