@resee-movies/nuxt-ux 0.4.1 → 0.6.0

package/dist/runtime/components/form/element/FormElementSelectOptions.vue.d.ts

@@ -0,0 +1,24 @@
+import { type SelectProps as PrimeSelectProps } from 'primevue/select';
+export interface FormElementSelectOptionsProps extends Omit<PrimeSelectProps, 'inputId' | 'labelId' | 'optionGroupLabel' | 'optionGroupChildren'> {
+    inputId?: string;
+    labelId?: string;
+    multiple?: boolean;
+    readonly?: boolean;
+    showOptionFilter?: boolean;
+    ariaDescribedby?: string;
+    selectionLimit?: string | number;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormElementSelectOptionsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormElementSelectOptionsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    option?: (props: {
+        option: any;
+        selected: any;
+        index: any;
+    }) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/composables/use-load-image.js

@@ -52,6 +52,7 @@ export function useLoadImage(source, config = {}) {
             src.value = sourceUnwrapped;
           }
         }
+        loading.value = true;
         key.value = sourceUnwrapped;
         return;
       }

package/dist/runtime/composables/use-resee-ux.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Provides the ability to manage runtime configuration of the ReSee UX
+ * module.
+ */
+export declare function useReseeUx(): {
+    locale: {
+        validation: {
+            required: string;
+            invalidEmail: string;
+            invalidUrl: string;
+            tooFewChars: string;
+            tooManyChars: string;
+            tooFewOptions: string;
+            tooManyOptions: string;
+        };
+        form: {
+            submitButtonLabel: string;
+            filterPlaceholder: string;
+            filterNoResults: string;
+            noOptionsAvailable: string;
+            selectAllOptions: string;
+            numOptionsSelected: string;
+        };
+    };
+};

package/dist/runtime/composables/use-resee-ux.js

@@ -0,0 +1,23 @@
+import { reactive } from "vue";
+const Localization = reactive({
+  validation: {
+    required: "Required",
+    invalidEmail: "A valid email address is required",
+    invalidUrl: "A valid URL (https://...) is required",
+    tooFewChars: "Must have at least {count} character(s)",
+    tooManyChars: "Cannot have more than {count} character(s)",
+    tooFewOptions: "Must select at least {count} option(s)",
+    tooManyOptions: "Cannot select more than {count} option(s)"
+  },
+  form: {
+    submitButtonLabel: "Submit",
+    filterPlaceholder: "Search",
+    filterNoResults: "No Results Found",
+    noOptionsAvailable: "No Options Available",
+    selectAllOptions: "Select All",
+    numOptionsSelected: "{count} Item(s) Selected"
+  }
+});
+export function useReseeUx() {
+  return { locale: Localization };
+}

package/dist/runtime/constants.d.ts

@@ -4,3 +4,6 @@ import type { HintedString, StyleStatusLevel } from './types/index.js';
  * the application.
  */
 export declare const StatusLevelIcons: Record<HintedString<StyleStatusLevel>, string>;
+export declare const TeleportId = "#resee-ux-teleport";
+export declare const OverflowHiddenClass = "p-overflow-hidden";
+export declare const ScrollbarWidthPropName = "--p-scrollbar-width";

package/dist/runtime/constants.js

@@ -7,3 +7,6 @@ export const StatusLevelIcons = {
   default: "i-ph-info",
   inverted: "i-ph-info"
 };
+export const TeleportId = "#resee-ux-teleport";
+export const OverflowHiddenClass = "p-overflow-hidden";
+export const ScrollbarWidthPropName = "--p-scrollbar-width";

package/dist/runtime/server/plugins/teleport-targets.d.ts

@@ -0,0 +1,3 @@
+import type { NitroAppPlugin } from 'nitropack';
+declare const _default: NitroAppPlugin;
+export default _default;

package/dist/runtime/server/plugins/teleport-targets.js

@@ -0,0 +1,6 @@
+import { TeleportId } from "../../constants.js";
+export default (function(nitroApp) {
+  nitroApp.hooks.hook("render:html", (html) => {
+    html.body.push(`<div id="${TeleportId.replace("#", "")}" />`);
+  });
+});

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

@@ -0,0 +1,3 @@
+@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-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:0 --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(.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])){flex-shrink:0;height:1.5rem;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:1.5rem}
+
+    /* !important is to overwrite what gets attached to i-* icons in the utility layer */.input-group:where(:has(input[type=checkbox])) span[class^=i-],.input-group:where(:has(input[type=checkbox])) 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{-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]){cursor:pointer}.input-group:where(:has(input[type=checkbox])).toggle-switch{border-radius:1rem;width:2.5rem}.input-group:where(:has(input[type=checkbox])).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{border-radius:1rem;inset:0;position:absolute}.input-group:where(:has(input[type=checkbox])).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-bar{gap:--spacing(.5);padding:--spacing(.5);width:-moz-fit-content;width:fit-content}.input-button-bar button{cursor:pointer;padding:--spacing(1.5) --spacing(2);transition:background-color var(--default-transition-duration) var(--default-transition-timing-function)}.input-button-bar button[aria-pressed=true]{background-color:var(--color-background-scale-f)}.input-button-bar button:where(.readonly button){cursor:default}.input-button-bar button:disabled:not(:where(.readonly button)){cursor:not-allowed;opacity:.6}.input-button-bar button:not(:disabled,:where(.readonly button),[aria-pressed=true]):focus-visible,.input-button-bar button:not(:disabled,:where(.readonly button),[aria-pressed=true]):hover{background-color:var(--color-background-scale-b)}.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/theme/css/brand/menu.css

@@ -0,0 +1 @@
+@layer components{.menu{background-color:var(--color-background-scale-a);border:1px solid var(--color-global-background-accent);border-radius:var(--radius-md);box-shadow:var(--shadow-heavy);display:flex;flex-direction:column;margin-block:--spacing(1);max-width:--spacing(80);padding:--spacing(1)}.menu .menu-list{max-height:14rem;overflow-y:auto;@apply styled-scroll}.menu li[role=separator]{border-bottom:1px solid var(--color-global-background-accent);margin-block:--spacing(1)}.menu li[role=none]{font-weight:var(--font-weight-semibold);padding:--spacing(1) --spacing(2);-webkit-user-select:none;-moz-user-select:none;user-select:none}.menu li[role=menuitem],.menu li[role=option]{border-radius:var(--radius-md);cursor:pointer;transition:background-color;transition-duration:var(--default-transition-duration);-webkit-user-select:none;-moz-user-select:none;user-select:none}.menu li[role=menuitem]>:only-child:not(:has(>a:only-child)),.menu li[role=option]>:only-child:not(:has(>a:only-child)){display:block;padding:--spacing(1) --spacing(2)}.menu li[role=menuitem]>:only-child:has(>a:only-child)>a,.menu li[role=option]>:only-child:has(>a:only-child)>a{display:block;padding:--spacing(1) --spacing(2)}.menu li[role=menuitem]:has(>:nth-child(2)),.menu li[role=option]:has(>:nth-child(2)){align-items:center;display:flex;gap:--spacing(2);padding:--spacing(1) --spacing(2)}.menu li[role=menuitem][aria-disabled=true],.menu li[role=option][aria-disabled=true]{color:var(--color-global-foreground-accent);cursor:not-allowed}.menu li:is([role=menuitem],[role=option])[data-p-focused=true]:not([aria-disabled=true]),.menu ul:not(:focus) li:is([role=menuitem],[role=option]):not([aria-disabled=true]):hover{background-color:var(--color-background-scale-c)}.menu .menu-prefix{border-bottom:1px solid var(--color-global-background-accent);margin-bottom:--spacing(1);padding:0 --spacing(2) --spacing(1)}.menu .menu-suffix{border-top:1px solid var(--color-global-background-accent);margin-top:--spacing(1);padding:--spacing(1) --spacing(2) 0}}

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

@@ -0,0 +1 @@
+@layer utilities{#resee-ux-teleport:has(:first-child:not(script,link)){@variant max-sm{inset:0;position:fixed;z-index:1100;@apply occlude-background}}@variant max-sm{.menu{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-width:0;border-left-width:0;border-right-width:0;bottom:0;box-shadow:var(--shadow-heavy-top);font-size:var(--text-lg);inset-inline-start:0!important;left:0;margin-block:0;margin-top:0!important;max-height:70vh;max-width:unset;min-width:0!important;right:0;top:unset!important}.menu .menu-list{max-height:unset!important}}}

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

@@ -1 +1 @@
-@layer base{.fade-enter-active,.fade-leave-active,.grow-x-enter-active,.grow-x-leave-active,.grow-y-enter-active,.grow-y-leave-active{transition:opacity;transition-duration:calc(var(--default-transition-duration)*2);transition-timing-function:var(--default-transition-timing-function)}.fade-enter-from,.fade-leave-to,.grow-x-enter-from,.grow-x-leave-to,.grow-y-enter-from,.grow-y-leave-to{opacity:0}@supports (interpolate-size:allow-keywords){.grow-y-enter-active,.grow-y-leave-active{interpolate-size:allow-keywords;height:-moz-max-content;height:max-content;overflow-y:clip;transition:opacity,height;transition-duration:calc(var(--default-transition-duration)*2);transition-timing-function:var(--default-transition-timing-function)}.grow-y-enter-from,.grow-y-leave-to{height:0}.grow-x-enter-active,.grow-x-leave-active{interpolate-size:allow-keywords;overflow-x:clip;transition:opacity,width;transition-duration:calc(var(--default-transition-duration)*2);transition-timing-function:var(--default-transition-timing-function);width:auto}.grow-x-enter-from,.grow-x-leave-to{width:0}}.slide-in-bottom-enter-active,.slide-in-bottom-leave-active,.slide-in-left-enter-active,.slide-in-left-leave-active,.slide-in-right-enter-active,.slide-in-right-leave-active,.slide-in-top-enter-active,.slide-in-top-leave-active{transition-duration:calc(var(--default-transition-duration)*3);transition-property:transform;transition-timing-function:var(--default-transition-timing-function)}.slide-in-left-enter-from,.slide-in-left-leave-to{transform:translateX(-100%)}.slide-in-right-enter-from,.slide-in-right-leave-to{transform:translateX(100%)}.slide-in-top-enter-from,.slide-in-top-leave-to{transform:translateY(-100%)}.slide-in-bottom-enter-from,.slide-in-bottom-leave-to{transform:translateY(100%)}.scale-enter-active,.scale-leave-active{transition-duration:calc(var(--default-transition-duration)*2);transition-property:opacity,transform;transition-timing-function:var(--default-transition-timing-function)}.scale-enter-from,.scale-leave-to{opacity:0;transform:scale(.85)}}
+@layer base{:root{--fade-transition-duration:calc(var(--default-transition-duration)*2);--grow-transition-duration:calc(var(--default-transition-duration)*2);--slide-transition-duration:calc(var(--default-transition-duration)*3);--scale-transition-duration:calc(var(--default-transition-duration)*2)}.fade-enter-active,.fade-leave-active,.grow-x-enter-active,.grow-x-leave-active,.grow-y-enter-active,.grow-y-leave-active{transition:opacity;transition-duration:var(--fade-transition-duration);transition-timing-function:var(--default-transition-timing-function)}.fade-enter-from,.fade-leave-to,.grow-x-enter-from,.grow-x-leave-to,.grow-y-enter-from,.grow-y-leave-to{opacity:0}@supports (interpolate-size:allow-keywords){.grow-y-enter-active,.grow-y-leave-active{interpolate-size:allow-keywords;height:-moz-max-content;height:max-content;overflow-y:clip;transition:opacity,height;transition-duration:var(--grow-transition-duration);transition-timing-function:var(--default-transition-timing-function)}.grow-y-enter-from,.grow-y-leave-to{height:0!important}.grow-x-enter-active,.grow-x-leave-active{interpolate-size:allow-keywords;overflow-x:clip;transition:opacity,width;transition-duration:var(--grow-transition-duration);transition-timing-function:var(--default-transition-timing-function);width:-moz-fit-content;width:fit-content}.grow-x-enter-from,.grow-x-leave-to{width:0!important}}.slide-in-bottom-enter-active,.slide-in-bottom-leave-active,.slide-in-left-enter-active,.slide-in-left-leave-active,.slide-in-right-enter-active,.slide-in-right-leave-active,.slide-in-top-enter-active,.slide-in-top-leave-active{transition-duration:var(--slide-transition-duration);transition-property:transform;transition-timing-function:var(--default-transition-timing-function)}.slide-in-left-enter-from,.slide-in-left-leave-to{transform:translateX(-100%)}.slide-in-right-enter-from,.slide-in-right-leave-to{transform:translateX(100%)}.slide-in-top-enter-from,.slide-in-top-leave-to{transform:translateY(-100%)}.slide-in-bottom-enter-from,.slide-in-bottom-leave-to{transform:translateY(100%)}.scale-enter-active,.scale-leave-active{transition-duration:var(--scale-transition-duration);transition-property:opacity,transform;transition-timing-function:var(--default-transition-timing-function)}.scale-enter-from,.scale-leave-to{opacity:0;transform:scale(.85)}}

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

@@ -1 +1 @@
-@utility content-zero-width{content:var(--zero-width-space)}@utility occlude-background{backdrop-filter:blur(var(--blur-xs));background-color:--alpha(var(--color-black)/60%);transition-duration:calc(var(--default-transition-duration)*3);transition-property:background-color,backdrop-filter;&:has(>[class*=-enter-from],>[class*=-leave-active],>[class*=-leave-to]){backdrop-filter:blur(0);background-color:transparent}}
+@utility content-zero-width{content:var(--zero-width-space)}@utility occlude-background{backdrop-filter:blur(var(--blur-xs));background-color:--alpha(var(--color-black)/60%);transition-duration:calc(var(--default-transition-duration)*3);transition-property:background-color,backdrop-filter;&:has(>[class*=-enter-from],>[class*=-leave-active],>[class*=-leave-to]){backdrop-filter:blur(0);background-color:transparent}}@utility styled-scroll{scrollbar-color:color-mix(in srgb-linear,transparent 75%,var(--color-global-foreground-accent)) transparent;scrollbar-width:thin;transition:scrollbar-color .4s ease-out;&:focus-visible,&:focus-within,&:hover{scrollbar-color:var(--color-global-foreground-accent) transparent;transition-delay:0s}}

package/dist/runtime/theme/css/styles.css

@@ -1 +1 @@
-@import "./brand/anchor.css";@import "./brand/application.css";@import "./brand/button.css";@import "./brand/gradient.css";@import "./brand/status.css";@import "./brand/theme.css";@import "./brand/tooltip.css";@import "./brand/transition.css";@import "./brand/typography.css";@import "./brand/utilities.css";
+@import "./brand/anchor.css";@import "./brand/application.css";@import "./brand/button.css";@import "./brand/form.css";@import "./brand/gradient.css";@import "./brand/menu.css";@import "./brand/mobile.css";@import "./brand/status.css";@import "./brand/theme.css";@import "./brand/tooltip.css";@import "./brand/transition.css";@import "./brand/typography.css";@import "./brand/utilities.css";

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

@@ -0,0 +1,23 @@
+import type { FormSubmitEvent as PrimeFormSubmitEvent } from '@primevue/forms/form';
+import type { Ref } from 'vue';
+/**
+ * An object which carries the current values of a form's input fields.
+ */
+export type FormValues = Record<string, any>;
+/**
+ * The object provided by a form, conveying stateful information, that can be
+ * injected into descendent components.
+ */
+export interface FormInstance {
+    hasSubmitted: Ref<boolean>;
+    isSubmitting: Ref<boolean>;
+    isDisabled: Ref<boolean>;
+}
+/**
+ * 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.
+ */
+export type FormSubmitHandler<T extends FormValues = FormValues> = (event: FormSubmitEvent<T>) => void | Promise<void>;

package/dist/runtime/utils/dom.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Blocks the body from being able to scroll in the same way that Primevue does
+ * internally, but with the added functionality of returning the method that can
+ * be used to perform the unblock. If the body has already been scroll-blocked by
+ * something else (say, this is being trigger by a menu that is being used inside
+ * a drawer), then the returned method is a noop.
+ */
+export declare function blockBodyScroll(): () => void;
+export declare function unblockBodyScroll(): void;

package/dist/runtime/utils/dom.js

@@ -0,0 +1,25 @@
+import { blockBodyScroll as block, unblockBodyScroll as unblock } from "@primeuix/utils/dom";
+import { OverflowHiddenClass, ScrollbarWidthPropName } from "../constants.js";
+export function blockBodyScroll() {
+  try {
+    if (!document.body.classList.contains(OverflowHiddenClass)) {
+      block({
+        className: OverflowHiddenClass,
+        variableName: ScrollbarWidthPropName
+      });
+      return () => unblockBodyScroll();
+    }
+  } catch {
+  }
+  return () => {
+  };
+}
+export function unblockBodyScroll() {
+  try {
+    unblock({
+      className: OverflowHiddenClass,
+      variableName: ScrollbarWidthPropName
+    });
+  } catch {
+  }
+}

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

@@ -0,0 +1,34 @@
+import type { FormFieldState } from '@primevue/forms';
+import { type InjectionKey } from 'vue';
+import type { FormInstance, FormValues } from '../types/form.js';
+/**
+ * The injection key for acquiring a {@link FormInstance} object within the
+ * descendant component of a Form. Consider using {@link injectFormInstance}
+ * instead.
+ */
+export declare const FormSymbol: InjectionKey<FormInstance>;
+/**
+ * Helper method to create a new stateful object for a Form. You shouldn't ever
+ * need to use this directly.
+ *
+ * @private
+ */
+export declare function createFormInstance(): FormInstance;
+/**
+ * Provides the object that a Form uses to convey stateful information to the
+ * DI registry. You shouldn't ever need to use this directly.
+ *
+ * @private
+ */
+export declare function provideFormInstance(): FormInstance;
+/**
+ * Injects the stateful object provided by an ancestor Form instance. If not
+ * available, a dummy state object is generated.
+ */
+export declare function injectFormInstance(): FormInstance;
+/**
+ * Takes a Primevue Form's `states` object, and extracts the current values
+ * of each named property. In doing so, it will deref proxies, and create
+ * shallow clones of any arrays/objects it encounters.
+ */
+export declare function getValuesFromFormState<T extends FormValues = FormValues>(state: Record<string, FormFieldState>): T;

package/dist/runtime/utils/form.js

@@ -0,0 +1,34 @@
+import { isObjectLike } from "@resee-movies/utilities/objects/is-object-like";
+import { inject, provide, ref, toRaw, toValue } from "vue";
+export const FormSymbol = Symbol("form");
+export function createFormInstance() {
+  return {
+    hasSubmitted: ref(false),
+    isSubmitting: ref(false),
+    isDisabled: ref(false)
+  };
+}
+export function provideFormInstance() {
+  const instance = createFormInstance();
+  provide(FormSymbol, instance);
+  return instance;
+}
+export function injectFormInstance() {
+  return inject(FormSymbol, () => createFormInstance(), true);
+}
+export function getValuesFromFormState(state) {
+  const result = {};
+  for (const [key, value] of Object.entries(state)) {
+    const rawValue = toRaw(toValue(value.value));
+    let processed;
+    if (Array.isArray(rawValue)) {
+      processed = Array.from(rawValue);
+    } else if (isObjectLike(rawValue)) {
+      processed = { ...rawValue };
+    } else {
+      processed = rawValue;
+    }
+    Object.defineProperty(result, key, { value: processed, enumerable: true });
+  }
+  return result;
+}

package/dist/runtime/utils/string.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Takes a string and replaces all substrings which match the form `{PROPERTY}`,
+ * where "PROPERTY" is a key of the provided `placeholders` object, with the value
+ * at that key.
+ */
+export declare function swapStringPlaceholders(target: string, placeholders?: Record<string, unknown>): string;

package/dist/runtime/utils/string.js

@@ -0,0 +1,3 @@
+export function swapStringPlaceholders(target, placeholders) {
+  return placeholders ? target.replace(/\{\s*(\w+?)\s*}/g, (_, token) => String(placeholders[token] || "")) : target;
+}

package/dist/runtime/utils/validation.d.ts

@@ -0,0 +1,21 @@
+import * as z from 'zod/mini';
+export declare function toValidationError(str: string, placeholders?: Record<string, string | number>): {
+    error: string;
+};
+export type BooleanInputRequirements = {
+    required?: boolean;
+};
+export declare function createBooleanValidator(requirements: BooleanInputRequirements): z.ZodMiniBoolean<unknown> | undefined;
+export type TextInputRequirements = {
+    required?: boolean;
+    type?: 'text' | 'email' | 'url';
+    minLength?: string | number;
+    maxLength?: string | number;
+};
+export declare function createTextValidator(requirements: TextInputRequirements): z.ZodMiniString<string> | z.ZodMiniUnion<readonly [z.ZodMiniNull, z.ZodMiniString<string>]>;
+export type ListInputRequirements = {
+    required?: boolean;
+    minRequired?: string | number;
+    maxRequired?: string | number;
+};
+export declare function createListValidator(requirements: ListInputRequirements): z.ZodMiniArray<z.ZodMiniUnknown> | z.ZodMiniUnion<readonly [z.ZodMiniNull, z.ZodMiniArray<z.ZodMiniUnknown>]>;

package/dist/runtime/utils/validation.js

@@ -0,0 +1,56 @@
+import { toInteger } from "@resee-movies/utilities/numbers/to-integer";
+import * as z from "zod/mini";
+import { useReseeUx } from "../composables/use-resee-ux.js";
+import { swapStringPlaceholders } from "./string.js";
+export function toValidationError(str, placeholders) {
+  return { error: swapStringPlaceholders(str, placeholders) };
+}
+export function createBooleanValidator(requirements) {
+  const { locale } = useReseeUx();
+  return requirements.required ? z.coerce.boolean().check(z.refine((val) => val === true, toValidationError(locale.validation.required))) : void 0;
+}
+export function createTextValidator(requirements) {
+  const { locale } = useReseeUx();
+  const checkFns = [];
+  if (requirements.required) {
+    checkFns.push(z.minLength(1, toValidationError(locale.validation.required)));
+  }
+  if (requirements.type === "email") {
+    checkFns.push(z.email(toValidationError(locale.validation.invalidEmail)));
+  } else if (requirements.type === "url") {
+    checkFns.push(z.url(toValidationError(locale.validation.invalidUrl)));
+  } else {
+    const minLength = toInteger(requirements.minLength);
+    const maxLength = toInteger(requirements.maxLength);
+    if (minLength) {
+      checkFns.push(
+        z.minLength(minLength, toValidationError(locale.validation.tooFewChars, { count: minLength }))
+      );
+    }
+    if (maxLength) {
+      checkFns.push(
+        z.maxLength(maxLength, toValidationError(locale.validation.tooManyChars, { count: maxLength }))
+      );
+    }
+  }
+  const stringSchema = z.string(toValidationError(locale.validation.required)).check(z.trim(), ...checkFns);
+  return requirements.required ? stringSchema : z.union([z.null(), stringSchema]);
+}
+export function createListValidator(requirements) {
+  const { locale } = useReseeUx();
+  const checkFns = [];
+  const minRequired = toInteger(requirements.minRequired) || (requirements.required ? 1 : void 0);
+  const maxRequired = toInteger(requirements.maxRequired);
+  if (minRequired) {
+    checkFns.push(
+      z.minLength(minRequired, toValidationError(locale.validation.tooFewOptions, { count: minRequired }))
+    );
+  }
+  if (maxRequired) {
+    checkFns.push(
+      z.maxLength(maxRequired, toValidationError(locale.validation.tooManyOptions, { count: maxRequired }))
+    );
+  }
+  const arraySchema = z.array(z.unknown(), toValidationError(locale.validation.required)).check(...checkFns);
+  return requirements.required ? arraySchema : z.union([z.null(), arraySchema]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@resee-movies/nuxt-ux",
-  "version": "0.4.1",
+  "version": "0.6.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,8 +36,8 @@
   ],
   "scripts": {
     "dev": "npm run dev:prepare && nuxi dev playground",
+    "dev:preview": "npm run dev:build && nuxi preview playground",
     "dev:build": "nuxi build playground",
-    "dev:preview": "nuxi preview playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "prepare": "nuxt-module-build prepare && nuxt-module-build build",
     "release": "dotenv release-it --",
@@ -48,40 +48,42 @@
     "test:coverage": "vitest run --coverage"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^2.6.5",
-    "@nuxt/eslint": "^1.9.0",
-    "@nuxt/eslint-config": "^1.9.0",
+    "@nuxt/devtools": "^3.1.1",
+    "@nuxt/eslint": "^1.11.0",
+    "@nuxt/eslint-config": "^1.11.0",
     "@nuxt/kit": "^4.1.3",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "^4.1.3",
-    "@nuxt/test-utils": "^3.19.2",
-    "@release-it/conventional-changelog": "^10.0.1",
-    "@types/node": "^22.18.8",
+    "@nuxt/test-utils": "^3.20.1",
+    "@release-it/conventional-changelog": "^10.0.2",
+    "@types/node": "^24.10.1",
     "@vitest/coverage-v8": "^3.2.4",
-    "@vue/language-server": "^3.1.0",
     "@vue/test-utils": "^2.4.6",
-    "dotenv-cli": "^10.0.0",
-    "eslint": "^9.36.0",
-    "happy-dom": "^18.0.1",
-    "nuxt": "^4.1.2",
-    "release-it": "^19.0.5",
+    "dotenv-cli": "^11.0.0",
+    "eslint": "^9.39.1",
+    "happy-dom": "^20.0.11",
+    "nuxt": "^4.2.1",
+    "release-it": "^19.0.6",
     "typescript": "^5.9.3",
+    "vite-plugin-devtools-json": "^1.0.0",
     "vitest": "^3.2.4",
-    "vue-tsc": "^3.1.0"
+    "vue-tsc": "^3.1.5"
   },
   "dependencies": {
     "@egoist/tailwindcss-icons": "^1.9.0",
     "@iconify-json/ph": "^1.2.2",
-    "@iconify-json/simple-icons": "^1.2.53",
-    "@iconify-json/solar": "^1.2.4",
-    "@nuxt/fonts": "^0.11.4",
+    "@iconify-json/simple-icons": "^1.2.61",
+    "@iconify-json/solar": "^1.2.5",
+    "@nuxt/fonts": "^0.12.1",
     "@primeuix/utils": "^0.6.1",
-    "@primevue/nuxt-module": "^4.4.0",
+    "@primevue/forms": "^4.5.1",
+    "@primevue/nuxt-module": "^4.5.1",
     "@resee-movies/utilities": "^0.10.0",
-    "@tailwindcss/postcss": "^4.1.14",
-    "@tailwindcss/vite": "^4.1.14",
-    "@vueuse/core": "^13.9.0",
-    "primevue": "^4.4.0",
-    "tailwindcss": "^4.1.14"
+    "@tailwindcss/postcss": "^4.1.17",
+    "@tailwindcss/vite": "^4.1.17",
+    "@vueuse/core": "^14.1.0",
+    "primevue": "^4.5.1",
+    "tailwindcss": "^4.1.17",
+    "zod": "^4.1.13"
   }
 }