@resee-movies/nuxt-ux 0.12.0 → 0.13.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@resee-movies/nuxt-ux",
   "configKey": "ux",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"

package/dist/module.mjs

@@ -244,6 +244,12 @@ const module$1 = defineNuxtModule({
     nuxt.hook("modules:done", async () => {
       await importCSS(nuxt, { sources, plugins, imports });
     });
+    const inlineStyles = nuxt.options.app.head.style ?? [];
+    inlineStyles.push({
+      tagPriority: "critical",
+      textContent: "@layer properties, theme, base, components, utilities;"
+    });
+    nuxt.options.app.head.style = inlineStyles;
     let primePassthroughFilename = await resolver.resolvePath("./runtime/theme/primevue/index", {
       extensions: ["ts", "js"]
     });

package/dist/runtime/components/form/Form.vue

@@ -7,7 +7,7 @@
     :validate-on-submit       = "true"
     :validate-on-value-update = "true"
     :validate-on-blur         = "false"
-    :initial-values           = "values"
+    :initial-values           = "props.initialValues ?? values"
     :aria-disabled            = "props.disabled"
     @submit                   = "handleFormSubmit"
   >
@@ -37,7 +37,9 @@ import { provideFormInstance, getValuesFromFormState } from "../../utils/form";
 const props = defineProps({
   disabled: { type: Boolean, required: false, default: false },
   onSubmit: { type: [Function, Array], required: false, default: void 0 },
-  onChange: { type: Function, required: false, default: void 0 },
+  onChange: { type: [Function, Array], required: false, default: void 0 },
+  changeDelay: { type: Number, required: false, default: 1 },
+  initialValues: { type: Object, required: false, default: void 0 },
   fields: { type: Array, required: false, default: void 0 }
 });
 const form = useTemplateRef("form");
@@ -45,18 +47,13 @@ const values = defineModel("values", { type: null, ...{ default: void 0 } });
 defineEmits(["submit", "change"]);
 const formInstance = provideFormInstance();
 syncRefs(() => props.disabled, formInstance.isDisabled);
-const emitOnChange = useDebounceFn(() => {
-  const state = form.value?.states;
-  if (state) {
-    props.onChange?.(getValuesFromFormState(state));
-  }
-}, 1);
 useReactiveObjectsSync({
   left: () => form.value?.states,
   right: () => values.value,
   keySource: "left",
+  debounceMsLtr: props.changeDelay,
+  onChange: () => handleOnChange(),
   leftOptions: {
-    onChange: () => emitOnChange(),
     getter(obj, key) {
       return obj[key]?.value;
     },
@@ -65,11 +62,23 @@ useReactiveObjectsSync({
         obj[key].value = val ?? null;
       }
     }
-  },
-  rightOptions: {
-    onChange: () => emitOnChange()
   }
 });
+async function handleOnChange() {
+  const state = form.value?.states;
+  if (state && props.onChange) {
+    const newEvent = {
+      values: getValuesFromFormState(state),
+      valid: form.value?.valid ?? true
+    };
+    const results = toNonNullableArray(props.onChange).map((handler) => handler(newEvent));
+    if (!!results.find((result) => isPromiseLike(result))) {
+      formInstance.isSubmitting.value = true;
+      await Promise.allSettled(results);
+      formInstance.isSubmitting.value = false;
+    }
+  }
+}
 async function handleFormSubmit(event) {
   if (props.disabled) {
     return;

package/dist/runtime/components/form/Form.vue.d.ts

@@ -1,10 +1,13 @@
-import type { FormSubmitEvent, FormSubmitHandler, FormValues } from '../../types/form.js';
+import type { FormChangeEvent } from '../../types/form.js';
+import type { FormChangeHandler, FormSubmitEvent, FormSubmitHandler, FormValues } from '../../types/form.js';
 import type { FormFieldBuilderOption } from './FormFieldBuilder.vue.js';
 export * from '../../types/form.js';
 export interface FormProps<T extends FormValues = FormValues> {
     disabled?: boolean;
     onSubmit?: FormSubmitHandler<T> | FormSubmitHandler<T>[];
-    onChange?: (values: T | null) => void;
+    onChange?: FormChangeHandler<T> | FormChangeHandler<T>[];
+    changeDelay?: number;
+    initialValues?: Partial<T>;
     fields?: FormFieldBuilderOption[];
 }
 declare const __VLS_export: <T extends FormValues>(__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<{
@@ -12,7 +15,7 @@ declare const __VLS_export: <T extends FormValues>(__VLS_props: NonNullable<Awai
         values?: Partial<T> | undefined;
     }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<{
         (e: "submit", evt: FormSubmitEvent<T>): (void | Promise<void>);
-        (e: "change", values: T): void;
+        (e: "change", evt: FormChangeEvent<T>): (void | Promise<void>);
     } & ((evt: "update:values", value: Partial<T> | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -33,7 +36,7 @@ declare const __VLS_export: <T extends FormValues>(__VLS_props: NonNullable<Awai
     };
     emit: {
         (e: "submit", evt: FormSubmitEvent<T>): (void | Promise<void>);
-        (e: "change", values: T): void;
+        (e: "change", evt: FormChangeEvent<T>): (void | Promise<void>);
     } & ((evt: "update:values", value: Partial<T> | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/runtime/composables/use-debounced-sync-ref.d.ts

@@ -0,0 +1,24 @@
+import { type Ref, type WatchOptions } from 'vue';
+export type Side = 'left' | 'right';
+/**
+ * Configuration for the {@link useDebouncedSyncRef} composable.
+ */
+export type UseDebouncedSyncRefOptions<L = unknown, R = unknown> = WatchOptions & {
+    direction?: 'both' | Side;
+    debounceMs?: number;
+    debounceMsLtr?: number;
+    debounceMsRtl?: number;
+    onChange?: <S extends Side>(side: S, value: S extends 'left' ? L : R) => void;
+};
+/**
+ * Two-way refs synchronization, with the option to debounce changes going
+ * in each direction.
+ *
+ * This is a simplified version of the Vueuse `syncRef` utility.
+ * @see https://vueuse.org/shared/syncRef/
+ */
+export declare function useDebouncedSyncRef<L, R>(left: Ref<L>, right: Ref<R>, options?: UseDebouncedSyncRefOptions<L, R>): {
+    stop: () => void;
+    pause: () => void;
+    resume: () => void;
+};

package/dist/runtime/composables/use-debounced-sync-ref.js

@@ -0,0 +1,48 @@
+import { watchDebounced } from "@vueuse/core";
+export function useDebouncedSyncRef(left, right, options) {
+  const watchers = [];
+  const stop = () => watchers.forEach((handle) => handle.stop());
+  const pause = () => watchers.forEach((handle) => handle.pause());
+  const resume = () => watchers.forEach((handle) => handle.resume());
+  const watchOptions = {
+    flush: options?.flush ?? "sync",
+    deep: options?.deep ?? false,
+    immediate: options?.immediate ?? false
+  };
+  const syncDirection = options?.direction ?? "both";
+  const debounceLeft = options?.debounceMsLtr ?? options?.debounceMs ?? 0;
+  const debounceRight = options?.debounceMsRtl ?? options?.debounceMs ?? 0;
+  let ignoreLeft = false;
+  let ignoreRight = false;
+  if (syncDirection === "both" || syncDirection === "left") {
+    watchers.push(watchDebounced(
+      left,
+      (newValue) => {
+        if (ignoreLeft) {
+          ignoreLeft = false;
+          return;
+        }
+        ignoreRight = true;
+        right.value = newValue;
+        options?.onChange?.("right", right.value);
+      },
+      { ...watchOptions, debounce: debounceLeft }
+    ));
+  }
+  if (syncDirection === "both" || syncDirection === "right") {
+    watchers.push(watchDebounced(
+      right,
+      (newValue) => {
+        if (ignoreRight) {
+          ignoreRight = false;
+          return;
+        }
+        ignoreLeft = true;
+        left.value = newValue;
+        options?.onChange?.("left", left.value);
+      },
+      { ...watchOptions, debounce: debounceRight }
+    ));
+  }
+  return { stop, pause, resume };
+}

package/dist/runtime/composables/use-query-parameters.d.ts

@@ -1,7 +1,13 @@
 /**
  * Two-way bind to URL query parameters.
  */
-export declare function useQueryParameters<D extends QueryParamDefinitionMap>(params: D): UseQueryParametersReturn<D>;
+export declare function useQueryParameters<D extends QueryParamDefinitionMap>(params: D, options?: UseQueryParametersOptions): UseQueryParametersReturn<D>;
+/**
+ * Configuration for the {@link useQueryParameters} composable.
+ */
+export type UseQueryParametersOptions = {
+    mode?: 'replace' | 'push';
+};
 /**
  * Configuration for a single URL query parameter.
  */

package/dist/runtime/composables/use-query-parameters.js

@@ -3,13 +3,13 @@ import { areEqual } from "@resee-movies/utilities/objects/are-equal";
 import { isString } from "@resee-movies/utilities/strings/is-string";
 import { slugify } from "@resee-movies/utilities/strings/slugify";
 import { customRef, nextTick, onScopeDispose, reactive, toValue, watch } from "vue";
-export function useQueryParameters(params) {
+export function useQueryParameters(params, options) {
   const router = useRouter();
-  const queue = getQueueForRouter(router);
+  const queue = getQueueForRouter(router, options?.mode);
   const refs = {};
   for (const [name, definition] of Object.entries(params)) {
     refs[name] = getQueryRef({
-      slug: slugify(name),
+      slug: slugify(name, { decamelize: true }),
       type: definition.type,
       setCallback: queue.add,
       defaultValue: definition.defaultValue
@@ -18,7 +18,7 @@ export function useQueryParameters(params) {
   return reactive(refs);
 }
 const _queue = /* @__PURE__ */ new WeakMap();
-function getQueueForRouter(router) {
+function getQueueForRouter(router, mode = "push") {
   if (!_queue.has(router)) {
     _queue.set(router, /* @__PURE__ */ new Map());
   }
@@ -32,7 +32,7 @@ function getQueueForRouter(router) {
     const newValues = Object.fromEntries(routerQueue.entries());
     routerQueue.clear();
     const { params, query, hash } = router.currentRoute.value;
-    await router.replace({
+    await router[mode]({
       params,
       query: { ...query, ...newValues },
       hash

package/dist/runtime/composables/use-reactive-objects-sync.d.ts

@@ -1,18 +1,23 @@
 import { type MaybeRefOrGetter } from 'vue';
+import { type UseDebouncedSyncRefOptions, type Side } from './use-debounced-sync-ref.js';
 export type SyncObject = Record<string | number | symbol, unknown>;
 export type KeyOf<S extends SyncObject> = keyof S;
+export type KeyOfSide<S extends Side, L extends SyncObject, R extends SyncObject> = S extends 'left' ? KeyOf<L> : KeyOf<R>;
 export type Getter<S extends SyncObject> = <R>(obj: S, key: KeyOf<S>) => R;
 export type Setter<S extends SyncObject> = (obj: S, key: KeyOf<S>, value: unknown) => void;
 export type ComputedReadWriteOptions<S extends SyncObject> = {
     getter?: Getter<S>;
     setter?: Setter<S>;
-    onChange?: (key: KeyOf<S>, value: unknown) => void;
 };
 export type UseReactiveObjectsSyncOptions<L extends SyncObject, R extends SyncObject> = {
     left: MaybeRefOrGetter<L | undefined>;
     right: MaybeRefOrGetter<R | undefined>;
-    keySource?: 'left' | 'right' | (KeyOf<L> | KeyOf<R>)[];
+    keySource?: Side | (KeyOf<L> | KeyOf<R>)[];
+    onChange?: <S extends Side>(side: S, key: KeyOfSide<S, L, R>, value: unknown) => void;
     leftOptions?: ComputedReadWriteOptions<L>;
     rightOptions?: ComputedReadWriteOptions<R>;
-};
+} & Omit<UseDebouncedSyncRefOptions, 'onChange'>;
+/**
+ * Provides two-way binding between a pair of reactive objects.
+ */
 export declare function useReactiveObjectsSync<L extends SyncObject, R extends SyncObject>(options: UseReactiveObjectsSyncOptions<L, R>): void;

package/dist/runtime/composables/use-reactive-objects-sync.js

@@ -1,4 +1,3 @@
-import { syncRef } from "@vueuse/core";
 import {
   toValue,
   watchEffect,
@@ -6,6 +5,7 @@ import {
   computed,
   shallowRef
 } from "vue";
+import { useDebouncedSyncRef } from "./use-debounced-sync-ref.js";
 export function useReactiveObjectsSync(options) {
   const { left, right } = options;
   const watchKeys = aggregateKeys(options);
@@ -24,8 +24,16 @@ export function useReactiveObjectsSync(options) {
       }
       const leftRef = computedReadWrite(left, key, options?.leftOptions);
       const rightRef = computedReadWrite(right, key, options?.rightOptions);
-      const stopSync = syncRef(leftRef, rightRef);
-      syncHandle.set(key, { leftRef, rightRef, stopSync });
+      const handles = useDebouncedSyncRef(leftRef, rightRef, {
+        direction: options?.direction,
+        debounceMs: options?.debounceMs,
+        debounceMsLtr: options?.debounceMsLtr,
+        debounceMsRtl: options?.debounceMsRtl,
+        onChange(side, value) {
+          options?.onChange?.(side, key, value);
+        }
+      });
+      syncHandle.set(key, { leftRef, rightRef, stopSync: handles.stop });
     }
   });
 }
@@ -66,7 +74,6 @@ function computedReadWrite(source, key, options) {
         } else {
           target[key] = val;
         }
-        options?.onChange?.(key, val);
       }
     }
   });

package/dist/runtime/theme/css/brand/form.css

@@ -1 +1 @@
-@layer components{.input-label{display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none}.input-label.required:after{color:var(--color-danger);content:"*";display:inline-block;margin-inline-start:--spacing(1)}.input-label.disabled{cursor:not-allowed;opacity:.6}.input-label:not(fieldset .input-label,.label-before .input-label,.label-after .input-label),.input-label:where(fieldset legend.input-label){font-size:var(--text-lg)}.input-label-pair{display:flex;flex-direction:column;gap:--spacing(1);margin-block-end:--spacing(1)}.input-label-pair.label-after,.input-label-pair.label-before{align-items:center;flex-direction:row;gap:--spacing(3)}.input-label-pair.label-after .input-label,.input-label-pair.label-below .input-label{order:2}.input-validation{color:var(--color-danger);font-size:var(--text-sm);height:0;line-clamp:2}.input-field{display:flex;flex-direction:column}.input-control{flex-grow:1;padding:--spacing(2) --spacing(3)}.input-control::-moz-placeholder{color:var(--color-global-foreground-accent)}.input-control .placeholder,.input-control::placeholder{color:var(--color-global-foreground-accent)}.input-group{align-items:center;display:flex}.input-group.input-group-loading{cursor:wait}.input-group .input-group-addon{color:var(--color-global-foreground-accent);padding:--spacing(1.5) --spacing(2)}.input-group button.input-group-addon{cursor:pointer}.input-group .input-control{outline:none}.input-control:where(:not(.input-group .input-control)),.input-group{background-color:var(--color-global-background);border-radius:--spacing(1);cursor:pointer;outline:solid 2px var(--color-background-scale-e);overflow:clip;transition:color,background-color,outline-color,box-shadow;transition-duration:calc(var(--default-transition-duration)*2);width:100%}.input-control:where(:not(.input-group .input-control)):where(input[type=text],input[type=email],input[type=url],textarea),.input-group:where(input[type=text],input[type=email],input[type=url],textarea){cursor:text}.input-control:where(:not(.input-group .input-control)):where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))),.input-group:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)){cursor:default}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))))),.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))))){cursor:not-allowed;opacity:.6}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):focus-within,.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):hover,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):hover{outline-color:var(--color-global-foreground-accent)}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):focus-within{box-shadow:var(--shadow-heavy)}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):not(:has(>input[type=checkbox]),.input-button-bar):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):not(:has(>input[type=checkbox]),.input-button-bar):focus-within{background-color:var(--color-background-scale-b)}.input-group:where(:has(input[type=checkbox])),.input-group:where(:has(input[type=radio])){flex-shrink:0;height:1.5rem;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:1.5rem}.input-group:where(:has(input[type=checkbox])):has(input[type=radio]),.input-group:where(:has(input[type=radio])):has(input[type=radio]){border-radius:var(--radius-full);height:1.2rem;width:1.2rem}.input-group:where(:has(input[type=checkbox])):has(input[type=radio])>div,.input-group:where(:has(input[type=radio])):has(input[type=radio])>div{border-radius:var(--radius-full);height:.7rem;left:.25rem;position:absolute;top:.25rem;transition:box-shadow,background-color;transition-duration:var(--default-transition-duration);width:.7rem}.input-group:where(:has(input[type=checkbox])):has(input[type=radio]):has(:checked)>div,.input-group:where(:has(input[type=radio])):has(input[type=radio]):has(:checked)>div{background-color:var(--color-global-foreground);box-shadow:var(--shadow-md)}.input-group:where(:has(input[type=checkbox])) span[class^=i-],.input-group:where(:has(input[type=checkbox])) svg,.input-group:where(:has(input[type=radio])) span[class^=i-],.input-group:where(:has(input[type=radio])) svg{display:block!important;font-size:1rem;height:1rem!important;line-height:1;margin-left:.25rem;width:1rem!important}.input-group:where(:has(input[type=checkbox])) input,.input-group:where(:has(input[type=radio])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:100%;inset:0;opacity:0;position:absolute;z-index:10}.input-group:where(:has(input[type=checkbox])) input:not(:disabled,[readonly]),.input-group:where(:has(input[type=radio])) input:not(:disabled,[readonly]){cursor:pointer}.input-group:where(:has(input[type=checkbox])).toggle-switch,.input-group:where(:has(input[type=radio])).toggle-switch{border-radius:1rem;width:2.5rem}.input-group:where(:has(input[type=checkbox])).toggle-switch:has(:checked) .slider:before,.input-group:where(:has(input[type=radio])).toggle-switch:has(:checked) .slider:before{background-color:var(--color-global-foreground);transform:translateX(1rem)}.input-group:where(:has(input[type=checkbox])).toggle-switch .slider,.input-group:where(:has(input[type=radio])).toggle-switch .slider{border-radius:1rem;inset:0;position:absolute}.input-group:where(:has(input[type=checkbox])).toggle-switch .slider:before,.input-group:where(:has(input[type=radio])).toggle-switch .slider:before{background-color:var(--color-background-scale-d);border-radius:var(--radius-full);box-shadow:var(--shadow-md);content:"";height:1rem;left:.25rem;position:absolute;top:.25rem;transition:transform,background-color;transition-duration:var(--default-transition-duration);width:1rem}.input-menu .input-control,.input-menu .input-group{background-color:transparent}.input-menu .input-group:where(:has(input[type=checkbox])){height:1.2rem;width:1.2rem}.input-menu .input-group:where(:has(input[type=checkbox])) span[class^=i-],.input-menu .input-group:where(:has(input[type=checkbox])) svg{margin-left:.1rem;margin-top:-.1rem}[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):focus-within,[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):hover{outline-color:var(--color-background-scale-e)!important}[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):focus-within input,[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):hover input{cursor:not-allowed!important}.input-menu-header{align-items:center;display:flex;gap:--spacing(2)}.input-menu-header .input-menu-filter{align-items:center;color:var(--color-global-foreground-accent);display:flex;flex-grow:1;transition:color var(--default-transition-duration) var(--default-transition-timing-function)}.input-menu-header .input-menu-filter input{flex-grow:1;outline:none;padding:--spacing(.5) 0}.input-menu-header .input-menu-filter input::-moz-placeholder{color:var(--color-global-foreground-accent)}.input-menu-header .input-menu-filter input::placeholder{color:var(--color-global-foreground-accent)}.input-menu-header .input-menu-filter:focus-within{color:var(--color-global-foreground)}.input-button{cursor:pointer;padding:--spacing(1.5) --spacing(2);transition:background-color var(--default-transition-duration) var(--default-transition-timing-function)}.input-button[aria-pressed=true]{background-color:var(--color-background-scale-f)}.input-button:where(.readonly .input-button){cursor:default}.input-button:where(:disabled,.disabled .input-button):not(:where(.readonly .input-button)){cursor:not-allowed;opacity:.6}.input-button:not(:disabled,:where(.disabled .input-button),:where(.readonly .input-button),[aria-pressed=true]):focus-visible,.input-button:not(:disabled,:where(.disabled .input-button),:where(.readonly .input-button),[aria-pressed=true]):hover{background-color:var(--color-background-scale-b)}.input-button-bar{gap:--spacing(.5);padding:--spacing(.5);width:-moz-fit-content;width:fit-content}.input-button-bar button:first-child{border-bottom-left-radius:var(--radius-sm);border-top-left-radius:var(--radius-sm)}.input-button-bar button:last-child{border-bottom-right-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}}
+@layer components{.input-label{display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none}.input-label.required:after{color:var(--color-danger);content:"*";display:inline-block;margin-inline-start:--spacing(1)}.input-label.disabled{cursor:not-allowed;opacity:.6}.input-label:not(fieldset .input-label,.label-before .input-label,.label-after .input-label),.input-label:where(fieldset legend.input-label){font-size:var(--text-lg)}.input-label-pair{display:flex;flex-direction:column;gap:--spacing(1);margin-block-end:--spacing(1)}.input-label-pair.label-after,.input-label-pair.label-before{align-items:center;flex-direction:row;gap:--spacing(3)}.input-label-pair.label-after .input-label,.input-label-pair.label-below .input-label{order:2}.input-validation{color:var(--color-danger);font-size:var(--text-sm);height:0;line-clamp:2}.input-field{display:flex;flex-direction:column}.input-control{display:block;flex-grow:1;padding:--spacing(2) --spacing(3)}.input-control::-moz-placeholder{color:var(--color-global-foreground-accent)}.input-control .placeholder,.input-control::placeholder{color:var(--color-global-foreground-accent)}.input-group{align-items:center;display:flex}.input-group.input-group-loading{cursor:wait}.input-group .input-group-addon{color:var(--color-global-foreground-accent);padding:--spacing(1.5) --spacing(2)}.input-group button.input-group-addon{cursor:pointer}.input-group .input-control{outline:none}.input-control:where(:not(.input-group .input-control)),.input-group{background-color:var(--color-global-background);border-radius:--spacing(1);cursor:pointer;outline:solid 2px var(--color-background-scale-e);overflow:clip;transition:color,background-color,outline-color,box-shadow;transition-duration:calc(var(--default-transition-duration)*2);width:100%}.input-control:where(:not(.input-group .input-control)):where(input[type=text],input[type=email],input[type=url],textarea),.input-group:where(input[type=text],input[type=email],input[type=url],textarea){cursor:text}.input-control:where(:not(.input-group .input-control)):where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))),.input-group:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)){cursor:default}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))))),.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))))){cursor:not-allowed;opacity:.6}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):focus-within,.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):hover,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):hover{outline-color:var(--color-global-foreground-accent)}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):focus-within{box-shadow:var(--shadow-heavy)}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):not(:has(>input[type=checkbox]),.input-button-bar):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):not(:has(>input[type=checkbox]),.input-button-bar):focus-within{background-color:var(--color-background-scale-b)}.input-group:where(:has(input[type=checkbox])),.input-group:where(:has(input[type=radio])){flex-shrink:0;height:1.5rem;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:1.5rem}.input-group:where(:has(input[type=checkbox])):has(input[type=radio]),.input-group:where(:has(input[type=radio])):has(input[type=radio]){border-radius:var(--radius-full);height:1.2rem;width:1.2rem}.input-group:where(:has(input[type=checkbox])):has(input[type=radio])>div,.input-group:where(:has(input[type=radio])):has(input[type=radio])>div{border-radius:var(--radius-full);height:.7rem;left:.25rem;position:absolute;top:.25rem;transition:box-shadow,background-color;transition-duration:var(--default-transition-duration);width:.7rem}.input-group:where(:has(input[type=checkbox])):has(input[type=radio]):has(:checked)>div,.input-group:where(:has(input[type=radio])):has(input[type=radio]):has(:checked)>div{background-color:var(--color-global-foreground);box-shadow:var(--shadow-md)}.input-group:where(:has(input[type=checkbox])) span[class^=i-],.input-group:where(:has(input[type=checkbox])) svg,.input-group:where(:has(input[type=radio])) span[class^=i-],.input-group:where(:has(input[type=radio])) svg{display:block!important;font-size:1rem;height:1rem!important;line-height:1;margin-left:.25rem;width:1rem!important}.input-group:where(:has(input[type=checkbox])) input,.input-group:where(:has(input[type=radio])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:100%;inset:0;opacity:0;position:absolute;z-index:10}.input-group:where(:has(input[type=checkbox])) input:not(:disabled,[readonly]),.input-group:where(:has(input[type=radio])) input:not(:disabled,[readonly]){cursor:pointer}.input-group:where(:has(input[type=checkbox])).toggle-switch,.input-group:where(:has(input[type=radio])).toggle-switch{border-radius:1rem;width:2.5rem}.input-group:where(:has(input[type=checkbox])).toggle-switch:has(:checked) .slider:before,.input-group:where(:has(input[type=radio])).toggle-switch:has(:checked) .slider:before{background-color:var(--color-global-foreground);transform:translateX(1rem)}.input-group:where(:has(input[type=checkbox])).toggle-switch .slider,.input-group:where(:has(input[type=radio])).toggle-switch .slider{border-radius:1rem;inset:0;position:absolute}.input-group:where(:has(input[type=checkbox])).toggle-switch .slider:before,.input-group:where(:has(input[type=radio])).toggle-switch .slider:before{background-color:var(--color-background-scale-d);border-radius:var(--radius-full);box-shadow:var(--shadow-md);content:"";height:1rem;left:.25rem;position:absolute;top:.25rem;transition:transform,background-color;transition-duration:var(--default-transition-duration);width:1rem}.input-menu .input-control,.input-menu .input-group{background-color:transparent}.input-menu .input-group:where(:has(input[type=checkbox])){height:1.2rem;width:1.2rem}.input-menu .input-group:where(:has(input[type=checkbox])) span[class^=i-],.input-menu .input-group:where(:has(input[type=checkbox])) svg{margin-left:.1rem;margin-top:-.1rem}[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):focus-within,[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):hover{outline-color:var(--color-background-scale-e)!important}[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):focus-within input,[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):hover input{cursor:not-allowed!important}.input-menu-header{align-items:center;display:flex;gap:--spacing(2)}.input-menu-header .input-menu-filter{align-items:center;color:var(--color-global-foreground-accent);display:flex;flex-grow:1;transition:color var(--default-transition-duration) var(--default-transition-timing-function)}.input-menu-header .input-menu-filter input{flex-grow:1;outline:none;padding:--spacing(.5) 0}.input-menu-header .input-menu-filter input::-moz-placeholder{color:var(--color-global-foreground-accent)}.input-menu-header .input-menu-filter input::placeholder{color:var(--color-global-foreground-accent)}.input-menu-header .input-menu-filter:focus-within{color:var(--color-global-foreground)}.input-button{cursor:pointer;padding:--spacing(1.5) --spacing(2);transition:background-color var(--default-transition-duration) var(--default-transition-timing-function)}.input-button[aria-pressed=true]{background-color:var(--color-background-scale-f)}.input-button:where(.readonly .input-button){cursor:default}.input-button:where(:disabled,.disabled .input-button):not(:where(.readonly .input-button)){cursor:not-allowed;opacity:.6}.input-button:not(:disabled,:where(.disabled .input-button),:where(.readonly .input-button),[aria-pressed=true]):focus-visible,.input-button:not(:disabled,:where(.disabled .input-button),:where(.readonly .input-button),[aria-pressed=true]):hover{background-color:var(--color-background-scale-b)}.input-button-bar{gap:--spacing(.5);padding:--spacing(.5);width:-moz-fit-content;width:fit-content}.input-button-bar button:first-child{border-bottom-left-radius:var(--radius-sm);border-top-left-radius:var(--radius-sm)}.input-button-bar button:last-child{border-bottom-right-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}}

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

@@ -14,10 +14,21 @@ export interface FormInstance {
     isDisabled: Ref<boolean>;
 }
 /**
- * The event argument of a Form's `onsubmit` callback.
+ * The event argument of a Form's `onSubmit` callback.
  */
 export type FormSubmitEvent<T extends FormValues = FormValues> = PrimeFormSubmitEvent<T>;
 /**
- * The `onsubmit` callback method of a Form.
+ * The `onSubmit` callback method of a Form.
  */
 export type FormSubmitHandler<T extends FormValues = FormValues> = (event: FormSubmitEvent<T>) => void | Promise<void>;
+/**
+ * The event argument of a Form's `onChange` callback.
+ */
+export type FormChangeEvent<T extends FormValues = FormValues> = {
+    values: T | null;
+    valid: boolean;
+};
+/**
+ * The `onChange` callback method of a Form.
+ */
+export type FormChangeHandler<T extends FormValues = FormValues> = (event: FormChangeEvent<T>) => void | Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@resee-movies/nuxt-ux",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "The next-gen user experience library for ReSee Movies - currently in development. ",
   "repository": {
     "url": "https://github.com/ReSee-Movies/nuxt-ux.git"
@@ -36,7 +36,7 @@
   ],
   "scripts": {
     "dev": "npm run dev:prepare && nuxi dev playground --local --port 3003",
-    "dev:preview": "npm run dev:build && nuxi preview playground",
+    "dev:preview": "npm run dev:build && nuxi preview playground --port 3003",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "prepare": "nuxt-module-build prepare && nuxt-module-build build",
@@ -79,7 +79,7 @@
     "@primeuix/utils": "^0.6.1",
     "@primevue/forms": "^4.5.1",
     "@primevue/nuxt-module": "^4.5.1",
-    "@resee-movies/utilities": "^0.10.0",
+    "@resee-movies/utilities": "^0.11.0",
     "@tailwindcss/postcss": "^4.1.17",
     "@tailwindcss/vite": "^4.1.17",
     "@vueuse/core": "^14.1.0",