@bitrix24/b24ui-nuxt 0.6.0 → 0.6.1

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitrix24/b24ui-nuxt",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
   "configKey": "b24ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,11 +1,11 @@
 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.BA6Y2FnC.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.wBs9vEU5.mjs';
 import 'node:url';
 import 'scule';
 
 const name = "@bitrix24/b24ui-nuxt";
-const version = "0.6.0";
+const version = "0.6.1";
 
 const module = defineNuxtModule({
   meta: {

package/dist/runtime/components/Advice.vue

@@ -1,15 +1,13 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/advice";
-import { tv } from "../utils/tv";
-const appConfigAdvice = _appConfig;
-const advice = tv({ extend: tv(theme), ...appConfigAdvice.b24ui?.advice || {} });
 </script>
 
 <script setup>
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
 import { useComponentIcons } from "../composables/useComponentIcons";
+import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
 import PersonIcon from "@bitrix24/b24icons-vue/main/PersonIcon";
 defineOptions({ inheritAttrs: false });
@@ -18,15 +16,16 @@ const props = defineProps({
   description: { type: String, required: false },
   angle: { type: null, required: false, default: "bottom" },
   class: { type: null, required: false },
-  b24ui: { type: Object, required: false },
+  b24ui: { type: null, required: false },
   icon: { type: [Function, Object], required: false },
   avatar: { type: Object, required: false }
 });
 const slots = defineSlots();
+const appConfig = useAppConfig();
 const { isLeading, leadingIconName } = useComponentIcons(
   computed(() => ({ ...props, loading: false }))
 );
-const b24ui = computed(() => advice({
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.advice || {} })({
   angle: props.angle
 }));
 </script>

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

@@ -1,122 +1,8 @@
-import type { VariantProps } from 'tailwind-variants';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/advice';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-declare const advice: import("tailwind-variants").TVReturnType<{
-    angle: {
-        top: {
-            root: string;
-            leading: string;
-            descriptionAngle: string;
-        };
-        bottom: {
-            root: string;
-            descriptionAngle: string;
-        };
-    };
-}, {
-    root: string;
-    descriptionWrapper: string;
-    descriptionBorder: string;
-    descriptionBg: string;
-    descriptionAngle: string;
-    description: string;
-    leading: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-}, undefined, {
-    angle: {
-        top: {
-            root: string;
-            leading: string;
-            descriptionAngle: string;
-        };
-        bottom: {
-            root: string;
-            descriptionAngle: string;
-        };
-    };
-}, {
-    root: string;
-    descriptionWrapper: string;
-    descriptionBorder: string;
-    descriptionBg: string;
-    descriptionAngle: string;
-    description: string;
-    leading: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-}, import("tailwind-variants").TVReturnType<{
-    angle: {
-        top: {
-            root: string;
-            leading: string;
-            descriptionAngle: string;
-        };
-        bottom: {
-            root: string;
-            descriptionAngle: string;
-        };
-    };
-}, {
-    root: string;
-    descriptionWrapper: string;
-    descriptionBorder: string;
-    descriptionBg: string;
-    descriptionAngle: string;
-    description: string;
-    leading: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-}, undefined, {
-    angle: {
-        top: {
-            root: string;
-            leading: string;
-            descriptionAngle: string;
-        };
-        bottom: {
-            root: string;
-            descriptionAngle: string;
-        };
-    };
-}, {
-    root: string;
-    descriptionWrapper: string;
-    descriptionBorder: string;
-    descriptionBg: string;
-    descriptionAngle: string;
-    description: string;
-    leading: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-}, import("tailwind-variants").TVReturnType<{
-    angle: {
-        top: {
-            root: string;
-            leading: string;
-            descriptionAngle: string;
-        };
-        bottom: {
-            root: string;
-            descriptionAngle: string;
-        };
-    };
-}, {
-    root: string;
-    descriptionWrapper: string;
-    descriptionBorder: string;
-    descriptionBg: string;
-    descriptionAngle: string;
-    description: string;
-    leading: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-}, undefined, unknown, unknown, undefined>>>;
-type AdviceVariants = VariantProps<typeof advice>;
+import type { ComponentConfig } from '../types/utils';
+type Advice = ComponentConfig<typeof theme, AppConfig, 'advice'>;
 export interface AdviceProps extends Omit<UseComponentIconsProps, 'loading' | 'trailing' | 'trailingIcon'> {
     /**
      * The element or component this component should render as.
@@ -127,9 +13,9 @@ export interface AdviceProps extends Omit<UseComponentIconsProps, 'loading' | 't
     /**
      * @defaultValue 'bottom'
      */
-    angle?: AdviceVariants['angle'];
+    angle?: Advice['variants']['angle'];
     class?: any;
-    b24ui?: Partial<typeof advice.slots>;
+    b24ui?: Advice['slots'];
 }
 export interface AdviceSlots {
     leading(props?: {}): any;
@@ -143,7 +29,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     angle: string;
 }>>> & Readonly<{}>, {
     as: any;
-    angle: "top" | "bottom";
+    angle: Advice["variants"]["angle"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<AdviceSlots> & AdviceSlots>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {

package/dist/runtime/components/Alert.vue

@@ -1,15 +1,13 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/alert";
-import { tv } from "../utils/tv";
-const appConfigAlert = _appConfig;
-const alert = tv({ extend: tv(theme), ...appConfigAlert.b24ui?.alert || {} });
 </script>
 
 <script setup>
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
+import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
 import B24Avatar from "./Avatar.vue";
 import B24Button from "./Button.vue";
@@ -26,12 +24,13 @@ const props = defineProps({
   close: { type: [Boolean, Object], required: false },
   closeIcon: { type: [Function, Object], required: false },
   class: { type: null, required: false },
-  b24ui: { type: Object, required: false }
+  b24ui: { type: null, required: false }
 });
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const { t } = useLocale();
-const b24ui = computed(() => alert({
+const appConfig = useAppConfig();
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.alert || {} })({
   color: props.color,
   size: props.size,
   orientation: props.orientation,

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

@@ -1,377 +1,8 @@
-import type { VariantProps } from 'tailwind-variants';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/alert';
 import type { AvatarProps, ButtonProps, IconComponent } from '../types';
-declare const alert: import("tailwind-variants").TVReturnType<{
-    color: {
-        default: {
-            root: string[];
-            close: string;
-        };
-        danger: {
-            root: string[];
-            close: string;
-        };
-        success: {
-            root: string[];
-            close: string;
-        };
-        warning: {
-            root: string[];
-            close: string;
-        };
-        primary: {
-            root: string[];
-            close: string;
-        };
-        secondary: {
-            root: string[];
-            close: string;
-        };
-        collab: {
-            root: string[];
-            close: string;
-        };
-        ai: {
-            root: string[];
-            close: string;
-        };
-    };
-    size: {
-        sm: {
-            root: string;
-            title: string;
-            description: string;
-            avatarSize: string;
-        };
-        md: {
-            root: string;
-            title: string;
-            description: string;
-            avatarSize: 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;
-    close: string;
-}, undefined, {
-    color: {
-        default: {
-            root: string[];
-            close: string;
-        };
-        danger: {
-            root: string[];
-            close: string;
-        };
-        success: {
-            root: string[];
-            close: string;
-        };
-        warning: {
-            root: string[];
-            close: string;
-        };
-        primary: {
-            root: string[];
-            close: string;
-        };
-        secondary: {
-            root: string[];
-            close: string;
-        };
-        collab: {
-            root: string[];
-            close: string;
-        };
-        ai: {
-            root: string[];
-            close: string;
-        };
-    };
-    size: {
-        sm: {
-            root: string;
-            title: string;
-            description: string;
-            avatarSize: string;
-        };
-        md: {
-            root: string;
-            title: string;
-            description: string;
-            avatarSize: 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;
-    close: string;
-}, import("tailwind-variants").TVReturnType<{
-    color: {
-        default: {
-            root: string[];
-            close: string;
-        };
-        danger: {
-            root: string[];
-            close: string;
-        };
-        success: {
-            root: string[];
-            close: string;
-        };
-        warning: {
-            root: string[];
-            close: string;
-        };
-        primary: {
-            root: string[];
-            close: string;
-        };
-        secondary: {
-            root: string[];
-            close: string;
-        };
-        collab: {
-            root: string[];
-            close: string;
-        };
-        ai: {
-            root: string[];
-            close: string;
-        };
-    };
-    size: {
-        sm: {
-            root: string;
-            title: string;
-            description: string;
-            avatarSize: string;
-        };
-        md: {
-            root: string;
-            title: string;
-            description: string;
-            avatarSize: 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;
-    close: string;
-}, undefined, {
-    color: {
-        default: {
-            root: string[];
-            close: string;
-        };
-        danger: {
-            root: string[];
-            close: string;
-        };
-        success: {
-            root: string[];
-            close: string;
-        };
-        warning: {
-            root: string[];
-            close: string;
-        };
-        primary: {
-            root: string[];
-            close: string;
-        };
-        secondary: {
-            root: string[];
-            close: string;
-        };
-        collab: {
-            root: string[];
-            close: string;
-        };
-        ai: {
-            root: string[];
-            close: string;
-        };
-    };
-    size: {
-        sm: {
-            root: string;
-            title: string;
-            description: string;
-            avatarSize: string;
-        };
-        md: {
-            root: string;
-            title: string;
-            description: string;
-            avatarSize: 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;
-    close: string;
-}, import("tailwind-variants").TVReturnType<{
-    color: {
-        default: {
-            root: string[];
-            close: string;
-        };
-        danger: {
-            root: string[];
-            close: string;
-        };
-        success: {
-            root: string[];
-            close: string;
-        };
-        warning: {
-            root: string[];
-            close: string;
-        };
-        primary: {
-            root: string[];
-            close: string;
-        };
-        secondary: {
-            root: string[];
-            close: string;
-        };
-        collab: {
-            root: string[];
-            close: string;
-        };
-        ai: {
-            root: string[];
-            close: string;
-        };
-    };
-    size: {
-        sm: {
-            root: string;
-            title: string;
-            description: string;
-            avatarSize: string;
-        };
-        md: {
-            root: string;
-            title: string;
-            description: string;
-            avatarSize: 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;
-    close: string;
-}, undefined, unknown, unknown, undefined>>>;
-type AlertVariants = VariantProps<typeof alert>;
+import type { ComponentConfig } from '../types/utils';
+type Alert = ComponentConfig<typeof theme, AppConfig, 'alert'>;
 export interface AlertProps {
     /**
      * The element or component this component should render as.
@@ -389,16 +20,16 @@ export interface AlertProps {
     /**
      * @defaultValue 'default'
      */
-    color?: AlertVariants['color'];
+    color?: Alert['variants']['color'];
     /**
      * The orientation between the content and the actions.
      * @defaultValue 'vertical'
      */
-    orientation?: AlertVariants['orientation'];
+    orientation?: Alert['variants']['orientation'];
     /**
      * @defaultValue 'md'
      */
-    size?: AlertVariants['size'];
+    size?: Alert['variants']['size'];
     /**
      * Display a list of actions:
      * - under the title and description when orientation is `vertical`
@@ -420,7 +51,7 @@ export interface AlertProps {
      */
     closeIcon?: IconComponent;
     class?: any;
-    b24ui?: Partial<typeof alert.slots>;
+    b24ui?: Alert['slots'];
 }
 export interface AlertEmits {
     (e: 'update:open', value: boolean): void;
@@ -431,13 +62,15 @@ export interface AlertSlots {
     description(props?: {}): any;
     actions(props?: {}): any;
     close(props: {
-        b24ui: ReturnType<typeof alert>;
+        b24ui: {
+            [K in keyof Required<Alert['slots']>]: (props?: Record<string, any>) => string;
+        };
     }): any;
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<AlertProps>, {
     orientation: string;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
-    orientation: "horizontal" | "vertical";
+    orientation: Alert["variants"]["orientation"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<AlertSlots> & AlertSlots>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {

package/dist/runtime/components/Avatar.vue

@@ -1,16 +1,14 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/avatar";
-import { tv } from "../utils/tv";
-const appConfigAvatar = _appConfig;
-const avatar = tv({ extend: tv(theme), ...appConfigAvatar.b24ui?.avatar || {} });
 </script>
 
 <script setup>
 import { ref, computed, watch } from "vue";
 import { Primitive, Slot } from "reka-ui";
+import { useAppConfig } from "#imports";
 import ImageComponent from "#build/b24ui-image-component";
 import { useAvatarGroup } from "../composables/useAvatarGroup";
+import { tv } from "../utils/tv";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "span" },
@@ -21,13 +19,14 @@ const props = defineProps({
   size: { type: null, required: false },
   class: { type: null, required: false },
   style: { type: null, required: false },
-  b24ui: { type: Object, required: false }
+  b24ui: { type: null, required: false }
 });
 const fallback = computed(
   () => props.text || (props.alt || "").replace(/[+\-*)(}\][{]/g, "").split(" ").map((word) => word.charAt(0)).join("").substring(0, 2)
 );
+const appConfig = useAppConfig();
 const { size } = useAvatarGroup(props);
-const b24ui = computed(() => avatar({
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.avatar || {} })({
   size: size.value
 }));
 const sizePx = computed(() => ({