@bitrix24/b24ui-nuxt 0.3.3 → 0.3.4

package/dist/meta.mjs

@@ -22310,13 +22310,13 @@ const B24UIMeta = {
       "exposed": []
     }
   },
-  "B24ModalProvider": {
+  "B24OverlayProvider": {
     "mode": "all",
     "prefetch": false,
     "preload": false,
-    "pascalName": "B24ModalProvider",
-    "kebabName": "b24-modal-provider",
-    "chunkName": "components/b24-modal-provider",
+    "pascalName": "B24OverlayProvider",
+    "kebabName": "b24-overlay-provider",
+    "chunkName": "components/b24-overlay-provider",
     "priority": 0,
     "_scanned": true,
     "meta": {
@@ -31840,6 +31840,469 @@ const B24UIMeta = {
       "exposed": []
     }
   },
+  "B24Slideover": {
+    "mode": "all",
+    "prefetch": false,
+    "preload": false,
+    "pascalName": "B24Slideover",
+    "kebabName": "b24-slideover",
+    "chunkName": "components/b24-slideover",
+    "priority": 0,
+    "_scanned": true,
+    "meta": {
+      "type": 0,
+      "props": [
+        {
+          "name": "title",
+          "global": false,
+          "description": "",
+          "tags": [],
+          "required": false,
+          "type": "string | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "string | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "string"
+            }
+          }
+        },
+        {
+          "name": "description",
+          "global": false,
+          "description": "",
+          "tags": [],
+          "required": false,
+          "type": "string | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "string | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "string"
+            }
+          }
+        },
+        {
+          "name": "content",
+          "global": false,
+          "description": "The content of the slideover.",
+          "tags": [],
+          "required": false,
+          "type": "Omit<DialogContentProps, \"as\" | \"asChild\" | \"forceMount\"> | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "Omit<DialogContentProps, \"as\" | \"asChild\" | \"forceMount\"> | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "Omit<DialogContentProps, \"as\" | \"asChild\" | \"forceMount\">"
+            }
+          }
+        },
+        {
+          "name": "overlay",
+          "global": false,
+          "description": "Render an overlay behind the slideover.",
+          "tags": [
+            {
+              "name": "defaultValue",
+              "text": "true"
+            }
+          ],
+          "required": false,
+          "type": "boolean | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "boolean | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "false",
+              "2": "true"
+            }
+          },
+          "default": "true"
+        },
+        {
+          "name": "transition",
+          "global": false,
+          "description": "Animate the slideover when opening or closing.",
+          "tags": [
+            {
+              "name": "defaultValue",
+              "text": "true"
+            }
+          ],
+          "required": false,
+          "type": "boolean | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "boolean | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "false",
+              "2": "true"
+            }
+          },
+          "default": "true"
+        },
+        {
+          "name": "side",
+          "global": false,
+          "description": "",
+          "tags": [],
+          "required": false,
+          "type": "\"bottom\" | \"top\" | \"left\" | \"right\" | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "\"bottom\" | \"top\" | \"left\" | \"right\" | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "\"bottom\"",
+              "2": "\"top\"",
+              "3": "\"left\"",
+              "4": "\"right\""
+            }
+          },
+          "default": "\"right\""
+        },
+        {
+          "name": "portal",
+          "global": false,
+          "description": "Render the slideover in a portal.",
+          "tags": [
+            {
+              "name": "defaultValue",
+              "text": "true"
+            }
+          ],
+          "required": false,
+          "type": "boolean | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "boolean | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "false",
+              "2": "true"
+            }
+          },
+          "default": "true"
+        },
+        {
+          "name": "close",
+          "global": false,
+          "description": "Display a close button to dismiss the slideover.\n`{ color: 'primary' }`{lang=\"ts\"} for `left`, `right`\n`{ color: 'link' }`{lang=\"ts\"} for `top`, `bottom`",
+          "tags": [
+            {
+              "name": "defaultValue",
+              "text": "true"
+            }
+          ],
+          "required": false,
+          "type": "boolean | Partial<ButtonProps> | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "boolean | Partial<ButtonProps> | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "false",
+              "2": "true",
+              "3": "Partial<ButtonProps>"
+            }
+          },
+          "default": "true"
+        },
+        {
+          "name": "closeIcon",
+          "global": false,
+          "description": "The icon displayed in the close button.",
+          "tags": [
+            {
+              "name": "defaultValue",
+              "text": "icons.close"
+            }
+          ],
+          "required": false,
+          "type": "IconComponent | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "IconComponent | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": {
+                "kind": "event",
+                "type": "(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed | undefined) => void; }, \"expose\">): any",
+                "schema": []
+              }
+            }
+          }
+        },
+        {
+          "name": "dismissible",
+          "global": false,
+          "description": "When `false`, the slideover will not close when clicking outside or pressing escape.",
+          "tags": [
+            {
+              "name": "defaultValue",
+              "text": "true"
+            }
+          ],
+          "required": false,
+          "type": "boolean | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "boolean | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "false",
+              "2": "true"
+            }
+          },
+          "default": "true"
+        },
+        {
+          "name": "scrollbarThin",
+          "global": false,
+          "description": "",
+          "tags": [],
+          "required": false,
+          "type": "boolean | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "boolean | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "false",
+              "2": "true"
+            }
+          },
+          "default": "true"
+        },
+        {
+          "name": "b24ui",
+          "global": false,
+          "description": "",
+          "tags": [],
+          "required": false,
+          "type": "Partial<{ overlay: string; content: string; header: string; wrapper: string; body: string; footer: string; title: string; description: string; close: string; }> | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "Partial<{ overlay: string; content: string; header: string; wrapper: string; body: string; footer: string; title: string; description: string; close: string; }> | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "Partial<{ overlay: string; content: string; header: string; wrapper: string; body: string; footer: string; title: string; description: string; close: string; }>"
+            }
+          }
+        },
+        {
+          "name": "open",
+          "global": false,
+          "description": "The controlled open state of the dialog. Can be binded as `v-model:open`.",
+          "tags": [],
+          "required": false,
+          "type": "boolean | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "boolean | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "false",
+              "2": "true"
+            }
+          }
+        },
+        {
+          "name": "defaultOpen",
+          "global": false,
+          "description": "The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.",
+          "tags": [],
+          "required": false,
+          "type": "boolean | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "boolean | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "false",
+              "2": "true"
+            }
+          }
+        },
+        {
+          "name": "modal",
+          "global": false,
+          "description": "The modality of the dialog When set to `true`, <br>\r\ninteraction with outside elements will be disabled and only dialog content will be visible to screen readers.",
+          "tags": [],
+          "required": false,
+          "type": "boolean | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "boolean | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "false",
+              "2": "true"
+            }
+          },
+          "default": "true"
+        }
+      ],
+      "slots": [
+        {
+          "name": "default",
+          "type": "{ open: boolean; }",
+          "description": "",
+          "schema": {
+            "kind": "object",
+            "type": "{ open: boolean; }",
+            "schema": {
+              "open": {
+                "name": "open",
+                "global": false,
+                "description": "",
+                "tags": [],
+                "required": true,
+                "type": "boolean",
+                "schema": {
+                  "kind": "enum",
+                  "type": "boolean",
+                  "schema": {
+                    "0": "false",
+                    "1": "true"
+                  }
+                }
+              }
+            }
+          }
+        },
+        {
+          "name": "content",
+          "type": "{} | undefined",
+          "description": "",
+          "schema": {
+            "kind": "enum",
+            "type": "{} | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": {
+                "kind": "object",
+                "type": "{}",
+                "schema": {}
+              }
+            }
+          }
+        },
+        {
+          "name": "header",
+          "type": "{} | undefined",
+          "description": "",
+          "schema": {
+            "kind": "enum",
+            "type": "{} | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": {
+                "kind": "object",
+                "type": "{}",
+                "schema": {}
+              }
+            }
+          }
+        },
+        {
+          "name": "title",
+          "type": "{} | undefined",
+          "description": "",
+          "schema": {
+            "kind": "enum",
+            "type": "{} | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": {
+                "kind": "object",
+                "type": "{}",
+                "schema": {}
+              }
+            }
+          }
+        },
+        {
+          "name": "description",
+          "type": "{} | undefined",
+          "description": "",
+          "schema": {
+            "kind": "enum",
+            "type": "{} | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": {
+                "kind": "object",
+                "type": "{}",
+                "schema": {}
+              }
+            }
+          }
+        },
+        {
+          "name": "close",
+          "type": "{ b24ui: any; }",
+          "description": "",
+          "schema": {
+            "kind": "object",
+            "type": "{ b24ui: any; }",
+            "schema": {
+              "b24ui": {
+                "name": "b24ui",
+                "global": false,
+                "description": "",
+                "tags": [],
+                "required": true,
+                "type": "any",
+                "schema": "any"
+              }
+            }
+          }
+        },
+        {
+          "name": "body",
+          "type": "{} | undefined",
+          "description": "",
+          "schema": {
+            "kind": "enum",
+            "type": "{} | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": {
+                "kind": "object",
+                "type": "{}",
+                "schema": {}
+              }
+            }
+          }
+        },
+        {
+          "name": "footer",
+          "type": "{} | undefined",
+          "description": "",
+          "schema": {
+            "kind": "enum",
+            "type": "{} | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": {
+                "kind": "object",
+                "type": "{}",
+                "schema": {}
+              }
+            }
+          }
+        }
+      ],
+      "events": [],
+      "exposed": []
+    }
+  },
   "B24Switch": {
     "mode": "all",
     "prefetch": false,

package/dist/module.cjs

@@ -2,7 +2,7 @@
 
 const defu = require('defu');
 const kit = require('@nuxt/kit');
-const templates = require('./shared/b24ui-nuxt.ngV6AJEg.cjs');
+const templates = require('./shared/b24ui-nuxt.BpFAFOHo.cjs');
 require('node:url');
 require('scule');
 
@@ -41,7 +41,6 @@ const module$1 = kit.defineNuxtModule({
       await registerModule("@nuxtjs/color-mode", "colorMode", { classSuffix: "", disableTransition: true });
     }
     kit.addPlugin({ src: resolve("./runtime/plugins/colors") });
-    kit.addPlugin({ src: resolve("./runtime/plugins/modal") });
     kit.addComponentsDir({
       path: resolve("./runtime/components"),
       prefix: "B24",

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.13.1"
   },
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.BTln9cW-.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.BqTJ-9uP.mjs';
 import 'node:url';
 import 'scule';
 
@@ -38,7 +38,6 @@ const module = defineNuxtModule({
       await registerModule("@nuxtjs/color-mode", "colorMode", { classSuffix: "", disableTransition: true });
     }
     addPlugin({ src: resolve("./runtime/plugins/colors") });
-    addPlugin({ src: resolve("./runtime/plugins/modal") });
     addComponentsDir({
       path: resolve("./runtime/components"),
       prefix: "B24",

package/dist/runtime/components/App.vue

@@ -23,8 +23,7 @@ import { toRef, useId, provide } from 'vue'
 import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import B24Toaster from './Toaster.vue'
-import B24ModalProvider from './ModalProvider.vue'
-// import B24SlideoverProvider from './SlideoverProvider.vue'
+import B24OverlayProvider from './OverlayProvider.vue'
 
 const props = defineProps<AppProps>()
 defineSlots<AppSlots>()
@@ -44,8 +43,8 @@ provide(localeContextInjectionKey, locale)
         <slot />
       </B24Toaster>
       <slot v-else />
-      <B24ModalProvider />
-      <!-- B24SlideoverProvider / -->
+
+      <B24OverlayProvider />
     </TooltipProvider>
   </ConfigProvider>
 </template>

package/dist/runtime/components/Modal.vue

@@ -56,7 +56,9 @@ export interface ModalProps extends DialogRootProps {
   b24ui?: Partial<typeof modal.slots>
 }
 
-export interface ModalEmits extends DialogRootEmits {}
+export interface ModalEmits extends DialogRootEmits {
+  'after:leave': []
+}
 
 export interface ModalSlots {
   default(props: { open: boolean }): any
@@ -124,7 +126,7 @@ const b24ui = computed(() => modal({
     <DialogPortal :disabled="!portal">
       <DialogOverlay v-if="overlay" :class="b24ui.overlay({ class: props.b24ui?.overlay })" />
 
-      <DialogContent :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })" v-bind="contentProps" v-on="contentEvents">
+      <DialogContent :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })" v-bind="contentProps" @after-leave="emits('after:leave')" v-on="contentEvents">
         <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
           <DialogTitle v-if="title || !!slots.title">
             <slot name="title">

package/dist/runtime/components/OverlayProvider.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useOverlay } from '../composables/useOverlay'
+
+const { overlays, unMount, close } = useOverlay()
+
+const mountedOverlays = computed(() => overlays.filter(overlay => overlay.isMounted))
+
+const onAfterLeave = (id: symbol) => {
+  close(id)
+  unMount(id)
+}
+
+const onClose = (id: symbol, value: any) => {
+  close(id, value)
+}
+</script>
+
+<template>
+  <component
+    :is="overlay.component"
+    v-for="overlay in mountedOverlays"
+    :key="overlay.id"
+    v-bind="overlay.props"
+    v-model:open="overlay.modelValue"
+    @close="(value:any) => onClose(overlay.id, value)"
+    @after:leave="onAfterLeave(overlay.id)"
+  />
+</template>