@resee-movies/nuxt-ux 0.4.0 → 0.5.0

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

@@ -0,0 +1,39 @@
+<template>
+  <Button
+    v-bind               = "props"
+    type                 = "submit"
+    :loading             = "formState.isSubmitting.value"
+    icon-transition-name = "grow-x"
+  />
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import { injectFormInstance } from "../../utils/form";
+import Button from "../Button.vue";
+const props = defineProps({
+  is: { type: null, required: false },
+  severity: { type: String, required: false },
+  bordered: { type: Boolean, required: false, default: true },
+  responsive: { type: [Boolean, String], required: false },
+  variant: { type: String, required: false },
+  size: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  tooltip: { type: String, required: false },
+  disabledTooltip: { type: String, required: false },
+  type: { type: String, required: false },
+  text: { type: String, required: false, default: "Submit" },
+  icon: { type: String, required: false },
+  trailingIcon: { type: String, required: false },
+  iconSize: { type: String, required: false },
+  trailingIconSize: { type: String, required: false },
+  spacing: { type: String, required: false },
+  iconTransitionName: { type: String, required: false },
+  iconTransitionMode: { type: String, required: false },
+  iconTransitionOnAppear: { type: Boolean, required: false }
+});
+const formState = injectFormInstance();
+</script>

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

@@ -0,0 +1,6 @@
+import type { ButtonProps } from '../Button.vue.js';
+export interface FormSubmitButtonProps extends Omit<ButtonProps, 'onClick' | 'loading'> {
+}
+declare const __VLS_export: import("vue").DefineComponent<FormSubmitButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormSubmitButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,24 @@
+<template>
+  <div
+    :id         = "props.id"
+    aria-atomic = "true"
+    aria-live   = "polite"
+    :class      = "['input-validation', props.visible ? 'visible' : 'invisible']"
+  >
+    <slot name="default">
+      {{ props.message }}
+    </slot>
+  </div>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+const props = defineProps({
+  id: { type: String, required: false, default: void 0 },
+  visible: { type: Boolean, required: false, default: false },
+  message: { type: String, required: false, default: void 0 }
+});
+</script>

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-notification.d.ts

@@ -1,17 +1,24 @@
-export type NotificationOptions = {
+import type { ToastServiceMethods } from 'primevue/toastservice';
+import type { StatusLevel } from '../types/index.js';
+export interface NotificationOptions {
     headline?: string;
     closable?: boolean;
-};
-export type UseNotificationReturn = {
-    notify: (message: string, options?: NotificationOptions) => void;
-    notifyInfo: (message: string, options?: NotificationOptions) => void;
-    notifyHelp: (message: string, options?: NotificationOptions) => void;
-    notifySuccess: (message: string, options?: NotificationOptions) => void;
-    notifyWarning: (message: string, options?: NotificationOptions) => void;
-    notifyError: (message: string, options?: NotificationOptions) => void;
-};
+    icon?: string;
+    lifetime?: number;
+}
+export declare class NotificationService {
+    readonly notify: (message: string, options?: NotificationOptions & {
+        severity?: StatusLevel;
+    }) => void;
+    readonly notifyInfo: (message: string, options?: NotificationOptions) => void;
+    readonly notifyHelp: (message: string, options?: NotificationOptions) => void;
+    readonly notifySuccess: (message: string, options?: NotificationOptions) => void;
+    readonly notifyWarning: (message: string, options?: NotificationOptions) => void;
+    readonly notifyError: (message: string, options?: NotificationOptions) => void;
+    constructor(toast: ToastServiceMethods);
+}
 /**
  * Returns a collection of methods for providing user feedback via popup
  * notifications (a.k.a. toast notifications / snackbar notifications).
  */
-export declare function useNotification(): UseNotificationReturn;
+export declare function useNotification(): NotificationService;

package/dist/runtime/composables/use-notification.js

@@ -1,31 +1,31 @@
+import { isNumber } from "@resee-movies/utilities/numbers/is-number";
 import { useToast } from "primevue/usetoast";
-const DefaultLifetime = 5e3;
-function createToastMessageOptions(message, status, config) {
-  return {
-    detail: message,
-    severity: status,
-    summary: config?.headline,
-    closable: config?.closable === true,
-    life: config?.closable === true ? void 0 : DefaultLifetime
-  };
-}
-function createToastMessageClosure(toast, status) {
-  const fn = (message, options) => {
-    toast.add(createToastMessageOptions(message, status, options));
-  };
-  Object.defineProperty(fn, "name", {
-    value: `notify${status ?? ""}`
-  });
-  return fn;
+export class NotificationService {
+  notify;
+  notifyInfo;
+  notifyHelp;
+  notifySuccess;
+  notifyWarning;
+  notifyError;
+  constructor(toast) {
+    this.notify = (message, options) => {
+      toast.add({
+        detail: message,
+        severity: options?.severity,
+        summary: options?.headline,
+        closable: options?.closable === true,
+        life: isNumber(options?.lifetime) ? options?.lifetime : 5e3,
+        /* @ts-expect-error - adding custom props to extend functionality */
+        icon: options?.icon
+      });
+    };
+    this.notifyInfo = (message, options) => this.notify(message, { severity: "info", ...options });
+    this.notifyHelp = (message, options) => this.notify(message, { severity: "help", ...options });
+    this.notifySuccess = (message, options) => this.notify(message, { severity: "success", ...options });
+    this.notifyWarning = (message, options) => this.notify(message, { severity: "warn", ...options });
+    this.notifyError = (message, options) => this.notify(message, { severity: "error", ...options });
+  }
 }
 export function useNotification() {
-  const toast = useToast();
-  return {
-    notify: createToastMessageClosure(toast, void 0),
-    notifyInfo: createToastMessageClosure(toast, "info"),
-    notifyHelp: createToastMessageClosure(toast, "help"),
-    notifySuccess: createToastMessageClosure(toast, "success"),
-    notifyWarning: createToastMessageClosure(toast, "warn"),
-    notifyError: createToastMessageClosure(toast, "error")
-  };
+  return new NotificationService(useToast());
 }

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 {
+  }
+}