routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
Generated
Vendored
+99
@@ -0,0 +1,99 @@
|
||||
@layer vuetify-components {
|
||||
.v-selection-control {
|
||||
align-items: center;
|
||||
contain: layout;
|
||||
display: flex;
|
||||
flex: 1 0;
|
||||
grid-area: control;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
.v-selection-control .v-label {
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
.v-selection-control--disabled {
|
||||
opacity: var(--v-disabled-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-selection-control--error:not(.v-selection-control--disabled) .v-label {
|
||||
color: rgb(var(--v-theme-error));
|
||||
}
|
||||
.v-selection-control--inline {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.v-selection-control--inline .v-label {
|
||||
width: auto;
|
||||
}
|
||||
.v-selection-control--density-default {
|
||||
--v-selection-control-size: 40px;
|
||||
}
|
||||
.v-selection-control--density-comfortable {
|
||||
--v-selection-control-size: 36px;
|
||||
}
|
||||
.v-selection-control--density-compact {
|
||||
--v-selection-control-size: 28px;
|
||||
}
|
||||
.v-selection-control__wrapper {
|
||||
width: var(--v-selection-control-size);
|
||||
height: var(--v-selection-control-size);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
}
|
||||
.v-selection-control__input {
|
||||
width: var(--v-selection-control-size);
|
||||
height: var(--v-selection-control-size);
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.v-selection-control__input input {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
.v-selection-control__input::before {
|
||||
border-radius: 100%;
|
||||
background-color: currentColor;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-selection-control__input::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.v-selection-control__input:hover::before {
|
||||
opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-selection-control__input > .v-icon {
|
||||
opacity: var(--v-medium-emphasis-opacity);
|
||||
}
|
||||
.v-selection-control--disabled .v-selection-control__input > .v-icon, .v-selection-control--dirty .v-selection-control__input > .v-icon, .v-selection-control--error .v-selection-control__input > .v-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-selection-control--error:not(.v-selection-control--disabled) .v-selection-control__input > .v-icon {
|
||||
color: rgb(var(--v-theme-error));
|
||||
}
|
||||
.v-selection-control--focus-visible .v-selection-control__input::before {
|
||||
opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
Generated
Vendored
+501
@@ -0,0 +1,501 @@
|
||||
|
||||
import type { CSSProperties, ExtractPropTypes, Ref, VNode, WritableComputedRef } from 'vue';
|
||||
import type { IconValue } from '../../composables/icons.js';
|
||||
import type { EventProp, GenericProps } from '../../util/index.js';
|
||||
export type SelectionControlSlot = {
|
||||
model: WritableComputedRef<boolean>;
|
||||
textColorClasses: Ref<string[]>;
|
||||
textColorStyles: Ref<CSSProperties>;
|
||||
backgroundColorClasses: Ref<string[]>;
|
||||
backgroundColorStyles: Ref<CSSProperties>;
|
||||
inputNode: VNode;
|
||||
icon: IconValue | undefined;
|
||||
props: {
|
||||
onBlur: (e: Event) => void;
|
||||
onFocus: (e: FocusEvent) => void;
|
||||
id: string;
|
||||
};
|
||||
};
|
||||
export type VSelectionControlSlots = {
|
||||
default: {
|
||||
backgroundColorClasses: Ref<string[]>;
|
||||
backgroundColorStyles: Ref<CSSProperties>;
|
||||
};
|
||||
label: {
|
||||
label: string | undefined;
|
||||
props: Record<string, unknown>;
|
||||
};
|
||||
input: SelectionControlSlot;
|
||||
};
|
||||
export declare const makeVSelectionControlProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
density?: unknown;
|
||||
color?: unknown;
|
||||
disabled?: unknown;
|
||||
defaultsTarget?: unknown;
|
||||
error?: unknown;
|
||||
id?: unknown;
|
||||
inline?: unknown;
|
||||
falseIcon?: unknown;
|
||||
trueIcon?: unknown;
|
||||
ripple?: unknown;
|
||||
multiple?: unknown;
|
||||
name?: unknown;
|
||||
readonly?: unknown;
|
||||
modelValue?: unknown;
|
||||
type?: unknown;
|
||||
valueComparator?: unknown;
|
||||
label?: unknown;
|
||||
baseColor?: unknown;
|
||||
trueValue?: unknown;
|
||||
falseValue?: unknown;
|
||||
value?: 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>;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? {
|
||||
type: import("vue").PropType<boolean | null>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<boolean | null>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["disabled"] ? boolean | null : boolean | Defaults["disabled"] | null>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean | null : Defaults["disabled"] | NonNullable<boolean | null>;
|
||||
};
|
||||
defaultsTarget: unknown extends Defaults["defaultsTarget"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["defaultsTarget"] ? string : string | Defaults["defaultsTarget"]>;
|
||||
default: unknown extends Defaults["defaultsTarget"] ? string : string | Defaults["defaultsTarget"];
|
||||
};
|
||||
error: unknown extends Defaults["error"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["error"] ? boolean : boolean | Defaults["error"]>;
|
||||
default: unknown extends Defaults["error"] ? boolean : boolean | Defaults["error"];
|
||||
};
|
||||
id: unknown extends Defaults["id"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["id"] ? string : string | Defaults["id"]>;
|
||||
default: unknown extends Defaults["id"] ? string : string | Defaults["id"];
|
||||
};
|
||||
inline: unknown extends Defaults["inline"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["inline"] ? boolean : boolean | Defaults["inline"]>;
|
||||
default: unknown extends Defaults["inline"] ? boolean : boolean | Defaults["inline"];
|
||||
};
|
||||
falseIcon: unknown extends Defaults["falseIcon"] ? import("vue").PropType<IconValue> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["falseIcon"] ? IconValue : Defaults["falseIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["falseIcon"] ? IconValue : Defaults["falseIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
trueIcon: unknown extends Defaults["trueIcon"] ? import("vue").PropType<IconValue> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["trueIcon"] ? IconValue : Defaults["trueIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["trueIcon"] ? IconValue : Defaults["trueIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
ripple: unknown extends Defaults["ripple"] ? {
|
||||
type: import("vue").PropType<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["ripple"] ? boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined : boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | Defaults["ripple"] | undefined>;
|
||||
default: unknown extends Defaults["ripple"] ? boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined : Defaults["ripple"] | NonNullable<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
};
|
||||
multiple: unknown extends Defaults["multiple"] ? {
|
||||
type: import("vue").PropType<boolean | null>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<boolean | null>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["multiple"] ? boolean | null : boolean | Defaults["multiple"] | null>;
|
||||
default: unknown extends Defaults["multiple"] ? boolean | null : Defaults["multiple"] | NonNullable<boolean | null>;
|
||||
};
|
||||
name: unknown extends Defaults["name"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["name"] ? string : string | Defaults["name"]>;
|
||||
default: unknown extends Defaults["name"] ? string : string | Defaults["name"];
|
||||
};
|
||||
readonly: unknown extends Defaults["readonly"] ? {
|
||||
type: import("vue").PropType<boolean | null>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<boolean | null>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["readonly"] ? boolean | null : boolean | Defaults["readonly"] | null>;
|
||||
default: unknown extends Defaults["readonly"] ? boolean | null : Defaults["readonly"] | NonNullable<boolean | null>;
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? null : {
|
||||
type: import("vue").PropType<unknown extends Defaults["modelValue"] ? any : any>;
|
||||
default: unknown extends Defaults["modelValue"] ? any : any;
|
||||
};
|
||||
type: unknown extends Defaults["type"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["type"] ? string : string | Defaults["type"]>;
|
||||
default: unknown extends Defaults["type"] ? string : string | Defaults["type"];
|
||||
};
|
||||
valueComparator: unknown extends Defaults["valueComparator"] ? {
|
||||
type: import("vue").PropType<import("../../util/index.js").ValueComparator>;
|
||||
default: typeof import("../../util/index.js").deepEqual;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("../../util/index.js").ValueComparator>;
|
||||
default: typeof import("../../util/index.js").deepEqual;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["valueComparator"] ? import("../../util/index.js").ValueComparator : import("../../util/index.js").ValueComparator | Defaults["valueComparator"]>;
|
||||
default: unknown extends Defaults["valueComparator"] ? import("../../util/index.js").ValueComparator : import("../../util/index.js").ValueComparator | Defaults["valueComparator"];
|
||||
};
|
||||
label: unknown extends Defaults["label"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["label"] ? string : string | Defaults["label"]>;
|
||||
default: unknown extends Defaults["label"] ? string : string | Defaults["label"];
|
||||
};
|
||||
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"];
|
||||
};
|
||||
trueValue: unknown extends Defaults["trueValue"] ? null : {
|
||||
type: import("vue").PropType<unknown extends Defaults["trueValue"] ? any : any>;
|
||||
default: unknown extends Defaults["trueValue"] ? any : any;
|
||||
};
|
||||
falseValue: unknown extends Defaults["falseValue"] ? null : {
|
||||
type: import("vue").PropType<unknown extends Defaults["falseValue"] ? any : any>;
|
||||
default: unknown extends Defaults["falseValue"] ? any : any;
|
||||
};
|
||||
value: unknown extends Defaults["value"] ? null : {
|
||||
type: import("vue").PropType<unknown extends Defaults["value"] ? any : any>;
|
||||
default: unknown extends Defaults["value"] ? any : any;
|
||||
};
|
||||
};
|
||||
export declare function useSelectionControl(props: ExtractPropTypes<ReturnType<typeof makeVSelectionControlProps>> & {
|
||||
'onUpdate:modelValue': EventProp | undefined;
|
||||
}): {
|
||||
group: import("../VSelectionControlGroup/VSelectionControlGroup.js").VSelectionGroupContext | undefined;
|
||||
densityClasses: Readonly<Ref<string, string>>;
|
||||
trueValue: import("vue").ComputedRef<any>;
|
||||
falseValue: import("vue").ComputedRef<any>;
|
||||
model: WritableComputedRef<boolean, boolean>;
|
||||
textColorClasses: Ref<string[], string[]>;
|
||||
textColorStyles: Ref<CSSProperties, CSSProperties>;
|
||||
backgroundColorClasses: Ref<string[], string[]>;
|
||||
backgroundColorStyles: Ref<CSSProperties, CSSProperties>;
|
||||
icon: import("vue").ComputedRef<IconValue | undefined>;
|
||||
};
|
||||
export declare const VSelectionControl: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
disabled: boolean | null;
|
||||
error: boolean;
|
||||
inline: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
multiple: boolean | null;
|
||||
readonly: boolean | null;
|
||||
valueComparator: import("../../util/index.js").ValueComparator;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
color?: string | undefined;
|
||||
defaultsTarget?: string | undefined;
|
||||
id?: string | undefined;
|
||||
falseIcon?: IconValue | undefined;
|
||||
trueIcon?: IconValue | undefined;
|
||||
name?: string | undefined;
|
||||
type?: string | undefined;
|
||||
label?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
trueValue?: any;
|
||||
falseValue?: any;
|
||||
value?: any;
|
||||
} & {}, {
|
||||
isFocused: import("vue").ShallowRef<boolean, boolean>;
|
||||
input: Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:modelValue': (value: any) => true;
|
||||
}, "$children" | "modelValue" | "update:modelValue" | "v-slot:default" | "v-slot:input" | "v-slot:label" | "v-slots">, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
disabled: boolean | null;
|
||||
error: boolean;
|
||||
inline: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
multiple: boolean | null;
|
||||
readonly: boolean | null;
|
||||
valueComparator: import("../../util/index.js").ValueComparator;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: (arg: {
|
||||
backgroundColorClasses: Ref<string[]>;
|
||||
backgroundColorStyles: Ref<CSSProperties>;
|
||||
}) => VNode[];
|
||||
label: (arg: {
|
||||
label: string | undefined;
|
||||
props: Record<string, unknown>;
|
||||
}) => VNode[];
|
||||
input: (arg: SelectionControlSlot) => VNode[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
disabled: boolean | null;
|
||||
error: boolean;
|
||||
inline: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
multiple: boolean | null;
|
||||
readonly: boolean | null;
|
||||
valueComparator: import("../../util/index.js").ValueComparator;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
color?: string | undefined;
|
||||
defaultsTarget?: string | undefined;
|
||||
id?: string | undefined;
|
||||
falseIcon?: IconValue | undefined;
|
||||
trueIcon?: IconValue | undefined;
|
||||
name?: string | undefined;
|
||||
type?: string | undefined;
|
||||
label?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
trueValue?: any;
|
||||
falseValue?: any;
|
||||
value?: any;
|
||||
} & {}, {
|
||||
isFocused: import("vue").ShallowRef<boolean, boolean>;
|
||||
input: Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
|
||||
}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
disabled: boolean | null;
|
||||
error: boolean;
|
||||
inline: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
multiple: boolean | null;
|
||||
readonly: boolean | null;
|
||||
valueComparator: import("../../util/index.js").ValueComparator;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
disabled: boolean | null;
|
||||
error: boolean;
|
||||
inline: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
multiple: boolean | null;
|
||||
readonly: boolean | null;
|
||||
valueComparator: import("../../util/index.js").ValueComparator;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
color?: string | undefined;
|
||||
defaultsTarget?: string | undefined;
|
||||
id?: string | undefined;
|
||||
falseIcon?: IconValue | undefined;
|
||||
trueIcon?: IconValue | undefined;
|
||||
name?: string | undefined;
|
||||
type?: string | undefined;
|
||||
label?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
trueValue?: any;
|
||||
falseValue?: any;
|
||||
value?: any;
|
||||
} & {}, {
|
||||
isFocused: import("vue").ShallowRef<boolean, boolean>;
|
||||
input: Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:modelValue': (value: any) => true;
|
||||
}, "$children" | "modelValue" | "update:modelValue" | "v-slot:default" | "v-slot:input" | "v-slot:label" | "v-slots">, string, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
disabled: boolean | null;
|
||||
error: boolean;
|
||||
inline: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
multiple: boolean | null;
|
||||
readonly: boolean | null;
|
||||
valueComparator: import("../../util/index.js").ValueComparator;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: (arg: {
|
||||
backgroundColorClasses: Ref<string[]>;
|
||||
backgroundColorStyles: Ref<CSSProperties>;
|
||||
}) => VNode[];
|
||||
label: (arg: {
|
||||
label: string | undefined;
|
||||
props: Record<string, unknown>;
|
||||
}) => VNode[];
|
||||
input: (arg: SelectionControlSlot) => VNode[];
|
||||
}>>, 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: VSelectionControlSlots) => 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;
|
||||
};
|
||||
density: {
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
color: StringConstructor;
|
||||
disabled: {
|
||||
type: import("vue").PropType<boolean | null>;
|
||||
default: null;
|
||||
};
|
||||
defaultsTarget: StringConstructor;
|
||||
error: BooleanConstructor;
|
||||
id: StringConstructor;
|
||||
inline: BooleanConstructor;
|
||||
falseIcon: import("vue").PropType<IconValue>;
|
||||
trueIcon: import("vue").PropType<IconValue>;
|
||||
ripple: {
|
||||
type: import("vue").PropType<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
};
|
||||
multiple: {
|
||||
type: import("vue").PropType<boolean | null>;
|
||||
default: null;
|
||||
};
|
||||
name: StringConstructor;
|
||||
readonly: {
|
||||
type: import("vue").PropType<boolean | null>;
|
||||
default: null;
|
||||
};
|
||||
modelValue: null;
|
||||
type: StringConstructor;
|
||||
valueComparator: {
|
||||
type: import("vue").PropType<import("../../util/index.js").ValueComparator>;
|
||||
default: typeof import("../../util/index.js").deepEqual;
|
||||
};
|
||||
label: StringConstructor;
|
||||
baseColor: StringConstructor;
|
||||
trueValue: null;
|
||||
falseValue: null;
|
||||
value: null;
|
||||
}, ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
density: {
|
||||
type: import("vue").PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
color: StringConstructor;
|
||||
disabled: {
|
||||
type: import("vue").PropType<boolean | null>;
|
||||
default: null;
|
||||
};
|
||||
defaultsTarget: StringConstructor;
|
||||
error: BooleanConstructor;
|
||||
id: StringConstructor;
|
||||
inline: BooleanConstructor;
|
||||
falseIcon: import("vue").PropType<IconValue>;
|
||||
trueIcon: import("vue").PropType<IconValue>;
|
||||
ripple: {
|
||||
type: import("vue").PropType<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
default: boolean;
|
||||
};
|
||||
multiple: {
|
||||
type: import("vue").PropType<boolean | null>;
|
||||
default: null;
|
||||
};
|
||||
name: StringConstructor;
|
||||
readonly: {
|
||||
type: import("vue").PropType<boolean | null>;
|
||||
default: null;
|
||||
};
|
||||
modelValue: null;
|
||||
type: StringConstructor;
|
||||
valueComparator: {
|
||||
type: import("vue").PropType<import("../../util/index.js").ValueComparator>;
|
||||
default: typeof import("../../util/index.js").deepEqual;
|
||||
};
|
||||
label: StringConstructor;
|
||||
baseColor: StringConstructor;
|
||||
trueValue: null;
|
||||
falseValue: null;
|
||||
value: null;
|
||||
}>>;
|
||||
export type VSelectionControl = InstanceType<typeof VSelectionControl>;
|
||||
Generated
Vendored
+219
@@ -0,0 +1,219 @@
|
||||
import { mergeProps as _mergeProps, createElementVNode as _createElementVNode, Fragment as _Fragment, createVNode as _createVNode, normalizeClass as _normalizeClass, withDirectives as _withDirectives, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Styles
|
||||
import "./VSelectionControl.css";
|
||||
|
||||
// Components
|
||||
import { VIcon } from "../VIcon/index.js";
|
||||
import { VLabel } from "../VLabel/index.js";
|
||||
import { makeSelectionControlGroupProps, VSelectionControlGroupSymbol } from "../VSelectionControlGroup/VSelectionControlGroup.js"; // Composables
|
||||
import { useBackgroundColor, useTextColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { useDensity } from "../../composables/density.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js"; // Directives
|
||||
import vRipple from "../../directives/ripple/index.js"; // Utilities
|
||||
import { computed, inject, nextTick, ref, shallowRef, toRef, useId } from 'vue';
|
||||
import { filterInputAttrs, genericComponent, matchesSelector, propsFactory, useRender, wrapInArray } from "../../util/index.js"; // Types
|
||||
export const makeVSelectionControlProps = propsFactory({
|
||||
label: String,
|
||||
baseColor: String,
|
||||
trueValue: null,
|
||||
falseValue: null,
|
||||
value: null,
|
||||
...makeComponentProps(),
|
||||
...makeSelectionControlGroupProps()
|
||||
}, 'VSelectionControl');
|
||||
export function useSelectionControl(props) {
|
||||
const group = inject(VSelectionControlGroupSymbol, undefined);
|
||||
const {
|
||||
densityClasses
|
||||
} = useDensity(props);
|
||||
const modelValue = useProxiedModel(props, 'modelValue');
|
||||
const trueValue = computed(() => props.trueValue !== undefined ? props.trueValue : props.value !== undefined ? props.value : true);
|
||||
const falseValue = computed(() => props.falseValue !== undefined ? props.falseValue : false);
|
||||
const isMultiple = computed(() => !!props.multiple || props.multiple == null && Array.isArray(modelValue.value));
|
||||
const model = computed({
|
||||
get() {
|
||||
const val = group ? group.modelValue.value : modelValue.value;
|
||||
return isMultiple.value ? wrapInArray(val).some(v => props.valueComparator(v, trueValue.value)) : props.valueComparator(val, trueValue.value);
|
||||
},
|
||||
set(val) {
|
||||
if (props.readonly) return;
|
||||
const currentValue = val ? trueValue.value : falseValue.value;
|
||||
let newVal = currentValue;
|
||||
if (isMultiple.value) {
|
||||
newVal = val ? [...wrapInArray(modelValue.value), currentValue] : wrapInArray(modelValue.value).filter(item => !props.valueComparator(item, trueValue.value));
|
||||
}
|
||||
if (group) {
|
||||
group.modelValue.value = newVal;
|
||||
} else {
|
||||
modelValue.value = newVal;
|
||||
}
|
||||
}
|
||||
});
|
||||
const {
|
||||
textColorClasses,
|
||||
textColorStyles
|
||||
} = useTextColor(() => {
|
||||
if (props.error || props.disabled) return undefined;
|
||||
return model.value ? props.color : props.baseColor;
|
||||
});
|
||||
const {
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles
|
||||
} = useBackgroundColor(() => {
|
||||
return model.value && !props.error && !props.disabled ? props.color : props.baseColor;
|
||||
});
|
||||
const icon = computed(() => model.value ? props.trueIcon : props.falseIcon);
|
||||
return {
|
||||
group,
|
||||
densityClasses,
|
||||
trueValue,
|
||||
falseValue,
|
||||
model,
|
||||
textColorClasses,
|
||||
textColorStyles,
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles,
|
||||
icon
|
||||
};
|
||||
}
|
||||
export const VSelectionControl = genericComponent()({
|
||||
name: 'VSelectionControl',
|
||||
directives: {
|
||||
vRipple
|
||||
},
|
||||
inheritAttrs: false,
|
||||
props: makeVSelectionControlProps(),
|
||||
emits: {
|
||||
'update:modelValue': value => true
|
||||
},
|
||||
setup(props, {
|
||||
attrs,
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
group,
|
||||
densityClasses,
|
||||
icon,
|
||||
model,
|
||||
textColorClasses,
|
||||
textColorStyles,
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles,
|
||||
trueValue
|
||||
} = useSelectionControl(props);
|
||||
const uid = useId();
|
||||
const isFocused = shallowRef(false);
|
||||
const isFocusVisible = shallowRef(false);
|
||||
const input = ref();
|
||||
const id = toRef(() => props.id || `input-${uid}`);
|
||||
const isInteractive = toRef(() => !props.disabled && !props.readonly);
|
||||
group?.onForceUpdate(() => {
|
||||
if (input.value) {
|
||||
input.value.checked = model.value;
|
||||
}
|
||||
});
|
||||
function onFocus(e) {
|
||||
if (props.disabled) return;
|
||||
isFocused.value = true;
|
||||
if (matchesSelector(e.target, ':focus-visible') !== false) {
|
||||
isFocusVisible.value = true;
|
||||
}
|
||||
}
|
||||
function onBlur() {
|
||||
isFocused.value = false;
|
||||
isFocusVisible.value = false;
|
||||
}
|
||||
function onClickLabel(e) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
function onInput(e) {
|
||||
if (!isInteractive.value) {
|
||||
if (input.value) {
|
||||
// model value is not updated when input is not interactive
|
||||
// but the internal checked state of the input is still updated,
|
||||
// so here it's value is restored
|
||||
input.value.checked = model.value;
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (props.readonly && group) {
|
||||
nextTick(() => group.forceUpdate());
|
||||
}
|
||||
model.value = e.target.checked;
|
||||
}
|
||||
useRender(() => {
|
||||
const label = slots.label ? slots.label({
|
||||
label: props.label,
|
||||
props: {
|
||||
for: id.value
|
||||
}
|
||||
}) : props.label;
|
||||
const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
|
||||
const inputNode = _createElementVNode("input", _mergeProps({
|
||||
"ref": input,
|
||||
"checked": model.value,
|
||||
"disabled": !!props.disabled,
|
||||
"id": id.value,
|
||||
"onBlur": onBlur,
|
||||
"onFocus": onFocus,
|
||||
"onInput": onInput,
|
||||
"aria-disabled": !!props.disabled,
|
||||
"aria-label": props.label,
|
||||
"type": props.type,
|
||||
"value": trueValue.value,
|
||||
"name": props.name,
|
||||
"aria-checked": props.type === 'checkbox' ? model.value : undefined
|
||||
}, inputAttrs), null);
|
||||
return _createElementVNode("div", _mergeProps({
|
||||
"class": ['v-selection-control', {
|
||||
'v-selection-control--dirty': model.value,
|
||||
'v-selection-control--disabled': props.disabled,
|
||||
'v-selection-control--error': props.error,
|
||||
'v-selection-control--focused': isFocused.value,
|
||||
'v-selection-control--focus-visible': isFocusVisible.value,
|
||||
'v-selection-control--inline': props.inline
|
||||
}, densityClasses.value, props.class]
|
||||
}, rootAttrs, {
|
||||
"style": props.style
|
||||
}), [_createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-selection-control__wrapper', textColorClasses.value]),
|
||||
"style": _normalizeStyle(textColorStyles.value)
|
||||
}, [slots.default?.({
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles
|
||||
}), _withDirectives(_createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-selection-control__input'])
|
||||
}, [slots.input?.({
|
||||
model,
|
||||
textColorClasses,
|
||||
textColorStyles,
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles,
|
||||
inputNode,
|
||||
icon: icon.value,
|
||||
props: {
|
||||
onFocus,
|
||||
onBlur,
|
||||
id: id.value
|
||||
}
|
||||
}) ?? _createElementVNode(_Fragment, null, [icon.value && _createVNode(VIcon, {
|
||||
"key": "icon",
|
||||
"icon": icon.value
|
||||
}, null), inputNode])]), [[vRipple, !props.disabled && !props.readonly && props.ripple, null, {
|
||||
center: true,
|
||||
circle: true
|
||||
}]])]), label && _createVNode(VLabel, {
|
||||
"for": id.value,
|
||||
"onClick": onClickLabel
|
||||
}, {
|
||||
default: () => [label]
|
||||
})]);
|
||||
});
|
||||
return {
|
||||
isFocused,
|
||||
input
|
||||
};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VSelectionControl.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+96
@@ -0,0 +1,96 @@
|
||||
@use 'sass:map'
|
||||
@use 'sass:list'
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-selection-control
|
||||
align-items: center
|
||||
contain: layout
|
||||
display: flex
|
||||
flex: 1 0
|
||||
grid-area: control
|
||||
position: relative
|
||||
user-select: none
|
||||
|
||||
.v-label
|
||||
white-space: normal
|
||||
word-break: break-word
|
||||
height: 100%
|
||||
opacity: 1
|
||||
|
||||
&--disabled
|
||||
opacity: var(--v-disabled-opacity)
|
||||
pointer-events: none
|
||||
|
||||
&--error:not(.v-selection-control--disabled)
|
||||
.v-label
|
||||
color: rgb(var(--v-theme-error))
|
||||
|
||||
&--inline
|
||||
display: inline-flex
|
||||
flex: 0 0 auto
|
||||
min-width: 0
|
||||
max-width: 100%
|
||||
|
||||
.v-label
|
||||
width: auto
|
||||
|
||||
@at-root
|
||||
@include tools.density('v-selection-control', $selection-control-density) using ($modifier)
|
||||
--v-selection-control-size: #{$selection-control-size + $modifier}
|
||||
|
||||
.v-selection-control__wrapper
|
||||
width: var(--v-selection-control-size)
|
||||
height: var(--v-selection-control-size)
|
||||
display: inline-flex
|
||||
align-items: center
|
||||
position: relative
|
||||
justify-content: center
|
||||
flex: none
|
||||
|
||||
.v-selection-control__input
|
||||
width: var(--v-selection-control-size)
|
||||
height: var(--v-selection-control-size)
|
||||
align-items: center
|
||||
display: flex
|
||||
flex: none
|
||||
justify-content: center
|
||||
position: relative
|
||||
border-radius: 50%
|
||||
|
||||
input
|
||||
cursor: pointer
|
||||
position: absolute
|
||||
left: 0
|
||||
top: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
opacity: 0
|
||||
|
||||
&::before
|
||||
border-radius: 100%
|
||||
background-color: currentColor
|
||||
opacity: 0
|
||||
pointer-events: none
|
||||
@include tools.absolute(true)
|
||||
|
||||
&:hover::before
|
||||
opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier))
|
||||
|
||||
> .v-icon
|
||||
opacity: var(--v-medium-emphasis-opacity)
|
||||
|
||||
.v-selection-control--disabled &,
|
||||
.v-selection-control--dirty &,
|
||||
.v-selection-control--error &
|
||||
> .v-icon
|
||||
opacity: 1
|
||||
|
||||
.v-selection-control--error:not(.v-selection-control--disabled) &
|
||||
> .v-icon
|
||||
color: rgb(var(--v-theme-error))
|
||||
|
||||
.v-selection-control--focus-visible &::before
|
||||
opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier))
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
@use 'sass:map';
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
|
||||
// VSelectionControl
|
||||
$selection-control-disabled-color: tools.theme-color('on-surface', var(--v-disabled-opacity)) !default;
|
||||
$selection-control-error-color: rgb(var(--v-theme-error)) !default;
|
||||
$selection-control-density: ('default': 0, 'comfortable': -1, 'compact': -3) !default;
|
||||
$selection-control-color: tools.theme-color('on-surface', var(--v-high-emphasis-opacity)) !default;
|
||||
$selection-control-size: 40px !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VSelectionControl } from './VSelectionControl.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VSelectionControl } from "./VSelectionControl.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VSelectionControl"],"sources":["../../../src/components/VSelectionControl/index.ts"],"sourcesContent":["export { VSelectionControl } from './VSelectionControl'\n"],"mappings":"SAASA,iBAAiB","ignoreList":[]}
|
||||
Reference in New Issue
Block a user