@bitrix24/b24ui-nuxt 2.1.17 → 2.2.1

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitrix24/b24ui-nuxt",
-  "version": "2.1.17",
+  "version": "2.2.1",
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
   "configKey": "b24ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit';
-import { d as defaultOptions, v as version, n as name, a as getDefaultConfig, b as addTemplates } from './shared/b24ui-nuxt.BeTQIwtu.mjs';
+import { d as defaultOptions, v as version, n as name, a as getDefaultConfig, b as addTemplates } from './shared/b24ui-nuxt.C-CS9MBp.mjs';
 import 'node:url';
 import 'scule';
 import 'knitwork';

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

@@ -0,0 +1,81 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { VirtualItem, VirtualizerOptions } from '@tanstack/vue-virtual';
+import theme from '#build/b24ui/scroll-area';
+import type { ComponentConfig } from '../types/tv';
+type ScrollArea = ComponentConfig<typeof theme, AppConfig, 'scrollArea'>;
+export interface ScrollAreaVirtualizeOptions extends Partial<Omit<VirtualizerOptions<Element, Element>, 'count' | 'getScrollElement' | 'horizontal' | 'isRtl' | 'estimateSize' | 'lanes' | 'enabled'>> {
+    /**
+     * Estimated size (in px) of each item along the scroll axis. Can be a number or a function.
+     * @defaultValue 100
+     */
+    estimateSize?: number | ((index: number) => number);
+    /**
+     * Number of lanes for multi-column/row layouts.
+     * For responsive lane counts, use a computed property with viewport/container size:
+     * @example
+     * ```ts
+     * const { width } = useWindowSize()
+     * const lanes = computed(() => Math.floor(width.value / 300))
+     * ```
+     * @defaultValue undefined
+     */
+    lanes?: number;
+}
+export type ScrollAreaItem = any;
+export interface ScrollAreaProps<T extends ScrollAreaItem = ScrollAreaItem> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The scroll direction.
+     * @defaultValue 'vertical'
+     */
+    orientation?: ScrollArea['variants']['orientation'];
+    /**
+     * Array of items to render.
+     */
+    items?: T[];
+    /**
+     * Enable virtualization for large lists.
+     * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
+     * @defaultValue false
+     */
+    virtualize?: boolean | ScrollAreaVirtualizeOptions;
+    class?: any;
+    b24ui?: ScrollArea['slots'];
+}
+export interface ScrollAreaSlots<T extends ScrollAreaItem = ScrollAreaItem> {
+    default(props: {
+        item: T;
+        index: number;
+        virtualItem?: VirtualItem;
+    } | Record<string, never>): any;
+}
+export interface ScrollAreaEmits {
+    /**
+     * Emitted when scroll state changes
+     * @param isScrolling - Whether the list is currently being scrolled
+     */
+    scroll: [isScrolling: boolean];
+}
+declare const __VLS_export: <T extends ScrollAreaItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<ScrollAreaProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "scroll", isScrolling: boolean) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        readonly $el: HTMLElement;
+        virtualizer: import("vue").Ref<import("@tanstack/vue-virtual").Virtualizer<Element, Element>, import("@tanstack/vue-virtual").Virtualizer<Element, Element>> | undefined;
+    }>) => void;
+    attrs: any;
+    slots: ScrollAreaSlots<T>;
+    emit: (evt: "scroll", isScrolling: boolean) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/ScrollArea.vue

@@ -0,0 +1,187 @@
+<script>
+import theme from "#build/b24ui/scroll-area";
+</script>
+
+<script setup>
+import { computed, toRef, useTemplateRef, watch } from "vue";
+import { Primitive } from "reka-ui";
+import { defu } from "defu";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+import { useLocale } from "../composables/useLocale";
+const props = defineProps({
+  as: { type: null, required: false },
+  orientation: { type: null, required: false, default: "vertical" },
+  items: { type: Array, required: false },
+  virtualize: { type: [Boolean, Object], required: false, default: false },
+  class: { type: null, required: false },
+  b24ui: { type: null, required: false }
+});
+defineSlots();
+const emits = defineEmits(["scroll"]);
+const { dir } = useLocale();
+const appConfig = useAppConfig();
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.scrollArea || {} })({
+  orientation: props.orientation
+}));
+const rootRef = useTemplateRef("rootRef");
+const isRtl = computed(() => dir.value === "rtl");
+const isHorizontal = computed(() => props.orientation === "horizontal");
+const isVertical = computed(() => !isHorizontal.value);
+const virtualizerProps = toRef(() => {
+  const options = typeof props.virtualize === "boolean" ? {} : props.virtualize;
+  return defu(options, {
+    estimateSize: 100,
+    overscan: 12,
+    gap: 0,
+    paddingStart: 0,
+    paddingEnd: 0,
+    scrollMargin: 0
+  });
+});
+const lanes = computed(() => {
+  const value = virtualizerProps.value.lanes;
+  return typeof value === "number" ? value : void 0;
+});
+const virtualizer = !!props.virtualize && useVirtualizer({
+  ...virtualizerProps.value,
+  get overscan() {
+    return virtualizerProps.value.overscan;
+  },
+  get gap() {
+    return virtualizerProps.value.gap;
+  },
+  get paddingStart() {
+    return virtualizerProps.value.paddingStart;
+  },
+  get paddingEnd() {
+    return virtualizerProps.value.paddingEnd;
+  },
+  get scrollMargin() {
+    return virtualizerProps.value.scrollMargin;
+  },
+  get lanes() {
+    return lanes.value;
+  },
+  get isRtl() {
+    return isRtl.value;
+  },
+  get count() {
+    return props.items?.length || 0;
+  },
+  getScrollElement: () => rootRef.value?.$el,
+  get horizontal() {
+    return isHorizontal.value;
+  },
+  estimateSize: (index) => {
+    const estimate = virtualizerProps.value.estimateSize;
+    return typeof estimate === "function" ? estimate(index) : estimate;
+  }
+});
+const virtualItems = computed(() => virtualizer ? virtualizer.value.getVirtualItems() : []);
+const totalSize = computed(() => virtualizer ? virtualizer.value.getTotalSize() : 0);
+const virtualViewportStyle = computed(() => ({
+  position: "relative",
+  inlineSize: isHorizontal.value ? `${totalSize.value}px` : "100%",
+  blockSize: isVertical.value ? `${totalSize.value}px` : "100%"
+}));
+function getVirtualItemStyle(virtualItem) {
+  const hasLanes = lanes.value !== void 0 && lanes.value > 1;
+  const lane = virtualItem.lane;
+  const gap = virtualizerProps.value.gap ?? 0;
+  const laneSize = hasLanes ? `calc((100% - ${(lanes.value - 1) * gap}px) / ${lanes.value})` : "100%";
+  const lanePosition = hasLanes && lane !== void 0 ? `calc(${lane} * ((100% - ${(lanes.value - 1) * gap}px) / ${lanes.value} + ${gap}px))` : 0;
+  return {
+    position: "absolute",
+    insetBlockStart: isHorizontal.value && hasLanes ? lanePosition : 0,
+    insetInlineStart: isVertical.value && hasLanes ? lanePosition : 0,
+    blockSize: isHorizontal.value ? hasLanes ? laneSize : "100%" : void 0,
+    inlineSize: isVertical.value ? hasLanes ? laneSize : "100%" : void 0,
+    transform: isHorizontal.value ? `translateX(${isRtl.value ? -virtualItem.start : virtualItem.start}px)` : `translateY(${virtualItem.start}px)`
+  };
+}
+watch(lanes, () => {
+  if (virtualizer) {
+    virtualizer.value.measure();
+  }
+}, { flush: "sync" });
+function measureElement(el) {
+  if (el && virtualizer) {
+    const element = el instanceof Element ? el : el.$el;
+    virtualizer.value.measureElement(element);
+  }
+}
+watch(
+  () => virtualizer ? virtualizer.value.isScrolling : false,
+  (isScrolling) => emits("scroll", isScrolling)
+);
+function getItemKey(item, index) {
+  if (virtualizerProps.value.getItemKey) {
+    return virtualizerProps.value.getItemKey(index);
+  }
+  if (item && typeof item === "object" && "id" in item) {
+    return item.id;
+  }
+  return index;
+}
+defineExpose({
+  get $el() {
+    return rootRef.value?.$el;
+  },
+  virtualizer: virtualizer || void 0
+});
+</script>
+
+<template>
+  <Primitive
+    ref="rootRef"
+    :as="as"
+    data-slot="root"
+    :data-orientation="orientation"
+    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+  >
+    <template v-if="virtualizer">
+      <div
+        data-slot="viewport"
+        :class="b24ui.viewport({ class: props.b24ui?.viewport })"
+        :style="virtualViewportStyle"
+      >
+        <div
+          v-for="virtualItem in virtualItems"
+          :key="String(virtualItem.key)"
+          :ref="measureElement"
+          :data-index="virtualItem.index"
+          data-slot="item"
+          :class="b24ui.item({ class: props.b24ui?.item })"
+          :style="getVirtualItemStyle(virtualItem)"
+        >
+          <slot
+            :item="items?.[virtualItem.index]"
+            :index="virtualItem.index"
+            :virtual-item="virtualItem"
+          />
+        </div>
+      </div>
+    </template>
+
+    <template v-else>
+      <div data-slot="viewport" :class="b24ui.viewport({ class: props.b24ui?.viewport })">
+        <template v-if="items?.length">
+          <div
+            v-for="(item, index) in items"
+            :key="getItemKey(item, index)"
+            data-slot="item"
+            :class="b24ui.item({ class: props.b24ui?.item })"
+          >
+            <slot :item="item" :index="index" />
+          </div>
+        </template>
+
+        <template v-else>
+          <slot />
+        </template>
+      </div>
+    </template>
+  </Primitive>
+</template>

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

@@ -0,0 +1,81 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { VirtualItem, VirtualizerOptions } from '@tanstack/vue-virtual';
+import theme from '#build/b24ui/scroll-area';
+import type { ComponentConfig } from '../types/tv';
+type ScrollArea = ComponentConfig<typeof theme, AppConfig, 'scrollArea'>;
+export interface ScrollAreaVirtualizeOptions extends Partial<Omit<VirtualizerOptions<Element, Element>, 'count' | 'getScrollElement' | 'horizontal' | 'isRtl' | 'estimateSize' | 'lanes' | 'enabled'>> {
+    /**
+     * Estimated size (in px) of each item along the scroll axis. Can be a number or a function.
+     * @defaultValue 100
+     */
+    estimateSize?: number | ((index: number) => number);
+    /**
+     * Number of lanes for multi-column/row layouts.
+     * For responsive lane counts, use a computed property with viewport/container size:
+     * @example
+     * ```ts
+     * const { width } = useWindowSize()
+     * const lanes = computed(() => Math.floor(width.value / 300))
+     * ```
+     * @defaultValue undefined
+     */
+    lanes?: number;
+}
+export type ScrollAreaItem = any;
+export interface ScrollAreaProps<T extends ScrollAreaItem = ScrollAreaItem> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The scroll direction.
+     * @defaultValue 'vertical'
+     */
+    orientation?: ScrollArea['variants']['orientation'];
+    /**
+     * Array of items to render.
+     */
+    items?: T[];
+    /**
+     * Enable virtualization for large lists.
+     * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
+     * @defaultValue false
+     */
+    virtualize?: boolean | ScrollAreaVirtualizeOptions;
+    class?: any;
+    b24ui?: ScrollArea['slots'];
+}
+export interface ScrollAreaSlots<T extends ScrollAreaItem = ScrollAreaItem> {
+    default(props: {
+        item: T;
+        index: number;
+        virtualItem?: VirtualItem;
+    } | Record<string, never>): any;
+}
+export interface ScrollAreaEmits {
+    /**
+     * Emitted when scroll state changes
+     * @param isScrolling - Whether the list is currently being scrolled
+     */
+    scroll: [isScrolling: boolean];
+}
+declare const __VLS_export: <T extends ScrollAreaItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<ScrollAreaProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "scroll", isScrolling: boolean) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        readonly $el: HTMLElement;
+        virtualizer: import("vue").Ref<import("@tanstack/vue-virtual").Virtualizer<Element, Element>, import("@tanstack/vue-virtual").Virtualizer<Element, Element>> | undefined;
+    }>) => void;
+    attrs: any;
+    slots: ScrollAreaSlots<T>;
+    emit: (evt: "scroll", isScrolling: boolean) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

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

@@ -54,6 +54,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     /**
      * Enable virtualization for large datasets.
      * Note: when enabled, the divider between rows and sticky properties are not supported.
+     * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
      * @defaultValue false
      */
     virtualize?: boolean | (Partial<Omit<VirtualizerOptions<Element, Element>, 'getScrollElement' | 'count' | 'estimateSize' | 'overscan'>> & {

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

@@ -54,6 +54,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     /**
      * Enable virtualization for large datasets.
      * Note: when enabled, the divider between rows and sticky properties are not supported.
+     * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
      * @defaultValue false
      */
     virtualize?: boolean | (Partial<Omit<VirtualizerOptions<Element, Element>, 'getScrollElement' | 'count' | 'estimateSize' | 'overscan'>> & {

package/dist/runtime/types/index.d.ts

@@ -63,6 +63,7 @@ export * from '../components/Popover.vue';
 export * from '../components/Progress.vue';
 export * from '../components/RadioGroup.vue';
 export * from '../components/Range.vue';
+export * from '../components/ScrollArea.vue';
 export * from '../components/Select.vue';
 export * from '../components/SelectMenu.vue';
 export * from '../components/Separator.vue';

package/dist/runtime/types/index.js

@@ -63,6 +63,7 @@ export * from "../components/Popover.vue";
 export * from "../components/Progress.vue";
 export * from "../components/RadioGroup.vue";
 export * from "../components/Range.vue";
+export * from "../components/ScrollArea.vue";
 export * from "../components/Select.vue";
 export * from "../components/SelectMenu.vue";
 export * from "../components/Separator.vue";

package/dist/runtime/{inertia/components → vue/overrides/inertia}/Link.d.vue.ts

@@ -1,5 +1,5 @@
 import type { InertiaLinkProps } from '@inertiajs/vue3';
-import type { ButtonHTMLAttributes, AnchorHTMLAttributes } from '../../types/html';
+import type { ButtonHTMLAttributes, AnchorHTMLAttributes } from '../../../types/html';
 export interface LinkProps extends Partial<Omit<InertiaLinkProps, 'href' | 'onClick'>>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled'>, /** @vue-ignore */ Omit<AnchorHTMLAttributes, 'href' | 'target' | 'rel' | 'type'> {
     /**
      * The element or component this component should render as when not a link.

package/dist/runtime/{inertia/components → vue/overrides/inertia}/Link.vue

@@ -10,9 +10,9 @@ import { reactiveOmit } from "@vueuse/core";
 import { usePage } from "@inertiajs/vue3";
 import { hasProtocol } from "ufo";
 import { useAppConfig } from "#imports";
-import { tv } from "../../utils/tv";
-import { mergeClasses } from "../../utils";
-import B24LinkBase from "../../components/LinkBase.vue";
+import { tv } from "../../../utils/tv";
+import { mergeClasses } from "../../../utils";
+import B24LinkBase from "./LinkBase.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "button" },

package/dist/runtime/{inertia/components → vue/overrides/inertia}/Link.vue.d.ts

@@ -1,5 +1,5 @@
 import type { InertiaLinkProps } from '@inertiajs/vue3';
-import type { ButtonHTMLAttributes, AnchorHTMLAttributes } from '../../types/html';
+import type { ButtonHTMLAttributes, AnchorHTMLAttributes } from '../../../types/html';
 export interface LinkProps extends Partial<Omit<InertiaLinkProps, 'href' | 'onClick'>>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled'>, /** @vue-ignore */ Omit<AnchorHTMLAttributes, 'href' | 'target' | 'rel' | 'type'> {
     /**
      * The element or component this component should render as when not a link.

package/dist/runtime/{inertia/components → vue/overrides/inertia}/LinkBase.d.vue.ts

@@ -1,4 +1,4 @@
-import type { LinkProps } from '../../types';
+import type { LinkProps } from '../../../types';
 export interface LinkBaseProps {
     as?: string;
     type?: string;

package/dist/runtime/{inertia/components → vue/overrides/inertia}/LinkBase.vue.d.ts

@@ -1,4 +1,4 @@
-import type { LinkProps } from '../../types';
+import type { LinkProps } from '../../../types';
 export interface LinkBaseProps {
     as?: string;
     type?: string;

package/dist/runtime/vue/overrides/none/Link.d.vue.ts

@@ -0,0 +1,73 @@
+import type { ButtonHTMLAttributes } from 'vue';
+interface BaseLinkProps {
+    /**
+     * Route Location the link should navigate to when clicked on.
+     */
+    to?: string;
+    /**
+     * An alias for `to`. If used with `to`, `href` will be ignored
+     */
+    href?: string;
+    /**
+     * Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
+     */
+    external?: boolean;
+    /**
+     * Where to display the linked URL, as the name for a browsing context.
+     */
+    target?: '_blank' | '_parent' | '_self' | '_top' | (string & {}) | null;
+    /**
+     * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
+     */
+    rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null;
+    /**
+     * If set to true, no rel attribute will be added to the link
+     */
+    noRel?: boolean;
+}
+export interface LinkProps extends BaseLinkProps {
+    /**
+     * The element or component this component should render as when not a link.
+     * @defaultValue 'button'
+     */
+    as?: any;
+    /**
+     * The type of the button when not a link.
+     * @defaultValue 'button'
+     */
+    type?: ButtonHTMLAttributes['type'];
+    disabled?: boolean;
+    /** Force the link to be active independent of the current route. */
+    active?: boolean;
+    /** Will only be active if the current route is an exact match. */
+    exact?: boolean;
+    /** Allows controlling how the current route query sets the link as active. */
+    exactQuery?: boolean | 'partial';
+    /** Will only be active if the current route hash is an exact match. */
+    exactHash?: boolean;
+    /** The class to apply when the link is inactive. */
+    inactiveClass?: string;
+    /** The class to apply when the link is active. */
+    activeClass?: string;
+    /** The value of the `aria-current` attribute when the link is active. */
+    ariaCurrentValue?: string;
+    custom?: boolean;
+    /** When `true`, uses special underlined styling. */
+    isAction?: boolean;
+    /** When `true`, only styles from `class`, `activeClass`, and `inactiveClass` will be applied. */
+    raw?: boolean;
+    class?: any;
+}
+export interface LinkSlots {
+    default(props: {
+        active: boolean;
+    }): any;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/vue/overrides/none/Link.vue

@@ -0,0 +1,128 @@
+<script>
+import theme from "#build/b24ui/link";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { defu } from "defu";
+import { hasProtocol } from "ufo";
+import { useAppConfig } from "#imports";
+import { mergeClasses } from "../../../utils";
+import { tv } from "../../../utils/tv";
+import B24LinkBase from "../../../components/LinkBase.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "button" },
+  type: { type: null, required: false, default: "button" },
+  disabled: { type: Boolean, required: false },
+  active: { type: Boolean, required: false, default: void 0 },
+  exact: { type: Boolean, required: false },
+  exactQuery: { type: [Boolean, String], required: false },
+  exactHash: { type: Boolean, required: false },
+  inactiveClass: { type: String, required: false },
+  activeClass: { type: String, required: false },
+  ariaCurrentValue: { type: String, required: false, default: "page" },
+  custom: { type: Boolean, required: false },
+  isAction: { type: Boolean, required: false, default: false },
+  raw: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  to: { type: String, required: false },
+  href: { type: String, required: false },
+  external: { type: Boolean, required: false },
+  target: { type: [String, Object, null], required: false },
+  rel: { type: [String, Object, null], required: false },
+  noRel: { type: Boolean, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const b24ui = computed(() => tv({
+  extend: tv(theme),
+  ...defu({
+    variants: {
+      active: {
+        true: mergeClasses(appConfig.b24ui?.link?.variants?.active?.true, props.activeClass),
+        false: mergeClasses(appConfig.b24ui?.link?.variants?.active?.false, props.inactiveClass)
+      }
+    }
+  }, appConfig.b24ui?.link || {})
+}));
+const href = computed(() => props.to ?? props.href);
+const isExternal = computed(() => {
+  if (props.target === "_blank") {
+    return true;
+  }
+  if (props.external) {
+    return true;
+  }
+  if (!href.value) {
+    return false;
+  }
+  return hasProtocol(href.value, { acceptRelative: true });
+});
+const isLinkActive = computed(() => {
+  if (props.active !== void 0) {
+    return props.active;
+  }
+  return false;
+});
+const linkClass = computed(() => {
+  const active = isLinkActive.value;
+  if (props.raw) {
+    return [props.class, active ? props.activeClass : props.inactiveClass];
+  }
+  return b24ui.value({
+    class: props.class,
+    active,
+    disabled: props.disabled,
+    isAction: Boolean(props.isAction)
+  });
+});
+const linkRel = computed(() => {
+  if (props.noRel) {
+    return null;
+  }
+  if (props.rel) {
+    return props.rel;
+  }
+  if (isExternal.value) {
+    return "noopener noreferrer";
+  }
+  return null;
+});
+</script>
+
+<template>
+  <template v-if="custom">
+    <slot
+      v-bind="{
+  ...$attrs,
+  as,
+  type,
+  disabled,
+  href,
+  navigate: void 0,
+  rel: linkRel,
+  target: target || (isExternal ? '_blank' : void 0),
+  isExternal,
+  active: isLinkActive
+}"
+    />
+  </template>
+  <B24LinkBase
+    v-else
+    v-bind="{
+  ...$attrs,
+  as,
+  type,
+  disabled,
+  href,
+  navigate: void 0,
+  rel: linkRel,
+  target: target || (isExternal ? '_blank' : void 0),
+  isExternal
+}"
+    :class="linkClass"
+  >
+    <slot :active="isLinkActive" />
+  </B24LinkBase>
+</template>