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

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

@@ -99,21 +99,35 @@ const filteredColors = {
   ...filteredPrimaryColors,
   ...filteredGrayColors
 };
-export function getColors(color, prefix) {
-  const colorPalette = filteredColors[color];
-  if (!colorPalette)
-    throw new Error(`Invalid primary color: ${color}`);
-  const colors2 = {};
-  colors2[`--una-${prefix}-hex`] = colorPalette[600];
-  for (const shade of Object.keys(colorPalette))
-    colors2[`--una-${prefix}-${shade}`] = hexToRgb(colorPalette[shade]).join(", ");
-  return colors2;
+export function useUnaThemes() {
+  const primaryThemes = Object.entries(filteredPrimaryColors).map(([color]) => [
+    color,
+    getColors(color, "primary")
+  ]);
+  const grayThemes = Object.entries(filteredGrayColors).map(([color]) => [
+    color,
+    getColors(color, "gray")
+  ]);
+  function getColors(color, prefix) {
+    const colorPalette = filteredColors[color];
+    if (!colorPalette)
+      throw new Error(`Invalid primary color: ${color}`);
+    const colors2 = {};
+    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 getGrayColors(color) {
+    return grayThemes.filter(([colorName, _]) => colorName === color)[0][1];
+  }
+  return {
+    primaryThemes,
+    grayThemes,
+    getPrimaryColors,
+    getGrayColors
+  };
 }
-export const primaryThemes = Object.entries(filteredPrimaryColors).map(([color]) => [
-  color,
-  getColors(color, "primary")
-]);
-export const grayThemes = Object.entries(filteredGrayColors).map(([color]) => [
-  color,
-  getColors(color, "gray")
-]);

package/dist/runtime/plugins/theme.client.d.ts

@@ -1,5 +1,2 @@
-export interface ThemeColors {
-    [key: string]: string;
-}
 declare const _default: any;
 export default _default;

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

@@ -1,21 +1,16 @@
-import { useStorage } from "@vueuse/core";
 import { watchEffect } from "vue";
+import { useUnaSettings } from "../composables/useUnaSettings.mjs";
 import { defineNuxtPlugin } from "#app";
 let unaUIStyle;
 export default defineNuxtPlugin(() => {
-  const settings = useStorage("una-settings", {
-    primaryColors: void 0,
-    grayColors: void 0
-    // fontSize: 16, TODO: add font size
-    // --font-size: ${settings.value.fontSize}px; TODO: add font size
-  });
+  const { settings } = useUnaSettings();
   unaUIStyle = document.createElement("style");
-  unaUIStyle.id = "una-ui";
+  unaUIStyle.id = "una-ui-colors";
   document.head.appendChild(unaUIStyle);
   const html = document.documentElement;
   html.removeAttribute("style");
   watchEffect(() => {
-    const styleTag = document.getElementById("una-ui");
+    const styleTag = document.getElementById("una-ui-colors");
     if (styleTag) {
       styleTag.innerHTML = `
     :root {

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

@@ -1,12 +1,17 @@
+import { useUnaSettings } from "../composables/useUnaSettings.mjs";
 import { defineNuxtPlugin, useHead } from "#app";
 export default defineNuxtPlugin(() => {
+  const { defaultSettings } = useUnaSettings();
   useHead({
     script: [
       {
         innerHTML: `
         ;(function() {
           const settings = JSON.parse(localStorage.getItem('una-settings'))
-          if (!settings) { return }
+
+          if (!settings) {
+            settings = ${JSON.stringify(defaultSettings)}
+          }
 
           const html = document.documentElement
           ${process.dev ? "console.log({ settings })" : ""}

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

@@ -6,35 +6,35 @@ export interface NAccordionProps extends Omit<NButtonProps, 'una'> {
      *
      * By default, we don't add any options or variants to the accordion,
      * But you can add your own in the configuration file.
-    */
+     */
     accordion?: string;
     /**
      * Update leading icon when accordion button item is open,
      * Accepts icon name and utility classes
-    */
+     */
     trailingOpen?: string;
     /**
      * Update leading icon when accordion button item is closed,
      * Accepts icon name and utility classes
-    */
+     */
     trailingClose?: string;
     /**
      * Allow multiple accordion items to be open at the same time
      *
      * @default false
-    */
+     */
     multiple?: boolean;
     /**
      * Allow accordion item to be open by default
      *
      * @default false
-    */
+     */
     defaultOpen?: boolean;
     /**
      * Removes border and divider from accordion
      *
      * @default false
-    */
+     */
     unstyle?: boolean;
     /**
      * By default, the accordion is unmounted for performance reasons,
@@ -42,20 +42,20 @@ export interface NAccordionProps extends Omit<NButtonProps, 'una'> {
      * If you want to render the accordion when the page loads, you can use the `mounted` prop.
      *
      * @default false
-    */
+     */
     mounted?: boolean;
     /**
      * List of items to be rendered,
      * It extends the `NButtonProps` interface
      *
      * @see https://github.com/una-ui/una-ui/blob/main/packages/nuxt/src/runtime/types/button.ts
-    */
+     */
     items: NAccordionItemProps[];
     /**
      * `UnaUI` preset configuration
      *
      * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/accordion.ts
-    */
+     */
     una?: {
         accordion?: string;
         accordionItem?: string;
@@ -72,7 +72,7 @@ export interface NAccordionProps extends Omit<NButtonProps, 'una'> {
 export interface NAccordionItemProps extends NButtonProps {
     /**
      * Accordion item content
-    */
+     */
     content?: string;
     /**
      * Update item leading icon when accordion button item is open,
@@ -80,7 +80,7 @@ export interface NAccordionItemProps extends NButtonProps {
      *
      * @example
      * trailingOpen='i-heroicons-information-circle text-info'
-    */
+     */
     trailingOpen?: string;
     /**
      * Update item leading icon when accordion button item is closed,
@@ -88,25 +88,25 @@ export interface NAccordionItemProps extends NButtonProps {
      *
      * @example
      * trailingClose='i-heroicons-information-circle text-info'
-    */
+     */
     trailingClose?: string;
     /**
      * Allow accordion item to be open by default
      *
      * @default false
-    */
+     */
     defaultOpen?: boolean;
     /**
      * Close other accordion items when item is open
      *
      * @default false
-    */
+     */
     closeOthers?: boolean;
     /**
      * By default, all the accordion item is unmounted for performance reasons,
      * You can use the `mounted` prop to render the accordion specific on item.
      *
      * @default false
-    */
+     */
     mounted?: boolean;
 }

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

@@ -6,7 +6,7 @@ export interface NAlertProps {
      * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/alert.ts
      * @example
      * alert="outline-pink"
-    */
+     */
     alert?: string;
     /**
      * Add icon to the alert,
@@ -17,27 +17,27 @@ export interface NAlertProps {
      *
      * @example
      * icon="i-heroicons-information-circle"
-    */
+     */
     icon?: string | boolean;
     /**
      * Add a close button to the alert.
      *
      * @default false
-    */
+     */
     closable?: boolean;
     /**
      * Add a title to the alert.
-    */
+     */
     title?: string;
     /**
      * Add a description to the alert.
-    */
+     */
     description?: string;
     /**
      * `UnaUI` preset configuration
      *
      * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/alert.ts
-    */
+     */
     una?: {
         alert?: string;
         alertTitle?: string;

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

@@ -3,20 +3,20 @@ import type { NAvatarProps } from './avatar';
  * This extends the `NAvatarProps` interface.
  *
  * @see https://github.com/una-ui/una-ui/blob/main/packages/nuxt/src/runtime/types/avatar.ts
-*/
+ */
 export interface NAvatarGroupProps extends Omit<NAvatarProps, 'una'> {
     /**
      * Set the maximum number of avatars to show.
      *
      * @default 3
-    */
+     */
     max: number;
     /**
      * `Una
      *
      * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/avatar-group.ts
      * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/avatar.ts
-    */
+     */
     una?: {
         avatarGroup?: string;
         avatarGroupChild?: string;

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

@@ -6,60 +6,60 @@ export interface NAvatarProps {
      * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/avatar.ts
      * @example
      * avatar="solid-green"
-    */
+     */
     avatar?: string;
     /**
      * Add icon instead of image.
      *
      * @example
      * icon="i-heroicons-information-circle"
-    */
+     */
     icon?: string;
     /**
      * Add a label to the avatar.
      *
      * @example
      * label="PR"
-    */
+     */
     label?: string;
     /**
      * Add src of the image.
      *
      * @example
      * src="https://i.pravatar.cc/300"
-    */
+     */
     src?: string;
     /**
      * Add alt of the image.
      *
      * @example
      * alt="Profile"
-    */
+     */
     alt?: string;
     /**
      * Add fallback of the image.
      *
      * @example
      * fallback="https://i.pravatar.cc/300"
-    */
+     */
     fallback?: string;
     /**
      * Add a delay before showing the avatar.
      *
      * @default 0
-    */
+     */
     delay?: number;
     /**
      * Add a skeleton effect to the avatar.
      *
      * @default false
-    */
+     */
     skeleton?: boolean;
     /**
      * `UnaUI` preset configuration
      *
      * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/avatar.ts
-    */
+     */
     una?: {
         avatar?: string;
         avatarLabel?: string;

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

@@ -6,11 +6,11 @@ export interface NBadgeProps {
      * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/badge.ts
      * @example
      * badge="solid-yellow"
-    */
+     */
     badge?: string;
     /**
      * Add a label to the badge.
-    */
+     */
     label?: string;
     /**
      * Display an icon on the left side of the badge,
@@ -24,13 +24,13 @@ export interface NBadgeProps {
      * Display `close` icon on the right side of the badge,
      *
      * @default false
-    */
+     */
     closable?: boolean;
     /**
      * `UnaUI` preset configuration
      *
      * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/badge.ts
-    */
+     */
     una?: {
         badgeDefaultVariant?: string;
         badge?: string;

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

@@ -3,13 +3,13 @@ export interface NButtonProps {
      * Change the button type.
      *
      * @default 'button'
-    */
+     */
     type?: 'button' | 'submit' | 'reset';
     /**
      * Change the loading placement of the button.
      *
      * @default 'leading'
-    */
+     */
     loadingPlacement?: 'leading' | 'trailing' | 'label';
     /**
      * Convert `label` prop to icon component.
@@ -18,24 +18,24 @@ export interface NButtonProps {
      * @example
      * icon
      * label="i-heroicons-information-circle"
-    */
+     */
     icon?: boolean;
     /**
      * Disable the button.
      *
      * @default false
-    */
+     */
     disabled?: boolean;
     /**
      * Swap the position of the leading and trailing icons.
      *
      * @default false
-    */
+     */
     reverse?: boolean;
     /**
      * Show loading state on button
      * @default false
-    */
+     */
     loading?: boolean;
     /**
      * Change the button tag to `NuxtLink` component,
@@ -44,14 +44,14 @@ export interface NButtonProps {
      * @see https://nuxt.com/docs/api/components/nuxt-link#props
      * @example
      * to="/"
-    */
+     */
     to?: string;
     /**
      * Add a label to the button.
      *
      * @example
      * label="Click me"
-    */
+     */
     label?: string;
     /**
      * Allows you to add `UnaUI` button preset properties,
@@ -60,7 +60,7 @@ export interface NButtonProps {
      * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/button.ts
      * @example
      * btn="solid-green block square"
-    */
+     */
     btn?: string;
     /**
      * Add leading icon the button,
@@ -82,7 +82,7 @@ export interface NButtonProps {
      * `UnaUI` preset configuration
      *
      * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/button.ts
-    */
+     */
     una?: {
         btnDefaultVariant?: string;
         btn?: string;

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

@@ -1,33 +1,33 @@
 export interface NCheckboxProps {
     /**
      * v-model binding value if the checkbox is checked.
-    */
+     */
     modelValue?: boolean | null;
     /**
      * Disable the checkbox.
-    */
+     */
     disabled?: boolean;
     /**
      * Switch the position of label and checkbox.
-    */
+     */
     reverse?: boolean;
     /**
      * Allows you to add `UnaUI` checkbox preset properties,
      * Think of it as a shortcut for adding options or variants to the preset if available.
-    */
+     */
     checkbox?: string;
     /**
      * Add name attribute to the checkbox.
      *
      * @default null
-    */
+     */
     name?: string;
     /**
      * Manually set the id attribute.
      * By default, the id attribute is generated randomly for accessibility reasons.
      *
      * @default randomId
-    */
+     */
     id?: string;
     /**
      * Manually set the for attribute.
@@ -37,13 +37,13 @@ export interface NCheckboxProps {
      * @default randomId
      * @example
      * for="options"
-    */
+     */
     for?: string;
     /**
      * Display label text.
      *
      * @default null
-    */
+     */
     label?: string;
     /**
      * Allows you to change the size of the checkbox.
@@ -52,7 +52,7 @@ export interface NCheckboxProps {
      *
      * @example
      * size="sm" | size="2cm" | size="2rem" | size="2px"
-    */
+     */
     size?: string;
     /**
      * `UnaUI` preset configuration

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

@@ -3,13 +3,13 @@ export interface NFormGroupProps {
      * Update the form group status.
      *
      * @default null
-    */
+     */
     status?: 'info' | 'success' | 'warning' | 'error';
     /**
      * Add a required indicator to the form group.
      *
      * @default false
-    */
+     */
     required?: boolean;
     /**
      * Manually set the for attribute.
@@ -20,7 +20,7 @@ export interface NFormGroupProps {
      * @default randomId
      * @example
      * for="email"
-    */
+     */
     for?: string | boolean;
     /**
      * Manually set the id attribute.
@@ -30,28 +30,28 @@ export interface NFormGroupProps {
      * @default randomId
      * @example
      * id="email"
-    */
+     */
     id?: string;
     /**
      * Label for the form group.
      *
      * @example
      * label="Email"
-    */
+     */
     label?: string;
     /**
      * Display `hint` message for the form group.
      *
      * @example
      * hint="Enter your email address"
-    */
+     */
     hint?: string;
     /**
      * Display `Description` message for the form group.
      *
      * @example
      * description="We will never share your email with anyone else."
-    */
+     */
     description?: string;
     /**
      * Display `Message` for the form group.
@@ -59,7 +59,7 @@ export interface NFormGroupProps {
      *
      * @example
      * message="Email is required"
-    */
+     */
     message?: string;
     /**
      * Display `counter` for the form group.
@@ -67,7 +67,7 @@ export interface NFormGroupProps {
      *
      * @example
      * counter="{ value: 0, max: 100 }"
-    */
+     */
     counter?: {
         value: number;
         max?: number;
@@ -76,7 +76,7 @@ export interface NFormGroupProps {
      * `UnaUI` preset configuration
      *
      * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/form-group.ts
-    */
+     */
     una?: {
         formGroupTopWrapper?: string;
         formGroupTopWrapperInner?: string;

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

@@ -4,6 +4,6 @@ export interface NIconProps {
      *
      * @example
      * 'i-heroicons-chevron-up'
-    */
+     */
     name: string;
 }

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

@@ -15,3 +15,26 @@ export * from './nav-link-group';
 export * from './link';
 export * from './radio';
 export * from './checkbox';
+export interface Colors {
+    [key: string]: string;
+}
+export interface ColorPalette {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+}
+export interface UnaSettings {
+    primaryColors: Colors;
+    grayColors: Colors;
+    primary: string;
+    gray: string;
+    fontSize: number;
+}