@bridge-ui/vue 0.0.9 → 0.0.10
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/ai/skills/bridge-ui-components/SKILL.md +2 -1
- package/dist/Components/Accordion/Accordion.js +5 -0
- package/dist/Components/Accordion/Accordion.vue.d.ts +26 -0
- package/dist/Components/Accordion/Accordion.vue_vue_type_script_setup_true_lang.js +38 -0
- package/dist/Components/Accordion/accordion.types.d.ts +88 -0
- package/dist/Components/Accordion/accordionInjectionKey.d.ts +63 -0
- package/dist/Components/Accordion/accordionInjectionKey.js +4 -0
- package/dist/Components/Accordion/composables/useAccordion.d.ts +14 -0
- package/dist/Components/Accordion/composables/useAccordion.js +79 -0
- package/dist/Components/Accordion/index.d.ts +4 -0
- package/dist/Components/Accordion/index.js +4 -0
- package/dist/Components/AccordionItem/AccordionItem.js +5 -0
- package/dist/Components/AccordionItem/AccordionItem.vue.d.ts +11 -0
- package/dist/Components/AccordionItem/AccordionItem.vue_vue_type_script_setup_true_lang.js +25 -0
- package/dist/Components/AccordionItem/accordionItem.types.d.ts +105 -0
- package/dist/Components/AccordionItem/composables/useAccordionItem.d.ts +41 -0
- package/dist/Components/AccordionItem/composables/useAccordionItem.js +123 -0
- package/dist/Components/AccordionItem/index.d.ts +3 -0
- package/dist/Components/AccordionItem/index.js +3 -0
- package/dist/Components/Alert/Alert.vue_vue_type_script_setup_true_lang.js +11 -11
- package/dist/Components/Alert/composables/useAlert.js +9 -9
- package/dist/Components/Autocomplete/Autocomplete.vue_vue_type_script_setup_true_lang.js +69 -65
- package/dist/Components/Avatar/Avatar.vue_vue_type_script_setup_true_lang.js +4 -4
- package/dist/Components/Avatar/composables/useAvatar.d.ts +0 -1
- package/dist/Components/Avatar/composables/useAvatar.js +23 -24
- package/dist/Components/Badge/Badge.vue.d.ts +11 -1
- package/dist/Components/Badge/Badge.vue_vue_type_script_setup_true_lang.js +7 -8
- package/dist/Components/BaseField/BaseField.vue_vue_type_script_setup_true_lang.js +31 -27
- package/dist/Components/BaseField/BaseFieldLabel.vue.d.ts +11 -1
- package/dist/Components/BaseField/BaseFieldLabel.vue_vue_type_script_setup_true_lang.js +11 -10
- package/dist/Components/BaseField/baseField.types.d.ts +5 -0
- package/dist/Components/BaseField/baseField.types.js +11 -0
- package/dist/Components/BaseField/index.d.ts +1 -0
- package/dist/Components/BaseField/index.js +4 -3
- package/dist/Components/Breadcrumb/Breadcrumb.js +5 -0
- package/dist/Components/Breadcrumb/Breadcrumb.vue.d.ts +13 -0
- package/dist/Components/Breadcrumb/Breadcrumb.vue_vue_type_script_setup_true_lang.js +49 -0
- package/dist/Components/Breadcrumb/breadcrumb.types.d.ts +101 -0
- package/dist/Components/Breadcrumb/breadcrumbInjectionKey.d.ts +35 -0
- package/dist/Components/Breadcrumb/breadcrumbInjectionKey.js +4 -0
- package/dist/Components/Breadcrumb/composables/useBreadcrumb.d.ts +20 -0
- package/dist/Components/Breadcrumb/composables/useBreadcrumb.js +69 -0
- package/dist/Components/Breadcrumb/index.d.ts +4 -0
- package/dist/Components/Breadcrumb/index.js +4 -0
- package/dist/Components/BreadcrumbItem/BreadcrumbItem.js +5 -0
- package/dist/Components/BreadcrumbItem/BreadcrumbItem.vue.d.ts +14 -0
- package/dist/Components/BreadcrumbItem/BreadcrumbItem.vue_vue_type_script_setup_true_lang.js +47 -0
- package/dist/Components/BreadcrumbItem/breadcrumbItem.types.d.ts +140 -0
- package/dist/Components/BreadcrumbItem/composables/useBreadcrumbItem.d.ts +38 -0
- package/dist/Components/BreadcrumbItem/composables/useBreadcrumbItem.js +87 -0
- package/dist/Components/BreadcrumbItem/index.d.ts +3 -0
- package/dist/Components/BreadcrumbItem/index.js +3 -0
- package/dist/Components/Button/Button.vue_vue_type_script_setup_true_lang.js +17 -17
- package/dist/Components/Card/Card.vue_vue_type_script_setup_true_lang.js +10 -10
- package/dist/Components/Card/composables/useCard.d.ts +0 -1
- package/dist/Components/Card/composables/useCard.js +64 -66
- package/dist/Components/Checkbox/Checkbox.vue_vue_type_script_setup_true_lang.js +31 -26
- package/dist/Components/Chip/Chip.vue_vue_type_script_setup_true_lang.js +10 -10
- package/dist/Components/DateField/DateField.vue_vue_type_script_setup_true_lang.js +61 -56
- package/dist/Components/DateField/composables/useDateField.d.ts +14 -4
- package/dist/Components/DateField/dateField.types.d.ts +3 -3
- package/dist/Components/DateRangeField/DateRangeField.vue_vue_type_script_setup_true_lang.js +59 -54
- package/dist/Components/DateRangeField/composables/useDateRangeField.d.ts +14 -4
- package/dist/Components/DateRangeField/dateRangeField.types.d.ts +3 -3
- package/dist/Components/DateTimeField/DateTimeField.vue_vue_type_script_setup_true_lang.js +65 -60
- package/dist/Components/DateTimeField/composables/useDateTimeField.d.ts +14 -4
- package/dist/Components/DateTimeField/dateTimeField.types.d.ts +3 -3
- package/dist/Components/DateTimeRangeField/DateTimeRangeField.vue_vue_type_script_setup_true_lang.js +65 -60
- package/dist/Components/DateTimeRangeField/composables/useDateTimeRangeField.d.ts +14 -4
- package/dist/Components/DateTimeRangeField/dateTimeRangeField.types.d.ts +3 -3
- package/dist/Components/Drawer/Drawer.vue_vue_type_script_setup_true_lang.js +19 -20
- package/dist/Components/FormControl/FormControl.vue.d.ts +2 -4
- package/dist/Components/FormControl/FormControl.vue_vue_type_script_setup_true_lang.js +37 -23
- package/dist/Components/FormControl/FormControlLabel.vue.d.ts +11 -1
- package/dist/Components/FormControl/FormControlLabel.vue_vue_type_script_setup_true_lang.js +11 -10
- package/dist/Components/FormControl/formControl.types.d.ts +4 -0
- package/dist/Components/FormControl/formControl.types.js +9 -0
- package/dist/Components/FormControl/index.d.ts +1 -0
- package/dist/Components/FormControl/index.js +3 -2
- package/dist/Components/FormField/FilledFormField.vue.d.ts +14 -2
- package/dist/Components/FormField/FilledFormField.vue_vue_type_script_setup_true_lang.js +23 -18
- package/dist/Components/FormField/FormField.vue_vue_type_script_setup_true_lang.js +32 -27
- package/dist/Components/FormField/FormFieldLabel.vue.d.ts +11 -1
- package/dist/Components/FormField/FormFieldLabel.vue_vue_type_script_setup_true_lang.js +11 -10
- package/dist/Components/FormField/NotchedFormField.vue.d.ts +14 -2
- package/dist/Components/FormField/NotchedFormField.vue_vue_type_script_setup_true_lang.js +22 -17
- package/dist/Components/FormField/OutlinedFormField.vue.d.ts +14 -2
- package/dist/Components/FormField/OutlinedFormField.vue_vue_type_script_setup_true_lang.js +23 -18
- package/dist/Components/FormField/StackedFormField.vue.d.ts +14 -2
- package/dist/Components/FormField/StackedFormField.vue_vue_type_script_setup_true_lang.js +25 -20
- package/dist/Components/FormField/UnderlinedFormField.vue.d.ts +14 -2
- package/dist/Components/FormField/UnderlinedFormField.vue_vue_type_script_setup_true_lang.js +23 -18
- package/dist/Components/FormField/formField.types.d.ts +5 -0
- package/dist/Components/FormField/formField.types.js +11 -0
- package/dist/Components/FormField/index.d.ts +1 -0
- package/dist/Components/FormField/index.js +3 -2
- package/dist/Components/Label/Label.vue.d.ts +11 -1
- package/dist/Components/Label/Label.vue_vue_type_script_setup_true_lang.js +7 -8
- package/dist/Components/Link/Link.vue_vue_type_script_setup_true_lang.js +23 -23
- package/dist/Components/List/List.vue.d.ts +11 -1
- package/dist/Components/List/List.vue_vue_type_script_setup_true_lang.js +9 -10
- package/dist/Components/ListItem/ListItem.vue_vue_type_script_setup_true_lang.js +18 -18
- package/dist/Components/ListItem/composables/useListItem.d.ts +1 -3
- package/dist/Components/ListItem/composables/useListItem.js +47 -55
- package/dist/Components/ListSection/ListSection.vue_vue_type_script_setup_true_lang.js +10 -9
- package/dist/Components/ListSection/composables/useListSection.d.ts +1 -3
- package/dist/Components/ListSection/composables/useListSection.js +29 -31
- package/dist/Components/Listbox/Listbox.vue_vue_type_script_setup_true_lang.js +82 -82
- package/dist/Components/Menu/Menu.vue_vue_type_script_setup_true_lang.js +19 -19
- package/dist/Components/Modal/Modal.vue_vue_type_script_setup_true_lang.js +19 -20
- package/dist/Components/NumberField/NumberField.vue_vue_type_script_setup_true_lang.js +48 -43
- package/dist/Components/OtpField/OtpField.vue_vue_type_script_setup_true_lang.js +27 -22
- package/dist/Components/PasswordField/PasswordField.vue_vue_type_script_setup_true_lang.js +34 -29
- package/dist/Components/Radio/Radio.vue_vue_type_script_setup_true_lang.js +26 -21
- package/dist/Components/Select/Select.vue_vue_type_script_setup_true_lang.js +67 -63
- package/dist/Components/Slider/Slider.vue_vue_type_script_setup_true_lang.js +54 -49
- package/dist/Components/Switch/Switch.vue_vue_type_script_setup_true_lang.js +28 -23
- package/dist/Components/Tab/Tab.vue_vue_type_script_setup_true_lang.js +16 -16
- package/dist/Components/TabList/TabList.vue_vue_type_script_setup_true_lang.js +7 -8
- package/dist/Components/TabPanel/TabPanel.vue_vue_type_script_setup_true_lang.js +7 -8
- package/dist/Components/Tabs/Tabs.vue_vue_type_script_setup_true_lang.js +29 -26
- package/dist/Components/TextField/TextField.vue_vue_type_script_setup_true_lang.js +21 -16
- package/dist/Components/Textarea/Textarea.vue_vue_type_script_setup_true_lang.js +25 -20
- package/dist/Components/TimeField/TimeField.vue_vue_type_script_setup_true_lang.js +53 -48
- package/dist/Components/TimeField/composables/useTimeField.d.ts +14 -4
- package/dist/Components/TimeField/timeField.types.d.ts +3 -3
- package/dist/Components/TimeRangeField/TimeRangeField.vue_vue_type_script_setup_true_lang.js +53 -48
- package/dist/Components/TimeRangeField/composables/useTimeRangeField.d.ts +14 -4
- package/dist/Components/TimeRangeField/timeRangeField.types.d.ts +3 -3
- package/dist/Components/Tooltip/Tooltip.vue_vue_type_script_setup_true_lang.js +18 -18
- package/dist/Utils/index.d.ts +1 -1
- package/dist/Utils/index.js +2 -2
- package/dist/Utils/slotOrProp.d.ts +20 -11
- package/dist/Utils/slotOrProp.js +21 -17
- package/dist/Utils/useBreakpoint.d.ts +0 -4
- package/dist/index.d.ts +8 -0
- package/dist/index.js +133 -124
- package/docs/README.md +1 -0
- package/docs/components/Accordion.md +104 -0
- package/docs/components/Breadcrumb.md +74 -0
- package/package.json +2 -2
|
@@ -1,16 +1,17 @@
|
|
|
1
|
-
import { hasNamedSlot as e, hasSlotOrProp as t
|
|
2
|
-
import
|
|
3
|
-
import { Fragment as
|
|
1
|
+
import { hasNamedSlot as e, hasSlotOrProp as t } from "../../Utils/slotOrProp.js";
|
|
2
|
+
import n from "../Label/Label.js";
|
|
3
|
+
import { Fragment as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createTextVNode as s, defineComponent as c, mergeProps as l, normalizeProps as u, openBlock as d, renderSlot as f, toDisplayString as p, unref as m, useSlots as h, withCtx as g } from "vue";
|
|
4
4
|
//#region src/Components/BaseField/BaseFieldLabel.vue?vue&type=script&setup=true&lang.ts
|
|
5
|
-
var
|
|
5
|
+
var _ = /*@__PURE__*/ c({
|
|
6
6
|
__name: "BaseFieldLabel",
|
|
7
7
|
props: { api: {} },
|
|
8
|
-
setup(
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
_: 1
|
|
12
|
-
|
|
8
|
+
setup(c) {
|
|
9
|
+
let _ = h();
|
|
10
|
+
return (h, v) => m(t)(m(_), "label", c.api.merged.value.label) ? (d(), i(m(n), u(l({ key: 0 }, c.api.fieldLabelProps.value)), {
|
|
11
|
+
default: g(() => [m(e)(m(_), "label") ? f(h.$slots, "label", {}, void 0, void 0, 0) : (d(), o(r, { key: 1 }, [s(p(c.api.merged.value.label), 1)], 64))]),
|
|
12
|
+
_: 3
|
|
13
|
+
}, 16)) : a("", !0);
|
|
13
14
|
}
|
|
14
15
|
});
|
|
15
16
|
//#endregion
|
|
16
|
-
export {
|
|
17
|
+
export { _ as default };
|
|
@@ -219,4 +219,9 @@ export interface BaseFieldSlots {
|
|
|
219
219
|
*/
|
|
220
220
|
start?: Slot;
|
|
221
221
|
}
|
|
222
|
+
/**
|
|
223
|
+
* Named BaseField chrome slots (excludes the `default` control slot).
|
|
224
|
+
* Field wrappers forward only these into `<BaseField>`.
|
|
225
|
+
*/
|
|
226
|
+
export declare const BASE_FIELD_CHROME_SLOT_NAMES: readonly ["end", "label", "start", "corner", "description", "errorMessage"];
|
|
222
227
|
export type BaseFieldProps = MergeHtmlProps<BaseFieldOwnProps, Omit<HTMLAttributes, "color">>;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
export { BASE_FIELD_CHROME_SLOT_NAMES } from './baseField.types';
|
|
1
2
|
export type { BaseFieldClasses, BaseFieldCustomProps, BaseFieldOwnProps, BaseFieldProps, BaseFieldSizeOverrides, BaseFieldSlots, } from './baseField.types';
|
|
2
3
|
export { default as BaseField } from './BaseField.vue';
|
|
3
4
|
export { baseFieldBridgeKeys, useBaseField, } from './composables/useBaseField';
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
import e from "./
|
|
2
|
-
import
|
|
3
|
-
|
|
1
|
+
import { BASE_FIELD_CHROME_SLOT_NAMES as e } from "./baseField.types.js";
|
|
2
|
+
import t from "./BaseField.js";
|
|
3
|
+
import { baseFieldBridgeKeys as n, useBaseField as r } from "./composables/useBaseField.js";
|
|
4
|
+
export { e as BASE_FIELD_CHROME_SLOT_NAMES, t as BaseField, n as baseFieldBridgeKeys, r as useBaseField };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { BreadcrumbOwnProps, BreadcrumbSlots } from './breadcrumb.types';
|
|
2
|
+
type __VLS_Slots = BreadcrumbSlots;
|
|
3
|
+
declare const __VLS_base: import('vue').DefineComponent<BreadcrumbOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BreadcrumbOwnProps> & Readonly<{}>, {
|
|
4
|
+
separator: import('../..').IconSource;
|
|
5
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
6
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
7
|
+
declare const _default: typeof __VLS_export;
|
|
8
|
+
export default _default;
|
|
9
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
10
|
+
new (): {
|
|
11
|
+
$slots: S;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { useBreadcrumb as e } from "./composables/useBreadcrumb.js";
|
|
2
|
+
import t from "../BreadcrumbItem/BreadcrumbItem.js";
|
|
3
|
+
import { Fragment as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, guardReactiveProps as l, normalizeProps as u, openBlock as d, renderList as f, renderSlot as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
|
|
4
|
+
//#region src/Components/Breadcrumb/Breadcrumb.vue?vue&type=script&setup=true&lang.ts
|
|
5
|
+
var _ = /*@__PURE__*/ c({
|
|
6
|
+
inheritAttrs: !1,
|
|
7
|
+
__name: "Breadcrumb",
|
|
8
|
+
props: {
|
|
9
|
+
classes: {},
|
|
10
|
+
customProps: {},
|
|
11
|
+
items: {},
|
|
12
|
+
maxItems: {},
|
|
13
|
+
separator: { default: "chevronRight" },
|
|
14
|
+
size: {}
|
|
15
|
+
},
|
|
16
|
+
setup(c) {
|
|
17
|
+
let { rootBind: _, listBind: v, collapsedItems: y, hasDefaultSlot: b } = e(c, {
|
|
18
|
+
size: "md",
|
|
19
|
+
separator: "chevronRight"
|
|
20
|
+
});
|
|
21
|
+
return (e, c) => (d(), a("nav", u(l(h(_))), [o("ol", u(l(h(v))), [!h(b) && h(y).length > 0 ? (d(!0), a(n, { key: 0 }, f(h(y), (e, i) => (d(), a(n, { key: e.type === "ellipsis" ? `ellipsis-${i}` : e.index }, [e.type === "ellipsis" ? (d(), r(h(t), {
|
|
22
|
+
key: 0,
|
|
23
|
+
as: "span"
|
|
24
|
+
}, {
|
|
25
|
+
default: g(() => [...c[0] ||= [s(" … ", -1)]]),
|
|
26
|
+
_: 1
|
|
27
|
+
})) : (d(), r(h(t), {
|
|
28
|
+
key: 1,
|
|
29
|
+
as: e.item.as,
|
|
30
|
+
href: e.item.href,
|
|
31
|
+
current: e.item.current,
|
|
32
|
+
"end-icon": e.item.endIcon,
|
|
33
|
+
disabled: e.item.disabled,
|
|
34
|
+
"start-icon": e.item.startIcon
|
|
35
|
+
}, {
|
|
36
|
+
default: g(() => [s(m(e.item.label), 1)]),
|
|
37
|
+
_: 2
|
|
38
|
+
}, 1032, [
|
|
39
|
+
"as",
|
|
40
|
+
"href",
|
|
41
|
+
"current",
|
|
42
|
+
"end-icon",
|
|
43
|
+
"disabled",
|
|
44
|
+
"start-icon"
|
|
45
|
+
]))], 64))), 128)) : i("", !0), p(e.$slots, "default")], 16)], 16));
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
//#endregion
|
|
49
|
+
export { _ as default };
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import { HTMLAttributes, OlHTMLAttributes, Slot } from 'vue';
|
|
2
|
+
import { BreadcrumbSize, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
|
|
3
|
+
import { IconSource } from '../../Adapters/Icon';
|
|
4
|
+
import { BreadcrumbItemOwnProps } from '../BreadcrumbItem/breadcrumbItem.types';
|
|
5
|
+
import { IconProps } from '../Icon';
|
|
6
|
+
export interface BreadcrumbSizeOverrides {}
|
|
7
|
+
export interface BreadcrumbClasses {
|
|
8
|
+
/**
|
|
9
|
+
* Classes merged onto the ordered list.
|
|
10
|
+
*/
|
|
11
|
+
list?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Classes merged onto the nav root.
|
|
14
|
+
*/
|
|
15
|
+
root?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Classes merged onto each separator.
|
|
18
|
+
*/
|
|
19
|
+
separator?: string;
|
|
20
|
+
}
|
|
21
|
+
export interface BreadcrumbCustomProps {
|
|
22
|
+
/**
|
|
23
|
+
* Props forwarded to the ordered list.
|
|
24
|
+
*
|
|
25
|
+
* @default undefined
|
|
26
|
+
*/
|
|
27
|
+
list?: OlHTMLAttributes;
|
|
28
|
+
/**
|
|
29
|
+
* Props forwarded to the nav root.
|
|
30
|
+
*
|
|
31
|
+
* @default undefined
|
|
32
|
+
*/
|
|
33
|
+
root?: HTMLAttributes;
|
|
34
|
+
/**
|
|
35
|
+
* Props forwarded to each separator `Icon` when using the default icon separator.
|
|
36
|
+
*
|
|
37
|
+
* @default undefined
|
|
38
|
+
*/
|
|
39
|
+
separator?: Partial<Omit<IconProps, "icon">>;
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Data-driven crumb for the `items` API on `Breadcrumb`.
|
|
43
|
+
*/
|
|
44
|
+
export type BreadcrumbItemData = Pick<BreadcrumbItemOwnProps, "as" | "href" | "current" | "endIcon" | "disabled" | "startIcon"> & {
|
|
45
|
+
/**
|
|
46
|
+
* Accessible / visible crumb label.
|
|
47
|
+
*/
|
|
48
|
+
label?: string;
|
|
49
|
+
};
|
|
50
|
+
export interface BreadcrumbSlots {
|
|
51
|
+
/**
|
|
52
|
+
* The children to render (`BreadcrumbItem`, etc.).
|
|
53
|
+
*/
|
|
54
|
+
default?: Slot<undefined>;
|
|
55
|
+
/**
|
|
56
|
+
* Custom separator between crumbs (overrides `separator` icon).
|
|
57
|
+
*/
|
|
58
|
+
separator?: Slot<undefined>;
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* Breadcrumb nav root. Compose with `BreadcrumbItem` or pass `items`.
|
|
62
|
+
*/
|
|
63
|
+
export interface BreadcrumbOwnProps {
|
|
64
|
+
/**
|
|
65
|
+
* Classes for breadcrumb parts.
|
|
66
|
+
*
|
|
67
|
+
* @default undefined
|
|
68
|
+
*/
|
|
69
|
+
classes?: BreadcrumbClasses;
|
|
70
|
+
/**
|
|
71
|
+
* Extra props for internal parts.
|
|
72
|
+
*
|
|
73
|
+
* @default undefined
|
|
74
|
+
*/
|
|
75
|
+
customProps?: BreadcrumbCustomProps;
|
|
76
|
+
/**
|
|
77
|
+
* Render all crumbs from data (no default slot content).
|
|
78
|
+
*
|
|
79
|
+
* @default undefined
|
|
80
|
+
*/
|
|
81
|
+
items?: BreadcrumbItemData[];
|
|
82
|
+
/**
|
|
83
|
+
* Collapse middle crumbs when the list exceeds this count (`items` API).
|
|
84
|
+
*
|
|
85
|
+
* @default undefined
|
|
86
|
+
*/
|
|
87
|
+
maxItems?: number;
|
|
88
|
+
/**
|
|
89
|
+
* Icon between crumbs. Use the `separator` slot for a fully custom separator.
|
|
90
|
+
*
|
|
91
|
+
* @default "chevronRight"
|
|
92
|
+
*/
|
|
93
|
+
separator?: IconSource;
|
|
94
|
+
/**
|
|
95
|
+
* Density of text, gaps, and icons.
|
|
96
|
+
*
|
|
97
|
+
* @default "md"
|
|
98
|
+
*/
|
|
99
|
+
size?: MergeProps<BreadcrumbSize, BreadcrumbSizeOverrides>;
|
|
100
|
+
}
|
|
101
|
+
export type BreadcrumbProps = MergeHtmlProps<BreadcrumbOwnProps, HTMLAttributes>;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { ComputedRef, InjectionKey, VNodeChild } from 'vue';
|
|
2
|
+
import { IconSource } from '../../Adapters/Icon';
|
|
3
|
+
import { IconProps } from '../Icon';
|
|
4
|
+
/**
|
|
5
|
+
* Shared breadcrumb chrome for `BreadcrumbItem` descendants.
|
|
6
|
+
*/
|
|
7
|
+
export type BreadcrumbContextValue = {
|
|
8
|
+
/**
|
|
9
|
+
* Separator icon when no custom separator slot is set.
|
|
10
|
+
*/
|
|
11
|
+
separator: IconSource;
|
|
12
|
+
/**
|
|
13
|
+
* Classes merged onto each separator from the root.
|
|
14
|
+
*/
|
|
15
|
+
separatorClass?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Extra props for the default separator `Icon`.
|
|
18
|
+
*/
|
|
19
|
+
separatorIconProps?: Partial<Omit<IconProps, "icon">>;
|
|
20
|
+
/**
|
|
21
|
+
* Custom separator content from the root `separator` slot.
|
|
22
|
+
*/
|
|
23
|
+
separatorSlot?: () => VNodeChild;
|
|
24
|
+
/**
|
|
25
|
+
* Merged token classes for items / links / separators.
|
|
26
|
+
*/
|
|
27
|
+
tokenClasses: {
|
|
28
|
+
current?: string;
|
|
29
|
+
iconSize?: string;
|
|
30
|
+
item?: string;
|
|
31
|
+
link?: string;
|
|
32
|
+
separator?: string;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
export declare const BREADCRUMB_INJECTION_KEY: InjectionKey<ComputedRef<BreadcrumbContextValue>>;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
|
|
2
|
+
import { BreadcrumbOwnProps, BreadcrumbProps } from '../breadcrumb.types';
|
|
3
|
+
import { BreadcrumbContextValue } from '../breadcrumbInjectionKey';
|
|
4
|
+
type BreadcrumbLibDefaults = LibDefaultsShape<BreadcrumbOwnProps, "size" | "separator">;
|
|
5
|
+
type BreadcrumbMerged = MergeLibDefaults<BreadcrumbOwnProps, BreadcrumbLibDefaults>;
|
|
6
|
+
export declare function useBreadcrumb(props: BreadcrumbOwnProps, libDefaults: BreadcrumbLibDefaults): {
|
|
7
|
+
merged: import('vue').ComputedRef<BreadcrumbMerged>;
|
|
8
|
+
rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
|
|
9
|
+
"aria-label": string;
|
|
10
|
+
class: string;
|
|
11
|
+
}, "class", import('vue').HTMLAttributes | undefined, Omit<BreadcrumbProps, "size" | "classes" | "customProps" | "separator" | "items" | "maxItems">>>;
|
|
12
|
+
listBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
|
|
13
|
+
role: string;
|
|
14
|
+
class: string;
|
|
15
|
+
}, "class", import('vue').OlHTMLAttributes | undefined, {}>>;
|
|
16
|
+
contextValue: import('vue').ComputedRef<BreadcrumbContextValue>;
|
|
17
|
+
collapsedItems: import('vue').ComputedRef<import('@bridge-ui/core').CollapsedBreadcrumbEntry<import('../breadcrumb.types').BreadcrumbItemData>[]>;
|
|
18
|
+
hasDefaultSlot: import('vue').ComputedRef<boolean>;
|
|
19
|
+
};
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
|
|
2
|
+
import { BREADCRUMB_INJECTION_KEY as r } from "../breadcrumbInjectionKey.js";
|
|
3
|
+
import { computed as i, provide as a, useAttrs as o, useSlots as s } from "vue";
|
|
4
|
+
import { cn as c, collapseBreadcrumbItems as l, mergeBridgeUILayeredClasses as u, splitComponentProps as d } from "@bridge-ui/core";
|
|
5
|
+
import { get as f } from "es-toolkit/compat";
|
|
6
|
+
import { sizeProps as p } from "@bridge-ui/core/Tokens/Breadcrumb";
|
|
7
|
+
//#region src/Components/Breadcrumb/composables/useBreadcrumb.ts
|
|
8
|
+
var m = [
|
|
9
|
+
"size",
|
|
10
|
+
"items",
|
|
11
|
+
"classes",
|
|
12
|
+
"maxItems",
|
|
13
|
+
"separator",
|
|
14
|
+
"customProps"
|
|
15
|
+
];
|
|
16
|
+
function h(h, g) {
|
|
17
|
+
let _ = o(), v = s(), y = i(() => d({
|
|
18
|
+
props: {
|
|
19
|
+
..._,
|
|
20
|
+
...h
|
|
21
|
+
},
|
|
22
|
+
bridgeKeys: m
|
|
23
|
+
})), { merged: b, entry: x } = t({
|
|
24
|
+
libDefaults: g,
|
|
25
|
+
componentName: "Breadcrumb",
|
|
26
|
+
props: () => y.value.componentProps
|
|
27
|
+
}), S = i(() => b.value.customProps), C = i(() => l(b.value.items ?? [], b.value.maxItems)), w = n({
|
|
28
|
+
entry: x,
|
|
29
|
+
props: () => y.value.componentProps
|
|
30
|
+
}), T = i(() => u(p, x.value?.tokens?.size)), E = i(() => f(T.value, b.value.size)), D = i(() => ({
|
|
31
|
+
separator: b.value.separator,
|
|
32
|
+
separatorIconProps: S.value?.separator,
|
|
33
|
+
separatorClass: f(w.value, "separator"),
|
|
34
|
+
separatorSlot: v.separator ? () => v.separator?.() : void 0,
|
|
35
|
+
tokenClasses: {
|
|
36
|
+
item: f(E.value, "item"),
|
|
37
|
+
link: f(E.value, "link"),
|
|
38
|
+
iconSize: f(E.value, "icon"),
|
|
39
|
+
current: f(E.value, "current"),
|
|
40
|
+
separator: f(E.value, "separator")
|
|
41
|
+
}
|
|
42
|
+
}));
|
|
43
|
+
return a(r, D), {
|
|
44
|
+
merged: b,
|
|
45
|
+
rootBind: i(() => {
|
|
46
|
+
let t = y.value.inheritedAttrs;
|
|
47
|
+
return e(S.value?.root, t, {
|
|
48
|
+
"aria-label": t["aria-label"] ?? "Breadcrumb",
|
|
49
|
+
class: c({
|
|
50
|
+
[f(E.value, "root") ?? ""]: !0,
|
|
51
|
+
[f(w.value, "root") ?? ""]: !0
|
|
52
|
+
})
|
|
53
|
+
});
|
|
54
|
+
}),
|
|
55
|
+
listBind: i(() => e(S.value?.list, {}, {
|
|
56
|
+
role: "list",
|
|
57
|
+
class: c({
|
|
58
|
+
[f(E.value, "list") ?? ""]: !0,
|
|
59
|
+
[f(w.value, "list") ?? ""]: !0,
|
|
60
|
+
"[&>li:first-child_[data-slot=separator]]:hidden": !0
|
|
61
|
+
})
|
|
62
|
+
})),
|
|
63
|
+
contextValue: D,
|
|
64
|
+
collapsedItems: C,
|
|
65
|
+
hasDefaultSlot: i(() => !!v.default?.().length)
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
//#endregion
|
|
69
|
+
export { h as useBreadcrumb };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export type { BreadcrumbClasses, BreadcrumbCustomProps, BreadcrumbItemData, BreadcrumbOwnProps, BreadcrumbProps, BreadcrumbSizeOverrides, BreadcrumbSlots, } from './breadcrumb.types';
|
|
2
|
+
export { default as Breadcrumb } from './Breadcrumb.vue';
|
|
3
|
+
export { BREADCRUMB_INJECTION_KEY, type BreadcrumbContextValue, } from './breadcrumbInjectionKey';
|
|
4
|
+
export { useBreadcrumb } from './composables/useBreadcrumb';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { BreadcrumbItemOwnProps, BreadcrumbItemSlots } from './breadcrumbItem.types';
|
|
2
|
+
type __VLS_Slots = BreadcrumbItemSlots;
|
|
3
|
+
declare const __VLS_base: import('vue').DefineComponent<BreadcrumbItemOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BreadcrumbItemOwnProps> & Readonly<{}>, {
|
|
4
|
+
disabled: boolean;
|
|
5
|
+
current: boolean;
|
|
6
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
7
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
8
|
+
declare const _default: typeof __VLS_export;
|
|
9
|
+
export default _default;
|
|
10
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
11
|
+
new (): {
|
|
12
|
+
$slots: S;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { hasNamedSlot as e } from "../../Utils/slotOrProp.js";
|
|
2
|
+
import t from "../Icon/Icon.js";
|
|
3
|
+
import { useBreadcrumbItem as n } from "./composables/useBreadcrumbItem.js";
|
|
4
|
+
import { createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, guardReactiveProps as c, mergeProps as l, normalizeProps as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, unref as m, withCtx as h } from "vue";
|
|
5
|
+
//#region src/Components/BreadcrumbItem/BreadcrumbItem.vue?vue&type=script&setup=true&lang.ts
|
|
6
|
+
var g = /*@__PURE__*/ s({
|
|
7
|
+
inheritAttrs: !1,
|
|
8
|
+
__name: "BreadcrumbItem",
|
|
9
|
+
props: {
|
|
10
|
+
as: {},
|
|
11
|
+
classes: {},
|
|
12
|
+
current: {
|
|
13
|
+
type: Boolean,
|
|
14
|
+
default: !1
|
|
15
|
+
},
|
|
16
|
+
customProps: {},
|
|
17
|
+
disabled: {
|
|
18
|
+
type: Boolean,
|
|
19
|
+
default: !1
|
|
20
|
+
},
|
|
21
|
+
endIcon: {},
|
|
22
|
+
href: {},
|
|
23
|
+
startIcon: {}
|
|
24
|
+
},
|
|
25
|
+
setup(s) {
|
|
26
|
+
let { slots: g, merged: _, crumbAs: v, rootBind: y, linkBind: b, endIconBind: x, startIconBind: S, separatorBind: C, separatorIcon: w, separatorContent: T, separatorIconBind: E } = n(s);
|
|
27
|
+
return (n, s) => (d(), a("li", u(c(m(y))), [o("span", u(c(m(C))), [m(T) ? (d(), r(p(m(T)), { key: 0 })) : (d(), r(m(t), l({
|
|
28
|
+
key: 1,
|
|
29
|
+
icon: m(w)
|
|
30
|
+
}, m(E)), null, 16, ["icon"]))], 16), (d(), r(p(m(v)), u(c(m(b))), {
|
|
31
|
+
default: h(() => [
|
|
32
|
+
m(e)(m(g), "start") ? f(n.$slots, "start", {}, void 0, void 0, 0) : m(_).startIcon ? (d(), r(m(t), l({
|
|
33
|
+
key: 1,
|
|
34
|
+
icon: m(_).startIcon
|
|
35
|
+
}, m(S)), null, 16, ["icon"])) : i("", !0),
|
|
36
|
+
f(n.$slots, "default"),
|
|
37
|
+
m(e)(m(g), "end") ? f(n.$slots, "end", {}, void 0, void 0, 2) : m(_).endIcon ? (d(), r(m(t), l({
|
|
38
|
+
key: 3,
|
|
39
|
+
icon: m(_).endIcon
|
|
40
|
+
}, m(x)), null, 16, ["icon"])) : i("", !0)
|
|
41
|
+
]),
|
|
42
|
+
_: 3
|
|
43
|
+
}, 16))], 16));
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
//#endregion
|
|
47
|
+
export { g as default };
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import { HTMLAttributes, Slot } from 'vue';
|
|
2
|
+
import { MergeHtmlProps } from '@bridge-ui/core';
|
|
3
|
+
import { IconSource } from '../../Adapters/Icon';
|
|
4
|
+
import { IconProps } from '../Icon';
|
|
5
|
+
export interface BreadcrumbItemClasses {
|
|
6
|
+
/**
|
|
7
|
+
* Classes merged onto the current-page crumb.
|
|
8
|
+
*/
|
|
9
|
+
current?: string;
|
|
10
|
+
/**
|
|
11
|
+
* Classes merged onto the end icon.
|
|
12
|
+
*/
|
|
13
|
+
endIcon?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Classes merged onto the interactive crumb.
|
|
16
|
+
*/
|
|
17
|
+
link?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Classes merged onto the list item shell.
|
|
20
|
+
*/
|
|
21
|
+
root?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Classes merged onto the separator.
|
|
24
|
+
*/
|
|
25
|
+
separator?: string;
|
|
26
|
+
/**
|
|
27
|
+
* Classes merged onto the start icon.
|
|
28
|
+
*/
|
|
29
|
+
startIcon?: string;
|
|
30
|
+
}
|
|
31
|
+
export interface BreadcrumbItemCustomProps {
|
|
32
|
+
/**
|
|
33
|
+
* Props forwarded to the current-page crumb element.
|
|
34
|
+
*
|
|
35
|
+
* @default undefined
|
|
36
|
+
*/
|
|
37
|
+
current?: HTMLAttributes;
|
|
38
|
+
/**
|
|
39
|
+
* Props forwarded to the end `Icon`.
|
|
40
|
+
*
|
|
41
|
+
* @default undefined
|
|
42
|
+
*/
|
|
43
|
+
endIcon?: Partial<Omit<IconProps, "icon">>;
|
|
44
|
+
/**
|
|
45
|
+
* Props forwarded to the interactive crumb element.
|
|
46
|
+
*
|
|
47
|
+
* @default undefined
|
|
48
|
+
*/
|
|
49
|
+
link?: HTMLAttributes;
|
|
50
|
+
/**
|
|
51
|
+
* Props forwarded to the list item shell.
|
|
52
|
+
*
|
|
53
|
+
* @default undefined
|
|
54
|
+
*/
|
|
55
|
+
root?: HTMLAttributes;
|
|
56
|
+
/**
|
|
57
|
+
* Props forwarded to the separator `Icon` when using the default icon separator.
|
|
58
|
+
*
|
|
59
|
+
* @default undefined
|
|
60
|
+
*/
|
|
61
|
+
separator?: Partial<Omit<IconProps, "icon">>;
|
|
62
|
+
/**
|
|
63
|
+
* Props forwarded to the start `Icon`.
|
|
64
|
+
*
|
|
65
|
+
* @default undefined
|
|
66
|
+
*/
|
|
67
|
+
startIcon?: Partial<Omit<IconProps, "icon">>;
|
|
68
|
+
}
|
|
69
|
+
export interface BreadcrumbItemSlots {
|
|
70
|
+
/**
|
|
71
|
+
* Crumb label content.
|
|
72
|
+
*/
|
|
73
|
+
default?: Slot<undefined>;
|
|
74
|
+
/**
|
|
75
|
+
* Slot at the inline end (ignored when `endIcon` is set).
|
|
76
|
+
*/
|
|
77
|
+
end?: Slot<undefined>;
|
|
78
|
+
/**
|
|
79
|
+
* Custom separator for this crumb (overrides the breadcrumb separator).
|
|
80
|
+
*/
|
|
81
|
+
separator?: Slot<undefined>;
|
|
82
|
+
/**
|
|
83
|
+
* Slot at the inline start (ignored when `startIcon` is set).
|
|
84
|
+
*/
|
|
85
|
+
start?: Slot<undefined>;
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* One breadcrumb crumb. Must be used inside `Breadcrumb`.
|
|
89
|
+
*/
|
|
90
|
+
export interface BreadcrumbItemOwnProps {
|
|
91
|
+
/**
|
|
92
|
+
* Element to render for the interactive crumb.
|
|
93
|
+
*
|
|
94
|
+
* @default inferred from `href` / `current`
|
|
95
|
+
*/
|
|
96
|
+
as?: "a" | "span" | "button";
|
|
97
|
+
/**
|
|
98
|
+
* Classes for breadcrumb item parts.
|
|
99
|
+
*
|
|
100
|
+
* @default undefined
|
|
101
|
+
*/
|
|
102
|
+
classes?: BreadcrumbItemClasses;
|
|
103
|
+
/**
|
|
104
|
+
* Marks the current page (`aria-current="page"`). Renders as a non-link.
|
|
105
|
+
*
|
|
106
|
+
* @default false
|
|
107
|
+
*/
|
|
108
|
+
current?: boolean;
|
|
109
|
+
/**
|
|
110
|
+
* Extra props for internal parts.
|
|
111
|
+
*
|
|
112
|
+
* @default undefined
|
|
113
|
+
*/
|
|
114
|
+
customProps?: BreadcrumbItemCustomProps;
|
|
115
|
+
/**
|
|
116
|
+
* Non-interactive crumb.
|
|
117
|
+
*
|
|
118
|
+
* @default false
|
|
119
|
+
*/
|
|
120
|
+
disabled?: boolean;
|
|
121
|
+
/**
|
|
122
|
+
* Icon at the inline end.
|
|
123
|
+
*
|
|
124
|
+
* @default undefined
|
|
125
|
+
*/
|
|
126
|
+
endIcon?: IconSource;
|
|
127
|
+
/**
|
|
128
|
+
* Link target when rendered as an anchor.
|
|
129
|
+
*
|
|
130
|
+
* @default undefined
|
|
131
|
+
*/
|
|
132
|
+
href?: string;
|
|
133
|
+
/**
|
|
134
|
+
* Icon at the inline start.
|
|
135
|
+
*
|
|
136
|
+
* @default undefined
|
|
137
|
+
*/
|
|
138
|
+
startIcon?: IconSource;
|
|
139
|
+
}
|
|
140
|
+
export type BreadcrumbItemProps = MergeHtmlProps<BreadcrumbItemOwnProps, HTMLAttributes>;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { IconSize } from '@bridge-ui/core';
|
|
2
|
+
import { BreadcrumbItemOwnProps, BreadcrumbItemProps } from '../breadcrumbItem.types';
|
|
3
|
+
export declare function useBreadcrumbItem(props: BreadcrumbItemOwnProps): {
|
|
4
|
+
slots: Readonly<{
|
|
5
|
+
[name: string]: import('vue').Slot<any> | undefined;
|
|
6
|
+
}>;
|
|
7
|
+
merged: import('vue').ComputedRef<BreadcrumbItemOwnProps>;
|
|
8
|
+
crumbAs: import('vue').ComputedRef<"a" | "button" | "span">;
|
|
9
|
+
rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
|
|
10
|
+
class: string;
|
|
11
|
+
}, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<BreadcrumbItemProps, "href" | "classes" | "customProps" | "disabled" | "endIcon" | "startIcon" | "as" | "current">, "aria-label" | "aria-labelledby">>>;
|
|
12
|
+
linkBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
|
|
13
|
+
"aria-disabled": true | undefined;
|
|
14
|
+
"aria-current": "page" | undefined;
|
|
15
|
+
href: string | undefined;
|
|
16
|
+
class: string;
|
|
17
|
+
}, "class", import('vue').HTMLAttributes | undefined, Pick<Omit<BreadcrumbItemProps, "href" | "classes" | "customProps" | "disabled" | "endIcon" | "startIcon" | "as" | "current">, "aria-label" | "aria-labelledby">>>;
|
|
18
|
+
iconSize: import('vue').ComputedRef<keyof IconSize>;
|
|
19
|
+
endIconBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
|
|
20
|
+
size: keyof IconSize;
|
|
21
|
+
class: string;
|
|
22
|
+
}, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
|
|
23
|
+
startIconBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
|
|
24
|
+
size: keyof IconSize;
|
|
25
|
+
class: string;
|
|
26
|
+
}, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
|
|
27
|
+
separatorBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
|
|
28
|
+
"aria-hidden": boolean;
|
|
29
|
+
"data-slot": string;
|
|
30
|
+
class: string;
|
|
31
|
+
}, "class", {}, {}>>;
|
|
32
|
+
separatorIcon: import('vue').ComputedRef<import('../../..').IconSource>;
|
|
33
|
+
separatorContent: import('vue').ComputedRef<import('vue').Slot<any> | (() => import('vue').VNodeChild) | undefined>;
|
|
34
|
+
separatorIconBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
|
|
35
|
+
size: keyof IconSize;
|
|
36
|
+
class: string;
|
|
37
|
+
}, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
|
|
38
|
+
};
|