@bitrix24/b24ui-nuxt 0.6.0 → 0.6.1

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

@@ -1,227 +1,8 @@
-import type { VariantProps } from 'tailwind-variants';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/avatar';
+import type { ComponentConfig } from '../types/utils';
 import type { IconComponent } from '../types';
-declare const avatar: import("tailwind-variants").TVReturnType<{
-    size: {
-        "3xs": {
-            root: string;
-            icon: string;
-        };
-        "2xs": {
-            root: string;
-            icon: string;
-        };
-        xs: {
-            root: string;
-            icon: string;
-        };
-        sm: {
-            root: string;
-            icon: string;
-        };
-        md: {
-            root: string;
-            icon: string;
-        };
-        lg: {
-            root: string;
-            icon: string;
-        };
-        xl: {
-            root: string;
-            icon: string;
-        };
-        "2xl": {
-            root: string;
-            icon: string;
-        };
-        "3xl": {
-            root: string;
-            icon: string;
-        };
-    };
-}, {
-    root: string;
-    image: string;
-    fallback: string;
-    icon: string;
-}, undefined, {
-    size: {
-        "3xs": {
-            root: string;
-            icon: string;
-        };
-        "2xs": {
-            root: string;
-            icon: string;
-        };
-        xs: {
-            root: string;
-            icon: string;
-        };
-        sm: {
-            root: string;
-            icon: string;
-        };
-        md: {
-            root: string;
-            icon: string;
-        };
-        lg: {
-            root: string;
-            icon: string;
-        };
-        xl: {
-            root: string;
-            icon: string;
-        };
-        "2xl": {
-            root: string;
-            icon: string;
-        };
-        "3xl": {
-            root: string;
-            icon: string;
-        };
-    };
-}, {
-    root: string;
-    image: string;
-    fallback: string;
-    icon: string;
-}, import("tailwind-variants").TVReturnType<{
-    size: {
-        "3xs": {
-            root: string;
-            icon: string;
-        };
-        "2xs": {
-            root: string;
-            icon: string;
-        };
-        xs: {
-            root: string;
-            icon: string;
-        };
-        sm: {
-            root: string;
-            icon: string;
-        };
-        md: {
-            root: string;
-            icon: string;
-        };
-        lg: {
-            root: string;
-            icon: string;
-        };
-        xl: {
-            root: string;
-            icon: string;
-        };
-        "2xl": {
-            root: string;
-            icon: string;
-        };
-        "3xl": {
-            root: string;
-            icon: string;
-        };
-    };
-}, {
-    root: string;
-    image: string;
-    fallback: string;
-    icon: string;
-}, undefined, {
-    size: {
-        "3xs": {
-            root: string;
-            icon: string;
-        };
-        "2xs": {
-            root: string;
-            icon: string;
-        };
-        xs: {
-            root: string;
-            icon: string;
-        };
-        sm: {
-            root: string;
-            icon: string;
-        };
-        md: {
-            root: string;
-            icon: string;
-        };
-        lg: {
-            root: string;
-            icon: string;
-        };
-        xl: {
-            root: string;
-            icon: string;
-        };
-        "2xl": {
-            root: string;
-            icon: string;
-        };
-        "3xl": {
-            root: string;
-            icon: string;
-        };
-    };
-}, {
-    root: string;
-    image: string;
-    fallback: string;
-    icon: string;
-}, import("tailwind-variants").TVReturnType<{
-    size: {
-        "3xs": {
-            root: string;
-            icon: string;
-        };
-        "2xs": {
-            root: string;
-            icon: string;
-        };
-        xs: {
-            root: string;
-            icon: string;
-        };
-        sm: {
-            root: string;
-            icon: string;
-        };
-        md: {
-            root: string;
-            icon: string;
-        };
-        lg: {
-            root: string;
-            icon: string;
-        };
-        xl: {
-            root: string;
-            icon: string;
-        };
-        "2xl": {
-            root: string;
-            icon: string;
-        };
-        "3xl": {
-            root: string;
-            icon: string;
-        };
-    };
-}, {
-    root: string;
-    image: string;
-    fallback: string;
-    icon: string;
-}, undefined, unknown, unknown, undefined>>>;
-type AvatarVariants = VariantProps<typeof avatar>;
+type Avatar = ComponentConfig<typeof theme, AppConfig, 'avatar'>;
 export interface AvatarProps {
     /**
      * The element or component this component should render as.
@@ -239,10 +20,10 @@ export interface AvatarProps {
     /**
      * @defaultValue 'md'
      */
-    size?: AvatarVariants['size'];
+    size?: Avatar['variants']['size'];
     class?: any;
     style?: any;
-    b24ui?: Partial<typeof avatar.slots>;
+    b24ui?: Avatar['slots'];
 }
 export interface AvatarSlots {
     default(props?: {}): any;

package/dist/runtime/components/AvatarGroup.vue

@@ -1,25 +1,24 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/avatar-group";
-import { tv } from "../utils/tv";
-const appConfigAvatarGroup = _appConfig;
-const avatarGroup = tv({ extend: tv(theme), ...appConfigAvatarGroup.b24ui?.avatarGroup || {} });
 </script>
 
 <script setup>
 import { computed, provide } from "vue";
 import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
 import { avatarGroupInjectionKey } from "../composables/useAvatarGroup";
+import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
 const props = defineProps({
   as: { type: null, required: false },
   size: { type: null, required: false },
   max: { type: [Number, String], required: false },
   class: { type: null, required: false },
-  b24ui: { type: Object, required: false }
+  b24ui: { type: null, required: false }
 });
 const slots = defineSlots();
-const b24ui = computed(() => avatarGroup({
+const appConfig = useAppConfig();
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.avatarGroup || {} })({
   size: props.size
 }));
 const max = computed(() => typeof props.max === "string" ? Number.parseInt(props.max, 10) : props.max);

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

@@ -1,171 +1,7 @@
-import type { VariantProps } from 'tailwind-variants';
-declare const avatarGroup: import("tailwind-variants").TVReturnType<{
-    size: {
-        "3xs": {
-            base: string;
-        };
-        "2xs": {
-            base: string;
-        };
-        xs: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        lg: {
-            base: string;
-        };
-        xl: {
-            base: string;
-        };
-        "2xl": {
-            base: string;
-        };
-        "3xl": {
-            base: string;
-        };
-    };
-}, {
-    root: string;
-    base: string;
-}, undefined, {
-    size: {
-        "3xs": {
-            base: string;
-        };
-        "2xs": {
-            base: string;
-        };
-        xs: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        lg: {
-            base: string;
-        };
-        xl: {
-            base: string;
-        };
-        "2xl": {
-            base: string;
-        };
-        "3xl": {
-            base: string;
-        };
-    };
-}, {
-    root: string;
-    base: string;
-}, import("tailwind-variants").TVReturnType<{
-    size: {
-        "3xs": {
-            base: string;
-        };
-        "2xs": {
-            base: string;
-        };
-        xs: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        lg: {
-            base: string;
-        };
-        xl: {
-            base: string;
-        };
-        "2xl": {
-            base: string;
-        };
-        "3xl": {
-            base: string;
-        };
-    };
-}, {
-    root: string;
-    base: string;
-}, undefined, {
-    size: {
-        "3xs": {
-            base: string;
-        };
-        "2xs": {
-            base: string;
-        };
-        xs: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        lg: {
-            base: string;
-        };
-        xl: {
-            base: string;
-        };
-        "2xl": {
-            base: string;
-        };
-        "3xl": {
-            base: string;
-        };
-    };
-}, {
-    root: string;
-    base: string;
-}, import("tailwind-variants").TVReturnType<{
-    size: {
-        "3xs": {
-            base: string;
-        };
-        "2xs": {
-            base: string;
-        };
-        xs: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        lg: {
-            base: string;
-        };
-        xl: {
-            base: string;
-        };
-        "2xl": {
-            base: string;
-        };
-        "3xl": {
-            base: string;
-        };
-    };
-}, {
-    root: string;
-    base: string;
-}, undefined, unknown, unknown, undefined>>>;
-type AvatarGroupVariants = VariantProps<typeof avatarGroup>;
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/avatar-group';
+import type { ComponentConfig } from '../types/utils';
+type AvatarGroup = ComponentConfig<typeof theme, AppConfig, 'avatarGroup'>;
 export interface AvatarGroupProps {
     /**
      * The element or component this component should render as.
@@ -175,13 +11,13 @@ export interface AvatarGroupProps {
     /**
      * @defaultValue 'md'
      */
-    size?: AvatarGroupVariants['size'];
+    size?: AvatarGroup['variants']['size'];
     /**
      * The maximum number of avatars to display.
      */
     max?: number | string;
     class?: any;
-    b24ui?: Partial<typeof avatarGroup.slots>;
+    b24ui?: AvatarGroup['slots'];
 }
 export interface AvatarGroupSlots {
     default(props?: {}): any;

package/dist/runtime/components/Badge.vue

@@ -1,16 +1,14 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/badge";
-import { tv } from "../utils/tv";
-const appConfigBadge = _appConfig;
-const badge = tv({ extend: tv(theme), ...appConfigBadge.b24ui?.badge || {} });
 </script>
 
 <script setup>
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
 import { useButtonGroup } from "../composables/useButtonGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
+import { tv } from "../utils/tv";
 import Cross20Icon from "@bitrix24/b24icons-vue/actions/Cross20Icon";
 import B24Avatar from "./Avatar.vue";
 const props = defineProps({
@@ -24,13 +22,14 @@ const props = defineProps({
   onCloseClick: { type: [Function, Array], required: false },
   useFill: { type: Boolean, required: false },
   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 },
   trailing: { type: Boolean, required: false },
   trailingIcon: { type: [Function, Object], required: false }
 });
 defineSlots();
+const appConfig = useAppConfig();
 async function onCloseClickWrapper(event) {
   const callbacks = Array.isArray(props.onCloseClick) ? props.onCloseClick : [props.onCloseClick];
   try {
@@ -40,7 +39,7 @@ async function onCloseClickWrapper(event) {
 }
 const { orientation, size: buttonGroupSize } = useButtonGroup(props);
 const { isLeading, leadingIconName } = useComponentIcons(props);
-const b24ui = computed(() => badge({
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.badge || {} })({
   color: props.color,
   depth: props.depth,
   size: buttonGroupSize.value || props.size,