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

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "configKey": "una",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.3",
   "compatibility": {
     "nuxt": ">=3.0.0"
   },

package/dist/module.mjs

@@ -8,7 +8,7 @@ import 'unocss';
 import 'unocss-preset-animations';
 
 const name = "@una-ui/nuxt";
-const version = "1.0.0-alpha.1";
+const version = "1.0.0-alpha.3";
 
 const module = defineNuxtModule({
   meta: {

package/dist/runtime/components/data/table/Table.vue

@@ -213,6 +213,7 @@ const table = useVueTable({
   getFilteredRowModel: getFilteredRowModel(),
   getPaginationRowModel: getPaginationRowModel(),
   getRowId: (row) => props.rowId ? row[props.rowId] : row.id,
+  getSubRows: (row) => row.subRows,
   getExpandedRowModel: getExpandedRowModel(),
   onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sorting),
   onRowSelectionChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowSelection),

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

@@ -25,23 +25,23 @@ const currentPrimaryThemeName = computed(() => {
 });
 const currentGrayThemeHex = computed(() => settings.value.grayColors?.["--una-gray-hex"]);
 const currentGrayThemeName = computed(() => {
-  if (settings.value.theme !== null) {
-    return false;
+  if (settings.value.theme) {
+    return settings.value.theme;
   }
   const theme = grayThemes.find(([, theme2]) => theme2["--una-gray-hex"] === currentGrayThemeHex.value);
   return theme ? theme[0] : "";
 });
-function updateColor(theme) {
+function updateTheme(theme) {
   settings.value.theme = theme;
-  settings.value.primary = "";
-  settings.value.gray = "";
+  settings.value.primary = false;
+  settings.value.gray = false;
 }
 function updatePrimaryTheme(theme) {
-  settings.value.theme = null;
+  settings.value.theme = false;
   settings.value.primary = theme;
 }
 function updateGrayTheme(theme) {
-  settings.value.theme = null;
+  settings.value.theme = false;
   settings.value.gray = theme;
 }
 function shuffleTheme() {
@@ -114,7 +114,7 @@ function shuffleTheme() {
                   class="justify-start gap-2 ring-primary"
                   :aria-label="`Theme: ${theme.name}`"
                   :class="currentPrimaryThemeName === theme?.name && 'ring-2'"
-                  @click="updateColor(theme.name)"
+                  @click="updateTheme(theme.name)"
                 >
                   <template #leading>
                     <Icon
@@ -169,19 +169,25 @@ function shuffleTheme() {
         <div class="space-y-2">
           <Label for="color" class="text-xs"> Gray Color </Label>
           <div class="grid grid-cols-7 gap-3">
-            <button
+            <template
               v-for="[key, theme] in grayThemes"
               :key="key"
-              :title="capitalize(key)"
-              :style="{ background: theme['--una-gray-hex'] }"
-              :class="currentGrayThemeName === key ? 'ring-2' : 'scale-93'"
-              class="transition-all"
-              rounded="full"
-              square="6.5"
-              :aria-label="`Gray Color: ${key}`"
-              ring="gray offset-4 offset-background"
-              @click="updateGrayTheme(key)"
-            />
+            >
+              <button
+                :title="capitalize(key)"
+                :style="{
+  '--c-gray': `oklch(${theme['--una-gray-600']})`,
+  '--c-gray-foreground': `oklch(${theme['--una-gray-500']})`
+}"
+                class="bg-$c-gray transition-all dark:bg-$c-gray-foreground"
+                rounded="full"
+                square="6.5"
+                :class="[currentGrayThemeName === key ? 'ring-2' : 'scale-93']"
+                ring="gray offset-4 offset-background"
+                :aria-label="`Gray Color: ${key}`"
+                @click="updateGrayTheme(key)"
+              />
+            </template>
           </div>
         </div>
 

package/dist/runtime/components/pin-input/PinInput.vue

@@ -0,0 +1,139 @@
+<script>
+
+</script>
+
+<script setup>
+import { reactivePick } from "@vueuse/core";
+import { PinInputRoot, useForwardPropsEmits } from "reka-ui";
+import { computed } from "vue";
+import { cn, randomId } from "../../utils";
+import PinInputGroup from "./PinInputGroup.vue";
+import PinInputSeparator from "./PinInputSeparator.vue";
+import PinInputSlot from "./PinInputSlot.vue";
+const props = defineProps({
+  defaultValue: { type: Array, required: false },
+  maxLength: { type: Number, required: false },
+  separator: { type: [Boolean, String], required: false, default: false },
+  groupBy: { type: Number, required: false, default: 0 },
+  _pinInputGroup: { type: Object, required: false },
+  _pinInputSeparator: { type: Object, required: false },
+  _pinInputSlot: { type: Object, required: false },
+  una: { type: Object, required: false },
+  modelValue: { type: null, required: false },
+  placeholder: { type: String, required: false },
+  mask: { type: Boolean, required: false },
+  otp: { type: Boolean, required: false },
+  type: { type: null, required: false, default: "text" },
+  dir: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  pinInput: { type: null, required: false, default: "outline-primary" },
+  status: { type: String, required: false },
+  class: { type: null, required: false },
+  size: { type: null, required: false, default: "md" }
+});
+const emits = defineEmits(["update:modelValue", "complete"]);
+const rootProps = reactivePick(props, [
+  "as",
+  "asChild",
+  "dir",
+  "defaultValue",
+  "disabled",
+  "id",
+  "mask",
+  "modelValue",
+  "name",
+  "otp",
+  "placeholder",
+  "type",
+  "required"
+]);
+const forwarded = useForwardPropsEmits(rootProps, emits);
+const id = computed(() => props.id ?? randomId("pin-input"));
+const separator = computed(() => {
+  if (props.separator === true) {
+    return "pin-input-separator-icon";
+  }
+  return props.separator;
+});
+const maxLength = computed(() => {
+  if (typeof props.maxLength !== "number") {
+    return props.modelValue?.length ?? 0;
+  }
+  return props.maxLength;
+});
+</script>
+
+<template>
+  <PinInputRoot
+    v-bind="forwarded"
+    :id
+    data-slot="pin-input"
+    :class="cn(
+  'pin-input',
+  props.una?.pinInput,
+  props.class
+)"
+    :size
+  >
+    <slot>
+      <template v-if="groupBy === 0">
+        <PinInputGroup
+          v-bind="_pinInputGroup"
+          :una
+        >
+          <slot name="group">
+            <template v-for="index in maxLength" :key="index">
+              <slot name="slot" :index="index - 1">
+                <PinInputSlot
+                  :index="index - 1"
+                  :una
+                  :status
+                  :pin-input
+                  v-bind="_pinInputSlot"
+                />
+              </slot>
+            </template>
+          </slot>
+        </PinInputGroup>
+      </template>
+
+      <template v-else>
+        <template v-for="(groupIndex) in Math.ceil(maxLength / groupBy)" :key="groupIndex">
+          <PinInputGroup
+            v-bind="_pinInputGroup"
+            :una
+          >
+            <slot name="group">
+              <template v-for="slotInGroup in Math.min(groupBy, maxLength - (groupIndex - 1) * groupBy)" :key="slotInGroup">
+                <slot name="slot" :index="(groupIndex - 1) * groupBy + slotInGroup - 1">
+                  <PinInputSlot
+                    :index="(groupIndex - 1) * groupBy + slotInGroup - 1"
+                    :una
+                    :pin-input
+                    :status
+                    v-bind="_pinInputSlot"
+                  />
+                </slot>
+              </template>
+            </slot>
+          </PinInputGroup>
+
+          <template v-if="separator !== false && (separator || $slots.separator) && groupIndex < Math.ceil(maxLength / groupBy)">
+            <PinInputSeparator
+              :icon="separator"
+              :una
+              v-bind="_pinInputSeparator"
+            >
+              <slot name="separator" />
+            </PinInputSeparator>
+          </template>
+        </template>
+      </template>
+    </slot>
+  </PinInputRoot>
+</template>

package/dist/runtime/components/pin-input/PinInput.vue.d.ts

@@ -0,0 +1,33 @@
+import type { NPinInputProps, PinInputType } from '../../types/index.js';
+declare const _default: <T extends PinInputType = "text">(__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"?: ((value: string[]) => any) | undefined;
+        readonly onComplete?: ((value: string[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onComplete"> & NPinInputProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    } & {
+        group?: (props: {}) => any;
+    } & {
+        slot?: (props: {
+            index: number;
+        }) => any;
+    } & {
+        group?: (props: {}) => any;
+    } & {
+        slot?: (props: {
+            index: number;
+        }) => any;
+    } & {
+        separator?: (props: {}) => any;
+    };
+    emit: ((evt: "update:modelValue", value: string[]) => void) & ((evt: "complete", value: string[]) => 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/pin-input/PinInputGroup.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { Primitive, 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");
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <Primitive
+    data-slot="pin-input-group"
+    v-bind="forwardedProps"
+    :class="cn(
+  'pin-input-group',
+  props.una?.pinInputGroup,
+  props.class
+)"
+  >
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/pin-input/PinInputGroup.vue.d.ts

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

@@ -0,0 +1,30 @@
+<script setup>
+import { Primitive, useForwardProps } from "reka-ui";
+import { cn } from "../../utils";
+import Icon from "../elements/Icon.vue";
+const props = defineProps({
+  icon: { type: String, required: false, default: "i-lucide-minus" },
+  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 forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <Primitive
+    data-slot="pin-input-separator"
+    v-bind="forwardedProps"
+    :class="cn(
+  'pin-input-separator',
+  props.una?.pinInputSeparator,
+  props.class
+)"
+  >
+    <slot>
+      <Icon :name="icon" />
+    </slot>
+  </Primitive>
+</template>

package/dist/runtime/components/pin-input/PinInputSeparator.vue.d.ts

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

@@ -0,0 +1,46 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { PinInputInput, useForwardProps } from "reka-ui";
+import { computed } from "vue";
+import { cn } from "../../utils";
+const props = defineProps({
+  pinInput: { type: null, required: false, default: "outline-primary" },
+  status: { type: String, required: false },
+  una: { type: Object, required: false },
+  index: { type: Number, required: true },
+  disabled: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  icon: { type: String, required: false },
+  class: { type: null, required: false },
+  size: { type: null, required: false }
+});
+const delegatedProps = reactiveOmit(props, "class");
+const forwardedProps = useForwardProps(delegatedProps);
+const statusClassVariants = computed(() => {
+  const input = {
+    info: "input-status-info pin-input-solid-info input-status-ring",
+    success: "input-status-success pin-input-solid-success input-status-ring",
+    warning: "input-status-warning pin-input-solid-warning input-status-ring",
+    error: "input-status-error pin-input-solid-error input-status-ring",
+    default: void 0
+  };
+  return {
+    input: input[props.status ?? "default"]
+  };
+});
+</script>
+
+<template>
+  <PinInputInput
+    data-slot="pin-input-slot"
+    v-bind="forwardedProps"
+    :class="cn(
+  'pin-input-slot',
+  props.una?.pinInputSlot,
+  props.class,
+  statusClassVariants.input
+)"
+    :pin-input="statusClassVariants.input === void 0 && props.pinInput"
+  />
+</template>

package/dist/runtime/components/pin-input/PinInputSlot.vue.d.ts

@@ -0,0 +1,5 @@
+import type { NPinInputSlotProps } from '../../types/index.js';
+declare const _default: import("vue").DefineComponent<NPinInputSlotProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NPinInputSlotProps> & Readonly<{}>, {
+    pinInput: import("vue").HTMLAttributes["class"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/composables/useUnaSettings.js

@@ -6,8 +6,8 @@ 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,
@@ -21,14 +21,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/types/index.d.ts

@@ -26,6 +26,7 @@ export * from './link.js';
 export * from './navigation-menu.js';
 export * from './number-field.js';
 export * from './pagination.js';
+export * from './pin-input.js';
 export * from './popover.js';
 export * from './progress.js';
 export * from './radio-group.js';
@@ -62,9 +63,9 @@ export interface ColorPalette {
 export interface UnaSettings {
     primaryColors: Colors;
     grayColors: Colors;
-    theme: string | null | false | undefined;
-    primary: string;
-    gray: string;
+    theme: string | false;
+    primary: string | false;
+    gray: string | false;
     fontSize: number;
     radius: number;
     themes: {

package/dist/runtime/types/index.js

@@ -26,6 +26,7 @@ export * from "./link.js";
 export * from "./navigation-menu.js";
 export * from "./number-field.js";
 export * from "./pagination.js";
+export * from "./pin-input.js";
 export * from "./popover.js";
 export * from "./progress.js";
 export * from "./radio-group.js";

package/dist/runtime/types/pin-input.d.ts

@@ -0,0 +1,88 @@
+import type { PinInputInputProps, PinInputRootProps, PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+interface BaseExtensions {
+    /** CSS class for the component */
+    class?: HTMLAttributes['class'];
+    /** Size of the component */
+    size?: HTMLAttributes['class'];
+}
+export type PinInputType = 'text' | 'number';
+export type PinInputValueType<T extends PinInputType> = T extends 'text' ? string : number;
+export interface NPinInputProps<T extends PinInputType = 'text'> extends Omit<PinInputRootProps<T>, 'defaultValue'>, Pick<NPinInputSlotProps, 'pinInput' | 'status'>, BaseExtensions {
+    /**
+     * The default value of the pin input.
+     * @default []
+     */
+    defaultValue?: PinInputValueType<T>[];
+    /**
+     * The maximum number of slots to render.
+     */
+    maxLength?: number;
+    /**
+     * The icon to use as a separator between pin-input groups.
+     */
+    separator?: boolean | string;
+    /**
+     * The number of slots to group together.
+     *
+     * @default 0
+     */
+    groupBy?: number;
+    /** Props for the pin input group */
+    _pinInputGroup?: Partial<NPinInputGroupProps>;
+    /** Props for the pin input separator */
+    _pinInputSeparator?: Partial<NPinInputSeparatorProps>;
+    /** Props for the pin input slots */
+    _pinInputSlot?: Partial<NPinInputSlotProps>;
+    /**
+     * `UnaUI` preset configuration
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/pin-input.ts
+     */
+    una?: NPinInputUnaProps;
+}
+export interface NPinInputGroupProps extends PrimitiveProps, BaseExtensions {
+    /** Additional properties for the una component */
+    una?: Pick<NPinInputUnaProps, 'pinInputGroup'>;
+}
+export interface NPinInputSlotProps extends PinInputInputProps, Pick<NPinInputSeparatorProps, 'icon'>, BaseExtensions {
+    /**
+     * Allows you to add `UnaUI` pin-input 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/pin-input.ts
+     * @example
+     * pin-input="outline-indigo"
+     */
+    pinInput?: HTMLAttributes['class'];
+    /**
+     * Update the pin input status.
+     * Useful for validations.
+     *
+     * @default null
+     */
+    status?: 'info' | 'success' | 'warning' | 'error';
+    /** Additional properties for the una component */
+    una?: Pick<NPinInputUnaProps, 'pinInputSlot'>;
+}
+export interface NPinInputSeparatorProps extends PrimitiveProps, BaseExtensions {
+    /**
+     * The separator to use between pin input fields.
+     *@example
+     * 'i-lucide:dot'
+     */
+    icon?: string;
+    /** Additional properties for the una component */
+    una?: Pick<NPinInputUnaProps, 'pinInputSeparator'>;
+}
+interface NPinInputUnaProps {
+    /** CSS class for the pin input root */
+    pinInput?: HTMLAttributes['class'];
+    /** CSS class for the pin input group */
+    pinInputGroup?: HTMLAttributes['class'];
+    /** CSS class for the pin input separator */
+    pinInputSeparator?: HTMLAttributes['class'];
+    /** CSS class for the pin input slots */
+    pinInputSlot?: HTMLAttributes['class'];
+}
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "type": "module",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.3",
   "description": "Nuxt module for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -58,8 +58,8 @@
     "unocss": "^66.2.0",
     "unocss-preset-animations": "^1.2.1",
     "vaul-vue": "^0.4.1",
-    "@una-ui/preset": "^1.0.0-alpha.1",
-    "@una-ui/extractor-vue-script": "^1.0.0-alpha.1"
+    "@una-ui/extractor-vue-script": "^1.0.0-alpha.3",
+    "@una-ui/preset": "^1.0.0-alpha.3"
   },
   "devDependencies": {
     "@iconify-json/lucide": "^1.2.51",