routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+42
@@ -0,0 +1,42 @@
|
||||
@layer vuetify-components {
|
||||
.v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled) > .v-btn__overlay {
|
||||
opacity: calc(var(--v-activated-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):hover > .v-btn__overlay {
|
||||
opacity: calc((var(--v-activated-opacity) + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):focus-visible > .v-btn__overlay {
|
||||
opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
@supports not selector(:focus-visible) {
|
||||
.v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled):focus > .v-btn__overlay {
|
||||
opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
.v-btn-toggle > .v-btn.v-btn--active:not(.v-btn--disabled).v-btn--variant-plain {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@layer vuetify-final.trumps {
|
||||
@media (forced-colors: active) {
|
||||
.v-btn-toggle > .v-btn:not(.v-btn--disabled) {
|
||||
border-color: buttontext;
|
||||
}
|
||||
.v-btn-toggle > .v-btn:not(.v-btn--disabled):focus-visible {
|
||||
outline: 0;
|
||||
}
|
||||
.v-btn-toggle > .v-btn:not(.v-btn--disabled):not(.v-btn--active):hover, .v-btn-toggle > .v-btn:not(.v-btn--disabled):not(.v-btn--active):focus-visible {
|
||||
color: highlight;
|
||||
border-color: currentColor;
|
||||
}
|
||||
.v-btn-toggle > .v-btn--active {
|
||||
color: highlight;
|
||||
forced-color-adjust: preserve-parent-color;
|
||||
}
|
||||
.v-btn-toggle > .v-btn--active:not(.v-btn--variant-text, .v-btn--variant-plain) {
|
||||
background-color: highlight;
|
||||
color: highlighttext;
|
||||
border-color: highlight;
|
||||
}
|
||||
}
|
||||
}
|
||||
+398
@@ -0,0 +1,398 @@
|
||||
|
||||
import type { InjectionKey } from 'vue';
|
||||
import type { GroupProvide } from '../../composables/group.js';
|
||||
import type { GenericProps } from '../../util/index.js';
|
||||
export type BtnToggleSlotProps = 'isSelected' | 'select' | 'selected' | 'next' | 'prev';
|
||||
export interface DefaultBtnToggleSlot extends Pick<GroupProvide, BtnToggleSlotProps> {
|
||||
}
|
||||
export declare const VBtnToggleSymbol: InjectionKey<GroupProvide>;
|
||||
type VBtnToggleSlots = {
|
||||
default: DefaultBtnToggleSlot;
|
||||
};
|
||||
export declare const makeVBtnToggleProps: <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;
|
||||
modelValue?: unknown;
|
||||
multiple?: unknown;
|
||||
mandatory?: unknown;
|
||||
max?: unknown;
|
||||
selectedClass?: unknown;
|
||||
disabled?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
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>;
|
||||
};
|
||||
border: unknown extends Defaults["border"] ? (BooleanConstructor | NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").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: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").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: import("vue").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: import("vue").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: import("vue").PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
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>;
|
||||
};
|
||||
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"] ? {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "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">;
|
||||
};
|
||||
baseColor: unknown extends Defaults["baseColor"] ? StringConstructor : {
|
||||
type: import("vue").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: import("vue").PropType<unknown extends Defaults["divided"] ? boolean : boolean | Defaults["divided"]>;
|
||||
default: unknown extends Defaults["divided"] ? boolean : boolean | Defaults["divided"];
|
||||
};
|
||||
direction: unknown extends Defaults["direction"] ? {
|
||||
type: import("vue").PropType<"horizontal" | "vertical">;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<"horizontal" | "vertical">;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["direction"] ? "horizontal" | "vertical" : "horizontal" | "vertical" | Defaults["direction"]>;
|
||||
default: unknown extends Defaults["direction"] ? "horizontal" | "vertical" : Defaults["direction"] | NonNullable<"horizontal" | "vertical">;
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: null;
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: null;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["modelValue"] ? any : any>;
|
||||
default: unknown extends Defaults["modelValue"] ? any : any;
|
||||
};
|
||||
multiple: unknown extends Defaults["multiple"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["multiple"] ? boolean : boolean | Defaults["multiple"]>;
|
||||
default: unknown extends Defaults["multiple"] ? boolean : boolean | Defaults["multiple"];
|
||||
};
|
||||
mandatory: unknown extends Defaults["mandatory"] ? import("vue").PropType<"force" | boolean> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["mandatory"] ? "force" | boolean : "force" | boolean | Defaults["mandatory"]>;
|
||||
default: unknown extends Defaults["mandatory"] ? "force" | boolean : Defaults["mandatory"] | NonNullable<"force" | boolean>;
|
||||
};
|
||||
max: unknown extends Defaults["max"] ? NumberConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["max"] ? number : number | Defaults["max"]>;
|
||||
default: unknown extends Defaults["max"] ? number : number | Defaults["max"];
|
||||
};
|
||||
selectedClass: unknown extends Defaults["selectedClass"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"]>;
|
||||
default: unknown extends Defaults["selectedClass"] ? string : string | Defaults["selectedClass"];
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"]>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"];
|
||||
};
|
||||
};
|
||||
export declare const VBtnToggle: {
|
||||
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";
|
||||
multiple: boolean;
|
||||
disabled: boolean;
|
||||
} & {
|
||||
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;
|
||||
mandatory?: "force" | boolean | undefined;
|
||||
max?: number | undefined;
|
||||
selectedClass?: string | undefined;
|
||||
} & {}, {
|
||||
next: () => void;
|
||||
prev: () => void;
|
||||
select: (id: string, value: boolean) => void;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:modelValue': (value: any) => true;
|
||||
}, "$children" | "modelValue" | "update:modelValue" | "v-slot:default" | "v-slots">, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
divided: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
multiple: boolean;
|
||||
disabled: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: (arg: DefaultBtnToggleSlot) => 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";
|
||||
multiple: boolean;
|
||||
disabled: boolean;
|
||||
} & {
|
||||
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;
|
||||
mandatory?: "force" | boolean | undefined;
|
||||
max?: number | undefined;
|
||||
selectedClass?: string | undefined;
|
||||
} & {}, {
|
||||
next: () => void;
|
||||
prev: () => void;
|
||||
select: (id: string, value: boolean) => void;
|
||||
}, {}, {}, {}, {
|
||||
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";
|
||||
multiple: boolean;
|
||||
disabled: boolean;
|
||||
}>;
|
||||
__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";
|
||||
multiple: boolean;
|
||||
disabled: boolean;
|
||||
} & {
|
||||
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;
|
||||
mandatory?: "force" | boolean | undefined;
|
||||
max?: number | undefined;
|
||||
selectedClass?: string | undefined;
|
||||
} & {}, {
|
||||
next: () => void;
|
||||
prev: () => void;
|
||||
select: (id: string, value: boolean) => void;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:modelValue': (value: any) => true;
|
||||
}, "$children" | "modelValue" | "update:modelValue" | "v-slot:default" | "v-slots">, string, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
divided: boolean;
|
||||
direction: "horizontal" | "vertical";
|
||||
multiple: boolean;
|
||||
disabled: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: (arg: DefaultBtnToggleSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new <T>(props: {
|
||||
modelValue?: T;
|
||||
'onUpdate:modelValue'?: (value: T) => void;
|
||||
}, slots: VBtnToggleSlots) => GenericProps<typeof props, typeof slots>) & import("../../util/index.js").FilterPropsOptions<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
density: {
|
||||
type: import("vue").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: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
baseColor: StringConstructor;
|
||||
divided: BooleanConstructor;
|
||||
direction: {
|
||||
type: import("vue").PropType<"horizontal" | "vertical">;
|
||||
default: string;
|
||||
};
|
||||
modelValue: {
|
||||
type: null;
|
||||
default: undefined;
|
||||
};
|
||||
multiple: BooleanConstructor;
|
||||
mandatory: import("vue").PropType<"force" | boolean>;
|
||||
max: NumberConstructor;
|
||||
selectedClass: StringConstructor;
|
||||
disabled: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
density: {
|
||||
type: import("vue").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: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: {
|
||||
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
baseColor: StringConstructor;
|
||||
divided: BooleanConstructor;
|
||||
direction: {
|
||||
type: import("vue").PropType<"horizontal" | "vertical">;
|
||||
default: string;
|
||||
};
|
||||
modelValue: {
|
||||
type: null;
|
||||
default: undefined;
|
||||
};
|
||||
multiple: BooleanConstructor;
|
||||
mandatory: import("vue").PropType<"force" | boolean>;
|
||||
max: NumberConstructor;
|
||||
selectedClass: StringConstructor;
|
||||
disabled: BooleanConstructor;
|
||||
}>>;
|
||||
export type VBtnToggle = InstanceType<typeof VBtnToggle>;
|
||||
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
|
||||
// Styles
|
||||
import "./VBtnToggle.css";
|
||||
|
||||
// Components
|
||||
import { makeVBtnGroupProps, VBtnGroup } from "../VBtnGroup/VBtnGroup.js"; // Composables
|
||||
import { makeGroupProps, useGroup } from "../../composables/group.js"; // Utilities
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const VBtnToggleSymbol = Symbol.for('vuetify:v-btn-toggle');
|
||||
export const makeVBtnToggleProps = propsFactory({
|
||||
...makeVBtnGroupProps(),
|
||||
...makeGroupProps()
|
||||
}, 'VBtnToggle');
|
||||
export const VBtnToggle = genericComponent()({
|
||||
name: 'VBtnToggle',
|
||||
props: makeVBtnToggleProps(),
|
||||
emits: {
|
||||
'update:modelValue': value => true
|
||||
},
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
isSelected,
|
||||
next,
|
||||
prev,
|
||||
select,
|
||||
selected
|
||||
} = useGroup(props, VBtnToggleSymbol);
|
||||
useRender(() => {
|
||||
const btnGroupProps = VBtnGroup.filterProps(props);
|
||||
return _createVNode(VBtnGroup, _mergeProps({
|
||||
"class": ['v-btn-toggle', props.class]
|
||||
}, btnGroupProps, {
|
||||
"style": props.style
|
||||
}), {
|
||||
default: () => [slots.default?.({
|
||||
isSelected,
|
||||
next,
|
||||
prev,
|
||||
select,
|
||||
selected
|
||||
})]
|
||||
});
|
||||
});
|
||||
return {
|
||||
next,
|
||||
prev,
|
||||
select
|
||||
};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VBtnToggle.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VBtnToggle.js","names":["makeVBtnGroupProps","VBtnGroup","makeGroupProps","useGroup","genericComponent","propsFactory","useRender","VBtnToggleSymbol","Symbol","for","makeVBtnToggleProps","VBtnToggle","name","props","emits","value","setup","slots","isSelected","next","prev","select","selected","btnGroupProps","filterProps","_createVNode","_mergeProps","class","style","default"],"sources":["../../../src/components/VBtnToggle/VBtnToggle.tsx"],"sourcesContent":["// Styles\nimport './VBtnToggle.sass'\n\n// Components\nimport { makeVBtnGroupProps, VBtnGroup } from '@/components/VBtnGroup/VBtnGroup'\n\n// Composables\nimport { makeGroupProps, useGroup } from '@/composables/group'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { InjectionKey } from 'vue'\nimport type { GroupProvide } from '@/composables/group'\nimport type { GenericProps } from '@/util'\n\nexport type BtnToggleSlotProps = 'isSelected' | 'select' | 'selected' | 'next' | 'prev'\nexport interface DefaultBtnToggleSlot extends Pick<GroupProvide, BtnToggleSlotProps> {}\n\nexport const VBtnToggleSymbol: InjectionKey<GroupProvide> = Symbol.for('vuetify:v-btn-toggle')\n\ntype VBtnToggleSlots = {\n default: DefaultBtnToggleSlot\n}\n\nexport const makeVBtnToggleProps = propsFactory({\n ...makeVBtnGroupProps(),\n ...makeGroupProps(),\n}, 'VBtnToggle')\n\nexport const VBtnToggle = genericComponent<new <T>(\n props: {\n modelValue?: T\n 'onUpdate:modelValue'?: (value: T) => void\n },\n slots: VBtnToggleSlots,\n) => GenericProps<typeof props, typeof slots>>()({\n name: 'VBtnToggle',\n\n props: makeVBtnToggleProps(),\n\n emits: {\n 'update:modelValue': (value: any) => true,\n },\n\n setup (props, { slots }) {\n const { isSelected, next, prev, select, selected } = useGroup(props, VBtnToggleSymbol)\n\n useRender(() => {\n const btnGroupProps = VBtnGroup.filterProps(props)\n\n return (\n <VBtnGroup\n class={[\n 'v-btn-toggle',\n props.class,\n ]}\n { ...btnGroupProps }\n style={ props.style }\n >\n { slots.default?.({\n isSelected,\n next,\n prev,\n select,\n selected,\n })}\n </VBtnGroup>\n )\n })\n\n return {\n next,\n prev,\n select,\n }\n },\n})\n\nexport type VBtnToggle = InstanceType<typeof VBtnToggle>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB,EAAEC,SAAS,qCAEtC;AAAA,SACSC,cAAc,EAAEC,QAAQ,sCAEjC;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,+BAElD;AAQA,OAAO,MAAMC,gBAA4C,GAAGC,MAAM,CAACC,GAAG,CAAC,sBAAsB,CAAC;AAM9F,OAAO,MAAMC,mBAAmB,GAAGL,YAAY,CAAC;EAC9C,GAAGL,kBAAkB,CAAC,CAAC;EACvB,GAAGE,cAAc,CAAC;AACpB,CAAC,EAAE,YAAY,CAAC;AAEhB,OAAO,MAAMS,UAAU,GAAGP,gBAAgB,CAMK,CAAC,CAAC;EAC/CQ,IAAI,EAAE,YAAY;EAElBC,KAAK,EAAEH,mBAAmB,CAAC,CAAC;EAE5BI,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAU,IAAK;EACvC,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAE;IAAEI;EAAM,CAAC,EAAE;IACvB,MAAM;MAAEC,UAAU;MAAEC,IAAI;MAAEC,IAAI;MAAEC,MAAM;MAAEC;IAAS,CAAC,GAAGnB,QAAQ,CAACU,KAAK,EAAEN,gBAAgB,CAAC;IAEtFD,SAAS,CAAC,MAAM;MACd,MAAMiB,aAAa,GAAGtB,SAAS,CAACuB,WAAW,CAACX,KAAK,CAAC;MAElD,OAAAY,YAAA,CAAAxB,SAAA,EAAAyB,WAAA;QAAA,SAEW,CACL,cAAc,EACdb,KAAK,CAACc,KAAK;MACZ,GACIJ,aAAa;QAAA,SACVV,KAAK,CAACe;MAAK;QAAAC,OAAA,EAAAA,CAAA,MAEjBZ,KAAK,CAACY,OAAO,GAAG;UAChBX,UAAU;UACVC,IAAI;UACJC,IAAI;UACJC,MAAM;UACNC;QACF,CAAC,CAAC;MAAA;IAGR,CAAC,CAAC;IAEF,OAAO;MACLH,IAAI;MACJC,IAAI;MACJC;IACF,CAAC;EACH;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
@use './variables' as *
|
||||
@use '../../styles/tools'
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-btn-toggle
|
||||
> .v-btn.v-btn--active:not(.v-btn--disabled)
|
||||
@include tools.active-states('> .v-btn__overlay', $btn-toggle-selected-opacity)
|
||||
|
||||
&.v-btn--variant-plain
|
||||
opacity: 1
|
||||
|
||||
@include tools.layer('trumps')
|
||||
@media (forced-colors: active)
|
||||
.v-btn-toggle
|
||||
> .v-btn:not(.v-btn--disabled)
|
||||
border-color: buttontext
|
||||
|
||||
&:focus-visible
|
||||
outline: 0
|
||||
|
||||
&:not(.v-btn--active)
|
||||
&:hover,
|
||||
&:focus-visible
|
||||
color: highlight
|
||||
border-color: currentColor
|
||||
|
||||
> .v-btn--active
|
||||
color: highlight
|
||||
forced-color-adjust: preserve-parent-color
|
||||
|
||||
&:not(.v-btn--variant-text, .v-btn--variant-plain)
|
||||
background-color: highlight
|
||||
color: highlighttext
|
||||
border-color: highlight
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@use 'sass:map';
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
|
||||
// VBtnToggle
|
||||
$btn-toggle-selected-opacity: map.get(settings.$states, 'activated') !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VBtnToggle } from './VBtnToggle.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VBtnToggle } from "./VBtnToggle.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VBtnToggle"],"sources":["../../../src/components/VBtnToggle/index.ts"],"sourcesContent":["export { VBtnToggle } from './VBtnToggle'\n"],"mappings":"SAASA,UAAU","ignoreList":[]}
|
||||
Reference in New Issue
Block a user