@bitrix24/b24ui-nuxt 0.6.0 → 0.6.2

package/dist/runtime/components/Container.vue

@@ -1,22 +1,23 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/container";
-import { tv } from "../utils/tv";
-const appConfigContainer = _appConfig;
-const container = tv({ extend: tv(theme), ...appConfigContainer.b24ui?.container || {} });
 </script>
 
 <script setup>
+import { computed } from "vue";
 import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
   class: { type: null, required: false }
 });
 defineSlots();
+const appConfig = useAppConfig();
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.container || {} }));
 </script>
 
 <template>
-  <Primitive :as="as" :class="container({ class: props.class })">
+  <Primitive :as="as" :class="b24ui({ class: props.class })">
     <slot />
   </Primitive>
 </template>

package/dist/runtime/components/Countdown.vue

@@ -1,15 +1,13 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/countdown";
-import { tv } from "../utils/tv";
-const appConfigCountdown = _appConfig;
-const countdown = tv({ extend: tv(theme), ...appConfigCountdown.b24ui?.countdown || {} });
 </script>
 
 <script setup>
 import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
-import { useComponentIcons } from "../composables/useComponentIcons";
 import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { useComponentIcons } from "../composables/useComponentIcons";
+import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
 const MILLISECONDS_SECOND = 1e3;
 const MILLISECONDS_MINUTE = 60 * MILLISECONDS_SECOND;
@@ -27,7 +25,7 @@ const props = defineProps({
   needStartImmediately: { type: Boolean, required: false, default: true },
   now: { type: Function, required: false, default: () => Date.now() },
   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 }
 });
@@ -36,7 +34,8 @@ defineSlots();
 const { isLeading, leadingIconName } = useComponentIcons(
   computed(() => ({ ...props, loading: false }))
 );
-const b24ui = computed(() => countdown({
+const appConfig = useAppConfig();
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.countdown || {} })({
   size: props.size,
   leading: Boolean(isLeading.value),
   useCircle: Boolean(props.useCircle)

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

@@ -1,242 +1,8 @@
-import type { VariantProps } from 'tailwind-variants';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/countdown';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-declare const countdown: import("tailwind-variants").TVReturnType<{
-    size: {
-        xs: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        sm: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        md: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        lg: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        xl: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-    };
-    leading: {
-        true: string;
-    };
-    useCircle: {
-        true: {
-            base: string;
-            circleBase: string;
-        };
-    };
-}, {
-    base: string;
-    label: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    circleBase: string;
-    circleGroup: string;
-    circleElement: string;
-    circlePath: string;
-}, undefined, {
-    size: {
-        xs: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        sm: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        md: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        lg: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        xl: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-    };
-    leading: {
-        true: string;
-    };
-    useCircle: {
-        true: {
-            base: string;
-            circleBase: string;
-        };
-    };
-}, {
-    base: string;
-    label: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    circleBase: string;
-    circleGroup: string;
-    circleElement: string;
-    circlePath: string;
-}, import("tailwind-variants").TVReturnType<{
-    size: {
-        xs: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        sm: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        md: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        lg: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        xl: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-    };
-    leading: {
-        true: string;
-    };
-    useCircle: {
-        true: {
-            base: string;
-            circleBase: string;
-        };
-    };
-}, {
-    base: string;
-    label: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    circleBase: string;
-    circleGroup: string;
-    circleElement: string;
-    circlePath: string;
-}, undefined, {
-    size: {
-        xs: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        sm: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        md: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        lg: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        xl: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-    };
-    leading: {
-        true: string;
-    };
-    useCircle: {
-        true: {
-            base: string;
-            circleBase: string;
-        };
-    };
-}, {
-    base: string;
-    label: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    circleBase: string;
-    circleGroup: string;
-    circleElement: string;
-    circlePath: string;
-}, import("tailwind-variants").TVReturnType<{
-    size: {
-        xs: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        sm: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        md: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        lg: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        xl: {
-            base: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-    };
-    leading: {
-        true: string;
-    };
-    useCircle: {
-        true: {
-            base: string;
-            circleBase: string;
-        };
-    };
-}, {
-    base: string;
-    label: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    circleBase: string;
-    circleGroup: string;
-    circleElement: string;
-    circlePath: string;
-}, undefined, unknown, unknown, undefined>>>;
-type CountdownVariants = VariantProps<typeof countdown>;
+import type { ComponentConfig } from '../types/utils';
+type Countdown = ComponentConfig<typeof theme, AppConfig, 'countdown'>;
 export interface CountdownData {
     days: number;
     hours: number;
@@ -258,7 +24,7 @@ export interface CountdownProps extends Omit<UseComponentIconsProps, 'loading' |
     /**
      * @defaultValue 'md'
      */
-    size?: CountdownVariants['size'];
+    size?: Countdown['variants']['size'];
     /**
      * Emits the countdown events
      * @defaultValue true
@@ -295,7 +61,7 @@ export interface CountdownProps extends Omit<UseComponentIconsProps, 'loading' |
      */
     now?: () => number;
     class?: any;
-    b24ui?: Partial<typeof countdown.slots>;
+    b24ui?: Countdown['slots'];
 }
 export interface CountdownEmits {
     (e: 'start' | 'end' | 'abort'): void;
@@ -323,10 +89,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     restart: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
     as: any;
-    useCircle: boolean;
     emitEvents: boolean;
     seconds: number | string;
     showMinutes: boolean;
+    useCircle: boolean;
     interval: number;
     needStartImmediately: boolean;
     now: () => number;

package/dist/runtime/components/DescriptionList.vue

@@ -1,14 +1,12 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/description-list";
-import { tv } from "../utils/tv";
-const appConfigDescriptionList = _appConfig;
-const descriptionList = tv({ extend: tv(theme), ...appConfigDescriptionList.b24ui?.descriptionList || {} });
 </script>
 
 <script setup>
 import { computed } from "vue";
+import { useAppConfig } from "#imports";
 import { get } from "../utils";
+import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
 import B24Button from "./Button.vue";
 const props = defineProps({
@@ -19,10 +17,11 @@ const props = defineProps({
   items: { type: Array, required: false },
   size: { type: null, required: false },
   class: { type: null, required: false },
-  b24ui: { type: Object, required: false }
+  b24ui: { type: null, required: false }
 });
 const slots = defineSlots();
-const b24ui = computed(() => descriptionList({
+const appConfig = useAppConfig();
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.descriptionList || {} })({
   size: props.size
 }));
 function normalizeItem(item) {

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

@@ -1,278 +1,8 @@
-import type { VariantProps } from 'tailwind-variants';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/description-list';
 import type { AvatarProps, ButtonProps, IconComponent } from '../types';
-import type { DynamicSlots } from '../types/utils';
-declare const descriptionList: import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: {
-            legend: string;
-            text: string;
-            container: string;
-            labelWrapper: string;
-            avatarSize: string;
-            label: string;
-            descriptionWrapper: string;
-            description: string;
-            footer: string;
-        };
-        md: {
-            legend: string;
-            text: string;
-            container: string;
-            labelWrapper: string;
-            avatarSize: string;
-            label: string;
-            descriptionWrapper: string;
-            description: string;
-            footer: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            descriptionWrapper: string;
-            actions: string;
-        };
-        vertical: {
-            descriptionWrapper: string;
-            actions: string;
-        };
-    };
-    title: {
-        true: {
-            description: string;
-        };
-    };
-}, {
-    root: string;
-    legend: string;
-    text: string;
-    container: string;
-    labelWrapper: string;
-    icon: string;
-    avatar: string;
-    avatarSize: string;
-    label: string;
-    descriptionWrapper: string;
-    description: string;
-    actions: string;
-    footer: string;
-}, undefined, {
-    size: {
-        sm: {
-            legend: string;
-            text: string;
-            container: string;
-            labelWrapper: string;
-            avatarSize: string;
-            label: string;
-            descriptionWrapper: string;
-            description: string;
-            footer: string;
-        };
-        md: {
-            legend: string;
-            text: string;
-            container: string;
-            labelWrapper: string;
-            avatarSize: string;
-            label: string;
-            descriptionWrapper: string;
-            description: string;
-            footer: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            descriptionWrapper: string;
-            actions: string;
-        };
-        vertical: {
-            descriptionWrapper: string;
-            actions: string;
-        };
-    };
-    title: {
-        true: {
-            description: string;
-        };
-    };
-}, {
-    root: string;
-    legend: string;
-    text: string;
-    container: string;
-    labelWrapper: string;
-    icon: string;
-    avatar: string;
-    avatarSize: string;
-    label: string;
-    descriptionWrapper: string;
-    description: string;
-    actions: string;
-    footer: string;
-}, import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: {
-            legend: string;
-            text: string;
-            container: string;
-            labelWrapper: string;
-            avatarSize: string;
-            label: string;
-            descriptionWrapper: string;
-            description: string;
-            footer: string;
-        };
-        md: {
-            legend: string;
-            text: string;
-            container: string;
-            labelWrapper: string;
-            avatarSize: string;
-            label: string;
-            descriptionWrapper: string;
-            description: string;
-            footer: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            descriptionWrapper: string;
-            actions: string;
-        };
-        vertical: {
-            descriptionWrapper: string;
-            actions: string;
-        };
-    };
-    title: {
-        true: {
-            description: string;
-        };
-    };
-}, {
-    root: string;
-    legend: string;
-    text: string;
-    container: string;
-    labelWrapper: string;
-    icon: string;
-    avatar: string;
-    avatarSize: string;
-    label: string;
-    descriptionWrapper: string;
-    description: string;
-    actions: string;
-    footer: string;
-}, undefined, {
-    size: {
-        sm: {
-            legend: string;
-            text: string;
-            container: string;
-            labelWrapper: string;
-            avatarSize: string;
-            label: string;
-            descriptionWrapper: string;
-            description: string;
-            footer: string;
-        };
-        md: {
-            legend: string;
-            text: string;
-            container: string;
-            labelWrapper: string;
-            avatarSize: string;
-            label: string;
-            descriptionWrapper: string;
-            description: string;
-            footer: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            descriptionWrapper: string;
-            actions: string;
-        };
-        vertical: {
-            descriptionWrapper: string;
-            actions: string;
-        };
-    };
-    title: {
-        true: {
-            description: string;
-        };
-    };
-}, {
-    root: string;
-    legend: string;
-    text: string;
-    container: string;
-    labelWrapper: string;
-    icon: string;
-    avatar: string;
-    avatarSize: string;
-    label: string;
-    descriptionWrapper: string;
-    description: string;
-    actions: string;
-    footer: string;
-}, import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: {
-            legend: string;
-            text: string;
-            container: string;
-            labelWrapper: string;
-            avatarSize: string;
-            label: string;
-            descriptionWrapper: string;
-            description: string;
-            footer: string;
-        };
-        md: {
-            legend: string;
-            text: string;
-            container: string;
-            labelWrapper: string;
-            avatarSize: string;
-            label: string;
-            descriptionWrapper: string;
-            description: string;
-            footer: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            descriptionWrapper: string;
-            actions: string;
-        };
-        vertical: {
-            descriptionWrapper: string;
-            actions: string;
-        };
-    };
-    title: {
-        true: {
-            description: string;
-        };
-    };
-}, {
-    root: string;
-    legend: string;
-    text: string;
-    container: string;
-    labelWrapper: string;
-    icon: string;
-    avatar: string;
-    avatarSize: string;
-    label: string;
-    descriptionWrapper: string;
-    description: string;
-    actions: string;
-    footer: string;
-}, undefined, unknown, unknown, undefined>>>;
-type DescriptionListVariants = VariantProps<typeof descriptionList>;
+import type { DynamicSlots, ComponentConfig } from '../types/utils';
+type DescriptionList = ComponentConfig<typeof theme, AppConfig, 'descriptionList'>;
 export interface DescriptionListItem {
     label?: string;
     /**
@@ -287,7 +17,7 @@ export interface DescriptionListItem {
      * The orientation between the content and the actions.
      * @defaultValue 'vertical'
      */
-    orientation?: DescriptionListVariants['orientation'];
+    orientation?: DescriptionList['variants']['orientation'];
     /**
      * Display a list of actions:
      * - under the description when orientation is `vertical`
@@ -296,7 +26,7 @@ export interface DescriptionListItem {
      */
     actions?: ButtonProps[];
     class?: any;
-    b24ui?: Partial<typeof descriptionList.slots>;
+    b24ui?: DescriptionList['slots'];
     [key: string]: any;
 }
 export interface DescriptionListProps<T extends DescriptionListItem = DescriptionListItem> {
@@ -316,9 +46,9 @@ export interface DescriptionListProps<T extends DescriptionListItem = Descriptio
     /**
      * @defaultValue 'md'
      */
-    size?: DescriptionListVariants['size'];
+    size?: DescriptionList['variants']['size'];
     class?: any;
-    b24ui?: Partial<typeof descriptionList.slots>;
+    b24ui?: DescriptionList['slots'];
 }
 type SlotProps<T extends DescriptionListItem> = (props: {
     item: T;