routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+88
@@ -0,0 +1,88 @@
|
||||
@layer vuetify-components {
|
||||
.v-btn-group {
|
||||
display: inline-flex;
|
||||
flex-wrap: nowrap;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.v-btn-group {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
.v-btn-group--border {
|
||||
border-width: thin;
|
||||
box-shadow: none;
|
||||
}
|
||||
.v-btn-group {
|
||||
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-btn-group {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.v-btn-group {
|
||||
background: transparent;
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface)) calc(var(--v-high-emphasis-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-btn-group .v-btn {
|
||||
border-radius: 0;
|
||||
border-color: inherit;
|
||||
}
|
||||
.v-btn-group--tile {
|
||||
border-radius: 0;
|
||||
}
|
||||
.v-btn-group--density-default.v-btn-group--horizontal {
|
||||
height: 48px;
|
||||
}
|
||||
.v-btn-group--density-comfortable.v-btn-group--horizontal {
|
||||
height: 40px;
|
||||
}
|
||||
.v-btn-group--density-compact.v-btn-group--horizontal {
|
||||
height: 36px;
|
||||
}
|
||||
.v-btn-group--horizontal .v-btn:not(:last-child) {
|
||||
border-inline-end: none;
|
||||
}
|
||||
.v-btn-group--horizontal .v-btn:not(:first-child) {
|
||||
border-inline-start: none;
|
||||
}
|
||||
.v-btn-group--horizontal .v-btn:first-child {
|
||||
border-start-start-radius: inherit;
|
||||
border-end-start-radius: inherit;
|
||||
}
|
||||
.v-btn-group--horizontal .v-btn:last-child {
|
||||
border-start-end-radius: inherit;
|
||||
border-end-end-radius: inherit;
|
||||
}
|
||||
.v-btn-group--horizontal.v-btn-group--divided .v-btn:not(:last-child) {
|
||||
border-inline-end-width: thin;
|
||||
border-inline-end-style: solid;
|
||||
border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
.v-btn-group--vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
.v-btn-group--vertical .v-btn:not(:last-child) {
|
||||
border-block-end: none;
|
||||
}
|
||||
.v-btn-group--vertical .v-btn:not(:first-child) {
|
||||
border-block-start: none;
|
||||
}
|
||||
.v-btn-group--vertical .v-btn:first-child {
|
||||
border-start-start-radius: inherit;
|
||||
border-start-end-radius: inherit;
|
||||
}
|
||||
.v-btn-group--vertical .v-btn:last-child {
|
||||
border-end-start-radius: inherit;
|
||||
border-end-end-radius: inherit;
|
||||
}
|
||||
.v-btn-group--vertical.v-btn-group--divided .v-btn:not(:last-child) {
|
||||
border-block-end-width: thin;
|
||||
border-block-end-style: solid;
|
||||
border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
}
|
||||
+327
@@ -0,0 +1,327 @@
|
||||
|
||||
import type { PropType } from 'vue';
|
||||
export declare const makeVBtnGroupProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
border?: unknown;
|
||||
density?: unknown;
|
||||
elevation?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
color?: unknown;
|
||||
variant?: unknown;
|
||||
baseColor?: unknown;
|
||||
divided?: unknown;
|
||||
direction?: 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>;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
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"] ? {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "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>;
|
||||
};
|
||||
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"];
|
||||
};
|
||||
variant: unknown extends Defaults["variant"] ? {
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: 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">;
|
||||
};
|
||||
baseColor: unknown extends Defaults["baseColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"]>;
|
||||
default: unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"];
|
||||
};
|
||||
divided: unknown extends Defaults["divided"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["divided"] ? boolean : boolean | Defaults["divided"]>;
|
||||
default: unknown extends Defaults["divided"] ? boolean : boolean | Defaults["divided"];
|
||||
};
|
||||
direction: unknown extends Defaults["direction"] ? {
|
||||
type: PropType<'horizontal' | 'vertical'>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<'horizontal' | 'vertical'>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["direction"] ? "horizontal" | "vertical" : "horizontal" | "vertical" | Defaults["direction"]>;
|
||||
default: unknown extends Defaults["direction"] ? "horizontal" | "vertical" : Defaults["direction"] | NonNullable<"horizontal" | "vertical">;
|
||||
};
|
||||
};
|
||||
export declare const VBtnGroup: {
|
||||
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;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
divided: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
baseColor?: 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;
|
||||
}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, 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;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
divided: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
}, 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;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
divided: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
baseColor?: 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;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
divided: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
}>;
|
||||
__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;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
divided: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
baseColor?: 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;
|
||||
}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
divided: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
}, {}, 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<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: {
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
baseColor: StringConstructor;
|
||||
divided: BooleanConstructor;
|
||||
direction: {
|
||||
type: PropType<'horizontal' | 'vertical'>;
|
||||
default: string;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: {
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
baseColor: StringConstructor;
|
||||
divided: BooleanConstructor;
|
||||
direction: {
|
||||
type: PropType<'horizontal' | 'vertical'>;
|
||||
default: string;
|
||||
};
|
||||
}>>;
|
||||
export type VBtnGroup = InstanceType<typeof VBtnGroup>;
|
||||
+74
@@ -0,0 +1,74 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
|
||||
// Styles
|
||||
import "./VBtnGroup.css";
|
||||
|
||||
// Composables
|
||||
import { makeBorderProps, useBorder } from "../../composables/border.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { provideDefaults } from "../../composables/defaults.js";
|
||||
import { makeDensityProps, useDensity } from "../../composables/density.js";
|
||||
import { makeElevationProps, useElevation } from "../../composables/elevation.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js";
|
||||
import { makeVariantProps } from "../../composables/variant.js"; // Utilities
|
||||
import { toRef } from 'vue';
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVBtnGroupProps = propsFactory({
|
||||
baseColor: String,
|
||||
divided: Boolean,
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'horizontal'
|
||||
},
|
||||
...makeBorderProps(),
|
||||
...makeComponentProps(),
|
||||
...makeDensityProps(),
|
||||
...makeElevationProps(),
|
||||
...makeRoundedProps(),
|
||||
...makeTagProps(),
|
||||
...makeThemeProps(),
|
||||
...makeVariantProps()
|
||||
}, 'VBtnGroup');
|
||||
export const VBtnGroup = genericComponent()({
|
||||
name: 'VBtnGroup',
|
||||
props: makeVBtnGroupProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
densityClasses
|
||||
} = useDensity(props);
|
||||
const {
|
||||
borderClasses
|
||||
} = useBorder(props);
|
||||
const {
|
||||
elevationClasses
|
||||
} = useElevation(props);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props);
|
||||
provideDefaults({
|
||||
VBtn: {
|
||||
height: toRef(() => props.direction === 'horizontal' ? 'auto' : null),
|
||||
baseColor: toRef(() => props.baseColor),
|
||||
color: toRef(() => props.color),
|
||||
density: toRef(() => props.density),
|
||||
flat: true,
|
||||
variant: toRef(() => props.variant)
|
||||
}
|
||||
});
|
||||
useRender(() => {
|
||||
return _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-btn-group', `v-btn-group--${props.direction}`, {
|
||||
'v-btn-group--divided': props.divided
|
||||
}, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class]),
|
||||
"style": _normalizeStyle(props.style)
|
||||
}, slots);
|
||||
});
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VBtnGroup.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+79
@@ -0,0 +1,79 @@
|
||||
@use 'sass:selector'
|
||||
@use '../../styles/tools'
|
||||
@use '../VBtn/variables' as *
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-btn-group
|
||||
display: inline-flex
|
||||
flex-wrap: nowrap
|
||||
max-width: 100%
|
||||
min-width: 0
|
||||
overflow-y: hidden
|
||||
overflow-x: auto
|
||||
vertical-align: middle
|
||||
|
||||
@include tools.border($btn-group-border...)
|
||||
@include tools.elevation($btn-group-elevation)
|
||||
@include tools.rounded($btn-group-border-radius)
|
||||
@include tools.theme($btn-group-theme...)
|
||||
|
||||
.v-btn
|
||||
border-radius: 0
|
||||
border-color: inherit
|
||||
|
||||
&--tile
|
||||
@include tools.rounded($btn-group-tile-border-radius)
|
||||
|
||||
&--horizontal
|
||||
$root: &
|
||||
|
||||
@at-root
|
||||
@include tools.density('v-btn-group', $button-density) using ($modifier)
|
||||
@at-root #{selector.append(&, $root)}
|
||||
height: $btn-group-height + $modifier
|
||||
|
||||
.v-btn
|
||||
&:not(:last-child)
|
||||
border-inline-end: none
|
||||
|
||||
&:not(:first-child)
|
||||
border-inline-start: none
|
||||
|
||||
&:first-child
|
||||
border-start-start-radius: inherit
|
||||
border-end-start-radius: inherit
|
||||
|
||||
&:last-child
|
||||
border-start-end-radius: inherit
|
||||
border-end-end-radius: inherit
|
||||
|
||||
&.v-btn-group--divided
|
||||
.v-btn:not(:last-child)
|
||||
border-inline-end-width: $btn-group-border-thin-width
|
||||
border-inline-end-style: $btn-group-border-style
|
||||
border-inline-end-color: $btn-group-border-color
|
||||
|
||||
&--vertical
|
||||
flex-direction: column
|
||||
|
||||
.v-btn
|
||||
&:not(:last-child)
|
||||
border-block-end: none
|
||||
|
||||
&:not(:first-child)
|
||||
border-block-start: none
|
||||
|
||||
&:first-child
|
||||
border-start-start-radius: inherit
|
||||
border-start-end-radius: inherit
|
||||
|
||||
&:last-child
|
||||
border-end-start-radius: inherit
|
||||
border-end-end-radius: inherit
|
||||
|
||||
&.v-btn-group--divided
|
||||
.v-btn:not(:last-child)
|
||||
border-block-end-width: $btn-group-border-thin-width
|
||||
border-block-end-style: $btn-group-border-style
|
||||
border-block-end-color: $btn-group-border-color
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
|
||||
// VBtnGroup
|
||||
$btn-group-background: transparent !default;
|
||||
$btn-group-border-color: settings.$border-color-root !default;
|
||||
$btn-group-border-radius: settings.$border-radius-root !default;
|
||||
$btn-group-border-style: settings.$border-style-root !default;
|
||||
$btn-group-border-thin-width: thin !default;
|
||||
$btn-group-border-width: 0 !default;
|
||||
$btn-group-color: tools.theme-color('on-surface', var(--v-high-emphasis-opacity)) !default;
|
||||
$btn-group-height: 48px !default;
|
||||
$btn-group-elevation: 0 !default;
|
||||
$btn-group-tile-border-radius: 0 !default;
|
||||
|
||||
// Lists
|
||||
$btn-group-border: (
|
||||
$btn-group-border-color,
|
||||
$btn-group-border-style,
|
||||
$btn-group-border-width,
|
||||
$btn-group-border-thin-width
|
||||
) !default;
|
||||
|
||||
$btn-group-theme: (
|
||||
$btn-group-background,
|
||||
$btn-group-color
|
||||
) !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VBtnGroup } from './VBtnGroup.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VBtnGroup } from "./VBtnGroup.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VBtnGroup"],"sources":["../../../src/components/VBtnGroup/index.ts"],"sourcesContent":["export { VBtnGroup } from './VBtnGroup'\n"],"mappings":"SAASA,SAAS","ignoreList":[]}
|
||||
Reference in New Issue
Block a user