@una-ui/nuxt-edge 1.0.0-alpha.1-29179535.5c5a2cb → 1.0.0-alpha.1-29182152.ce98054

package/dist/module.json

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

package/dist/module.mjs

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

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/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';

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-edge",
   "type": "module",
-  "version": "1.0.0-alpha.1-29179535.5c5a2cb",
+  "version": "1.0.0-alpha.1-29182152.ce98054",
   "description": "Nuxt module for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -41,8 +41,8 @@
     "@nuxt/kit": "^3.17.5",
     "@nuxtjs/color-mode": "^3.5.2",
     "@tanstack/vue-table": "^8.21.3",
-    "@una-ui/extractor-vue-script": "npm:@una-ui/extractor-vue-script-edge@1.0.0-alpha.1-29179535.5c5a2cb",
-    "@una-ui/preset": "npm:@una-ui/preset-edge@1.0.0-alpha.1-29179535.5c5a2cb",
+    "@una-ui/extractor-vue-script": "npm:@una-ui/extractor-vue-script-edge@1.0.0-alpha.1-29182152.ce98054",
+    "@una-ui/preset": "npm:@una-ui/preset-edge@1.0.0-alpha.1-29182152.ce98054",
     "@unocss/core": "^66.2.0",
     "@unocss/nuxt": "^66.2.0",
     "@unocss/preset-attributify": "^66.2.0",