@una-ui/nuxt 1.0.0-alpha.1 → 1.0.0-alpha.11

package/dist/runtime/components/stepper/StepperIndicator.vue.d.ts

@@ -0,0 +1,15 @@
+import type { NStepperIndicatorProps } from '../../types/index.js';
+declare var __VLS_6: any;
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<NStepperIndicatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NStepperIndicatorProps> & Readonly<{}>, {
+    stepper: string;
+}, {}, {}, {}, 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/stepper/StepperItem.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { StepperItem, useForwardProps } from "reka-ui";
+import { cn } from "../../utils";
+const props = defineProps({
+  slot: { type: String, required: false },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  value: { type: [String, Number], required: false },
+  icon: { type: String, required: false },
+  una: { type: Object, required: false },
+  step: { type: Number, required: true },
+  disabled: { type: Boolean, required: false },
+  completed: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  orientation: { type: String, required: false, default: "horizontal" },
+  class: { type: null, required: false },
+  size: { type: null, required: false }
+});
+const delegatedProps = reactiveOmit(props, [
+  "class",
+  "una",
+  "title",
+  "description",
+  "slot"
+]);
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <StepperItem
+    v-slot="slotProps"
+    v-bind="forwarded"
+    :class="cn(
+  'group stepper-item',
+  orientation === 'vertical' && 'stepper-item-vertical',
+  props.class,
+  props.una?.stepperItem
+)"
+  >
+    <slot v-bind="slotProps" />
+  </StepperItem>
+</template>

package/dist/runtime/components/stepper/StepperItem.vue.d.ts

@@ -0,0 +1,15 @@
+import type { NStepperItemProps } from '../../types/index.js';
+declare var __VLS_6: any;
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<NStepperItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NStepperItemProps> & Readonly<{}>, {
+    orientation: "vertical" | "horizontal";
+}, {}, {}, {}, 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/stepper/StepperSeparator.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { StepperSeparator, useForwardProps } from "reka-ui";
+import { cn } from "../../utils";
+const props = defineProps({
+  una: { type: Object, required: false },
+  orientation: { type: String, required: false, default: "horizontal" },
+  decorative: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  stepper: { type: String, required: false, default: "solid-primary" },
+  class: { type: null, required: false }
+});
+const delegatedProps = reactiveOmit(props, "class", "una");
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <StepperSeparator
+    v-bind="forwarded"
+    :class="cn(
+  'stepper-separator',
+  orientation === 'vertical' ? 'stepper-separator-vertical' : 'stepper-separator-horizontal',
+  props.class,
+  props.una?.stepperSeparator
+)"
+    :stepper
+  />
+</template>

package/dist/runtime/components/stepper/StepperSeparator.vue.d.ts

@@ -0,0 +1,6 @@
+import type { NStepperSeparatorProps } from '../../types/index.js';
+declare const _default: import("vue").DefineComponent<NStepperSeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NStepperSeparatorProps> & Readonly<{}>, {
+    orientation: "vertical" | "horizontal";
+    stepper: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/stepper/StepperTitle.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { StepperTitle, useForwardProps } from "reka-ui";
+import { cn } from "../../utils";
+const props = defineProps({
+  una: { type: Object, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  size: { type: null, required: false }
+});
+const delegatedProps = reactiveOmit(props, "class", "una");
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <StepperTitle
+    v-bind="forwarded"
+    :class="cn(
+  'stepper-title',
+  props.class,
+  props.una?.stepperTitle
+)"
+  >
+    <slot />
+  </StepperTitle>
+</template>

package/dist/runtime/components/stepper/StepperTitle.vue.d.ts

@@ -0,0 +1,13 @@
+import type { NStepperTitleProps } from '../../types/index.js';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<NStepperTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NStepperTitleProps> & 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/stepper/StepperTrigger.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { StepperTrigger, useForwardProps } from "reka-ui";
+import { cn } from "../../utils";
+const props = defineProps({
+  una: { type: Object, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  stepper: { type: String, required: false, default: "solid-primary" },
+  class: { type: null, required: false },
+  size: { type: null, required: false }
+});
+const delegatedProps = reactiveOmit(props, "class", "una");
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <StepperTrigger
+    v-bind="forwarded"
+    :class="cn(
+  'stepper-trigger',
+  props.class,
+  props.una?.stepperTrigger
+)"
+    :stepper
+  >
+    <slot />
+  </StepperTrigger>
+</template>

package/dist/runtime/components/stepper/StepperTrigger.vue.d.ts

@@ -0,0 +1,15 @@
+import type { NStepperTriggerProps } from '../../types/index.js';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<NStepperTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NStepperTriggerProps> & Readonly<{}>, {
+    stepper: string;
+}, {}, {}, {}, 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/stepper/StepperWrapper.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { cn } from "../../utils";
+const props = defineProps({
+  una: { type: Object, required: false },
+  class: { type: null, required: false },
+  orientation: { type: String, required: false, default: "horizontal" }
+});
+</script>
+
+<template>
+  <div
+    :class="cn(
+  'stepper-wrapper',
+  orientation === 'vertical' && 'stepper-wrapper-vertical',
+  props.class,
+  props.una?.stepperWrapper
+)"
+  >
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/stepper/StepperWrapper.vue.d.ts

@@ -0,0 +1,15 @@
+import type { NStepperWrapperProps } from '../../types/index.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<NStepperWrapperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NStepperWrapperProps> & Readonly<{}>, {
+    orientation: "vertical" | "horizontal";
+}, {}, {}, {}, 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/toggle-group/ToggleGroup.vue

@@ -0,0 +1,70 @@
+<script>
+
+</script>
+
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { ToggleGroupRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../../utils";
+import ToggleGroupItem from "./ToggleGroupItem.vue";
+const props = defineProps({
+  items: { type: null, required: false },
+  _toggleGroupItem: { type: Object, required: false },
+  una: { type: Object, required: false },
+  rovingFocus: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  orientation: { type: String, required: false },
+  dir: { type: String, required: false },
+  loop: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  type: { type: String, required: false },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  toggleOff: { type: String, required: false },
+  toggleOn: { type: String, required: false },
+  class: { type: null, required: false },
+  size: { type: null, required: false }
+});
+const emits = defineEmits(["update:modelValue"]);
+const rootProps = reactiveOmit(props, [
+  "class",
+  "size",
+  "toggleOff",
+  "toggleOn",
+  "una"
+]);
+const forwarded = useForwardPropsEmits(rootProps, emits);
+</script>
+
+<template>
+  <ToggleGroupRoot
+    v-slot="slotProps"
+    v-bind="forwarded"
+    data-slot="toggle-group"
+    :class="cn(
+  'toggle-group',
+  props.orientation === 'vertical' ? 'toggle-group-vertical' : 'toggle-group-horizontal',
+  props.class,
+  props.una?.toggleGroup
+)"
+  >
+    <slot v-bind="slotProps">
+      <template v-if="items && items.length">
+        <template v-for="item in items" :key="item.value">
+          <slot :name="item.slot ?? 'item'" v-bind="{ item, value: item.value }">
+            <ToggleGroupItem
+              :una
+              :size
+              :toggle-on
+              :toggle-off
+              v-bind="{ ...item, ..._toggleGroupItem }"
+            />
+          </slot>
+        </template>
+      </template>
+    </slot>
+  </ToggleGroupRoot>
+</template>

package/dist/runtime/components/toggle-group/ToggleGroup.vue.d.ts

@@ -0,0 +1,23 @@
+import type { NToggleGroupItemProps, NToggleGroupProps } from '../../types/index.js';
+declare const _default: <T extends NToggleGroupItemProps, U extends Array<T>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((payload: import("reka-ui").AcceptableValue | import("reka-ui").AcceptableValue[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & NToggleGroupProps<U> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        [x: string]: ((props: {
+            item: any;
+            value: any;
+        }) => any) | undefined;
+    } & {
+        default?: (props: any) => any;
+    };
+    emit: (evt: "update:modelValue", payload: import("reka-ui").AcceptableValue | import("reka-ui").AcceptableValue[]) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/toggle-group/ToggleGroupItem.vue

@@ -0,0 +1,75 @@
+<script>
+
+</script>
+
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { ToggleGroupItem, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../../utils";
+import Toggle from "../elements/Toggle.vue";
+const props = defineProps({
+  slot: { type: String, required: false },
+  una: { type: Object, required: false },
+  value: { type: null, required: true },
+  disabled: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: Toggle },
+  toggleOn: { type: String, required: false },
+  toggleOff: { type: String, required: false },
+  defaultValue: { type: Boolean, required: false },
+  modelValue: { type: [Boolean, null], required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  type: { type: String, required: false },
+  loadingPlacement: { type: String, required: false },
+  icon: { type: Boolean, required: false, default: true },
+  reverse: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  block: { type: Boolean, required: false },
+  to: { type: null, required: false },
+  label: { type: String, required: false },
+  btn: { type: String, required: false },
+  leading: { type: String, required: false },
+  trailing: { type: String, required: false },
+  size: { type: String, required: false },
+  square: { type: null, required: false, default: true },
+  rounded: { type: null, required: false },
+  class: { type: null, required: false },
+  breadcrumbActive: { type: String, required: false },
+  breadcrumbInactive: { type: String, required: false },
+  paginationSelected: { type: String, required: false },
+  paginationUnselected: { type: String, required: false },
+  dropdownMenu: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
+  navigationMenu: { type: String, required: false },
+  navigationMenuLink: { type: String, required: false },
+  ariaLabel: { type: String, required: false }
+});
+const emits = defineEmits(["update:modelValue"]);
+const delegatedProps = reactiveOmit(props, [
+  "class",
+  "toggleOff",
+  "toggleOn",
+  "una"
+]);
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-slot="slotProps"
+    v-bind="forwarded"
+    data-slot="toggle-group-item"
+    :toggle-on
+    :toggle-off
+    :as="props.as"
+    :class="cn(
+  'toggle-group-item',
+  props.una?.toggleGroupItem,
+  props.class
+)"
+  >
+    <slot v-bind="slotProps" />
+  </ToggleGroupItem>
+</template>

package/dist/runtime/components/toggle-group/ToggleGroupItem.vue.d.ts

@@ -0,0 +1,18 @@
+import type { NToggleGroupItemProps } from '../../types/index.js';
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<NToggleGroupItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<NToggleGroupItemProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    icon: boolean;
+    as: import("reka-ui").AsTag | import("vue").Component;
+    square: import("vue").HTMLAttributes["class"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: any) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,8 +1,8 @@
 import type { Ref } from 'vue';
 import type { UnaSettings } from '../types/index.js';
 export interface UseUnaSettingsReturn {
-    defaultSettings: UnaSettings;
-    settings: Ref<UnaSettings>;
+    defaultSettings: Omit<UnaSettings, 'themes'>;
+    settings: Ref<Omit<UnaSettings, 'themes'>>;
     reset: () => void;
 }
 export declare function useUnaSettings(): UseUnaSettingsReturn;

package/dist/runtime/composables/useUnaSettings.js

@@ -6,14 +6,13 @@ 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,
-    theme: una.theme,
-    themes: una.themes
+    theme: una.theme
   };
   const settings = useStorage("una-settings", defaultSettings, void 0, {
     mergeDefaults: defu
@@ -21,14 +20,16 @@ export function useUnaSettings() {
   watch(
     () => [settings.value.primary, settings.value.gray],
     ([primary, gray]) => {
-      settings.value.primaryColors = getPrimaryColors(primary, una.primary);
-      settings.value.grayColors = getGrayColors(gray, una.gray);
+      settings.value.primaryColors = primary ? getPrimaryColors(primary) : {};
+      settings.value.grayColors = gray ? getGrayColors(gray) : {};
     },
     { immediate: 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;

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

@@ -1,8 +1,9 @@
-import { defineNuxtPlugin } from "#app";
+import { defineNuxtPlugin, useAppConfig } from "#app";
 import { computed, watchEffect } from "vue";
 import { useUnaSettings } from "../composables/useUnaSettings.js";
 let unaUIStyle;
 export default defineNuxtPlugin(() => {
+  const { una: { themes } } = useAppConfig();
   const { settings } = useUnaSettings();
   unaUIStyle = document.createElement("style");
   unaUIStyle.id = "una-ui-theme";
@@ -10,7 +11,7 @@ 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);
+    const theme = themes.find((t) => t.name === settings.value.theme);
     if (settings.value.theme && theme) {
       return `
       :root {

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

@@ -1,12 +1,14 @@
-import { defineNuxtPlugin, useHead } from "#app";
+import { defineNuxtPlugin, useAppConfig, useHead } from "#app";
 import { useUnaSettings } from "../composables/useUnaSettings.js";
 export default defineNuxtPlugin(() => {
+  const { una: { themes } } = useAppConfig();
   const { defaultSettings } = useUnaSettings();
   useHead({
     script: [
       {
         innerHTML: `
         ;(function() {
+          const themes = ${JSON.stringify(themes)}
           let settings = JSON.parse(localStorage.getItem('una-settings'))
 
           if (!settings) {
@@ -17,7 +19,7 @@ export default defineNuxtPlugin(() => {
           ${process.dev ? "console.log({ settings })" : ""}
 
           if (settings.theme) {
-            const theme = settings.themes.find(t => t.name === settings.theme)  
+            const theme = 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]))