routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+208
@@ -0,0 +1,208 @@
|
||||
export declare const VItem: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
disabled: boolean;
|
||||
} & {
|
||||
value?: any;
|
||||
selectedClass?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean | undefined;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean | undefined;
|
||||
}) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean | undefined;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean | undefined;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onGroup:selected"?: ((val: {
|
||||
value: boolean;
|
||||
}) => any) | undefined;
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'group:selected': (val: {
|
||||
value: boolean;
|
||||
}) => true;
|
||||
}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
disabled: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: (arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean | undefined;
|
||||
}) => 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: {};
|
||||
}, {
|
||||
disabled: boolean;
|
||||
} & {
|
||||
value?: any;
|
||||
selectedClass?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean | undefined;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean | undefined;
|
||||
}) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean | undefined;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean | undefined;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onGroup:selected"?: ((val: {
|
||||
value: boolean;
|
||||
}) => any) | undefined;
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[] | undefined, {}, {}, {}, {
|
||||
disabled: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
disabled: boolean;
|
||||
} & {
|
||||
value?: any;
|
||||
selectedClass?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean | undefined;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean | undefined;
|
||||
}) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean | undefined;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | ((arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean | undefined;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
"onGroup:selected"?: ((val: {
|
||||
value: boolean;
|
||||
}) => any) | undefined;
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'group:selected': (val: {
|
||||
value: boolean;
|
||||
}) => true;
|
||||
}, string, {
|
||||
disabled: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: (arg: {
|
||||
isSelected: boolean | undefined;
|
||||
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||
select: ((value: boolean) => void) | undefined;
|
||||
toggle: (() => void) | undefined;
|
||||
value: unknown;
|
||||
disabled: boolean | undefined;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
value: null;
|
||||
disabled: BooleanConstructor;
|
||||
selectedClass: StringConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
value: null;
|
||||
disabled: BooleanConstructor;
|
||||
selectedClass: StringConstructor;
|
||||
}>>;
|
||||
export type VItem = InstanceType<typeof VItem>;
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
// Composables
|
||||
import { VItemGroupSymbol } from "./VItemGroup.js";
|
||||
import { makeGroupItemProps, useGroupItem } from "../../composables/group.js"; // Utilities
|
||||
import { genericComponent } from "../../util/index.js";
|
||||
export const VItem = genericComponent()({
|
||||
name: 'VItem',
|
||||
props: makeGroupItemProps(),
|
||||
emits: {
|
||||
'group:selected': val => true
|
||||
},
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
isSelected,
|
||||
select,
|
||||
toggle,
|
||||
selectedClass,
|
||||
value,
|
||||
disabled
|
||||
} = useGroupItem(props, VItemGroupSymbol);
|
||||
return () => slots.default?.({
|
||||
isSelected: isSelected.value,
|
||||
selectedClass: selectedClass.value,
|
||||
select,
|
||||
toggle,
|
||||
value: value.value,
|
||||
disabled: disabled.value
|
||||
});
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VItem.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VItem.js","names":["VItemGroupSymbol","makeGroupItemProps","useGroupItem","genericComponent","VItem","name","props","emits","val","setup","slots","isSelected","select","toggle","selectedClass","value","disabled","default"],"sources":["../../../src/components/VItemGroup/VItem.tsx"],"sourcesContent":["// Composables\nimport { VItemGroupSymbol } from './VItemGroup'\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\n\n// Utilities\nimport { genericComponent } from '@/util'\n\ntype VItemSlots = {\n default: {\n isSelected: boolean | undefined\n selectedClass: boolean | (string | undefined)[] | undefined\n select: ((value: boolean) => void) | undefined\n toggle: (() => void) | undefined\n value: unknown\n disabled: boolean | undefined\n }\n}\n\nexport const VItem = genericComponent<VItemSlots>()({\n name: 'VItem',\n\n props: makeGroupItemProps(),\n\n emits: {\n 'group:selected': (val: { value: boolean }) => true,\n },\n\n setup (props, { slots }) {\n const { isSelected, select, toggle, selectedClass, value, disabled } = useGroupItem(props, VItemGroupSymbol)\n return () => slots.default?.({\n isSelected: isSelected.value,\n selectedClass: selectedClass.value,\n select,\n toggle,\n value: value.value,\n disabled: disabled.value,\n })\n },\n})\n\nexport type VItem = InstanceType<typeof VItem>\n"],"mappings":"AAAA;AAAA,SACSA,gBAAgB;AAAA,SAChBC,kBAAkB,EAAEC,YAAY,sCAEzC;AAAA,SACSC,gBAAgB;AAazB,OAAO,MAAMC,KAAK,GAAGD,gBAAgB,CAAa,CAAC,CAAC;EAClDE,IAAI,EAAE,OAAO;EAEbC,KAAK,EAAEL,kBAAkB,CAAC,CAAC;EAE3BM,KAAK,EAAE;IACL,gBAAgB,EAAGC,GAAuB,IAAK;EACjD,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAE;IAAEI;EAAM,CAAC,EAAE;IACvB,MAAM;MAAEC,UAAU;MAAEC,MAAM;MAAEC,MAAM;MAAEC,aAAa;MAAEC,KAAK;MAAEC;IAAS,CAAC,GAAGd,YAAY,CAACI,KAAK,EAAEN,gBAAgB,CAAC;IAC5G,OAAO,MAAMU,KAAK,CAACO,OAAO,GAAG;MAC3BN,UAAU,EAAEA,UAAU,CAACI,KAAK;MAC5BD,aAAa,EAAEA,aAAa,CAACC,KAAK;MAClCH,MAAM;MACNC,MAAM;MACNE,KAAK,EAAEA,KAAK,CAACA,KAAK;MAClBC,QAAQ,EAAEA,QAAQ,CAACD;IACrB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
@layer vuetify-components {
|
||||
.v-item-group {
|
||||
flex: 0 1 auto;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
+228
@@ -0,0 +1,228 @@
|
||||
|
||||
import type { GenericProps } from '../../util/index.js';
|
||||
export declare const VItemGroupSymbol: unique symbol;
|
||||
export declare const makeVItemGroupProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
tag?: 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>;
|
||||
};
|
||||
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>;
|
||||
};
|
||||
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"] ? {
|
||||
type: import("vue").PropType<string>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<string>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
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"];
|
||||
};
|
||||
};
|
||||
type VItemGroupSlots = {
|
||||
default: {
|
||||
isSelected: (id: string) => boolean;
|
||||
select: (id: string, value: boolean) => void;
|
||||
next: () => void;
|
||||
prev: () => void;
|
||||
selected: readonly string[];
|
||||
};
|
||||
};
|
||||
export declare const VItemGroup: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
mandatory?: "force" | boolean | undefined;
|
||||
max?: number | undefined;
|
||||
} & {}, () => JSX.Element, 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;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: (arg: {
|
||||
isSelected: (id: string) => boolean;
|
||||
select: (id: string, value: boolean) => void;
|
||||
next: () => void;
|
||||
prev: () => void;
|
||||
selected: readonly string[];
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
mandatory?: "force" | boolean | undefined;
|
||||
max?: number | undefined;
|
||||
} & {}, () => JSX.Element, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
mandatory?: "force" | boolean | undefined;
|
||||
max?: number | undefined;
|
||||
} & {}, () => JSX.Element, 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;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
multiple: boolean;
|
||||
selectedClass: string;
|
||||
disabled: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: (arg: {
|
||||
isSelected: (id: string) => boolean;
|
||||
select: (id: string, value: boolean) => void;
|
||||
next: () => void;
|
||||
prev: () => void;
|
||||
selected: readonly string[];
|
||||
}) => 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: VItemGroupSlots) => 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;
|
||||
};
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
modelValue: {
|
||||
type: null;
|
||||
default: undefined;
|
||||
};
|
||||
multiple: BooleanConstructor;
|
||||
mandatory: import("vue").PropType<"force" | boolean>;
|
||||
max: NumberConstructor;
|
||||
selectedClass: {
|
||||
type: import("vue").PropType<string>;
|
||||
default: string;
|
||||
};
|
||||
disabled: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: {
|
||||
type: import("vue").PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
modelValue: {
|
||||
type: null;
|
||||
default: undefined;
|
||||
};
|
||||
multiple: BooleanConstructor;
|
||||
mandatory: import("vue").PropType<"force" | boolean>;
|
||||
max: NumberConstructor;
|
||||
selectedClass: {
|
||||
type: import("vue").PropType<string>;
|
||||
default: string;
|
||||
};
|
||||
disabled: BooleanConstructor;
|
||||
}>>;
|
||||
export type VItemGroup = InstanceType<typeof VItemGroup>;
|
||||
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
|
||||
// Styles
|
||||
import "./VItemGroup.css";
|
||||
|
||||
// Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeGroupProps, useGroup } from "../../composables/group.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Utilities
|
||||
import { genericComponent, propsFactory } from "../../util/index.js"; // Types
|
||||
export const VItemGroupSymbol = Symbol.for('vuetify:v-item-group');
|
||||
export const makeVItemGroupProps = propsFactory({
|
||||
...makeComponentProps(),
|
||||
...makeGroupProps({
|
||||
selectedClass: 'v-item--selected'
|
||||
}),
|
||||
...makeTagProps(),
|
||||
...makeThemeProps()
|
||||
}, 'VItemGroup');
|
||||
export const VItemGroup = genericComponent()({
|
||||
name: 'VItemGroup',
|
||||
props: makeVItemGroupProps(),
|
||||
emits: {
|
||||
'update:modelValue': value => true
|
||||
},
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
isSelected,
|
||||
select,
|
||||
next,
|
||||
prev,
|
||||
selected
|
||||
} = useGroup(props, VItemGroupSymbol);
|
||||
return () => _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-item-group', themeClasses.value, props.class]),
|
||||
"style": _normalizeStyle(props.style)
|
||||
}, {
|
||||
default: () => [slots.default?.({
|
||||
isSelected,
|
||||
select,
|
||||
next,
|
||||
prev,
|
||||
selected: selected.value
|
||||
})]
|
||||
});
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VItemGroup.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VItemGroup.js","names":["makeComponentProps","makeGroupProps","useGroup","makeTagProps","makeThemeProps","provideTheme","genericComponent","propsFactory","VItemGroupSymbol","Symbol","for","makeVItemGroupProps","selectedClass","VItemGroup","name","props","emits","value","setup","slots","themeClasses","isSelected","select","next","prev","selected","_createVNode","tag","_normalizeClass","class","_normalizeStyle","style","default"],"sources":["../../../src/components/VItemGroup/VItemGroup.tsx"],"sourcesContent":["// Styles\nimport './VItemGroup.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeGroupProps, useGroup } from '@/composables/group'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { genericComponent, propsFactory } from '@/util'\n\n// Types\nimport type { GenericProps } from '@/util'\n\nexport const VItemGroupSymbol = Symbol.for('vuetify:v-item-group')\n\nexport const makeVItemGroupProps = propsFactory({\n ...makeComponentProps(),\n ...makeGroupProps({\n selectedClass: 'v-item--selected',\n }),\n ...makeTagProps(),\n ...makeThemeProps(),\n}, 'VItemGroup')\n\ntype VItemGroupSlots = {\n default: {\n isSelected: (id: string) => boolean\n select: (id: string, value: boolean) => void\n next: () => void\n prev: () => void\n selected: readonly string[]\n }\n}\n\nexport const VItemGroup = genericComponent<new <T>(\n props: {\n modelValue?: T\n 'onUpdate:modelValue'?: (value: T) => void\n },\n slots: VItemGroupSlots,\n) => GenericProps<typeof props, typeof slots>>()({\n name: 'VItemGroup',\n\n props: makeVItemGroupProps(),\n\n emits: {\n 'update:modelValue': (value: any) => true,\n },\n\n setup (props, { slots }) {\n const { themeClasses } = provideTheme(props)\n const { isSelected, select, next, prev, selected } = useGroup(props, VItemGroupSymbol)\n\n return () => (\n <props.tag\n class={[\n 'v-item-group',\n themeClasses.value,\n props.class,\n ]}\n style={ props.style }\n >\n { slots.default?.({\n isSelected,\n select,\n next,\n prev,\n selected: selected.value,\n })}\n </props.tag>\n )\n },\n})\n\nexport type VItemGroup = InstanceType<typeof VItemGroup>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,cAAc,EAAEC,QAAQ;AAAA,SACxBC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY,sCAErC;AAAA,SACSC,gBAAgB,EAAEC,YAAY,+BAEvC;AAGA,OAAO,MAAMC,gBAAgB,GAAGC,MAAM,CAACC,GAAG,CAAC,sBAAsB,CAAC;AAElE,OAAO,MAAMC,mBAAmB,GAAGJ,YAAY,CAAC;EAC9C,GAAGP,kBAAkB,CAAC,CAAC;EACvB,GAAGC,cAAc,CAAC;IAChBW,aAAa,EAAE;EACjB,CAAC,CAAC;EACF,GAAGT,YAAY,CAAC,CAAC;EACjB,GAAGC,cAAc,CAAC;AACpB,CAAC,EAAE,YAAY,CAAC;AAYhB,OAAO,MAAMS,UAAU,GAAGP,gBAAgB,CAMK,CAAC,CAAC;EAC/CQ,IAAI,EAAE,YAAY;EAElBC,KAAK,EAAEJ,mBAAmB,CAAC,CAAC;EAE5BK,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAU,IAAK;EACvC,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAE;IAAEI;EAAM,CAAC,EAAE;IACvB,MAAM;MAAEC;IAAa,CAAC,GAAGf,YAAY,CAACU,KAAK,CAAC;IAC5C,MAAM;MAAEM,UAAU;MAAEC,MAAM;MAAEC,IAAI;MAAEC,IAAI;MAAEC;IAAS,CAAC,GAAGvB,QAAQ,CAACa,KAAK,EAAEP,gBAAgB,CAAC;IAEtF,OAAO,MAAAkB,YAAA,CAAAX,KAAA,CAAAY,GAAA;MAAA,SAAAC,eAAA,CAEI,CACL,cAAc,EACdR,YAAY,CAACH,KAAK,EAClBF,KAAK,CAACc,KAAK,CACZ;MAAA,SAAAC,eAAA,CACOf,KAAK,CAACgB,KAAK;IAAA;MAAAC,OAAA,EAAAA,CAAA,MAEjBb,KAAK,CAACa,OAAO,GAAG;QAChBX,UAAU;QACVC,MAAM;QACNC,IAAI;QACJC,IAAI;QACJC,QAAQ,EAAEA,QAAQ,CAACR;MACrB,CAAC,CAAC;IAAA,EAEL;EACH;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-item-group
|
||||
flex: 0 1 auto
|
||||
max-width: 100%
|
||||
position: relative
|
||||
transition: $item-group-transition
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
@use '../../styles/settings';
|
||||
|
||||
// Defaults
|
||||
$item-group-transition: 0.2s settings.$standard-easing !default;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VItemGroup } from './VItemGroup.js';
|
||||
export { VItem } from './VItem.js';
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
export { VItemGroup } from "./VItemGroup.js";
|
||||
export { VItem } from "./VItem.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VItemGroup","VItem"],"sources":["../../../src/components/VItemGroup/index.ts"],"sourcesContent":["export { VItemGroup } from './VItemGroup'\nexport { VItem } from './VItem'\n"],"mappings":"SAASA,UAAU;AAAA,SACVC,KAAK","ignoreList":[]}
|
||||
Reference in New Issue
Block a user