routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+153
@@ -0,0 +1,153 @@
|
||||
@layer vuetify-components {
|
||||
.v-toolbar {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex: none;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-property: height, width, transform, max-width, left, right, top, bottom, box-shadow;
|
||||
width: 100%;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.v-toolbar {
|
||||
transition-property: box-shadow;
|
||||
}
|
||||
}
|
||||
.v-toolbar {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
.v-toolbar--border {
|
||||
border-width: thin;
|
||||
box-shadow: none;
|
||||
}
|
||||
.v-toolbar {
|
||||
box-shadow: 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 0%, transparent);
|
||||
}
|
||||
.v-toolbar {
|
||||
border-radius: 0;
|
||||
}
|
||||
.v-toolbar {
|
||||
background: rgb(var(--v-theme-surface-light));
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface-light)) calc(var(--v-high-emphasis-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-toolbar--absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.v-toolbar--collapse {
|
||||
max-width: 112px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.v-toolbar--collapse-end {
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
.v-toolbar--collapse.v-toolbar--collapse-start {
|
||||
border-end-end-radius: 24px;
|
||||
}
|
||||
.v-toolbar--collapse.v-toolbar--collapse-end {
|
||||
border-end-start-radius: 24px;
|
||||
}
|
||||
.v-toolbar--collapse .v-toolbar-title {
|
||||
display: none;
|
||||
}
|
||||
.v-toolbar--flat {
|
||||
box-shadow: 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 0%, transparent);
|
||||
}
|
||||
.v-toolbar--floating {
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
}
|
||||
.v-toolbar--rounded {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.v-toolbar__content,
|
||||
.v-toolbar__extension {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
transition: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
.v-toolbar__content {
|
||||
overflow: hidden;
|
||||
}
|
||||
.v-toolbar__content > .v-btn:first-child {
|
||||
margin-inline-start: 4px;
|
||||
}
|
||||
.v-toolbar__content > .v-btn:last-child {
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
.v-toolbar__content > .v-toolbar-title {
|
||||
margin-inline-start: 20px;
|
||||
}
|
||||
.v-toolbar--density-prominent .v-toolbar__content {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.v-toolbar__image {
|
||||
display: flex;
|
||||
opacity: var(--v-toolbar-image-opacity, 1);
|
||||
transition-property: opacity;
|
||||
}
|
||||
.v-toolbar__image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.v-toolbar__prepend,
|
||||
.v-toolbar__append {
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
}
|
||||
.v-toolbar__prepend {
|
||||
margin-inline: 4px auto;
|
||||
}
|
||||
.v-toolbar__append {
|
||||
margin-inline: auto 4px;
|
||||
}
|
||||
.v-toolbar-title {
|
||||
flex: 1 1;
|
||||
font-size: 1.25rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.v-toolbar-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.75rem;
|
||||
text-transform: none;
|
||||
}
|
||||
.v-toolbar--density-prominent .v-toolbar-title {
|
||||
align-self: flex-end;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
.v-toolbar--density-prominent .v-toolbar-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 2.25rem;
|
||||
text-transform: none;
|
||||
}
|
||||
.v-toolbar-title__placeholder {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.v-toolbar-items {
|
||||
display: flex;
|
||||
height: inherit;
|
||||
align-self: stretch;
|
||||
}
|
||||
.v-toolbar-items > .v-btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
+537
@@ -0,0 +1,537 @@
|
||||
|
||||
import type { PropType } from 'vue';
|
||||
export type Density = null | 'prominent' | 'default' | 'comfortable' | 'compact';
|
||||
export declare const makeVToolbarProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
border?: unknown;
|
||||
elevation?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
location?: unknown;
|
||||
absolute?: unknown;
|
||||
collapse?: unknown;
|
||||
collapsePosition?: unknown;
|
||||
color?: unknown;
|
||||
density?: unknown;
|
||||
extended?: unknown;
|
||||
extensionHeight?: unknown;
|
||||
flat?: unknown;
|
||||
floating?: unknown;
|
||||
height?: unknown;
|
||||
image?: unknown;
|
||||
title?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
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>;
|
||||
};
|
||||
border: unknown extends Defaults["border"] ? (BooleanConstructor | NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["border"] ? string | number | boolean : string | number | boolean | Defaults["border"]>;
|
||||
default: unknown extends Defaults["border"] ? string | number | boolean : Defaults["border"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
elevation: unknown extends Defaults["elevation"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["elevation"] ? string | number : string | number | Defaults["elevation"]>;
|
||||
default: unknown extends Defaults["elevation"] ? string | number : Defaults["elevation"] | NonNullable<string | number>;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
location: unknown extends Defaults["location"] ? PropType<import("../../util/index.js").Anchor | null> : {
|
||||
type: PropType<unknown extends Defaults["location"] ? import("../../util/index.js").Anchor | null : Defaults["location"] | import("../../util/index.js").Anchor | null>;
|
||||
default: unknown extends Defaults["location"] ? import("../../util/index.js").Anchor | null : Defaults["location"] | NonNullable<import("../../util/index.js").Anchor | null>;
|
||||
};
|
||||
absolute: unknown extends Defaults["absolute"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["absolute"] ? boolean : boolean | Defaults["absolute"]>;
|
||||
default: unknown extends Defaults["absolute"] ? boolean : boolean | Defaults["absolute"];
|
||||
};
|
||||
collapse: unknown extends Defaults["collapse"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["collapse"] ? boolean : boolean | Defaults["collapse"]>;
|
||||
default: unknown extends Defaults["collapse"] ? boolean : boolean | Defaults["collapse"];
|
||||
};
|
||||
collapsePosition: unknown extends Defaults["collapsePosition"] ? {
|
||||
type: PropType<'start' | 'end'>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<'start' | 'end'>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["collapsePosition"] ? "end" | "start" : "end" | "start" | Defaults["collapsePosition"]>;
|
||||
default: unknown extends Defaults["collapsePosition"] ? "end" | "start" : Defaults["collapsePosition"] | NonNullable<"end" | "start">;
|
||||
};
|
||||
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"];
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: PropType<Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["density"] ? Density : Defaults["density"] | Density>;
|
||||
default: unknown extends Defaults["density"] ? Density : Defaults["density"] | NonNullable<Density>;
|
||||
};
|
||||
extended: unknown extends Defaults["extended"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["extended"] ? boolean : boolean | Defaults["extended"]>;
|
||||
default: unknown extends Defaults["extended"] ? boolean : boolean | Defaults["extended"];
|
||||
};
|
||||
extensionHeight: unknown extends Defaults["extensionHeight"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["extensionHeight"] ? string | number : string | number | Defaults["extensionHeight"]>;
|
||||
default: unknown extends Defaults["extensionHeight"] ? string | number : Defaults["extensionHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
flat: unknown extends Defaults["flat"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["flat"] ? boolean : boolean | Defaults["flat"]>;
|
||||
default: unknown extends Defaults["flat"] ? boolean : boolean | Defaults["flat"];
|
||||
};
|
||||
floating: unknown extends Defaults["floating"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["floating"] ? boolean : boolean | Defaults["floating"]>;
|
||||
default: unknown extends Defaults["floating"] ? boolean : boolean | Defaults["floating"];
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
image: unknown extends Defaults["image"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["image"] ? string : string | Defaults["image"]>;
|
||||
default: unknown extends Defaults["image"] ? string : string | Defaults["image"];
|
||||
};
|
||||
title: unknown extends Defaults["title"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["title"] ? string : string | Defaults["title"]>;
|
||||
default: unknown extends Defaults["title"] ? string : string | Defaults["title"];
|
||||
};
|
||||
};
|
||||
export type VToolbarSlots = {
|
||||
default: never;
|
||||
image: never;
|
||||
prepend: never;
|
||||
append: never;
|
||||
title: never;
|
||||
extension: never;
|
||||
};
|
||||
export declare const VToolbar: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
absolute: boolean;
|
||||
collapse: boolean;
|
||||
collapsePosition: "end" | "start";
|
||||
density: Density;
|
||||
extended: boolean;
|
||||
extensionHeight: string | number;
|
||||
flat: boolean;
|
||||
floating: boolean;
|
||||
height: string | number;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
location?: import("../../util/index.js").Anchor | null | undefined;
|
||||
color?: string | undefined;
|
||||
image?: string | undefined;
|
||||
title?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
image?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
extension?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
image?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
extension?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:extension"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:image"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {
|
||||
contentHeight: import("vue").ComputedRef<number>;
|
||||
extensionHeight: import("vue").ComputedRef<number>;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
absolute: boolean;
|
||||
collapse: boolean;
|
||||
collapsePosition: "end" | "start";
|
||||
density: Density;
|
||||
extended: boolean;
|
||||
extensionHeight: string | number;
|
||||
flat: boolean;
|
||||
floating: boolean;
|
||||
height: string | number;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
image: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
extension: () => 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;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
absolute: boolean;
|
||||
collapse: boolean;
|
||||
collapsePosition: "end" | "start";
|
||||
density: Density;
|
||||
extended: boolean;
|
||||
extensionHeight: string | number;
|
||||
flat: boolean;
|
||||
floating: boolean;
|
||||
height: string | number;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
location?: import("../../util/index.js").Anchor | null | undefined;
|
||||
color?: string | undefined;
|
||||
image?: string | undefined;
|
||||
title?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
image?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
extension?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
image?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
extension?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:extension"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:image"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {
|
||||
contentHeight: import("vue").ComputedRef<number>;
|
||||
extensionHeight: import("vue").ComputedRef<number>;
|
||||
}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
absolute: boolean;
|
||||
collapse: boolean;
|
||||
collapsePosition: "end" | "start";
|
||||
density: Density;
|
||||
extended: boolean;
|
||||
extensionHeight: string | number;
|
||||
flat: boolean;
|
||||
floating: boolean;
|
||||
height: string | number;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
absolute: boolean;
|
||||
collapse: boolean;
|
||||
collapsePosition: "end" | "start";
|
||||
density: Density;
|
||||
extended: boolean;
|
||||
extensionHeight: string | number;
|
||||
flat: boolean;
|
||||
floating: boolean;
|
||||
height: string | number;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
location?: import("../../util/index.js").Anchor | null | undefined;
|
||||
color?: string | undefined;
|
||||
image?: string | undefined;
|
||||
title?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
image?: (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
append?: (() => import("vue").VNodeChild) | undefined;
|
||||
title?: (() => import("vue").VNodeChild) | undefined;
|
||||
extension?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
image?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
title?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
extension?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:extension"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:image"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {
|
||||
contentHeight: import("vue").ComputedRef<number>;
|
||||
extensionHeight: import("vue").ComputedRef<number>;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
absolute: boolean;
|
||||
collapse: boolean;
|
||||
collapsePosition: "end" | "start";
|
||||
density: Density;
|
||||
extended: boolean;
|
||||
extensionHeight: string | number;
|
||||
flat: boolean;
|
||||
floating: boolean;
|
||||
height: string | number;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
image: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
extension: () => 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<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => 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>;
|
||||
};
|
||||
location: PropType<import("../../util/index.js").Anchor | null>;
|
||||
absolute: BooleanConstructor;
|
||||
collapse: BooleanConstructor;
|
||||
collapsePosition: {
|
||||
type: PropType<'start' | 'end'>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
density: {
|
||||
type: PropType<Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
extended: {
|
||||
type: BooleanConstructor;
|
||||
default: null;
|
||||
};
|
||||
extensionHeight: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
flat: BooleanConstructor;
|
||||
floating: BooleanConstructor;
|
||||
height: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
image: StringConstructor;
|
||||
title: StringConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => 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>;
|
||||
};
|
||||
location: PropType<import("../../util/index.js").Anchor | null>;
|
||||
absolute: BooleanConstructor;
|
||||
collapse: BooleanConstructor;
|
||||
collapsePosition: {
|
||||
type: PropType<'start' | 'end'>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
density: {
|
||||
type: PropType<Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
extended: {
|
||||
type: BooleanConstructor;
|
||||
default: null;
|
||||
};
|
||||
extensionHeight: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
flat: BooleanConstructor;
|
||||
floating: BooleanConstructor;
|
||||
height: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
};
|
||||
image: StringConstructor;
|
||||
title: StringConstructor;
|
||||
}>>;
|
||||
export type VToolbar = InstanceType<typeof VToolbar>;
|
||||
+175
@@ -0,0 +1,175 @@
|
||||
import { createVNode as _createVNode, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Styles
|
||||
import "./VToolbar.css";
|
||||
|
||||
// Components
|
||||
import { VToolbarTitle } from "./VToolbarTitle.js";
|
||||
import { VExpandTransition } from "../transitions/index.js";
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/index.js";
|
||||
import { VImg } from "../VImg/index.js"; // Composables
|
||||
import { makeBorderProps, useBorder } from "../../composables/border.js";
|
||||
import { useBackgroundColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { provideDefaults } from "../../composables/defaults.js";
|
||||
import { makeElevationProps, useElevation } from "../../composables/elevation.js";
|
||||
import { useRtl } from "../../composables/locale.js";
|
||||
import { makeLocationProps, useLocation } from "../../composables/location.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Utilities
|
||||
import { computed, shallowRef } from 'vue';
|
||||
import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
const allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact'];
|
||||
export const makeVToolbarProps = propsFactory({
|
||||
absolute: Boolean,
|
||||
collapse: Boolean,
|
||||
collapsePosition: {
|
||||
type: String,
|
||||
default: 'start'
|
||||
},
|
||||
color: String,
|
||||
density: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
validator: v => allowedDensities.includes(v)
|
||||
},
|
||||
extended: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
extensionHeight: {
|
||||
type: [Number, String],
|
||||
default: 48
|
||||
},
|
||||
flat: Boolean,
|
||||
floating: Boolean,
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 64
|
||||
},
|
||||
image: String,
|
||||
title: String,
|
||||
...makeBorderProps(),
|
||||
...makeComponentProps(),
|
||||
...makeElevationProps(),
|
||||
...makeLocationProps(),
|
||||
...makeRoundedProps(),
|
||||
...makeTagProps({
|
||||
tag: 'header'
|
||||
}),
|
||||
...makeThemeProps()
|
||||
}, 'VToolbar');
|
||||
export const VToolbar = genericComponent()({
|
||||
name: 'VToolbar',
|
||||
props: makeVToolbarProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles
|
||||
} = useBackgroundColor(() => props.color);
|
||||
const {
|
||||
borderClasses
|
||||
} = useBorder(props);
|
||||
const {
|
||||
elevationClasses
|
||||
} = useElevation(props);
|
||||
const {
|
||||
locationStyles
|
||||
} = useLocation(props);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props);
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
rtlClasses
|
||||
} = useRtl();
|
||||
const isExtended = shallowRef(props.extended === null ? !!slots.extension?.() : props.extended);
|
||||
const contentHeight = computed(() => parseInt(Number(props.height) + (props.density === 'prominent' ? Number(props.height) : 0) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0), 10));
|
||||
const extensionHeight = computed(() => isExtended.value ? parseInt(Number(props.extensionHeight) + (props.density === 'prominent' ? Number(props.extensionHeight) : 0) - (props.density === 'comfortable' ? 4 : 0) - (props.density === 'compact' ? 8 : 0), 10) : 0);
|
||||
provideDefaults({
|
||||
VBtn: {
|
||||
variant: 'text'
|
||||
}
|
||||
});
|
||||
useRender(() => {
|
||||
const hasTitle = !!(props.title || slots.title);
|
||||
const hasImage = !!(slots.image || props.image);
|
||||
const extension = slots.extension?.();
|
||||
isExtended.value = props.extended === null ? !!extension : props.extended;
|
||||
return _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-toolbar', `v-toolbar--collapse-${props.collapsePosition}`, {
|
||||
'v-toolbar--absolute': props.absolute,
|
||||
'v-toolbar--collapse': props.collapse,
|
||||
'v-toolbar--flat': props.flat,
|
||||
'v-toolbar--floating': props.floating,
|
||||
[`v-toolbar--density-${props.density}`]: true
|
||||
}, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, themeClasses.value, rtlClasses.value, props.class]),
|
||||
"style": _normalizeStyle([backgroundColorStyles.value, locationStyles.value, props.style])
|
||||
}, {
|
||||
default: () => [hasImage && _createElementVNode("div", {
|
||||
"key": "image",
|
||||
"class": "v-toolbar__image"
|
||||
}, [!slots.image ? _createVNode(VImg, {
|
||||
"key": "image-img",
|
||||
"cover": true,
|
||||
"src": props.image
|
||||
}, null) : _createVNode(VDefaultsProvider, {
|
||||
"key": "image-defaults",
|
||||
"disabled": !props.image,
|
||||
"defaults": {
|
||||
VImg: {
|
||||
cover: true,
|
||||
src: props.image
|
||||
}
|
||||
}
|
||||
}, slots.image)]), _createVNode(VDefaultsProvider, {
|
||||
"defaults": {
|
||||
VTabs: {
|
||||
height: convertToUnit(contentHeight.value)
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [_createElementVNode("div", {
|
||||
"class": "v-toolbar__content",
|
||||
"style": {
|
||||
height: convertToUnit(contentHeight.value)
|
||||
}
|
||||
}, [slots.prepend && _createElementVNode("div", {
|
||||
"class": "v-toolbar__prepend"
|
||||
}, [slots.prepend?.()]), hasTitle && _createVNode(VToolbarTitle, {
|
||||
"key": "title",
|
||||
"text": props.title
|
||||
}, {
|
||||
text: slots.title
|
||||
}), slots.default?.(), slots.append && _createElementVNode("div", {
|
||||
"class": "v-toolbar__append"
|
||||
}, [slots.append?.()])])]
|
||||
}), _createVNode(VDefaultsProvider, {
|
||||
"defaults": {
|
||||
VTabs: {
|
||||
height: convertToUnit(extensionHeight.value)
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [_createVNode(VExpandTransition, null, {
|
||||
default: () => [isExtended.value && _createElementVNode("div", {
|
||||
"class": "v-toolbar__extension",
|
||||
"style": {
|
||||
height: convertToUnit(extensionHeight.value)
|
||||
}
|
||||
}, [extension])]
|
||||
})]
|
||||
})]
|
||||
});
|
||||
});
|
||||
return {
|
||||
contentHeight,
|
||||
extensionHeight
|
||||
};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VToolbar.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+121
@@ -0,0 +1,121 @@
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
// Block
|
||||
.v-toolbar
|
||||
align-items: flex-start
|
||||
display: flex
|
||||
flex: $toolbar-flex
|
||||
flex-direction: column
|
||||
justify-content: space-between
|
||||
max-width: 100%
|
||||
position: relative
|
||||
transition: $toolbar-transition
|
||||
transition-property: height, width, transform, max-width, left, right, top, bottom, box-shadow
|
||||
width: 100%
|
||||
|
||||
@media (prefers-reduced-motion: reduce)
|
||||
transition-property: box-shadow
|
||||
|
||||
@include tools.border($toolbar-border...)
|
||||
@include tools.elevation($toolbar-elevation)
|
||||
@include tools.rounded($toolbar-border-radius)
|
||||
@include tools.theme($toolbar-theme...)
|
||||
|
||||
&--absolute
|
||||
position: absolute
|
||||
|
||||
&--collapse
|
||||
max-width: $toolbar-collapsed-max-width
|
||||
overflow: hidden
|
||||
|
||||
&-end
|
||||
margin-inline-start: auto
|
||||
|
||||
&.v-toolbar--collapse-start
|
||||
border-end-end-radius: $toolbar-collapsed-border-radius
|
||||
|
||||
&.v-toolbar--collapse-end
|
||||
border-end-start-radius: $toolbar-collapsed-border-radius
|
||||
|
||||
.v-toolbar-title
|
||||
display: none
|
||||
|
||||
&--flat
|
||||
@include tools.elevation($toolbar-flat-elevation)
|
||||
|
||||
&--floating
|
||||
display: inline-flex
|
||||
width: auto
|
||||
|
||||
&--rounded
|
||||
@include tools.rounded($toolbar-rounded-border-radius)
|
||||
|
||||
.v-toolbar__content,
|
||||
.v-toolbar__extension
|
||||
align-items: center
|
||||
display: flex
|
||||
flex: 0 0 auto
|
||||
position: relative
|
||||
transition: inherit
|
||||
width: 100%
|
||||
|
||||
.v-toolbar__content
|
||||
overflow: hidden
|
||||
|
||||
> .v-btn:first-child
|
||||
margin-inline-start: $toolbar-prepend-btn-margin-start
|
||||
|
||||
> .v-btn:last-child
|
||||
margin-inline-end: $toolbar-append-btn-margin-end
|
||||
|
||||
> .v-toolbar-title
|
||||
margin-inline-start: $toolbar-title-margin
|
||||
|
||||
.v-toolbar--density-prominent &
|
||||
align-items: flex-start
|
||||
|
||||
.v-toolbar__image
|
||||
display: flex
|
||||
opacity: var(--v-toolbar-image-opacity, 1)
|
||||
transition-property: opacity
|
||||
@include tools.absolute()
|
||||
|
||||
.v-toolbar__prepend,
|
||||
.v-toolbar__append
|
||||
align-items: center
|
||||
align-self: stretch
|
||||
display: flex
|
||||
|
||||
.v-toolbar__prepend
|
||||
margin-inline: $toolbar-prepend-btn-margin-start auto
|
||||
|
||||
.v-toolbar__append
|
||||
margin-inline: auto $toolbar-append-btn-margin-end
|
||||
|
||||
.v-toolbar-title
|
||||
flex: 1 1
|
||||
font-size: $toolbar-title-font-size
|
||||
min-width: 0
|
||||
|
||||
@include tools.typography($toolbar-title-typography...)
|
||||
|
||||
.v-toolbar--density-prominent &
|
||||
align-self: flex-end
|
||||
padding-bottom: 6px
|
||||
|
||||
@include tools.typography($toolbar-prominent-title-typography...)
|
||||
|
||||
.v-toolbar-title__placeholder
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
white-space: nowrap
|
||||
|
||||
.v-toolbar-items
|
||||
display: flex
|
||||
height: inherit
|
||||
align-self: stretch
|
||||
|
||||
> .v-btn
|
||||
border-radius: 0
|
||||
+155
@@ -0,0 +1,155 @@
|
||||
export declare const makeVToolbarItemsProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
color?: unknown;
|
||||
variant?: 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>;
|
||||
};
|
||||
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"];
|
||||
};
|
||||
variant: unknown extends Defaults["variant"] ? Omit<{
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
} : Omit<Omit<{
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["variant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" | Defaults["variant"]>;
|
||||
default: unknown extends Defaults["variant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : Defaults["variant"] | NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
};
|
||||
export declare const VToolbarItems: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
} & {
|
||||
class?: any;
|
||||
color?: 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;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
}, 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;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
} & {
|
||||
class?: any;
|
||||
color?: 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;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
} & {
|
||||
class?: any;
|
||||
color?: 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;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
}, {}, 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;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: Omit<{
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: Omit<{
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
}>>;
|
||||
export type VToolbarItems = InstanceType<typeof VToolbarItems>;
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode } from "vue";
|
||||
// Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { provideDefaults } from "../../composables/defaults.js";
|
||||
import { makeVariantProps } from "../../composables/variant.js"; // Utilities
|
||||
import { toRef } from 'vue';
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVToolbarItemsProps = propsFactory({
|
||||
...makeComponentProps(),
|
||||
...makeVariantProps({
|
||||
variant: 'text'
|
||||
})
|
||||
}, 'VToolbarItems');
|
||||
export const VToolbarItems = genericComponent()({
|
||||
name: 'VToolbarItems',
|
||||
props: makeVToolbarItemsProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
provideDefaults({
|
||||
VBtn: {
|
||||
color: toRef(() => props.color),
|
||||
height: 'inherit',
|
||||
variant: toRef(() => props.variant)
|
||||
}
|
||||
});
|
||||
useRender(() => _createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-toolbar-items', props.class]),
|
||||
"style": _normalizeStyle(props.style)
|
||||
}, [slots.default?.()]));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VToolbarItems.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VToolbarItems.js","names":["makeComponentProps","provideDefaults","makeVariantProps","toRef","genericComponent","propsFactory","useRender","makeVToolbarItemsProps","variant","VToolbarItems","name","props","setup","slots","VBtn","color","height","_createElementVNode","_normalizeClass","class","_normalizeStyle","style","default"],"sources":["../../../src/components/VToolbar/VToolbarItems.tsx"],"sourcesContent":["// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeVariantProps } from '@/composables/variant'\n\n// Utilities\nimport { toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVToolbarItemsProps = propsFactory({\n ...makeComponentProps(),\n ...makeVariantProps({ variant: 'text' } as const),\n}, 'VToolbarItems')\n\nexport const VToolbarItems = genericComponent()({\n name: 'VToolbarItems',\n\n props: makeVToolbarItemsProps(),\n\n setup (props, { slots }) {\n provideDefaults({\n VBtn: {\n color: toRef(() => props.color),\n height: 'inherit',\n variant: toRef(() => props.variant),\n },\n })\n\n useRender(() => (\n <div\n class={[\n 'v-toolbar-items',\n props.class,\n ]}\n style={ props.style }\n >\n { slots.default?.() }\n </div>\n ))\n\n return {}\n },\n})\n\nexport type VToolbarItems = InstanceType<typeof VToolbarItems>\n"],"mappings":";AAAA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,eAAe;AAAA,SACfC,gBAAgB,wCAEzB;AACA,SAASC,KAAK,QAAQ,KAAK;AAAA,SAClBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,sBAAsB,GAAGF,YAAY,CAAC;EACjD,GAAGL,kBAAkB,CAAC,CAAC;EACvB,GAAGE,gBAAgB,CAAC;IAAEM,OAAO,EAAE;EAAO,CAAU;AAClD,CAAC,EAAE,eAAe,CAAC;AAEnB,OAAO,MAAMC,aAAa,GAAGL,gBAAgB,CAAC,CAAC,CAAC;EAC9CM,IAAI,EAAE,eAAe;EAErBC,KAAK,EAAEJ,sBAAsB,CAAC,CAAC;EAE/BK,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvBZ,eAAe,CAAC;MACda,IAAI,EAAE;QACJC,KAAK,EAAEZ,KAAK,CAAC,MAAMQ,KAAK,CAACI,KAAK,CAAC;QAC/BC,MAAM,EAAE,SAAS;QACjBR,OAAO,EAAEL,KAAK,CAAC,MAAMQ,KAAK,CAACH,OAAO;MACpC;IACF,CAAC,CAAC;IAEFF,SAAS,CAAC,MAAAW,mBAAA;MAAA,SAAAC,eAAA,CAEC,CACL,iBAAiB,EACjBP,KAAK,CAACQ,KAAK,CACZ;MAAA,SAAAC,eAAA,CACOT,KAAK,CAACU,KAAK;IAAA,IAEjBR,KAAK,CAACS,OAAO,GAAG,CAAC,EAEtB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+158
@@ -0,0 +1,158 @@
|
||||
export declare const makeVToolbarTitleProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
tag?: unknown;
|
||||
text?: 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"] ? {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "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>;
|
||||
};
|
||||
text: unknown extends Defaults["text"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["text"] ? string : string | Defaults["text"]>;
|
||||
default: unknown extends Defaults["text"] ? string : string | Defaults["text"];
|
||||
};
|
||||
};
|
||||
export type VToolbarTitleSlots = {
|
||||
default: never;
|
||||
text: never;
|
||||
};
|
||||
export declare const VToolbarTitle: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
} & {
|
||||
class?: any;
|
||||
text?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
text?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
text?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:text"?: 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;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
text: () => 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;
|
||||
} & {
|
||||
class?: any;
|
||||
text?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
text?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
text?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:text"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
}>;
|
||||
__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;
|
||||
} & {
|
||||
class?: any;
|
||||
text?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
text?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
text?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:text"?: 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;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
text: () => 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: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
text: StringConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
text: StringConstructor;
|
||||
}>>;
|
||||
export type VToolbarTitle = InstanceType<typeof VToolbarTitle>;
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
import { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
|
||||
// Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeTagProps } from "../../composables/tag.js"; // Utilities
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVToolbarTitleProps = propsFactory({
|
||||
text: String,
|
||||
...makeComponentProps(),
|
||||
...makeTagProps()
|
||||
}, 'VToolbarTitle');
|
||||
export const VToolbarTitle = genericComponent()({
|
||||
name: 'VToolbarTitle',
|
||||
props: makeVToolbarTitleProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
useRender(() => {
|
||||
const hasText = !!(slots.default || slots.text || props.text);
|
||||
return _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-toolbar-title', props.class]),
|
||||
"style": _normalizeStyle(props.style)
|
||||
}, {
|
||||
default: () => [hasText && _createElementVNode("div", {
|
||||
"class": "v-toolbar-title__placeholder"
|
||||
}, [slots.text ? slots.text() : props.text, slots.default?.()])]
|
||||
});
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VToolbarTitle.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VToolbarTitle.js","names":["makeComponentProps","makeTagProps","genericComponent","propsFactory","useRender","makeVToolbarTitleProps","text","String","VToolbarTitle","name","props","setup","slots","hasText","default","_createVNode","tag","_normalizeClass","class","_normalizeStyle","style","_createElementVNode"],"sources":["../../../src/components/VToolbar/VToolbarTitle.tsx"],"sourcesContent":["// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVToolbarTitleProps = propsFactory({\n text: String,\n\n ...makeComponentProps(),\n ...makeTagProps(),\n}, 'VToolbarTitle')\n\nexport type VToolbarTitleSlots = {\n default: never\n text: never\n}\n\nexport const VToolbarTitle = genericComponent<VToolbarTitleSlots>()({\n name: 'VToolbarTitle',\n\n props: makeVToolbarTitleProps(),\n\n setup (props, { slots }) {\n useRender(() => {\n const hasText = !!(slots.default || slots.text || props.text)\n\n return (\n <props.tag\n class={[\n 'v-toolbar-title',\n props.class,\n ]}\n style={ props.style }\n >\n { hasText && (\n <div class=\"v-toolbar-title__placeholder\">\n { slots.text ? slots.text() : props.text }\n\n { slots.default?.() }\n </div>\n )}\n </props.tag>\n )\n })\n\n return {}\n },\n})\n\nexport type VToolbarTitle = InstanceType<typeof VToolbarTitle>\n"],"mappings":";AAAA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,YAAY,oCAErB;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,sBAAsB,GAAGF,YAAY,CAAC;EACjDG,IAAI,EAAEC,MAAM;EAEZ,GAAGP,kBAAkB,CAAC,CAAC;EACvB,GAAGC,YAAY,CAAC;AAClB,CAAC,EAAE,eAAe,CAAC;AAOnB,OAAO,MAAMO,aAAa,GAAGN,gBAAgB,CAAqB,CAAC,CAAC;EAClEO,IAAI,EAAE,eAAe;EAErBC,KAAK,EAAEL,sBAAsB,CAAC,CAAC;EAE/BM,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvBR,SAAS,CAAC,MAAM;MACd,MAAMS,OAAO,GAAG,CAAC,EAAED,KAAK,CAACE,OAAO,IAAIF,KAAK,CAACN,IAAI,IAAII,KAAK,CAACJ,IAAI,CAAC;MAE7D,OAAAS,YAAA,CAAAL,KAAA,CAAAM,GAAA;QAAA,SAAAC,eAAA,CAEW,CACL,iBAAiB,EACjBP,KAAK,CAACQ,KAAK,CACZ;QAAA,SAAAC,eAAA,CACOT,KAAK,CAACU,KAAK;MAAA;QAAAN,OAAA,EAAAA,CAAA,MAEjBD,OAAO,IAAAQ,mBAAA;UAAA;QAAA,IAEHT,KAAK,CAACN,IAAI,GAAGM,KAAK,CAACN,IAAI,CAAC,CAAC,GAAGI,KAAK,CAACJ,IAAI,EAEtCM,KAAK,CAACE,OAAO,GAAG,CAAC,EAEtB;MAAA;IAGP,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+71
@@ -0,0 +1,71 @@
|
||||
@use "sass:map";
|
||||
@use '../../styles/settings';
|
||||
@use "../../styles/settings/variables";
|
||||
@use "../../styles/tools/functions";
|
||||
|
||||
// VToolbar
|
||||
$toolbar-background: rgb(var(--v-theme-surface-light)) !default;
|
||||
$toolbar-color: functions.theme-color('on-surface-light', var(--v-high-emphasis-opacity)) !default;
|
||||
$toolbar-border-color: settings.$border-color-root !default;
|
||||
$toolbar-border-radius: map.get(settings.$rounded, 0) !default;
|
||||
$toolbar-border-style: settings.$border-style-root !default;
|
||||
$toolbar-border-thin-width: thin !default;
|
||||
$toolbar-border-width: 0 !default;
|
||||
$toolbar-btn-icon-size: 48px !default;
|
||||
$toolbar-collapsed-border-radius: 24px !default;
|
||||
$toolbar-collapsed-max-width: 112px !default;
|
||||
$toolbar-elevation: 0 !default;
|
||||
$toolbar-flat-elevation: 0 !default;
|
||||
$toolbar-flex: none !default;
|
||||
$toolbar-prepend-btn-margin-start: 4px !default;
|
||||
$toolbar-append-btn-margin-end: 4px !default;
|
||||
$toolbar-rounded-border-radius: variables.$border-radius-root !default;
|
||||
$toolbar-transition: .2s variables.$standard-easing !default;
|
||||
|
||||
// VToolbarTitle
|
||||
$toolbar-title-margin: 20px !default;
|
||||
$toolbar-title-font-size: 1.25rem !default;
|
||||
$toolbar-title-font-weight: 400 !default;
|
||||
$toolbar-title-letter-spacing: 0 !default;
|
||||
$toolbar-title-line-height: 1.75rem !default;
|
||||
$toolbar-title-text-transform: none !default;
|
||||
$toolbar-prominent-title-font-size: 1.5rem !default;
|
||||
$toolbar-prominent-title-font-weight: 400 !default;
|
||||
$toolbar-prominent-title-letter-spacing: 0 !default;
|
||||
$toolbar-prominent-title-line-height: 2.25rem !default;
|
||||
$toolbar-prominent-title-text-transform: none !default;
|
||||
|
||||
// Lists
|
||||
$toolbar-border: (
|
||||
$toolbar-border-color,
|
||||
$toolbar-border-style,
|
||||
$toolbar-border-width,
|
||||
$toolbar-border-thin-width
|
||||
) !default;
|
||||
|
||||
$toolbar-title-typography: (
|
||||
$toolbar-title-font-size,
|
||||
$toolbar-title-font-weight,
|
||||
$toolbar-title-letter-spacing,
|
||||
$toolbar-title-line-height,
|
||||
$toolbar-title-text-transform
|
||||
) !default;
|
||||
|
||||
$toolbar-prominent-title-typography: (
|
||||
$toolbar-prominent-title-font-size,
|
||||
$toolbar-prominent-title-font-weight,
|
||||
$toolbar-prominent-title-letter-spacing,
|
||||
$toolbar-prominent-title-line-height,
|
||||
$toolbar-prominent-title-text-transform
|
||||
) !default;
|
||||
|
||||
$toolbar-theme: (
|
||||
$toolbar-background,
|
||||
$toolbar-color
|
||||
) !default;
|
||||
|
||||
|
||||
// Deprecated
|
||||
$toolbar-content-padding-x: 16px !default;
|
||||
$toolbar-content-padding-y: 4px !default;
|
||||
$toolbar-title-extended-padding: 56px !default;
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
export { VToolbar } from './VToolbar.js';
|
||||
export { VToolbarTitle } from './VToolbarTitle.js';
|
||||
export { VToolbarItems } from './VToolbarItems.js';
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
export { VToolbar } from "./VToolbar.js";
|
||||
export { VToolbarTitle } from "./VToolbarTitle.js";
|
||||
export { VToolbarItems } from "./VToolbarItems.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VToolbar","VToolbarTitle","VToolbarItems"],"sources":["../../../src/components/VToolbar/index.ts"],"sourcesContent":["export { VToolbar } from './VToolbar'\nexport { VToolbarTitle } from './VToolbarTitle'\nexport { VToolbarItems } from './VToolbarItems'\n"],"mappings":"SAASA,QAAQ;AAAA,SACRC,aAAa;AAAA,SACbC,aAAa","ignoreList":[]}
|
||||
Reference in New Issue
Block a user