@bitrix24/b24ui-nuxt 0.6.0 → 0.6.1

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

@@ -1,550 +1,25 @@
-import type { VariantProps } from 'tailwind-variants';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/button';
 import type { LinkProps } from './Link.vue';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { PartialString } from '../types/utils';
-declare const button: import("tailwind-variants").TVReturnType<{
-    buttonGroup: {
-        horizontal: string;
-        vertical: string;
-    };
-    noSplit: {
-        false: string;
-    };
-    color: {
-        default: string;
-        danger: string;
-        success: string;
-        warning: string;
-        primary: string;
-        secondary: string;
-        collab: string;
-        ai: string;
-        link: string;
-    };
-    depth: {
-        light: string;
-        normal: string;
-        dark: string;
-    };
-    size: {
-        xs: {
-            base: string;
-            baseLine: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        sm: {
-            base: string;
-            baseLine: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        md: {
-            base: string;
-            baseLine: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        lg: {
-            base: string;
-            baseLine: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-    };
-    block: {
-        true: {
-            base: string;
-            baseLine: string;
-            trailingIcon: string;
-        };
-    };
-    rounded: {
-        true: string;
-        false: string;
-    };
-    leading: {
-        true: string;
-    };
-    useLabel: {
-        true: string;
-        false: string;
-    };
-    useDropdown: {
-        true: string;
-    };
-    useWait: {
-        true: string;
-    };
-    useClock: {
-        true: string;
-    };
-    loading: {
-        true: string;
-    };
-    normalCase: {
-        true: string;
-        false: string;
-    };
-    active: {
-        true: {
-            base: string;
-        };
-        false: {
-            base: string;
-        };
-    };
-}, {
-    base: string[];
-    baseLine: string;
-    label: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    trailingIcon: string;
-    safeList: string;
-}, undefined, {
-    buttonGroup: {
-        horizontal: string;
-        vertical: string;
-    };
-    noSplit: {
-        false: string;
-    };
-    color: {
-        default: string;
-        danger: string;
-        success: string;
-        warning: string;
-        primary: string;
-        secondary: string;
-        collab: string;
-        ai: string;
-        link: string;
-    };
-    depth: {
-        light: string;
-        normal: string;
-        dark: string;
-    };
-    size: {
-        xs: {
-            base: string;
-            baseLine: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        sm: {
-            base: string;
-            baseLine: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        md: {
-            base: string;
-            baseLine: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        lg: {
-            base: string;
-            baseLine: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-    };
-    block: {
-        true: {
-            base: string;
-            baseLine: string;
-            trailingIcon: string;
-        };
-    };
-    rounded: {
-        true: string;
-        false: string;
-    };
-    leading: {
-        true: string;
-    };
-    useLabel: {
-        true: string;
-        false: string;
-    };
-    useDropdown: {
-        true: string;
-    };
-    useWait: {
-        true: string;
-    };
-    useClock: {
-        true: string;
-    };
-    loading: {
-        true: string;
-    };
-    normalCase: {
-        true: string;
-        false: string;
-    };
-    active: {
-        true: {
-            base: string;
-        };
-        false: {
-            base: string;
-        };
-    };
-}, {
-    base: string[];
-    baseLine: string;
-    label: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    trailingIcon: string;
-    safeList: string;
-}, import("tailwind-variants").TVReturnType<{
-    buttonGroup: {
-        horizontal: string;
-        vertical: string;
-    };
-    noSplit: {
-        false: string;
-    };
-    color: {
-        default: string;
-        danger: string;
-        success: string;
-        warning: string;
-        primary: string;
-        secondary: string;
-        collab: string;
-        ai: string;
-        link: string;
-    };
-    depth: {
-        light: string;
-        normal: string;
-        dark: string;
-    };
-    size: {
-        xs: {
-            base: string;
-            baseLine: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        sm: {
-            base: string;
-            baseLine: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        md: {
-            base: string;
-            baseLine: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        lg: {
-            base: string;
-            baseLine: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-    };
-    block: {
-        true: {
-            base: string;
-            baseLine: string;
-            trailingIcon: string;
-        };
-    };
-    rounded: {
-        true: string;
-        false: string;
-    };
-    leading: {
-        true: string;
-    };
-    useLabel: {
-        true: string;
-        false: string;
-    };
-    useDropdown: {
-        true: string;
-    };
-    useWait: {
-        true: string;
-    };
-    useClock: {
-        true: string;
-    };
-    loading: {
-        true: string;
-    };
-    normalCase: {
-        true: string;
-        false: string;
-    };
-    active: {
-        true: {
-            base: string;
-        };
-        false: {
-            base: string;
-        };
-    };
-}, {
-    base: string[];
-    baseLine: string;
-    label: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    trailingIcon: string;
-    safeList: string;
-}, undefined, {
-    buttonGroup: {
-        horizontal: string;
-        vertical: string;
-    };
-    noSplit: {
-        false: string;
-    };
-    color: {
-        default: string;
-        danger: string;
-        success: string;
-        warning: string;
-        primary: string;
-        secondary: string;
-        collab: string;
-        ai: string;
-        link: string;
-    };
-    depth: {
-        light: string;
-        normal: string;
-        dark: string;
-    };
-    size: {
-        xs: {
-            base: string;
-            baseLine: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        sm: {
-            base: string;
-            baseLine: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        md: {
-            base: string;
-            baseLine: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        lg: {
-            base: string;
-            baseLine: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-    };
-    block: {
-        true: {
-            base: string;
-            baseLine: string;
-            trailingIcon: string;
-        };
-    };
-    rounded: {
-        true: string;
-        false: string;
-    };
-    leading: {
-        true: string;
-    };
-    useLabel: {
-        true: string;
-        false: string;
-    };
-    useDropdown: {
-        true: string;
-    };
-    useWait: {
-        true: string;
-    };
-    useClock: {
-        true: string;
-    };
-    loading: {
-        true: string;
-    };
-    normalCase: {
-        true: string;
-        false: string;
-    };
-    active: {
-        true: {
-            base: string;
-        };
-        false: {
-            base: string;
-        };
-    };
-}, {
-    base: string[];
-    baseLine: string;
-    label: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    trailingIcon: string;
-    safeList: string;
-}, import("tailwind-variants").TVReturnType<{
-    buttonGroup: {
-        horizontal: string;
-        vertical: string;
-    };
-    noSplit: {
-        false: string;
-    };
-    color: {
-        default: string;
-        danger: string;
-        success: string;
-        warning: string;
-        primary: string;
-        secondary: string;
-        collab: string;
-        ai: string;
-        link: string;
-    };
-    depth: {
-        light: string;
-        normal: string;
-        dark: string;
-    };
-    size: {
-        xs: {
-            base: string;
-            baseLine: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        sm: {
-            base: string;
-            baseLine: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        md: {
-            base: string;
-            baseLine: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-        lg: {
-            base: string;
-            baseLine: string;
-            leadingIcon: string;
-            leadingAvatarSize: string;
-            trailingIcon: string;
-        };
-    };
-    block: {
-        true: {
-            base: string;
-            baseLine: string;
-            trailingIcon: string;
-        };
-    };
-    rounded: {
-        true: string;
-        false: string;
-    };
-    leading: {
-        true: string;
-    };
-    useLabel: {
-        true: string;
-        false: string;
-    };
-    useDropdown: {
-        true: string;
-    };
-    useWait: {
-        true: string;
-    };
-    useClock: {
-        true: string;
-    };
-    loading: {
-        true: string;
-    };
-    normalCase: {
-        true: string;
-        false: string;
-    };
-    active: {
-        true: {
-            base: string;
-        };
-        false: {
-            base: string;
-        };
-    };
-}, {
-    base: string[];
-    baseLine: string;
-    label: string;
-    leadingIcon: string;
-    leadingAvatar: string;
-    leadingAvatarSize: string;
-    trailingIcon: string;
-    safeList: string;
-}, undefined, unknown, unknown, undefined>>>;
-type ButtonVariants = VariantProps<typeof button>;
+import type { ComponentConfig } from '../types/utils';
+type Button = ComponentConfig<typeof theme, AppConfig, 'button'>;
 export interface ButtonProps extends Omit<UseComponentIconsProps, 'trailing' | 'trailingIcon'>, Omit<LinkProps, 'raw' | 'custom'> {
     label?: string;
     /**
      * @defaultValue 'default'
      */
-    color?: ButtonVariants['color'];
-    activeColor?: ButtonVariants['color'];
+    color?: Button['variants']['color'];
+    activeColor?: Button['variants']['color'];
     /**
      * @defaultValue 'normal'
      */
-    depth?: ButtonVariants['depth'];
-    activeDepth?: ButtonVariants['depth'];
+    depth?: Button['variants']['depth'];
+    activeDepth?: Button['variants']['depth'];
     /**
      * @defaultValue 'md'
      */
-    size?: ButtonVariants['size'];
+    size?: Button['variants']['size'];
     /**
      * Rounds the corners of the button
      * @defaultValue false
@@ -592,7 +67,7 @@ export interface ButtonProps extends Omit<UseComponentIconsProps, 'trailing' | '
      * @defaultValue ''
      */
     inactiveClass?: string;
-    b24ui?: PartialString<typeof button.slots>;
+    b24ui?: Button['slots'];
 }
 export interface ButtonSlots {
     leading(props?: {}): any;

package/dist/runtime/components/ButtonGroup.vue

@@ -1,23 +1,24 @@
 <script>
-import _appConfig from "#build/app.config";
 import theme from "#build/b24ui/button-group";
-import { tv } from "../utils/tv";
-const appConfigButtonGroup = _appConfig;
-const buttonGroup = tv({ extend: tv(theme), ...appConfigButtonGroup.b24ui?.buttonGroup });
 </script>
 
 <script setup>
 import { provide, computed } from "vue";
 import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
 import { buttonGroupInjectionKey } from "../composables/useButtonGroup";
+import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
   size: { type: null, required: false },
   orientation: { type: null, required: false, default: "horizontal" },
   noSplit: { type: Boolean, required: false, default: false },
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  b24ui: { type: null, required: false }
 });
 defineSlots();
+const appConfig = useAppConfig();
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.buttonGroup || {} }));
 provide(buttonGroupInjectionKey, computed(() => ({
   orientation: props.orientation,
   noSplit: Boolean(props.noSplit),
@@ -26,7 +27,11 @@ provide(buttonGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" class="group/items is-button-group" :class="buttonGroup({ orientation, class: props.class })">
+  <Primitive
+    :as="as"
+    class="group/items is-button-group"
+    :class="b24ui({ orientation, class: props.class })"
+  >
     <slot />
   </Primitive>
 </template>

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

@@ -1,61 +1,7 @@
-import type { VariantProps } from 'tailwind-variants';
-declare const buttonGroup: import("tailwind-variants").TVReturnType<{
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    orientation: {
-        horizontal: string;
-        vertical: string;
-    };
-}, undefined, string, {
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    orientation: {
-        horizontal: string;
-        vertical: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    orientation: {
-        horizontal: string;
-        vertical: string;
-    };
-}, undefined, string, {
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    orientation: {
-        horizontal: string;
-        vertical: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    orientation: {
-        horizontal: string;
-        vertical: string;
-    };
-}, undefined, string, unknown, unknown, undefined>>>;
-type ButtonGroupVariants = VariantProps<typeof buttonGroup>;
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/button-group';
+import type { ComponentConfig } from '../types/utils';
+type ButtonGroup = ComponentConfig<typeof theme, AppConfig, 'buttonGroup'>;
 export interface ButtonGroupProps {
     /**
      * The element or component this component should render as.
@@ -65,18 +11,19 @@ export interface ButtonGroupProps {
     /**
      * @defaultValue 'md'
      */
-    size?: ButtonGroupVariants['size'];
+    size?: ButtonGroup['variants']['size'];
     /**
      * The orientation the buttons are laid out.
      * @defaultValue 'horizontal'
      */
-    orientation?: ButtonGroupVariants['orientation'];
+    orientation?: ButtonGroup['variants']['orientation'];
     /**
      * Disable show split
      * @defaultValue false
      */
     noSplit?: boolean;
     class?: any;
+    b24ui?: ButtonGroup['slots'];
 }
 export interface ButtonGroupSlots {
     default(props?: {}): any;
@@ -88,7 +35,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     orientation: string;
     noSplit: boolean;
 }>>> & Readonly<{}>, {
-    orientation: "horizontal" | "vertical";
+    orientation: ButtonGroup["variants"]["orientation"];
     noSplit: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<ButtonGroupSlots> & ButtonGroupSlots>;
 export default _default;