@bitrix24/b24ui-nuxt 0.3.2 → 0.3.4

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.2",
+  "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>

package/dist/runtime/components/Slideover.vue

@@ -0,0 +1,193 @@
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+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/slideover'
+import { tv } from '../utils/tv'
+import type { ButtonProps, IconComponent } from '../types'
+
+const appConfigSlideover = _appConfig as AppConfig & { b24ui: { slideover: Partial<typeof theme> } }
+
+const slideover = tv({ extend: tv(theme), ...(appConfigSlideover.b24ui?.slideover || {}) })
+
+type SlideoverVariants = VariantProps<typeof slideover>
+
+export interface SlideoverProps extends DialogRootProps {
+  title?: string
+  description?: string
+  /** The content of the slideover. */
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Render an overlay behind the slideover.
+   * @defaultValue true
+   */
+  overlay?: boolean
+  /**
+   * Animate the slideover when opening or closing.
+   * @defaultValue true
+   */
+  transition?: boolean
+  side?: SlideoverVariants['side']
+  /**
+   * Render the slideover in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  /**
+   * Display a close button to dismiss the slideover.
+   * `{ color: 'primary' }`{lang="ts"} for `left`, `right`
+   * `{ color: 'link' }`{lang="ts"} for `top`, `bottom`
+   * @defaultValue true
+   */
+  close?: boolean | Partial<ButtonProps>
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue icons.close
+   */
+  closeIcon?: IconComponent
+  /**
+   * When `false`, the slideover will not close when clicking outside or pressing escape.
+   * @defaultValue true
+   */
+  dismissible?: boolean
+  scrollbarThin?: boolean
+  class?: any
+  b24ui?: Partial<typeof slideover.slots>
+}
+
+export interface SlideoverEmits extends DialogRootEmits {
+  'after:leave': []
+}
+
+export interface SlideoverSlots {
+  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<SlideoverProps>(), {
+  close: true,
+  portal: true,
+  overlay: true,
+  transition: true,
+  modal: true,
+  dismissible: true,
+  side: 'right',
+  scrollbarThin: true
+})
+const emits = defineEmits<SlideoverEmits>()
+const slots = defineSlots<SlideoverSlots>()
+
+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(),
+      closeAutoFocus: (e: Event) => e.preventDefault()
+    }
+  }
+
+  return {
+    closeAutoFocus: (e: Event) => e.preventDefault()
+  }
+})
+
+const b24ui = computed(() => slideover({
+  transition: props.transition,
+  side: props.side
+}))
+</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 :data-side="side" :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">
+              {{ 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">
+              <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
+                <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>
+              </div>
+
+              <DialogClose as-child>
+                <slot name="close" :b24ui="b24ui">
+                  <B24Button
+                    v-if="close"
+                    :icon="closeIcon || icons.close"
+                    size="md"
+                    class="group"
+                    :color="['left', 'right'].includes(props?.side) ? 'primary' : 'link'"
+                    :aria-label="t('slideover.close')"
+                    :b24ui="{
+                      leadingIcon: ['left', 'right'].includes(props?.side) ? 'group-hover:rounded-full group-hover:border-1 group-hover:border-current' : ''
+                    }"
+                    v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
+                    :class="b24ui.close({ class: props.b24ui?.close })"
+                  />
+                </slot>
+              </DialogClose>
+            </slot>
+          </div>
+
+          <div :class="b24ui.body({ class: props.b24ui?.body, scrollbarThin: Boolean(props.scrollbarThin) })">
+            <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/composables/useOverlay.d.ts

@@ -0,0 +1,30 @@
+import type { Component } from 'vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+export type OverlayOptions<OverlayAttrs = Record<string, any>> = {
+    defaultOpen?: boolean;
+    props?: OverlayAttrs;
+    destroyOnClose?: boolean;
+};
+type ManagedOverlayOptionsPrivate<T extends Component> = {
+    component?: T;
+    id: symbol;
+    isMounted: boolean;
+    modelValue: boolean;
+    resolvePromise?: (value: unknown) => void;
+};
+export type Overlay = OverlayOptions<Component> & ManagedOverlayOptionsPrivate<Component>;
+interface OverlayInstance<T> {
+    open: (props?: ComponentProps<T>) => Promise<any>;
+    close: (value?: any) => void;
+    patch: (props: Partial<ComponentProps<T>>) => void;
+}
+declare function _useOverlay(): {
+    overlays: import("vue").ShallowReactive<Overlay[]>;
+    open: <T extends Component>(id: symbol, props?: ComponentProps<T>) => Promise<any>;
+    close: (id: symbol, value?: any) => void;
+    create: <T extends Component>(component: T, _options?: OverlayOptions<ComponentProps<T>>) => OverlayInstance<T>;
+    patch: <T extends Component>(id: symbol, props: Partial<ComponentProps<T>>) => void;
+    unMount: (id: symbol) => void;
+};
+export declare const useOverlay: typeof _useOverlay;
+export {};

package/dist/runtime/composables/useOverlay.js

@@ -0,0 +1,71 @@
+import { shallowReactive, reactive, markRaw } from "vue";
+import { createSharedComposable } from "@vueuse/core";
+function _useOverlay() {
+  const overlays = shallowReactive([]);
+  const create = (component, _options) => {
+    const { props, defaultOpen, destroyOnClose } = _options || {};
+    const options = reactive({
+      id: Symbol(import.meta.dev ? "useOverlay" : ""),
+      modelValue: !!defaultOpen,
+      component: markRaw(component),
+      isMounted: !!defaultOpen,
+      destroyOnClose: !!destroyOnClose,
+      props: props || {}
+    });
+    overlays.push(options);
+    return {
+      open: (props2) => open(options.id, props2),
+      close: (value) => close(options.id, value),
+      patch: (props2) => patch(options.id, props2)
+    };
+  };
+  const open = (id, props) => {
+    const overlay = getOverlay(id);
+    if (props) {
+      patch(overlay.id, props);
+    }
+    overlay.modelValue = true;
+    overlay.isMounted = true;
+    return new Promise((resolve) => {
+      overlay.resolvePromise = resolve;
+    });
+  };
+  const close = (id, value) => {
+    const overlay = getOverlay(id);
+    overlay.modelValue = false;
+    if (overlay.resolvePromise) {
+      overlay.resolvePromise(value);
+      overlay.resolvePromise = void 0;
+    }
+  };
+  const unMount = (id) => {
+    const overlay = getOverlay(id);
+    overlay.isMounted = false;
+    if (overlay.destroyOnClose) {
+      const index = overlays.findIndex((overlay2) => overlay2.id === id);
+      overlays.splice(index, 1);
+    }
+  };
+  const patch = (id, props) => {
+    const overlay = getOverlay(id);
+    Object.entries(props).forEach(([key, value]) => {
+      overlay.props[key] = value;
+    });
+  };
+  const getOverlay = (id) => {
+    const overlay = overlays.find((overlay2) => overlay2.id === id);
+    if (!overlay) {
+      throw new Error("Overlay not found");
+    }
+    return overlay;
+  };
+  return {
+    overlays,
+    open,
+    close,
+    create,
+    patch,
+    unMount
+  };
+}
+export const useOverlay = createSharedComposable(_useOverlay);

package/dist/runtime/types/index.d.ts

@@ -27,6 +27,7 @@ export * from '../components/Select.vue';
 export * from '../components/SelectMenu.vue';
 export * from '../components/Separator.vue';
 export * from '../components/Skeleton.vue';
+export * from '../components/Slideover.vue';
 export * from '../components/Switch.vue';
 export * from '../components/Tabs.vue';
 export * from '../components/Textarea.vue';

package/dist/runtime/types/index.js

@@ -27,6 +27,7 @@ export * from "../components/Select.vue";
 export * from "../components/SelectMenu.vue";
 export * from "../components/Separator.vue";
 export * from "../components/Skeleton.vue";
+export * from "../components/Slideover.vue";
 export * from "../components/Switch.vue";
 export * from "../components/Tabs.vue";
 export * from "../components/Textarea.vue";

package/dist/runtime/vue/components/Link.vue

@@ -186,7 +186,7 @@ function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
   return false
 }
 
-function resolveLinkClass({ route, isActive, isExactActive }: any) {
+function resolveLinkClass({ route, isActive, isExactActive }: any = {}) {
   const active = isLinkActive({ route, isActive, isExactActive })
 
   if (props.raw) {
@@ -200,38 +200,10 @@ function resolveLinkClass({ route, isActive, isExactActive }: any) {
     isAction: Boolean(props.isAction)
   })
 }
-
-function resolveLinkClassNoRouter() {
-  if (props.raw) {
-    return [props.class, props.inactiveClass]
-  }
-
-  return b24ui.value({
-    class: props.class,
-    disabled: props.disabled,
-    isAction: Boolean(props.isAction)
-  })
-}
-
-// Handle navigation without vue-router
-const handleNavigation = (href: string) => {
-  if (isExternal.value) {
-    window.location.href = href
-  } else {
-    const [path, hash] = href.split('#')
-
-    window.location.pathname = path || ''
-    if (hash) {
-      window.location.hash = hash
-    } else {
-      window.location.hash = ''
-    }
-  }
-}
 </script>
 
 <template>
-  <template v-if="hasRouter">
+  <template v-if="hasRouter && !isExternal">
     <RouterLink v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }" v-bind="routerLinkProps" :to="to || '#'" custom>
       <template v-if="custom">
         <slot
@@ -241,7 +213,7 @@ const handleNavigation = (href: string) => {
             type,
             disabled,
             target: props.target ? props.target : undefined,
-            href: to ? (isExternal ? to as string : href) : undefined,
+            href: to ? href : undefined,
             navigate,
             active: isLinkActive({ route: linkRoute, isActive, isExactActive })
           }"
@@ -254,7 +226,7 @@ const handleNavigation = (href: string) => {
           as,
           type,
           disabled,
-          href: to ? (isExternal ? to as string : href) : undefined,
+          href: to ? href : undefined,
           navigate
         }"
         :class="resolveLinkClass({ route: linkRoute, isActive: isActive, isExactActive: isExactActive })"
@@ -272,8 +244,8 @@ const handleNavigation = (href: string) => {
           as,
           type,
           disabled,
-          href: to ? (isExternal ? to as string : href) : undefined,
-          navigate: () => to && handleNavigation(to as string),
+          href: to,
+          target: isExternal ? '_blank' : undefined,
           active: false
         }"
       />
@@ -285,10 +257,11 @@ const handleNavigation = (href: string) => {
         as,
         type,
         disabled,
-        href: to ? (isExternal ? to as string : to as string) : href as string
+        href: (to as string),
+        target: isExternal ? '_blank' : undefined
       }"
-      :class="resolveLinkClassNoRouter()"
-      @click="to && handleNavigation(to as string)"
+      :is-external="isExternal"
+      :class="resolveLinkClass()"
     >
       <slot :active="false" />
     </B24LinkBase>

package/dist/runtime/vue/composables/useAppConfig.d.ts

@@ -0,0 +1 @@
+export declare const useAppConfig: () => any;

package/dist/runtime/vue/composables/useAppConfig.js

@@ -0,0 +1,2 @@
+import appConfig from "#build/app.config";
+export const useAppConfig = () => appConfig;

package/dist/runtime/vue/stubs.d.ts

@@ -2,7 +2,28 @@ import type { Ref } from 'vue';
 import type { NuxtApp } from '#app';
 export { useHead } from '@unhead/vue';
 export { useRoute, useRouter } from 'vue-router';
+export { defineShortcuts } from '../composables/defineShortcuts';
+export { useLocale } from '../composables/useLocale';
+export { useConfetti } from '../composables/useConfetti';
+export { useOverlay } from '../composables/useOverlay';
+export declare const useColorMode: () => {
+    forced: boolean;
+    preference?: undefined;
+    readonly value?: undefined;
+} | {
+    preference: "light" | "dark" | "system";
+    readonly value: import("@vueuse/core").BasicColorMode;
+    forced: boolean;
+};
 export declare const useAppConfig: () => any;
+export declare const useCookie: <T = string>(_name: string, _options?: Record<string, any>) => {
+    value: Ref<T, T>;
+    get: () => T;
+    set: () => void;
+    update: () => void;
+    refresh: () => Promise<Awaited<T>>;
+    remove: () => void;
+};
 export declare const useState: <T>(key: string, init: () => T) => Ref<T>;
 export declare function useNuxtApp(): {
     isHydrating: boolean;

package/dist/runtime/vue/stubs.js

@@ -1,8 +1,47 @@
 import { ref } from "vue";
 import appConfig from "#build/app.config";
+import { useColorMode as useColorModeVueUse } from "@vueuse/core";
 export { useHead } from "@unhead/vue";
 export { useRoute, useRouter } from "vue-router";
+export { defineShortcuts } from "../composables/defineShortcuts.js";
+export { useLocale } from "../composables/useLocale.js";
+export { useConfetti } from "../composables/useConfetti.js";
+export { useOverlay } from "../composables/useOverlay.js";
+export const useColorMode = () => {
+  if (!appConfig.colorMode) {
+    return {
+      forced: true
+    };
+  }
+  const { store, system } = useColorModeVueUse();
+  return {
+    get preference() {
+      return store.value === "auto" ? "system" : store.value;
+    },
+    set preference(value) {
+      store.value = value === "system" ? "auto" : value;
+    },
+    get value() {
+      return store.value === "auto" ? system.value : store.value;
+    },
+    forced: false
+  };
+};
 export const useAppConfig = () => appConfig;
+export const useCookie = (_name, _options = {}) => {
+  const value = ref(null);
+  return {
+    value,
+    get: () => value.value,
+    set: () => {
+    },
+    update: () => {
+    },
+    refresh: () => Promise.resolve(value.value),
+    remove: () => {
+    }
+  };
+};
 const state = {};
 export const useState = (key, init) => {
   if (state[key]) {