routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+1493
File diff suppressed because it is too large
Load Diff
+172
@@ -0,0 +1,172 @@
|
||||
import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
|
||||
// Components
|
||||
import { makeVTreeviewChildrenProps, VTreeviewChildren } from "./VTreeviewChildren.js";
|
||||
import { makeVListProps, useListItems, VList } from "../VList/VList.js";
|
||||
import { VListItem } from "../VList/VListItem.js"; // Composables
|
||||
import { useLocale } from "../../composables/index.js";
|
||||
import { provideDefaults } from "../../composables/defaults.js";
|
||||
import { makeFilterProps, useFilter } from "../../composables/filter.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js"; // Utilities
|
||||
import { computed, provide, ref, toRaw, toRef } from 'vue';
|
||||
import { genericComponent, omit, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
import { VTreeviewSymbol } from "./shared.js";
|
||||
function flatten(items, flat = []) {
|
||||
for (const item of items) {
|
||||
flat.push(item);
|
||||
if (item.children) flatten(item.children, flat);
|
||||
}
|
||||
return flat;
|
||||
}
|
||||
export const makeVTreeviewProps = propsFactory({
|
||||
openAll: Boolean,
|
||||
indentLines: [Boolean, String],
|
||||
indentLinesColor: String,
|
||||
indentLinesOpacity: [String, Number],
|
||||
search: String,
|
||||
hideNoData: Boolean,
|
||||
noDataText: {
|
||||
type: String,
|
||||
default: '$vuetify.noDataText'
|
||||
},
|
||||
...makeFilterProps({
|
||||
filterKeys: ['title']
|
||||
}),
|
||||
...omit(makeVTreeviewChildrenProps(), ['index', 'path', 'indentLinesVariant', 'parentIndentLines', 'isLastGroup']),
|
||||
...omit(makeVListProps({
|
||||
collapseIcon: '$treeviewCollapse',
|
||||
expandIcon: '$treeviewExpand',
|
||||
slim: true
|
||||
}), ['nav', 'openStrategy']),
|
||||
modelValue: Array
|
||||
}, 'VTreeview');
|
||||
export const VTreeview = genericComponent()({
|
||||
name: 'VTreeview',
|
||||
props: makeVTreeviewProps(),
|
||||
emits: {
|
||||
'update:opened': val => true,
|
||||
'update:activated': val => true,
|
||||
'update:selected': val => true,
|
||||
'update:modelValue': val => true,
|
||||
'click:open': value => true,
|
||||
'click:select': value => true
|
||||
},
|
||||
setup(props, {
|
||||
slots,
|
||||
emit
|
||||
}) {
|
||||
const {
|
||||
t
|
||||
} = useLocale();
|
||||
const {
|
||||
items
|
||||
} = useListItems(props);
|
||||
const activeColor = toRef(() => props.activeColor);
|
||||
const baseColor = toRef(() => props.baseColor);
|
||||
const color = toRef(() => props.color);
|
||||
const activated = useProxiedModel(props, 'activated');
|
||||
const _selected = useProxiedModel(props, 'selected');
|
||||
const selected = computed({
|
||||
get: () => props.modelValue ?? _selected.value,
|
||||
set(val) {
|
||||
_selected.value = val;
|
||||
emit('update:modelValue', val);
|
||||
}
|
||||
});
|
||||
const vListRef = ref();
|
||||
const opened = computed(() => props.openAll ? openAll(items.value) : props.opened);
|
||||
const flatItems = computed(() => flatten(items.value));
|
||||
const search = toRef(() => props.search);
|
||||
const {
|
||||
filteredItems
|
||||
} = useFilter(props, flatItems, search);
|
||||
const visibleIds = computed(() => {
|
||||
if (!search.value) return null;
|
||||
const getPath = vListRef.value?.getPath;
|
||||
if (!getPath) return null;
|
||||
return new Set(filteredItems.value.flatMap(item => {
|
||||
const itemVal = props.returnObject ? item.raw : item.props.value;
|
||||
return [...getPath(itemVal), ...getChildren(itemVal)].map(toRaw);
|
||||
}));
|
||||
});
|
||||
function getChildren(id) {
|
||||
const arr = [];
|
||||
const queue = (vListRef.value?.children.get(id) ?? []).slice();
|
||||
while (queue.length) {
|
||||
const child = queue.shift();
|
||||
if (!child) continue;
|
||||
arr.push(child);
|
||||
queue.push(...(vListRef.value?.children.get(child) ?? []).slice());
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
function openAll(items) {
|
||||
let ids = [];
|
||||
for (const i of items) {
|
||||
if (!i.children) continue;
|
||||
ids.push(props.returnObject ? toRaw(i.raw) : i.value);
|
||||
if (i.children) {
|
||||
ids = ids.concat(openAll(i.children));
|
||||
}
|
||||
}
|
||||
return ids;
|
||||
}
|
||||
provide(VTreeviewSymbol, {
|
||||
visibleIds
|
||||
});
|
||||
provideDefaults({
|
||||
VTreeviewGroup: {
|
||||
activeColor,
|
||||
baseColor,
|
||||
color,
|
||||
collapseIcon: toRef(() => props.collapseIcon),
|
||||
expandIcon: toRef(() => props.expandIcon)
|
||||
},
|
||||
VTreeviewItem: {
|
||||
activeClass: toRef(() => props.activeClass),
|
||||
activeColor,
|
||||
baseColor,
|
||||
color,
|
||||
density: toRef(() => props.density),
|
||||
disabled: toRef(() => props.disabled),
|
||||
lines: toRef(() => props.lines),
|
||||
variant: toRef(() => props.variant)
|
||||
}
|
||||
});
|
||||
useRender(() => {
|
||||
const listProps = VList.filterProps(props);
|
||||
const treeviewChildrenProps = VTreeviewChildren.filterProps(props);
|
||||
const indentLinesVariant = typeof props.indentLines === 'boolean' ? 'default' : props.indentLines;
|
||||
return _createVNode(VList, _mergeProps({
|
||||
"ref": vListRef
|
||||
}, listProps, {
|
||||
"class": ['v-treeview', {
|
||||
'v-treeview--fluid': props.fluid
|
||||
}, props.class],
|
||||
"role": "tree",
|
||||
"openStrategy": "multiple",
|
||||
"style": [{
|
||||
'--v-treeview-indent-line-color': props.indentLinesColor,
|
||||
'--v-treeview-indent-line-opacity': props.indentLinesOpacity
|
||||
}, props.style],
|
||||
"opened": opened.value,
|
||||
"activated": activated.value,
|
||||
"onUpdate:activated": $event => activated.value = $event,
|
||||
"selected": selected.value,
|
||||
"onUpdate:selected": $event => selected.value = $event
|
||||
}), {
|
||||
default: () => [visibleIds.value?.size === 0 && !props.hideNoData && (slots['no-data']?.() ?? _createVNode(VListItem, {
|
||||
"key": "no-data",
|
||||
"title": t(props.noDataText)
|
||||
}, null)), _createVNode(VTreeviewChildren, _mergeProps(treeviewChildrenProps, {
|
||||
"density": props.density,
|
||||
"returnObject": props.returnObject,
|
||||
"items": items.value,
|
||||
"parentIndentLines": props.indentLines ? [] : undefined,
|
||||
"indentLinesVariant": indentLinesVariant
|
||||
}), slots)]
|
||||
});
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VTreeview.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+538
@@ -0,0 +1,538 @@
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
import type { PropType } from 'vue';
|
||||
import type { VTreeviewItemSlots } from './VTreeviewItem.js';
|
||||
import type { InternalListItem } from '../VList/VList.js';
|
||||
import type { SelectStrategyProp } from '../../composables/nested/nested.js';
|
||||
import type { GenericProps, IndentLinesVariant, IndentLineType } from '../../util/index.js';
|
||||
export type VTreeviewChildrenSlots<T> = {
|
||||
[K in keyof Omit<VTreeviewItemSlots, 'default'>]: VTreeviewItemSlots[K] & {
|
||||
item: T;
|
||||
internalItem: InternalListItem<T>;
|
||||
};
|
||||
} & {
|
||||
default: never;
|
||||
item: {
|
||||
props: InternalListItem['props'];
|
||||
item: T;
|
||||
internalItem: InternalListItem<T>;
|
||||
};
|
||||
header: {
|
||||
props: InternalListItem['props'];
|
||||
item: T;
|
||||
internalItem: InternalListItem<T>;
|
||||
loading: boolean;
|
||||
};
|
||||
footer: {
|
||||
props: {
|
||||
indentLines?: IndentLineType[];
|
||||
};
|
||||
item: T;
|
||||
internalItem: InternalListItem<T>;
|
||||
loading: boolean;
|
||||
};
|
||||
divider: {
|
||||
props: InternalListItem['props'];
|
||||
};
|
||||
subheader: {
|
||||
props: InternalListItem['props'];
|
||||
};
|
||||
};
|
||||
export declare const makeVTreeviewChildrenProps: <Defaults extends {
|
||||
density?: unknown;
|
||||
hideActions?: unknown;
|
||||
fluid?: unknown;
|
||||
disabled?: unknown;
|
||||
loadChildren?: unknown;
|
||||
loadingIcon?: unknown;
|
||||
items?: unknown;
|
||||
openOnClick?: unknown;
|
||||
indeterminateIcon?: unknown;
|
||||
falseIcon?: unknown;
|
||||
trueIcon?: unknown;
|
||||
returnObject?: unknown;
|
||||
activatable?: unknown;
|
||||
selectable?: unknown;
|
||||
selectedColor?: unknown;
|
||||
selectStrategy?: unknown;
|
||||
index?: unknown;
|
||||
isLastGroup?: unknown;
|
||||
separateRoots?: unknown;
|
||||
parentIndentLines?: unknown;
|
||||
indentLinesVariant?: unknown;
|
||||
path?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | import("../../composables/density.js").Density>;
|
||||
default: unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | NonNullable<import("../../composables/density.js").Density>;
|
||||
};
|
||||
hideActions: unknown extends Defaults["hideActions"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["hideActions"] ? boolean : boolean | Defaults["hideActions"]>;
|
||||
default: unknown extends Defaults["hideActions"] ? boolean : boolean | Defaults["hideActions"];
|
||||
};
|
||||
fluid: unknown extends Defaults["fluid"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["fluid"] ? boolean : boolean | Defaults["fluid"]>;
|
||||
default: unknown extends Defaults["fluid"] ? boolean : boolean | Defaults["fluid"];
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"]>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"];
|
||||
};
|
||||
loadChildren: unknown extends Defaults["loadChildren"] ? PropType<(item: unknown) => Promise<void>> : {
|
||||
type: PropType<unknown extends Defaults["loadChildren"] ? (item: unknown) => Promise<void> : ((item: unknown) => Promise<void>) | Defaults["loadChildren"]>;
|
||||
default: unknown extends Defaults["loadChildren"] ? (item: unknown) => Promise<void> : ((item: unknown) => Promise<void>) | Defaults["loadChildren"];
|
||||
};
|
||||
loadingIcon: unknown extends Defaults["loadingIcon"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["loadingIcon"] ? string : string | Defaults["loadingIcon"]>;
|
||||
default: unknown extends Defaults["loadingIcon"] ? string : string | Defaults["loadingIcon"];
|
||||
};
|
||||
items: unknown extends Defaults["items"] ? PropType<readonly InternalListItem<any>[]> : {
|
||||
type: PropType<unknown extends Defaults["items"] ? readonly InternalListItem<any>[] : readonly InternalListItem<any>[] | Defaults["items"]>;
|
||||
default: unknown extends Defaults["items"] ? readonly InternalListItem<any>[] : readonly InternalListItem<any>[] | Defaults["items"];
|
||||
};
|
||||
openOnClick: unknown extends Defaults["openOnClick"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["openOnClick"] ? boolean : boolean | Defaults["openOnClick"]>;
|
||||
default: unknown extends Defaults["openOnClick"] ? boolean : boolean | Defaults["openOnClick"];
|
||||
};
|
||||
indeterminateIcon: unknown extends Defaults["indeterminateIcon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["indeterminateIcon"] ? IconValue : Defaults["indeterminateIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["indeterminateIcon"] ? IconValue : Defaults["indeterminateIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
falseIcon: unknown extends Defaults["falseIcon"] ? PropType<IconValue> : {
|
||||
type: PropType<unknown extends Defaults["falseIcon"] ? IconValue : Defaults["falseIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["falseIcon"] ? IconValue : Defaults["falseIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
trueIcon: unknown extends Defaults["trueIcon"] ? PropType<IconValue> : {
|
||||
type: PropType<unknown extends Defaults["trueIcon"] ? IconValue : Defaults["trueIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["trueIcon"] ? IconValue : Defaults["trueIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
returnObject: unknown extends Defaults["returnObject"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["returnObject"] ? boolean : boolean | Defaults["returnObject"]>;
|
||||
default: unknown extends Defaults["returnObject"] ? boolean : boolean | Defaults["returnObject"];
|
||||
};
|
||||
activatable: unknown extends Defaults["activatable"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["activatable"] ? boolean : boolean | Defaults["activatable"]>;
|
||||
default: unknown extends Defaults["activatable"] ? boolean : boolean | Defaults["activatable"];
|
||||
};
|
||||
selectable: unknown extends Defaults["selectable"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["selectable"] ? boolean : boolean | Defaults["selectable"]>;
|
||||
default: unknown extends Defaults["selectable"] ? boolean : boolean | Defaults["selectable"];
|
||||
};
|
||||
selectedColor: unknown extends Defaults["selectedColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["selectedColor"] ? string : string | Defaults["selectedColor"]>;
|
||||
default: unknown extends Defaults["selectedColor"] ? string : string | Defaults["selectedColor"];
|
||||
};
|
||||
selectStrategy: unknown extends Defaults["selectStrategy"] ? PropType<SelectStrategyProp> : {
|
||||
type: PropType<unknown extends Defaults["selectStrategy"] ? SelectStrategyProp : Defaults["selectStrategy"] | SelectStrategyProp>;
|
||||
default: unknown extends Defaults["selectStrategy"] ? SelectStrategyProp : Defaults["selectStrategy"] | NonNullable<SelectStrategyProp>;
|
||||
};
|
||||
index: unknown extends Defaults["index"] ? NumberConstructor : {
|
||||
type: PropType<unknown extends Defaults["index"] ? number : number | Defaults["index"]>;
|
||||
default: unknown extends Defaults["index"] ? number : number | Defaults["index"];
|
||||
};
|
||||
isLastGroup: unknown extends Defaults["isLastGroup"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["isLastGroup"] ? boolean : boolean | Defaults["isLastGroup"]>;
|
||||
default: unknown extends Defaults["isLastGroup"] ? boolean : boolean | Defaults["isLastGroup"];
|
||||
};
|
||||
separateRoots: unknown extends Defaults["separateRoots"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["separateRoots"] ? boolean : boolean | Defaults["separateRoots"]>;
|
||||
default: unknown extends Defaults["separateRoots"] ? boolean : boolean | Defaults["separateRoots"];
|
||||
};
|
||||
parentIndentLines: unknown extends Defaults["parentIndentLines"] ? PropType<IndentLineType[]> : {
|
||||
type: PropType<unknown extends Defaults["parentIndentLines"] ? IndentLineType[] : IndentLineType[] | Defaults["parentIndentLines"]>;
|
||||
default: unknown extends Defaults["parentIndentLines"] ? IndentLineType[] : IndentLineType[] | Defaults["parentIndentLines"];
|
||||
};
|
||||
indentLinesVariant: unknown extends Defaults["indentLinesVariant"] ? PropType<IndentLinesVariant> : {
|
||||
type: PropType<unknown extends Defaults["indentLinesVariant"] ? IndentLinesVariant : Defaults["indentLinesVariant"] | IndentLinesVariant>;
|
||||
default: unknown extends Defaults["indentLinesVariant"] ? IndentLinesVariant : Defaults["indentLinesVariant"] | NonNullable<IndentLinesVariant>;
|
||||
};
|
||||
path: unknown extends Defaults["path"] ? {
|
||||
type: PropType<number[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: PropType<number[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["path"] ? number[] : number[] | Defaults["path"]>;
|
||||
default: unknown extends Defaults["path"] ? number[] : number[] | Defaults["path"];
|
||||
};
|
||||
};
|
||||
export declare const VTreeviewChildren: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
density: import("../../composables/density.js").Density;
|
||||
hideActions: boolean;
|
||||
fluid: boolean;
|
||||
disabled: boolean;
|
||||
loadingIcon: string;
|
||||
indeterminateIcon: IconValue;
|
||||
returnObject: boolean;
|
||||
activatable: boolean;
|
||||
selectable: boolean;
|
||||
isLastGroup: boolean;
|
||||
separateRoots: boolean;
|
||||
path: number[];
|
||||
} & {
|
||||
loadChildren?: ((item: unknown) => Promise<void>) | undefined;
|
||||
openOnClick?: boolean | undefined;
|
||||
falseIcon?: IconValue | undefined;
|
||||
trueIcon?: IconValue | undefined;
|
||||
selectedColor?: string | undefined;
|
||||
selectStrategy?: SelectStrategyProp | undefined;
|
||||
index?: number | undefined;
|
||||
parentIndentLines?: IndentLineType[] | undefined;
|
||||
indentLinesVariant?: IndentLinesVariant | undefined;
|
||||
}, () => (void | string | number | boolean | JSX.Element | import("vue").VNodeArrayChildren | null)[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "items" | "v-slot:append" | "v-slot:default" | "v-slot:divider" | "v-slot:footer" | "v-slot:header" | "v-slot:item" | "v-slot:prepend" | "v-slot:subheader" | "v-slot:subtitle" | "v-slot:title" | "v-slot:toggle" | "v-slots">, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
density: import("../../composables/density.js").Density;
|
||||
hideActions: boolean;
|
||||
fluid: boolean;
|
||||
disabled: boolean;
|
||||
loadingIcon: string;
|
||||
openOnClick: boolean;
|
||||
indeterminateIcon: IconValue;
|
||||
returnObject: boolean;
|
||||
activatable: boolean;
|
||||
selectable: boolean;
|
||||
isLastGroup: boolean;
|
||||
separateRoots: boolean;
|
||||
path: number[];
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
prepend: (arg: import("../VList/VListItem.js").ListItemSlot & {
|
||||
item: InternalListItem<any>;
|
||||
internalItem: InternalListItem<InternalListItem<any>>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: (arg: import("../VList/VListItem.js").ListItemSlot & {
|
||||
item: InternalListItem<any>;
|
||||
internalItem: InternalListItem<InternalListItem<any>>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: (arg: import("../VList/VListItem.js").ListItemTitleSlot & {
|
||||
item: InternalListItem<any>;
|
||||
internalItem: InternalListItem<InternalListItem<any>>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
subtitle: (arg: import("../VList/VListItem.js").ListItemSubtitleSlot & {
|
||||
item: InternalListItem<any>;
|
||||
internalItem: InternalListItem<InternalListItem<any>>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
toggle: (arg: import("../VList/VListItem.js").ListItemSlot & {
|
||||
props: {
|
||||
onClick: (e: PointerEvent) => void;
|
||||
};
|
||||
} & {
|
||||
loading: boolean;
|
||||
} & {
|
||||
item: InternalListItem<any>;
|
||||
internalItem: InternalListItem<InternalListItem<any>>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
item: (arg: {
|
||||
props: InternalListItem['props'];
|
||||
item: InternalListItem<any>;
|
||||
internalItem: InternalListItem<InternalListItem<any>>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
header: (arg: {
|
||||
props: InternalListItem['props'];
|
||||
item: InternalListItem<any>;
|
||||
internalItem: InternalListItem<InternalListItem<any>>;
|
||||
loading: boolean;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
footer: (arg: {
|
||||
props: {
|
||||
indentLines?: IndentLineType[];
|
||||
};
|
||||
item: InternalListItem<any>;
|
||||
internalItem: InternalListItem<InternalListItem<any>>;
|
||||
loading: boolean;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
divider: (arg: {
|
||||
props: InternalListItem['props'];
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
subheader: (arg: {
|
||||
props: InternalListItem['props'];
|
||||
}) => 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: {};
|
||||
}, {
|
||||
density: import("../../composables/density.js").Density;
|
||||
hideActions: boolean;
|
||||
fluid: boolean;
|
||||
disabled: boolean;
|
||||
loadingIcon: string;
|
||||
indeterminateIcon: IconValue;
|
||||
returnObject: boolean;
|
||||
activatable: boolean;
|
||||
selectable: boolean;
|
||||
isLastGroup: boolean;
|
||||
separateRoots: boolean;
|
||||
path: number[];
|
||||
} & {
|
||||
loadChildren?: ((item: unknown) => Promise<void>) | undefined;
|
||||
openOnClick?: boolean | undefined;
|
||||
falseIcon?: IconValue | undefined;
|
||||
trueIcon?: IconValue | undefined;
|
||||
selectedColor?: string | undefined;
|
||||
selectStrategy?: SelectStrategyProp | undefined;
|
||||
index?: number | undefined;
|
||||
parentIndentLines?: IndentLineType[] | undefined;
|
||||
indentLinesVariant?: IndentLinesVariant | undefined;
|
||||
}, () => (void | string | number | boolean | JSX.Element | import("vue").VNodeArrayChildren | null)[] | undefined, {}, {}, {}, {
|
||||
density: import("../../composables/density.js").Density;
|
||||
hideActions: boolean;
|
||||
fluid: boolean;
|
||||
disabled: boolean;
|
||||
loadingIcon: string;
|
||||
openOnClick: boolean;
|
||||
indeterminateIcon: IconValue;
|
||||
returnObject: boolean;
|
||||
activatable: boolean;
|
||||
selectable: boolean;
|
||||
isLastGroup: boolean;
|
||||
separateRoots: boolean;
|
||||
path: number[];
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
density: import("../../composables/density.js").Density;
|
||||
hideActions: boolean;
|
||||
fluid: boolean;
|
||||
disabled: boolean;
|
||||
loadingIcon: string;
|
||||
indeterminateIcon: IconValue;
|
||||
returnObject: boolean;
|
||||
activatable: boolean;
|
||||
selectable: boolean;
|
||||
isLastGroup: boolean;
|
||||
separateRoots: boolean;
|
||||
path: number[];
|
||||
} & {
|
||||
loadChildren?: ((item: unknown) => Promise<void>) | undefined;
|
||||
openOnClick?: boolean | undefined;
|
||||
falseIcon?: IconValue | undefined;
|
||||
trueIcon?: IconValue | undefined;
|
||||
selectedColor?: string | undefined;
|
||||
selectStrategy?: SelectStrategyProp | undefined;
|
||||
index?: number | undefined;
|
||||
parentIndentLines?: IndentLineType[] | undefined;
|
||||
indentLinesVariant?: IndentLinesVariant | undefined;
|
||||
}, () => (void | string | number | boolean | JSX.Element | import("vue").VNodeArrayChildren | null)[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "items" | "v-slot:append" | "v-slot:default" | "v-slot:divider" | "v-slot:footer" | "v-slot:header" | "v-slot:item" | "v-slot:prepend" | "v-slot:subheader" | "v-slot:subtitle" | "v-slot:title" | "v-slot:toggle" | "v-slots">, string, {
|
||||
density: import("../../composables/density.js").Density;
|
||||
hideActions: boolean;
|
||||
fluid: boolean;
|
||||
disabled: boolean;
|
||||
loadingIcon: string;
|
||||
openOnClick: boolean;
|
||||
indeterminateIcon: IconValue;
|
||||
returnObject: boolean;
|
||||
activatable: boolean;
|
||||
selectable: boolean;
|
||||
isLastGroup: boolean;
|
||||
separateRoots: boolean;
|
||||
path: number[];
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
prepend: (arg: import("../VList/VListItem.js").ListItemSlot & {
|
||||
item: InternalListItem<any>;
|
||||
internalItem: InternalListItem<InternalListItem<any>>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: (arg: import("../VList/VListItem.js").ListItemSlot & {
|
||||
item: InternalListItem<any>;
|
||||
internalItem: InternalListItem<InternalListItem<any>>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: (arg: import("../VList/VListItem.js").ListItemTitleSlot & {
|
||||
item: InternalListItem<any>;
|
||||
internalItem: InternalListItem<InternalListItem<any>>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
subtitle: (arg: import("../VList/VListItem.js").ListItemSubtitleSlot & {
|
||||
item: InternalListItem<any>;
|
||||
internalItem: InternalListItem<InternalListItem<any>>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
toggle: (arg: import("../VList/VListItem.js").ListItemSlot & {
|
||||
props: {
|
||||
onClick: (e: PointerEvent) => void;
|
||||
};
|
||||
} & {
|
||||
loading: boolean;
|
||||
} & {
|
||||
item: InternalListItem<any>;
|
||||
internalItem: InternalListItem<InternalListItem<any>>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
item: (arg: {
|
||||
props: InternalListItem['props'];
|
||||
item: InternalListItem<any>;
|
||||
internalItem: InternalListItem<InternalListItem<any>>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
header: (arg: {
|
||||
props: InternalListItem['props'];
|
||||
item: InternalListItem<any>;
|
||||
internalItem: InternalListItem<InternalListItem<any>>;
|
||||
loading: boolean;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
footer: (arg: {
|
||||
props: {
|
||||
indentLines?: IndentLineType[];
|
||||
};
|
||||
item: InternalListItem<any>;
|
||||
internalItem: InternalListItem<InternalListItem<any>>;
|
||||
loading: boolean;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
divider: (arg: {
|
||||
props: InternalListItem['props'];
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
subheader: (arg: {
|
||||
props: InternalListItem['props'];
|
||||
}) => 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 extends InternalListItem>(props: {
|
||||
items?: readonly T[];
|
||||
}, slots: VTreeviewChildrenSlots<T>) => GenericProps<typeof props, typeof slots>) & import("../../util/index.js").FilterPropsOptions<{
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
hideActions: BooleanConstructor;
|
||||
fluid: BooleanConstructor;
|
||||
disabled: BooleanConstructor;
|
||||
loadChildren: PropType<(item: unknown) => Promise<void>>;
|
||||
loadingIcon: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
items: PropType<readonly InternalListItem[]>;
|
||||
openOnClick: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
indeterminateIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
falseIcon: PropType<IconValue>;
|
||||
trueIcon: PropType<IconValue>;
|
||||
returnObject: BooleanConstructor;
|
||||
activatable: BooleanConstructor;
|
||||
selectable: BooleanConstructor;
|
||||
selectedColor: StringConstructor;
|
||||
selectStrategy: PropType<SelectStrategyProp>;
|
||||
index: NumberConstructor;
|
||||
isLastGroup: BooleanConstructor;
|
||||
separateRoots: BooleanConstructor;
|
||||
parentIndentLines: PropType<IndentLineType[]>;
|
||||
indentLinesVariant: PropType<IndentLinesVariant>;
|
||||
path: {
|
||||
type: PropType<number[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
hideActions: BooleanConstructor;
|
||||
fluid: BooleanConstructor;
|
||||
disabled: BooleanConstructor;
|
||||
loadChildren: PropType<(item: unknown) => Promise<void>>;
|
||||
loadingIcon: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
items: PropType<readonly InternalListItem[]>;
|
||||
openOnClick: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
indeterminateIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
falseIcon: PropType<IconValue>;
|
||||
trueIcon: PropType<IconValue>;
|
||||
returnObject: BooleanConstructor;
|
||||
activatable: BooleanConstructor;
|
||||
selectable: BooleanConstructor;
|
||||
selectedColor: StringConstructor;
|
||||
selectStrategy: PropType<SelectStrategyProp>;
|
||||
index: NumberConstructor;
|
||||
isLastGroup: BooleanConstructor;
|
||||
separateRoots: BooleanConstructor;
|
||||
parentIndentLines: PropType<IndentLineType[]>;
|
||||
indentLinesVariant: PropType<IndentLinesVariant>;
|
||||
path: {
|
||||
type: PropType<number[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
}>>;
|
||||
+229
@@ -0,0 +1,229 @@
|
||||
import { Fragment as _Fragment, createVNode as _createVNode, createElementVNode as _createElementVNode, mergeProps as _mergeProps } from "vue";
|
||||
// Components
|
||||
import { VTreeviewGroup } from "./VTreeviewGroup.js";
|
||||
import { makeVTreeviewItemProps, VTreeviewItem } from "./VTreeviewItem.js";
|
||||
import { VCheckboxBtn } from "../VCheckbox/index.js";
|
||||
import { VDivider } from "../VDivider/index.js";
|
||||
import { VListItemAction, VListSubheader } from "../VList/index.js"; // Composables
|
||||
import { makeDensityProps } from "../../composables/density.js";
|
||||
import { IconValue } from "../../composables/icons.js"; // Utilities
|
||||
import { computed, reactive, ref, toRaw } from 'vue';
|
||||
import { genericComponent, getIndentLines, pick, propsFactory, renderSlot } from "../../util/index.js"; // Types
|
||||
export const makeVTreeviewChildrenProps = propsFactory({
|
||||
fluid: Boolean,
|
||||
disabled: Boolean,
|
||||
loadChildren: Function,
|
||||
loadingIcon: {
|
||||
type: String,
|
||||
default: '$loading'
|
||||
},
|
||||
items: Array,
|
||||
openOnClick: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
indeterminateIcon: {
|
||||
type: IconValue,
|
||||
default: '$checkboxIndeterminate'
|
||||
},
|
||||
falseIcon: IconValue,
|
||||
trueIcon: IconValue,
|
||||
returnObject: Boolean,
|
||||
activatable: Boolean,
|
||||
selectable: Boolean,
|
||||
selectedColor: String,
|
||||
selectStrategy: [String, Function, Object],
|
||||
index: Number,
|
||||
isLastGroup: Boolean,
|
||||
separateRoots: Boolean,
|
||||
parentIndentLines: Array,
|
||||
indentLinesVariant: String,
|
||||
path: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
...pick(makeVTreeviewItemProps(), ['hideActions']),
|
||||
...makeDensityProps()
|
||||
}, 'VTreeviewChildren');
|
||||
export const VTreeviewChildren = genericComponent()({
|
||||
name: 'VTreeviewChildren',
|
||||
props: makeVTreeviewChildrenProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const isLoading = reactive(new Set());
|
||||
const activatorItems = ref([]);
|
||||
const isClickOnOpen = computed(() => !props.disabled && (props.openOnClick != null ? props.openOnClick : props.selectable && !props.activatable));
|
||||
async function checkChildren(item) {
|
||||
try {
|
||||
if (!props.items?.length || !props.loadChildren) return;
|
||||
if (item?.children?.length === 0) {
|
||||
isLoading.add(item.value);
|
||||
await props.loadChildren(item.raw);
|
||||
}
|
||||
} finally {
|
||||
isLoading.delete(item.value);
|
||||
}
|
||||
}
|
||||
function selectItem(select, isSelected) {
|
||||
if (props.selectable) {
|
||||
select(isSelected);
|
||||
}
|
||||
}
|
||||
return () => slots.default?.() ?? props.items?.map((item, index, items) => {
|
||||
const {
|
||||
children,
|
||||
props: itemProps
|
||||
} = item;
|
||||
const loading = isLoading.has(item.value);
|
||||
const nextItemHasChildren = !!items.at(index + 1)?.children;
|
||||
const depth = props.path?.length ?? 0;
|
||||
const isLast = items.length - 1 === index;
|
||||
const treeItemProps = {
|
||||
index,
|
||||
depth,
|
||||
isFirst: index === 0,
|
||||
isLast,
|
||||
path: [...props.path, index],
|
||||
hideAction: props.hideActions
|
||||
};
|
||||
const indentLines = getIndentLines({
|
||||
depth,
|
||||
isLast,
|
||||
isLastGroup: props.isLastGroup,
|
||||
leafLinks: !props.hideActions && !props.fluid,
|
||||
separateRoots: props.separateRoots,
|
||||
parentIndentLines: props.parentIndentLines,
|
||||
variant: props.indentLinesVariant
|
||||
});
|
||||
const slotsWithItem = {
|
||||
toggle: slots.toggle ? slotProps => slots.toggle?.({
|
||||
...slotProps,
|
||||
...treeItemProps,
|
||||
item: item.raw,
|
||||
internalItem: item,
|
||||
loading
|
||||
}) : undefined,
|
||||
prepend: slotProps => _createElementVNode(_Fragment, null, [props.selectable && (!children || children && !['leaf', 'single-leaf'].includes(props.selectStrategy)) && _createVNode(VListItemAction, {
|
||||
"start": true
|
||||
}, {
|
||||
default: () => [_createVNode(VCheckboxBtn, {
|
||||
"key": item.value,
|
||||
"modelValue": slotProps.isSelected,
|
||||
"disabled": props.disabled || itemProps.disabled,
|
||||
"loading": loading,
|
||||
"color": props.selectedColor,
|
||||
"density": props.density,
|
||||
"indeterminate": slotProps.isIndeterminate,
|
||||
"indeterminateIcon": props.indeterminateIcon,
|
||||
"falseIcon": props.falseIcon,
|
||||
"trueIcon": props.trueIcon,
|
||||
"onUpdate:modelValue": v => selectItem(slotProps.select, v),
|
||||
"onClick": e => e.stopPropagation(),
|
||||
"onKeydown": e => {
|
||||
if (!['Enter', 'Space'].includes(e.key)) return;
|
||||
e.stopPropagation();
|
||||
selectItem(slotProps.select, slotProps.isSelected);
|
||||
}
|
||||
}, null)]
|
||||
}), slots.prepend?.({
|
||||
...slotProps,
|
||||
...treeItemProps,
|
||||
item: item.raw,
|
||||
internalItem: item
|
||||
})]),
|
||||
append: slots.append ? slotProps => slots.append?.({
|
||||
...slotProps,
|
||||
...treeItemProps,
|
||||
item: item.raw,
|
||||
internalItem: item
|
||||
}) : undefined,
|
||||
title: slots.title ? slotProps => slots.title?.({
|
||||
...slotProps,
|
||||
item: item.raw,
|
||||
internalItem: item
|
||||
}) : undefined,
|
||||
subtitle: slots.subtitle ? slotProps => slots.subtitle?.({
|
||||
...slotProps,
|
||||
item: item.raw,
|
||||
internalItem: item
|
||||
}) : undefined
|
||||
};
|
||||
const treeviewGroupProps = VTreeviewGroup.filterProps(itemProps);
|
||||
const treeviewChildrenProps = VTreeviewChildren.filterProps({
|
||||
...props,
|
||||
...treeItemProps
|
||||
});
|
||||
const footerProps = {
|
||||
hideActions: props.hideActions,
|
||||
indentLines: indentLines.footer
|
||||
};
|
||||
return children ? _createVNode(VTreeviewGroup, _mergeProps(treeviewGroupProps, {
|
||||
"value": props.returnObject ? item.raw : treeviewGroupProps?.value,
|
||||
"rawId": treeviewGroupProps?.value
|
||||
}), {
|
||||
activator: ({
|
||||
props: activatorProps,
|
||||
isOpen
|
||||
}) => {
|
||||
const listItemProps = {
|
||||
...itemProps,
|
||||
...activatorProps,
|
||||
value: itemProps?.value,
|
||||
hideActions: props.hideActions,
|
||||
indentLines: indentLines.node,
|
||||
ariaExpanded: isOpen,
|
||||
onToggleExpand: [() => checkChildren(item), activatorProps.onClick],
|
||||
onClick: props.disabled || itemProps.disabled ? undefined : isClickOnOpen.value ? [() => checkChildren(item), activatorProps.onClick] : () => selectItem(activatorItems.value[index]?.select, !activatorItems.value[index]?.isSelected)
|
||||
};
|
||||
return renderSlot(slots.header, {
|
||||
props: listItemProps,
|
||||
item: item.raw,
|
||||
internalItem: item,
|
||||
loading
|
||||
}, () => _createVNode(VTreeviewItem, _mergeProps({
|
||||
"ref": el => activatorItems.value[index] = el
|
||||
}, listItemProps, {
|
||||
"hasCustomPrepend": !!slots.prepend,
|
||||
"value": props.returnObject ? item.raw : itemProps.value,
|
||||
"loading": loading
|
||||
}), slotsWithItem));
|
||||
},
|
||||
default: () => _createElementVNode(_Fragment, null, [_createVNode(VTreeviewChildren, _mergeProps(treeviewChildrenProps, {
|
||||
"items": children,
|
||||
"indentLinesVariant": props.indentLinesVariant,
|
||||
"parentIndentLines": indentLines.children,
|
||||
"isLastGroup": nextItemHasChildren,
|
||||
"returnObject": props.returnObject
|
||||
}), slots), slots.footer?.({
|
||||
props: footerProps,
|
||||
item: item.raw,
|
||||
internalItem: item,
|
||||
loading
|
||||
})])
|
||||
}) : renderSlot(slots.item, {
|
||||
props: itemProps,
|
||||
item: item.raw,
|
||||
internalItem: item
|
||||
}, () => {
|
||||
if (item.type === 'divider') {
|
||||
return renderSlot(slots.divider, {
|
||||
props: item.raw
|
||||
}, () => _createVNode(VDivider, item.props, null));
|
||||
}
|
||||
if (item.type === 'subheader') {
|
||||
return renderSlot(slots.subheader, {
|
||||
props: item.raw
|
||||
}, () => _createVNode(VListSubheader, item.props, null));
|
||||
}
|
||||
return _createVNode(VTreeviewItem, _mergeProps(itemProps, {
|
||||
"hasCustomPrepend": !!slots.prepend,
|
||||
"hideActions": props.hideActions,
|
||||
"indentLines": indentLines.leaf,
|
||||
"value": props.returnObject ? toRaw(item.raw) : itemProps.value
|
||||
}), slotsWithItem);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VTreeviewChildren.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+357
@@ -0,0 +1,357 @@
|
||||
export declare const makeVTreeviewGroupProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
tag?: unknown;
|
||||
activeColor?: unknown;
|
||||
baseColor?: unknown;
|
||||
color?: unknown;
|
||||
collapseIcon?: unknown;
|
||||
disabled?: unknown;
|
||||
expandIcon?: unknown;
|
||||
rawId?: unknown;
|
||||
prependIcon?: unknown;
|
||||
appendIcon?: unknown;
|
||||
fluid?: unknown;
|
||||
title?: unknown;
|
||||
value?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
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>;
|
||||
};
|
||||
activeColor: unknown extends Defaults["activeColor"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["activeColor"] ? string : string | Defaults["activeColor"]>;
|
||||
default: unknown extends Defaults["activeColor"] ? string : string | Defaults["activeColor"];
|
||||
};
|
||||
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"];
|
||||
};
|
||||
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"];
|
||||
};
|
||||
collapseIcon: unknown extends Defaults["collapseIcon"] ? Omit<{
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
} : Omit<Omit<{
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["collapseIcon"] ? import("../../composables/icons.js").IconValue : Defaults["collapseIcon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["collapseIcon"] ? import("../../composables/icons.js").IconValue : Defaults["collapseIcon"] | NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
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"];
|
||||
};
|
||||
expandIcon: unknown extends Defaults["expandIcon"] ? Omit<{
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
} : Omit<Omit<{
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["expandIcon"] ? import("../../composables/icons.js").IconValue : Defaults["expandIcon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["expandIcon"] ? import("../../composables/icons.js").IconValue : Defaults["expandIcon"] | NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
rawId: unknown extends Defaults["rawId"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["rawId"] ? string | number : string | number | Defaults["rawId"]>;
|
||||
default: unknown extends Defaults["rawId"] ? string | number : Defaults["rawId"] | NonNullable<string | number>;
|
||||
};
|
||||
prependIcon: unknown extends Defaults["prependIcon"] ? import("vue").PropType<import("../../composables/icons.js").IconValue> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["prependIcon"] ? import("../../composables/icons.js").IconValue : Defaults["prependIcon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["prependIcon"] ? import("../../composables/icons.js").IconValue : Defaults["prependIcon"] | NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
appendIcon: unknown extends Defaults["appendIcon"] ? import("vue").PropType<import("../../composables/icons.js").IconValue> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["appendIcon"] ? import("../../composables/icons.js").IconValue : Defaults["appendIcon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["appendIcon"] ? import("../../composables/icons.js").IconValue : Defaults["appendIcon"] | NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
fluid: unknown extends Defaults["fluid"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["fluid"] ? boolean : boolean | Defaults["fluid"]>;
|
||||
default: unknown extends Defaults["fluid"] ? boolean : boolean | Defaults["fluid"];
|
||||
};
|
||||
title: unknown extends Defaults["title"] ? StringConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["title"] ? string : string | Defaults["title"]>;
|
||||
default: unknown extends Defaults["title"] ? string : string | Defaults["title"];
|
||||
};
|
||||
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 const VTreeviewGroup: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
disabled: boolean;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
fluid: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
activeColor?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
rawId?: string | number | undefined;
|
||||
prependIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
appendIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
title?: string | undefined;
|
||||
value?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
activator?: ((arg: {
|
||||
isOpen: boolean;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
activator?: false | ((arg: {
|
||||
isOpen: boolean;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:activator"?: false | ((arg: {
|
||||
isOpen: boolean;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
disabled: boolean;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
fluid: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
activator: (arg: {
|
||||
isOpen: boolean;
|
||||
props: Record<string, unknown>;
|
||||
}) => 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;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
disabled: boolean;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
fluid: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
activeColor?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
rawId?: string | number | undefined;
|
||||
prependIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
appendIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
title?: string | undefined;
|
||||
value?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
activator?: ((arg: {
|
||||
isOpen: boolean;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
activator?: false | ((arg: {
|
||||
isOpen: boolean;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:activator"?: false | ((arg: {
|
||||
isOpen: boolean;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
disabled: boolean;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
fluid: 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;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
disabled: boolean;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
fluid: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
activeColor?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
rawId?: string | number | undefined;
|
||||
prependIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
appendIcon?: import("../../composables/icons.js").IconValue | undefined;
|
||||
title?: string | undefined;
|
||||
value?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
activator?: ((arg: {
|
||||
isOpen: boolean;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
activator?: false | ((arg: {
|
||||
isOpen: boolean;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:activator"?: false | ((arg: {
|
||||
isOpen: boolean;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
disabled: boolean;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
fluid: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
activator: (arg: {
|
||||
isOpen: boolean;
|
||||
props: Record<string, unknown>;
|
||||
}) => 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<{
|
||||
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;
|
||||
};
|
||||
activeColor: StringConstructor;
|
||||
baseColor: StringConstructor;
|
||||
color: StringConstructor;
|
||||
collapseIcon: Omit<{
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
disabled: BooleanConstructor;
|
||||
expandIcon: Omit<{
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
rawId: (NumberConstructor | StringConstructor)[];
|
||||
prependIcon: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
appendIcon: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
fluid: BooleanConstructor;
|
||||
title: StringConstructor;
|
||||
value: null;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
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;
|
||||
};
|
||||
activeColor: StringConstructor;
|
||||
baseColor: StringConstructor;
|
||||
color: StringConstructor;
|
||||
collapseIcon: Omit<{
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
disabled: BooleanConstructor;
|
||||
expandIcon: Omit<{
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
rawId: (NumberConstructor | StringConstructor)[];
|
||||
prependIcon: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
appendIcon: import("vue").PropType<import("../../composables/icons.js").IconValue>;
|
||||
fluid: BooleanConstructor;
|
||||
title: StringConstructor;
|
||||
value: null;
|
||||
}>>;
|
||||
export type VTreeviewGroup = InstanceType<typeof VTreeviewGroup>;
|
||||
+46
@@ -0,0 +1,46 @@
|
||||
import { Fragment as _Fragment, createVNode as _createVNode, createElementVNode as _createElementVNode, mergeProps as _mergeProps } from "vue";
|
||||
// Components
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/index.js";
|
||||
import { makeVListGroupProps, VListGroup } from "../VList/VListGroup.js"; // Utilities
|
||||
import { computed, ref } from 'vue';
|
||||
import { genericComponent, omit, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVTreeviewGroupProps = propsFactory({
|
||||
...omit(makeVListGroupProps({
|
||||
collapseIcon: '$treeviewCollapse',
|
||||
expandIcon: '$treeviewExpand'
|
||||
}), ['subgroup'])
|
||||
}, 'VTreeviewGroup');
|
||||
export const VTreeviewGroup = genericComponent()({
|
||||
name: 'VTreeviewGroup',
|
||||
props: makeVTreeviewGroupProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const vListGroupRef = ref();
|
||||
const toggleIcon = computed(() => vListGroupRef.value?.isOpen ? props.collapseIcon : props.expandIcon);
|
||||
const activatorDefaults = computed(() => ({
|
||||
VTreeviewItem: {
|
||||
prependIcon: undefined,
|
||||
appendIcon: undefined,
|
||||
toggleIcon: toggleIcon.value
|
||||
}
|
||||
}));
|
||||
useRender(() => {
|
||||
const listGroupProps = VListGroup.filterProps(props);
|
||||
return _createVNode(VListGroup, _mergeProps(listGroupProps, {
|
||||
"ref": vListGroupRef,
|
||||
"class": ['v-treeview-group', props.class],
|
||||
"subgroup": true
|
||||
}), {
|
||||
...slots,
|
||||
activator: slots.activator ? slotProps => _createElementVNode(_Fragment, null, [_createVNode(VDefaultsProvider, {
|
||||
"defaults": activatorDefaults.value
|
||||
}, {
|
||||
default: () => [slots.activator?.(slotProps)]
|
||||
})]) : undefined
|
||||
});
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VTreeviewGroup.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VTreeviewGroup.js","names":["VDefaultsProvider","makeVListGroupProps","VListGroup","computed","ref","genericComponent","omit","propsFactory","useRender","makeVTreeviewGroupProps","collapseIcon","expandIcon","VTreeviewGroup","name","props","setup","slots","vListGroupRef","toggleIcon","value","isOpen","activatorDefaults","VTreeviewItem","prependIcon","undefined","appendIcon","listGroupProps","filterProps","_createVNode","_mergeProps","class","activator","slotProps","_createElementVNode","_Fragment","default"],"sources":["../../../src/components/VTreeview/VTreeviewGroup.tsx"],"sourcesContent":["// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { makeVListGroupProps, VListGroup } from '@/components/VList/VListGroup'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { genericComponent, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VListGroupSlots } from '@/components/VList/VListGroup'\n\nexport const makeVTreeviewGroupProps = propsFactory({\n ...omit(makeVListGroupProps({\n collapseIcon: '$treeviewCollapse',\n expandIcon: '$treeviewExpand',\n }), ['subgroup']),\n}, 'VTreeviewGroup')\n\nexport const VTreeviewGroup = genericComponent<VListGroupSlots>()({\n name: 'VTreeviewGroup',\n\n props: makeVTreeviewGroupProps(),\n\n setup (props, { slots }) {\n const vListGroupRef = ref<VListGroup>()\n const toggleIcon = computed(() => vListGroupRef.value?.isOpen ? props.collapseIcon : props.expandIcon)\n\n const activatorDefaults = computed(() => ({\n VTreeviewItem: {\n prependIcon: undefined,\n appendIcon: undefined,\n toggleIcon: toggleIcon.value,\n },\n }))\n\n useRender(() => {\n const listGroupProps = VListGroup.filterProps(props)\n\n return (\n <VListGroup\n { ...listGroupProps }\n ref={ vListGroupRef }\n class={[\n 'v-treeview-group',\n props.class,\n ]}\n subgroup\n >\n {{\n ...slots,\n activator: slots.activator ? slotProps => (\n <>\n <VDefaultsProvider defaults={ activatorDefaults.value }>\n { slots.activator?.(slotProps) }\n </VDefaultsProvider>\n </>\n ) : undefined,\n }}\n </VListGroup>\n )\n })\n\n return {}\n },\n})\n\nexport type VTreeviewGroup = InstanceType<typeof VTreeviewGroup>\n"],"mappings":";AAAA;AAAA,SACSA,iBAAiB;AAAA,SACjBC,mBAAmB,EAAEC,UAAU,kCAExC;AACA,SAASC,QAAQ,EAAEC,GAAG,QAAQ,KAAK;AAAA,SAC1BC,gBAAgB,EAAEC,IAAI,EAAEC,YAAY,EAAEC,SAAS,+BAExD;AAGA,OAAO,MAAMC,uBAAuB,GAAGF,YAAY,CAAC;EAClD,GAAGD,IAAI,CAACL,mBAAmB,CAAC;IAC1BS,YAAY,EAAE,mBAAmB;IACjCC,UAAU,EAAE;EACd,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC;AAClB,CAAC,EAAE,gBAAgB,CAAC;AAEpB,OAAO,MAAMC,cAAc,GAAGP,gBAAgB,CAAkB,CAAC,CAAC;EAChEQ,IAAI,EAAE,gBAAgB;EAEtBC,KAAK,EAAEL,uBAAuB,CAAC,CAAC;EAEhCM,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvB,MAAMC,aAAa,GAAGb,GAAG,CAAa,CAAC;IACvC,MAAMc,UAAU,GAAGf,QAAQ,CAAC,MAAMc,aAAa,CAACE,KAAK,EAAEC,MAAM,GAAGN,KAAK,CAACJ,YAAY,GAAGI,KAAK,CAACH,UAAU,CAAC;IAEtG,MAAMU,iBAAiB,GAAGlB,QAAQ,CAAC,OAAO;MACxCmB,aAAa,EAAE;QACbC,WAAW,EAAEC,SAAS;QACtBC,UAAU,EAAED,SAAS;QACrBN,UAAU,EAAEA,UAAU,CAACC;MACzB;IACF,CAAC,CAAC,CAAC;IAEHX,SAAS,CAAC,MAAM;MACd,MAAMkB,cAAc,GAAGxB,UAAU,CAACyB,WAAW,CAACb,KAAK,CAAC;MAEpD,OAAAc,YAAA,CAAA1B,UAAA,EAAA2B,WAAA,CAESH,cAAc;QAAA,OACbT,aAAa;QAAA,SACZ,CACL,kBAAkB,EAClBH,KAAK,CAACgB,KAAK,CACZ;QAAA;MAAA;QAIC,GAAGd,KAAK;QACRe,SAAS,EAAEf,KAAK,CAACe,SAAS,GAAGC,SAAS,IAAAC,mBAAA,CAAAC,SAAA,SAAAN,YAAA,CAAA5B,iBAAA;UAAA,YAEJqB,iBAAiB,CAACF;QAAK;UAAAgB,OAAA,EAAAA,CAAA,MACjDnB,KAAK,CAACe,SAAS,GAAGC,SAAS,CAAC;QAAA,IAGnC,GAAGR;MAAS;IAIrB,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
@layer vuetify-components {
|
||||
.v-treeview-item {
|
||||
--list-indent-size: 28px;
|
||||
}
|
||||
.v-treeview-item.v-treeview-item--filtered {
|
||||
display: none;
|
||||
}
|
||||
.v-treeview-item.v-list-item--disabled:not(a) {
|
||||
pointer-events: auto;
|
||||
}
|
||||
.v-treeview-item.v-list-item--disabled:not(a) .v-selection-control {
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-treeview-item__level {
|
||||
width: 28px;
|
||||
}
|
||||
.v-treeview--fluid .v-treeview-item__level {
|
||||
width: 0;
|
||||
}
|
||||
.v-treeview {
|
||||
--v-treeview-indent-line-color: rgb(var(--v-theme-on-surface));
|
||||
--v-treeview-indent-line-opacity: 0.4;
|
||||
}
|
||||
.v-treeview.v-list {
|
||||
--indent-padding: 16px;
|
||||
}
|
||||
.v-treeview.v-list--disabled .v-list-item__prepend {
|
||||
pointer-events: auto;
|
||||
}
|
||||
.v-treeview .v-list-item--slim > .v-list-item__prepend > .v-icon ~ .v-list-item__spacer {
|
||||
width: var(--v-list-prepend-gap, 10px);
|
||||
}
|
||||
.v-treeview .v-list-item--slim > .v-list-item__prepend:not(:has(.v-list-item-action)) > .v-icon {
|
||||
margin-inline-start: -6px;
|
||||
}
|
||||
.v-treeview:has(.v-treeview-indent-lines) .v-list-item-action:first-child > .v-selection-control,
|
||||
.v-treeview:has(.v-treeview-indent-lines) .v-treeview-indent-lines + .v-list-item-action > .v-selection-control {
|
||||
margin-inline: min(0px, -1 * (var(--v-selection-control-size) - 28px) / 2);
|
||||
}
|
||||
.v-treeview-indent-lines {
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
padding-inline-start: 8px;
|
||||
padding-block: 0;
|
||||
grid-template-columns: repeat(var(--v-indent-parts, 1), var(--prepend-width));
|
||||
opacity: var(--v-treeview-indent-line-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-treeview-indent-line, .v-treeview-indent-line::before {
|
||||
border: 0px solid var(--v-treeview-indent-line-color);
|
||||
}
|
||||
.v-treeview-indent-line--leaf, .v-treeview-indent-line--line {
|
||||
border-inline-start-width: 1px;
|
||||
height: 100%;
|
||||
width: calc(50% + 1px);
|
||||
justify-self: end;
|
||||
}
|
||||
.v-treeview-indent-line--leaf {
|
||||
position: relative;
|
||||
}
|
||||
.v-treeview-indent-line--leaf::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-bottom-width: 1px;
|
||||
height: calc(50% + 1px);
|
||||
width: 100%;
|
||||
}
|
||||
.v-treeview-indent-line--leaf:last-child::before {
|
||||
width: calc(100% - 4px);
|
||||
}
|
||||
.v-treeview-indent-line--leaf-link {
|
||||
border-bottom-width: 1px;
|
||||
height: calc(50% + 1px);
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
.v-treeview-indent-line--last-leaf {
|
||||
border-inline-start-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
height: calc(50% + 1px);
|
||||
margin-inline-start: calc(50% - 1px);
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
.v-locale--is-rtl.v-treeview-indent-line--last-leaf, .v-locale--is-rtl .v-treeview-indent-line--last-leaf {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
.v-treeview-indent-line--last-leaf:last-child {
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
.v-treeview-group.v-list-group {
|
||||
--list-indent-size: 0px;
|
||||
}
|
||||
.v-treeview-group.v-list-group > .v-treeview-item__level {
|
||||
width: 0px;
|
||||
}
|
||||
}
|
||||
@layer vuetify-overrides {
|
||||
.v-treeview-group.v-list-group .v-list-group__items .v-list-item {
|
||||
padding-inline-start: calc(var(--indent-padding));
|
||||
}
|
||||
}
|
||||
+2345
File diff suppressed because it is too large
Load Diff
+155
@@ -0,0 +1,155 @@
|
||||
import { Fragment as _Fragment, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
|
||||
// Styles
|
||||
import "./VTreeviewItem.css";
|
||||
|
||||
// Components
|
||||
import { VAvatar } from "../VAvatar/index.js";
|
||||
import { VBtn } from "../VBtn/index.js";
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/index.js";
|
||||
import { VIcon } from "../VIcon/index.js";
|
||||
import { VListItemAction } from "../VList/index.js";
|
||||
import { makeVListItemProps, VListItem } from "../VList/VListItem.js";
|
||||
import { VProgressCircular } from "../VProgressCircular/index.js"; // Composables
|
||||
import { forwardRefs } from "../../composables/forwardRefs.js";
|
||||
import { IconValue } from "../../composables/icons.js"; // Utilities
|
||||
import { computed, inject, ref, toRaw } from 'vue';
|
||||
import { VTreeviewSymbol } from "./shared.js";
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVTreeviewItemProps = propsFactory({
|
||||
loading: Boolean,
|
||||
hideActions: Boolean,
|
||||
hasCustomPrepend: Boolean,
|
||||
indentLines: Array,
|
||||
toggleIcon: IconValue,
|
||||
...makeVListItemProps({
|
||||
slim: true
|
||||
})
|
||||
}, 'VTreeviewItem');
|
||||
export const VTreeviewItem = genericComponent()({
|
||||
name: 'VTreeviewItem',
|
||||
props: makeVTreeviewItemProps(),
|
||||
emits: {
|
||||
toggleExpand: value => true
|
||||
},
|
||||
setup(props, {
|
||||
slots,
|
||||
emit
|
||||
}) {
|
||||
const visibleIds = inject(VTreeviewSymbol, {
|
||||
visibleIds: ref()
|
||||
}).visibleIds;
|
||||
const vListItemRef = ref();
|
||||
const isActivatableGroupActivator = computed(() => vListItemRef.value?.root.activatable.value && vListItemRef.value?.isGroupActivator);
|
||||
const vListItemRefIsClickable = computed(() => vListItemRef.value?.link.isClickable.value || props.value != null && !!vListItemRef.value?.list);
|
||||
const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || vListItemRefIsClickable.value || isActivatableGroupActivator.value));
|
||||
const isFiltered = computed(() => visibleIds.value && !visibleIds.value.has(toRaw(vListItemRef.value?.id)));
|
||||
function activateGroupActivator(e) {
|
||||
if (isClickable.value && isActivatableGroupActivator.value) {
|
||||
vListItemRef.value?.activate(!vListItemRef.value?.isActivated, e);
|
||||
}
|
||||
}
|
||||
function onClickAction(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
emit('toggleExpand', e);
|
||||
}
|
||||
useRender(() => {
|
||||
const listItemProps = VListItem.filterProps(props);
|
||||
const hasPrepend = slots.prepend || props.toggleIcon || props.indentLines || props.prependIcon || props.prependAvatar;
|
||||
return _createVNode(VListItem, _mergeProps({
|
||||
"ref": vListItemRef
|
||||
}, listItemProps, {
|
||||
"active": vListItemRef.value?.isActivated || undefined,
|
||||
"class": ['v-treeview-item', {
|
||||
'v-treeview-item--activatable-group-activator': isActivatableGroupActivator.value,
|
||||
'v-treeview-item--filtered': isFiltered.value
|
||||
}, props.class],
|
||||
"role": "treeitem",
|
||||
"ripple": false,
|
||||
"onClick": activateGroupActivator
|
||||
}), {
|
||||
...slots,
|
||||
prepend: hasPrepend ? slotProps => {
|
||||
return _createElementVNode(_Fragment, null, [props.indentLines && props.indentLines.length > 0 ? _createElementVNode("div", {
|
||||
"key": "indent-lines",
|
||||
"class": "v-treeview-indent-lines",
|
||||
"style": {
|
||||
'--v-indent-parts': props.indentLines.length
|
||||
}
|
||||
}, [props.indentLines.map(type => _createElementVNode("div", {
|
||||
"class": _normalizeClass(`v-treeview-indent-line v-treeview-indent-line--${type}`)
|
||||
}, null))]) : '', !props.hideActions && _createVNode(VListItemAction, {
|
||||
"start": true
|
||||
}, {
|
||||
default: () => [props.toggleIcon ? _createElementVNode(_Fragment, null, [!slots.toggle ? _createVNode(VBtn, {
|
||||
"key": "prepend-toggle",
|
||||
"density": "compact",
|
||||
"icon": props.toggleIcon,
|
||||
"loading": props.loading,
|
||||
"variant": "text",
|
||||
"onClick": onClickAction
|
||||
}, {
|
||||
loader: () => _createVNode(VProgressCircular, {
|
||||
"indeterminate": "disable-shrink",
|
||||
"size": "20",
|
||||
"width": "2"
|
||||
}, null)
|
||||
}) : _createVNode(VDefaultsProvider, {
|
||||
"key": "prepend-defaults",
|
||||
"defaults": {
|
||||
VBtn: {
|
||||
density: 'compact',
|
||||
icon: props.toggleIcon,
|
||||
variant: 'text',
|
||||
loading: props.loading
|
||||
},
|
||||
VProgressCircular: {
|
||||
indeterminate: 'disable-shrink',
|
||||
size: 20,
|
||||
width: 2
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [slots.toggle({
|
||||
...slotProps,
|
||||
loading: props.loading,
|
||||
props: {
|
||||
onClick: onClickAction
|
||||
}
|
||||
})]
|
||||
})]) : _createElementVNode("div", {
|
||||
"class": "v-treeview-item__level"
|
||||
}, null)]
|
||||
}), !props.hasCustomPrepend ? _createElementVNode(_Fragment, null, [slots.prepend?.(slotProps), props.prependAvatar && _createVNode(VAvatar, {
|
||||
"key": "prepend-avatar",
|
||||
"density": props.density,
|
||||
"image": props.prependAvatar
|
||||
}, null), props.prependIcon && _createVNode(VIcon, {
|
||||
"key": "prepend-icon",
|
||||
"density": props.density,
|
||||
"icon": props.prependIcon
|
||||
}, null)]) : _createVNode(VDefaultsProvider, {
|
||||
"key": "prepend-defaults",
|
||||
"defaults": {
|
||||
VAvatar: {
|
||||
density: props.density,
|
||||
image: props.appendAvatar
|
||||
},
|
||||
VIcon: {
|
||||
density: props.density,
|
||||
icon: props.appendIcon
|
||||
},
|
||||
VListItemAction: {
|
||||
start: true
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [slots.prepend?.(slotProps)]
|
||||
})]);
|
||||
} : undefined
|
||||
});
|
||||
});
|
||||
return forwardRefs({}, vListItemRef);
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VTreeviewItem.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+111
@@ -0,0 +1,111 @@
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-treeview-item
|
||||
--list-indent-size: #{$treeview-indent-size}
|
||||
&.v-treeview-item--filtered
|
||||
display: none
|
||||
|
||||
&.v-list-item--disabled:not(a)
|
||||
pointer-events: auto
|
||||
|
||||
.v-selection-control
|
||||
pointer-events: none
|
||||
|
||||
|
||||
&__level
|
||||
width: #{$treeview-indent-size}
|
||||
|
||||
.v-treeview--fluid &
|
||||
width: 0
|
||||
|
||||
.v-treeview
|
||||
--v-treeview-indent-line-color: #{$treeview-indent-line-color}
|
||||
--v-treeview-indent-line-opacity: #{$treeview-indent-lines-opacity}
|
||||
|
||||
&.v-list
|
||||
--indent-padding: #{$treeview-indent-padding}
|
||||
|
||||
&.v-list--disabled .v-list-item__prepend
|
||||
pointer-events: auto
|
||||
|
||||
.v-list-item--slim > .v-list-item__prepend
|
||||
> .v-icon ~ .v-list-item__spacer
|
||||
width: var(--v-list-prepend-gap, $treeview-item-spacer-width)
|
||||
|
||||
&:not(:has(.v-list-item-action))
|
||||
> .v-icon
|
||||
margin-inline-start: $treeview-item-first-icon-margin-start
|
||||
|
||||
&:has(.v-treeview-indent-lines)
|
||||
.v-list-item-action:first-child,
|
||||
.v-treeview-indent-lines + .v-list-item-action
|
||||
> .v-selection-control
|
||||
margin-inline: min(0px, calc(-1 * (var(--v-selection-control-size) - #{$treeview-indent-size}) / 2))
|
||||
|
||||
.v-treeview-indent-lines
|
||||
position: absolute
|
||||
inset-inline-start: 0
|
||||
height: 100%
|
||||
display: grid
|
||||
padding-inline-start: $treeview-indent-lines-padding-left
|
||||
padding-block: $treeview-indent-lines-gap
|
||||
grid-template-columns: repeat(var(--v-indent-parts, 1), var(--prepend-width))
|
||||
opacity: var(--v-treeview-indent-line-opacity)
|
||||
pointer-events: none
|
||||
|
||||
.v-treeview-indent-line
|
||||
&,
|
||||
&::before
|
||||
border: 0px $treeview-indent-line-style var(--v-treeview-indent-line-color)
|
||||
|
||||
&--leaf,
|
||||
&--line
|
||||
border-inline-start-width: $treeview-indent-line-width
|
||||
height: 100%
|
||||
width: calc(50% + #{$treeview-indent-line-width-half})
|
||||
justify-self: end
|
||||
|
||||
&--leaf
|
||||
position: relative
|
||||
|
||||
&::before
|
||||
content: ''
|
||||
position: absolute
|
||||
border-bottom-width: $treeview-indent-line-width
|
||||
height: calc(50% + #{$treeview-indent-line-width-half})
|
||||
width: 100%
|
||||
|
||||
&:last-child::before
|
||||
width: calc(100% - $treeview-indent-line-leaf-margin-right)
|
||||
|
||||
&--leaf-link
|
||||
border-bottom-width: $treeview-indent-line-width
|
||||
height: calc(50% + #{$treeview-indent-line-width-half})
|
||||
margin-inline-start: $treeview-indent-lines-gap
|
||||
margin-inline-end: $treeview-indent-line-leaf-link-margin-right
|
||||
|
||||
&--last-leaf
|
||||
border-inline-start-width: $treeview-indent-line-width
|
||||
border-bottom-width: $treeview-indent-line-width
|
||||
height: calc(50% + #{$treeview-indent-line-width-half})
|
||||
margin-inline-start: calc(50% - #{$treeview-indent-line-width-half})
|
||||
border-bottom-left-radius: $treeview-indent-line-border-radius
|
||||
|
||||
@include tools.rtl()
|
||||
border-bottom-left-radius: 0
|
||||
border-bottom-right-radius: $treeview-indent-line-border-radius
|
||||
|
||||
&:last-child
|
||||
margin-inline-end: $treeview-indent-line-leaf-margin-right
|
||||
|
||||
.v-treeview-group.v-list-group
|
||||
--list-indent-size: 0px
|
||||
|
||||
& > .v-treeview-item__level
|
||||
width: 0px
|
||||
|
||||
.v-list-group__items .v-list-item
|
||||
@include tools.layer('overrides')
|
||||
padding-inline-start: calc(var(--indent-padding))
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
@use 'sass:map';
|
||||
@use 'sass:math';
|
||||
|
||||
$treeview-item-spacer-width: 10px !default;
|
||||
$treeview-item-first-icon-margin-start: -6px !default;
|
||||
|
||||
$treeview-indent-size: 28px !default; // 28px here to match the width of the expand toggle VBtn.
|
||||
$treeview-indent-padding: 16px !default;
|
||||
|
||||
$treeview-indent-lines-padding-left: 8px !default;
|
||||
$treeview-indent-lines-gap: 0 !default;
|
||||
$treeview-indent-lines-opacity: .4 !default;
|
||||
$treeview-indent-line-width: 1px !default;
|
||||
$treeview-indent-line-width-half: math.round(math.div($treeview-indent-line-width, 2)) !default;
|
||||
$treeview-indent-line-color: rgb(var(--v-theme-on-surface)) !default;
|
||||
$treeview-indent-line-style: solid !default;
|
||||
$treeview-indent-line-leaf-link-margin-right: 6px !default;
|
||||
$treeview-indent-line-leaf-margin-right: 4px !default;
|
||||
$treeview-indent-line-border-radius: 4px !default;
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
export { VTreeview } from './VTreeview.js';
|
||||
export { VTreeviewItem } from './VTreeviewItem.js';
|
||||
export { VTreeviewGroup } from './VTreeviewGroup.js';
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
export { VTreeview } from "./VTreeview.js";
|
||||
export { VTreeviewItem } from "./VTreeviewItem.js";
|
||||
export { VTreeviewGroup } from "./VTreeviewGroup.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VTreeview","VTreeviewItem","VTreeviewGroup"],"sources":["../../../src/components/VTreeview/index.ts"],"sourcesContent":["export { VTreeview } from './VTreeview'\nexport { VTreeviewItem } from './VTreeviewItem'\nexport { VTreeviewGroup } from './VTreeviewGroup'\n"],"mappings":"SAASA,SAAS;AAAA,SACTC,aAAa;AAAA,SACbC,cAAc","ignoreList":[]}
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
import type { ComputedRef, InjectionKey } from 'vue';
|
||||
import type { ListItemSlot } from '../VList/VListItem.js';
|
||||
export interface TreeViewProvide {
|
||||
visibleIds: ComputedRef<Set<unknown> | null>;
|
||||
}
|
||||
export type ToggleListItemSlot = ListItemSlot & {
|
||||
props: {
|
||||
onClick: (e: PointerEvent) => void;
|
||||
};
|
||||
};
|
||||
export declare const VTreeviewSymbol: InjectionKey<TreeViewProvide>;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
// Types
|
||||
|
||||
export const VTreeviewSymbol = Symbol.for('vuetify:v-treeview');
|
||||
//# sourceMappingURL=shared.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"shared.js","names":["VTreeviewSymbol","Symbol","for"],"sources":["../../../src/components/VTreeview/shared.ts"],"sourcesContent":["// Types\nimport type { ComputedRef, InjectionKey } from 'vue'\nimport type { ListItemSlot } from '@/components/VList/VListItem'\n\nexport interface TreeViewProvide {\n visibleIds: ComputedRef<Set<unknown> | null>\n}\n\nexport type ToggleListItemSlot = ListItemSlot & {\n props: { onClick: (e: PointerEvent) => void }\n}\n\nexport const VTreeviewSymbol: InjectionKey<TreeViewProvide> = Symbol.for('vuetify:v-treeview')\n"],"mappings":"AAAA;;AAYA,OAAO,MAAMA,eAA8C,GAAGC,MAAM,CAACC,GAAG,CAAC,oBAAoB,CAAC","ignoreList":[]}
|
||||
Reference in New Issue
Block a user