@bitrix24/b24ui-nuxt 2.1.16 → 2.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/meta.d.mts +683 -18
- package/dist/meta.mjs +683 -18
- package/dist/module.json +1 -1
- package/dist/module.mjs +1 -1
- package/dist/runtime/air-design-tokens/003_b24_context_light.css +1 -1
- package/dist/runtime/air-design-tokens/004_b24_context_dark.css +1 -1
- package/dist/runtime/components/FormField.d.vue.ts +5 -0
- package/dist/runtime/components/FormField.vue +3 -1
- package/dist/runtime/components/FormField.vue.d.ts +5 -0
- package/dist/runtime/components/ScrollArea.d.vue.ts +81 -0
- package/dist/runtime/components/ScrollArea.vue +187 -0
- package/dist/runtime/components/ScrollArea.vue.d.ts +81 -0
- package/dist/runtime/components/Slideover.d.vue.ts +5 -0
- package/dist/runtime/components/Slideover.vue +6 -3
- package/dist/runtime/components/Slideover.vue.d.ts +5 -0
- package/dist/runtime/components/Table.d.vue.ts +1 -0
- package/dist/runtime/components/Table.vue.d.ts +1 -0
- package/dist/runtime/types/index.d.ts +1 -0
- package/dist/runtime/types/index.js +1 -0
- package/dist/runtime/{inertia/components → vue/overrides/inertia}/Link.d.vue.ts +1 -1
- package/dist/runtime/{inertia/components → vue/overrides/inertia}/Link.vue +3 -3
- package/dist/runtime/{inertia/components → vue/overrides/inertia}/Link.vue.d.ts +1 -1
- package/dist/runtime/{inertia/components → vue/overrides/inertia}/LinkBase.d.vue.ts +1 -1
- package/dist/runtime/{inertia/components → vue/overrides/inertia}/LinkBase.vue.d.ts +1 -1
- package/dist/runtime/vue/overrides/none/Link.d.vue.ts +73 -0
- package/dist/runtime/vue/overrides/none/Link.vue +128 -0
- package/dist/runtime/vue/overrides/none/Link.vue.d.ts +73 -0
- package/dist/runtime/vue/{components → overrides/vue-router}/Link.d.vue.ts +1 -1
- package/dist/runtime/vue/{components → overrides/vue-router}/Link.vue +4 -4
- package/dist/runtime/vue/{components → overrides/vue-router}/Link.vue.d.ts +1 -1
- package/dist/runtime/vue/{stubs.d.ts → stubs/base.d.ts} +6 -7
- package/dist/runtime/vue/{stubs.js → stubs/base.js} +6 -7
- package/dist/runtime/vue/stubs/inertia.d.ts +5 -0
- package/dist/runtime/vue/stubs/inertia.js +10 -0
- package/dist/runtime/vue/stubs/none.d.ts +56 -0
- package/dist/runtime/vue/stubs/none.js +48 -0
- package/dist/runtime/vue/stubs/vue-router.d.ts +2 -0
- package/dist/runtime/vue/stubs/vue-router.js +2 -0
- package/dist/shared/{b24ui-nuxt.DdKajqQs.mjs → b24ui-nuxt.C-CS9MBp.mjs} +225 -52
- package/dist/unplugin.d.mts +13 -0
- package/dist/unplugin.mjs +83 -61
- package/dist/vite.mjs +1 -1
- package/package.json +4 -4
- package/dist/runtime/inertia/stubs.d.ts +0 -46
- package/dist/runtime/inertia/stubs.js +0 -93
- /package/dist/runtime/{inertia/components → vue/overrides/inertia}/LinkBase.vue +0 -0
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import type { AppConfig } from '@nuxt/schema';
|
|
2
|
+
import type { VirtualItem, VirtualizerOptions } from '@tanstack/vue-virtual';
|
|
3
|
+
import theme from '#build/b24ui/scroll-area';
|
|
4
|
+
import type { ComponentConfig } from '../types/tv';
|
|
5
|
+
type ScrollArea = ComponentConfig<typeof theme, AppConfig, 'scrollArea'>;
|
|
6
|
+
export interface ScrollAreaVirtualizeOptions extends Partial<Omit<VirtualizerOptions<Element, Element>, 'count' | 'getScrollElement' | 'horizontal' | 'isRtl' | 'estimateSize' | 'lanes' | 'enabled'>> {
|
|
7
|
+
/**
|
|
8
|
+
* Estimated size (in px) of each item along the scroll axis. Can be a number or a function.
|
|
9
|
+
* @defaultValue 100
|
|
10
|
+
*/
|
|
11
|
+
estimateSize?: number | ((index: number) => number);
|
|
12
|
+
/**
|
|
13
|
+
* Number of lanes for multi-column/row layouts.
|
|
14
|
+
* For responsive lane counts, use a computed property with viewport/container size:
|
|
15
|
+
* @example
|
|
16
|
+
* ```ts
|
|
17
|
+
* const { width } = useWindowSize()
|
|
18
|
+
* const lanes = computed(() => Math.floor(width.value / 300))
|
|
19
|
+
* ```
|
|
20
|
+
* @defaultValue undefined
|
|
21
|
+
*/
|
|
22
|
+
lanes?: number;
|
|
23
|
+
}
|
|
24
|
+
export type ScrollAreaItem = any;
|
|
25
|
+
export interface ScrollAreaProps<T extends ScrollAreaItem = ScrollAreaItem> {
|
|
26
|
+
/**
|
|
27
|
+
* The element or component this component should render as.
|
|
28
|
+
* @defaultValue 'div'
|
|
29
|
+
*/
|
|
30
|
+
as?: any;
|
|
31
|
+
/**
|
|
32
|
+
* The scroll direction.
|
|
33
|
+
* @defaultValue 'vertical'
|
|
34
|
+
*/
|
|
35
|
+
orientation?: ScrollArea['variants']['orientation'];
|
|
36
|
+
/**
|
|
37
|
+
* Array of items to render.
|
|
38
|
+
*/
|
|
39
|
+
items?: T[];
|
|
40
|
+
/**
|
|
41
|
+
* Enable virtualization for large lists.
|
|
42
|
+
* @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
|
|
43
|
+
* @defaultValue false
|
|
44
|
+
*/
|
|
45
|
+
virtualize?: boolean | ScrollAreaVirtualizeOptions;
|
|
46
|
+
class?: any;
|
|
47
|
+
b24ui?: ScrollArea['slots'];
|
|
48
|
+
}
|
|
49
|
+
export interface ScrollAreaSlots<T extends ScrollAreaItem = ScrollAreaItem> {
|
|
50
|
+
default(props: {
|
|
51
|
+
item: T;
|
|
52
|
+
index: number;
|
|
53
|
+
virtualItem?: VirtualItem;
|
|
54
|
+
} | Record<string, never>): any;
|
|
55
|
+
}
|
|
56
|
+
export interface ScrollAreaEmits {
|
|
57
|
+
/**
|
|
58
|
+
* Emitted when scroll state changes
|
|
59
|
+
* @param isScrolling - Whether the list is currently being scrolled
|
|
60
|
+
*/
|
|
61
|
+
scroll: [isScrolling: boolean];
|
|
62
|
+
}
|
|
63
|
+
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<{
|
|
64
|
+
props: __VLS_PrettifyLocal<ScrollAreaProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "scroll", isScrolling: boolean) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
|
|
65
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
66
|
+
} ? P : {});
|
|
67
|
+
expose: (exposed: import("vue").ShallowUnwrapRef<{
|
|
68
|
+
readonly $el: HTMLElement;
|
|
69
|
+
virtualizer: import("vue").Ref<import("@tanstack/vue-virtual").Virtualizer<Element, Element>, import("@tanstack/vue-virtual").Virtualizer<Element, Element>> | undefined;
|
|
70
|
+
}>) => void;
|
|
71
|
+
attrs: any;
|
|
72
|
+
slots: ScrollAreaSlots<T>;
|
|
73
|
+
emit: (evt: "scroll", isScrolling: boolean) => void;
|
|
74
|
+
}>) => import("vue").VNode & {
|
|
75
|
+
__ctx?: Awaited<typeof __VLS_setup>;
|
|
76
|
+
};
|
|
77
|
+
declare const _default: typeof __VLS_export;
|
|
78
|
+
export default _default;
|
|
79
|
+
type __VLS_PrettifyLocal<T> = {
|
|
80
|
+
[K in keyof T as K]: T[K];
|
|
81
|
+
} & {};
|
|
@@ -31,6 +31,11 @@ export interface SlideoverProps extends DialogRootProps {
|
|
|
31
31
|
* @defaultValue 'bottom'
|
|
32
32
|
*/
|
|
33
33
|
side?: Slideover['variants']['side'];
|
|
34
|
+
/**
|
|
35
|
+
* Whether to inset the slideover from the edges.
|
|
36
|
+
* @defaultValue false
|
|
37
|
+
*/
|
|
38
|
+
inset?: boolean;
|
|
34
39
|
/**
|
|
35
40
|
* Render the slideover in a portal.
|
|
36
41
|
* @defaultValue true
|
|
@@ -21,6 +21,7 @@ const props = defineProps({
|
|
|
21
21
|
overlayBlur: { type: null, required: false, default: "off" },
|
|
22
22
|
transition: { type: Boolean, required: false, default: true },
|
|
23
23
|
side: { type: null, required: false, default: "bottom" },
|
|
24
|
+
inset: { type: Boolean, required: false },
|
|
24
25
|
portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
|
|
25
26
|
close: { type: [Boolean, Object], required: false, default: true },
|
|
26
27
|
closeIcon: { type: [Function, Object], required: false },
|
|
@@ -55,9 +56,11 @@ const contentEvents = computed(() => {
|
|
|
55
56
|
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.slideover || {} })({
|
|
56
57
|
transition: props.transition,
|
|
57
58
|
side: props.side,
|
|
59
|
+
inset: props.inset,
|
|
58
60
|
overlayBlur: props.overlayBlur,
|
|
59
61
|
useFooter: !!slots.footer
|
|
60
62
|
}));
|
|
63
|
+
const isBtnCloseExternal = computed(() => !props.inset && ["left", "right", "bottom"].includes(props?.side) && (props.close || !!slots.close));
|
|
61
64
|
</script>
|
|
62
65
|
|
|
63
66
|
<template>
|
|
@@ -97,7 +100,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.slideov
|
|
|
97
100
|
</VisuallyHidden>
|
|
98
101
|
|
|
99
102
|
<slot name="content" :close="close">
|
|
100
|
-
<template v-if="
|
|
103
|
+
<template v-if="isBtnCloseExternal">
|
|
101
104
|
<DialogClose v-if="props.close || !!slots.close" as-child>
|
|
102
105
|
<slot name="close" :b24ui="b24ui">
|
|
103
106
|
<!-- @todo fix this css -->
|
|
@@ -140,7 +143,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.slideov
|
|
|
140
143
|
<slot name="navbar" :close="close" />
|
|
141
144
|
</template>
|
|
142
145
|
|
|
143
|
-
<template v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) ||
|
|
146
|
+
<template v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || !isBtnCloseExternal && (props.close || !!slots.close)" #content-top>
|
|
144
147
|
<div data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
|
|
145
148
|
<slot name="header" :close="close">
|
|
146
149
|
<div data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
|
|
@@ -156,7 +159,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.slideov
|
|
|
156
159
|
</slot>
|
|
157
160
|
</DialogDescription>
|
|
158
161
|
</div>
|
|
159
|
-
<template v-if="props.close || !!slots.close">
|
|
162
|
+
<template v-if="!isBtnCloseExternal && (props.close || !!slots.close)">
|
|
160
163
|
<DialogClose v-if="props.close || !!slots.close" as-child>
|
|
161
164
|
<slot name="close" :b24ui="b24ui">
|
|
162
165
|
<B24Button
|
|
@@ -31,6 +31,11 @@ export interface SlideoverProps extends DialogRootProps {
|
|
|
31
31
|
* @defaultValue 'bottom'
|
|
32
32
|
*/
|
|
33
33
|
side?: Slideover['variants']['side'];
|
|
34
|
+
/**
|
|
35
|
+
* Whether to inset the slideover from the edges.
|
|
36
|
+
* @defaultValue false
|
|
37
|
+
*/
|
|
38
|
+
inset?: boolean;
|
|
34
39
|
/**
|
|
35
40
|
* Render the slideover in a portal.
|
|
36
41
|
* @defaultValue true
|
|
@@ -54,6 +54,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
|
|
|
54
54
|
/**
|
|
55
55
|
* Enable virtualization for large datasets.
|
|
56
56
|
* Note: when enabled, the divider between rows and sticky properties are not supported.
|
|
57
|
+
* @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
|
|
57
58
|
* @defaultValue false
|
|
58
59
|
*/
|
|
59
60
|
virtualize?: boolean | (Partial<Omit<VirtualizerOptions<Element, Element>, 'getScrollElement' | 'count' | 'estimateSize' | 'overscan'>> & {
|
|
@@ -54,6 +54,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
|
|
|
54
54
|
/**
|
|
55
55
|
* Enable virtualization for large datasets.
|
|
56
56
|
* Note: when enabled, the divider between rows and sticky properties are not supported.
|
|
57
|
+
* @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
|
|
57
58
|
* @defaultValue false
|
|
58
59
|
*/
|
|
59
60
|
virtualize?: boolean | (Partial<Omit<VirtualizerOptions<Element, Element>, 'getScrollElement' | 'count' | 'estimateSize' | 'overscan'>> & {
|
|
@@ -63,6 +63,7 @@ export * from '../components/Popover.vue';
|
|
|
63
63
|
export * from '../components/Progress.vue';
|
|
64
64
|
export * from '../components/RadioGroup.vue';
|
|
65
65
|
export * from '../components/Range.vue';
|
|
66
|
+
export * from '../components/ScrollArea.vue';
|
|
66
67
|
export * from '../components/Select.vue';
|
|
67
68
|
export * from '../components/SelectMenu.vue';
|
|
68
69
|
export * from '../components/Separator.vue';
|
|
@@ -63,6 +63,7 @@ export * from "../components/Popover.vue";
|
|
|
63
63
|
export * from "../components/Progress.vue";
|
|
64
64
|
export * from "../components/RadioGroup.vue";
|
|
65
65
|
export * from "../components/Range.vue";
|
|
66
|
+
export * from "../components/ScrollArea.vue";
|
|
66
67
|
export * from "../components/Select.vue";
|
|
67
68
|
export * from "../components/SelectMenu.vue";
|
|
68
69
|
export * from "../components/Separator.vue";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { InertiaLinkProps } from '@inertiajs/vue3';
|
|
2
|
-
import type { ButtonHTMLAttributes, AnchorHTMLAttributes } from '
|
|
2
|
+
import type { ButtonHTMLAttributes, AnchorHTMLAttributes } from '../../../types/html';
|
|
3
3
|
export interface LinkProps extends Partial<Omit<InertiaLinkProps, 'href' | 'onClick'>>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled'>, /** @vue-ignore */ Omit<AnchorHTMLAttributes, 'href' | 'target' | 'rel' | 'type'> {
|
|
4
4
|
/**
|
|
5
5
|
* The element or component this component should render as when not a link.
|
|
@@ -10,9 +10,9 @@ import { reactiveOmit } from "@vueuse/core";
|
|
|
10
10
|
import { usePage } from "@inertiajs/vue3";
|
|
11
11
|
import { hasProtocol } from "ufo";
|
|
12
12
|
import { useAppConfig } from "#imports";
|
|
13
|
-
import { tv } from "
|
|
14
|
-
import { mergeClasses } from "
|
|
15
|
-
import B24LinkBase from "
|
|
13
|
+
import { tv } from "../../../utils/tv";
|
|
14
|
+
import { mergeClasses } from "../../../utils";
|
|
15
|
+
import B24LinkBase from "./LinkBase.vue";
|
|
16
16
|
defineOptions({ inheritAttrs: false });
|
|
17
17
|
const props = defineProps({
|
|
18
18
|
as: { type: null, required: false, default: "button" },
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { InertiaLinkProps } from '@inertiajs/vue3';
|
|
2
|
-
import type { ButtonHTMLAttributes, AnchorHTMLAttributes } from '
|
|
2
|
+
import type { ButtonHTMLAttributes, AnchorHTMLAttributes } from '../../../types/html';
|
|
3
3
|
export interface LinkProps extends Partial<Omit<InertiaLinkProps, 'href' | 'onClick'>>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled'>, /** @vue-ignore */ Omit<AnchorHTMLAttributes, 'href' | 'target' | 'rel' | 'type'> {
|
|
4
4
|
/**
|
|
5
5
|
* The element or component this component should render as when not a link.
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import type { ButtonHTMLAttributes } from 'vue';
|
|
2
|
+
interface BaseLinkProps {
|
|
3
|
+
/**
|
|
4
|
+
* Route Location the link should navigate to when clicked on.
|
|
5
|
+
*/
|
|
6
|
+
to?: string;
|
|
7
|
+
/**
|
|
8
|
+
* An alias for `to`. If used with `to`, `href` will be ignored
|
|
9
|
+
*/
|
|
10
|
+
href?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
|
|
13
|
+
*/
|
|
14
|
+
external?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Where to display the linked URL, as the name for a browsing context.
|
|
17
|
+
*/
|
|
18
|
+
target?: '_blank' | '_parent' | '_self' | '_top' | (string & {}) | null;
|
|
19
|
+
/**
|
|
20
|
+
* A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
|
|
21
|
+
*/
|
|
22
|
+
rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null;
|
|
23
|
+
/**
|
|
24
|
+
* If set to true, no rel attribute will be added to the link
|
|
25
|
+
*/
|
|
26
|
+
noRel?: boolean;
|
|
27
|
+
}
|
|
28
|
+
export interface LinkProps extends BaseLinkProps {
|
|
29
|
+
/**
|
|
30
|
+
* The element or component this component should render as when not a link.
|
|
31
|
+
* @defaultValue 'button'
|
|
32
|
+
*/
|
|
33
|
+
as?: any;
|
|
34
|
+
/**
|
|
35
|
+
* The type of the button when not a link.
|
|
36
|
+
* @defaultValue 'button'
|
|
37
|
+
*/
|
|
38
|
+
type?: ButtonHTMLAttributes['type'];
|
|
39
|
+
disabled?: boolean;
|
|
40
|
+
/** Force the link to be active independent of the current route. */
|
|
41
|
+
active?: boolean;
|
|
42
|
+
/** Will only be active if the current route is an exact match. */
|
|
43
|
+
exact?: boolean;
|
|
44
|
+
/** Allows controlling how the current route query sets the link as active. */
|
|
45
|
+
exactQuery?: boolean | 'partial';
|
|
46
|
+
/** Will only be active if the current route hash is an exact match. */
|
|
47
|
+
exactHash?: boolean;
|
|
48
|
+
/** The class to apply when the link is inactive. */
|
|
49
|
+
inactiveClass?: string;
|
|
50
|
+
/** The class to apply when the link is active. */
|
|
51
|
+
activeClass?: string;
|
|
52
|
+
/** The value of the `aria-current` attribute when the link is active. */
|
|
53
|
+
ariaCurrentValue?: string;
|
|
54
|
+
custom?: boolean;
|
|
55
|
+
/** When `true`, uses special underlined styling. */
|
|
56
|
+
isAction?: boolean;
|
|
57
|
+
/** When `true`, only styles from `class`, `activeClass`, and `inactiveClass` will be applied. */
|
|
58
|
+
raw?: boolean;
|
|
59
|
+
class?: any;
|
|
60
|
+
}
|
|
61
|
+
export interface LinkSlots {
|
|
62
|
+
default(props: {
|
|
63
|
+
active: boolean;
|
|
64
|
+
}): any;
|
|
65
|
+
}
|
|
66
|
+
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>;
|
|
67
|
+
declare const _default: typeof __VLS_export;
|
|
68
|
+
export default _default;
|
|
69
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
70
|
+
new (): {
|
|
71
|
+
$slots: S;
|
|
72
|
+
};
|
|
73
|
+
};
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import theme from "#build/b24ui/link";
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<script setup>
|
|
6
|
+
import { computed } from "vue";
|
|
7
|
+
import { defu } from "defu";
|
|
8
|
+
import { hasProtocol } from "ufo";
|
|
9
|
+
import { useAppConfig } from "#imports";
|
|
10
|
+
import { mergeClasses } from "../../../utils";
|
|
11
|
+
import { tv } from "../../../utils/tv";
|
|
12
|
+
import B24LinkBase from "../../../components/LinkBase.vue";
|
|
13
|
+
defineOptions({ inheritAttrs: false });
|
|
14
|
+
const props = defineProps({
|
|
15
|
+
as: { type: null, required: false, default: "button" },
|
|
16
|
+
type: { type: null, required: false, default: "button" },
|
|
17
|
+
disabled: { type: Boolean, required: false },
|
|
18
|
+
active: { type: Boolean, required: false, default: void 0 },
|
|
19
|
+
exact: { type: Boolean, required: false },
|
|
20
|
+
exactQuery: { type: [Boolean, String], required: false },
|
|
21
|
+
exactHash: { type: Boolean, required: false },
|
|
22
|
+
inactiveClass: { type: String, required: false },
|
|
23
|
+
activeClass: { type: String, required: false },
|
|
24
|
+
ariaCurrentValue: { type: String, required: false, default: "page" },
|
|
25
|
+
custom: { type: Boolean, required: false },
|
|
26
|
+
isAction: { type: Boolean, required: false, default: false },
|
|
27
|
+
raw: { type: Boolean, required: false },
|
|
28
|
+
class: { type: null, required: false },
|
|
29
|
+
to: { type: String, required: false },
|
|
30
|
+
href: { type: String, required: false },
|
|
31
|
+
external: { type: Boolean, required: false },
|
|
32
|
+
target: { type: [String, Object, null], required: false },
|
|
33
|
+
rel: { type: [String, Object, null], required: false },
|
|
34
|
+
noRel: { type: Boolean, required: false }
|
|
35
|
+
});
|
|
36
|
+
defineSlots();
|
|
37
|
+
const appConfig = useAppConfig();
|
|
38
|
+
const b24ui = computed(() => tv({
|
|
39
|
+
extend: tv(theme),
|
|
40
|
+
...defu({
|
|
41
|
+
variants: {
|
|
42
|
+
active: {
|
|
43
|
+
true: mergeClasses(appConfig.b24ui?.link?.variants?.active?.true, props.activeClass),
|
|
44
|
+
false: mergeClasses(appConfig.b24ui?.link?.variants?.active?.false, props.inactiveClass)
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}, appConfig.b24ui?.link || {})
|
|
48
|
+
}));
|
|
49
|
+
const href = computed(() => props.to ?? props.href);
|
|
50
|
+
const isExternal = computed(() => {
|
|
51
|
+
if (props.target === "_blank") {
|
|
52
|
+
return true;
|
|
53
|
+
}
|
|
54
|
+
if (props.external) {
|
|
55
|
+
return true;
|
|
56
|
+
}
|
|
57
|
+
if (!href.value) {
|
|
58
|
+
return false;
|
|
59
|
+
}
|
|
60
|
+
return hasProtocol(href.value, { acceptRelative: true });
|
|
61
|
+
});
|
|
62
|
+
const isLinkActive = computed(() => {
|
|
63
|
+
if (props.active !== void 0) {
|
|
64
|
+
return props.active;
|
|
65
|
+
}
|
|
66
|
+
return false;
|
|
67
|
+
});
|
|
68
|
+
const linkClass = computed(() => {
|
|
69
|
+
const active = isLinkActive.value;
|
|
70
|
+
if (props.raw) {
|
|
71
|
+
return [props.class, active ? props.activeClass : props.inactiveClass];
|
|
72
|
+
}
|
|
73
|
+
return b24ui.value({
|
|
74
|
+
class: props.class,
|
|
75
|
+
active,
|
|
76
|
+
disabled: props.disabled,
|
|
77
|
+
isAction: Boolean(props.isAction)
|
|
78
|
+
});
|
|
79
|
+
});
|
|
80
|
+
const linkRel = computed(() => {
|
|
81
|
+
if (props.noRel) {
|
|
82
|
+
return null;
|
|
83
|
+
}
|
|
84
|
+
if (props.rel) {
|
|
85
|
+
return props.rel;
|
|
86
|
+
}
|
|
87
|
+
if (isExternal.value) {
|
|
88
|
+
return "noopener noreferrer";
|
|
89
|
+
}
|
|
90
|
+
return null;
|
|
91
|
+
});
|
|
92
|
+
</script>
|
|
93
|
+
|
|
94
|
+
<template>
|
|
95
|
+
<template v-if="custom">
|
|
96
|
+
<slot
|
|
97
|
+
v-bind="{
|
|
98
|
+
...$attrs,
|
|
99
|
+
as,
|
|
100
|
+
type,
|
|
101
|
+
disabled,
|
|
102
|
+
href,
|
|
103
|
+
navigate: void 0,
|
|
104
|
+
rel: linkRel,
|
|
105
|
+
target: target || (isExternal ? '_blank' : void 0),
|
|
106
|
+
isExternal,
|
|
107
|
+
active: isLinkActive
|
|
108
|
+
}"
|
|
109
|
+
/>
|
|
110
|
+
</template>
|
|
111
|
+
<B24LinkBase
|
|
112
|
+
v-else
|
|
113
|
+
v-bind="{
|
|
114
|
+
...$attrs,
|
|
115
|
+
as,
|
|
116
|
+
type,
|
|
117
|
+
disabled,
|
|
118
|
+
href,
|
|
119
|
+
navigate: void 0,
|
|
120
|
+
rel: linkRel,
|
|
121
|
+
target: target || (isExternal ? '_blank' : void 0),
|
|
122
|
+
isExternal
|
|
123
|
+
}"
|
|
124
|
+
:class="linkClass"
|
|
125
|
+
>
|
|
126
|
+
<slot :active="isLinkActive" />
|
|
127
|
+
</B24LinkBase>
|
|
128
|
+
</template>
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import type { ButtonHTMLAttributes } from 'vue';
|
|
2
|
+
interface BaseLinkProps {
|
|
3
|
+
/**
|
|
4
|
+
* Route Location the link should navigate to when clicked on.
|
|
5
|
+
*/
|
|
6
|
+
to?: string;
|
|
7
|
+
/**
|
|
8
|
+
* An alias for `to`. If used with `to`, `href` will be ignored
|
|
9
|
+
*/
|
|
10
|
+
href?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
|
|
13
|
+
*/
|
|
14
|
+
external?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Where to display the linked URL, as the name for a browsing context.
|
|
17
|
+
*/
|
|
18
|
+
target?: '_blank' | '_parent' | '_self' | '_top' | (string & {}) | null;
|
|
19
|
+
/**
|
|
20
|
+
* A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
|
|
21
|
+
*/
|
|
22
|
+
rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null;
|
|
23
|
+
/**
|
|
24
|
+
* If set to true, no rel attribute will be added to the link
|
|
25
|
+
*/
|
|
26
|
+
noRel?: boolean;
|
|
27
|
+
}
|
|
28
|
+
export interface LinkProps extends BaseLinkProps {
|
|
29
|
+
/**
|
|
30
|
+
* The element or component this component should render as when not a link.
|
|
31
|
+
* @defaultValue 'button'
|
|
32
|
+
*/
|
|
33
|
+
as?: any;
|
|
34
|
+
/**
|
|
35
|
+
* The type of the button when not a link.
|
|
36
|
+
* @defaultValue 'button'
|
|
37
|
+
*/
|
|
38
|
+
type?: ButtonHTMLAttributes['type'];
|
|
39
|
+
disabled?: boolean;
|
|
40
|
+
/** Force the link to be active independent of the current route. */
|
|
41
|
+
active?: boolean;
|
|
42
|
+
/** Will only be active if the current route is an exact match. */
|
|
43
|
+
exact?: boolean;
|
|
44
|
+
/** Allows controlling how the current route query sets the link as active. */
|
|
45
|
+
exactQuery?: boolean | 'partial';
|
|
46
|
+
/** Will only be active if the current route hash is an exact match. */
|
|
47
|
+
exactHash?: boolean;
|
|
48
|
+
/** The class to apply when the link is inactive. */
|
|
49
|
+
inactiveClass?: string;
|
|
50
|
+
/** The class to apply when the link is active. */
|
|
51
|
+
activeClass?: string;
|
|
52
|
+
/** The value of the `aria-current` attribute when the link is active. */
|
|
53
|
+
ariaCurrentValue?: string;
|
|
54
|
+
custom?: boolean;
|
|
55
|
+
/** When `true`, uses special underlined styling. */
|
|
56
|
+
isAction?: boolean;
|
|
57
|
+
/** When `true`, only styles from `class`, `activeClass`, and `inactiveClass` will be applied. */
|
|
58
|
+
raw?: boolean;
|
|
59
|
+
class?: any;
|
|
60
|
+
}
|
|
61
|
+
export interface LinkSlots {
|
|
62
|
+
default(props: {
|
|
63
|
+
active: boolean;
|
|
64
|
+
}): any;
|
|
65
|
+
}
|
|
66
|
+
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>;
|
|
67
|
+
declare const _default: typeof __VLS_export;
|
|
68
|
+
export default _default;
|
|
69
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
70
|
+
new (): {
|
|
71
|
+
$slots: S;
|
|
72
|
+
};
|
|
73
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { RouterLinkProps } from 'vue-router';
|
|
2
|
-
import type { ButtonHTMLAttributes, AnchorHTMLAttributes } from '
|
|
2
|
+
import type { ButtonHTMLAttributes, AnchorHTMLAttributes } from '../../../types/html';
|
|
3
3
|
export interface LinkProps extends Partial<Omit<RouterLinkProps, 'custom'>>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled'>, /** @vue-ignore */ Omit<AnchorHTMLAttributes, 'href' | 'target' | 'rel' | 'type'> {
|
|
4
4
|
/**
|
|
5
5
|
* The element or component this component should render as when not a link.
|
|
@@ -11,10 +11,10 @@ import { reactiveOmit } from "@vueuse/core";
|
|
|
11
11
|
import { hasProtocol } from "ufo";
|
|
12
12
|
import { useRoute, RouterLink } from "vue-router";
|
|
13
13
|
import { useAppConfig } from "#imports";
|
|
14
|
-
import { tv } from "
|
|
15
|
-
import { mergeClasses } from "
|
|
16
|
-
import { isPartiallyEqual } from "
|
|
17
|
-
import B24LinkBase from "
|
|
14
|
+
import { tv } from "../../../utils/tv";
|
|
15
|
+
import { mergeClasses } from "../../../utils";
|
|
16
|
+
import { isPartiallyEqual } from "../../../utils/link";
|
|
17
|
+
import B24LinkBase from "../../../components/LinkBase.vue";
|
|
18
18
|
defineOptions({ inheritAttrs: false });
|
|
19
19
|
const props = defineProps({
|
|
20
20
|
as: { type: null, required: false, default: "button" },
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { RouterLinkProps } from 'vue-router';
|
|
2
|
-
import type { ButtonHTMLAttributes, AnchorHTMLAttributes } from '
|
|
2
|
+
import type { ButtonHTMLAttributes, AnchorHTMLAttributes } from '../../../types/html';
|
|
3
3
|
export interface LinkProps extends Partial<Omit<RouterLinkProps, 'custom'>>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled'>, /** @vue-ignore */ Omit<AnchorHTMLAttributes, 'href' | 'target' | 'rel' | 'type'> {
|
|
4
4
|
/**
|
|
5
5
|
* The element or component this component should render as when not a link.
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import type { Ref } from 'vue';
|
|
2
2
|
import type { NuxtApp } from '#app';
|
|
3
3
|
export { useHead } from '@unhead/vue';
|
|
4
|
-
export {
|
|
5
|
-
export {
|
|
6
|
-
export {
|
|
7
|
-
export {
|
|
8
|
-
export {
|
|
9
|
-
export {
|
|
10
|
-
export { useOverlay } from '../composables/useOverlay';
|
|
4
|
+
export { useAppConfig } from '../composables/useAppConfig';
|
|
5
|
+
export { defineShortcuts } from '../../composables/defineShortcuts';
|
|
6
|
+
export { defineLocale } from '../../composables/defineLocale';
|
|
7
|
+
export { useLocale } from '../../composables/useLocale';
|
|
8
|
+
export { useConfetti } from '../../composables/useConfetti';
|
|
9
|
+
export { useOverlay } from '../../composables/useOverlay';
|
|
11
10
|
export declare const clearError: () => void;
|
|
12
11
|
/**
|
|
13
12
|
* @memo need add for prose components
|
|
@@ -3,13 +3,12 @@ import { createHooks } from "hookable";
|
|
|
3
3
|
import { useColorMode as useColorModeVueUse } from "@vueuse/core";
|
|
4
4
|
import appConfig from "#build/app.config";
|
|
5
5
|
export { useHead } from "@unhead/vue";
|
|
6
|
-
export {
|
|
7
|
-
export {
|
|
8
|
-
export {
|
|
9
|
-
export {
|
|
10
|
-
export {
|
|
11
|
-
export {
|
|
12
|
-
export { useOverlay } from "../composables/useOverlay.js";
|
|
6
|
+
export { useAppConfig } from "../composables/useAppConfig.js";
|
|
7
|
+
export { defineShortcuts } from "../../composables/defineShortcuts.js";
|
|
8
|
+
export { defineLocale } from "../../composables/defineLocale.js";
|
|
9
|
+
export { useLocale } from "../../composables/useLocale.js";
|
|
10
|
+
export { useConfetti } from "../../composables/useConfetti.js";
|
|
11
|
+
export { useOverlay } from "../../composables/useOverlay.js";
|
|
13
12
|
export const clearError = () => {
|
|
14
13
|
};
|
|
15
14
|
export const useRuntimeConfig = () => {
|