@bitrix24/b24ui-nuxt 0.6.0 → 0.6.1

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

@@ -1,447 +1,8 @@
-import type { VariantProps } from 'tailwind-variants';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/badge';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-declare const badge: import("tailwind-variants").TVReturnType<{
-    buttonGroup: {
-        horizontal: string;
-        vertical: string;
-    };
-    noSplit: {
-        false: string;
-    };
-    useLink: {
-        true: {
-            base: string;
-            wrapper: string;
-            label: string;
-        };
-    };
-    useClose: {
-        true: string;
-    };
-    useFill: {
-        true: string;
-        false: string;
-    };
-    leading: {
-        true: string;
-    };
-    color: {
-        default: string;
-        danger: string;
-        success: string;
-        warning: string;
-        primary: string;
-        secondary: string;
-        collab: string;
-        ai: string;
-    };
-    depth: {
-        light: string;
-        normal: string;
-        dark: string;
-    };
-    size: {
-        xs: {
-            base: string;
-            wrapper: string;
-            label: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        sm: {
-            base: string;
-            wrapper: string;
-            label: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        md: {
-            base: string;
-            wrapper: string;
-            label: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        lg: {
-            base: string;
-            wrapper: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        xl: {
-            base: string;
-            wrapper: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-    };
-}, {
-    base: string;
-    wrapper: string;
-    label: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    trailingIcon: string;
-}, undefined, {
-    buttonGroup: {
-        horizontal: string;
-        vertical: string;
-    };
-    noSplit: {
-        false: string;
-    };
-    useLink: {
-        true: {
-            base: string;
-            wrapper: string;
-            label: string;
-        };
-    };
-    useClose: {
-        true: string;
-    };
-    useFill: {
-        true: string;
-        false: string;
-    };
-    leading: {
-        true: string;
-    };
-    color: {
-        default: string;
-        danger: string;
-        success: string;
-        warning: string;
-        primary: string;
-        secondary: string;
-        collab: string;
-        ai: string;
-    };
-    depth: {
-        light: string;
-        normal: string;
-        dark: string;
-    };
-    size: {
-        xs: {
-            base: string;
-            wrapper: string;
-            label: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        sm: {
-            base: string;
-            wrapper: string;
-            label: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        md: {
-            base: string;
-            wrapper: string;
-            label: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        lg: {
-            base: string;
-            wrapper: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        xl: {
-            base: string;
-            wrapper: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-    };
-}, {
-    base: string;
-    wrapper: string;
-    label: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    trailingIcon: string;
-}, import("tailwind-variants").TVReturnType<{
-    buttonGroup: {
-        horizontal: string;
-        vertical: string;
-    };
-    noSplit: {
-        false: string;
-    };
-    useLink: {
-        true: {
-            base: string;
-            wrapper: string;
-            label: string;
-        };
-    };
-    useClose: {
-        true: string;
-    };
-    useFill: {
-        true: string;
-        false: string;
-    };
-    leading: {
-        true: string;
-    };
-    color: {
-        default: string;
-        danger: string;
-        success: string;
-        warning: string;
-        primary: string;
-        secondary: string;
-        collab: string;
-        ai: string;
-    };
-    depth: {
-        light: string;
-        normal: string;
-        dark: string;
-    };
-    size: {
-        xs: {
-            base: string;
-            wrapper: string;
-            label: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        sm: {
-            base: string;
-            wrapper: string;
-            label: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        md: {
-            base: string;
-            wrapper: string;
-            label: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        lg: {
-            base: string;
-            wrapper: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        xl: {
-            base: string;
-            wrapper: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-    };
-}, {
-    base: string;
-    wrapper: string;
-    label: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    trailingIcon: string;
-}, undefined, {
-    buttonGroup: {
-        horizontal: string;
-        vertical: string;
-    };
-    noSplit: {
-        false: string;
-    };
-    useLink: {
-        true: {
-            base: string;
-            wrapper: string;
-            label: string;
-        };
-    };
-    useClose: {
-        true: string;
-    };
-    useFill: {
-        true: string;
-        false: string;
-    };
-    leading: {
-        true: string;
-    };
-    color: {
-        default: string;
-        danger: string;
-        success: string;
-        warning: string;
-        primary: string;
-        secondary: string;
-        collab: string;
-        ai: string;
-    };
-    depth: {
-        light: string;
-        normal: string;
-        dark: string;
-    };
-    size: {
-        xs: {
-            base: string;
-            wrapper: string;
-            label: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        sm: {
-            base: string;
-            wrapper: string;
-            label: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        md: {
-            base: string;
-            wrapper: string;
-            label: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        lg: {
-            base: string;
-            wrapper: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        xl: {
-            base: string;
-            wrapper: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-    };
-}, {
-    base: string;
-    wrapper: string;
-    label: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    trailingIcon: string;
-}, import("tailwind-variants").TVReturnType<{
-    buttonGroup: {
-        horizontal: string;
-        vertical: string;
-    };
-    noSplit: {
-        false: string;
-    };
-    useLink: {
-        true: {
-            base: string;
-            wrapper: string;
-            label: string;
-        };
-    };
-    useClose: {
-        true: string;
-    };
-    useFill: {
-        true: string;
-        false: string;
-    };
-    leading: {
-        true: string;
-    };
-    color: {
-        default: string;
-        danger: string;
-        success: string;
-        warning: string;
-        primary: string;
-        secondary: string;
-        collab: string;
-        ai: string;
-    };
-    depth: {
-        light: string;
-        normal: string;
-        dark: string;
-    };
-    size: {
-        xs: {
-            base: string;
-            wrapper: string;
-            label: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        sm: {
-            base: string;
-            wrapper: string;
-            label: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        md: {
-            base: string;
-            wrapper: string;
-            label: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        lg: {
-            base: string;
-            wrapper: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        xl: {
-            base: string;
-            wrapper: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-    };
-}, {
-    base: string;
-    wrapper: string;
-    label: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    trailingIcon: string;
-}, undefined, unknown, unknown, undefined>>>;
-type BadgeVariants = VariantProps<typeof badge>;
+import type { ComponentConfig } from '../types/utils';
+type Badge = ComponentConfig<typeof theme, AppConfig, 'badge'>;
 export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
     /**
      * The element or component this component should render as.
@@ -452,15 +13,15 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
     /**
      * @defaultValue 'default'
      */
-    color?: BadgeVariants['color'];
+    color?: Badge['variants']['color'];
     /**
      * @defaultValue 'normal'
      */
-    depth?: BadgeVariants['depth'];
+    depth?: Badge['variants']['depth'];
     /**
      * @defaultValue 'md'
      */
-    size?: BadgeVariants['size'];
+    size?: Badge['variants']['size'];
     /**
      * Shows 'underline' on hover
      * @defaultValue false
@@ -478,7 +39,7 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
      */
     useFill?: boolean;
     class?: any;
-    b24ui?: Partial<typeof badge.slots>;
+    b24ui?: Badge['slots'];
 }
 export interface BadgeSlots {
     leading(props?: {}): any;

package/dist/runtime/components/Button.vue

@@ -1,18 +1,17 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/button";
-import { tv } from "../utils/tv";
-const appConfigButton = _appConfig;
-const button = tv({ extend: tv(theme), ...appConfigButton.b24ui?.button || {} });
 </script>
 
 <script setup>
 import { computed, ref, inject } from "vue";
+import { defu } from "defu";
 import { useForwardProps } from "reka-ui";
+import { useAppConfig } from "#imports";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useButtonGroup } from "../composables/useButtonGroup";
 import { formLoadingInjectionKey } from "../composables/useFormField";
 import { omit } from "../utils";
+import { tv } from "../utils/tv";
 import { pickLinkProps } from "../utils/link";
 import B24Avatar from "./Avatar.vue";
 import B24Link from "./Link.vue";
@@ -67,11 +66,12 @@ const props = defineProps({
   replace: { type: Boolean, required: false }
 });
 const slots = defineSlots();
+const appConfig = useAppConfig();
+const { orientation, size: buttonSize, noSplit } = useButtonGroup(props);
 const linkProps = useForwardProps(pickLinkProps(props));
 const proxyLinkProps = computed(() => {
   return omit(linkProps.value, ["type", "disabled", "onClick"]);
 });
-const { orientation, size: buttonSize, noSplit } = useButtonGroup(props);
 const loadingAutoState = ref(false);
 const formLoading = inject(formLoadingInjectionKey, void 0);
 async function onClickWrapper(event) {
@@ -97,17 +97,19 @@ const isLabel = computed(() => {
   return (props?.label || "").length > 0 || isUseSlot;
 });
 const b24ui = computed(() => tv({
-  extend: button,
-  variants: {
-    active: {
-      true: {
-        base: props.activeClass
-      },
-      false: {
-        base: props.inactiveClass
+  extend: tv(theme),
+  ...defu({
+    variants: {
+      active: {
+        true: {
+          base: props.activeClass
+        },
+        false: {
+          base: props.inactiveClass
+        }
       }
     }
-  }
+  }, appConfig.b24ui?.button || {})
 })({
   color: props.color,
   depth: props.depth,