@una-ui/nuxt 0.1.0-beta.1

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

@@ -0,0 +1,22 @@
+import type { PropType, VNode } from 'vue';
+import type { NAvatarGroupProps } from '../../types';
+declare const _default: import("vue").DefineComponent<{
+    max: {
+        type: NumberConstructor;
+        required: true;
+    };
+    avatar: {
+        type: PropType<NAvatarGroupProps>;
+    };
+}, (() => 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<{
+    max: {
+        type: NumberConstructor;
+        required: true;
+    };
+    avatar: {
+        type: PropType<NAvatarGroupProps>;
+    };
+}>>, {}, {}>;
+export default _default;

package/dist/runtime/components/slots/AvatarGroupDefault.mjs

@@ -0,0 +1,44 @@
+import { cloneVNode, computed, defineComponent, h } from "vue";
+import NAvatar from "../elements/Avatar.vue";
+export default defineComponent({
+  props: {
+    max: {
+      type: Number,
+      required: true
+    },
+    avatar: {
+      type: Object
+    }
+  },
+  setup(props, { slots }) {
+    const children = computed(() => slots.default?.()[0].children);
+    if (!children.value)
+      return () => null;
+    const countChildren = computed(() => children.value?.length);
+    const filterChildren = computed(() => {
+      if (countChildren.value <= props.max)
+        return children.value;
+      const childrenCopy = [...children.value];
+      childrenCopy.splice(props.max, countChildren.value - props.max);
+      return childrenCopy;
+    });
+    const clones = computed(() => filterChildren.value?.map((node) => {
+      const mergeProps = { ...props.avatar, ...node.props };
+      return cloneVNode(node, { ...mergeProps, class: "avatar-group-(child margin)" });
+    }).reverse());
+    const label = computed(() => {
+      if (countChildren.value <= props.max)
+        return null;
+      return h(NAvatar, {
+        // TODO: add `more` configuration
+        class: "avatar-(soft group-margin)",
+        label: `+${countChildren.value - props.max}`,
+        una: { avatarLabel: `${props.avatar?.una?.avatarGroupLabel} avatar-group-label` }
+      });
+    });
+    return () => [
+      label.value,
+      ...clones.value
+    ];
+  }
+});

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

@@ -0,0 +1,25 @@
+import type { VNode } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    status: {
+        type: StringConstructor;
+        validator: (v: string) => boolean;
+        required: false;
+    };
+}, (() => 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<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    status: {
+        type: StringConstructor;
+        validator: (v: string) => boolean;
+        required: false;
+    };
+}>>, {}, {}>;
+export default _default;

package/dist/runtime/components/slots/FormGroupDefault.mjs

@@ -0,0 +1,23 @@
+import { cloneVNode, computed, defineComponent } from "vue";
+export default defineComponent({
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    status: {
+      type: String,
+      validator: (v) => ["success", "error", "warning", "info"].includes(v),
+      required: false
+    }
+  },
+  setup(props, { slots }) {
+    const children = computed(() => slots.default?.()[0].children);
+    if (!children.value)
+      return () => null;
+    const clones = computed(() => children.value?.map((node) => {
+      return cloneVNode(node, { id: props.id, name: props.id, status: props.status });
+    }));
+    return () => clones.value;
+  }
+});

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

@@ -0,0 +1,7 @@
+interface Colors {
+    [key: string]: string;
+}
+export declare function getColors(color: string, prefix: string): Colors;
+export declare const primaryThemes: [string, Colors][];
+export declare const grayThemes: [string, Colors][];
+export {};

package/dist/runtime/composables/themes.mjs

@@ -0,0 +1,119 @@
+import { colors } from "@unocss/preset-mini/colors";
+import { hexToRgb } from "../utils/index.mjs";
+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"
+};
+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
+};
+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 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

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

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

@@ -0,0 +1,28 @@
+import { useStorage } from "@vueuse/core";
+import { watchEffect } from "vue";
+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
+  });
+  unaUIStyle = document.createElement("style");
+  unaUIStyle.id = "una-ui";
+  document.head.appendChild(unaUIStyle);
+  const html = document.documentElement;
+  html.removeAttribute("style");
+  watchEffect(() => {
+    const styleTag = document.getElementById("una-ui");
+    if (styleTag) {
+      styleTag.innerHTML = `
+    :root {
+        ${Object.entries(settings.value.primaryColors || {}).map(([k, v]) => `${k}: ${v};`).join("\n")}
+        ${Object.entries(settings.value.grayColors || {}).map(([k, v]) => `${k}: ${v};`).join("\n")}
+    }
+    `.replace(/\s*\n+\s*/g, "");
+    }
+  });
+});

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

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

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

@@ -0,0 +1,24 @@
+import { defineNuxtPlugin, useHead } from "#app";
+export default defineNuxtPlugin(() => {
+  useHead({
+    script: [
+      {
+        innerHTML: `
+        ;(function() {
+          const settings = JSON.parse(localStorage.getItem('una-settings'))
+          if (!settings) { return }
+
+          const html = document.documentElement
+          ${process.dev ? "console.log({ settings })" : ""}
+
+          if (settings.primaryColors) {
+            Object.entries(settings.primaryColors).map(i => html.style.setProperty(i[0], i[1]))
+          }
+          if (settings.grayColors) {
+            Object.entries(settings.grayColors).map(i => html.style.setProperty(i[0], i[1]))
+          }
+        })()`.trim().replace(/\s*\n+\s*/g, ";")
+      }
+    ]
+  });
+});

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

@@ -0,0 +1,112 @@
+import type { NButtonProps } from './button';
+export interface NAccordionProps extends Omit<NButtonProps, 'una'> {
+    /**
+     * Allows you to add `UnaUI` accordion preset properties,
+     * Think of it as a shortcut for adding options or variants to the preset if available.
+     *
+     * 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,
+     * This means that the accordion will not be rendered until it is opened,
+     * 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[];
+    /**
+     * `Unaonfiguration
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/accordion.ts
+    */
+    una?: {
+        accordion?: string;
+        accordionItem?: string;
+        accordionButton?: string;
+        accordionPanel?: string;
+        accordionLeading?: string;
+        accordionTrailing?: string;
+        accordionTrailingOpen?: string;
+        accordionTrailingClose?: string;
+        accordionEnterActive?: string;
+        accordionLeaveActive?: string;
+    } & NButtonProps['una'];
+}
+export interface NAccordionItemProps extends NButtonProps {
+    /**
+     * Accordion item content
+    */
+    content?: string;
+    /**
+     * Update item leading icon when accordion button item is open,
+     * Accepts icon name and utility classes
+     *
+     * @example
+     * trailingOpen='i-heroicons-information-circle text-info'
+    */
+    trailingOpen?: string;
+    /**
+     * Update item leading icon when accordion button item is closed,
+     * Accepts icon name and utility classes
+     *
+     * @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

@@ -0,0 +1,55 @@
+export interface NAlertProps {
+    /**
+     * Allows you to add `UnaUI` alert 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/alert.ts
+     * @example
+     * alert="outline-pink"
+    */
+    alert?: string;
+    /**
+     * Add icon to the alert,
+     * If this is true, the icon will be automatically generated based on the color.
+     * Supported colors are `info`, `success`, `warning`, and `error`
+     *
+     * You can customize the icon by providing the icon that you want.
+     *
+     * @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;
+    /**
+     * `Unaguration
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/alert.ts
+    */
+    una?: {
+        alert?: string;
+        alertTitle?: string;
+        alertDescription?: string;
+        alertIconBase?: string;
+        alertClose?: string;
+        alertCloseIconBase?: string;
+        alertInnerWrapper?: string;
+        alertContentWrapper?: string;
+        alertIconWrapper?: string;
+        alertCloseWrapper?: string;
+        alertCloseInnerWrapper?: string;
+        alertCloseIcon?: string;
+    };
+}

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

@@ -0,0 +1,26 @@
+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;
+        avatarGroupMargin?: string;
+        avatarGroupLabel?: string;
+    } & NAvatarProps['una'];
+}

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

@@ -0,0 +1,71 @@
+export interface NAvatarProps {
+    /**
+     * Allows you to add `UnaUI` avatar 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/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;
+    /**
+     * `Unaet configuration
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/avatar.ts
+    */
+    una?: {
+        avatar?: string;
+        avatarLabel?: string;
+        avatarSrc?: string;
+        avatarFallback?: string;
+        avatarIconBase?: string;
+        avatarFallbackIcon?: string;
+    };
+}

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

@@ -0,0 +1,41 @@
+export interface NBadgeProps {
+    /**
+     * Allows you to add `UnaUI` badge 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/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,
+     * this also allows you to add utility classes to customize icon.
+     *
+     * @example
+     * icon="i-heroicons-information-circle text-green-500 dark:text-green-400 text-2xl"
+     */
+    icon?: string;
+    /**
+     * 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?: {
+        badge?: string;
+        badgeIconBase?: string;
+        badgeClose?: string;
+        badgeCloseIconBase?: string;
+        badgeCloseIcon?: string;
+    };
+}