@casinogate/ui 1.8.2 → 1.8.3

package/dist/components/dialog/_ui/nested-dialog/nested-dialog.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
+  import { Button } from '../../../button/index.js';
+  import { useDialogItemContext } from '../../dialog-host-item.svelte';
   import { dialogs } from '../../model/dialog-manager.svelte.js';
+
+  const itemCtx = useDialogItemContext();
 </script>
 
 <div class="cgui:bg-surface-white cgui:max-w-140 cgui:p-4">
@@ -15,12 +19,9 @@
     amet culpa culpa in id.
   </p>
 
-  <button
-    onclick={() => {
-      dialogs.openRegistered({
-        key: 'basic',
-        props: {},
-      });
-    }}>Close</button
-  >
+  <div class="cgui:flex cgui:gap-2">
+    <Button variant="outline" onclick={() => dialogs.closeAll()}>Close all</Button>
+
+    <Button onclick={itemCtx.close}>Close Nested Dialog</Button>
+  </div>
 </div>

package/dist/components/dialog/dialog-host-item.svelte

@@ -16,11 +16,37 @@
 
   let { component, props: dialogProps, options, open, id, close, update }: DialogItemState = $props();
 
-  const { interactOutsideBehavior = 'close', escapeKeydownBehavior = 'close', onOpenChange, ...restOptions } = options;
+  const {
+    interactOutsideBehavior = 'close',
+    escapeKeydownBehavior = 'close',
+    onOpenChange,
+    withOverlay = true,
+    contentClass,
+    positionerClass,
+    overlayClass,
+    contentProps: contentPropsOptions,
+    positionerProps: positionerPropsOptions,
+    overlayProps: overlayPropsOptions,
+    ...restOptions
+  } = options;
+
   const Component = $derived(component);
+
   const contentProps = $derived({
     interactOutsideBehavior,
     escapeKeydownBehavior,
+    class: contentClass,
+    ...contentPropsOptions,
+  });
+
+  const positionerProps = $derived({
+    class: positionerClass,
+    ...positionerPropsOptions,
+  });
+
+  const overlayProps = $derived({
+    class: overlayClass,
+    ...overlayPropsOptions,
   });
 
   DialogItemContext.set({
@@ -51,8 +77,10 @@
   }
 >
   <Portal>
-    <Overlay />
-    <Positioner>
+    {#if withOverlay}
+      <Overlay {...overlayProps} />
+    {/if}
+    <Positioner {...positionerProps}>
       <Content {...contentProps}>
         <Component {...dialogProps} />
       </Content>

package/dist/components/dialog/index.d.ts

@@ -2,4 +2,4 @@ export * as DialogPrimitive from './exports-primitive.js';
 export * as Dialog from './exports.js';
 export { useDialogItemContext } from './dialog-host-item.svelte';
 export { dialogs } from './model/index.js';
-export type { DialogCloseProps, DialogContentProps, DialogOptions, DialogOverlayProps, DialogPortalProps, DialogPositionerProps, DialogRootProps, ExtractRegisterdDialogs, RegisteredDialogCollection, RegisteredDialogKeys, RegisteredDialogsOverride, RegistereDialogProps, } from './types.js';
+export type { DialogCloseProps, DialogContentProps, DialogOptions, DialogOverlayProps, DialogPortalProps, DialogPositionerProps, DialogRootProps, ExtractRegisterdDialogs, RegisteredDialogCollection, RegisteredDialogKeys, RegisteredDialogsOverride, WithDialogProps, } from './types.js';

package/dist/components/dialog/model/dialog-manager.svelte.js

@@ -29,6 +29,17 @@ export class DialogManagerState {
             'dialog:closeAll': () => this.#handleCloseAll(),
         });
     }
+    #updateDialog(id, fn) {
+        const dialogIndex = this.#dialogs.findIndex((d) => d.id === id);
+        if (dialogIndex === -1)
+            return;
+        const currentDialog = this.#dialogs[dialogIndex];
+        if (!currentDialog)
+            return;
+        const { props: newProps, options: newOptions } = fn(currentDialog.props, currentDialog.options);
+        currentDialog.props = { id, ...newProps };
+        currentDialog.options = newOptions;
+    }
     #handleOpenRegistered(payload) {
         const { key, props, options = {}, id } = payload;
         const registeredValue = this.opts.register.current?.[key];
@@ -55,17 +66,6 @@ export class DialogManagerState {
         const newDialogs = [...this.#dialogs.map((d) => ({ ...d, open: false })), state];
         this.dialogs = newDialogs;
     }
-    #updateDialog(id, fn) {
-        const dialogIndex = this.#dialogs.findIndex((d) => d.id === id);
-        if (dialogIndex === -1)
-            return;
-        const currentDialog = this.#dialogs[dialogIndex];
-        if (!currentDialog)
-            return;
-        const { props: newProps, options: newOptions } = fn(currentDialog.props, currentDialog.options);
-        currentDialog.props = { id, ...newProps };
-        currentDialog.options = newOptions;
-    }
     #handleOpen(payload) {
         const { component, props, options = {}, id } = payload;
         const componentProps = {
@@ -89,7 +89,6 @@ export class DialogManagerState {
         const { id } = payload;
         for (let i = this.#dialogs.length - 1; i >= 0; i--) {
             const dialog = this.#dialogs[i];
-            console.log('dialog IDX', i);
             if (!dialog)
                 continue;
             if (dialog.id === id) {
@@ -102,7 +101,6 @@ export class DialogManagerState {
             }
         }
         setTimeout(() => {
-            console.log('afterTick');
             this.dialogs = this.dialogs.filter((d) => d.id !== id);
         }, 150);
     }

package/dist/components/dialog/styles.js

@@ -23,7 +23,7 @@ export const dialogOverlayStyles = tv({
 });
 export const dialogContentStyles = tv({
     base: [
-        'cgui:z-(--z-index-dialog) cgui:outline-none cgui:overflow-hidden',
+        'cgui:relative cgui:z-(--z-index-dialog) cgui:outline-none cgui:overflow-hidden',
         'cgui:data-[state=open]:animate-in cgui:data-[state=open]:fade-in-0 cgui:data-[state=open]:slide-in-from-bottom-20',
         'cgui:data-[state=closed]:animate-out cgui:data-[state=closed]:fade-out-0 cgui:data-[state=closed]:slide-out-to-bottom-20',
     ],

package/dist/components/dialog/types.d.ts

@@ -34,8 +34,15 @@ export type DialogRegistrationOptions = {
     interactOutsideBehavior?: DialogContentProps['interactOutsideBehavior'];
 };
 export type DialogOptions = Omit<DialogRootProps, 'open' | 'onOpenChangeComplete' | 'children'> & {
+    withOverlay?: boolean;
     escapeKeydownBehavior?: Extract<DialogContentProps['escapeKeydownBehavior'], 'close' | 'ignore'>;
     interactOutsideBehavior?: Extract<DialogContentProps['interactOutsideBehavior'], 'close' | 'ignore'>;
+    contentClass?: string;
+    positionerClass?: string;
+    overlayClass?: string;
+    contentProps?: Partial<Omit<DialogContentProps, 'id' | 'class' | 'children' | 'ref' | 'child'>>;
+    positionerProps?: Partial<Omit<DialogPositionerProps, 'id' | 'class' | 'children' | 'ref' | 'child'>>;
+    overlayProps?: Partial<Omit<DialogOverlayProps, 'id' | 'class' | 'children' | 'ref' | 'child'>>;
 };
 export type DialogItemState = {
     id: string;
@@ -67,7 +74,7 @@ export type OpenDialogCommandPayload<TComponent extends DialogComponent = Dialog
 export type CloseDialogCommandPayload = {
     id: string;
 };
-export type RegistereDialogProps<T extends Record<string, unknown>> = {
+export type WithDialogProps<T extends Record<string, unknown>> = {
     id: string;
 } & T;
 export type ExtractRegisterdDialogs<TData extends Record<string, DialogRegistrationValue>> = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",