@resee-movies/nuxt-ux 0.4.0 → 0.5.0

package/dist/module.json

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

package/dist/module.mjs

@@ -122,17 +122,31 @@ function importModules(nuxt) {
   const componentPrefix = primeOptions?.componentPrefix ?? "Prime";
   const primeComponents = Array.from(
     /* @__PURE__ */ new Set([
+      "Checkbox",
       "Dialog",
       "Drawer",
+      "Form",
+      "FormField",
+      "InputText",
       "Message",
       "Menu",
+      "MultiSelect",
       "ProgressBar",
       "ProgressSpinner",
+      "Select",
       "Tag",
       "Toast",
+      "ToggleSwitch",
       ...primeOptions?.includeComponents ?? []
     ])
   );
+  nuxt.options.vite.optimizeDeps ??= {};
+  nuxt.options.vite.optimizeDeps.include ??= [];
+  nuxt.options.vite.optimizeDeps.include.push(
+    "primevue/usetoast",
+    "primevue/toasteventbus",
+    "primevue/toastservice"
+  );
   const Primevue = {
     defaults: {
       autoImport: false,
@@ -195,7 +209,7 @@ async function importTailwind(nuxt = useNuxt()) {
   }
 }
 
-const module = defineNuxtModule({
+const module$1 = defineNuxtModule({
   defaults: {
     componentPrefix: "Ui"
   },
@@ -214,7 +228,10 @@ const module = defineNuxtModule({
     const sources = options.tailwind?.sources?.slice() ?? [];
     const plugins = options.tailwind?.plugins?.slice() ?? [];
     const imports = options.tailwind?.plugins?.slice() ?? [];
-    sources.push(components);
+    const constants = await resolver.resolvePath("./runtime/constants", {
+      extensions: ["ts", "js"]
+    });
+    sources.push(components, constants);
     plugins.push(await resolvePath("@egoist/tailwindcss-icons"));
     imports.push(stylesheet);
     addComponentsDir({ path: components, prefix: options.componentPrefix });
@@ -245,4 +262,4 @@ const module = defineNuxtModule({
   }
 });
 
-export { module as default };
+export { module$1 as default };

package/dist/runtime/components/Button.vue

@@ -3,6 +3,7 @@
     :is         = "props.is"
     :aria-label = "shrink ? props.text : void 0"
     :disabled   = "props.disabled"
+    :type       = "props.type"
     :class      = "[
   props.severity === 'unset' ? void 0 : props.variant,
   {
@@ -20,13 +21,15 @@
     @click              = "handleButtonClick"
   >
     <IconTextPair
-      :text          = "props.text"
-      :icon          = "props.icon"
-      :icon-size     = "props.iconSize ?? props.size"
-      :trailing-icon = "props.trailingIcon"
-      :layout        = "props.layout"
-      :spacing       = "props.spacing ?? (props.layout === 'column' ? void 0 : 'wide')"
-      :loading       = "showLoading"
+      :text                      = "props.text"
+      :icon                      = "props.icon"
+      :icon-size                 = "props.iconSize ?? props.size"
+      :trailing-icon             = "props.trailingIcon"
+      :spacing                   = "props.spacing ?? (iconOnly ? 'none' : 'wide')"
+      :loading                   = "showLoading"
+      :icon-transition-name      = "props.iconTransitionName"
+      :icon-transition-mode      = "props.iconTransitionMode"
+      :icon-transition-on-appear = "props.iconTransitionOnAppear"
     >
       <slot />
     </IconTextPair>
@@ -55,13 +58,16 @@ const props = defineProps({
   tooltip: { type: String, required: false, default: void 0 },
   disabledTooltip: { type: String, required: false, default: void 0 },
   onClick: { type: [Function, Array], required: false },
+  type: { type: String, required: false, default: "button" },
   text: { type: String, required: false },
   icon: { type: String, required: false },
   trailingIcon: { type: String, required: false },
   iconSize: { type: String, required: false },
   trailingIconSize: { type: String, required: false },
-  layout: { type: String, required: false },
-  spacing: { 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 slots = useSlots();
 const shrink = computed(

package/dist/runtime/components/Button.vue.d.ts

@@ -25,23 +25,13 @@ export interface ButtonProps extends IconTextPairProps {
     tooltip?: string;
     disabledTooltip?: string;
     onClick?: ((evt: Event) => void | Promise<void>) | ((evt: Event) => void | Promise<void>)[];
+    type?: 'button' | 'submit' | 'reset';
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     click: (evt: Event) => any;
 }, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{
     onClick?: ((evt: Event) => any) | undefined;
-}>, {
-    size: "sm" | "lg";
-    loading: boolean;
-    is: string | Component;
-    severity: StyleStatusLevel | "unset";
-    bordered: boolean;
-    responsive: boolean | "grow" | "shrink";
-    variant: "btn" | "a";
-    disabled: boolean;
-    tooltip: string;
-    disabledTooltip: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Card.vue.d.ts

@@ -2,10 +2,7 @@ export interface CardProps {
     is?: string;
     interactive?: boolean;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {
-    is: string;
-    interactive: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 } & {
     image?: (props: {}) => any;

package/dist/runtime/components/Dialog.vue.d.ts

@@ -9,19 +9,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Dialog
     "update:visible": (visible: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<DialogProps> & Readonly<{
     "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
-}>, {
-    size: "xxs" | "xs" | "sm" | "md" | "lg";
-    showHeaderText: boolean;
-    showHeaderStyle: boolean;
-    showModalStyle: boolean;
-    modal: boolean;
-    contentClass: any;
-    closable: boolean;
-    dismissableMask: boolean;
-    showHeader: boolean;
-    position: import("@primevue/core").HintedString<"top" | "center" | "bottom" | "left" | "right" | "topleft" | "topright" | "bottomleft" | "bottomright">;
-    draggable: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     title?: (props: {}) => any;
 } & {
     default?: (props: {}) => any;

package/dist/runtime/components/Drawer.vue.d.ts

@@ -6,10 +6,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Drawer
     "update:visible": (visible: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<DrawerProps> & Readonly<{
     "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
-}>, {
-    showHeaderText: boolean;
-    blockScroll: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     title?: (props: {}) => any;
 } & {
     default?: (props: {}) => any;

package/dist/runtime/components/Heading.vue.d.ts

@@ -2,10 +2,7 @@ export interface HeadingProps {
     text?: string | null;
     level?: '1' | '2' | '3' | '4' | '5' | '6' | 1 | 2 | 3 | 4 | 5 | 6;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<HeadingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeadingProps> & Readonly<{}>, {
-    text: string | null;
-    level: "1" | "2" | "3" | "4" | "5" | "6" | 1 | 2 | 3 | 4 | 5 | 6;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<HeadingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeadingProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Icon.vue

@@ -1,17 +1,25 @@
 <template>
-  <Transition name="fade" mode="out-in">
-    <ProgressSpinner
-      v-if  = "props.loading"
-      :size = "props.size"
-      class = "icon"
-    />
+  <Transition
+    :name   = "props.transitionName"
+    :mode   = "props.transitionMode"
+    :appear = "props.transitionOnAppear"
+  >
+    <span
+      v-if   = "props.loading"
+      v-bind = "$attrs"
+      class  = "icon"
+    >
+      <ProgressSpinner :size="props.size" />
+    </span>
 
     <span
-      v-else
-      v-bind = "attrs"
-      role   = "presentation"
-      :class = "['icon', props.name, props.size, { 'color-cycle': props.colorCycle }]"
-    />
+      v-else-if = "props.name"
+      v-bind    = "$attrs"
+      role      = "presentation"
+      :class    = "['icon', props.size]"
+    >
+      <span :class="[props.name, { 'color-cycle': props.colorCycle }]" />
+    </span>
   </Transition>
 </template>
 
@@ -20,14 +28,18 @@
 </script>
 
 <script setup>
-import { useAttrs } from "vue";
 import ProgressSpinner from "./ProgressSpinner.vue";
-const attrs = useAttrs();
+defineOptions({
+  inheritAttrs: false
+});
 const props = defineProps({
   name: { type: String, required: false, default: void 0 },
   loading: { type: Boolean, required: false, default: false },
-  size: { type: String, required: false, default: "md" },
-  colorCycle: { type: Boolean, required: false, default: false }
+  size: { type: String, required: false, default: void 0 },
+  colorCycle: { type: Boolean, required: false, default: false },
+  transitionName: { type: String, required: false, default: "fade" },
+  transitionMode: { type: String, required: false, default: "out-in" },
+  transitionOnAppear: { type: Boolean, required: false, default: false }
 });
 </script>
 

package/dist/runtime/components/Icon.vue.d.ts

@@ -3,12 +3,10 @@ export interface IconProps {
     loading?: boolean;
     size?: 'sm' | 'md' | 'lg' | 'xl';
     colorCycle?: boolean;
+    transitionName?: string;
+    transitionMode?: 'out-in' | 'in-out';
+    transitionOnAppear?: boolean;
 }
-declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {
-    size: "sm" | "md" | "lg" | "xl";
-    name: string;
-    loading: boolean;
-    colorCycle: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/IconTextPair.vue

@@ -1,16 +1,13 @@
 <template>
-  <span
-    :class="[
-  'pair',
-  props.layout ? `layout-${props.layout}` : void 0,
-  props.spacing ? `spacing-${props.spacing}` : void 0
-]"
-  >
+  <span :class="['pair', props.spacing ? `spacing-${props.spacing}` : void 0]">
     <Icon
-      v-if     = "props.icon || props.loading"
-      :name    = "props.icon"
-      :size    = "props.iconSize"
-      :loading = "props.loading"
+      class                 = "leading-icon"
+      :name                 = "props.icon"
+      :size                 = "props.iconSize"
+      :loading              = "props.loading"
+      :transition-name      = "props.iconTransitionName"
+      :transition-mode      = "props.iconTransitionMode"
+      :transition-on-appear = "props.iconTransitionOnAppear"
     />
 
     <span v-if="props.text || slots.default" class="label">
@@ -20,9 +17,13 @@
     </span>
 
     <Icon
-      v-if  = "props.trailingIcon"
-      :name = "props.trailingIcon"
-      :size = "props.iconSize"
+      v-if                  = "props.trailingIcon"
+      class                 = "trailing-icon"
+      :name                 = "props.trailingIcon"
+      :size                 = "props.iconSize"
+      :transition-name      = "props.iconTransitionName"
+      :transition-mode      = "props.iconTransitionMode"
+      :transition-on-appear = "props.iconTransitionOnAppear"
     />
   </span>
 </template>
@@ -37,15 +38,17 @@ const props = defineProps({
   text: { type: String, required: false, default: void 0 },
   icon: { type: String, required: false, default: void 0 },
   trailingIcon: { type: String, required: false, default: void 0 },
-  iconSize: { type: String, required: false, default: "md" },
-  trailingIconSize: { type: String, required: false, default: "md" },
-  layout: { type: String, required: false, default: void 0 },
+  iconSize: { type: String, required: false, default: void 0 },
+  trailingIconSize: { type: String, required: false, default: void 0 },
   spacing: { type: String, required: false, default: void 0 },
-  loading: { type: Boolean, required: false, default: false }
+  loading: { type: Boolean, required: false, default: false },
+  iconTransitionName: { type: String, required: false, default: void 0 },
+  iconTransitionMode: { type: String, required: false, default: void 0 },
+  iconTransitionOnAppear: { type: Boolean, required: false, default: false }
 });
 const slots = useSlots();
 </script>
 
 <style scoped>
-@reference "tailwindcss";.pair{align-items:baseline;display:inline-flex;gap:--spacing(1)}.pair.spacing-wide{gap:--spacing(2)}.pair.layout-row{display:flex}.pair.layout-column{align-items:center;flex-direction:column}
+@reference "tailwindcss";.pair{--element-spacing:--spacing(1);align-items:baseline;display:inline}.pair.spacing-none{--element-spacing:0}.pair.spacing-wide{--element-spacing:--spacing(2)}.pair :deep(.leading-icon)>*{margin-inline-end:var(--element-spacing)}.pair :deep(.trailing-icon)>*{margin-inline-start:var(--element-spacing)}@variant max-md{.pair:is(.responsive-shrink .pair) :deep(.leading-icon)>*{margin-inline-end:0}.pair:is(.responsive-shrink .pair) :deep(.trailing-icon)>*{margin-inline-start:0}}
 </style>

package/dist/runtime/components/IconTextPair.vue.d.ts

@@ -5,20 +5,13 @@ export interface IconTextPairProps {
     trailingIcon?: string;
     iconSize?: IconProps['size'];
     trailingIconSize?: IconProps['size'];
-    layout?: 'column' | 'row';
-    spacing?: 'wide' | 'normal';
+    spacing?: 'wide' | 'normal' | 'none';
     loading?: boolean;
+    iconTransitionName?: IconProps['transitionName'];
+    iconTransitionMode?: IconProps['transitionMode'];
+    iconTransitionOnAppear?: IconProps['transitionOnAppear'];
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<IconTextPairProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconTextPairProps> & Readonly<{}>, {
-    loading: boolean;
-    icon: string;
-    text: string;
-    trailingIcon: string;
-    iconSize: "sm" | "md" | "lg" | "xl";
-    trailingIconSize: "sm" | "md" | "lg" | "xl";
-    layout: "column" | "row";
-    spacing: "wide" | "normal";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<IconTextPairProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconTextPairProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Image.vue

@@ -145,5 +145,5 @@ const altText = computed(() => {
 </script>
 
 <style scoped>
-@reference "tailwindcss";.image{background-color:#fff;overflow:clip;position:relative;width:-moz-fit-content;width:fit-content;@variant dark{background-color:#000}}.image.bordered{border:2px solid var(--color-global-background-accent)}.image.beveled{border-bottom-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl)}.image.raised{box-shadow:var(--shadow-heavy)}.image.glass:after{background-image:linear-gradient(110deg,transparent 25%,hsla(0,0%,100%,.15) 80%,transparent);content:var(--zero-width-space);inset:0;position:absolute}.image .icon{color:var(--color-global-background-accent);left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}
+@reference "tailwindcss";.image{background-color:#fff;max-width:-moz-fit-content;max-width:fit-content;overflow:clip;position:relative;width:100%;@variant dark{background-color:#000}}.image.bordered{border:2px solid var(--color-global-background-accent)}.image.beveled{border-bottom-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl)}.image.raised{box-shadow:var(--shadow-heavy)}.image.glass:after{background-image:linear-gradient(110deg,transparent 25%,hsla(0,0%,100%,.15) 80%,transparent);content:var(--zero-width-space);inset:0;position:absolute}.image .icon{color:var(--color-global-background-accent);left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}
 </style>

package/dist/runtime/components/Image.vue.d.ts

@@ -38,22 +38,6 @@ export declare const ObjectFitClassNames: {
     readonly contain: "object-contain";
     readonly inside: "object-contain";
 };
-declare const __VLS_export: import("vue").DefineComponent<ImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageProps> & Readonly<{}>, {
-    type: LoadImageType;
-    loading: "lazy" | "eager";
-    iconSize: "sm" | "md" | "lg" | "xl";
-    bordered: boolean;
-    showLoading: boolean;
-    fit: "cover" | "contain" | "inside" | "outside";
-    width: TmdbImageSize | string | number;
-    height: string | number;
-    alt: string | null | ((error: unknown) => string);
-    aspect: AspectRatio | "auto";
-    defaultIcon: string;
-    glassy: boolean;
-    beveled: boolean;
-    raised: boolean;
-    overlayClasses: string | HTMLElementClassNames[] | Record<string, boolean> | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<ImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/LayoutPageColumn.vue.d.ts

@@ -2,10 +2,7 @@ export interface LayoutPageColumn {
     is?: string;
     layout?: 'main' | 'vista';
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LayoutPageColumn, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LayoutPageColumn> & Readonly<{}>, {
-    layout: "main" | "vista";
-    is: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LayoutPageColumn, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LayoutPageColumn> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/LayoutPageContainer.vue

@@ -3,7 +3,13 @@
     :is    = "props.is"
     :class = "['page-container', props.glassEffect ? 'glass-effect' : void 0]"
   >
-    <slot />
+    <div v-if="props.headingText || slots.heading" class="mb-6">
+      <slot name="heading">
+        <Heading :text="props.headingText" />
+      </slot>
+    </div>
+
+    <slot name="default" />
   </Component>
 </template>
 
@@ -12,10 +18,14 @@
 </script>
 
 <script setup>
+import { useSlots } from "vue";
+import Heading from "./Heading.vue";
+const slots = useSlots();
 const props = defineProps({
   is: { type: String, required: false, default: "div" },
   glassEffect: { type: Boolean, required: false, default: false },
-  accentColor: { type: String, required: false, default: void 0 }
+  accentColor: { type: String, required: false, default: void 0 },
+  headingText: { type: String, required: false, default: void 0 }
 });
 </script>
 

package/dist/runtime/components/LayoutPageContainer.vue.d.ts

@@ -3,12 +3,11 @@ export interface LayoutPageContainerProps {
     is?: HintedString<'div' | 'main' | 'section' | 'article' | 'nav'>;
     glassEffect?: boolean;
     accentColor?: string;
+    headingText?: string;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LayoutPageContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LayoutPageContainerProps> & Readonly<{}>, {
-    is: HintedString<"div" | "main" | "section" | "article" | "nav">;
-    glassEffect: boolean;
-    accentColor: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LayoutPageContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LayoutPageContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    heading?: (props: {}) => any;
+} & {
     default?: (props: {}) => any;
 }>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Lorem.vue.d.ts

@@ -9,16 +9,6 @@ export interface LoremProps {
     minWordCount?: string | number;
     maxWordCount?: string | number;
 }
-declare const __VLS_export: import("vue").DefineComponent<LoremProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoremProps> & Readonly<{}>, {
-    type: "words" | "sentences" | "paragraphs";
-    min: string | number;
-    max: string | number;
-    minParagraphCount: string | number;
-    maxParagraphCount: string | number;
-    minSentenceCount: string | number;
-    maxSentenceCount: string | number;
-    minWordCount: string | number;
-    maxWordCount: string | number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<LoremProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoremProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Menu.vue

@@ -7,15 +7,14 @@
   />
 
   <PrimeMenu
-    ref    = "menu"
-    v-bind = "attrs"
-    :model = "props.model"
-    :popup = "true"
-    :id    = "menuId"
-    class  = "menu"
-    :pt    = "passthroughProps"
-    @show  = "visible = true"
-    @hide  = "visible = false"
+    ref        = "menu"
+    v-bind     = "attrs"
+    :model     = "props.model"
+    :popup     = "true"
+    :id        = "menuId"
+    class      = "menu"
+    :pt        = "passthroughProps"
+    :append-to = "TeleportId"
   >
     <template v-if="slots.prefix || props.prefixText" #start>
       <slot name="prefix">
@@ -54,9 +53,12 @@
 
 <script setup>
 import { isString } from "@resee-movies/utilities/strings/is-string";
+import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
 import PrimeMenu, {} from "primevue/menu";
 import { computed, ref, useAttrs, useId, useSlots } from "vue";
+import { blockBodyScroll } from "../utils/dom";
 import IconTextPair from "./IconTextPair.vue";
+import { TeleportId } from "../constants";
 defineOptions({
   inheritAttrs: false
 });
@@ -65,6 +67,7 @@ const slots = useSlots();
 const menuId = useId();
 const menu = ref();
 const visible = ref(false);
+const isSmall = useBreakpoints(breakpointsTailwind).smallerOrEqual("sm");
 const props = defineProps({
   model: { type: Array, required: true },
   prefixText: { type: String, required: false, default: void 0 },
@@ -75,21 +78,26 @@ defineExpose({
   expanded: () => visible.value,
   menuId
 });
+let unblockScroll = void 0;
 const passthroughProps = computed(() => {
   return {
-    start: {
-      class: "menu-prefix"
-    },
-    end: {
-      class: "menu-suffix"
-    },
+    start: { class: "menu-prefix" },
+    end: { class: "menu-suffix" },
+    list: { class: "menu-list" },
     transition: {
-      name: "fade"
+      name: isSmall.value ? "slide-in-bottom" : "fade",
+      onBeforeEnter() {
+        visible.value = true;
+        if (isSmall.value) {
+          unblockScroll = blockBodyScroll();
+        }
+      },
+      onAfterLeave() {
+        visible.value = false;
+        unblockScroll?.();
+        unblockScroll = void 0;
+      }
     }
   };
 });
 </script>
-
-<style>
-@reference "tailwindcss";.menu{background-color:var(--color-global-background);border:1px solid var(--color-global-background-accent);border-radius:var(--radius-md);box-shadow:var(--shadow-heavy);margin-block:--spacing(1);max-width:--spacing(80);padding:--spacing(1)}.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)}.menu li[role=menuitem],.menu li[role=none]{-webkit-user-select:none;-moz-user-select:none;user-select:none}.menu li[role=menuitem]{border-radius:var(--radius-md);cursor:pointer;transition:background-color;transition-duration:var(--default-transition-duration)}.menu li[role=menuitem]>:only-child:not(:has(>a:only-child)){padding:--spacing(1) --spacing(2)}.menu li[role=menuitem]>:only-child:has(>a:only-child)>a{display:block;padding:--spacing(1) --spacing(2)}.menu li[role=menuitem][aria-disabled=true]{color:var(--color-global-foreground-accent);cursor:not-allowed}.menu li[role=menuitem][data-p-focused=true]:not([aria-disabled=true]),.menu ul:not(:focus) li[role=menuitem]: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}
-</style>

package/dist/runtime/components/Menu.vue.d.ts

@@ -20,14 +20,11 @@ export interface MenuExposes {
     menuId: string;
     expanded: ComputedGetter<boolean>;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MenuProps, MenuExposes, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MenuProps> & Readonly<{}>, {
-    prefixText: string;
-    suffixText: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MenuProps, MenuExposes, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MenuProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     control?: (props: {
-        toggle: (event: Event) => void | undefined;
-        menuId: string;
-        expanded: boolean;
+        toggle: (event: Event) => any;
+        menuId: any;
+        expanded: any;
     }) => any;
 } & {
     prefix?: (props: {}) => any;

package/dist/runtime/components/Message.vue.d.ts

@@ -1,7 +1,7 @@
-import type { StatusLevel } from '../types/index.js';
+import type { StyleStatusLevel } from '../types/index.js';
 import type { IconProps } from './Icon.vue.js';
 export interface MessageProps {
-    severity?: StatusLevel;
+    severity?: StyleStatusLevel;
     text?: string;
     class?: string;
     style?: string;

package/dist/runtime/components/NotificationContainer.vue

@@ -7,6 +7,7 @@
 </template>
 
 <script setup>
+import { isString } from "@resee-movies/utilities/strings/is-string";
 import PrimeToast, {} from "primevue/toast";
 import { StatusLevelIcons } from "../constants";
 const passthroughProps = {
@@ -19,9 +20,15 @@ const passthroughProps = {
       props.message?.summary?.trim() ? "has-summary" : void 0
     ]
   }),
-  messageIcon: ({ props }) => ({
-    class: ["icon", StatusLevelIcons[props.message?.severity ?? "default"]]
-  }),
+  messageIcon: ({ props }) => {
+    let iconClassName = StatusLevelIcons[props.message?.severity ?? "default"];
+    if (props.message && "icon" in props.message && isString(props.message.icon)) {
+      iconClassName = props.message.icon;
+    }
+    return {
+      class: ["icon", iconClassName]
+    };
+  },
   root: { class: "notification-container" },
   messageContent: { class: "content" },
   messageText: { class: "text" },