@bitrix24/b24ui-nuxt 0.2.1 → 0.2.3

package/dist/module.cjs

@@ -2,7 +2,7 @@
 
 const defu = require('defu');
 const kit = require('@nuxt/kit');
-const templates = require('./shared/b24ui-nuxt.D5cXbZSx.cjs');
+const templates = require('./shared/b24ui-nuxt.Ce3hzs_q.cjs');
 require('node:url');
 require('scule');
 

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.2.1",
+  "version": "0.2.3",
   "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.CrjojW8t.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.DY8ePXC7.mjs';
 import 'node:url';
 import 'scule';
 

package/dist/runtime/components/App.vue

@@ -23,7 +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 B24ModalProvider from './ModalProvider.vue'
 // import B24SlideoverProvider from './SlideoverProvider.vue'
 
 const props = defineProps<AppProps>()
@@ -44,7 +44,7 @@ provide(localeContextInjectionKey, locale)
         <slot />
       </B24Toaster>
       <slot v-else />
-      <!-- B24ModalProvider / -->
+      <B24ModalProvider />
       <!-- B24SlideoverProvider / -->
     </TooltipProvider>
   </ConfigProvider>

package/dist/runtime/components/DropdownMenu.vue

@@ -0,0 +1,135 @@
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuArrowProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/dropdown-menu'
+import { tv } from '../utils/tv'
+import type { AvatarProps, KbdProps, LinkProps, IconComponent } from '../types'
+import type { DynamicSlots, PartialString } from '../types/utils'
+
+const appConfigDropdownMenu = _appConfig as AppConfig & { b24ui: { dropdownMenu: Partial<typeof theme> } }
+
+const dropdownMenu = tv({ extend: tv(theme), ...(appConfigDropdownMenu.b24ui?.dropdownMenu || {}) })
+
+type DropdownMenuVariants = VariantProps<typeof dropdownMenu>
+
+export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
+  label?: string
+  icon?: IconComponent
+  color?: DropdownMenuVariants['color']
+  avatar?: AvatarProps
+  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  kbds?: KbdProps['value'][] | KbdProps[]
+  /**
+   * The item type.
+   * @defaultValue 'link'
+   */
+  type?: 'label' | 'separator' | 'link' | 'checkbox'
+  slot?: string
+  loading?: boolean
+  disabled?: boolean
+  checked?: boolean
+  open?: boolean
+  defaultOpen?: boolean
+  children?: DropdownMenuItem[] | DropdownMenuItem[][]
+  onSelect?(e: Event): void
+  onUpdateChecked?(checked: boolean): void
+}
+
+export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'> {
+  size?: DropdownMenuVariants['size']
+  items?: T[] | T[][]
+  /**
+   * The icon displayed when an item is checked.
+   * @defaultValue icons.check = `CheckIcon`
+   */
+  checkedIcon?: IconComponent
+  /**
+   * The content of the menu.
+   * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
+   */
+  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the menu.
+   * @defaultValue false
+   */
+  arrow?: boolean | Omit<DropdownMenuArrowProps, 'as' | 'asChild'>
+  /**
+   * Render the menu in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
+  disabled?: boolean
+  class?: any
+  b24ui?: PartialString<typeof dropdownMenu.slots>
+}
+
+export interface DropdownMenuEmits extends DropdownMenuRootEmits {}
+
+type SlotProps<T> = (props: { item: T, active?: boolean, index: number }) => any
+
+export type DropdownMenuSlots<T extends { slot?: string }> = {
+  'default'(props: { open: boolean }): any
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
+</script>
+
+<script setup lang="ts" generic="T extends DropdownMenuItem">
+import { computed, toRef } from 'vue'
+import { defu } from 'defu'
+import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuArrow, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { omit } from '../utils'
+import UDropdownMenuContent from './DropdownMenuContent.vue'
+
+const props = withDefaults(defineProps<DropdownMenuProps<T>>(), {
+  portal: true,
+  modal: true,
+  labelKey: 'label'
+})
+const emits = defineEmits<DropdownMenuEmits>()
+const slots = defineSlots<DropdownMenuSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'modal'), emits)
+const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as DropdownMenuContentProps)
+const arrowProps = toRef(() => props.arrow as DropdownMenuArrowProps)
+const proxySlots = omit(slots, ['default']) as Record<string, DropdownMenuSlots<T>[string]>
+
+const b24ui = computed(() => dropdownMenu({
+  size: props.size
+}))
+</script>
+
+<template>
+  <DropdownMenuRoot v-slot="{ open }" v-bind="rootProps">
+    <DropdownMenuTrigger v-if="!!slots.default" as-child :class="props.class" :disabled="disabled">
+      <slot :open="open" />
+    </DropdownMenuTrigger>
+
+    <UDropdownMenuContent
+      :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })"
+      :b24ui="b24ui"
+      :b24ui-override="props.b24ui"
+      v-bind="contentProps"
+      :items="items"
+      :portal="portal"
+      :label-key="labelKey"
+      :checked-icon="checkedIcon"
+    >
+      <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+
+      <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
+    </UDropdownMenuContent>
+  </DropdownMenuRoot>
+</template>

package/dist/runtime/components/DropdownMenuContent.vue

@@ -0,0 +1,182 @@
+<!-- eslint-disable vue/block-tag-newline -->
+<script lang="ts">
+import type { DropdownMenuContentProps as RekaDropdownMenuContentProps, DropdownMenuContentEmits as RekaDropdownMenuContentEmits } from 'reka-ui'
+import theme from '#build/b24ui/dropdown-menu'
+import { tv } from '../utils/tv'
+import type { KbdProps, AvatarProps, DropdownMenuItem, DropdownMenuSlots, IconComponent } from '../types'
+
+const _dropdownMenu = tv(theme)()
+
+interface DropdownMenuContentProps<T> extends Omit<RekaDropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
+  items?: T[] | T[][]
+  portal?: boolean
+  sub?: boolean
+  labelKey: string
+  checkedIcon?: IconComponent
+  class?: any
+  b24ui: typeof _dropdownMenu
+  b24uiOverride?: any
+}
+
+interface DropdownMenuContentEmits extends RekaDropdownMenuContentEmits {}
+
+type DropdownMenuContentSlots<T extends { slot?: string }> = Omit<DropdownMenuSlots<T>, 'default'> & {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts" generic="T extends DropdownMenuItem">
+import { computed } from 'vue'
+import { DropdownMenu } from 'reka-ui/namespaced'
+import { useForwardPropsEmits } from 'reka-ui'
+import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
+import { omit, get } from '../utils'
+import { pickLinkProps } from '../utils/link'
+import icons from '../dictionary/icons'
+import B24LinkBase from './LinkBase.vue'
+import B24Link from './Link.vue'
+import B24Avatar from './Avatar.vue'
+import B24Kbd from './Kbd.vue'
+// eslint-disable-next-line import/no-self-import
+import B24DropdownMenuContent from './DropdownMenuContent.vue'
+
+const props = defineProps<DropdownMenuContentProps<T>>()
+const emits = defineEmits<DropdownMenuContentEmits>()
+const slots = defineSlots<DropdownMenuContentSlots<T>>()
+
+const contentProps = useForwardPropsEmits(reactiveOmit(props, 'sub', 'items', 'portal', 'labelKey', 'checkedIcon', 'class', 'b24ui', 'b24uiOverride'), emits)
+const proxySlots = omit(slots, ['default']) as Record<string, DropdownMenuContentSlots<T>[string]>
+
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: DropdownMenuItem, active?: boolean, index: number }>()
+
+const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as T[][] : [])
+</script>
+
+<template>
+  <DefineItemTemplate v-slot="{ item, active, index }">
+    <slot :name="item.slot || 'item'" :item="(item as T)" :index="index">
+      <slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" :item="(item as T)" :active="active" :index="index">
+        <Component
+          :is="icons.loading"
+          v-if="item.loading"
+          :class="b24ui.itemLeadingIcon({ class: b24uiOverride?.itemLeadingIcon, color: item?.color, loading: true })"
+        />
+        <Component
+          :is="item.icon"
+          v-else-if="item.icon"
+          :class="b24ui.itemLeadingIcon({ class: b24uiOverride?.itemLeadingIcon, color: item?.color, active })"
+        />
+        <B24Avatar
+          v-else-if="item.avatar"
+          :size="((props.b24uiOverride?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()) as AvatarProps['size'])"
+          v-bind="item.avatar"
+          :class="b24ui.itemLeadingAvatar({ class: b24uiOverride?.itemLeadingAvatar, active })"
+        />
+      </slot>
+
+      <span v-if="get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="b24ui.itemLabel({ class: b24uiOverride?.itemLabel, active })">
+        <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="(item as T)" :active="active" :index="index">
+          {{ get(item, props.labelKey as string) }}
+        </slot>
+        <Component
+          :is="icons.external"
+          v-if="item.target === '_blank'"
+          :class="b24ui.itemLabelExternalIcon({ class: b24uiOverride?.itemLabelExternalIcon, color: item?.color, active })"
+        />
+      </span>
+
+      <span :class="b24ui.itemTrailing({ class: b24uiOverride?.itemTrailing })">
+        <slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" :item="(item as T)" :active="active" :index="index">
+          <Component
+            :is="icons.chevronRight"
+            v-if="item.children?.length"
+            :class="b24ui.itemTrailingIcon({ class: b24uiOverride?.itemTrailingIcon, color: item?.color, active })"
+          />
+          <span v-else-if="item.kbds?.length" :class="b24ui.itemTrailingKbds({ class: b24uiOverride?.itemTrailingKbds })">
+            <B24Kbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((props.b24uiOverride?.itemTrailingKbdsSize || b24ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+          </span>
+        </slot>
+
+        <DropdownMenu.ItemIndicator as-child>
+          <Component
+            :is="checkedIcon || icons.check"
+            :class="b24ui.itemTrailingIcon({ class: b24uiOverride?.itemTrailingIcon, color: item?.color })"
+          />
+        </DropdownMenu.ItemIndicator>
+      </span>
+    </slot>
+  </DefineItemTemplate>
+
+  <DropdownMenu.Portal :disabled="!portal">
+    <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="props.class" v-bind="contentProps">
+      <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="b24ui.group({ class: b24uiOverride?.group })">
+        <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+          <DropdownMenu.Label v-if="item.type === 'label'" :class="b24ui.label({ class: b24uiOverride?.label })">
+            <ReuseItemTemplate :item="item" :index="index" />
+          </DropdownMenu.Label>
+          <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="b24ui.separator({ class: b24uiOverride?.separator })" />
+          <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
+            <DropdownMenu.SubTrigger
+              as="button"
+              type="button"
+              :disabled="item.disabled"
+              :text-value="get(item, props.labelKey as string)"
+              :class="b24ui.item({ class: b24uiOverride?.item, color: item?.color })"
+            >
+              <ReuseItemTemplate :item="item" :index="index" />
+            </DropdownMenu.SubTrigger>
+
+            <B24DropdownMenuContent
+              sub
+              :class="props.class"
+              :b24ui="b24ui"
+              :b24ui-override="b24uiOverride"
+              :portal="portal"
+              :items="item.children"
+              side="right"
+              align="start"
+              :align-offset="-4"
+              :side-offset="3"
+              :label-key="labelKey"
+              :checked-icon="checkedIcon"
+              v-bind="item.content"
+            >
+              <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
+                <slot :name="name" v-bind="slotData" />
+              </template>
+            </B24DropdownMenuContent>
+          </DropdownMenu.Sub>
+          <DropdownMenu.CheckboxItem
+            v-else-if="item.type === 'checkbox'"
+            :model-value="item.checked"
+            :disabled="item.disabled"
+            :text-value="get(item, props.labelKey as string)"
+            :class="b24ui.item({ class: [b24uiOverride?.item, item.class], color: item?.color })"
+            @update:model-value="item.onUpdateChecked"
+            @select="item.onSelect"
+          >
+            <ReuseItemTemplate :item="item" :index="index" />
+          </DropdownMenu.CheckboxItem>
+          <DropdownMenu.Item
+            v-else
+            as-child
+            :disabled="item.disabled"
+            :text-value="get(item, props.labelKey as string)"
+            @select="item.onSelect"
+          >
+            <B24Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<DropdownMenuItem, 'type'>)" custom>
+              <B24LinkBase
+                v-bind="slotProps"
+                :class="b24ui.item({ class: [b24uiOverride?.item, item.class], color: item?.color, active })"
+              >
+                <ReuseItemTemplate :item="item" :active="active" :index="index" />
+              </B24LinkBase>
+            </B24Link>
+          </DropdownMenu.Item>
+        </template>
+      </DropdownMenu.Group>
+
+      <slot />
+    </component>
+  </DropdownMenu.Portal>
+</template>

package/dist/runtime/components/Modal.vue

@@ -0,0 +1,179 @@
+<script lang="ts">
+import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/modal'
+import { tv } from '../utils/tv'
+import type { ButtonProps, IconComponent } from '../types'
+
+const appConfigModal = _appConfig as AppConfig & { b24ui: { modal: Partial<typeof theme> } }
+
+const modal = tv({ extend: tv(theme), ...(appConfigModal.b24ui?.modal || {}) })
+
+export interface ModalProps extends DialogRootProps {
+  title?: string
+  description?: string
+  /** The content of the modal. */
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Render an overlay behind the modal.
+   * @defaultValue true
+   */
+  overlay?: boolean
+  /**
+   * Animate the modal when opening or closing.
+   * @defaultValue true
+   */
+  transition?: boolean
+  /**
+   * When `true`, the modal will take up the full screen.
+   * @defaultValue false
+   */
+  fullscreen?: boolean
+  /**
+   * Render the modal in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  /**
+   * Display a close button to dismiss the modal.
+   * `{ size: 'xs', color: 'link' }`{lang="ts-type"}
+   * @defaultValue true
+   */
+  close?: ButtonProps | boolean
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue icons.close
+   */
+  closeIcon?: IconComponent
+  /**
+   * When `false`, the modal will not close when clicking outside or pressing escape.
+   * @defaultValue true
+   */
+  dismissible?: boolean
+  class?: any
+  b24ui?: Partial<typeof modal.slots>
+}
+
+export interface ModalEmits extends DialogRootEmits {}
+
+export interface ModalSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+  header(props?: {}): any
+  title(props?: {}): any
+  description(props?: {}): any
+  close(props: { b24ui: any }): any
+  body(props?: {}): any
+  footer(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { useLocale } from '../composables/useLocale'
+import icons from '../dictionary/icons'
+import B24Button from './Button.vue'
+
+const props = withDefaults(defineProps<ModalProps>(), {
+  close: true,
+  portal: true,
+  overlay: true,
+  transition: true,
+  modal: true,
+  dismissible: true
+})
+const emits = defineEmits<ModalEmits>()
+const slots = defineSlots<ModalSlots>()
+
+const { t } = useLocale()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
+const contentProps = toRef(() => props.content)
+const contentEvents = computed(() => {
+  if (!props.dismissible) {
+    return {
+      pointerDownOutside: (e: Event) => e.preventDefault(),
+      interactOutside: (e: Event) => e.preventDefault(),
+      escapeKeyDown: (e: Event) => e.preventDefault()
+    }
+  }
+
+  return {}
+})
+
+const b24ui = computed(() => modal({
+  transition: props.transition,
+  fullscreen: props.fullscreen
+}))
+</script>
+
+<template>
+  <DialogRoot v-slot="{ open }" v-bind="rootProps">
+    <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
+      <slot :open="open" />
+    </DialogTrigger>
+
+    <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">
+        <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
+          <DialogTitle v-if="title || !!slots.title">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </DialogTitle>
+
+          <DialogDescription v-if="description || !!slots.description">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </DialogDescription>
+        </VisuallyHidden>
+
+        <slot name="content">
+          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close || !!slots.close)" :class="b24ui.header({ class: props.b24ui?.header })">
+            <slot name="header">
+              <DialogTitle v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
+                <slot name="title">
+                  {{ title }}
+                </slot>
+              </DialogTitle>
+
+              <DialogDescription v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
+                <slot name="description">
+                  {{ description }}
+                </slot>
+              </DialogDescription>
+
+              <DialogClose as-child>
+                <slot name="close" :b24ui="b24ui">
+                  <B24Button
+                    v-if="close"
+                    :icon="closeIcon || icons.close"
+                    size="xs"
+                    color="link"
+                    :aria-label="t('modal.close')"
+                    v-bind="typeof close === 'object' ? close : undefined"
+                    :class="b24ui.close({ class: props.b24ui?.close })"
+                  />
+                </slot>
+              </DialogClose>
+            </slot>
+          </div>
+
+          <div v-if="!!slots.body" :class="b24ui.body({ class: props.b24ui?.body })">
+            <slot name="body" />
+          </div>
+
+          <div v-if="!!slots.footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
+            <slot name="footer" />
+          </div>
+        </slot>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>

package/dist/runtime/components/ModalDialogClose.vue

@@ -0,0 +1,17 @@
+<script lang="ts">
+export interface ModalDialogCloseSlots {
+  default(props: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { DialogClose } from 'reka-ui'
+
+defineSlots<ModalDialogCloseSlots>()
+</script>
+
+<template>
+  <DialogClose as-child>
+    <slot />
+  </DialogClose>
+</template>

package/dist/runtime/components/ModalProvider.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import { useModal, modalInjectionKey } from '../composables/useModal'
+
+const modalState = inject(modalInjectionKey)
+
+const { isOpen } = useModal()
+</script>
+
+<template>
+  <component :is="modalState.component" v-if="modalState" v-bind="modalState.props" v-model:open="isOpen" />
+</template>

package/dist/runtime/composables/useComponentIcons.d.ts

@@ -15,6 +15,6 @@ export interface UseComponentIconsProps {
 export declare function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>): {
     isLeading: import("vue").ComputedRef<any>;
     isTrailing: import("vue").ComputedRef<boolean>;
-    leadingIconName: import("vue").ComputedRef<IconComponent | undefined>;
-    trailingIconName: import("vue").ComputedRef<IconComponent | undefined>;
+    leadingIconName: import("vue").ComputedRef<import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}> | undefined>;
+    trailingIconName: import("vue").ComputedRef<import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}> | undefined>;
 };

package/dist/runtime/composables/useModal.d.ts

@@ -0,0 +1,17 @@
+import type { ShallowRef, Component, InjectionKey } from 'vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+import type { ModalProps } from '../types';
+export interface ModalState {
+    component: Component | string;
+    props: ModalProps;
+}
+export declare const modalInjectionKey: InjectionKey<ShallowRef<ModalState>>;
+declare function _useModal(): {
+    open: <T extends Component>(component: T, props?: ModalProps & ComponentProps<T>) => void;
+    close: () => Promise<void>;
+    reset: () => void;
+    patch: <T extends Component = Record<string, never>>(props: Partial<ModalProps & ComponentProps<T>>) => void;
+    isOpen: import("vue").Ref<boolean, boolean>;
+};
+export declare const useModal: typeof _useModal;
+export {};

package/dist/runtime/composables/useModal.js

@@ -0,0 +1,46 @@
+import { ref, inject } from "vue";
+import { createSharedComposable } from "@vueuse/core";
+export const modalInjectionKey = Symbol("bitrix24-ui.modal");
+function _useModal() {
+  const modalState = inject(modalInjectionKey);
+  const isOpen = ref(false);
+  function open(component, props) {
+    if (!modalState) {
+      throw new Error("useModal() is called without provider");
+    }
+    modalState.value = {
+      component,
+      props: props ?? {}
+    };
+    isOpen.value = true;
+  }
+  async function close() {
+    if (!modalState) return;
+    isOpen.value = false;
+  }
+  function reset() {
+    if (!modalState) return;
+    modalState.value = {
+      component: "div",
+      props: {}
+    };
+  }
+  function patch(props) {
+    if (!modalState) return;
+    modalState.value = {
+      ...modalState.value,
+      props: {
+        ...modalState.value.props,
+        ...props
+      }
+    };
+  }
+  return {
+    open,
+    close,
+    reset,
+    patch,
+    isOpen
+  };
+}
+export const useModal = createSharedComposable(_useModal);

package/dist/runtime/index.css

@@ -1 +1 @@
-@plugin "@bitrix24/b24style";@import "./keyframes.css";@variant light (&:where(.light, .light *));@variant dark (&:where(.dark, .dark *));@layer base{body{@apply antialiased scheme-light dark:scheme-dark}}
+@plugin "@bitrix24/b24style";@import "#build/b24ui.css";@import "./keyframes.css";@variant light (&:where(.light, .light *));@variant dark (&:where(.dark, .dark *));@layer base{body{@apply antialiased scheme-light dark:scheme-dark}}

package/dist/runtime/plugins/modal.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/modal.js

@@ -0,0 +1,10 @@
+import { shallowRef } from "vue";
+import { defineNuxtPlugin } from "#imports";
+import { modalInjectionKey } from "../composables/useModal.js";
+export default defineNuxtPlugin((nuxtApp) => {
+  const modalState = shallowRef({
+    component: "div",
+    props: {}
+  });
+  nuxtApp.vueApp.provide(modalInjectionKey, modalState);
+});