@bridge-ui/vue 0.0.1-beta.7 → 0.0.2
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/Actions/BridgeUIHosts.vue.d.ts +3 -2
- package/dist/Actions/BridgeUIHosts.vue_vue_type_script_setup_true_lang.js +15 -10
- package/dist/Actions/Drawer/BridgeDrawerHost.js +5 -0
- package/dist/Actions/Drawer/BridgeDrawerHost.vue.d.ts +14 -0
- package/dist/Actions/Drawer/BridgeDrawerHost.vue_vue_type_script_setup_true_lang.js +35 -0
- package/dist/Actions/Drawer/bridgeDrawer.types.d.ts +44 -0
- package/dist/Actions/Drawer/bridgeDrawerInjectionKey.d.ts +3 -0
- package/dist/Actions/Drawer/bridgeDrawerInjectionKey.js +4 -0
- package/dist/Actions/Drawer/createBridgeDrawerApi.d.ts +2 -0
- package/dist/Actions/Drawer/createBridgeDrawerApi.js +49 -0
- package/dist/Actions/Drawer/index.d.ts +3 -0
- package/dist/Actions/Drawer/index.js +3 -0
- package/dist/Actions/Drawer/useDrawerAction.d.ts +5 -0
- package/dist/Actions/Drawer/useDrawerAction.js +26 -0
- package/dist/Actions/bridgeUIHosts.types.d.ts +5 -0
- package/dist/Actions/index.d.ts +2 -0
- package/dist/Actions/index.js +8 -6
- package/dist/Components/Badge/badge.types.d.ts +1 -1
- package/dist/Components/Chip/chip.types.d.ts +1 -1
- package/dist/Components/Drawer/Drawer.js +5 -0
- package/dist/Components/Drawer/Drawer.vue.d.ts +39 -0
- package/dist/Components/Drawer/Drawer.vue_vue_type_script_setup_true_lang.js +96 -0
- package/dist/Components/Drawer/composables/useDrawer.d.ts +63 -0
- package/dist/Components/Drawer/composables/useDrawer.js +208 -0
- package/dist/Components/Drawer/drawer.types.d.ts +188 -0
- package/dist/Components/Drawer/index.d.ts +4 -0
- package/dist/Components/Drawer/index.js +3 -0
- package/dist/Components/FormControl/formControl.types.d.ts +6 -6
- package/dist/Components/FormField/formField.types.d.ts +7 -7
- package/dist/Components/Label/label.types.d.ts +1 -1
- package/dist/Components/Link/link.types.d.ts +3 -3
- package/dist/Components/List/list.types.d.ts +1 -1
- package/dist/Components/ListItem/listItem.types.d.ts +1 -1
- package/dist/Components/ListSection/listSection.types.d.ts +1 -1
- package/dist/Components/Listbox/Listbox.vue_vue_type_script_setup_true_lang.js +72 -70
- package/dist/Components/Listbox/listbox.types.d.ts +15 -6
- package/dist/Components/Menu/menu.types.d.ts +3 -3
- package/dist/Components/Modal/composables/useModal.js +0 -1
- package/dist/Components/Modal/modal.types.d.ts +3 -2
- package/dist/Components/Select/Select.vue.d.ts +2 -2
- package/dist/Components/Select/composables/useSelect.d.ts +2 -1
- package/dist/Components/Select/composables/useSelect.js +3 -2
- package/dist/Components/Select/select.types.d.ts +5 -5
- package/dist/Components/Snackbar/composables/useSnackbar.js +1 -1
- package/dist/Components/Snackbar/snackbar.types.d.ts +7 -7
- package/dist/Components/Spinner/composables/useSpinner.js +16 -16
- package/dist/Components/Tab/Tab.js +5 -0
- package/dist/Components/Tab/Tab.vue.d.ts +11 -0
- package/dist/Components/Tab/Tab.vue_vue_type_script_setup_true_lang.js +33 -0
- package/dist/Components/Tab/composables/useTab.d.ts +23 -0
- package/dist/Components/Tab/composables/useTab.js +88 -0
- package/dist/Components/Tab/index.d.ts +3 -0
- package/dist/Components/Tab/index.js +3 -0
- package/dist/Components/Tab/tab.types.d.ts +94 -0
- package/dist/Components/TabItem/TabItem.js +5 -0
- package/dist/Components/TabItem/TabItem.vue.d.ts +11 -0
- package/dist/Components/TabItem/TabItem.vue_vue_type_script_setup_true_lang.js +25 -0
- package/dist/Components/TabItem/composables/useTabItem.d.ts +3 -0
- package/dist/Components/TabItem/composables/useTabItem.js +39 -0
- package/dist/Components/TabItem/index.d.ts +3 -0
- package/dist/Components/TabItem/index.js +3 -0
- package/dist/Components/TabItem/tabItem.types.d.ts +72 -0
- package/dist/Components/TabList/TabList.js +5 -0
- package/dist/Components/TabList/TabList.vue.d.ts +11 -0
- package/dist/Components/TabList/TabList.vue_vue_type_script_setup_true_lang.js +18 -0
- package/dist/Components/TabList/composables/useTabList.d.ts +10 -0
- package/dist/Components/TabList/composables/useTabList.js +65 -0
- package/dist/Components/TabList/index.d.ts +3 -0
- package/dist/Components/TabList/index.js +3 -0
- package/dist/Components/TabList/tabList.types.d.ts +38 -0
- package/dist/Components/TabPanel/TabPanel.js +5 -0
- package/dist/Components/TabPanel/TabPanel.vue.d.ts +11 -0
- package/dist/Components/TabPanel/TabPanel.vue_vue_type_script_setup_true_lang.js +20 -0
- package/dist/Components/TabPanel/composables/useTabPanel.d.ts +14 -0
- package/dist/Components/TabPanel/composables/useTabPanel.js +51 -0
- package/dist/Components/TabPanel/index.d.ts +3 -0
- package/dist/Components/TabPanel/index.js +3 -0
- package/dist/Components/TabPanel/tabPanel.types.d.ts +48 -0
- package/dist/Components/Tabs/Tabs.js +5 -0
- package/dist/Components/Tabs/Tabs.vue.d.ts +24 -0
- package/dist/Components/Tabs/Tabs.vue_vue_type_script_setup_true_lang.js +73 -0
- package/dist/Components/Tabs/composables/useTabs.d.ts +39 -0
- package/dist/Components/Tabs/composables/useTabs.js +99 -0
- package/dist/Components/Tabs/index.d.ts +4 -0
- package/dist/Components/Tabs/index.js +4 -0
- package/dist/Components/Tabs/tabs.types.d.ts +93 -0
- package/dist/Components/Tabs/tabsInjectionKey.d.ts +121 -0
- package/dist/Components/Tabs/tabsInjectionKey.js +4 -0
- package/dist/Utils/index.d.ts +2 -0
- package/dist/Utils/index.js +20 -19
- package/dist/Utils/useBreakpoint.d.ts +19 -0
- package/dist/Utils/useBreakpoint.js +35 -0
- package/dist/index.d.ts +14 -1
- package/dist/index.js +76 -62
- package/dist/theme.css +9 -0
- package/package.json +2 -2
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { HTMLAttributes, Slot } from 'vue';
|
|
2
|
+
import { MergeHtmlProps } from '@bridge-ui/core';
|
|
3
|
+
export interface TabPanelClasses {
|
|
4
|
+
/**
|
|
5
|
+
* Classes merged onto the panel root.
|
|
6
|
+
*/
|
|
7
|
+
root?: string;
|
|
8
|
+
}
|
|
9
|
+
export interface TabPanelCustomProps {
|
|
10
|
+
/**
|
|
11
|
+
* Props forwarded to the panel root.
|
|
12
|
+
*/
|
|
13
|
+
root?: HTMLAttributes;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Tab panel (`role="tabpanel"`). Visibility follows the matching `Tab` `value`.
|
|
17
|
+
*/
|
|
18
|
+
export interface TabPanelOwnProps {
|
|
19
|
+
/**
|
|
20
|
+
* Classes for panel parts.
|
|
21
|
+
*
|
|
22
|
+
* @default undefined
|
|
23
|
+
*/
|
|
24
|
+
classes?: TabPanelClasses;
|
|
25
|
+
/**
|
|
26
|
+
* Props forwarded to each panel part.
|
|
27
|
+
*
|
|
28
|
+
* @default undefined
|
|
29
|
+
*/
|
|
30
|
+
customProps?: TabPanelCustomProps;
|
|
31
|
+
/**
|
|
32
|
+
* When set, overrides `Tabs` `keepMounted` for this panel.
|
|
33
|
+
*
|
|
34
|
+
* @default undefined
|
|
35
|
+
*/
|
|
36
|
+
keepMounted?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Stable value matching a `Tab`.
|
|
39
|
+
*/
|
|
40
|
+
value: string;
|
|
41
|
+
}
|
|
42
|
+
export interface TabPanelSlots {
|
|
43
|
+
/**
|
|
44
|
+
* The panel content.
|
|
45
|
+
*/
|
|
46
|
+
default?: Slot<undefined>;
|
|
47
|
+
}
|
|
48
|
+
export type TabPanelProps = MergeHtmlProps<TabPanelOwnProps, HTMLAttributes>;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { TabsOwnProps, TabsSlots } from './tabs.types';
|
|
2
|
+
type __VLS_Slots = TabsSlots;
|
|
3
|
+
type __VLS_Props = TabsOwnProps;
|
|
4
|
+
type __VLS_ModelProps = {
|
|
5
|
+
modelValue?: string;
|
|
6
|
+
};
|
|
7
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
8
|
+
declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
9
|
+
"update:modelValue": (...args: unknown[]) => any;
|
|
10
|
+
change: (value: string) => any;
|
|
11
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
12
|
+
"onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
|
|
13
|
+
onChange?: ((value: string) => any) | undefined;
|
|
14
|
+
}>, {
|
|
15
|
+
keepMounted: boolean;
|
|
16
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
17
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
18
|
+
declare const _default: typeof __VLS_export;
|
|
19
|
+
export default _default;
|
|
20
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
21
|
+
new (): {
|
|
22
|
+
$slots: S;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { resolveNamedSlot as e } from "../../Utils/slotOrProp.js";
|
|
2
|
+
import t from "../Tab/Tab.js";
|
|
3
|
+
import n from "../TabList/TabList.js";
|
|
4
|
+
import r from "../TabPanel/TabPanel.js";
|
|
5
|
+
import { useTabs as i } from "./composables/useTabs.js";
|
|
6
|
+
import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createSlots as u, createTextVNode as d, createVNode as f, defineComponent as p, guardReactiveProps as m, mergeModels as h, normalizeProps as g, openBlock as _, renderList as v, resolveDynamicComponent as y, toDisplayString as b, unref as x, useModel as S, useSlots as C, withCtx as w } from "vue";
|
|
7
|
+
//#region src/Components/Tabs/Tabs.vue?vue&type=script&setup=true&lang.ts
|
|
8
|
+
var T = /* @__PURE__ */ p({
|
|
9
|
+
inheritAttrs: !1,
|
|
10
|
+
__name: "Tabs",
|
|
11
|
+
props: /* @__PURE__ */ h({
|
|
12
|
+
activation: {},
|
|
13
|
+
classes: {},
|
|
14
|
+
color: {},
|
|
15
|
+
customProps: {},
|
|
16
|
+
keepMounted: {
|
|
17
|
+
type: Boolean,
|
|
18
|
+
default: !0
|
|
19
|
+
},
|
|
20
|
+
orientation: {},
|
|
21
|
+
size: {},
|
|
22
|
+
variant: {}
|
|
23
|
+
}, {
|
|
24
|
+
modelValue: { default: "" },
|
|
25
|
+
modelModifiers: {}
|
|
26
|
+
}),
|
|
27
|
+
emits: /* @__PURE__ */ h(["change", "update:modelValue"], ["update:modelValue"]),
|
|
28
|
+
setup(p, { emit: h }) {
|
|
29
|
+
let T = C(), E = h, { rootBind: D, tabItems: O } = i(p, {
|
|
30
|
+
size: "md",
|
|
31
|
+
variant: "line",
|
|
32
|
+
color: "primary",
|
|
33
|
+
keepMounted: !0,
|
|
34
|
+
activation: "automatic",
|
|
35
|
+
orientation: "horizontal"
|
|
36
|
+
}, S(p, "modelValue"), E), k = o(() => O.value.length > 0);
|
|
37
|
+
return (i, o) => (_(), l("div", g(m(x(D))), [k.value ? (_(), l(a, { key: 0 }, [f(n, null, {
|
|
38
|
+
default: w(() => [(_(!0), l(a, null, v(x(O), (e) => (_(), s(t, {
|
|
39
|
+
key: e.value,
|
|
40
|
+
value: e.value,
|
|
41
|
+
"end-icon": e.endIcon,
|
|
42
|
+
disabled: e.disabled,
|
|
43
|
+
"start-icon": e.startIcon
|
|
44
|
+
}, u({
|
|
45
|
+
default: w(() => [typeof e.label == "string" ? (_(), l(a, { key: 0 }, [d(b(e.label), 1)], 64)) : (_(), s(y(e.label), { key: 1 }))]),
|
|
46
|
+
_: 2
|
|
47
|
+
}, [e.slots?.start ? {
|
|
48
|
+
name: "start",
|
|
49
|
+
fn: w(() => [(_(), s(y(e.slots.start)))]),
|
|
50
|
+
key: "0"
|
|
51
|
+
} : void 0, e.slots?.end ? {
|
|
52
|
+
name: "end",
|
|
53
|
+
fn: w(() => [(_(), s(y(e.slots.end)))]),
|
|
54
|
+
key: "1"
|
|
55
|
+
} : void 0]), 1032, [
|
|
56
|
+
"value",
|
|
57
|
+
"end-icon",
|
|
58
|
+
"disabled",
|
|
59
|
+
"start-icon"
|
|
60
|
+
]))), 128))]),
|
|
61
|
+
_: 1
|
|
62
|
+
}), (_(!0), l(a, null, v(x(O), (e) => (_(), s(r, {
|
|
63
|
+
key: e.value,
|
|
64
|
+
value: e.value,
|
|
65
|
+
"keep-mounted": e.keepMounted
|
|
66
|
+
}, {
|
|
67
|
+
default: w(() => [(_(), s(y(e.panel)))]),
|
|
68
|
+
_: 2
|
|
69
|
+
}, 1032, ["value", "keep-mounted"]))), 128))], 64)) : c("", !0), (_(), s(y(x(e)(x(T), "default"))))], 16));
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
//#endregion
|
|
73
|
+
export { T as default };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { Ref, SetupContext } from 'vue';
|
|
2
|
+
import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
|
|
3
|
+
import { TabsEmits, TabsOwnProps, TabsProps } from '../tabs.types';
|
|
4
|
+
import { TabsContextValue, TabsItemEntry } from '../tabsInjectionKey';
|
|
5
|
+
type TabsLibDefaults = LibDefaultsShape<TabsOwnProps, "size" | "color" | "variant" | "activation" | "keepMounted" | "orientation">;
|
|
6
|
+
type TabsMerged = MergeLibDefaults<TabsOwnProps, TabsLibDefaults>;
|
|
7
|
+
export declare function useTabs(props: TabsOwnProps, libDefaults: TabsLibDefaults, model: Ref<string | undefined>, emit: SetupContext<TabsEmits>["emit"]): {
|
|
8
|
+
merged: import('vue').ComputedRef<TabsMerged>;
|
|
9
|
+
rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
|
|
10
|
+
class: string;
|
|
11
|
+
}, "class", import('vue').HTMLAttributes | undefined, Omit<TabsProps, "color" | "orientation" | "size" | "classes" | "customProps" | "variant" | "keepMounted" | "activation">>>;
|
|
12
|
+
tabItems: Ref<{
|
|
13
|
+
disabled?: boolean | undefined;
|
|
14
|
+
endIcon?: import('@lucide/vue').LucideIcon | undefined;
|
|
15
|
+
keepMounted?: boolean | undefined;
|
|
16
|
+
label: string | (() => import('vue').VNodeChild);
|
|
17
|
+
panel: () => import('vue').VNodeChild;
|
|
18
|
+
slots?: {
|
|
19
|
+
end?: (() => import('vue').VNodeChild) | undefined;
|
|
20
|
+
start?: (() => import('vue').VNodeChild) | undefined;
|
|
21
|
+
} | undefined;
|
|
22
|
+
startIcon?: import('@lucide/vue').LucideIcon | undefined;
|
|
23
|
+
value: string;
|
|
24
|
+
}[], TabsItemEntry[] | {
|
|
25
|
+
disabled?: boolean | undefined;
|
|
26
|
+
endIcon?: import('@lucide/vue').LucideIcon | undefined;
|
|
27
|
+
keepMounted?: boolean | undefined;
|
|
28
|
+
label: string | (() => import('vue').VNodeChild);
|
|
29
|
+
panel: () => import('vue').VNodeChild;
|
|
30
|
+
slots?: {
|
|
31
|
+
end?: (() => import('vue').VNodeChild) | undefined;
|
|
32
|
+
start?: (() => import('vue').VNodeChild) | undefined;
|
|
33
|
+
} | undefined;
|
|
34
|
+
startIcon?: import('@lucide/vue').LucideIcon | undefined;
|
|
35
|
+
value: string;
|
|
36
|
+
}[]>;
|
|
37
|
+
contextValue: import('vue').ComputedRef<TabsContextValue>;
|
|
38
|
+
};
|
|
39
|
+
export {};
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
|
|
2
|
+
import { TABS_INJECTION_KEY as r } from "../tabsInjectionKey.js";
|
|
3
|
+
import { computed as i, provide as a, ref as o, useAttrs as s, useId as c } from "vue";
|
|
4
|
+
import { get as l } from "es-toolkit/compat";
|
|
5
|
+
import { cn as u, getTabId as d, mergeBridgeUILayeredClasses as f, splitComponentProps as p } from "@bridge-ui/core";
|
|
6
|
+
import { colorProps as m, orientationProps as h, sizeProps as g, variantProps as _ } from "@bridge-ui/core/Components/Tabs";
|
|
7
|
+
//#region src/Components/Tabs/composables/useTabs.ts
|
|
8
|
+
var v = [
|
|
9
|
+
"size",
|
|
10
|
+
"color",
|
|
11
|
+
"classes",
|
|
12
|
+
"variant",
|
|
13
|
+
"activation",
|
|
14
|
+
"customProps",
|
|
15
|
+
"keepMounted",
|
|
16
|
+
"orientation"
|
|
17
|
+
];
|
|
18
|
+
function y(y, b, x, S) {
|
|
19
|
+
let C = c(), w = s(), T = `bridge-tabs${C}`, E = o([]), D = o([]), O = o([]), k = i(() => p({
|
|
20
|
+
bridgeKeys: v,
|
|
21
|
+
props: {
|
|
22
|
+
...w,
|
|
23
|
+
...y
|
|
24
|
+
}
|
|
25
|
+
})), { merged: A, entry: j } = t({
|
|
26
|
+
libDefaults: b,
|
|
27
|
+
componentName: "Tabs",
|
|
28
|
+
props: () => k.value.componentProps
|
|
29
|
+
}), M = i(() => x.value ?? "");
|
|
30
|
+
function N(e) {
|
|
31
|
+
D.value.includes(e) || (x.value = e, S("update:modelValue", e), S("change", e));
|
|
32
|
+
}
|
|
33
|
+
function P(e, t = !1) {
|
|
34
|
+
return E.value.includes(e) || (E.value = [...E.value, e]), t ? D.value.includes(e) || (D.value = [...D.value, e]) : D.value = D.value.filter((t) => t !== e), (x.value ?? "") === "" && !t && (x.value = e), () => {
|
|
35
|
+
E.value = E.value.filter((t) => t !== e), D.value = D.value.filter((t) => t !== e);
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
function F(e) {
|
|
39
|
+
document.getElementById(d(T, e))?.focus();
|
|
40
|
+
}
|
|
41
|
+
function I(e) {
|
|
42
|
+
let t = O.value.findIndex((t) => t.value === e.value);
|
|
43
|
+
if (t === -1) O.value = [...O.value, e];
|
|
44
|
+
else {
|
|
45
|
+
let n = [...O.value];
|
|
46
|
+
n[t] = e, O.value = n;
|
|
47
|
+
}
|
|
48
|
+
return (x.value ?? "") === "" && !e.disabled && (x.value = e.value), () => {
|
|
49
|
+
O.value = O.value.filter((t) => t.value !== e.value);
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
let L = n({
|
|
53
|
+
entry: j,
|
|
54
|
+
props: () => k.value.componentProps
|
|
55
|
+
}), R = i(() => f(g, j.value?.customProps?.size)), z = i(() => f(_, j.value?.customProps?.variant)), B = i(() => f(m, j.value?.customProps?.color)), V = i(() => f(h, j.value?.customProps?.orientation)), H = i(() => l(R.value, A.value.size)), U = i(() => l(z.value, A.value.variant)), W = i(() => l(B.value, A.value.color)), G = i(() => l(V.value, A.value.orientation)), K = i(() => ({
|
|
56
|
+
focusTab: F,
|
|
57
|
+
id: T,
|
|
58
|
+
setSelected: N,
|
|
59
|
+
registerTab: P,
|
|
60
|
+
registerTabItem: I,
|
|
61
|
+
selected: M.value,
|
|
62
|
+
tabItems: O.value,
|
|
63
|
+
tabValues: E.value,
|
|
64
|
+
disabledValues: D.value,
|
|
65
|
+
keepMounted: A.value.keepMounted !== !1,
|
|
66
|
+
activation: A.value.activation ?? "automatic",
|
|
67
|
+
orientation: A.value.orientation ?? "horizontal",
|
|
68
|
+
tokenClasses: {
|
|
69
|
+
tabSize: l(H.value, "tab"),
|
|
70
|
+
iconGap: l(H.value, "gap"),
|
|
71
|
+
iconSize: l(H.value, "icon"),
|
|
72
|
+
listSize: l(H.value, "list"),
|
|
73
|
+
panelSize: l(H.value, "panel"),
|
|
74
|
+
tabVariant: l(U.value, "tab"),
|
|
75
|
+
listVariant: l(U.value, "list"),
|
|
76
|
+
tabOrientation: l(G.value, "tab"),
|
|
77
|
+
colorSelected: l(W.value, "tabSelected"),
|
|
78
|
+
listOrientation: l(G.value, "list"),
|
|
79
|
+
rootOrientation: l(G.value, "root"),
|
|
80
|
+
panelOrientation: l(G.value, "panel"),
|
|
81
|
+
tabVariantSelected: l(U.value, "tabSelected"),
|
|
82
|
+
colorSelectedSoft: l(W.value, "tabSelectedSoft"),
|
|
83
|
+
softFill: A.value.variant === "pill" || A.value.variant === "solid"
|
|
84
|
+
}
|
|
85
|
+
}));
|
|
86
|
+
a(r, K);
|
|
87
|
+
let q = i(() => A.value.customProps);
|
|
88
|
+
return {
|
|
89
|
+
merged: A,
|
|
90
|
+
rootBind: i(() => e(q.value?.root, k.value.inheritedAttrs, { class: u({
|
|
91
|
+
[l(G.value, "root") ?? ""]: !0,
|
|
92
|
+
[l(L.value, "root") ?? ""]: !0
|
|
93
|
+
}) })),
|
|
94
|
+
tabItems: O,
|
|
95
|
+
contextValue: K
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
//#endregion
|
|
99
|
+
export { y as useTabs };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { useTabs } from './composables/useTabs';
|
|
2
|
+
export type { TabsClasses, TabsColorOverrides, TabsCustomProps, TabsEmits, TabsOrientationOverrides, TabsOwnProps, TabsProps, TabsSizeOverrides, TabsSlots, TabsVariantOverrides, } from './tabs.types';
|
|
3
|
+
export { default as Tabs } from './Tabs.vue';
|
|
4
|
+
export { TABS_INJECTION_KEY, type TabsContextValue, type TabsItemEntry, type TabsTokenClasses, } from './tabsInjectionKey';
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { HTMLAttributes, Slot } from 'vue';
|
|
2
|
+
import { MergeHtmlProps, MergeProps, TabsActivation, TabsColor, TabsOrientation, TabsSize, TabsVariant } from '@bridge-ui/core';
|
|
3
|
+
export interface TabsSizeOverrides {}
|
|
4
|
+
export interface TabsColorOverrides {}
|
|
5
|
+
export interface TabsVariantOverrides {}
|
|
6
|
+
export interface TabsOrientationOverrides {}
|
|
7
|
+
export interface TabsClasses {
|
|
8
|
+
/**
|
|
9
|
+
* Classes merged onto the root.
|
|
10
|
+
*/
|
|
11
|
+
root?: string;
|
|
12
|
+
}
|
|
13
|
+
export interface TabsCustomProps {
|
|
14
|
+
/**
|
|
15
|
+
* Props forwarded to the root element.
|
|
16
|
+
*/
|
|
17
|
+
root?: HTMLAttributes;
|
|
18
|
+
}
|
|
19
|
+
export interface TabsEmits {
|
|
20
|
+
/**
|
|
21
|
+
* Emitted when the selected tab changes.
|
|
22
|
+
*/
|
|
23
|
+
change: [value: string];
|
|
24
|
+
/**
|
|
25
|
+
* Emitted when `v-model` should update.
|
|
26
|
+
*/
|
|
27
|
+
"update:modelValue": [value: string];
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Tabs context root. Compose with `TabList`, `Tab`, and `TabPanel`.
|
|
31
|
+
*/
|
|
32
|
+
export interface TabsOwnProps {
|
|
33
|
+
/**
|
|
34
|
+
* Keyboard activation: `automatic` selects on arrow focus; `manual` needs Enter/Space.
|
|
35
|
+
*
|
|
36
|
+
* @default "automatic"
|
|
37
|
+
*/
|
|
38
|
+
activation?: TabsActivation;
|
|
39
|
+
/**
|
|
40
|
+
* Classes for tabs parts.
|
|
41
|
+
*
|
|
42
|
+
* @default undefined
|
|
43
|
+
*/
|
|
44
|
+
classes?: TabsClasses;
|
|
45
|
+
/**
|
|
46
|
+
* Accent color for the selected tab.
|
|
47
|
+
*
|
|
48
|
+
* @default "primary"
|
|
49
|
+
*/
|
|
50
|
+
color?: MergeProps<TabsColor, TabsColorOverrides>;
|
|
51
|
+
/**
|
|
52
|
+
* Props forwarded to each tabs part.
|
|
53
|
+
*
|
|
54
|
+
* @default undefined
|
|
55
|
+
*/
|
|
56
|
+
customProps?: TabsCustomProps;
|
|
57
|
+
/**
|
|
58
|
+
* When true, inactive panels stay mounted (hidden).
|
|
59
|
+
*
|
|
60
|
+
* @default true
|
|
61
|
+
*/
|
|
62
|
+
keepMounted?: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Layout orientation of the tab list.
|
|
65
|
+
*
|
|
66
|
+
* @default "horizontal"
|
|
67
|
+
*/
|
|
68
|
+
orientation?: MergeProps<TabsOrientation, TabsOrientationOverrides>;
|
|
69
|
+
/**
|
|
70
|
+
* Size of the tab list and triggers.
|
|
71
|
+
*
|
|
72
|
+
* @default "md"
|
|
73
|
+
*/
|
|
74
|
+
size?: MergeProps<TabsSize, TabsSizeOverrides>;
|
|
75
|
+
/**
|
|
76
|
+
* Visual style of the tab list / selected tab.
|
|
77
|
+
*
|
|
78
|
+
* @default "line"
|
|
79
|
+
*/
|
|
80
|
+
variant?: MergeProps<TabsVariant, TabsVariantOverrides>;
|
|
81
|
+
}
|
|
82
|
+
export interface TabsSlots {
|
|
83
|
+
/**
|
|
84
|
+
* The children to render (`TabList`, `TabPanel`, etc.).
|
|
85
|
+
*/
|
|
86
|
+
default?: Slot<undefined>;
|
|
87
|
+
}
|
|
88
|
+
export type TabsProps = MergeHtmlProps<TabsOwnProps, HTMLAttributes> & {
|
|
89
|
+
/**
|
|
90
|
+
* Bound with `v-model` on the component (`defineModel` internally).
|
|
91
|
+
*/
|
|
92
|
+
modelValue?: string;
|
|
93
|
+
};
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import { LucideIcon } from '@lucide/vue';
|
|
2
|
+
import { ComputedRef, InjectionKey, VNodeChild } from 'vue';
|
|
3
|
+
import { TabsActivation } from '@bridge-ui/core';
|
|
4
|
+
/**
|
|
5
|
+
* Merged token classes for triggers / list / panel.
|
|
6
|
+
*/
|
|
7
|
+
export type TabsTokenClasses = {
|
|
8
|
+
colorSelected?: string;
|
|
9
|
+
colorSelectedSoft?: string;
|
|
10
|
+
iconGap?: string;
|
|
11
|
+
iconSize?: string;
|
|
12
|
+
listOrientation?: string;
|
|
13
|
+
listSize?: string;
|
|
14
|
+
listVariant?: string;
|
|
15
|
+
panelOrientation?: string;
|
|
16
|
+
panelSize?: string;
|
|
17
|
+
rootOrientation?: string;
|
|
18
|
+
softFill?: boolean;
|
|
19
|
+
tabOrientation?: string;
|
|
20
|
+
tabSize?: string;
|
|
21
|
+
tabVariant?: string;
|
|
22
|
+
tabVariantSelected?: string;
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* Declarative tab + panel registered by `TabItem`.
|
|
26
|
+
*/
|
|
27
|
+
export type TabsItemEntry = {
|
|
28
|
+
/**
|
|
29
|
+
* Whether the tab is disabled.
|
|
30
|
+
*/
|
|
31
|
+
disabled?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Optional trailing Lucide icon on the tab trigger.
|
|
34
|
+
*/
|
|
35
|
+
endIcon?: LucideIcon;
|
|
36
|
+
/**
|
|
37
|
+
* When set, overrides `Tabs` `keepMounted` for this panel.
|
|
38
|
+
*/
|
|
39
|
+
keepMounted?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Trigger label content (string or render function).
|
|
42
|
+
*/
|
|
43
|
+
label: string | (() => VNodeChild);
|
|
44
|
+
/**
|
|
45
|
+
* Panel content render function.
|
|
46
|
+
*/
|
|
47
|
+
panel: () => VNodeChild;
|
|
48
|
+
/**
|
|
49
|
+
* Custom start / end adornment render functions for the tab trigger.
|
|
50
|
+
*/
|
|
51
|
+
slots?: {
|
|
52
|
+
end?: () => VNodeChild;
|
|
53
|
+
start?: () => VNodeChild;
|
|
54
|
+
};
|
|
55
|
+
/**
|
|
56
|
+
* Optional leading Lucide icon on the tab trigger.
|
|
57
|
+
*/
|
|
58
|
+
startIcon?: LucideIcon;
|
|
59
|
+
/**
|
|
60
|
+
* Stable value matching the tab / panel pair.
|
|
61
|
+
*/
|
|
62
|
+
value: string;
|
|
63
|
+
};
|
|
64
|
+
/**
|
|
65
|
+
* Shared tabs state for `TabList` / `Tab` / `TabPanel` / `TabItem` descendants.
|
|
66
|
+
*/
|
|
67
|
+
export type TabsContextValue = {
|
|
68
|
+
/**
|
|
69
|
+
* Keyboard activation mode.
|
|
70
|
+
*/
|
|
71
|
+
activation: TabsActivation;
|
|
72
|
+
/**
|
|
73
|
+
* Disabled tab values.
|
|
74
|
+
*/
|
|
75
|
+
disabledValues: string[];
|
|
76
|
+
/**
|
|
77
|
+
* Focus a tab by value (roving tabindex).
|
|
78
|
+
*/
|
|
79
|
+
focusTab: (value: string) => void;
|
|
80
|
+
/**
|
|
81
|
+
* Stable id prefix for tab / panel pairing.
|
|
82
|
+
*/
|
|
83
|
+
id: string;
|
|
84
|
+
/**
|
|
85
|
+
* Whether panels stay mounted when inactive.
|
|
86
|
+
*/
|
|
87
|
+
keepMounted: boolean;
|
|
88
|
+
/**
|
|
89
|
+
* Orientation of the tab list.
|
|
90
|
+
*/
|
|
91
|
+
orientation: "vertical" | "horizontal";
|
|
92
|
+
/**
|
|
93
|
+
* Registers a tab trigger and returns unregister.
|
|
94
|
+
*/
|
|
95
|
+
registerTab: (value: string, disabled?: boolean) => () => void;
|
|
96
|
+
/**
|
|
97
|
+
* Registers a declarative `TabItem` (label + panel) and returns unregister.
|
|
98
|
+
*/
|
|
99
|
+
registerTabItem: (entry: TabsItemEntry) => () => void;
|
|
100
|
+
/**
|
|
101
|
+
* Currently selected tab value.
|
|
102
|
+
*/
|
|
103
|
+
selected: string;
|
|
104
|
+
/**
|
|
105
|
+
* Selects a tab by value.
|
|
106
|
+
*/
|
|
107
|
+
setSelected: (value: string) => void;
|
|
108
|
+
/**
|
|
109
|
+
* Declarative items from `TabItem` children (mount order).
|
|
110
|
+
*/
|
|
111
|
+
tabItems: TabsItemEntry[];
|
|
112
|
+
/**
|
|
113
|
+
* Ordered tab values (mount order).
|
|
114
|
+
*/
|
|
115
|
+
tabValues: string[];
|
|
116
|
+
/**
|
|
117
|
+
* Merged token classes for triggers / list / panel.
|
|
118
|
+
*/
|
|
119
|
+
tokenClasses: TabsTokenClasses;
|
|
120
|
+
};
|
|
121
|
+
export declare const TABS_INJECTION_KEY: InjectionKey<ComputedRef<TabsContextValue>>;
|
package/dist/Utils/index.d.ts
CHANGED
|
@@ -43,5 +43,7 @@ export declare function resolveFieldAdornmentIconSize(fieldSize?: keyof FormFiel
|
|
|
43
43
|
*/
|
|
44
44
|
export declare function resolveVnodeRefElement(element: null | Element | ComponentPublicInstance): null | HTMLElement;
|
|
45
45
|
export { hasNamedSlot, hasSlotOrProp, isPropPresent, resolveNamedSlot, resolveSlotOrProp, } from './slotOrProp';
|
|
46
|
+
export { useBreakpoint } from './useBreakpoint';
|
|
47
|
+
export type { UseBreakpointOptions } from './useBreakpoint';
|
|
46
48
|
export { useHoldRepeat } from './useHoldRepeat';
|
|
47
49
|
export type { HoldRepeatAction, UseHoldRepeatOptions, } from './useHoldRepeat';
|
package/dist/Utils/index.js
CHANGED
|
@@ -1,39 +1,40 @@
|
|
|
1
1
|
import { useBridgeUI as e } from "../Provider/useBridgeUI.js";
|
|
2
2
|
import { hasNamedSlot as t, hasSlotOrProp as n, isPropPresent as r, resolveNamedSlot as i, resolveSlotOrProp as a } from "./slotOrProp.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
3
|
+
import { useBreakpoint as o } from "./useBreakpoint.js";
|
|
4
|
+
import { useHoldRepeat as s } from "./useHoldRepeat.js";
|
|
5
|
+
import { computed as c, defineComponent as l, toValue as u, unref as d } from "vue";
|
|
6
|
+
import { get as f, isNil as p } from "es-toolkit/compat";
|
|
7
|
+
import { createMergePartBind as m } from "@bridge-ui/core";
|
|
8
|
+
import { mergeBridgeUILayeredClasses as h, mergePropsWithBridgeUIDefaults as g } from "@bridge-ui/core/Utils";
|
|
8
9
|
//#region src/Utils/index.ts
|
|
9
|
-
function
|
|
10
|
-
return
|
|
10
|
+
function _(e) {
|
|
11
|
+
return l({
|
|
11
12
|
name: "HeadlessTestComponent",
|
|
12
13
|
setup() {
|
|
13
14
|
return e(), () => null;
|
|
14
15
|
}
|
|
15
16
|
});
|
|
16
17
|
}
|
|
17
|
-
var
|
|
18
|
-
function
|
|
19
|
-
let i = e(), a =
|
|
18
|
+
var v = m("class");
|
|
19
|
+
function y({ props: t, libDefaults: n, componentName: r }) {
|
|
20
|
+
let i = e(), a = c(() => p(i) ? null : d(i.components));
|
|
20
21
|
return {
|
|
21
|
-
entry:
|
|
22
|
+
entry: c(() => f(a.value, r)),
|
|
22
23
|
bridge: i,
|
|
23
|
-
merged:
|
|
24
|
+
merged: c(() => g({
|
|
24
25
|
libDefaults: n,
|
|
25
26
|
componentName: r,
|
|
26
|
-
props:
|
|
27
|
+
props: u(t),
|
|
27
28
|
components: a.value
|
|
28
29
|
})),
|
|
29
30
|
components: a
|
|
30
31
|
};
|
|
31
32
|
}
|
|
32
|
-
function
|
|
33
|
-
return
|
|
33
|
+
function b({ entry: e, props: t }) {
|
|
34
|
+
return c(() => h(f(e.value, "classes"), u(t).classes));
|
|
34
35
|
}
|
|
35
|
-
function
|
|
36
|
-
return
|
|
36
|
+
function x(e) {
|
|
37
|
+
return f({
|
|
37
38
|
xs: "xs",
|
|
38
39
|
sm: "sm",
|
|
39
40
|
md: "md",
|
|
@@ -43,7 +44,7 @@ function b(e) {
|
|
|
43
44
|
"2xl": "lg"
|
|
44
45
|
}, e ?? "md");
|
|
45
46
|
}
|
|
46
|
-
function
|
|
47
|
+
function S(e) {
|
|
47
48
|
if (e instanceof HTMLElement) return e;
|
|
48
49
|
if (e && "$el" in e) {
|
|
49
50
|
let t = e.$el;
|
|
@@ -52,4 +53,4 @@ function x(e) {
|
|
|
52
53
|
return null;
|
|
53
54
|
}
|
|
54
55
|
//#endregion
|
|
55
|
-
export {
|
|
56
|
+
export { _ as defineHeadlessComponent, t as hasNamedSlot, n as hasSlotOrProp, r as isPropPresent, v as mergePartBind, x as resolveFieldAdornmentIconSize, i as resolveNamedSlot, a as resolveSlotOrProp, S as resolveVnodeRefElement, o as useBreakpoint, y as useBridgeUIComponent, b as useBridgeUIMergedRegistryClasses, s as useHoldRepeat };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { MaybeRefOrGetter } from 'vue';
|
|
2
|
+
import { BreakpointObserverOptions, BreakpointSnapshot } from '@bridge-ui/core';
|
|
3
|
+
export type UseBreakpointOptions = BreakpointObserverOptions;
|
|
4
|
+
/**
|
|
5
|
+
* Reactive viewport breakpoints aligned with Tailwind `--breakpoint-*` tokens.
|
|
6
|
+
*
|
|
7
|
+
* Returns a reactive object — call helpers on the object (do not destructure
|
|
8
|
+
* them) so updates stay reactive in script.
|
|
9
|
+
*
|
|
10
|
+
* Falls back to `BridgeUIProvider` `global.mobileBreakpoint` and
|
|
11
|
+
* `global.breakpoints`. Composable options win when passed.
|
|
12
|
+
*
|
|
13
|
+
* On the server (and before mount), `mobile` is `true` at width `0`.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* const breakpoint = useBreakpoint();
|
|
17
|
+
* // :align="breakpoint.mobile ? 'bottom-center' : 'middle-center'"
|
|
18
|
+
*/
|
|
19
|
+
export declare function useBreakpoint(options?: MaybeRefOrGetter<undefined | UseBreakpointOptions>): BreakpointSnapshot;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { useBridgeUI as e } from "../Provider/useBridgeUI.js";
|
|
2
|
+
import { onBeforeUnmount as t, reactive as n, toValue as r, watch as i } from "vue";
|
|
3
|
+
import { isEmpty as a, isNil as o } from "es-toolkit/compat";
|
|
4
|
+
import { buildBreakpointSnapshot as s, createBreakpointObserver as c, resolveBreakpoints as l } from "@bridge-ui/core";
|
|
5
|
+
import { toMerged as u } from "es-toolkit/object";
|
|
6
|
+
//#region src/Utils/useBreakpoint.ts
|
|
7
|
+
function d(d) {
|
|
8
|
+
let f = e(), p = n(s(0, 0, l(), "sm")), m, h;
|
|
9
|
+
function g(e) {
|
|
10
|
+
Object.assign(p, e);
|
|
11
|
+
}
|
|
12
|
+
function _(e) {
|
|
13
|
+
let t = u(f?.global.value.breakpoints ?? {}, e?.breakpoints ?? {});
|
|
14
|
+
return {
|
|
15
|
+
breakpoints: a(t) ? void 0 : t,
|
|
16
|
+
mobileBreakpoint: o(e?.mobileBreakpoint) ? f?.global.value.mobileBreakpoint : e.mobileBreakpoint
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
function v(e) {
|
|
20
|
+
h?.(), h = void 0, m = c(_(e)), g(m.getSnapshot()), h = m.subscribe(() => {
|
|
21
|
+
o(m) || g(m.getSnapshot());
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
return v(r(d)), i(() => [
|
|
25
|
+
r(d),
|
|
26
|
+
f?.global.value.breakpoints,
|
|
27
|
+
f?.global.value.mobileBreakpoint
|
|
28
|
+
], () => {
|
|
29
|
+
v(r(d));
|
|
30
|
+
}, { deep: !0 }), t(() => {
|
|
31
|
+
h?.(), h = void 0, m = void 0;
|
|
32
|
+
}), p;
|
|
33
|
+
}
|
|
34
|
+
//#endregion
|
|
35
|
+
export { d as useBreakpoint };
|