routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+8
@@ -0,0 +1,8 @@
|
||||
@layer vuetify-components {
|
||||
.v-checkbox.v-input {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
.v-checkbox .v-selection-control {
|
||||
min-height: var(--v-input-control-height);
|
||||
}
|
||||
}
|
||||
+1656
File diff suppressed because it is too large
Load Diff
+75
@@ -0,0 +1,75 @@
|
||||
import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
|
||||
// Styles
|
||||
import "./VCheckbox.css";
|
||||
|
||||
// Components
|
||||
import { makeVCheckboxBtnProps, VCheckboxBtn } from "./VCheckboxBtn.js";
|
||||
import { makeVInputProps, VInput } from "../VInput/VInput.js"; // Composables
|
||||
import { useFocus } from "../../composables/focus.js";
|
||||
import { forwardRefs } from "../../composables/forwardRefs.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js"; // Utilities
|
||||
import { ref, useId } from 'vue';
|
||||
import { filterInputAttrs, genericComponent, omit, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVCheckboxProps = propsFactory({
|
||||
...omit(makeVInputProps(), ['direction']),
|
||||
...omit(makeVCheckboxBtnProps(), ['inline'])
|
||||
}, 'VCheckbox');
|
||||
export const VCheckbox = genericComponent()({
|
||||
name: 'VCheckbox',
|
||||
inheritAttrs: false,
|
||||
props: makeVCheckboxProps(),
|
||||
emits: {
|
||||
'update:modelValue': value => true,
|
||||
'update:focused': focused => true
|
||||
},
|
||||
setup(props, {
|
||||
attrs,
|
||||
slots
|
||||
}) {
|
||||
const model = useProxiedModel(props, 'modelValue');
|
||||
const {
|
||||
isFocused,
|
||||
focus,
|
||||
blur
|
||||
} = useFocus(props);
|
||||
const inputRef = ref();
|
||||
const uid = useId();
|
||||
useRender(() => {
|
||||
const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
|
||||
const inputProps = VInput.filterProps(props);
|
||||
const checkboxProps = VCheckboxBtn.filterProps(props);
|
||||
return _createVNode(VInput, _mergeProps({
|
||||
"ref": inputRef,
|
||||
"class": ['v-checkbox', props.class]
|
||||
}, rootAttrs, inputProps, {
|
||||
"modelValue": model.value,
|
||||
"onUpdate:modelValue": $event => model.value = $event,
|
||||
"id": props.id || `checkbox-${uid}`,
|
||||
"focused": isFocused.value,
|
||||
"style": props.style
|
||||
}), {
|
||||
...slots,
|
||||
default: ({
|
||||
id,
|
||||
messagesId,
|
||||
isDisabled,
|
||||
isReadonly,
|
||||
isValid
|
||||
}) => _createVNode(VCheckboxBtn, _mergeProps(checkboxProps, {
|
||||
"id": id.value,
|
||||
"aria-describedby": messagesId.value,
|
||||
"disabled": isDisabled.value,
|
||||
"readonly": isReadonly.value
|
||||
}, controlAttrs, {
|
||||
"error": isValid.value === false,
|
||||
"modelValue": model.value,
|
||||
"onUpdate:modelValue": $event => model.value = $event,
|
||||
"onFocus": focus,
|
||||
"onBlur": blur
|
||||
}), slots)
|
||||
});
|
||||
});
|
||||
return forwardRefs({}, inputRef);
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VCheckbox.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+12
@@ -0,0 +1,12 @@
|
||||
@use 'sass:map'
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-checkbox
|
||||
&.v-input
|
||||
flex: $checkbox-flex
|
||||
|
||||
.v-selection-control
|
||||
min-height: var(--v-input-control-height)
|
||||
+540
@@ -0,0 +1,540 @@
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
import type { VSelectionControlSlots } from '../VSelectionControl/VSelectionControl.js';
|
||||
import type { GenericProps } from '../../util/index.js';
|
||||
export declare const makeVCheckboxBtnProps: <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;
|
||||
indeterminate?: unknown;
|
||||
indeterminateIcon?: 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"] ? {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: NonNullable<IconValue>;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: NonNullable<IconValue>;
|
||||
}, "default" | "type"> & {
|
||||
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"] ? {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: NonNullable<IconValue>;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: NonNullable<IconValue>;
|
||||
}, "default" | "type"> & {
|
||||
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;
|
||||
};
|
||||
indeterminate: unknown extends Defaults["indeterminate"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["indeterminate"] ? boolean : boolean | Defaults["indeterminate"]>;
|
||||
default: unknown extends Defaults["indeterminate"] ? boolean : boolean | Defaults["indeterminate"];
|
||||
};
|
||||
indeterminateIcon: unknown extends Defaults["indeterminateIcon"] ? {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["indeterminateIcon"] ? IconValue : Defaults["indeterminateIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["indeterminateIcon"] ? IconValue : Defaults["indeterminateIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
};
|
||||
export declare const VCheckboxBtn: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
disabled: boolean | null;
|
||||
error: boolean;
|
||||
inline: boolean;
|
||||
falseIcon: IconValue;
|
||||
trueIcon: IconValue;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
multiple: boolean | null;
|
||||
readonly: boolean | null;
|
||||
valueComparator: import("../../util/index.js").ValueComparator;
|
||||
indeterminate: boolean;
|
||||
indeterminateIcon: IconValue;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
color?: string | undefined;
|
||||
defaultsTarget?: string | undefined;
|
||||
id?: string | undefined;
|
||||
name?: string | undefined;
|
||||
type?: string | undefined;
|
||||
label?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
trueValue?: any;
|
||||
falseValue?: any;
|
||||
value?: any;
|
||||
} & {
|
||||
"onUpdate:indeterminate"?: ((value: boolean) => any) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:modelValue': (value: any) => true;
|
||||
'update:indeterminate': (value: boolean) => 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;
|
||||
falseIcon: IconValue;
|
||||
trueIcon: IconValue;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
multiple: boolean | null;
|
||||
readonly: boolean | null;
|
||||
valueComparator: import("../../util/index.js").ValueComparator;
|
||||
indeterminate: boolean;
|
||||
indeterminateIcon: IconValue;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: (arg: {
|
||||
backgroundColorClasses: import("vue").Ref<string[], string[]>;
|
||||
backgroundColorStyles: import("vue").Ref<import("vue").CSSProperties, import("vue").CSSProperties>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
label: (arg: {
|
||||
label: string | undefined;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
input: (arg: import("../VSelectionControl/VSelectionControl.js").SelectionControlSlot) => 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;
|
||||
disabled: boolean | null;
|
||||
error: boolean;
|
||||
inline: boolean;
|
||||
falseIcon: IconValue;
|
||||
trueIcon: IconValue;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
multiple: boolean | null;
|
||||
readonly: boolean | null;
|
||||
valueComparator: import("../../util/index.js").ValueComparator;
|
||||
indeterminate: boolean;
|
||||
indeterminateIcon: IconValue;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
color?: string | undefined;
|
||||
defaultsTarget?: string | undefined;
|
||||
id?: string | undefined;
|
||||
name?: string | undefined;
|
||||
type?: string | undefined;
|
||||
label?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
trueValue?: any;
|
||||
falseValue?: any;
|
||||
value?: any;
|
||||
} & {
|
||||
"onUpdate:indeterminate"?: ((value: boolean) => any) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
disabled: boolean | null;
|
||||
error: boolean;
|
||||
inline: boolean;
|
||||
falseIcon: IconValue;
|
||||
trueIcon: IconValue;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
multiple: boolean | null;
|
||||
readonly: boolean | null;
|
||||
valueComparator: import("../../util/index.js").ValueComparator;
|
||||
indeterminate: boolean;
|
||||
indeterminateIcon: IconValue;
|
||||
}>;
|
||||
__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;
|
||||
disabled: boolean | null;
|
||||
error: boolean;
|
||||
inline: boolean;
|
||||
falseIcon: IconValue;
|
||||
trueIcon: IconValue;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
multiple: boolean | null;
|
||||
readonly: boolean | null;
|
||||
valueComparator: import("../../util/index.js").ValueComparator;
|
||||
indeterminate: boolean;
|
||||
indeterminateIcon: IconValue;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
color?: string | undefined;
|
||||
defaultsTarget?: string | undefined;
|
||||
id?: string | undefined;
|
||||
name?: string | undefined;
|
||||
type?: string | undefined;
|
||||
label?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
trueValue?: any;
|
||||
falseValue?: any;
|
||||
value?: any;
|
||||
} & {
|
||||
"onUpdate:indeterminate"?: ((value: boolean) => any) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:modelValue': (value: any) => true;
|
||||
'update:indeterminate': (value: boolean) => 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;
|
||||
falseIcon: IconValue;
|
||||
trueIcon: IconValue;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
multiple: boolean | null;
|
||||
readonly: boolean | null;
|
||||
valueComparator: import("../../util/index.js").ValueComparator;
|
||||
indeterminate: boolean;
|
||||
indeterminateIcon: IconValue;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: (arg: {
|
||||
backgroundColorClasses: import("vue").Ref<string[], string[]>;
|
||||
backgroundColorStyles: import("vue").Ref<import("vue").CSSProperties, import("vue").CSSProperties>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
label: (arg: {
|
||||
label: string | undefined;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
input: (arg: import("../VSelectionControl/VSelectionControl.js").SelectionControlSlot) => 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: 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: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: NonNullable<IconValue>;
|
||||
};
|
||||
trueIcon: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: NonNullable<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;
|
||||
indeterminate: BooleanConstructor;
|
||||
indeterminateIcon: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
}, import("vue").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: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: NonNullable<IconValue>;
|
||||
};
|
||||
trueIcon: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: NonNullable<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;
|
||||
indeterminate: BooleanConstructor;
|
||||
indeterminateIcon: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
}>>;
|
||||
export type VCheckboxBtn = InstanceType<typeof VCheckboxBtn>;
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
|
||||
// Components
|
||||
import { makeVSelectionControlProps, VSelectionControl } from "../VSelectionControl/VSelectionControl.js"; // Composables
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js"; // Utilities
|
||||
import { toRef } from 'vue';
|
||||
import { genericComponent, omit, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVCheckboxBtnProps = propsFactory({
|
||||
indeterminate: Boolean,
|
||||
indeterminateIcon: {
|
||||
type: IconValue,
|
||||
default: '$checkboxIndeterminate'
|
||||
},
|
||||
...makeVSelectionControlProps({
|
||||
falseIcon: '$checkboxOff',
|
||||
trueIcon: '$checkboxOn'
|
||||
})
|
||||
}, 'VCheckboxBtn');
|
||||
export const VCheckboxBtn = genericComponent()({
|
||||
name: 'VCheckboxBtn',
|
||||
props: makeVCheckboxBtnProps(),
|
||||
emits: {
|
||||
'update:modelValue': value => true,
|
||||
'update:indeterminate': value => true
|
||||
},
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const indeterminate = useProxiedModel(props, 'indeterminate');
|
||||
const model = useProxiedModel(props, 'modelValue');
|
||||
function onChange(v) {
|
||||
if (indeterminate.value) {
|
||||
indeterminate.value = false;
|
||||
}
|
||||
}
|
||||
const falseIcon = toRef(() => {
|
||||
return indeterminate.value ? props.indeterminateIcon : props.falseIcon;
|
||||
});
|
||||
const trueIcon = toRef(() => {
|
||||
return indeterminate.value ? props.indeterminateIcon : props.trueIcon;
|
||||
});
|
||||
useRender(() => {
|
||||
const controlProps = omit(VSelectionControl.filterProps(props), ['modelValue']);
|
||||
return _createVNode(VSelectionControl, _mergeProps(controlProps, {
|
||||
"modelValue": model.value,
|
||||
"onUpdate:modelValue": [$event => model.value = $event, onChange],
|
||||
"class": ['v-checkbox-btn', props.class],
|
||||
"style": props.style,
|
||||
"type": "checkbox",
|
||||
"falseIcon": falseIcon.value,
|
||||
"trueIcon": trueIcon.value,
|
||||
"aria-checked": indeterminate.value ? 'mixed' : undefined
|
||||
}), slots);
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VCheckboxBtn.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VCheckboxBtn.js","names":["makeVSelectionControlProps","VSelectionControl","IconValue","useProxiedModel","toRef","genericComponent","omit","propsFactory","useRender","makeVCheckboxBtnProps","indeterminate","Boolean","indeterminateIcon","type","default","falseIcon","trueIcon","VCheckboxBtn","name","props","emits","value","setup","slots","model","onChange","v","controlProps","filterProps","_createVNode","_mergeProps","$event","class","style","undefined"],"sources":["../../../src/components/VCheckbox/VCheckboxBtn.tsx"],"sourcesContent":["// Components\nimport { makeVSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { toRef } from 'vue'\nimport { genericComponent, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'\nimport type { GenericProps } from '@/util'\n\nexport const makeVCheckboxBtnProps = propsFactory({\n indeterminate: Boolean,\n indeterminateIcon: {\n type: IconValue,\n default: '$checkboxIndeterminate',\n },\n\n ...makeVSelectionControlProps({\n falseIcon: '$checkboxOff',\n trueIcon: '$checkboxOn',\n }),\n}, 'VCheckboxBtn')\n\nexport const VCheckboxBtn = genericComponent<new <T>(\n props: {\n modelValue?: T\n 'onUpdate:modelValue'?: (value: T) => void\n },\n slots: VSelectionControlSlots,\n) => GenericProps<typeof props, typeof slots>>()({\n name: 'VCheckboxBtn',\n\n props: makeVCheckboxBtnProps(),\n\n emits: {\n 'update:modelValue': (value: any) => true,\n 'update:indeterminate': (value: boolean) => true,\n },\n\n setup (props, { slots }) {\n const indeterminate = useProxiedModel(props, 'indeterminate')\n const model = useProxiedModel(props, 'modelValue')\n\n function onChange (v: any) {\n if (indeterminate.value) {\n indeterminate.value = false\n }\n }\n\n const falseIcon = toRef(() => {\n return indeterminate.value\n ? props.indeterminateIcon\n : props.falseIcon\n })\n\n const trueIcon = toRef(() => {\n return indeterminate.value\n ? props.indeterminateIcon\n : props.trueIcon\n })\n\n useRender(() => {\n const controlProps = omit(VSelectionControl.filterProps(props), ['modelValue'])\n return (\n <VSelectionControl\n { ...controlProps }\n v-model={ model.value }\n class={[\n 'v-checkbox-btn',\n props.class,\n ]}\n style={ props.style }\n type=\"checkbox\"\n onUpdate:modelValue={ onChange }\n falseIcon={ falseIcon.value }\n trueIcon={ trueIcon.value }\n aria-checked={ indeterminate.value ? 'mixed' : undefined }\n v-slots={ slots }\n />\n )\n })\n\n return {}\n },\n})\n\nexport type VCheckboxBtn = InstanceType<typeof VCheckboxBtn>\n"],"mappings":";AAAA;AAAA,SACSA,0BAA0B,EAAEC,iBAAiB,qDAEtD;AAAA,SACSC,SAAS;AAAA,SACTC,eAAe,6CAExB;AACA,SAASC,KAAK,QAAQ,KAAK;AAAA,SAClBC,gBAAgB,EAAEC,IAAI,EAAEC,YAAY,EAAEC,SAAS,+BAExD;AAIA,OAAO,MAAMC,qBAAqB,GAAGF,YAAY,CAAC;EAChDG,aAAa,EAAEC,OAAO;EACtBC,iBAAiB,EAAE;IACjBC,IAAI,EAAEX,SAAS;IACfY,OAAO,EAAE;EACX,CAAC;EAED,GAAGd,0BAA0B,CAAC;IAC5Be,SAAS,EAAE,cAAc;IACzBC,QAAQ,EAAE;EACZ,CAAC;AACH,CAAC,EAAE,cAAc,CAAC;AAElB,OAAO,MAAMC,YAAY,GAAGZ,gBAAgB,CAMG,CAAC,CAAC;EAC/Ca,IAAI,EAAE,cAAc;EAEpBC,KAAK,EAAEV,qBAAqB,CAAC,CAAC;EAE9BW,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAU,IAAK,IAAI;IACzC,sBAAsB,EAAGA,KAAc,IAAK;EAC9C,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAE;IAAEI;EAAM,CAAC,EAAE;IACvB,MAAMb,aAAa,GAAGP,eAAe,CAACgB,KAAK,EAAE,eAAe,CAAC;IAC7D,MAAMK,KAAK,GAAGrB,eAAe,CAACgB,KAAK,EAAE,YAAY,CAAC;IAElD,SAASM,QAAQA,CAAEC,CAAM,EAAE;MACzB,IAAIhB,aAAa,CAACW,KAAK,EAAE;QACvBX,aAAa,CAACW,KAAK,GAAG,KAAK;MAC7B;IACF;IAEA,MAAMN,SAAS,GAAGX,KAAK,CAAC,MAAM;MAC5B,OAAOM,aAAa,CAACW,KAAK,GACtBF,KAAK,CAACP,iBAAiB,GACvBO,KAAK,CAACJ,SAAS;IACrB,CAAC,CAAC;IAEF,MAAMC,QAAQ,GAAGZ,KAAK,CAAC,MAAM;MAC3B,OAAOM,aAAa,CAACW,KAAK,GACtBF,KAAK,CAACP,iBAAiB,GACvBO,KAAK,CAACH,QAAQ;IACpB,CAAC,CAAC;IAEFR,SAAS,CAAC,MAAM;MACd,MAAMmB,YAAY,GAAGrB,IAAI,CAACL,iBAAiB,CAAC2B,WAAW,CAACT,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;MAC/E,OAAAU,YAAA,CAAA5B,iBAAA,EAAA6B,WAAA,CAESH,YAAY;QAAA,cACPH,KAAK,CAACH,KAAK;QAAA,wBAAAU,MAAA,IAAXP,KAAK,CAACH,KAAK,GAAAU,MAAA,EAOCN,QAAQ;QAAA,SANvB,CACL,gBAAgB,EAChBN,KAAK,CAACa,KAAK,CACZ;QAAA,SACOb,KAAK,CAACc,KAAK;QAAA;QAAA,aAGPlB,SAAS,CAACM,KAAK;QAAA,YAChBL,QAAQ,CAACK,KAAK;QAAA,gBACVX,aAAa,CAACW,KAAK,GAAG,OAAO,GAAGa;MAAS,IAC9CX,KAAK;IAGrB,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
|
||||
$checkbox-flex: 0 1 auto !default;
|
||||
$checkbox-disabled-color: tools.theme-color('on-surface', var(--v-disabled-opacity)) !default;
|
||||
$checkbox-error-color: rgb(var(--v-theme-error)) !default;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VCheckbox } from './VCheckbox.js';
|
||||
export { VCheckboxBtn } from './VCheckboxBtn.js';
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
export { VCheckbox } from "./VCheckbox.js";
|
||||
export { VCheckboxBtn } from "./VCheckboxBtn.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VCheckbox","VCheckboxBtn"],"sources":["../../../src/components/VCheckbox/index.ts"],"sourcesContent":["export { VCheckbox } from './VCheckbox'\nexport { VCheckboxBtn } from './VCheckboxBtn'\n"],"mappings":"SAASA,SAAS;AAAA,SACTC,YAAY","ignoreList":[]}
|
||||
Reference in New Issue
Block a user