routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+55
@@ -0,0 +1,55 @@
|
||||
@layer vuetify-components {
|
||||
.v-breadcrumbs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1.5;
|
||||
padding: 16px 12px;
|
||||
}
|
||||
.v-breadcrumbs--rounded {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.v-breadcrumbs--density-default {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.v-breadcrumbs--density-comfortable {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.v-breadcrumbs--density-compact {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.v-breadcrumbs__prepend {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
}
|
||||
.v-breadcrumbs-item {
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
display: inline-flex;
|
||||
padding: 0 4px;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.v-breadcrumbs-item--disabled {
|
||||
opacity: var(--v-disabled-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-breadcrumbs-item--link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.v-breadcrumbs-item--link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.v-breadcrumbs-item .v-icon {
|
||||
font-size: 1rem;
|
||||
margin-inline: -4px 2px;
|
||||
}
|
||||
.v-breadcrumbs-divider {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
+351
@@ -0,0 +1,351 @@
|
||||
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
import type { PropType } from 'vue';
|
||||
import type { LinkProps } from '../../composables/router.js';
|
||||
import type { GenericProps } from '../../util/index.js';
|
||||
export type InternalBreadcrumbItem = Partial<LinkProps> & {
|
||||
title: string;
|
||||
disabled?: boolean;
|
||||
};
|
||||
export type BreadcrumbItem = string | InternalBreadcrumbItem;
|
||||
export declare const makeVBreadcrumbsProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
density?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
activeClass?: unknown;
|
||||
activeColor?: unknown;
|
||||
bgColor?: unknown;
|
||||
color?: unknown;
|
||||
disabled?: unknown;
|
||||
divider?: unknown;
|
||||
icon?: unknown;
|
||||
items?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
class: unknown extends Defaults["class"] ? PropType<any> : {
|
||||
type: PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | import("../../composables/density.js").Density>;
|
||||
default: unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | NonNullable<import("../../composables/density.js").Density>;
|
||||
};
|
||||
rounded: unknown extends Defaults["rounded"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
|
||||
default: unknown extends Defaults["rounded"] ? string | number | boolean : Defaults["rounded"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
tile: unknown extends Defaults["tile"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
} : Omit<Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | Defaults["tag"] | import("../../util/index.js").JSXComponent>;
|
||||
default: unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : Defaults["tag"] | NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
activeClass: unknown extends Defaults["activeClass"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["activeClass"] ? string : string | Defaults["activeClass"]>;
|
||||
default: unknown extends Defaults["activeClass"] ? string : string | Defaults["activeClass"];
|
||||
};
|
||||
activeColor: unknown extends Defaults["activeColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["activeColor"] ? string : string | Defaults["activeColor"]>;
|
||||
default: unknown extends Defaults["activeColor"] ? string : string | Defaults["activeColor"];
|
||||
};
|
||||
bgColor: unknown extends Defaults["bgColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"]>;
|
||||
default: unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"];
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"]>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"];
|
||||
};
|
||||
divider: unknown extends Defaults["divider"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["divider"] ? string : string | Defaults["divider"]>;
|
||||
default: unknown extends Defaults["divider"] ? string : string | Defaults["divider"];
|
||||
};
|
||||
icon: unknown extends Defaults["icon"] ? PropType<IconValue> : {
|
||||
type: PropType<unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | IconValue>;
|
||||
default: unknown extends Defaults["icon"] ? IconValue : Defaults["icon"] | NonNullable<IconValue>;
|
||||
};
|
||||
items: unknown extends Defaults["items"] ? {
|
||||
type: PropType<readonly BreadcrumbItem[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: PropType<readonly BreadcrumbItem[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["items"] ? readonly BreadcrumbItem[] : readonly BreadcrumbItem[] | Defaults["items"]>;
|
||||
default: unknown extends Defaults["items"] ? readonly BreadcrumbItem[] : readonly BreadcrumbItem[] | Defaults["items"];
|
||||
};
|
||||
};
|
||||
export declare const VBreadcrumbs: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
disabled: boolean;
|
||||
divider: string;
|
||||
} & {
|
||||
class?: any;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
activeClass?: string | undefined;
|
||||
activeColor?: string | undefined;
|
||||
bgColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "items" | "v-slot:default" | "v-slot:divider" | "v-slot:item" | "v-slot:prepend" | "v-slot:title" | "v-slots">, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
disabled: boolean;
|
||||
divider: string;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: (arg: {
|
||||
item: InternalBreadcrumbItem;
|
||||
index: number;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
divider: (arg: {
|
||||
item: BreadcrumbItem;
|
||||
index: number;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
item: (arg: {
|
||||
item: InternalBreadcrumbItem;
|
||||
index: number;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
disabled: boolean;
|
||||
divider: string;
|
||||
} & {
|
||||
class?: any;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
activeClass?: string | undefined;
|
||||
activeColor?: string | undefined;
|
||||
bgColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
disabled: boolean;
|
||||
divider: string;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
disabled: boolean;
|
||||
divider: string;
|
||||
} & {
|
||||
class?: any;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
activeClass?: string | undefined;
|
||||
activeColor?: string | undefined;
|
||||
bgColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
icon?: IconValue | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "items" | "v-slot:default" | "v-slot:divider" | "v-slot:item" | "v-slot:prepend" | "v-slot:title" | "v-slots">, string, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
disabled: boolean;
|
||||
divider: string;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: (arg: {
|
||||
item: InternalBreadcrumbItem;
|
||||
index: number;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
divider: (arg: {
|
||||
item: BreadcrumbItem;
|
||||
index: number;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
item: (arg: {
|
||||
item: InternalBreadcrumbItem;
|
||||
index: number;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new <T extends BreadcrumbItem>(props: {
|
||||
items?: T[];
|
||||
}, slots: {
|
||||
prepend: never;
|
||||
title: {
|
||||
item: InternalBreadcrumbItem;
|
||||
index: number;
|
||||
};
|
||||
divider: {
|
||||
item: T;
|
||||
index: number;
|
||||
};
|
||||
item: {
|
||||
item: InternalBreadcrumbItem;
|
||||
index: number;
|
||||
};
|
||||
default: never;
|
||||
}) => GenericProps<typeof props, typeof slots>) & import("../../util/index.js").FilterPropsOptions<{
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
activeClass: StringConstructor;
|
||||
activeColor: StringConstructor;
|
||||
bgColor: StringConstructor;
|
||||
color: StringConstructor;
|
||||
disabled: BooleanConstructor;
|
||||
divider: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
icon: PropType<IconValue>;
|
||||
items: {
|
||||
type: PropType<readonly BreadcrumbItem[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
activeClass: StringConstructor;
|
||||
activeColor: StringConstructor;
|
||||
bgColor: StringConstructor;
|
||||
color: StringConstructor;
|
||||
disabled: BooleanConstructor;
|
||||
divider: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
icon: PropType<IconValue>;
|
||||
items: {
|
||||
type: PropType<readonly BreadcrumbItem[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
}>>;
|
||||
export type VBreadcrumbs = InstanceType<typeof VBreadcrumbs>;
|
||||
+128
@@ -0,0 +1,128 @@
|
||||
import { createVNode as _createVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, mergeProps as _mergeProps, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Styles
|
||||
import "./VBreadcrumbs.css";
|
||||
|
||||
// Components
|
||||
import { VBreadcrumbsDivider } from "./VBreadcrumbsDivider.js";
|
||||
import { VBreadcrumbsItem } from "./VBreadcrumbsItem.js";
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/index.js";
|
||||
import { VIcon } from "../VIcon/index.js"; // Composables
|
||||
import { useBackgroundColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { provideDefaults } from "../../composables/defaults.js";
|
||||
import { makeDensityProps, useDensity } from "../../composables/density.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { makeTagProps } from "../../composables/tag.js"; // Utilities
|
||||
import { computed, toRef } from 'vue';
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVBreadcrumbsProps = propsFactory({
|
||||
activeClass: String,
|
||||
activeColor: String,
|
||||
bgColor: String,
|
||||
color: String,
|
||||
disabled: Boolean,
|
||||
divider: {
|
||||
type: String,
|
||||
default: '/'
|
||||
},
|
||||
icon: IconValue,
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
...makeComponentProps(),
|
||||
...makeDensityProps(),
|
||||
...makeRoundedProps(),
|
||||
...makeTagProps({
|
||||
tag: 'ul'
|
||||
})
|
||||
}, 'VBreadcrumbs');
|
||||
export const VBreadcrumbs = genericComponent()({
|
||||
name: 'VBreadcrumbs',
|
||||
props: makeVBreadcrumbsProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles
|
||||
} = useBackgroundColor(() => props.bgColor);
|
||||
const {
|
||||
densityClasses
|
||||
} = useDensity(props);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props);
|
||||
provideDefaults({
|
||||
VBreadcrumbsDivider: {
|
||||
divider: toRef(() => props.divider)
|
||||
},
|
||||
VBreadcrumbsItem: {
|
||||
activeClass: toRef(() => props.activeClass),
|
||||
activeColor: toRef(() => props.activeColor),
|
||||
color: toRef(() => props.color),
|
||||
disabled: toRef(() => props.disabled)
|
||||
}
|
||||
});
|
||||
const items = computed(() => props.items.map(item => {
|
||||
return typeof item === 'string' ? {
|
||||
item: {
|
||||
title: item
|
||||
},
|
||||
raw: item
|
||||
} : {
|
||||
item,
|
||||
raw: item
|
||||
};
|
||||
}));
|
||||
useRender(() => {
|
||||
const hasPrepend = !!(slots.prepend || props.icon);
|
||||
return _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-breadcrumbs', backgroundColorClasses.value, densityClasses.value, roundedClasses.value, props.class]),
|
||||
"style": _normalizeStyle([backgroundColorStyles.value, props.style])
|
||||
}, {
|
||||
default: () => [hasPrepend && _createElementVNode("li", {
|
||||
"key": "prepend",
|
||||
"class": "v-breadcrumbs__prepend"
|
||||
}, [!slots.prepend ? _createVNode(VIcon, {
|
||||
"key": "prepend-icon",
|
||||
"start": true,
|
||||
"icon": props.icon
|
||||
}, null) : _createVNode(VDefaultsProvider, {
|
||||
"key": "prepend-defaults",
|
||||
"disabled": !props.icon,
|
||||
"defaults": {
|
||||
VIcon: {
|
||||
icon: props.icon,
|
||||
start: true
|
||||
}
|
||||
}
|
||||
}, slots.prepend)]), items.value.map(({
|
||||
item,
|
||||
raw
|
||||
}, index, array) => _createElementVNode(_Fragment, null, [slots.item?.({
|
||||
item,
|
||||
index
|
||||
}) ?? _createVNode(VBreadcrumbsItem, _mergeProps({
|
||||
"key": index,
|
||||
"disabled": index >= array.length - 1
|
||||
}, typeof item === 'string' ? {
|
||||
title: item
|
||||
} : item), {
|
||||
default: slots.title ? () => slots.title?.({
|
||||
item,
|
||||
index
|
||||
}) : undefined
|
||||
}), index < array.length - 1 && _createVNode(VBreadcrumbsDivider, null, {
|
||||
default: slots.divider ? () => slots.divider?.({
|
||||
item: raw,
|
||||
index
|
||||
}) : undefined
|
||||
})])), slots.default?.()]
|
||||
});
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VBreadcrumbs.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+49
@@ -0,0 +1,49 @@
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-breadcrumbs
|
||||
display: flex
|
||||
align-items: center
|
||||
line-height: $breadcrumbs-line-height
|
||||
padding: $breadcrumbs-padding-y $breadcrumbs-padding-x
|
||||
|
||||
&--rounded
|
||||
@include tools.rounded($breadcrumbs-rounded-border-radius)
|
||||
|
||||
@at-root
|
||||
@include tools.density('v-breadcrumbs', $breadcrumbs-density) using ($modifier)
|
||||
padding-top: #{$breadcrumbs-padding-y + $modifier}
|
||||
padding-bottom: #{$breadcrumbs-padding-y + $modifier}
|
||||
|
||||
.v-breadcrumbs__prepend
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
|
||||
.v-breadcrumbs-item
|
||||
align-items: center
|
||||
color: inherit
|
||||
display: inline-flex
|
||||
padding: $breadcrumbs-item-padding
|
||||
text-decoration: none
|
||||
vertical-align: $breadcrumbs-vertical-align
|
||||
|
||||
&--disabled
|
||||
opacity: $breadcrumbs-item-disabled-opacity
|
||||
pointer-events: none
|
||||
|
||||
&--link
|
||||
color: inherit
|
||||
text-decoration: none
|
||||
|
||||
&--link:hover
|
||||
text-decoration: $breadcrumbs-item-link-text-decoration
|
||||
|
||||
.v-icon
|
||||
font-size: $breadcrumbs-item-icon-font-size
|
||||
margin-inline: $breadcrumbs-item-icon-margin-inline-start $breadcrumbs-item-icon-margin-inline-end
|
||||
|
||||
.v-breadcrumbs-divider
|
||||
display: inline-block
|
||||
padding: $breadcrumbs-divider-padding
|
||||
vertical-align: $breadcrumbs-vertical-align
|
||||
Generated
Vendored
+114
@@ -0,0 +1,114 @@
|
||||
export declare const makeVBreadcrumbsDividerProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
divider?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
class: unknown extends Defaults["class"] ? import("vue").PropType<any> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
divider: unknown extends Defaults["divider"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["divider"] ? string | number : string | number | Defaults["divider"]>;
|
||||
default: unknown extends Defaults["divider"] ? string | number : Defaults["divider"] | NonNullable<string | number>;
|
||||
};
|
||||
};
|
||||
export declare const VBreadcrumbsDivider: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
} & {
|
||||
class?: any;
|
||||
divider?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
} & {
|
||||
class?: any;
|
||||
divider?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
} & {
|
||||
class?: any;
|
||||
divider?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
divider: (NumberConstructor | StringConstructor)[];
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
divider: (NumberConstructor | StringConstructor)[];
|
||||
}>>;
|
||||
export type VBreadcrumbsDivider = InstanceType<typeof VBreadcrumbsDivider>;
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode } from "vue";
|
||||
// Composables
|
||||
import { makeComponentProps } from "../../composables/component.js"; // Utilities
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVBreadcrumbsDividerProps = propsFactory({
|
||||
divider: [Number, String],
|
||||
...makeComponentProps()
|
||||
}, 'VBreadcrumbsDivider');
|
||||
export const VBreadcrumbsDivider = genericComponent()({
|
||||
name: 'VBreadcrumbsDivider',
|
||||
props: makeVBreadcrumbsDividerProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
useRender(() => _createElementVNode("li", {
|
||||
"aria-hidden": "true",
|
||||
"class": _normalizeClass(['v-breadcrumbs-divider', props.class]),
|
||||
"style": _normalizeStyle(props.style)
|
||||
}, [slots?.default?.() ?? props.divider]));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VBreadcrumbsDivider.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VBreadcrumbsDivider.js","names":["makeComponentProps","genericComponent","propsFactory","useRender","makeVBreadcrumbsDividerProps","divider","Number","String","VBreadcrumbsDivider","name","props","setup","slots","_createElementVNode","_normalizeClass","class","_normalizeStyle","style","default"],"sources":["../../../src/components/VBreadcrumbs/VBreadcrumbsDivider.tsx"],"sourcesContent":["// Composables\nimport { makeComponentProps } from '@/composables/component'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVBreadcrumbsDividerProps = propsFactory({\n divider: [Number, String],\n\n ...makeComponentProps(),\n}, 'VBreadcrumbsDivider')\n\nexport const VBreadcrumbsDivider = genericComponent()({\n name: 'VBreadcrumbsDivider',\n\n props: makeVBreadcrumbsDividerProps(),\n\n setup (props, { slots }) {\n useRender(() => (\n <li\n aria-hidden=\"true\"\n class={[\n 'v-breadcrumbs-divider',\n props.class,\n ]}\n style={ props.style }\n >\n { slots?.default?.() ?? props.divider }\n </li>\n ))\n\n return {}\n },\n})\n\nexport type VBreadcrumbsDivider = InstanceType<typeof VBreadcrumbsDivider>\n"],"mappings":";AAAA;AAAA,SACSA,kBAAkB,0CAE3B;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,4BAA4B,GAAGF,YAAY,CAAC;EACvDG,OAAO,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;EAEzB,GAAGP,kBAAkB,CAAC;AACxB,CAAC,EAAE,qBAAqB,CAAC;AAEzB,OAAO,MAAMQ,mBAAmB,GAAGP,gBAAgB,CAAC,CAAC,CAAC;EACpDQ,IAAI,EAAE,qBAAqB;EAE3BC,KAAK,EAAEN,4BAA4B,CAAC,CAAC;EAErCO,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvBT,SAAS,CAAC,MAAAU,mBAAA;MAAA;MAAA,SAAAC,eAAA,CAGC,CACL,uBAAuB,EACvBJ,KAAK,CAACK,KAAK,CACZ;MAAA,SAAAC,eAAA,CACON,KAAK,CAACO,KAAK;IAAA,IAEjBL,KAAK,EAAEM,OAAO,GAAG,CAAC,IAAIR,KAAK,CAACL,OAAO,EAExC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+273
@@ -0,0 +1,273 @@
|
||||
export declare const makeVBreadcrumbsItemProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
tag?: unknown;
|
||||
maxWidth?: unknown;
|
||||
width?: unknown;
|
||||
href?: unknown;
|
||||
replace?: unknown;
|
||||
to?: unknown;
|
||||
exact?: unknown;
|
||||
active?: unknown;
|
||||
activeClass?: unknown;
|
||||
activeColor?: unknown;
|
||||
color?: unknown;
|
||||
disabled?: unknown;
|
||||
title?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
class: unknown extends Defaults["class"] ? import("vue").PropType<any> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
} : Omit<Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | Defaults["tag"] | import("../../util/index.js").JSXComponent>;
|
||||
default: unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : Defaults["tag"] | NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
maxWidth: unknown extends Defaults["maxWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["maxWidth"] ? string | number : string | number | Defaults["maxWidth"]>;
|
||||
default: unknown extends Defaults["maxWidth"] ? string | number : Defaults["maxWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
width: unknown extends Defaults["width"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
href: unknown extends Defaults["href"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["href"] ? string : string | Defaults["href"]>;
|
||||
default: unknown extends Defaults["href"] ? string : string | Defaults["href"];
|
||||
};
|
||||
replace: unknown extends Defaults["replace"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["replace"] ? boolean : boolean | Defaults["replace"]>;
|
||||
default: unknown extends Defaults["replace"] ? boolean : boolean | Defaults["replace"];
|
||||
};
|
||||
to: unknown extends Defaults["to"] ? import("vue").PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["to"] ? string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric : string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | Defaults["to"]>;
|
||||
default: unknown extends Defaults["to"] ? string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric : Defaults["to"] | NonNullable<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||
};
|
||||
exact: unknown extends Defaults["exact"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["exact"] ? boolean : boolean | Defaults["exact"]>;
|
||||
default: unknown extends Defaults["exact"] ? boolean : boolean | Defaults["exact"];
|
||||
};
|
||||
active: unknown extends Defaults["active"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["active"] ? boolean : boolean | Defaults["active"]>;
|
||||
default: unknown extends Defaults["active"] ? boolean : boolean | Defaults["active"];
|
||||
};
|
||||
activeClass: unknown extends Defaults["activeClass"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["activeClass"] ? string : string | Defaults["activeClass"]>;
|
||||
default: unknown extends Defaults["activeClass"] ? string : string | Defaults["activeClass"];
|
||||
};
|
||||
activeColor: unknown extends Defaults["activeColor"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["activeColor"] ? string : string | Defaults["activeColor"]>;
|
||||
default: unknown extends Defaults["activeColor"] ? string : string | Defaults["activeColor"];
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"]>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"];
|
||||
};
|
||||
title: unknown extends Defaults["title"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["title"] ? string : string | Defaults["title"]>;
|
||||
default: unknown extends Defaults["title"] ? string : string | Defaults["title"];
|
||||
};
|
||||
};
|
||||
export declare const VBreadcrumbsItem: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
active: boolean;
|
||||
disabled: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
maxWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
href?: string | undefined;
|
||||
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||
activeClass?: string | undefined;
|
||||
activeColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
title?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
active: boolean;
|
||||
disabled: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
active: boolean;
|
||||
disabled: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
maxWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
href?: string | undefined;
|
||||
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||
activeClass?: string | undefined;
|
||||
activeColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
title?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
active: boolean;
|
||||
disabled: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
active: boolean;
|
||||
disabled: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
maxWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
href?: string | undefined;
|
||||
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||
activeClass?: string | undefined;
|
||||
activeColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
title?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
active: boolean;
|
||||
disabled: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
href: StringConstructor;
|
||||
replace: BooleanConstructor;
|
||||
to: import("vue").PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||
exact: BooleanConstructor;
|
||||
active: BooleanConstructor;
|
||||
activeClass: StringConstructor;
|
||||
activeColor: StringConstructor;
|
||||
color: StringConstructor;
|
||||
disabled: BooleanConstructor;
|
||||
title: StringConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
href: StringConstructor;
|
||||
replace: BooleanConstructor;
|
||||
to: import("vue").PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||
exact: BooleanConstructor;
|
||||
active: BooleanConstructor;
|
||||
activeClass: StringConstructor;
|
||||
activeColor: StringConstructor;
|
||||
color: StringConstructor;
|
||||
disabled: BooleanConstructor;
|
||||
title: StringConstructor;
|
||||
}>>;
|
||||
export type VBreadcrumbsItem = InstanceType<typeof VBreadcrumbsItem>;
|
||||
+59
@@ -0,0 +1,59 @@
|
||||
import { mergeProps as _mergeProps, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
|
||||
// Composables
|
||||
import { useTextColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeDimensionProps, useDimension } from "../../composables/dimensions.js";
|
||||
import { makeRouterProps, useLink } from "../../composables/router.js";
|
||||
import { makeTagProps } from "../../composables/tag.js"; // Utilities
|
||||
import { computed } from 'vue';
|
||||
import { genericComponent, pick, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVBreadcrumbsItemProps = propsFactory({
|
||||
active: Boolean,
|
||||
activeClass: String,
|
||||
activeColor: String,
|
||||
color: String,
|
||||
disabled: Boolean,
|
||||
title: String,
|
||||
...makeComponentProps(),
|
||||
...pick(makeDimensionProps(), ['width', 'maxWidth']),
|
||||
...makeRouterProps(),
|
||||
...makeTagProps({
|
||||
tag: 'li'
|
||||
})
|
||||
}, 'VBreadcrumbsItem');
|
||||
export const VBreadcrumbsItem = genericComponent()({
|
||||
name: 'VBreadcrumbsItem',
|
||||
props: makeVBreadcrumbsItemProps(),
|
||||
setup(props, {
|
||||
slots,
|
||||
attrs
|
||||
}) {
|
||||
const link = useLink(props, attrs);
|
||||
const isActive = computed(() => props.active || link.isActive?.value);
|
||||
const {
|
||||
dimensionStyles
|
||||
} = useDimension(props);
|
||||
const {
|
||||
textColorClasses,
|
||||
textColorStyles
|
||||
} = useTextColor(() => isActive.value ? props.activeColor : props.color);
|
||||
useRender(() => {
|
||||
return _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-breadcrumbs-item', {
|
||||
'v-breadcrumbs-item--active': isActive.value,
|
||||
'v-breadcrumbs-item--disabled': props.disabled,
|
||||
[`${props.activeClass}`]: isActive.value && props.activeClass
|
||||
}, textColorClasses.value, props.class]),
|
||||
"style": _normalizeStyle([textColorStyles.value, dimensionStyles.value, props.style]),
|
||||
"aria-current": isActive.value ? 'page' : undefined
|
||||
}, {
|
||||
default: () => [!link.isLink.value ? slots.default?.() ?? props.title : _createElementVNode("a", _mergeProps({
|
||||
"class": "v-breadcrumbs-item--link",
|
||||
"onClick": link.navigate.value
|
||||
}, link.linkProps), [slots.default?.() ?? props.title])]
|
||||
});
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VBreadcrumbsItem.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+17
@@ -0,0 +1,17 @@
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
|
||||
// Defaults
|
||||
$breadcrumbs-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
|
||||
$breadcrumbs-divider-padding: 0 8px !default;
|
||||
$breadcrumbs-item-disabled-opacity: var(--v-disabled-opacity) !default;
|
||||
$breadcrumbs-item-icon-font-size: tools.map-deep-get(settings.$typography, 'body-large', 'size') !default;
|
||||
$breadcrumbs-item-icon-margin-inline-end: 2px !default;
|
||||
$breadcrumbs-item-icon-margin-inline-start: -4px !default;
|
||||
$breadcrumbs-item-link-text-decoration: underline !default;
|
||||
$breadcrumbs-item-padding: 0 4px !default;
|
||||
$breadcrumbs-line-height: tools.map-deep-get(settings.$typography, 'body-large', 'line-height') !default;
|
||||
$breadcrumbs-padding-y: 16px !default;
|
||||
$breadcrumbs-padding-x: 12px !default;
|
||||
$breadcrumbs-rounded-border-radius: settings.$border-radius-root !default;
|
||||
$breadcrumbs-vertical-align: middle !default;
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
export { VBreadcrumbs } from './VBreadcrumbs.js';
|
||||
export { VBreadcrumbsItem } from './VBreadcrumbsItem.js';
|
||||
export { VBreadcrumbsDivider } from './VBreadcrumbsDivider.js';
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
export { VBreadcrumbs } from "./VBreadcrumbs.js";
|
||||
export { VBreadcrumbsItem } from "./VBreadcrumbsItem.js";
|
||||
export { VBreadcrumbsDivider } from "./VBreadcrumbsDivider.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VBreadcrumbs","VBreadcrumbsItem","VBreadcrumbsDivider"],"sources":["../../../src/components/VBreadcrumbs/index.ts"],"sourcesContent":["export { VBreadcrumbs } from './VBreadcrumbs'\nexport { VBreadcrumbsItem } from './VBreadcrumbsItem'\nexport { VBreadcrumbsDivider } from './VBreadcrumbsDivider'\n"],"mappings":"SAASA,YAAY;AAAA,SACZC,gBAAgB;AAAA,SAChBC,mBAAmB","ignoreList":[]}
|
||||
Reference in New Issue
Block a user