@bitrix24/b24ui-nuxt 0.3.3 → 0.3.5

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.M7bz91Io.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.5",
   "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.CeQRWQD-.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/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

@@ -5,6 +5,16 @@ 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>;

package/dist/runtime/vue/stubs.js

@@ -1,10 +1,32 @@
 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);

package/dist/shared/{b24ui-nuxt.BTln9cW-.mjs → b24ui-nuxt.CeQRWQD-.mjs}

@@ -1508,7 +1508,7 @@ const chip = {
 };
 
 const container = {
-  base: "max-w-[80rem] mx-auto px-4 sm:px-6 lg:px-8"
+  base: "max-w-[80rem] mx-auto px-5"
   // max-w-7xl w-full
 };
 
@@ -4087,6 +4087,124 @@ const skeleton = {
   base: "animate-pulse rounded-md bg-gray-200 dark:bg-gray-800"
 };
 
+const slideover = {
+  slots: {
+    overlay: "fixed inset-0 bg-base-950/20 dark:bg-base-950/30",
+    content: [
+      "fixed",
+      "bg-base-50 dark:bg-base-950",
+      // 'divide-y divide-(--ui-border)',
+      "sm:shadow-lg",
+      "flex flex-col focus:outline-none"
+    ].join(" "),
+    header: [
+      "mt-4 px-5",
+      "flex items-center gap-1.5"
+    ].join(" "),
+    wrapper: "min-h-2xl",
+    body: [
+      "mx-0 mt-2",
+      "flex-1 overflow-y-auto"
+    ].join(" "),
+    footer: "bg-white dark:bg-base-950 flex items-center justify-center gap-3 py-4 border-t border-t-1 border-t-base-900/10 dark:border-t-white/20 shadow-top-md p-2 pr-(--scrollbar-width)",
+    title: "font-b24-system font-light text-4.5xl leading-none text-base-900 dark:text-base-150",
+    description: "mt-2 mb-1 text-base-500 dark:text-base-400 text-sm",
+    close: "absolute"
+  },
+  variants: {
+    side: {
+      top: {
+        content: "inset-x-0 top-0 max-h-full"
+      },
+      right: {
+        content: "right-0 inset-y-0 w-full max-w-[28rem]"
+      },
+      bottom: {
+        content: "inset-x-0 bottom-0 max-h-full"
+      },
+      left: {
+        content: "left-0 inset-y-0 w-full max-w-[28rem]"
+      }
+    },
+    transition: {
+      true: {
+        overlay: "data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"
+      }
+    },
+    scrollbarThin: {
+      true: {
+        body: "scrollbar-thin"
+      }
+    }
+  },
+  compoundVariants: [
+    // region close ////
+    // close: 'absolute ' ////
+    {
+      side: "right",
+      class: {
+        close: [
+          "pl-1.5 pr-2.5",
+          "top-3 -translate-x-full left-0",
+          "rounded-l-full"
+        ].join(" ")
+      }
+    },
+    {
+      side: "left",
+      class: {
+        close: [
+          "pr-1.5 pl-2.5",
+          "top-3 translate-x-full right-0",
+          "rounded-r-full"
+        ].join(" ")
+      }
+    },
+    {
+      side: ["top", "bottom"],
+      class: {
+        close: [
+          "top-4 end-4"
+        ].join(" ")
+      }
+    },
+    // endregion ////
+    // region transition ////
+    {
+      transition: true,
+      side: "top",
+      class: {
+        content: "data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]"
+      }
+    },
+    {
+      transition: true,
+      side: "right",
+      class: {
+        content: "data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]"
+      }
+    },
+    {
+      transition: true,
+      side: "bottom",
+      class: {
+        content: "data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]"
+      }
+    },
+    {
+      transition: true,
+      side: "left",
+      class: {
+        content: "data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]"
+      }
+    }
+  ],
+  defaultVariants: {
+    side: "right",
+    scrollbarThin: true
+  }
+};
+
 const _switch = {
   slots: {
     root: "relative flex items-start",
@@ -4945,7 +5063,7 @@ const toast = {
 
 const toaster = {
   slots: {
-    viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none",
+    viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none mr-(--scrollbar-width)",
     base: "pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
   },
   variants: {
@@ -5066,6 +5184,7 @@ const theme = {
   selectMenu: selectMenu,
   separator: separator,
   skeleton: skeleton,
+  slideover: slideover,
   switch: _switch,
   tabs: tabs,
   textarea: textarea,