@bitrix24/b24ui-nuxt 0.5.8 → 0.5.10

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

@@ -0,0 +1,640 @@
+import type { VariantProps } from 'tailwind-variants';
+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>;
+export interface ButtonProps extends Omit<UseComponentIconsProps, 'trailing' | 'trailingIcon'>, Omit<LinkProps, 'raw' | 'custom'> {
+    label?: string;
+    /**
+     * @defaultValue 'default'
+     */
+    color?: ButtonVariants['color'];
+    activeColor?: ButtonVariants['color'];
+    /**
+     * @defaultValue 'normal'
+     */
+    depth?: ButtonVariants['depth'];
+    activeDepth?: ButtonVariants['depth'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: ButtonVariants['size'];
+    /**
+     * Rounds the corners of the button
+     * @defaultValue false
+     */
+    rounded?: boolean;
+    /**
+     * Render the button full width
+     * @defaultValue false
+     */
+    block?: boolean;
+    /**
+     * Set loading state automatically based on the `@click` promise state
+     * @defaultValue false
+     */
+    loadingAuto?: boolean;
+    /**
+     * Disable uppercase label
+     * @defaultValue false
+     */
+    normalCase?: boolean;
+    /**
+     * Shows LoaderWaitIcon in loading mode
+     * @defaultValue false
+     */
+    useWait?: boolean;
+    /**
+     * Shows LoaderClockIcon icon in loading mode
+     * @defaultValue false
+     */
+    useClock?: boolean;
+    /**
+     * Shows icons.chevronDown on the right side
+     * @defaultValue false
+     */
+    useDropdown?: boolean;
+    onClick?: ((event: MouseEvent) => void | Promise<void>) | Array<((event: MouseEvent) => void | Promise<void>)>;
+    class?: any;
+    /**
+     * The class to apply when the link is active
+     * @defaultValue ''
+     */
+    activeClass?: string;
+    /**
+     * The class to apply when the link is inactive
+     * @defaultValue ''
+     */
+    inactiveClass?: string;
+    b24ui?: PartialString<typeof button.slots>;
+}
+export interface ButtonSlots {
+    leading(props?: {}): any;
+    default(props?: {}): any;
+    trailing(props?: {}): any;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<ButtonProps>, {
+    type: string;
+    active: undefined;
+    activeClass: string;
+    inactiveClass: string;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<ButtonProps>, {
+    type: string;
+    active: undefined;
+    activeClass: string;
+    inactiveClass: string;
+}>>> & Readonly<{}>, {
+    type: "reset" | "submit" | "button";
+    activeClass: string;
+    active: boolean;
+    inactiveClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<ButtonSlots> & ButtonSlots>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/ButtonGroup.vue

@@ -1,60 +1,44 @@
-<script lang="ts">
-import type { VariantProps } from 'tailwind-variants'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/b24ui/button-group'
-import { tv } from '../utils/tv'
-
-const appConfigButtonGroup = _appConfig as AppConfig & { b24ui: { buttonGroup: Partial<typeof theme> } }
-
-const buttonGroup = tv({ extend: tv(theme), ...(appConfigButtonGroup.b24ui?.buttonGroup) })
-
-type ButtonGroupVariants = VariantProps<typeof buttonGroup>
-
-export interface ButtonGroupProps {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  /**
-   * @defaultValue 'md'
-   */
-  size?: ButtonGroupVariants['size']
-  /**
-   * The orientation the buttons are laid out.
-   * @defaultValue 'horizontal'
-   */
-  orientation?: ButtonGroupVariants['orientation']
-  /**
-   * Disable show split
-   * @defaultValue false
-   */
-  noSplit?: boolean
-  class?: any
-}
-
-export interface ButtonGroupSlots {
-  default(props?: {}): any
-}
+<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 lang="ts">
-import { provide, computed } from 'vue'
-import { Primitive } from 'reka-ui'
-import { buttonGroupInjectionKey } from '../composables/useButtonGroup'
-
-const props = withDefaults(defineProps<ButtonGroupProps>(), {
-  orientation: 'horizontal',
-  noSplit: false
-})
-defineSlots<ButtonGroupSlots>()
-
+<script setup>
+import { provide, computed } from "vue";
+import { buttonGroupInjectionKey } from "../composables/useButtonGroup";
+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
+  }
+});
+defineSlots();
 provide(buttonGroupInjectionKey, computed(() => ({
   orientation: props.orientation,
   noSplit: Boolean(props.noSplit),
   size: props.size
-})))
+})));
 </script>
 
 <template>