@resee-movies/nuxt-ux 0.2.3 → 0.2.4

package/dist/module.json

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

package/dist/module.mjs

@@ -140,7 +140,13 @@ function importModules(nuxt) {
         from: "#resee-movies-nuxt-ux-primevue-passthrough"
       },
       options: {
-        unstyled: true
+        unstyled: true,
+        zIndex: {
+          overlay: 800,
+          modal: 850,
+          menu: 900,
+          tooltip: 1e3
+        }
       },
       composables: {
         include: ["usePrimeVue", "useToast"]

package/dist/runtime/components/Dialog.vue

@@ -10,7 +10,7 @@
     :footer           = "props.footer"
     :dismissable-mask = "props.dismissableMask"
     :position         = "props.position"
-    :class            = "['dialog', dialogWidth]"
+    :class            = "['dialog', dialogWidth, { 'dialog-styles': props.showModalStyle }]"
     :content-class    = "props.contentClass"
     :pt               = "passthroughProps"
     :aria-labelledby  = "dialogLabelledBy"
@@ -45,6 +45,8 @@ import CloseButton from "./CloseButton.vue";
 const props = defineProps({
   size: { type: String, required: false, default: "md" },
   showHeaderText: { type: Boolean, required: false, default: true },
+  showHeaderStyle: { type: Boolean, required: false, default: true },
+  showModalStyle: { type: Boolean, required: false, default: true },
   header: { type: null, required: false },
   footer: { type: null, required: false },
   visible: { type: Boolean, required: false, skipCheck: true },
@@ -100,9 +102,9 @@ const dialogLabelledBy = computed(() => {
 });
 const passthroughProps = computed(() => {
   return {
-    header: {
-      class: "header"
-    },
+    header: () => ({
+      class: ["header", { "header-styles": props.showHeaderStyle }]
+    }),
     content: {
       class: "content"
     },
@@ -117,5 +119,5 @@ const passthroughProps = computed(() => {
 </script>
 
 <style>
-@reference "tailwindcss";.dialog{background-color:var(--color-global-background);border:1px solid var(--color-global-background-accent);border-radius:var(--radius-md);height:calc(100% - --spacing(4));margin:--spacing(2);overflow:clip;width:100%;@variant sm{box-shadow:var(--shadow-heavy);height:auto}}.dialog .header{align-items:center;border-bottom:1px solid var(--color-global-background-accent);display:flex;gap:--spacing(3);margin-inline:--spacing(3);margin-top:--spacing(3);padding-bottom:--spacing(3)}.dialog .header .title{flex-grow:1;font-size:var(--text-lg)}.dialog .content{overflow-y:auto;padding:--spacing(3)}
+@reference "tailwindcss";.dialog{margin:--spacing(2);width:100%}.dialog .header{align-items:center;display:flex;gap:--spacing(3);padding-bottom:--spacing(3)}.dialog .header .title{flex-grow:1;font-size:var(--text-lg)}.dialog .content{overflow-y:auto}.dialog.dialog-styles{background-color:var(--color-global-background);border:1px solid var(--color-global-background-accent);border-radius:var(--radius-md);height:calc(100% - --spacing(4));overflow:clip;@variant sm{box-shadow:var(--shadow-heavy);height:auto}}.dialog.dialog-styles .header{margin-inline:--spacing(3);margin-top:--spacing(3)}.dialog.dialog-styles .header.header-styles{border-bottom:1px solid var(--color-global-background-accent)}.dialog.dialog-styles .content{padding:--spacing(3)}
 </style>

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

@@ -2,6 +2,8 @@ import type { DialogProps as PrimeDialogProps } from 'primevue';
 export interface DialogProps extends PrimeDialogProps {
     size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
     showHeaderText?: boolean;
+    showHeaderStyle?: boolean;
+    showModalStyle?: boolean;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:visible": (visible: boolean) => any;
@@ -10,6 +12,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Dialog
 }>, {
     size: "xxs" | "xs" | "sm" | "md" | "lg";
     showHeaderText: boolean;
+    showHeaderStyle: boolean;
+    showModalStyle: boolean;
     modal: boolean;
     contentClass: any;
     closable: boolean;

package/dist/runtime/components/Icon.vue

@@ -1,6 +1,6 @@
 <template>
   <Transition name="fade" mode="out-in">
-    <LoadingIndicator v-if="props.loading" :size="props.size" class="icon" />
+    <ProgressSpinner v-if="props.loading" :size="props.size" class="icon" />
     <span v-else role="presentation" :class="['icon', props.name, props.size, { 'color-cycle': props.colorCycle }]" />
   </Transition>
 </template>
@@ -10,7 +10,7 @@
 </script>
 
 <script setup>
-import LoadingIndicator from "./LoadingIndicator.vue";
+import ProgressSpinner from "./ProgressSpinner.vue";
 const props = defineProps({
   name: { type: String, required: false, default: void 0 },
   loading: { type: Boolean, required: false, default: false },

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

@@ -0,0 +1,9 @@
+import type { IconProps } from './Icon.vue.js';
+export interface ProgressSpinnerProps {
+    size?: IconProps['size'];
+}
+declare const __VLS_export: import("vue").DefineComponent<ProgressSpinnerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressSpinnerProps> & Readonly<{}>, {
+    size: "sm" | "md" | "lg" | "xl";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1 +1 @@
-@layer components{@property --a-underline-mask-stop{syntax:"<percentage>";inherits:false;initial-value:0%}.a,.a.default{--a-underline-mask-stop:0%;--default-underline:var(--color-background-scale-g);--default-underline-emphasis:var(--colorscale-resee-linear);--default-color:currentColor;--default-color-emphasis:currentColor;--accent-underline-base:var(--custom-accent-color,var(--default-underline));--accent-underline-mixed:color-mix(in srgb-linear,var(--accent-underline-base) 15%,var(--default-underline));--accent-underline-emphasis:var(--custom-accent-color,var(--default-underline-emphasis));--accent-color-base:var(--custom-accent-color,var(--default-color));--accent-color-mixed:color-mix(in srgb-linear,var(--accent-color-base) 30%,var(--default-color));--accent-color-emphasis-base:var(--custom-accent-color,var(--default-color-emphasis));--accent-color-emphasis-mixed:color-mix(in srgb-linear,var(--accent-color-emphasis-base) 60%,var(--default-color-emphasis));@variant dark{--default-underline-emphasis:var(--colorscale-resee-lite-linear)}background-image:linear-gradient(to right,var(--accent-underline-mixed),var(--accent-underline-mixed)),linear-gradient(to right,var(--accent-underline-emphasis),var(--accent-underline-emphasis));background-position:100% 100%,0 100%;background-repeat:no-repeat;background-size:100% 1px,100% 1px;-webkit-box-decoration-break:slice;box-decoration-break:slice;color:var(--accent-color-mixed);font-weight:var(--font-weight-semibold);transition:color,background-size,--a-underline-mask-stop;transition-duration:.3s;transition-timing-function:ease-out}.a.default.small,.a.small{font-size:.875rem;line-height:1.25rem}.a.default:focus-visible,.a:focus-visible{outline:none}.a.default:not(:disabled,.disabled,[aria-disabled=true]):focus,.a.default:not(:disabled,.disabled,[aria-disabled=true]):hover,.a:not(:disabled,.disabled,[aria-disabled=true]):focus,.a:not(:disabled,.disabled,[aria-disabled=true]):hover{--a-underline-mask-stop:100%;background-size:0 1px,100% 1px;color:var(--accent-color-emphasis-mixed)}.a.default.no-underline,.a.no-underline{font-weight:var(--font-weight-medium);-webkit-mask-image:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#fff 0 var(--a-underline-mask-stop),transparent var(--a-underline-mask-stop) 100%);mask-image:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#fff 0 var(--a-underline-mask-stop),transparent var(--a-underline-mask-stop) 100%);-webkit-mask-position:top left,bottom left;mask-position:top left,bottom left;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% calc(100% - 1px),100% 1px;mask-size:100% calc(100% - 1px),100% 1px}}
+@layer components{@property --a-underline-mask-stop{syntax:"<percentage>";inherits:false;initial-value:0%}.a,.a.default,.prose a,.prose-container a{--a-underline-mask-stop:0%;--default-underline:var(--color-background-scale-g);--default-underline-emphasis:var(--colorscale-resee-linear);--default-color:currentColor;--default-color-emphasis:currentColor;--accent-underline-base:var(--custom-accent-color,var(--default-underline));--accent-underline-mixed:color-mix(in srgb-linear,var(--accent-underline-base) 15%,var(--default-underline));--accent-underline-emphasis:var(--custom-accent-color,var(--default-underline-emphasis));--accent-color-base:var(--custom-accent-color,var(--default-color));--accent-color-mixed:color-mix(in srgb-linear,var(--accent-color-base) 30%,var(--default-color));--accent-color-emphasis-base:var(--custom-accent-color,var(--default-color-emphasis));--accent-color-emphasis-mixed:color-mix(in srgb-linear,var(--accent-color-emphasis-base) 60%,var(--default-color-emphasis));@variant dark{--default-underline-emphasis:var(--colorscale-resee-lite-linear)}background-image:linear-gradient(to right,var(--accent-underline-mixed),var(--accent-underline-mixed)),linear-gradient(to right,var(--accent-underline-emphasis),var(--accent-underline-emphasis));background-position:100% 100%,0 100%;background-repeat:no-repeat;background-size:100% 1px,100% 1px;-webkit-box-decoration-break:slice;box-decoration-break:slice;color:var(--accent-color-mixed);font-weight:var(--font-weight-semibold);transition:color,background-size,--a-underline-mask-stop;transition-duration:.3s;transition-timing-function:ease-out}.a.default.small,.a.small,.prose a.small,.prose-container a.small{font-size:.875rem;line-height:1.25rem}.a.default:focus-visible,.a:focus-visible,.prose a:focus-visible,.prose-container a:focus-visible{outline:none}.a.default:not(:disabled,.disabled,[aria-disabled=true]):focus,.a.default:not(:disabled,.disabled,[aria-disabled=true]):hover,.a:not(:disabled,.disabled,[aria-disabled=true]):focus,.a:not(:disabled,.disabled,[aria-disabled=true]):hover,.prose a:not(:disabled,.disabled,[aria-disabled=true]):focus,.prose a:not(:disabled,.disabled,[aria-disabled=true]):hover,.prose-container a:not(:disabled,.disabled,[aria-disabled=true]):focus,.prose-container a:not(:disabled,.disabled,[aria-disabled=true]):hover{--a-underline-mask-stop:100%;background-size:0 1px,100% 1px;color:var(--accent-color-emphasis-mixed)}.a.default.no-underline,.a.no-underline,.prose a.no-underline,.prose-container a.no-underline{font-weight:var(--font-weight-medium);-webkit-mask-image:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#fff 0 var(--a-underline-mask-stop),transparent var(--a-underline-mask-stop) 100%);mask-image:linear-gradient(to right,#fff,#fff),linear-gradient(to right,#fff 0 var(--a-underline-mask-stop),transparent var(--a-underline-mask-stop) 100%);-webkit-mask-position:top left,bottom left;mask-position:top left,bottom left;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% calc(100% - 1px),100% 1px;mask-size:100% calc(100% - 1px),100% 1px}}

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

@@ -1 +1 @@
-@layer components{@property --btn-background-color{syntax:"<color>";inherits:false;initial-value:transparent}.btn,.btn.default{--btn-border-width:2px;--btn-background-color:var(--color-background-scale-a);--btn-background-focus-color:var(--color-background-scale-c);--btn-border-color:var(--color-background-scale-g);--btn-bg-image-background-layer:linear-gradient(to right,var(--btn-background-color),var(--btn-background-color));--btn-bg-image-border-layer:linear-gradient(to right,var(--btn-border-color),var(--btn-border-color));--btn-bg-image-color-layer:linear-gradient(to right,var(--colorscale-resee-linear));--btn-background-image:var(--btn-bg-image-background-layer),var(--btn-bg-image-border-layer),var(--btn-bg-image-color-layer);@variant dark{--btn-bg-image-color-layer:linear-gradient(to right,var(--colorscale-resee-lite-linear))}}.btn.default.icon-only,.btn.icon-only{--btn-bg-image-color-layer:conic-gradient(from 0deg,var(--colorscale-resee-conic));@variant dark{--btn-bg-image-color-layer:conic-gradient(from 0deg,var(--colorscale-resee-lite-conic))}}.btn{background-clip:padding-box,border-box,border-box;background-image:var(--btn-background-image);background-origin:border-box;background-position:100% 100%;background-repeat:no-repeat;background-size:100%,100% 100%,100%;border:solid var(--btn-border-width) var(--btn-border-color);border-radius:var(--radius-full);cursor:pointer;display:inline-block;padding:--spacing(1) --spacing(5);text-align:center;transition:box-shadow,background-size,--btn-background-color,border-color;transition-duration:.3s;transition-timing-function:ease-in-out}.btn:focus-visible{outline:none}.btn:where(:disabled,.disabled,[aria-disabled=true]):not(.loading){cursor:not-allowed;opacity:.4}.btn.borderless{background-clip:border-box;background-image:var(--btn-bg-image-background-layer);border:2px solid transparent}.btn.icon-only{line-height:1;padding:--spacing(2)}.btn.icon-only .label{display:none}.btn.small{font-size:var(--icon-size-small)}.btn.small.icon-only{padding:--spacing(1.75)}.btn.small:not(.icon-only){padding:--spacing(.5) --spacing(4)}.btn.large{font-size:var(--icon-size-large)}.btn.large.icon-only{padding:--spacing(1.5)}.btn.large:not(.icon-only){padding:--spacing(1.5) --spacing(6)}.btn.loading{cursor:progress}.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible,.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):hover{--btn-background-color:var(--btn-background-focus-color);background-size:100%,0 100%,100%;border-color:transparent}.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible:not(.borderless),.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):hover:not(.borderless){box-shadow:var(--shadow)}.btn{@variant max-md{&.responsive-grow{padding:.5rem;width:100%}&.responsive-shrink{line-height:1;padding:--spacing(2)}&.responsive-shrink :not(.icon){display:none}}}}
+@layer components{@property --btn-background-color{syntax:"<color>";inherits:false;initial-value:transparent}.btn,.btn.default,.prose button,.prose-container button{--btn-border-width:2px;--btn-background-color:var(--color-background-scale-a);--btn-background-focus-color:var(--color-background-scale-c);--btn-border-color:var(--color-background-scale-g);--btn-bg-image-background-layer:linear-gradient(to right,var(--btn-background-color),var(--btn-background-color));--btn-bg-image-border-layer:linear-gradient(to right,var(--btn-border-color),var(--btn-border-color));--btn-bg-image-color-layer:linear-gradient(to right,var(--colorscale-resee-linear));--btn-background-image:var(--btn-bg-image-background-layer),var(--btn-bg-image-border-layer),var(--btn-bg-image-color-layer);@variant dark{--btn-bg-image-color-layer:linear-gradient(to right,var(--colorscale-resee-lite-linear))}}.btn.default.icon-only,.btn.icon-only,.prose button.icon-only,.prose-container button.icon-only{--btn-bg-image-color-layer:conic-gradient(from 0deg,var(--colorscale-resee-conic));@variant dark{--btn-bg-image-color-layer:conic-gradient(from 0deg,var(--colorscale-resee-lite-conic))}}.btn,.prose button,.prose-container button{background-clip:padding-box,border-box,border-box;background-image:var(--btn-background-image);background-origin:border-box;background-position:100% 100%;background-repeat:no-repeat;background-size:100%,100% 100%,100%;border:solid var(--btn-border-width) var(--btn-border-color);border-radius:var(--radius-full);cursor:pointer;display:inline-block;padding:--spacing(1) --spacing(5);text-align:center;transition:box-shadow,background-size,--btn-background-color,border-color;transition-duration:.3s;transition-timing-function:ease-in-out}.btn:focus-visible,.prose button:focus-visible,.prose-container button:focus-visible{outline:none}.btn:where(:disabled,.disabled,[aria-disabled=true]):not(.loading),.prose button:where(:disabled,.disabled,[aria-disabled=true]):not(.loading),.prose-container button:where(:disabled,.disabled,[aria-disabled=true]):not(.loading){cursor:not-allowed;opacity:.4}.btn.borderless,.prose button.borderless,.prose-container button.borderless{background-clip:border-box;background-image:var(--btn-bg-image-background-layer);border:2px solid transparent}.btn.icon-only,.prose button.icon-only,.prose-container button.icon-only{line-height:1;padding:--spacing(2)}.btn.icon-only .label,.prose button.icon-only .label,.prose-container button.icon-only .label{display:none}.btn.small,.prose button.small,.prose-container button.small{font-size:var(--icon-size-small)}.btn.small.icon-only,.prose button.small.icon-only,.prose-container button.small.icon-only{padding:--spacing(1.75)}.btn.small:not(.icon-only),.prose button.small:not(.icon-only),.prose-container button.small:not(.icon-only){padding:--spacing(.5) --spacing(4)}.btn.large,.prose button.large,.prose-container button.large{font-size:var(--icon-size-large)}.btn.large.icon-only,.prose button.large.icon-only,.prose-container button.large.icon-only{padding:--spacing(1.5)}.btn.large:not(.icon-only),.prose button.large:not(.icon-only),.prose-container button.large:not(.icon-only){padding:--spacing(1.5) --spacing(6)}.btn.loading,.prose button.loading,.prose-container button.loading{cursor:progress}.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible,.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):hover,.prose button:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible,.prose button:not(:disabled,.disabled,[aria-disabled=true],.loading):hover,.prose-container button:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible,.prose-container button:not(:disabled,.disabled,[aria-disabled=true],.loading):hover{--btn-background-color:var(--btn-background-focus-color);background-size:100%,0 100%,100%;border-color:transparent}.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible:not(.borderless),.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):hover:not(.borderless),.prose button:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible:not(.borderless),.prose button:not(:disabled,.disabled,[aria-disabled=true],.loading):hover:not(.borderless),.prose-container button:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible:not(.borderless),.prose-container button:not(:disabled,.disabled,[aria-disabled=true],.loading):hover:not(.borderless){box-shadow:var(--shadow)}.btn,.prose button,.prose-container button{@variant max-md{&.responsive-grow{padding:.5rem;width:100%}&.responsive-shrink{line-height:1;padding:--spacing(2)}&.responsive-shrink :not(.icon){display:none}}}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@resee-movies/nuxt-ux",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "The next-gen user experience library for ReSee Movies - currently in development. ",
   "repository": {
     "url": "https://github.com/ReSee-Movies/nuxt-ux.git"

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

@@ -1,9 +0,0 @@
-import type { IconProps } from './Icon.vue.js';
-export interface LoadingIndicatorProps {
-    size?: IconProps['size'];
-}
-declare const __VLS_export: import("vue").DefineComponent<LoadingIndicatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoadingIndicatorProps> & Readonly<{}>, {
-    size: "sm" | "md" | "lg" | "xl";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;