@bitrix24/b24ui-nuxt 0.6.0 → 0.6.1

package/dist/runtime/components/Toast.vue.d.ts

@@ -1,354 +1,9 @@
-import type { VariantProps } from 'tailwind-variants';
 import type { ToastRootProps, ToastRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/toast';
 import type { AvatarProps, ButtonProps, IconComponent } from '../types';
-import type { StringOrVNode } from '../types/utils';
-declare const toast: import("tailwind-variants").TVReturnType<{
-    color: {
-        default: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        danger: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        success: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        warning: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        primary: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        secondary: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        collab: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        ai: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            root: string;
-            actions: string;
-        };
-        vertical: {
-            root: string;
-            actions: string;
-        };
-    };
-    title: {
-        true: {
-            description: string;
-        };
-    };
-}, {
-    root: string;
-    wrapper: string;
-    title: string;
-    description: string;
-    icon: string;
-    avatar: string;
-    avatarSize: string;
-    actions: string;
-    progress: string;
-    close: string;
-}, undefined, {
-    color: {
-        default: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        danger: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        success: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        warning: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        primary: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        secondary: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        collab: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        ai: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            root: string;
-            actions: string;
-        };
-        vertical: {
-            root: string;
-            actions: string;
-        };
-    };
-    title: {
-        true: {
-            description: string;
-        };
-    };
-}, {
-    root: string;
-    wrapper: string;
-    title: string;
-    description: string;
-    icon: string;
-    avatar: string;
-    avatarSize: string;
-    actions: string;
-    progress: string;
-    close: string;
-}, import("tailwind-variants").TVReturnType<{
-    color: {
-        default: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        danger: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        success: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        warning: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        primary: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        secondary: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        collab: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        ai: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            root: string;
-            actions: string;
-        };
-        vertical: {
-            root: string;
-            actions: string;
-        };
-    };
-    title: {
-        true: {
-            description: string;
-        };
-    };
-}, {
-    root: string;
-    wrapper: string;
-    title: string;
-    description: string;
-    icon: string;
-    avatar: string;
-    avatarSize: string;
-    actions: string;
-    progress: string;
-    close: string;
-}, undefined, {
-    color: {
-        default: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        danger: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        success: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        warning: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        primary: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        secondary: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        collab: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        ai: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            root: string;
-            actions: string;
-        };
-        vertical: {
-            root: string;
-            actions: string;
-        };
-    };
-    title: {
-        true: {
-            description: string;
-        };
-    };
-}, {
-    root: string;
-    wrapper: string;
-    title: string;
-    description: string;
-    icon: string;
-    avatar: string;
-    avatarSize: string;
-    actions: string;
-    progress: string;
-    close: string;
-}, import("tailwind-variants").TVReturnType<{
-    color: {
-        default: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        danger: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        success: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        warning: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        primary: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        secondary: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        collab: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-        ai: {
-            root: string;
-            icon: string;
-            progress: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            root: string;
-            actions: string;
-        };
-        vertical: {
-            root: string;
-            actions: string;
-        };
-    };
-    title: {
-        true: {
-            description: string;
-        };
-    };
-}, {
-    root: string;
-    wrapper: string;
-    title: string;
-    description: string;
-    icon: string;
-    avatar: string;
-    avatarSize: string;
-    actions: string;
-    progress: string;
-    close: string;
-}, undefined, unknown, unknown, undefined>>>;
-type ToastVariants = VariantProps<typeof toast>;
+import type { StringOrVNode, ComponentConfig } from '../types/utils';
+type Toast = ComponentConfig<typeof theme, AppConfig, 'toast'>;
 export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open' | 'type' | 'duration'> {
     /**
      * The element or component this component should render as.
@@ -365,12 +20,12 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
     /**
      * @defaultValue 'default'
      */
-    color?: ToastVariants['color'];
+    color?: Toast['variants']['color'];
     /**
      * The orientation between the content and the actions
      * @defaultValue 'vertical'
      */
-    orientation?: ToastVariants['orientation'];
+    orientation?: Toast['variants']['orientation'];
     /**
      * Display a list of actions:
      * - under the title and description when orientation is `vertical`
@@ -391,7 +46,7 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
      */
     closeIcon?: IconComponent;
     class?: any;
-    b24ui?: Partial<typeof toast.slots>;
+    b24ui?: Toast['slots'];
 }
 export interface ToastEmits extends ToastRootEmits {
 }
@@ -401,7 +56,9 @@ export interface ToastSlots {
     description(props?: {}): any;
     actions(props?: {}): any;
     close(props: {
-        b24ui: ReturnType<typeof toast>;
+        b24ui: {
+            [K in keyof Required<Toast['slots']>]: (props?: Record<string, any>) => string;
+        };
     }): any;
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<ToastProps>, {
@@ -411,7 +68,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     height: import("vue").Ref<number, number>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
     close: boolean | Partial<ButtonProps>;
-    orientation: "horizontal" | "vertical";
+    orientation: Toast["variants"]["orientation"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<ToastSlots> & ToastSlots>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {

package/dist/runtime/components/Toaster.vue

@@ -1,9 +1,5 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/toaster";
-import { tv } from "../utils/tv";
-const appConfigToaster = _appConfig;
-const toaster = tv({ extend: tv(theme), ...appConfigToaster.b24ui?.toaster || {} });
 export default {
   name: "Toaster"
 };
@@ -13,8 +9,10 @@ export default {
 import { ref, computed } from "vue";
 import { ToastProvider, ToastViewport, ToastPortal, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
 import { useToast } from "../composables/useToast";
 import { omit } from "../utils";
+import { tv } from "../utils/tv";
 import B24Toast from "./Toast.vue";
 const props = defineProps({
   position: { type: null, required: false, default: "top-right" },
@@ -22,16 +20,17 @@ const props = defineProps({
   portal: { type: Boolean, required: false, default: true },
   duration: { type: Number, required: false, default: 5e3 },
   class: { type: null, required: false },
-  b24ui: { type: Object, required: false },
+  b24ui: { type: null, required: false },
   label: { type: String, required: false },
   swipeThreshold: { type: Number, required: false }
 });
 defineSlots();
+const { toasts, remove } = useToast();
+const appConfig = useAppConfig();
 const providerProps = useForwardProps(reactivePick(props, "duration", "label", "swipeThreshold"));
 const proxyToastProps = (toast) => {
   return omit(toast, ["id", "close"]);
 };
-const { toasts, remove } = useToast();
 const swipeDirection = computed(() => {
   switch (props.position) {
     case "top-center":
@@ -47,7 +46,7 @@ const swipeDirection = computed(() => {
   }
   return "right";
 });
-const b24ui = computed(() => toaster({
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.toaster || {} })({
   position: props.position,
   swipeDirection: swipeDirection.value
 }));

package/dist/runtime/components/Toaster.vue.d.ts

@@ -1,163 +1,14 @@
-import type { VariantProps } from 'tailwind-variants';
 import type { ToastProviderProps } from 'reka-ui';
-declare const toaster: import("tailwind-variants").TVReturnType<{
-    position: {
-        "top-left": {
-            viewport: string;
-        };
-        "top-center": {
-            viewport: string;
-        };
-        "top-right": {
-            viewport: string;
-        };
-        "bottom-left": {
-            viewport: string;
-        };
-        "bottom-center": {
-            viewport: string;
-        };
-        "bottom-right": {
-            viewport: string;
-        };
-    };
-    swipeDirection: {
-        up: string;
-        right: string;
-        down: string;
-        left: string;
-    };
-}, {
-    viewport: string;
-    base: string;
-}, undefined, {
-    position: {
-        "top-left": {
-            viewport: string;
-        };
-        "top-center": {
-            viewport: string;
-        };
-        "top-right": {
-            viewport: string;
-        };
-        "bottom-left": {
-            viewport: string;
-        };
-        "bottom-center": {
-            viewport: string;
-        };
-        "bottom-right": {
-            viewport: string;
-        };
-    };
-    swipeDirection: {
-        up: string;
-        right: string;
-        down: string;
-        left: string;
-    };
-}, {
-    viewport: string;
-    base: string;
-}, import("tailwind-variants").TVReturnType<{
-    position: {
-        "top-left": {
-            viewport: string;
-        };
-        "top-center": {
-            viewport: string;
-        };
-        "top-right": {
-            viewport: string;
-        };
-        "bottom-left": {
-            viewport: string;
-        };
-        "bottom-center": {
-            viewport: string;
-        };
-        "bottom-right": {
-            viewport: string;
-        };
-    };
-    swipeDirection: {
-        up: string;
-        right: string;
-        down: string;
-        left: string;
-    };
-}, {
-    viewport: string;
-    base: string;
-}, undefined, {
-    position: {
-        "top-left": {
-            viewport: string;
-        };
-        "top-center": {
-            viewport: string;
-        };
-        "top-right": {
-            viewport: string;
-        };
-        "bottom-left": {
-            viewport: string;
-        };
-        "bottom-center": {
-            viewport: string;
-        };
-        "bottom-right": {
-            viewport: string;
-        };
-    };
-    swipeDirection: {
-        up: string;
-        right: string;
-        down: string;
-        left: string;
-    };
-}, {
-    viewport: string;
-    base: string;
-}, import("tailwind-variants").TVReturnType<{
-    position: {
-        "top-left": {
-            viewport: string;
-        };
-        "top-center": {
-            viewport: string;
-        };
-        "top-right": {
-            viewport: string;
-        };
-        "bottom-left": {
-            viewport: string;
-        };
-        "bottom-center": {
-            viewport: string;
-        };
-        "bottom-right": {
-            viewport: string;
-        };
-    };
-    swipeDirection: {
-        up: string;
-        right: string;
-        down: string;
-        left: string;
-    };
-}, {
-    viewport: string;
-    base: string;
-}, undefined, unknown, unknown, undefined>>>;
-type ToasterVariants = VariantProps<typeof toaster>;
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/toaster';
+import type { ComponentConfig } from '../types/utils';
+type Toaster = ComponentConfig<typeof theme, AppConfig, 'toaster'>;
 export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'> {
     /**
      * The position on the screen to display the toasts.
      * @defaultValue 'top-right'
      */
-    position?: ToasterVariants['position'];
+    position?: Toaster['variants']['position'];
     /**
      * Expand the toasts to show multiple toasts at once.
      * @defaultValue true
@@ -173,7 +24,7 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
      */
     duration?: number;
     class?: any;
-    b24ui?: Partial<typeof toaster.slots>;
+    b24ui?: Toaster['slots'];
 }
 export interface ToasterSlots {
     default(props?: {}): any;
@@ -189,8 +40,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     duration: number;
     portal: boolean;
 }>>> & Readonly<{}>, {
+    position: Toaster["variants"]["position"];
     duration: number;
-    position: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
     expand: boolean;
     portal: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<ToasterSlots> & ToasterSlots>;

package/dist/runtime/components/Tooltip.vue

@@ -1,9 +1,5 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/tooltip";
-import { tv } from "../utils/tv";
-const appConfigTooltip = _appConfig;
-const tooltip = tv({ extend: tv(theme), ...appConfigTooltip.b24ui?.tooltip || {} });
 </script>
 
 <script setup>
@@ -11,6 +7,8 @@ import { computed, toRef } from "vue";
 import { defu } from "defu";
 import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
 import B24Kbd from "./Kbd.vue";
 const props = defineProps({
   text: { type: String, required: false },
@@ -19,7 +17,7 @@ const props = defineProps({
   arrow: { type: [Boolean, Object], required: false },
   portal: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
-  b24ui: { type: Object, required: false },
+  b24ui: { type: null, required: false },
   defaultOpen: { type: Boolean, required: false },
   open: { type: Boolean, required: false },
   delayDuration: { type: Number, required: false },
@@ -30,10 +28,11 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
+const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(reactivePick(props, "defaultOpen", "open", "delayDuration", "disableHoverableContent", "disableClosingTrigger", "disabled", "ignoreNonKeyboardFocus"), emits);
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
 const arrowProps = toRef(() => props.arrow);
-const b24ui = computed(() => tooltip({
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.tooltip || {} })({
   side: contentProps.value.side
 }));
 </script>