@resee-movies/nuxt-ux 0.4.1 → 0.5.0

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

@@ -0,0 +1,15 @@
+export interface FormValidationMessageProps {
+    id?: string;
+    visible?: boolean;
+    message?: string;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormValidationMessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormValidationMessageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,250 @@
+<template>
+  <Component
+    :is                 = "props.multiple ? PrimeMultiSelect : PrimeSelect"
+    :name               = "props.name"
+    :input-id           = "props.inputId"
+    :disabled           = "props.disabled || props.readonly"
+    :class              = "['input-group']"
+    :options            = "props.options"
+    :option-label       = "props.optionLabel"
+    :option-value       = "props.optionValue"
+    :option-disabled    = "props.optionDisabled"
+    :placeholder        = "props.placeholder"
+    :selection-limit    = "props.multiple ? props.selectionLimit : void 0"
+    :show-clear         = "props.showClear"
+    :show-toggle-all    = "showSelectAllCheckbox"
+    :filter             = "showFilter"
+    :filter-placeholder = "props.filterPlaceholder ?? locale.form.filterPlaceholder"
+    :loading            = "props.loading"
+    :pt                 = "props.multiple ? multiSelectPassthroughProps : selectPassthroughProps"
+    :append-to          = "TeleportId"
+  >
+    <template #value="{ value, placeholder }">
+      <template v-if="value">
+        {{ toLabel(value) }}
+      </template>
+
+      <span v-else class="placeholder">
+        {{ placeholder || "\u200B" }}
+      </span>
+    </template>
+
+    <template #loadingicon>
+      <ProgressSpinner />
+    </template>
+
+    <template #dropdownicon>
+      <Icon name="i-ph-caret-down-bold" />
+    </template>
+
+    <template #clearicon="{ clearCallback }">
+      <Button
+        severity         = "unset"
+        icon             = "i-ph-x"
+        class            = "input-group-addon"
+        @click           = "clearCallback"
+        :data-pc-section = "
+  'clearicon'
+  /* used internally by Primevue. No idea why they offer the slot like this. */
+"
+      />
+    </template>
+
+    <template #filtericon>
+      <Icon name="i-ph-magnifying-glass" />
+    </template>
+
+    <template #emptyfilter>
+      <span>{{ locale.form.filterNoResults }}</span>
+    </template>
+
+    <template #empty>
+      <span>{{ locale.form.noOptionsAvailable }}</span>
+    </template>
+  </Component>
+</template>
+
+<script>
+import {} from "primevue/select";
+</script>
+
+<script setup>
+import { equals, resolveFieldData } from "@primeuix/utils/object";
+import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
+import PrimeMultiSelect from "primevue/multiselect";
+import PrimeSelect from "primevue/select";
+import { computed } from "vue";
+import { useReseeUx } from "../../../composables/use-resee-ux";
+import { TeleportId } from "../../../constants";
+import { blockBodyScroll, unblockBodyScroll } from "../../../utils/dom";
+import { swapStringPlaceholders } from "../../../utils/string";
+import Button from "../../Button.vue";
+import Icon from "../../Icon.vue";
+import ProgressSpinner from "../../ProgressSpinner.vue";
+const props = defineProps({
+  inputId: { type: String, required: false },
+  labelId: { type: String, required: false },
+  multiple: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  showOptionFilter: { type: Boolean, required: false, default: void 0 },
+  ariaDescribedby: { type: String, required: false },
+  selectionLimit: { type: [String, Number], required: false, default: void 0 },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  name: { type: null, required: false },
+  options: { type: Array, required: false },
+  optionLabel: { type: [String, Function], required: false, skipCheck: true },
+  optionValue: { type: [String, Function], required: false, skipCheck: true },
+  optionDisabled: { type: [String, Function], required: false, skipCheck: true },
+  scrollHeight: { type: null, required: false },
+  filter: { type: Boolean, required: false, skipCheck: true },
+  filterPlaceholder: { type: null, required: false },
+  filterLocale: { type: null, required: false },
+  filterMatchMode: { type: null, required: false },
+  filterFields: { type: null, required: false },
+  editable: { type: Boolean, required: false, skipCheck: true },
+  placeholder: { type: null, required: false },
+  size: { type: null, required: false },
+  invalid: { type: Boolean, required: false, skipCheck: true },
+  disabled: { type: Boolean, required: false, skipCheck: true },
+  variant: { type: null, required: false },
+  dataKey: { type: null, required: false },
+  showClear: { type: Boolean, required: false, skipCheck: true, default: true },
+  fluid: { type: Boolean, required: false, skipCheck: true },
+  inputStyle: { type: null, required: false },
+  inputClass: { type: null, required: false },
+  labelStyle: { type: null, required: false },
+  labelClass: { type: null, required: false },
+  panelStyle: { type: null, required: false },
+  panelClass: { type: null, required: false },
+  overlayStyle: { type: null, required: false },
+  overlayClass: { type: null, required: false },
+  appendTo: { type: null, required: false },
+  loading: { type: Boolean, required: false, skipCheck: true },
+  clearIcon: { type: null, required: false },
+  dropdownIcon: { type: null, required: false },
+  filterIcon: { type: null, required: false },
+  loadingIcon: { type: null, required: false },
+  resetFilterOnHide: { type: Boolean, required: false },
+  resetFilterOnClear: { type: Boolean, required: false },
+  virtualScrollerOptions: { type: Object, required: false },
+  autoOptionFocus: { type: Boolean, required: false, skipCheck: true },
+  autoFilterFocus: { type: Boolean, required: false, skipCheck: true },
+  selectOnFocus: { type: Boolean, required: false, skipCheck: true },
+  focusOnHover: { type: Boolean, required: false, skipCheck: true },
+  highlightOnSelect: { type: Boolean, required: false, skipCheck: true },
+  checkmark: { type: Boolean, required: false, skipCheck: true },
+  filterMessage: { type: null, required: false },
+  selectionMessage: { type: null, required: false },
+  emptySelectionMessage: { type: null, required: false },
+  emptyFilterMessage: { type: null, required: false },
+  emptyMessage: { type: null, required: false },
+  tabindex: { type: null, required: false },
+  ariaLabel: { type: null, required: false },
+  ariaLabelledby: { type: null, required: false },
+  formControl: { type: null, required: false },
+  dt: { type: null, required: false },
+  pt: { type: null, required: false },
+  ptOptions: { type: Object, required: false },
+  unstyled: { type: Boolean, required: false }
+});
+const { locale } = useReseeUx();
+const isSmall = useBreakpoints(breakpointsTailwind).smallerOrEqual("sm");
+const showFilter = computed(() => {
+  return props.showOptionFilter ?? (props.options?.length ?? 0) > 20;
+});
+const showSelectAllCheckbox = computed(() => {
+  return props.multiple ? showFilter.value : void 0;
+});
+let unblockScroll = void 0;
+const sharedPassthroughProps = computed(() => {
+  return {
+    header: { class: "menu-prefix input-menu-header" },
+    overlay: { class: "menu input-menu" },
+    dropdown: { class: "input-group-addon" },
+    listContainer: { class: "menu-list" },
+    pcFilterContainer: { root: { class: "input-menu-filter" } },
+    pcFilterIconContainer: { root: { class: "input-group-addon" } },
+    emptyMessage: { "aria-disabled": "true" },
+    transition: {
+      name: isSmall.value ? "slide-in-bottom" : "fade",
+      onBeforeEnter() {
+        if (isSmall.value) {
+          unblockScroll = blockBodyScroll();
+        }
+      },
+      onAfterLeave() {
+        unblockScroll?.();
+        unblockScroll = void 0;
+      }
+    }
+  };
+});
+const selectPassthroughProps = computed(() => {
+  return {
+    ...sharedPassthroughProps.value,
+    label: {
+      "class": "input-control min-w-0 select-none truncate",
+      "aria-describedby": props.ariaDescribedby,
+      "aria-labelledby": props.labelId,
+      "aria-readonly": props.readonly
+    }
+  };
+});
+const multiSelectPassthroughProps = computed(() => {
+  return {
+    ...sharedPassthroughProps.value,
+    labelContainer: {
+      class: "input-control min-w-0"
+    },
+    label: {
+      class: "select-none truncate"
+    },
+    hiddenInput: {
+      "aria-describedby": props.ariaDescribedby,
+      "aria-labelledby": props.labelId,
+      "aria-readonly": props.readonly
+    },
+    pcHeaderCheckbox: {
+      root: {
+        class: "input-group"
+      },
+      input: {
+        "id": `${props.inputId}_select_all`,
+        "aria-label": locale.form.selectAllOptions
+      }
+    },
+    pcOptionCheckbox: {
+      root: {
+        class: "input-group"
+      }
+    }
+  };
+});
+function getOptionValue(option) {
+  return props.optionValue ? resolveFieldData(option, props.optionValue) : option;
+}
+function getOptionLabel(option) {
+  return props.optionLabel ? resolveFieldData(option, props.optionLabel) : option;
+}
+function findOptionByValue(value) {
+  return props.options?.find(
+    (option) => equals(getOptionValue(option), value, props.optionValue ? void 0 : props.dataKey)
+  );
+}
+function toLabel(value) {
+  if (!value) {
+    return void 0;
+  }
+  if (!Array.isArray(value)) {
+    return getOptionLabel(findOptionByValue(value));
+  }
+  if (value.length === 0) {
+    return void 0;
+  }
+  if (value.length === 1) {
+    return getOptionLabel(findOptionByValue(value[0]));
+  }
+  return swapStringPlaceholders(locale.form.numOptionsSelected, { count: value.length });
+}
+</script>

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

@@ -0,0 +1,13 @@
+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: import("vue").DefineComponent<FormElementSelectOptionsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormElementSelectOptionsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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,24 @@
+/**
+ * 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: {
+            filterPlaceholder: string;
+            filterNoResults: string;
+            noOptionsAvailable: string;
+            selectAllOptions: string;
+            numOptionsSelected: string;
+        };
+    };
+};

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

@@ -0,0 +1,22 @@
+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: {
+    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 @@
+@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)):has(input[readonly]:where(:not(.p-hidden-accessible input)),[aria-readonly=true]),.input-control:where(:not(.input-group .input-control)):is(input[readonly]),.input-group:has(input[readonly]:where(:not(.p-hidden-accessible input)),[aria-readonly=true]),.input-group:is(input[readonly]){cursor:default}.input-control:where(:not(.input-group .input-control)):not(:is(input[readonly]),:has(input[readonly]:where(:not(.p-hidden-accessible input)),[aria-readonly=true])):is(:disabled,:has(:disabled,[aria-disabled=true])),.input-group:not(:is(input[readonly]),:has(input[readonly]:where(:not(.p-hidden-accessible input)),[aria-readonly=true])):is(:disabled,:has(:disabled,[aria-disabled=true])){cursor:not-allowed;opacity:.6}.input-control:where(:not(.input-group .input-control)):not(:is(input[readonly]),:has(input[readonly]:where(:not(.p-hidden-accessible input)),[aria-readonly=true])):not(:disabled,:has(:disabled,[aria-disabled=true])):focus-within,.input-control:where(:not(.input-group .input-control)):not(:is(input[readonly]),:has(input[readonly]:where(:not(.p-hidden-accessible input)),[aria-readonly=true])):not(:disabled,:has(:disabled,[aria-disabled=true])):hover,.input-group:not(:is(input[readonly]),:has(input[readonly]:where(:not(.p-hidden-accessible input)),[aria-readonly=true])):not(:disabled,:has(:disabled,[aria-disabled=true])):focus-within,.input-group:not(:is(input[readonly]),:has(input[readonly]:where(:not(.p-hidden-accessible input)),[aria-readonly=true])):not(:disabled,:has(:disabled,[aria-disabled=true])):hover{outline-color:var(--color-global-foreground-accent)}.input-control:where(:not(.input-group .input-control)):not(:is(input[readonly]),:has(input[readonly]:where(:not(.p-hidden-accessible input)),[aria-readonly=true])):not(:disabled,:has(:disabled,[aria-disabled=true])):not(:has(>input[type=checkbox])):focus-within,.input-group:not(:is(input[readonly]),:has(input[readonly]:where(:not(.p-hidden-accessible input)),[aria-readonly=true])):not(:disabled,:has(:disabled,[aria-disabled=true])):not(:has(>input[type=checkbox])):focus-within{background-color:var(--color-background-scale-b);box-shadow:var(--shadow-heavy)}.input-group:where(:has(input[type=checkbox])){flex-shrink:0;height:1.5rem;position:relative;transform:translateY(-1px);-webkit-user-select:none;-moz-user-select:none;user-select:none;width:1.5rem}.input-group:where(:has(input[type=checkbox])) svg{font-size:1rem;height:1rem;line-height:1;margin-left:.25rem;width:1rem}.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])) svg{margin-left:.125rem}[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)}}

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]);
+}