@bitrix24/b24ui-nuxt 0.6.0 → 0.6.2

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

@@ -1,363 +1,9 @@
-import type { VariantProps } from 'tailwind-variants';
 import type { TabsRootProps, TabsRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/tabs';
 import type { AvatarProps, IconComponent } from '../types';
-import type { DynamicSlots, PartialString } from '../types/utils';
-declare const tabs: import("tailwind-variants").TVReturnType<{
-    color: {
-        default: string;
-        danger: string;
-        success: string;
-        warning: string;
-        primary: string;
-        secondary: string;
-        collab: string;
-        ai: string;
-    };
-    variant: {
-        pill: {
-            list: string;
-            trigger: string;
-            indicator: string;
-        };
-        link: {
-            list: string;
-            indicator: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            root: string;
-            list: string;
-            indicator: string;
-            trigger: string;
-        };
-        vertical: {
-            list: string;
-            indicator: string;
-        };
-    };
-    size: {
-        xs: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        sm: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        md: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        lg: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        xl: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-    };
-}, {
-    root: string;
-    list: string;
-    indicator: string;
-    trigger: string;
-    content: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    label: string;
-}, undefined, {
-    color: {
-        default: string;
-        danger: string;
-        success: string;
-        warning: string;
-        primary: string;
-        secondary: string;
-        collab: string;
-        ai: string;
-    };
-    variant: {
-        pill: {
-            list: string;
-            trigger: string;
-            indicator: string;
-        };
-        link: {
-            list: string;
-            indicator: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            root: string;
-            list: string;
-            indicator: string;
-            trigger: string;
-        };
-        vertical: {
-            list: string;
-            indicator: string;
-        };
-    };
-    size: {
-        xs: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        sm: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        md: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        lg: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        xl: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-    };
-}, {
-    root: string;
-    list: string;
-    indicator: string;
-    trigger: string;
-    content: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    label: string;
-}, import("tailwind-variants").TVReturnType<{
-    color: {
-        default: string;
-        danger: string;
-        success: string;
-        warning: string;
-        primary: string;
-        secondary: string;
-        collab: string;
-        ai: string;
-    };
-    variant: {
-        pill: {
-            list: string;
-            trigger: string;
-            indicator: string;
-        };
-        link: {
-            list: string;
-            indicator: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            root: string;
-            list: string;
-            indicator: string;
-            trigger: string;
-        };
-        vertical: {
-            list: string;
-            indicator: string;
-        };
-    };
-    size: {
-        xs: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        sm: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        md: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        lg: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        xl: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-    };
-}, {
-    root: string;
-    list: string;
-    indicator: string;
-    trigger: string;
-    content: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    label: string;
-}, undefined, {
-    color: {
-        default: string;
-        danger: string;
-        success: string;
-        warning: string;
-        primary: string;
-        secondary: string;
-        collab: string;
-        ai: string;
-    };
-    variant: {
-        pill: {
-            list: string;
-            trigger: string;
-            indicator: string;
-        };
-        link: {
-            list: string;
-            indicator: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            root: string;
-            list: string;
-            indicator: string;
-            trigger: string;
-        };
-        vertical: {
-            list: string;
-            indicator: string;
-        };
-    };
-    size: {
-        xs: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        sm: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        md: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        lg: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        xl: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-    };
-}, {
-    root: string;
-    list: string;
-    indicator: string;
-    trigger: string;
-    content: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    label: string;
-}, import("tailwind-variants").TVReturnType<{
-    color: {
-        default: string;
-        danger: string;
-        success: string;
-        warning: string;
-        primary: string;
-        secondary: string;
-        collab: string;
-        ai: string;
-    };
-    variant: {
-        pill: {
-            list: string;
-            trigger: string;
-            indicator: string;
-        };
-        link: {
-            list: string;
-            indicator: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            root: string;
-            list: string;
-            indicator: string;
-            trigger: string;
-        };
-        vertical: {
-            list: string;
-            indicator: string;
-        };
-    };
-    size: {
-        xs: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        sm: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        md: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        lg: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-        xl: {
-            trigger: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-        };
-    };
-}, {
-    root: string;
-    list: string;
-    indicator: string;
-    trigger: string;
-    content: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    label: string;
-}, undefined, unknown, unknown, undefined>>>;
+import type { DynamicSlots, ComponentConfig } from '../types/utils';
+type Tabs = ComponentConfig<typeof theme, AppConfig, 'tabs'>;
 export interface TabsItem {
     label?: string;
     /**
@@ -372,7 +18,6 @@ export interface TabsItem {
     disabled?: boolean;
     [key: string]: any;
 }
-type TabsVariants = VariantProps<typeof tabs>;
 export interface TabsProps<T extends TabsItem = TabsItem> extends Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
     /**
      * The element or component this component should render as.
@@ -383,15 +28,15 @@ export interface TabsProps<T extends TabsItem = TabsItem> extends Pick<TabsRootP
     /**
      * @defaultValue 'default'
      */
-    color?: TabsVariants['color'];
+    color?: Tabs['variants']['color'];
     /**
      * @defaultValue 'link'
      */
-    variant?: TabsVariants['variant'];
+    variant?: Tabs['variants']['variant'];
     /**
      * @defaultValue 'md'
      */
-    size?: TabsVariants['size'];
+    size?: Tabs['variants']['size'];
     /**
      * The orientation of the tabs.
      * @defaultValue 'horizontal'
@@ -408,7 +53,7 @@ export interface TabsProps<T extends TabsItem = TabsItem> extends Pick<TabsRootP
      */
     labelKey?: string;
     class?: any;
-    b24ui?: PartialString<typeof tabs.slots>;
+    b24ui?: Tabs['slots'];
 }
 export interface TabsEmits extends TabsRootEmits<string | number> {
 }
@@ -417,10 +62,12 @@ type SlotProps<T extends TabsItem> = (props: {
     index: number;
 }) => any;
 export type TabsSlots<T extends TabsItem = TabsItem> = {
-    leading: SlotProps<T>;
-    default: SlotProps<T>;
-    trailing: SlotProps<T>;
-    content: SlotProps<T>;
+    'leading': SlotProps<T>;
+    'default': SlotProps<T>;
+    'trailing': SlotProps<T>;
+    'content': SlotProps<T>;
+    'list-leading': (props?: {}) => any;
+    'list-trailing': (props?: {}) => any;
 } & DynamicSlots<T, undefined, {
     index: number;
 }>;
@@ -433,6 +80,8 @@ declare const _default: <T extends TabsItem>(__VLS_props: NonNullable<Awaited<ty
         default: SlotProps<T>;
         trailing: SlotProps<T>;
         content: SlotProps<T>;
+        'list-leading': (props?: {}) => any;
+        'list-trailing': (props?: {}) => any;
     } & DynamicSlots<T, undefined, {
         index: number;
     }>> & {
@@ -440,6 +89,8 @@ declare const _default: <T extends TabsItem>(__VLS_props: NonNullable<Awaited<ty
         default: SlotProps<T>;
         trailing: SlotProps<T>;
         content: SlotProps<T>;
+        'list-leading': (props?: {}) => any;
+        'list-trailing': (props?: {}) => any;
     } & DynamicSlots<T, undefined, {
         index: number;
     }>;

package/dist/runtime/components/Textarea.vue

@@ -1,17 +1,15 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/textarea";
-import { tv } from "../utils/tv";
-const appConfigTextarea = _appConfig;
-const textarea = tv({ extend: tv(theme), ...appConfigTextarea.b24ui?.textarea || {} });
 </script>
 
 <script setup>
 import { ref, computed, onMounted, nextTick, watch } from "vue";
 import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { looseToNumber } from "../utils";
+import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -46,12 +44,13 @@ const props = defineProps({
 const slots = defineSlots();
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
 const [modelValue, modelModifiers] = defineModel({ type: [String, Number, null] });
+const appConfig = useAppConfig();
 const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props, { deferInputValidation: true });
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
 const isTag = computed(() => {
   return props.tag;
 });
-const b24ui = computed(() => textarea({
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.textarea || {} })({
   color: color.value,
   loading: props.loading,
   highlight: highlight.value,