routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+112
@@ -0,0 +1,112 @@
|
||||
@layer vuetify-components {
|
||||
.v-list {
|
||||
overflow: auto;
|
||||
padding: 8px 0;
|
||||
position: relative;
|
||||
outline: none;
|
||||
}
|
||||
.v-list {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
.v-list--border {
|
||||
border-width: thin;
|
||||
box-shadow: none;
|
||||
}
|
||||
.v-list {
|
||||
box-shadow: 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 0%, transparent);
|
||||
}
|
||||
.v-list {
|
||||
border-radius: 0;
|
||||
}
|
||||
.v-list {
|
||||
background: rgba(var(--v-theme-surface));
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface)) calc(var(--v-high-emphasis-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-list--disabled {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
.v-list--nav {
|
||||
padding-inline: 8px;
|
||||
}
|
||||
.v-list--nav .v-list-item:not(:first-child),
|
||||
.v-list--nav .v-list-group:not(:first-child) > .v-list-item,
|
||||
.v-list--nav .v-list-group__items > .v-list-item,
|
||||
.v-list--nav .v-list-group__items > .v-list-group {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.v-list--rounded {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.v-list--subheader {
|
||||
padding-top: 0;
|
||||
}
|
||||
.v-list-img {
|
||||
border-radius: inherit;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
.v-list-subheader {
|
||||
align-items: center;
|
||||
background: inherit;
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface)) calc(var(--v-medium-emphasis-opacity) * 100%), transparent);
|
||||
display: flex;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.375rem;
|
||||
padding-inline-end: 16px;
|
||||
min-height: 40px;
|
||||
transition: 0.2s min-height cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.v-list-subheader__text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.v-list--density-default .v-list-subheader {
|
||||
min-height: 40px;
|
||||
padding-inline-start: calc(16px + var(--indent-padding));
|
||||
}
|
||||
.v-list--density-comfortable .v-list-subheader {
|
||||
min-height: 36px;
|
||||
padding-inline-start: calc(16px + var(--indent-padding));
|
||||
}
|
||||
.v-list--density-compact .v-list-subheader {
|
||||
min-height: 32px;
|
||||
padding-inline-start: calc(16px + var(--indent-padding));
|
||||
}
|
||||
.v-list-subheader--inset {
|
||||
--indent-padding: 56px;
|
||||
}
|
||||
.v-list--nav .v-list-subheader {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.v-list-subheader--sticky {
|
||||
background: inherit;
|
||||
left: 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.v-list__overlay {
|
||||
background-color: currentColor;
|
||||
border-radius: inherit;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
+1083
File diff suppressed because it is too large
Load Diff
+329
@@ -0,0 +1,329 @@
|
||||
import { createVNode as _createVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Styles
|
||||
import "./VList.css";
|
||||
|
||||
// Components
|
||||
import { VListChildren } from "./VListChildren.js"; // Composables
|
||||
import { createList } from "./list.js";
|
||||
import { makeBorderProps, useBorder } from "../../composables/border.js";
|
||||
import { useBackgroundColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { provideDefaults } from "../../composables/defaults.js";
|
||||
import { makeDensityProps, useDensity } from "../../composables/density.js";
|
||||
import { makeDimensionProps, useDimension } from "../../composables/dimensions.js";
|
||||
import { makeElevationProps, useElevation } from "../../composables/elevation.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { makeItemsProps } from "../../composables/list-items.js";
|
||||
import { makeNestedProps, useNested } from "../../composables/nested/nested.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js";
|
||||
import { makeVariantProps } from "../../composables/variant.js"; // Utilities
|
||||
import { computed, ref, shallowRef, toRef, useId, watch } from 'vue';
|
||||
import { convertToUnit, EventProp, focusChild, genericComponent, getPropertyFromItem, isPrimitive, omit, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
const itemTypes = new Set(['item', 'divider', 'subheader']);
|
||||
function transformItem(props, item) {
|
||||
const title = isPrimitive(item) ? item : getPropertyFromItem(item, props.itemTitle);
|
||||
const value = isPrimitive(item) ? item : getPropertyFromItem(item, props.itemValue, undefined);
|
||||
const children = getPropertyFromItem(item, props.itemChildren);
|
||||
const itemProps = props.itemProps === true ? omit(item, ['children']) : getPropertyFromItem(item, props.itemProps);
|
||||
let type = getPropertyFromItem(item, props.itemType, 'item');
|
||||
if (!itemTypes.has(type)) {
|
||||
type = 'item';
|
||||
}
|
||||
const _props = {
|
||||
title,
|
||||
value,
|
||||
...itemProps
|
||||
};
|
||||
return {
|
||||
type,
|
||||
title: _props.title,
|
||||
value: _props.value,
|
||||
props: _props,
|
||||
children: type === 'item' && children ? transformItems(props, children) : undefined,
|
||||
raw: item
|
||||
};
|
||||
}
|
||||
function transformItems(props, items) {
|
||||
const array = [];
|
||||
for (const item of items) {
|
||||
array.push(transformItem(props, item));
|
||||
}
|
||||
return array;
|
||||
}
|
||||
export function useListItems(props) {
|
||||
const items = computed(() => transformItems(props, props.items));
|
||||
return {
|
||||
items
|
||||
};
|
||||
}
|
||||
export const makeVListProps = propsFactory({
|
||||
baseColor: String,
|
||||
/* @deprecated */
|
||||
activeColor: String,
|
||||
activeClass: String,
|
||||
bgColor: String,
|
||||
disabled: Boolean,
|
||||
filterable: Boolean,
|
||||
expandIcon: IconValue,
|
||||
collapseIcon: IconValue,
|
||||
lines: {
|
||||
type: [Boolean, String],
|
||||
default: 'one'
|
||||
},
|
||||
slim: Boolean,
|
||||
prependGap: [Number, String],
|
||||
indent: [Number, String],
|
||||
nav: Boolean,
|
||||
navigationStrategy: {
|
||||
type: String,
|
||||
default: 'focus'
|
||||
},
|
||||
navigationIndex: Number,
|
||||
'onClick:open': EventProp(),
|
||||
'onClick:select': EventProp(),
|
||||
'onUpdate:opened': EventProp(),
|
||||
...makeNestedProps({
|
||||
selectStrategy: 'single-leaf',
|
||||
openStrategy: 'list'
|
||||
}),
|
||||
...makeBorderProps(),
|
||||
...makeComponentProps(),
|
||||
...makeDensityProps(),
|
||||
...makeDimensionProps(),
|
||||
...makeElevationProps(),
|
||||
...makeItemsProps(),
|
||||
...makeRoundedProps(),
|
||||
...makeTagProps(),
|
||||
...makeThemeProps(),
|
||||
...makeVariantProps({
|
||||
variant: 'text'
|
||||
})
|
||||
}, 'VList');
|
||||
export const VList = genericComponent()({
|
||||
name: 'VList',
|
||||
props: makeVListProps(),
|
||||
emits: {
|
||||
'update:selected': value => true,
|
||||
'update:activated': value => true,
|
||||
'update:opened': value => true,
|
||||
'update:navigationIndex': value => true,
|
||||
'click:open': value => true,
|
||||
'click:activate': value => true,
|
||||
'click:select': value => true
|
||||
},
|
||||
setup(props, {
|
||||
attrs,
|
||||
slots,
|
||||
emit
|
||||
}) {
|
||||
const {
|
||||
items
|
||||
} = useListItems(props);
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles
|
||||
} = useBackgroundColor(() => props.bgColor);
|
||||
const {
|
||||
borderClasses
|
||||
} = useBorder(props);
|
||||
const {
|
||||
densityClasses
|
||||
} = useDensity(props);
|
||||
const {
|
||||
dimensionStyles
|
||||
} = useDimension(props);
|
||||
const {
|
||||
elevationClasses
|
||||
} = useElevation(props);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props);
|
||||
const {
|
||||
children,
|
||||
open,
|
||||
parents,
|
||||
select,
|
||||
getPath
|
||||
} = useNested(props, {
|
||||
items,
|
||||
returnObject: toRef(() => props.returnObject),
|
||||
scrollToActive: toRef(() => props.navigationStrategy === 'track')
|
||||
});
|
||||
const lineClasses = toRef(() => props.lines ? `v-list--${props.lines}-line` : undefined);
|
||||
const activeColor = toRef(() => props.activeColor);
|
||||
const baseColor = toRef(() => props.baseColor);
|
||||
const color = toRef(() => props.color);
|
||||
const isSelectable = toRef(() => props.selectable || props.activatable);
|
||||
const navigationIndex = useProxiedModel(props, 'navigationIndex', -1, v => v ?? -1);
|
||||
const uid = useId();
|
||||
createList({
|
||||
filterable: props.filterable,
|
||||
trackingIndex: navigationIndex,
|
||||
navigationStrategy: toRef(() => props.navigationStrategy),
|
||||
uid
|
||||
});
|
||||
watch(items, () => {
|
||||
if (props.navigationStrategy === 'track') {
|
||||
navigationIndex.value = -1;
|
||||
}
|
||||
});
|
||||
provideDefaults({
|
||||
VListGroup: {
|
||||
activeColor,
|
||||
baseColor,
|
||||
color,
|
||||
expandIcon: toRef(() => props.expandIcon),
|
||||
collapseIcon: toRef(() => props.collapseIcon)
|
||||
},
|
||||
VListItem: {
|
||||
activeClass: toRef(() => props.activeClass),
|
||||
activeColor,
|
||||
baseColor,
|
||||
color,
|
||||
density: toRef(() => props.density),
|
||||
disabled: toRef(() => props.disabled),
|
||||
lines: toRef(() => props.lines),
|
||||
nav: toRef(() => props.nav),
|
||||
slim: toRef(() => props.slim),
|
||||
variant: toRef(() => props.variant),
|
||||
tabindex: toRef(() => props.navigationStrategy === 'track' ? -1 : undefined)
|
||||
}
|
||||
});
|
||||
const isFocused = shallowRef(false);
|
||||
const contentRef = ref();
|
||||
function onFocusin(e) {
|
||||
isFocused.value = true;
|
||||
}
|
||||
function onFocusout(e) {
|
||||
isFocused.value = false;
|
||||
}
|
||||
function onFocus(e) {
|
||||
if (props.navigationStrategy === 'track') {
|
||||
if (!~navigationIndex.value) {
|
||||
navigationIndex.value = getNextIndex('first');
|
||||
}
|
||||
} else if (!isFocused.value && !(e.relatedTarget && contentRef.value?.contains(e.relatedTarget))) focus();
|
||||
}
|
||||
function onBlur() {
|
||||
if (props.navigationStrategy === 'track') {
|
||||
navigationIndex.value = -1;
|
||||
}
|
||||
}
|
||||
function getNavigationDirection(key) {
|
||||
switch (key) {
|
||||
case 'ArrowDown':
|
||||
return 'next';
|
||||
case 'ArrowUp':
|
||||
return 'prev';
|
||||
case 'Home':
|
||||
return 'first';
|
||||
case 'End':
|
||||
return 'last';
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
function getNextIndex(direction) {
|
||||
const itemCount = items.value.length;
|
||||
if (itemCount === 0) return -1;
|
||||
let nextIndex;
|
||||
if (direction === 'first') {
|
||||
nextIndex = 0;
|
||||
} else if (direction === 'last') {
|
||||
nextIndex = itemCount - 1;
|
||||
} else {
|
||||
nextIndex = navigationIndex.value + (direction === 'next' ? 1 : -1);
|
||||
if (nextIndex < 0) nextIndex = itemCount - 1;
|
||||
if (nextIndex >= itemCount) nextIndex = 0;
|
||||
}
|
||||
const startIndex = nextIndex;
|
||||
let attempts = 0;
|
||||
while (attempts < itemCount) {
|
||||
const item = items.value[nextIndex];
|
||||
if (item && item.type !== 'divider' && item.type !== 'subheader') {
|
||||
return nextIndex;
|
||||
}
|
||||
nextIndex += direction === 'next' || direction === 'first' ? 1 : -1;
|
||||
if (nextIndex < 0) nextIndex = itemCount - 1;
|
||||
if (nextIndex >= itemCount) nextIndex = 0;
|
||||
if (nextIndex === startIndex) return -1;
|
||||
attempts++;
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
function onKeydown(e) {
|
||||
const target = e.target;
|
||||
if (!contentRef.value || target.tagName === 'INPUT' && ['Home', 'End'].includes(e.key) || target.tagName === 'TEXTAREA') {
|
||||
return;
|
||||
}
|
||||
const direction = getNavigationDirection(e.key);
|
||||
if (direction !== null) {
|
||||
e.preventDefault();
|
||||
if (props.navigationStrategy === 'track') {
|
||||
const nextIndex = getNextIndex(direction);
|
||||
if (nextIndex !== -1) {
|
||||
navigationIndex.value = nextIndex;
|
||||
}
|
||||
} else {
|
||||
focus(direction);
|
||||
}
|
||||
}
|
||||
}
|
||||
function onMousedown(e) {
|
||||
isFocused.value = true;
|
||||
}
|
||||
function focus(location) {
|
||||
if (contentRef.value) {
|
||||
return focusChild(contentRef.value, location);
|
||||
}
|
||||
}
|
||||
useRender(() => {
|
||||
const indent = props.indent ?? (props.prependGap ? Number(props.prependGap) + 24 : undefined);
|
||||
const ariaMultiselectable = isSelectable.value ? attrs.ariaMultiselectable ?? !String(props.selectStrategy).startsWith('single-') : undefined;
|
||||
return _createVNode(props.tag, {
|
||||
"ref": contentRef,
|
||||
"class": _normalizeClass(['v-list', {
|
||||
'v-list--disabled': props.disabled,
|
||||
'v-list--nav': props.nav,
|
||||
'v-list--slim': props.slim
|
||||
}, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, props.class]),
|
||||
"style": _normalizeStyle([{
|
||||
'--v-list-indent': convertToUnit(indent),
|
||||
'--v-list-group-prepend': indent ? '0px' : undefined,
|
||||
'--v-list-prepend-gap': convertToUnit(props.prependGap)
|
||||
}, backgroundColorStyles.value, dimensionStyles.value, props.style]),
|
||||
"tabindex": props.disabled ? -1 : 0,
|
||||
"role": isSelectable.value ? 'listbox' : 'list',
|
||||
"aria-activedescendant": props.navigationStrategy === 'track' && navigationIndex.value >= 0 ? `v-list-item-${uid}-${navigationIndex.value}` : undefined,
|
||||
"aria-multiselectable": ariaMultiselectable,
|
||||
"onFocusin": onFocusin,
|
||||
"onFocusout": onFocusout,
|
||||
"onFocus": onFocus,
|
||||
"onBlur": onBlur,
|
||||
"onKeydown": onKeydown,
|
||||
"onMousedown": onMousedown
|
||||
}, {
|
||||
default: () => [_createVNode(VListChildren, {
|
||||
"items": items.value,
|
||||
"returnObject": props.returnObject
|
||||
}, slots)]
|
||||
});
|
||||
});
|
||||
return {
|
||||
open,
|
||||
select,
|
||||
focus,
|
||||
children,
|
||||
parents,
|
||||
getPath,
|
||||
navigationIndex
|
||||
};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VList.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+97
@@ -0,0 +1,97 @@
|
||||
@use 'sass:list'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-list
|
||||
overflow: auto
|
||||
padding: $list-padding
|
||||
position: relative
|
||||
outline: none
|
||||
|
||||
@include tools.border($list-border...)
|
||||
@include tools.elevation($list-elevation)
|
||||
@include tools.rounded($list-border-radius)
|
||||
@include tools.theme($list-theme...)
|
||||
|
||||
&--disabled
|
||||
pointer-events: none
|
||||
user-select: none
|
||||
|
||||
&--nav
|
||||
padding-inline: $list-nav-padding
|
||||
|
||||
.v-list-item:not(:first-child),
|
||||
.v-list-group:not(:first-child) > .v-list-item,
|
||||
.v-list-group__items > .v-list-item,
|
||||
.v-list-group__items > .v-list-group
|
||||
margin-top: $list-item-nav-margin-top
|
||||
|
||||
&--rounded
|
||||
@include tools.rounded($list-rounded-border-radius)
|
||||
|
||||
&--subheader
|
||||
padding-top: $list-subheader-padding-top
|
||||
|
||||
.v-list-img
|
||||
border-radius: inherit
|
||||
display: flex
|
||||
height: 100%
|
||||
left: 0
|
||||
overflow: hidden
|
||||
position: absolute
|
||||
top: 0
|
||||
width: 100%
|
||||
z-index: -1
|
||||
|
||||
.v-list-subheader
|
||||
$root: &
|
||||
|
||||
align-items: center
|
||||
background: inherit
|
||||
color: $list-subheader-color
|
||||
display: flex
|
||||
font-size: $list-subheader-font-size
|
||||
font-weight: $list-subheader-font-weight
|
||||
line-height: $list-subheader-line-height
|
||||
padding-inline-end: $list-subheader-padding-end
|
||||
min-height: $list-subheader-min-height
|
||||
transition: $list-subheader-transition
|
||||
|
||||
&__text
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
white-space: nowrap
|
||||
|
||||
@at-root
|
||||
@include tools.density('v-list', $list-density) using ($modifier)
|
||||
$base-padding: list.nth($list-item-padding, 2)
|
||||
|
||||
#{$root}
|
||||
min-height: $list-subheader-min-height + ($modifier * $list-subheader-min-height-multiplier)
|
||||
padding-inline-start: calc(#{$base-padding} + var(--indent-padding))
|
||||
|
||||
&--inset
|
||||
--indent-padding: #{$list-subheader-inset-padding-start}
|
||||
|
||||
.v-list--nav &
|
||||
font-size: $list-nav-subheader-font-size
|
||||
|
||||
&--sticky
|
||||
background: inherit
|
||||
left: 0
|
||||
position: sticky
|
||||
top: 0
|
||||
z-index: 1
|
||||
|
||||
.v-list__overlay
|
||||
background-color: currentColor
|
||||
border-radius: inherit
|
||||
bottom: 0
|
||||
left: 0
|
||||
opacity: 0
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
transition: opacity 0.2s ease-in-out
|
||||
+158
@@ -0,0 +1,158 @@
|
||||
import type { PropType } from 'vue';
|
||||
import type { InternalListItem } from './VList.js';
|
||||
import type { VListItemSlots } from './VListItem.js';
|
||||
import type { GenericProps } from '../../util/index.js';
|
||||
export type VListChildrenSlots<T> = {
|
||||
[K in keyof Omit<VListItemSlots, 'default'>]: VListItemSlots[K] & {
|
||||
item: T;
|
||||
};
|
||||
} & {
|
||||
default: never;
|
||||
item: {
|
||||
props: InternalListItem['props'] & {
|
||||
index: number;
|
||||
};
|
||||
};
|
||||
divider: {
|
||||
props: InternalListItem['props'];
|
||||
};
|
||||
subheader: {
|
||||
props: InternalListItem['props'];
|
||||
};
|
||||
header: {
|
||||
props: InternalListItem['props'];
|
||||
};
|
||||
};
|
||||
export declare const makeVListChildrenProps: <Defaults extends {
|
||||
items?: unknown;
|
||||
returnObject?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
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"];
|
||||
};
|
||||
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"];
|
||||
};
|
||||
};
|
||||
export declare const VListChildren: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{} & {}, () => (import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[] | JSX.Element)[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "items" | "returnObject" | "v-slot:append" | "v-slot:default" | "v-slot:divider" | "v-slot:header" | "v-slot:item" | "v-slot:prepend" | "v-slot:subheader" | "v-slot:subtitle" | "v-slot:title" | "v-slots">, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {}, true, {}, import("vue").SlotsType<Partial<{
|
||||
prepend: (arg: import("./VListItem.js").ListItemSlot & {
|
||||
item: InternalListItem<any>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: (arg: import("./VListItem.js").ListItemSlot & {
|
||||
item: InternalListItem<any>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: (arg: import("./VListItem.js").ListItemTitleSlot & {
|
||||
item: InternalListItem<any>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
subtitle: (arg: import("./VListItem.js").ListItemSubtitleSlot & {
|
||||
item: 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'] & {
|
||||
index: number;
|
||||
};
|
||||
}) => 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;
|
||||
}>[];
|
||||
header: (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: {};
|
||||
}, {} & {}, () => (import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[] | JSX.Element)[] | undefined, {}, {}, {}, {}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{} & {}, () => (import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[] | JSX.Element)[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "items" | "returnObject" | "v-slot:append" | "v-slot:default" | "v-slot:divider" | "v-slot:header" | "v-slot:item" | "v-slot:prepend" | "v-slot:subheader" | "v-slot:subtitle" | "v-slot:title" | "v-slots">, string, {}, {}, string, import("vue").SlotsType<Partial<{
|
||||
prepend: (arg: import("./VListItem.js").ListItemSlot & {
|
||||
item: InternalListItem<any>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: (arg: import("./VListItem.js").ListItemSlot & {
|
||||
item: InternalListItem<any>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: (arg: import("./VListItem.js").ListItemTitleSlot & {
|
||||
item: InternalListItem<any>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
subtitle: (arg: import("./VListItem.js").ListItemSubtitleSlot & {
|
||||
item: 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'] & {
|
||||
index: number;
|
||||
};
|
||||
}) => 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;
|
||||
}>[];
|
||||
header: (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[];
|
||||
returnObject?: boolean;
|
||||
}, slots: VListChildrenSlots<T>) => GenericProps<typeof props, typeof slots>) & import("../../util/index.js").FilterPropsOptions<{
|
||||
items: PropType<readonly InternalListItem[]>;
|
||||
returnObject: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
items: PropType<readonly InternalListItem[]>;
|
||||
returnObject: BooleanConstructor;
|
||||
}>>;
|
||||
+88
@@ -0,0 +1,88 @@
|
||||
import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
|
||||
// Components
|
||||
import { VListGroup } from "./VListGroup.js";
|
||||
import { VListItem } from "./VListItem.js";
|
||||
import { VListSubheader } from "./VListSubheader.js";
|
||||
import { VDivider } from "../VDivider/index.js"; // Utilities
|
||||
import { mergeProps } from 'vue';
|
||||
import { createList } from "./list.js";
|
||||
import { genericComponent, propsFactory } from "../../util/index.js"; // Types
|
||||
export const makeVListChildrenProps = propsFactory({
|
||||
items: Array,
|
||||
returnObject: Boolean
|
||||
}, 'VListChildren');
|
||||
export const VListChildren = genericComponent()({
|
||||
name: 'VListChildren',
|
||||
props: makeVListChildrenProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
createList();
|
||||
return () => slots.default?.() ?? props.items?.map(({
|
||||
children,
|
||||
props: itemProps,
|
||||
type,
|
||||
raw: item
|
||||
}, index) => {
|
||||
if (type === 'divider') {
|
||||
return slots.divider?.({
|
||||
props: itemProps
|
||||
}) ?? _createVNode(VDivider, itemProps, null);
|
||||
}
|
||||
if (type === 'subheader') {
|
||||
return slots.subheader?.({
|
||||
props: itemProps
|
||||
}) ?? _createVNode(VListSubheader, itemProps, null);
|
||||
}
|
||||
const slotsWithItem = {
|
||||
subtitle: slots.subtitle ? slotProps => slots.subtitle?.({
|
||||
...slotProps,
|
||||
item
|
||||
}) : undefined,
|
||||
prepend: slots.prepend ? slotProps => slots.prepend?.({
|
||||
...slotProps,
|
||||
item
|
||||
}) : undefined,
|
||||
append: slots.append ? slotProps => slots.append?.({
|
||||
...slotProps,
|
||||
item
|
||||
}) : undefined,
|
||||
title: slots.title ? slotProps => slots.title?.({
|
||||
...slotProps,
|
||||
item
|
||||
}) : undefined
|
||||
};
|
||||
const listGroupProps = VListGroup.filterProps(itemProps);
|
||||
return children ? _createVNode(VListGroup, _mergeProps(listGroupProps, {
|
||||
"value": props.returnObject ? item : itemProps?.value,
|
||||
"rawId": itemProps?.value
|
||||
}), {
|
||||
activator: ({
|
||||
props: activatorProps
|
||||
}) => {
|
||||
const listItemProps = mergeProps(itemProps, activatorProps, {
|
||||
value: props.returnObject ? item : itemProps.value
|
||||
});
|
||||
return slots.header ? slots.header({
|
||||
props: listItemProps
|
||||
}) : _createVNode(VListItem, _mergeProps(listItemProps, {
|
||||
"index": index
|
||||
}), slotsWithItem);
|
||||
},
|
||||
default: () => _createVNode(VListChildren, {
|
||||
"items": children,
|
||||
"returnObject": props.returnObject
|
||||
}, slots)
|
||||
}) : slots.item ? slots.item({
|
||||
props: {
|
||||
...itemProps,
|
||||
index
|
||||
}
|
||||
}) : _createVNode(VListItem, _mergeProps(itemProps, {
|
||||
"index": index,
|
||||
"value": props.returnObject ? item : itemProps.value
|
||||
}), slotsWithItem);
|
||||
});
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VListChildren.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+360
@@ -0,0 +1,360 @@
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
export type VListGroupSlots = {
|
||||
default: never;
|
||||
activator: {
|
||||
isOpen: boolean;
|
||||
props: Record<string, unknown>;
|
||||
};
|
||||
};
|
||||
export declare const makeVListGroupProps: <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;
|
||||
subgroup?: 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"] ? {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["collapseIcon"] ? IconValue : Defaults["collapseIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["collapseIcon"] ? IconValue : Defaults["collapseIcon"] | NonNullable<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"] ? {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["expandIcon"] ? IconValue : Defaults["expandIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["expandIcon"] ? IconValue : Defaults["expandIcon"] | NonNullable<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<IconValue> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["prependIcon"] ? IconValue : Defaults["prependIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["prependIcon"] ? IconValue : Defaults["prependIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
appendIcon: unknown extends Defaults["appendIcon"] ? import("vue").PropType<IconValue> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["appendIcon"] ? IconValue : Defaults["appendIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["appendIcon"] ? IconValue : Defaults["appendIcon"] | NonNullable<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"];
|
||||
};
|
||||
subgroup: unknown extends Defaults["subgroup"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["subgroup"] ? boolean : boolean | Defaults["subgroup"]>;
|
||||
default: unknown extends Defaults["subgroup"] ? boolean : boolean | Defaults["subgroup"];
|
||||
};
|
||||
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 VListGroup: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
collapseIcon: IconValue;
|
||||
disabled: boolean;
|
||||
expandIcon: IconValue;
|
||||
fluid: boolean;
|
||||
subgroup: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
activeColor?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
rawId?: string | number | undefined;
|
||||
prependIcon?: IconValue | undefined;
|
||||
appendIcon?: 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;
|
||||
}, {
|
||||
isOpen: import("vue").ComputedRef<boolean>;
|
||||
}, 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: IconValue;
|
||||
disabled: boolean;
|
||||
expandIcon: IconValue;
|
||||
fluid: boolean;
|
||||
subgroup: 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: IconValue;
|
||||
disabled: boolean;
|
||||
expandIcon: IconValue;
|
||||
fluid: boolean;
|
||||
subgroup: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
activeColor?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
rawId?: string | number | undefined;
|
||||
prependIcon?: IconValue | undefined;
|
||||
appendIcon?: 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;
|
||||
}, {
|
||||
isOpen: import("vue").ComputedRef<boolean>;
|
||||
}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
collapseIcon: IconValue;
|
||||
disabled: boolean;
|
||||
expandIcon: IconValue;
|
||||
fluid: boolean;
|
||||
subgroup: 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: IconValue;
|
||||
disabled: boolean;
|
||||
expandIcon: IconValue;
|
||||
fluid: boolean;
|
||||
subgroup: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
activeColor?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
color?: string | undefined;
|
||||
rawId?: string | number | undefined;
|
||||
prependIcon?: IconValue | undefined;
|
||||
appendIcon?: 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;
|
||||
}, {
|
||||
isOpen: import("vue").ComputedRef<boolean>;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
collapseIcon: IconValue;
|
||||
disabled: boolean;
|
||||
expandIcon: IconValue;
|
||||
fluid: boolean;
|
||||
subgroup: 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: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
disabled: BooleanConstructor;
|
||||
expandIcon: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
rawId: (NumberConstructor | StringConstructor)[];
|
||||
prependIcon: import("vue").PropType<IconValue>;
|
||||
appendIcon: import("vue").PropType<IconValue>;
|
||||
fluid: BooleanConstructor;
|
||||
subgroup: 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: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
disabled: BooleanConstructor;
|
||||
expandIcon: {
|
||||
type: import("vue").PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
rawId: (NumberConstructor | StringConstructor)[];
|
||||
prependIcon: import("vue").PropType<IconValue>;
|
||||
appendIcon: import("vue").PropType<IconValue>;
|
||||
fluid: BooleanConstructor;
|
||||
subgroup: BooleanConstructor;
|
||||
title: StringConstructor;
|
||||
value: null;
|
||||
}>>;
|
||||
export type VListGroup = InstanceType<typeof VListGroup>;
|
||||
+126
@@ -0,0 +1,126 @@
|
||||
import { createVNode as _createVNode, vShow as _vShow, createElementVNode as _createElementVNode, withDirectives as _withDirectives, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Components
|
||||
import { VExpandTransition } from "../transitions/index.js";
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/index.js"; // Composables
|
||||
import { useList } from "./list.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { useNestedGroupActivator, useNestedItem, VNestedSymbol } from "../../composables/nested/nested.js";
|
||||
import { useSsrBoot } from "../../composables/ssrBoot.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { MaybeTransition } from "../../composables/transition.js"; // Utilities
|
||||
import { computed, inject, toRef } from 'vue';
|
||||
import { defineComponent, genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
const VListGroupActivator = defineComponent({
|
||||
name: 'VListGroupActivator',
|
||||
setup(_, {
|
||||
slots
|
||||
}) {
|
||||
useNestedGroupActivator();
|
||||
return () => slots.default?.();
|
||||
}
|
||||
});
|
||||
export const makeVListGroupProps = propsFactory({
|
||||
/* @deprecated */
|
||||
activeColor: String,
|
||||
baseColor: String,
|
||||
color: String,
|
||||
collapseIcon: {
|
||||
type: IconValue,
|
||||
default: '$collapse'
|
||||
},
|
||||
disabled: Boolean,
|
||||
expandIcon: {
|
||||
type: IconValue,
|
||||
default: '$expand'
|
||||
},
|
||||
rawId: [String, Number],
|
||||
prependIcon: IconValue,
|
||||
appendIcon: IconValue,
|
||||
fluid: Boolean,
|
||||
subgroup: Boolean,
|
||||
title: String,
|
||||
value: null,
|
||||
...makeComponentProps(),
|
||||
...makeTagProps()
|
||||
}, 'VListGroup');
|
||||
export const VListGroup = genericComponent()({
|
||||
name: 'VListGroup',
|
||||
props: makeVListGroupProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
isOpen,
|
||||
open,
|
||||
id: _id
|
||||
} = useNestedItem(() => props.value, () => props.disabled, true);
|
||||
const id = computed(() => `v-list-group--id-${String(props.rawId ?? _id.value)}`);
|
||||
const list = useList();
|
||||
const {
|
||||
isBooted
|
||||
} = useSsrBoot();
|
||||
const parent = inject(VNestedSymbol);
|
||||
const renderWhenClosed = toRef(() => parent?.root?.itemsRegistration.value === 'render');
|
||||
function onClick(e) {
|
||||
if (['INPUT', 'TEXTAREA'].includes(e.target?.tagName)) return;
|
||||
open(!isOpen.value, e);
|
||||
}
|
||||
const activatorProps = computed(() => ({
|
||||
onClick,
|
||||
class: 'v-list-group__header',
|
||||
id: id.value
|
||||
}));
|
||||
const toggleIcon = computed(() => isOpen.value ? props.collapseIcon : props.expandIcon);
|
||||
const activatorDefaults = computed(() => ({
|
||||
VListItem: {
|
||||
activeColor: props.activeColor,
|
||||
baseColor: props.baseColor,
|
||||
color: props.color,
|
||||
prependIcon: props.prependIcon || props.subgroup && toggleIcon.value,
|
||||
appendIcon: props.appendIcon || !props.subgroup && toggleIcon.value,
|
||||
title: props.title,
|
||||
value: props.value
|
||||
}
|
||||
}));
|
||||
useRender(() => _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-list-group', {
|
||||
'v-list-group--prepend': list?.hasPrepend.value,
|
||||
'v-list-group--fluid': props.fluid,
|
||||
'v-list-group--subgroup': props.subgroup,
|
||||
'v-list-group--open': isOpen.value
|
||||
}, props.class]),
|
||||
"style": _normalizeStyle(props.style)
|
||||
}, {
|
||||
default: () => [slots.activator && _createVNode(VDefaultsProvider, {
|
||||
"defaults": activatorDefaults.value
|
||||
}, {
|
||||
default: () => [_createVNode(VListGroupActivator, null, {
|
||||
default: () => [slots.activator({
|
||||
props: activatorProps.value,
|
||||
isOpen: isOpen.value
|
||||
})]
|
||||
})]
|
||||
}), _createVNode(MaybeTransition, {
|
||||
"transition": {
|
||||
component: VExpandTransition
|
||||
},
|
||||
"disabled": !isBooted.value
|
||||
}, {
|
||||
default: () => [renderWhenClosed.value ? _withDirectives(_createElementVNode("div", {
|
||||
"class": "v-list-group__items",
|
||||
"role": "group",
|
||||
"aria-labelledby": id.value
|
||||
}, [slots.default?.()]), [[_vShow, isOpen.value]]) : isOpen.value && _createElementVNode("div", {
|
||||
"class": "v-list-group__items",
|
||||
"role": "group",
|
||||
"aria-labelledby": id.value
|
||||
}, [slots.default?.()])]
|
||||
})]
|
||||
}));
|
||||
return {
|
||||
isOpen
|
||||
};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VListGroup.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+105
@@ -0,0 +1,105 @@
|
||||
export declare const VListImg: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, 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;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => 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;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => 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: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
}>>;
|
||||
export type VListImg = InstanceType<typeof VListImg>;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
// Utilities
|
||||
import { createSimpleFunctional } from "../../util/index.js";
|
||||
export const VListImg = createSimpleFunctional('v-list-img');
|
||||
//# sourceMappingURL=VListImg.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VListImg.js","names":["createSimpleFunctional","VListImg"],"sources":["../../../src/components/VList/VListImg.ts"],"sourcesContent":["// Utilities\nimport { createSimpleFunctional } from '@/util'\n\nexport const VListImg = createSimpleFunctional('v-list-img')\n\nexport type VListImg = InstanceType<typeof VListImg>\n"],"mappings":"AAAA;AAAA,SACSA,sBAAsB;AAE/B,OAAO,MAAMC,QAAQ,GAAGD,sBAAsB,CAAC,YAAY,CAAC","ignoreList":[]}
|
||||
+507
@@ -0,0 +1,507 @@
|
||||
@layer vuetify-components {
|
||||
.v-list-item {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
flex: none;
|
||||
grid-template-areas: "prepend content append";
|
||||
grid-template-columns: max-content 1fr auto;
|
||||
outline: none;
|
||||
max-width: 100%;
|
||||
padding: 4px 16px;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
.v-list-item {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
.v-list-item--border {
|
||||
border-width: thin;
|
||||
box-shadow: none;
|
||||
}
|
||||
.v-list-item:hover > .v-list-item__overlay {
|
||||
opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-list-item:focus-visible > .v-list-item__overlay {
|
||||
opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
@supports not selector(:focus-visible) {
|
||||
.v-list-item:focus > .v-list-item__overlay {
|
||||
opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
.v-list-item--active > .v-list-item__overlay, .v-list-item[aria-haspopup=menu][aria-expanded=true] > .v-list-item__overlay {
|
||||
opacity: calc(var(--v-activated-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-list-item--active:hover > .v-list-item__overlay, .v-list-item[aria-haspopup=menu][aria-expanded=true]:hover > .v-list-item__overlay {
|
||||
opacity: calc((var(--v-activated-opacity) + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-list-item--active:focus-visible > .v-list-item__overlay, .v-list-item[aria-haspopup=menu][aria-expanded=true]:focus-visible > .v-list-item__overlay {
|
||||
opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
@supports not selector(:focus-visible) {
|
||||
.v-list-item--active:focus > .v-list-item__overlay, .v-list-item[aria-haspopup=menu][aria-expanded=true]:focus > .v-list-item__overlay {
|
||||
opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
.v-list-item {
|
||||
border-radius: 0;
|
||||
}
|
||||
.v-list-item--variant-plain, .v-list-item--variant-outlined, .v-list-item--variant-text, .v-list-item--variant-tonal {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
.v-list-item--variant-plain {
|
||||
opacity: 0.62;
|
||||
}
|
||||
.v-list-item--variant-plain:focus, .v-list-item--variant-plain:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-list-item--variant-plain .v-list-item__overlay {
|
||||
display: none;
|
||||
}
|
||||
.v-list-item--variant-elevated, .v-list-item--variant-flat {
|
||||
background: rgba(var(--v-theme-surface));
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface)) calc(var(--v-high-emphasis-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-list-item--variant-elevated {
|
||||
box-shadow: 0px 1px 2px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 1px 3px 1px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 2%, transparent);
|
||||
}
|
||||
.v-list-item--variant-flat {
|
||||
box-shadow: 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 0%, transparent);
|
||||
}
|
||||
.v-list-item--variant-outlined {
|
||||
border: thin solid currentColor;
|
||||
}
|
||||
.v-list-item--variant-text .v-list-item__overlay {
|
||||
background: currentColor;
|
||||
}
|
||||
.v-list-item--variant-tonal .v-list-item__underlay {
|
||||
background: currentColor;
|
||||
opacity: var(--v-activated-opacity);
|
||||
border-radius: inherit;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-list-item .v-list-item__underlay {
|
||||
position: absolute;
|
||||
}
|
||||
.v-list-item--focus-visible .v-list-item__overlay {
|
||||
opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
@supports selector(:focus-visible) {
|
||||
.v-list-item::after {
|
||||
pointer-events: none;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
.v-list-item::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.v-list-item:focus-visible::after, .v-list-item--focus-visible::after {
|
||||
opacity: calc(0.15 * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
.v-list-item__prepend > .v-badge .v-icon,
|
||||
.v-list-item__prepend > .v-icon, .v-list-item__append > .v-badge .v-icon,
|
||||
.v-list-item__append > .v-icon {
|
||||
opacity: var(--v-medium-emphasis-opacity);
|
||||
}
|
||||
.v-list-item--active .v-list-item__prepend > .v-badge .v-icon,
|
||||
.v-list-item--active .v-list-item__prepend > .v-icon,
|
||||
.v-list-item--active .v-list-item__append > .v-badge .v-icon,
|
||||
.v-list-item--active .v-list-item__append > .v-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-list-item--active:not(.v-list-item--link) .v-list-item__overlay {
|
||||
opacity: calc(var(--v-activated-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-list-item--rounded {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.v-list-item--disabled {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.v-list-item--link {
|
||||
cursor: pointer;
|
||||
}
|
||||
.v-navigation-drawer--rail:not(.v-navigation-drawer--expand-on-hover) .v-list-item .v-avatar, .v-navigation-drawer--rail.v-navigation-drawer--expand-on-hover:not(.v-navigation-drawer--is-hovering) .v-list-item .v-avatar {
|
||||
--v-avatar-height: 24px;
|
||||
}
|
||||
.v-list-item__prepend {
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
grid-area: prepend;
|
||||
}
|
||||
.v-list-item__prepend * ~ .v-list-item__spacer {
|
||||
width: var(--v-list-prepend-gap);
|
||||
}
|
||||
.v-list-item__prepend > .v-badge ~ .v-list-item__spacer,
|
||||
.v-list-item__prepend > .v-icon ~ .v-list-item__spacer,
|
||||
.v-list-item__prepend > .v-tooltip ~ .v-list-item__spacer {
|
||||
width: var(--v-list-prepend-gap, 32px);
|
||||
}
|
||||
.v-list-item__prepend > .v-avatar ~ .v-list-item__spacer,
|
||||
.v-list-item__prepend > .v-badge:is(:has(.v-avatar)) ~ .v-list-item__spacer {
|
||||
width: var(--v-list-prepend-gap, 16px);
|
||||
}
|
||||
.v-list-item--slim .v-list-item__prepend > .v-badge ~ .v-list-item__spacer,
|
||||
.v-list-item--slim .v-list-item__prepend > .v-icon ~ .v-list-item__spacer,
|
||||
.v-list-item--slim .v-list-item__prepend > .v-tooltip ~ .v-list-item__spacer {
|
||||
width: var(--v-list-prepend-gap, 20px);
|
||||
}
|
||||
.v-list-item--slim .v-list-item__prepend > .v-avatar ~ .v-list-item__spacer,
|
||||
.v-list-item--slim .v-list-item__prepend > .v-badge:is(:has(.v-avatar)) ~ .v-list-item__spacer {
|
||||
width: var(--v-list-prepend-gap, 4px);
|
||||
}
|
||||
.v-list-item--slim .v-list-item__prepend > .v-list-item-action ~ .v-list-item__spacer {
|
||||
width: var(--v-list-prepend-gap, 4px);
|
||||
}
|
||||
.v-list-item--three-line .v-list-item__prepend {
|
||||
align-self: start;
|
||||
}
|
||||
.v-list-item__append {
|
||||
align-self: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
grid-area: append;
|
||||
}
|
||||
.v-list-item__append .v-list-item__spacer {
|
||||
order: -1;
|
||||
transition: 150ms width cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.v-list-item__append * ~ .v-list-item__spacer {
|
||||
width: var(--v-list-prepend-gap);
|
||||
}
|
||||
.v-list-item__append > .v-badge ~ .v-list-item__spacer,
|
||||
.v-list-item__append > .v-icon ~ .v-list-item__spacer,
|
||||
.v-list-item__append > .v-tooltip ~ .v-list-item__spacer {
|
||||
width: var(--v-list-prepend-gap, 32px);
|
||||
}
|
||||
.v-list-item__append > .v-avatar ~ .v-list-item__spacer,
|
||||
.v-list-item__append > .v-badge:is(:has(.v-avatar)) ~ .v-list-item__spacer {
|
||||
width: var(--v-list-prepend-gap, 16px);
|
||||
}
|
||||
.v-list-item__append > .v-list-item-action ~ .v-list-item__spacer {
|
||||
width: var(--v-list-prepend-gap, 16px);
|
||||
}
|
||||
.v-list-item--slim .v-list-item__append > .v-badge ~ .v-list-item__spacer,
|
||||
.v-list-item--slim .v-list-item__append > .v-icon ~ .v-list-item__spacer,
|
||||
.v-list-item--slim .v-list-item__append > .v-tooltip ~ .v-list-item__spacer {
|
||||
width: var(--v-list-slim-spacer-width, 20px);
|
||||
}
|
||||
.v-list-item--slim .v-list-item__append > .v-avatar ~ .v-list-item__spacer,
|
||||
.v-list-item--slim .v-list-item__append > .v-badge:is(:has(.v-avatar)) ~ .v-list-item__spacer {
|
||||
width: var(--v-list-prepend-gap, 4px);
|
||||
}
|
||||
.v-list-item--slim .v-list-item__append > .v-list-item-action ~ .v-list-item__spacer {
|
||||
width: var(--v-list-prepend-gap, 4px);
|
||||
}
|
||||
.v-list-item--three-line .v-list-item__append {
|
||||
align-self: start;
|
||||
}
|
||||
.v-list-item__content {
|
||||
align-self: center;
|
||||
grid-area: content;
|
||||
overflow: hidden;
|
||||
min-width: 40px;
|
||||
}
|
||||
.v-navigation-drawer--rail:not(.v-navigation-drawer--expand-on-hover) .v-list-item__content, .v-navigation-drawer--rail.v-navigation-drawer--expand-on-hover:not(.v-navigation-drawer--is-hovering) .v-list-item__content {
|
||||
min-width: 0;
|
||||
}
|
||||
.v-list-item-action {
|
||||
align-self: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: none;
|
||||
transition: inherit;
|
||||
transition-property: height, width;
|
||||
}
|
||||
.v-list-item-action--start {
|
||||
margin-inline-end: 8px;
|
||||
margin-inline-start: -8px;
|
||||
}
|
||||
.v-list-item-action--end {
|
||||
margin-inline-start: 8px;
|
||||
margin-inline-end: -8px;
|
||||
}
|
||||
.v-list-item-media {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.v-list-item-media--start {
|
||||
margin-inline-end: 16px;
|
||||
}
|
||||
.v-list-item-media--end {
|
||||
margin-inline-start: 16px;
|
||||
}
|
||||
.v-list-item--two-line .v-list-item-media {
|
||||
margin-top: -4px;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
.v-list-item--three-line .v-list-item-media {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.v-list-item-subtitle {
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
opacity: var(--v-list-item-subtitle-opacity, var(--v-medium-emphasis-opacity));
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
text-overflow: ellipsis;
|
||||
overflow-wrap: break-word;
|
||||
word-break: initial;
|
||||
}
|
||||
.v-list-item--one-line .v-list-item-subtitle {
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
.v-list-item--two-line .v-list-item-subtitle {
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.v-list-item--three-line .v-list-item-subtitle {
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
.v-list-item-subtitle {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.0178571429em;
|
||||
line-height: 1rem;
|
||||
text-transform: none;
|
||||
}
|
||||
.v-list-item--nav .v-list-item-subtitle {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.0178571429em;
|
||||
line-height: 1rem;
|
||||
}
|
||||
.v-list-item-title {
|
||||
hyphens: auto;
|
||||
overflow-wrap: normal;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
word-break: normal;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.v-list-item-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.03125em;
|
||||
line-height: 1.5;
|
||||
text-transform: none;
|
||||
}
|
||||
.v-list-item--nav .v-list-item-title {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: normal;
|
||||
line-height: 1rem;
|
||||
}
|
||||
.v-list-item--density-default {
|
||||
min-height: 40px;
|
||||
}
|
||||
.v-list-item--density-default.v-list-item--one-line {
|
||||
min-height: 48px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
.v-list-item--density-default.v-list-item--two-line {
|
||||
min-height: 64px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.v-list-item--density-default.v-list-item--three-line {
|
||||
min-height: 88px;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.v-list-item--density-default.v-list-item--three-line .v-list-item__prepend,
|
||||
.v-list-item--density-default.v-list-item--three-line .v-list-item__append {
|
||||
padding-top: 8px;
|
||||
}
|
||||
.v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line {
|
||||
padding-inline: 16px;
|
||||
}
|
||||
.v-list-item--density-default:not(.v-list-item--nav).v-list-item--two-line {
|
||||
padding-inline: 16px;
|
||||
}
|
||||
.v-list-item--density-default:not(.v-list-item--nav).v-list-item--three-line {
|
||||
padding-inline: 16px;
|
||||
}
|
||||
.v-list-item--density-comfortable {
|
||||
min-height: 36px;
|
||||
}
|
||||
.v-list-item--density-comfortable.v-list-item--one-line {
|
||||
min-height: 44px;
|
||||
}
|
||||
.v-list-item--density-comfortable.v-list-item--two-line {
|
||||
min-height: 60px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.v-list-item--density-comfortable.v-list-item--three-line {
|
||||
min-height: 84px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.v-list-item--density-comfortable.v-list-item--three-line .v-list-item__prepend,
|
||||
.v-list-item--density-comfortable.v-list-item--three-line .v-list-item__append {
|
||||
padding-top: 6px;
|
||||
}
|
||||
.v-list-item--density-comfortable:not(.v-list-item--nav).v-list-item--one-line {
|
||||
padding-inline: 16px;
|
||||
}
|
||||
.v-list-item--density-comfortable:not(.v-list-item--nav).v-list-item--two-line {
|
||||
padding-inline: 16px;
|
||||
}
|
||||
.v-list-item--density-comfortable:not(.v-list-item--nav).v-list-item--three-line {
|
||||
padding-inline: 16px;
|
||||
}
|
||||
.v-list-item--density-compact {
|
||||
min-height: 32px;
|
||||
}
|
||||
.v-list-item--density-compact.v-list-item--one-line {
|
||||
min-height: 40px;
|
||||
}
|
||||
.v-list-item--density-compact.v-list-item--two-line {
|
||||
min-height: 56px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
.v-list-item--density-compact.v-list-item--three-line {
|
||||
min-height: 80px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.v-list-item--density-compact.v-list-item--three-line .v-list-item__prepend,
|
||||
.v-list-item--density-compact.v-list-item--three-line .v-list-item__append {
|
||||
padding-top: 4px;
|
||||
}
|
||||
.v-list-item--density-compact:not(.v-list-item--nav).v-list-item--one-line {
|
||||
padding-inline: 16px;
|
||||
}
|
||||
.v-list-item--density-compact:not(.v-list-item--nav).v-list-item--two-line {
|
||||
padding-inline: 16px;
|
||||
}
|
||||
.v-list-item--density-compact:not(.v-list-item--nav).v-list-item--three-line {
|
||||
padding-inline: 16px;
|
||||
}
|
||||
.v-list-item--nav {
|
||||
padding-inline: 8px;
|
||||
}
|
||||
.v-list-item__underlay {
|
||||
position: absolute;
|
||||
}
|
||||
.v-list-item__overlay {
|
||||
background-color: currentColor;
|
||||
border-radius: inherit;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: 0.2s ease-in-out;
|
||||
transition-property: opacity, color;
|
||||
}
|
||||
.v-list-item--active.v-list-item--variant-elevated .v-list-item__overlay {
|
||||
--v-theme-overlay-multiplier: 0;
|
||||
}
|
||||
.v-list {
|
||||
--indent-padding: 0px;
|
||||
}
|
||||
.v-list--nav {
|
||||
--indent-padding: -8px;
|
||||
}
|
||||
.v-list-group {
|
||||
--list-indent-size: 16px;
|
||||
--parent-padding: var(--indent-padding);
|
||||
--prepend-width: var(--v-list-group-prepend, 40px);
|
||||
}
|
||||
.v-list--slim .v-list-group {
|
||||
--prepend-width: var(--v-list-group-prepend, 28px);
|
||||
}
|
||||
.v-list-group--fluid {
|
||||
--list-indent-size: 0px;
|
||||
}
|
||||
.v-list-group--prepend {
|
||||
--parent-padding: calc(var(--indent-padding) + var(--prepend-width));
|
||||
}
|
||||
.v-list-group--fluid.v-list-group--prepend {
|
||||
--parent-padding: var(--indent-padding);
|
||||
}
|
||||
.v-list-group__items {
|
||||
--indent-padding: calc(var(--parent-padding) + var(--v-list-indent, var(--list-indent-size)));
|
||||
min-width: min-content;
|
||||
}
|
||||
.v-navigation-drawer--rail .v-list-group__items {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
@layer vuetify-overrides {
|
||||
.v-list-group__items .v-list-item {
|
||||
padding-inline-start: calc(16px + var(--indent-padding));
|
||||
}
|
||||
}
|
||||
@layer vuetify-components {
|
||||
.v-list-group__header:not(.v-treeview-item--activatable-group-activator).v-list-item--active:not(:focus-visible) .v-list-item__overlay {
|
||||
opacity: 0;
|
||||
}
|
||||
.v-list-group__header:not(.v-treeview-item--activatable-group-activator).v-list-item--active:hover .v-list-item__overlay {
|
||||
opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
@layer vuetify-final.trumps {
|
||||
@media (forced-colors: active) {
|
||||
.v-list-item--link:not(.v-list-item--active) {
|
||||
color: buttontext;
|
||||
}
|
||||
.v-list-item--link[href]:not(.v-list-item--active) {
|
||||
color: unset;
|
||||
}
|
||||
.v-list-item--active:not(.v-list-item--disabled) [class*=v-list-item-],
|
||||
.v-list-item--active:not(.v-list-item--disabled) [class*=v-list-item-] > *,
|
||||
.v-list-item--active:not(.v-list-item--disabled) .v-icon {
|
||||
color: highlight;
|
||||
}
|
||||
.v-list-item--active:not(.v-list-item--variant-text, .v-list-item--variant-plain):not(.v-list-item--disabled) {
|
||||
background: highlight;
|
||||
}
|
||||
.v-list-item--active:not(.v-list-item--variant-text, .v-list-item--variant-plain):not(.v-list-item--disabled) [class*=v-list-item-],
|
||||
.v-list-item--active:not(.v-list-item--variant-text, .v-list-item--variant-plain):not(.v-list-item--disabled) [class*=v-list-item-] > *,
|
||||
.v-list-item--active:not(.v-list-item--variant-text, .v-list-item--variant-plain):not(.v-list-item--disabled) .v-icon {
|
||||
opacity: 1;
|
||||
color: highlighttext;
|
||||
forced-color-adjust: preserve-parent-color;
|
||||
}
|
||||
.v-list-item--focus-visible::after {
|
||||
opacity: 1;
|
||||
}
|
||||
@supports selector(:focus-visible) {
|
||||
.v-list-item::after {
|
||||
color: buttontext;
|
||||
}
|
||||
.v-list-item:focus-visible::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+940
@@ -0,0 +1,940 @@
|
||||
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
import type { PropType } from 'vue';
|
||||
import type { RippleDirectiveBinding } from '../../directives/ripple/index.js';
|
||||
export type ListItemSlot = {
|
||||
index?: number;
|
||||
depth?: number;
|
||||
path?: number[];
|
||||
isFirst?: boolean;
|
||||
isLast?: boolean;
|
||||
isActive: boolean;
|
||||
isOpen: boolean;
|
||||
isSelected: boolean;
|
||||
isIndeterminate: boolean;
|
||||
isDisabled: boolean;
|
||||
select: (value: boolean) => void;
|
||||
};
|
||||
export type ListItemTitleSlot = {
|
||||
title?: string | number | boolean;
|
||||
};
|
||||
export type ListItemSubtitleSlot = {
|
||||
subtitle?: string | number | boolean;
|
||||
};
|
||||
export type VListItemSlots = {
|
||||
prepend: ListItemSlot;
|
||||
append: ListItemSlot;
|
||||
default: ListItemSlot;
|
||||
title: ListItemTitleSlot;
|
||||
subtitle: ListItemSubtitleSlot;
|
||||
};
|
||||
export declare const makeVListItemProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
border?: unknown;
|
||||
density?: unknown;
|
||||
elevation?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
tag?: unknown;
|
||||
color?: unknown;
|
||||
variant?: unknown;
|
||||
height?: unknown;
|
||||
maxHeight?: unknown;
|
||||
maxWidth?: unknown;
|
||||
minHeight?: unknown;
|
||||
minWidth?: unknown;
|
||||
width?: unknown;
|
||||
href?: unknown;
|
||||
replace?: unknown;
|
||||
to?: unknown;
|
||||
exact?: unknown;
|
||||
active?: unknown;
|
||||
activeClass?: unknown;
|
||||
activeColor?: unknown;
|
||||
appendAvatar?: unknown;
|
||||
appendIcon?: unknown;
|
||||
baseColor?: unknown;
|
||||
disabled?: unknown;
|
||||
lines?: unknown;
|
||||
link?: unknown;
|
||||
nav?: unknown;
|
||||
prependAvatar?: unknown;
|
||||
prependIcon?: unknown;
|
||||
ripple?: unknown;
|
||||
slim?: unknown;
|
||||
prependGap?: unknown;
|
||||
subtitle?: unknown;
|
||||
title?: unknown;
|
||||
value?: unknown;
|
||||
index?: unknown;
|
||||
tabindex?: unknown;
|
||||
onClick?: unknown;
|
||||
onClickOnce?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
class: unknown extends Defaults["class"] ? PropType<any> : {
|
||||
type: PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
border: unknown extends Defaults["border"] ? (BooleanConstructor | NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["border"] ? string | number | boolean : string | number | boolean | Defaults["border"]>;
|
||||
default: unknown extends Defaults["border"] ? string | number | boolean : Defaults["border"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: 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>;
|
||||
};
|
||||
elevation: unknown extends Defaults["elevation"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["elevation"] ? string | number : string | number | Defaults["elevation"]>;
|
||||
default: unknown extends Defaults["elevation"] ? string | number : Defaults["elevation"] | NonNullable<string | number>;
|
||||
};
|
||||
rounded: unknown extends Defaults["rounded"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
|
||||
default: unknown extends Defaults["rounded"] ? string | number | boolean : Defaults["rounded"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
tile: unknown extends Defaults["tile"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
tag: unknown extends Defaults["tag"] ? {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : string | Defaults["tag"] | import("../../util/index.js").JSXComponent>;
|
||||
default: unknown extends Defaults["tag"] ? string | import("../../util/index.js").JSXComponent : Defaults["tag"] | NonNullable<string | import("../../util/index.js").JSXComponent>;
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
variant: unknown extends Defaults["variant"] ? Omit<{
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
} : Omit<Omit<{
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["variant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" | Defaults["variant"]>;
|
||||
default: unknown extends Defaults["variant"] ? "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal" : Defaults["variant"] | NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
maxHeight: unknown extends Defaults["maxHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["maxHeight"] ? string | number : string | number | Defaults["maxHeight"]>;
|
||||
default: unknown extends Defaults["maxHeight"] ? string | number : Defaults["maxHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
maxWidth: unknown extends Defaults["maxWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["maxWidth"] ? string | number : string | number | Defaults["maxWidth"]>;
|
||||
default: unknown extends Defaults["maxWidth"] ? string | number : Defaults["maxWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
minHeight: unknown extends Defaults["minHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["minHeight"] ? string | number : string | number | Defaults["minHeight"]>;
|
||||
default: unknown extends Defaults["minHeight"] ? string | number : Defaults["minHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
minWidth: unknown extends Defaults["minWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["minWidth"] ? string | number : string | number | Defaults["minWidth"]>;
|
||||
default: unknown extends Defaults["minWidth"] ? string | number : Defaults["minWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
width: unknown extends Defaults["width"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
href: unknown extends Defaults["href"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["href"] ? string : string | Defaults["href"]>;
|
||||
default: unknown extends Defaults["href"] ? string : string | Defaults["href"];
|
||||
};
|
||||
replace: unknown extends Defaults["replace"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["replace"] ? boolean : boolean | Defaults["replace"]>;
|
||||
default: unknown extends Defaults["replace"] ? boolean : boolean | Defaults["replace"];
|
||||
};
|
||||
to: unknown extends Defaults["to"] ? PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric> : {
|
||||
type: PropType<unknown extends Defaults["to"] ? string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric : string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | Defaults["to"]>;
|
||||
default: unknown extends Defaults["to"] ? string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric : Defaults["to"] | NonNullable<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||
};
|
||||
exact: unknown extends Defaults["exact"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["exact"] ? boolean : boolean | Defaults["exact"]>;
|
||||
default: unknown extends Defaults["exact"] ? boolean : boolean | Defaults["exact"];
|
||||
};
|
||||
active: unknown extends Defaults["active"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["active"] ? boolean : boolean | Defaults["active"]>;
|
||||
default: unknown extends Defaults["active"] ? boolean : boolean | Defaults["active"];
|
||||
};
|
||||
activeClass: unknown extends Defaults["activeClass"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["activeClass"] ? string : string | Defaults["activeClass"]>;
|
||||
default: unknown extends Defaults["activeClass"] ? string : string | Defaults["activeClass"];
|
||||
};
|
||||
activeColor: unknown extends Defaults["activeColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["activeColor"] ? string : string | Defaults["activeColor"]>;
|
||||
default: unknown extends Defaults["activeColor"] ? string : string | Defaults["activeColor"];
|
||||
};
|
||||
appendAvatar: unknown extends Defaults["appendAvatar"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["appendAvatar"] ? string : string | Defaults["appendAvatar"]>;
|
||||
default: unknown extends Defaults["appendAvatar"] ? string : string | Defaults["appendAvatar"];
|
||||
};
|
||||
appendIcon: unknown extends Defaults["appendIcon"] ? PropType<IconValue> : {
|
||||
type: PropType<unknown extends Defaults["appendIcon"] ? IconValue : Defaults["appendIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["appendIcon"] ? IconValue : Defaults["appendIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
baseColor: unknown extends Defaults["baseColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"]>;
|
||||
default: unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"];
|
||||
};
|
||||
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"];
|
||||
};
|
||||
lines: unknown extends Defaults["lines"] ? PropType<"one" | "three" | "two" | false> : {
|
||||
type: PropType<unknown extends Defaults["lines"] ? "one" | "three" | "two" | false : "one" | "three" | "two" | false | Defaults["lines"]>;
|
||||
default: unknown extends Defaults["lines"] ? "one" | "three" | "two" | false : Defaults["lines"] | NonNullable<"one" | "three" | "two" | false>;
|
||||
};
|
||||
link: unknown extends Defaults["link"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["link"] ? boolean : boolean | Defaults["link"]>;
|
||||
default: unknown extends Defaults["link"] ? boolean : boolean | Defaults["link"];
|
||||
};
|
||||
nav: unknown extends Defaults["nav"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["nav"] ? boolean : boolean | Defaults["nav"]>;
|
||||
default: unknown extends Defaults["nav"] ? boolean : boolean | Defaults["nav"];
|
||||
};
|
||||
prependAvatar: unknown extends Defaults["prependAvatar"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["prependAvatar"] ? string : string | Defaults["prependAvatar"]>;
|
||||
default: unknown extends Defaults["prependAvatar"] ? string : string | Defaults["prependAvatar"];
|
||||
};
|
||||
prependIcon: unknown extends Defaults["prependIcon"] ? PropType<IconValue> : {
|
||||
type: PropType<unknown extends Defaults["prependIcon"] ? IconValue : Defaults["prependIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["prependIcon"] ? IconValue : Defaults["prependIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
ripple: unknown extends Defaults["ripple"] ? {
|
||||
type: PropType<RippleDirectiveBinding['value']>;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: PropType<RippleDirectiveBinding['value']>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["ripple"] ? boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined : boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | Defaults["ripple"] | undefined>;
|
||||
default: unknown extends Defaults["ripple"] ? boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined : Defaults["ripple"] | NonNullable<boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined>;
|
||||
};
|
||||
slim: unknown extends Defaults["slim"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["slim"] ? boolean : boolean | Defaults["slim"]>;
|
||||
default: unknown extends Defaults["slim"] ? boolean : boolean | Defaults["slim"];
|
||||
};
|
||||
prependGap: unknown extends Defaults["prependGap"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["prependGap"] ? string | number : string | number | Defaults["prependGap"]>;
|
||||
default: unknown extends Defaults["prependGap"] ? string | number : Defaults["prependGap"] | NonNullable<string | number>;
|
||||
};
|
||||
subtitle: unknown extends Defaults["subtitle"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["subtitle"] ? string | number | boolean : string | number | boolean | Defaults["subtitle"]>;
|
||||
default: unknown extends Defaults["subtitle"] ? string | number | boolean : Defaults["subtitle"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
title: unknown extends Defaults["title"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["title"] ? string | number | boolean : string | number | boolean | Defaults["title"]>;
|
||||
default: unknown extends Defaults["title"] ? string | number | boolean : Defaults["title"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
value: unknown extends Defaults["value"] ? null : {
|
||||
type: PropType<unknown extends Defaults["value"] ? any : any>;
|
||||
default: unknown extends Defaults["value"] ? any : any;
|
||||
};
|
||||
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"];
|
||||
};
|
||||
tabindex: unknown extends Defaults["tabindex"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["tabindex"] ? string | number : string | number | Defaults["tabindex"]>;
|
||||
default: unknown extends Defaults["tabindex"] ? string | number : Defaults["tabindex"] | NonNullable<string | number>;
|
||||
};
|
||||
onClick: unknown extends Defaults["onClick"] ? PropType<(args_0: KeyboardEvent | MouseEvent) => void> : {
|
||||
type: PropType<unknown extends Defaults["onClick"] ? (args_0: KeyboardEvent | MouseEvent) => void : ((args_0: KeyboardEvent | MouseEvent) => void) | Defaults["onClick"]>;
|
||||
default: unknown extends Defaults["onClick"] ? (args_0: KeyboardEvent | MouseEvent) => void : ((args_0: KeyboardEvent | MouseEvent) => void) | Defaults["onClick"];
|
||||
};
|
||||
onClickOnce: unknown extends Defaults["onClickOnce"] ? PropType<(args_0: MouseEvent) => void> : {
|
||||
type: PropType<unknown extends Defaults["onClickOnce"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onClickOnce"]>;
|
||||
default: unknown extends Defaults["onClickOnce"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onClickOnce"];
|
||||
};
|
||||
};
|
||||
export declare const VListItem: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
disabled: boolean;
|
||||
nav: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
slim: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
href?: string | undefined;
|
||||
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||
active?: boolean | undefined;
|
||||
activeClass?: string | undefined;
|
||||
activeColor?: string | undefined;
|
||||
appendAvatar?: string | undefined;
|
||||
appendIcon?: IconValue | undefined;
|
||||
baseColor?: string | undefined;
|
||||
lines?: "one" | "three" | "two" | false | undefined;
|
||||
link?: boolean | undefined;
|
||||
prependAvatar?: string | undefined;
|
||||
prependIcon?: IconValue | undefined;
|
||||
prependGap?: string | number | undefined;
|
||||
subtitle?: string | number | boolean | undefined;
|
||||
title?: string | number | boolean | undefined;
|
||||
value?: any;
|
||||
index?: number | undefined;
|
||||
tabindex?: string | number | undefined;
|
||||
onClick?: ((args_0: KeyboardEvent | MouseEvent) => void) | undefined;
|
||||
onClickOnce?: ((args_0: MouseEvent) => void) | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
prepend?: ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
append?: ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
default?: ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
title?: ((arg: ListItemTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: ((arg: ListItemSubtitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: ListItemSlot) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
prepend?: false | ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
append?: false | ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
default?: false | ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
title?: false | ((arg: ListItemTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: false | ((arg: ListItemSubtitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:subtitle"?: false | ((arg: ListItemSubtitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | ((arg: ListItemTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
onClick?: ((e: KeyboardEvent | MouseEvent) => any) | undefined;
|
||||
}, {
|
||||
activate: (activated: boolean, e?: Event) => void;
|
||||
isActivated: import("vue").ComputedRef<boolean>;
|
||||
isGroupActivator: boolean | undefined;
|
||||
isSelected: import("vue").ComputedRef<boolean>;
|
||||
list: {
|
||||
filterable: import("vue").MaybeRefOrGetter<boolean>;
|
||||
hasPrepend: import("vue").Ref<boolean, boolean>;
|
||||
updateHasPrepend: (value: boolean) => void;
|
||||
trackingIndex: import("vue").Ref<number, number>;
|
||||
navigationStrategy: import("vue").Ref<"focus" | "track", "focus" | "track">;
|
||||
uid: string;
|
||||
} | null;
|
||||
select: (selected: boolean, e?: Event) => void;
|
||||
root: {
|
||||
children: import("vue").Ref<Map<unknown, unknown[]>, Map<unknown, unknown[]>>;
|
||||
parents: import("vue").Ref<Map<unknown, unknown>, Map<unknown, unknown>>;
|
||||
disabled: import("vue").Ref<Set<unknown>, Set<unknown>>;
|
||||
activatable: import("vue").Ref<boolean, boolean>;
|
||||
selectable: import("vue").Ref<boolean, boolean>;
|
||||
opened: import("vue").Ref<Set<unknown>, Set<unknown>>;
|
||||
activated: import("vue").Ref<Set<unknown>, Set<unknown>>;
|
||||
scrollToActive: import("vue").Ref<boolean, boolean>;
|
||||
selected: import("vue").Ref<Map<unknown, "indeterminate" | "off" | "on">, Map<unknown, "indeterminate" | "off" | "on">>;
|
||||
selectedValues: import("vue").Ref<unknown[], unknown[]>;
|
||||
itemsRegistration: import("vue").Ref<import("../../composables/nested/nested.js").ItemsRegistrationType, import("../../composables/nested/nested.js").ItemsRegistrationType>;
|
||||
register: (id: unknown, parentId: unknown, isDisabled: boolean, isGroup?: boolean) => void;
|
||||
unregister: (id: unknown) => void;
|
||||
updateDisabled: (id: unknown, isDisabled: boolean) => void;
|
||||
open: (id: unknown, value: boolean, event?: Event) => void;
|
||||
activate: (id: unknown, value: boolean, event?: Event) => void;
|
||||
select: (id: unknown, value: boolean, event?: Event) => void;
|
||||
openOnSelect: (id: unknown, value: boolean, event?: Event) => void;
|
||||
getPath: (id: unknown) => unknown[];
|
||||
};
|
||||
id: import("vue").ComputedRef<{} | null>;
|
||||
link: import("../../composables/router.js").UseLink;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
click: (e: MouseEvent | KeyboardEvent) => true;
|
||||
}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
active: boolean;
|
||||
disabled: boolean;
|
||||
link: boolean;
|
||||
nav: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
slim: boolean;
|
||||
subtitle: string | number | boolean;
|
||||
title: string | number | boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
prepend: (arg: ListItemSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: (arg: ListItemSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
default: (arg: ListItemSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: (arg: ListItemTitleSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
subtitle: (arg: ListItemSubtitleSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
disabled: boolean;
|
||||
nav: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
slim: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
href?: string | undefined;
|
||||
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||
active?: boolean | undefined;
|
||||
activeClass?: string | undefined;
|
||||
activeColor?: string | undefined;
|
||||
appendAvatar?: string | undefined;
|
||||
appendIcon?: IconValue | undefined;
|
||||
baseColor?: string | undefined;
|
||||
lines?: "one" | "three" | "two" | false | undefined;
|
||||
link?: boolean | undefined;
|
||||
prependAvatar?: string | undefined;
|
||||
prependIcon?: IconValue | undefined;
|
||||
prependGap?: string | number | undefined;
|
||||
subtitle?: string | number | boolean | undefined;
|
||||
title?: string | number | boolean | undefined;
|
||||
value?: any;
|
||||
index?: number | undefined;
|
||||
tabindex?: string | number | undefined;
|
||||
onClick?: ((args_0: KeyboardEvent | MouseEvent) => void) | undefined;
|
||||
onClickOnce?: ((args_0: MouseEvent) => void) | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
prepend?: ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
append?: ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
default?: ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
title?: ((arg: ListItemTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: ((arg: ListItemSubtitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: ListItemSlot) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
prepend?: false | ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
append?: false | ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
default?: false | ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
title?: false | ((arg: ListItemTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: false | ((arg: ListItemSubtitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:subtitle"?: false | ((arg: ListItemSubtitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | ((arg: ListItemTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
onClick?: ((e: KeyboardEvent | MouseEvent) => any) | undefined;
|
||||
}, {
|
||||
activate: (activated: boolean, e?: Event) => void;
|
||||
isActivated: import("vue").ComputedRef<boolean>;
|
||||
isGroupActivator: boolean | undefined;
|
||||
isSelected: import("vue").ComputedRef<boolean>;
|
||||
list: {
|
||||
filterable: import("vue").MaybeRefOrGetter<boolean>;
|
||||
hasPrepend: import("vue").Ref<boolean, boolean>;
|
||||
updateHasPrepend: (value: boolean) => void;
|
||||
trackingIndex: import("vue").Ref<number, number>;
|
||||
navigationStrategy: import("vue").Ref<"focus" | "track", "focus" | "track">;
|
||||
uid: string;
|
||||
} | null;
|
||||
select: (selected: boolean, e?: Event) => void;
|
||||
root: {
|
||||
children: import("vue").Ref<Map<unknown, unknown[]>, Map<unknown, unknown[]>>;
|
||||
parents: import("vue").Ref<Map<unknown, unknown>, Map<unknown, unknown>>;
|
||||
disabled: import("vue").Ref<Set<unknown>, Set<unknown>>;
|
||||
activatable: import("vue").Ref<boolean, boolean>;
|
||||
selectable: import("vue").Ref<boolean, boolean>;
|
||||
opened: import("vue").Ref<Set<unknown>, Set<unknown>>;
|
||||
activated: import("vue").Ref<Set<unknown>, Set<unknown>>;
|
||||
scrollToActive: import("vue").Ref<boolean, boolean>;
|
||||
selected: import("vue").Ref<Map<unknown, "indeterminate" | "off" | "on">, Map<unknown, "indeterminate" | "off" | "on">>;
|
||||
selectedValues: import("vue").Ref<unknown[], unknown[]>;
|
||||
itemsRegistration: import("vue").Ref<import("../../composables/nested/nested.js").ItemsRegistrationType, import("../../composables/nested/nested.js").ItemsRegistrationType>;
|
||||
register: (id: unknown, parentId: unknown, isDisabled: boolean, isGroup?: boolean) => void;
|
||||
unregister: (id: unknown) => void;
|
||||
updateDisabled: (id: unknown, isDisabled: boolean) => void;
|
||||
open: (id: unknown, value: boolean, event?: Event) => void;
|
||||
activate: (id: unknown, value: boolean, event?: Event) => void;
|
||||
select: (id: unknown, value: boolean, event?: Event) => void;
|
||||
openOnSelect: (id: unknown, value: boolean, event?: Event) => void;
|
||||
getPath: (id: unknown) => unknown[];
|
||||
};
|
||||
id: import("vue").ComputedRef<{} | null>;
|
||||
link: import("../../composables/router.js").UseLink;
|
||||
}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
active: boolean;
|
||||
disabled: boolean;
|
||||
link: boolean;
|
||||
nav: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
slim: boolean;
|
||||
subtitle: string | number | boolean;
|
||||
title: string | number | boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
disabled: boolean;
|
||||
nav: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
};
|
||||
slim: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
border?: string | number | boolean | undefined;
|
||||
elevation?: string | number | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
href?: string | undefined;
|
||||
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||
active?: boolean | undefined;
|
||||
activeClass?: string | undefined;
|
||||
activeColor?: string | undefined;
|
||||
appendAvatar?: string | undefined;
|
||||
appendIcon?: IconValue | undefined;
|
||||
baseColor?: string | undefined;
|
||||
lines?: "one" | "three" | "two" | false | undefined;
|
||||
link?: boolean | undefined;
|
||||
prependAvatar?: string | undefined;
|
||||
prependIcon?: IconValue | undefined;
|
||||
prependGap?: string | number | undefined;
|
||||
subtitle?: string | number | boolean | undefined;
|
||||
title?: string | number | boolean | undefined;
|
||||
value?: any;
|
||||
index?: number | undefined;
|
||||
tabindex?: string | number | undefined;
|
||||
onClick?: ((args_0: KeyboardEvent | MouseEvent) => void) | undefined;
|
||||
onClickOnce?: ((args_0: MouseEvent) => void) | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
prepend?: ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
append?: ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
default?: ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
title?: ((arg: ListItemTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: ((arg: ListItemSubtitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | ((arg: ListItemSlot) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
prepend?: false | ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
append?: false | ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
default?: false | ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
title?: false | ((arg: ListItemTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
subtitle?: false | ((arg: ListItemSubtitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:append"?: false | ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:default"?: false | ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:prepend"?: false | ((arg: ListItemSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:subtitle"?: false | ((arg: ListItemSubtitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:title"?: false | ((arg: ListItemTitleSlot) => import("vue").VNodeChild) | undefined;
|
||||
} & {
|
||||
onClick?: ((e: KeyboardEvent | MouseEvent) => any) | undefined;
|
||||
}, {
|
||||
activate: (activated: boolean, e?: Event) => void;
|
||||
isActivated: import("vue").ComputedRef<boolean>;
|
||||
isGroupActivator: boolean | undefined;
|
||||
isSelected: import("vue").ComputedRef<boolean>;
|
||||
list: {
|
||||
filterable: import("vue").MaybeRefOrGetter<boolean>;
|
||||
hasPrepend: import("vue").Ref<boolean, boolean>;
|
||||
updateHasPrepend: (value: boolean) => void;
|
||||
trackingIndex: import("vue").Ref<number, number>;
|
||||
navigationStrategy: import("vue").Ref<"focus" | "track", "focus" | "track">;
|
||||
uid: string;
|
||||
} | null;
|
||||
select: (selected: boolean, e?: Event) => void;
|
||||
root: {
|
||||
children: import("vue").Ref<Map<unknown, unknown[]>, Map<unknown, unknown[]>>;
|
||||
parents: import("vue").Ref<Map<unknown, unknown>, Map<unknown, unknown>>;
|
||||
disabled: import("vue").Ref<Set<unknown>, Set<unknown>>;
|
||||
activatable: import("vue").Ref<boolean, boolean>;
|
||||
selectable: import("vue").Ref<boolean, boolean>;
|
||||
opened: import("vue").Ref<Set<unknown>, Set<unknown>>;
|
||||
activated: import("vue").Ref<Set<unknown>, Set<unknown>>;
|
||||
scrollToActive: import("vue").Ref<boolean, boolean>;
|
||||
selected: import("vue").Ref<Map<unknown, "indeterminate" | "off" | "on">, Map<unknown, "indeterminate" | "off" | "on">>;
|
||||
selectedValues: import("vue").Ref<unknown[], unknown[]>;
|
||||
itemsRegistration: import("vue").Ref<import("../../composables/nested/nested.js").ItemsRegistrationType, import("../../composables/nested/nested.js").ItemsRegistrationType>;
|
||||
register: (id: unknown, parentId: unknown, isDisabled: boolean, isGroup?: boolean) => void;
|
||||
unregister: (id: unknown) => void;
|
||||
updateDisabled: (id: unknown, isDisabled: boolean) => void;
|
||||
open: (id: unknown, value: boolean, event?: Event) => void;
|
||||
activate: (id: unknown, value: boolean, event?: Event) => void;
|
||||
select: (id: unknown, value: boolean, event?: Event) => void;
|
||||
openOnSelect: (id: unknown, value: boolean, event?: Event) => void;
|
||||
getPath: (id: unknown) => unknown[];
|
||||
};
|
||||
id: import("vue").ComputedRef<{} | null>;
|
||||
link: import("../../composables/router.js").UseLink;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
click: (e: MouseEvent | KeyboardEvent) => true;
|
||||
}, string, {
|
||||
style: import("vue").StyleValue;
|
||||
density: import("../../composables/density.js").Density;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||
replace: boolean;
|
||||
exact: boolean;
|
||||
active: boolean;
|
||||
disabled: boolean;
|
||||
link: boolean;
|
||||
nav: boolean;
|
||||
ripple: boolean | {
|
||||
class?: string;
|
||||
keys?: string[];
|
||||
} | undefined;
|
||||
slim: boolean;
|
||||
subtitle: string | number | boolean;
|
||||
title: string | number | boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
prepend: (arg: ListItemSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
append: (arg: ListItemSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
default: (arg: ListItemSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
title: (arg: ListItemTitleSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
subtitle: (arg: ListItemSubtitleSlot) => 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<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: Omit<{
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
href: StringConstructor;
|
||||
replace: BooleanConstructor;
|
||||
to: PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||
exact: BooleanConstructor;
|
||||
active: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
activeClass: StringConstructor;
|
||||
activeColor: StringConstructor;
|
||||
appendAvatar: StringConstructor;
|
||||
appendIcon: PropType<IconValue>;
|
||||
baseColor: StringConstructor;
|
||||
disabled: BooleanConstructor;
|
||||
lines: PropType<'one' | 'two' | 'three' | false>;
|
||||
link: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
nav: BooleanConstructor;
|
||||
prependAvatar: StringConstructor;
|
||||
prependIcon: PropType<IconValue>;
|
||||
ripple: {
|
||||
type: PropType<RippleDirectiveBinding['value']>;
|
||||
default: boolean;
|
||||
};
|
||||
slim: BooleanConstructor;
|
||||
prependGap: (NumberConstructor | StringConstructor)[];
|
||||
subtitle: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
title: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
value: null;
|
||||
index: NumberConstructor;
|
||||
tabindex: (NumberConstructor | StringConstructor)[];
|
||||
onClick: PropType<(args_0: KeyboardEvent | MouseEvent) => void>;
|
||||
onClickOnce: PropType<(args_0: MouseEvent) => void>;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
elevation: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
validator: (value: string | number) => boolean;
|
||||
};
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
tag: {
|
||||
type: PropType<string | import("../../util/index.js").JSXComponent>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
variant: Omit<{
|
||||
type: PropType<import("../../composables/variant.js").Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
href: StringConstructor;
|
||||
replace: BooleanConstructor;
|
||||
to: PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||
exact: BooleanConstructor;
|
||||
active: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
activeClass: StringConstructor;
|
||||
activeColor: StringConstructor;
|
||||
appendAvatar: StringConstructor;
|
||||
appendIcon: PropType<IconValue>;
|
||||
baseColor: StringConstructor;
|
||||
disabled: BooleanConstructor;
|
||||
lines: PropType<'one' | 'two' | 'three' | false>;
|
||||
link: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
nav: BooleanConstructor;
|
||||
prependAvatar: StringConstructor;
|
||||
prependIcon: PropType<IconValue>;
|
||||
ripple: {
|
||||
type: PropType<RippleDirectiveBinding['value']>;
|
||||
default: boolean;
|
||||
};
|
||||
slim: BooleanConstructor;
|
||||
prependGap: (NumberConstructor | StringConstructor)[];
|
||||
subtitle: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
title: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
value: null;
|
||||
index: NumberConstructor;
|
||||
tabindex: (NumberConstructor | StringConstructor)[];
|
||||
onClick: PropType<(args_0: KeyboardEvent | MouseEvent) => void>;
|
||||
onClickOnce: PropType<(args_0: MouseEvent) => void>;
|
||||
}>>;
|
||||
export type VListItem = InstanceType<typeof VListItem>;
|
||||
+348
@@ -0,0 +1,348 @@
|
||||
import { Fragment as _Fragment, createVNode as _createVNode, createElementVNode as _createElementVNode, mergeProps as _mergeProps, withDirectives as _withDirectives } from "vue";
|
||||
// Styles
|
||||
import "./VListItem.css";
|
||||
|
||||
// Components
|
||||
import { VListItemSubtitle } from "./VListItemSubtitle.js";
|
||||
import { VListItemTitle } from "./VListItemTitle.js";
|
||||
import { VAvatar } from "../VAvatar/index.js";
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/index.js";
|
||||
import { VIcon } from "../VIcon/index.js"; // Composables
|
||||
import { useList } from "./list.js";
|
||||
import { makeBorderProps, useBorder } from "../../composables/border.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeDensityProps, useDensity } from "../../composables/density.js";
|
||||
import { makeDimensionProps, useDimension } from "../../composables/dimensions.js";
|
||||
import { makeElevationProps, useElevation } from "../../composables/elevation.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { useNestedItem } from "../../composables/nested/nested.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { makeRouterProps, useLink } from "../../composables/router.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js";
|
||||
import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.js"; // Directives
|
||||
import vRipple from "../../directives/ripple/index.js"; // Utilities
|
||||
import { computed, nextTick, onBeforeMount, ref, toDisplayString, toRef, watch } from 'vue';
|
||||
import { convertToUnit, deprecate, EventProp, genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVListItemProps = propsFactory({
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
activeClass: String,
|
||||
/* @deprecated */
|
||||
activeColor: String,
|
||||
appendAvatar: String,
|
||||
appendIcon: IconValue,
|
||||
baseColor: String,
|
||||
disabled: Boolean,
|
||||
lines: [Boolean, String],
|
||||
link: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
nav: Boolean,
|
||||
prependAvatar: String,
|
||||
prependIcon: IconValue,
|
||||
ripple: {
|
||||
type: [Boolean, Object],
|
||||
default: true
|
||||
},
|
||||
slim: Boolean,
|
||||
prependGap: [Number, String],
|
||||
subtitle: {
|
||||
type: [String, Number, Boolean],
|
||||
default: undefined
|
||||
},
|
||||
title: {
|
||||
type: [String, Number, Boolean],
|
||||
default: undefined
|
||||
},
|
||||
value: null,
|
||||
index: Number,
|
||||
tabindex: [Number, String],
|
||||
onClick: EventProp(),
|
||||
onClickOnce: EventProp(),
|
||||
...makeBorderProps(),
|
||||
...makeComponentProps(),
|
||||
...makeDensityProps(),
|
||||
...makeDimensionProps(),
|
||||
...makeElevationProps(),
|
||||
...makeRoundedProps(),
|
||||
...makeRouterProps(),
|
||||
...makeTagProps(),
|
||||
...makeThemeProps(),
|
||||
...makeVariantProps({
|
||||
variant: 'text'
|
||||
})
|
||||
}, 'VListItem');
|
||||
export const VListItem = genericComponent()({
|
||||
name: 'VListItem',
|
||||
directives: {
|
||||
vRipple
|
||||
},
|
||||
props: makeVListItemProps(),
|
||||
emits: {
|
||||
click: e => true
|
||||
},
|
||||
setup(props, {
|
||||
attrs,
|
||||
slots,
|
||||
emit
|
||||
}) {
|
||||
const link = useLink(props, attrs);
|
||||
const rootEl = ref();
|
||||
const id = computed(() => props.value === undefined ? link.href.value : props.value);
|
||||
const {
|
||||
activate,
|
||||
isActivated,
|
||||
select,
|
||||
isOpen,
|
||||
isSelected,
|
||||
isIndeterminate,
|
||||
isGroupActivator,
|
||||
root,
|
||||
parent,
|
||||
openOnSelect,
|
||||
scrollToActive,
|
||||
id: uid
|
||||
} = useNestedItem(id, () => props.disabled, false);
|
||||
const list = useList();
|
||||
const isActive = computed(() => props.active !== false && (props.active || link.isActive?.value || (root.activatable.value ? isActivated.value : isSelected.value)));
|
||||
const isLink = toRef(() => props.link !== false && link.isLink.value);
|
||||
const isSelectable = computed(() => !!list && (root.selectable.value || root.activatable.value || props.value != null));
|
||||
const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || isSelectable.value));
|
||||
const isTracked = computed(() => list && list.navigationStrategy.value === 'track' && props.index !== undefined && list.trackingIndex.value === props.index);
|
||||
const role = computed(() => list ? isLink.value ? 'link' : isSelectable.value ? 'option' : 'listitem' : undefined);
|
||||
const ariaSelected = computed(() => {
|
||||
if (!isSelectable.value) return undefined;
|
||||
return root.activatable.value ? isActivated.value : root.selectable.value ? isSelected.value : isActive.value;
|
||||
});
|
||||
const roundedProps = toRef(() => props.rounded || props.nav);
|
||||
const color = toRef(() => props.color ?? props.activeColor);
|
||||
const variantProps = toRef(() => ({
|
||||
color: isActive.value ? color.value ?? props.baseColor : props.baseColor,
|
||||
variant: props.variant
|
||||
}));
|
||||
|
||||
// useNestedItem doesn't call register until beforeMount,
|
||||
// so this can't be an immediate watcher as we don't know parent yet
|
||||
watch(() => link.isActive?.value, val => {
|
||||
if (!val) return;
|
||||
handleActiveLink();
|
||||
});
|
||||
watch(isActivated, val => {
|
||||
if (!val || !scrollToActive) return;
|
||||
rootEl.value?.scrollIntoView({
|
||||
block: 'nearest',
|
||||
behavior: 'instant'
|
||||
});
|
||||
});
|
||||
watch(isTracked, val => {
|
||||
if (!val) return;
|
||||
rootEl.value?.scrollIntoView({
|
||||
block: 'nearest',
|
||||
behavior: 'instant'
|
||||
});
|
||||
});
|
||||
onBeforeMount(() => {
|
||||
if (link.isActive?.value) {
|
||||
nextTick(() => handleActiveLink());
|
||||
}
|
||||
});
|
||||
function handleActiveLink() {
|
||||
if (parent.value != null) {
|
||||
root.open(parent.value, true);
|
||||
}
|
||||
openOnSelect(true);
|
||||
}
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
borderClasses
|
||||
} = useBorder(props);
|
||||
const {
|
||||
colorClasses,
|
||||
colorStyles,
|
||||
variantClasses
|
||||
} = useVariant(variantProps);
|
||||
const {
|
||||
densityClasses
|
||||
} = useDensity(props);
|
||||
const {
|
||||
dimensionStyles
|
||||
} = useDimension(props);
|
||||
const {
|
||||
elevationClasses
|
||||
} = useElevation(props);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(roundedProps);
|
||||
const lineClasses = toRef(() => props.lines ? `v-list-item--${props.lines}-line` : undefined);
|
||||
const rippleOptions = toRef(() => props.ripple !== undefined && !!props.ripple && list?.filterable ? {
|
||||
keys: ['Enter']
|
||||
} : props.ripple);
|
||||
const slotProps = computed(() => ({
|
||||
isActive: isActive.value,
|
||||
select,
|
||||
isOpen: isOpen.value,
|
||||
isSelected: isSelected.value,
|
||||
isIndeterminate: isIndeterminate.value,
|
||||
isDisabled: props.disabled
|
||||
}));
|
||||
function onClick(e) {
|
||||
emit('click', e);
|
||||
if (['INPUT', 'TEXTAREA'].includes(e.target?.tagName)) return;
|
||||
if (!isClickable.value) return;
|
||||
link.navigate.value?.(e);
|
||||
if (isGroupActivator) return;
|
||||
if (root.activatable.value) {
|
||||
activate(!isActivated.value, e);
|
||||
} else if (root.selectable.value) {
|
||||
select(!isSelected.value, e);
|
||||
} else if (props.value != null && !isLink.value) {
|
||||
select(!isSelected.value, e);
|
||||
}
|
||||
}
|
||||
function onKeyDown(e) {
|
||||
const target = e.target;
|
||||
if (['INPUT', 'TEXTAREA'].includes(target.tagName)) return;
|
||||
if (e.key === 'Enter' || e.key === ' ' && !list?.filterable) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
e.target.dispatchEvent(new MouseEvent('click', e));
|
||||
}
|
||||
}
|
||||
useRender(() => {
|
||||
const Tag = isLink.value ? 'a' : props.tag;
|
||||
const hasTitle = slots.title || props.title != null;
|
||||
const hasSubtitle = slots.subtitle || props.subtitle != null;
|
||||
const hasAppendMedia = !!(props.appendAvatar || props.appendIcon);
|
||||
const hasAppend = !!(hasAppendMedia || slots.append);
|
||||
const hasPrependMedia = !!(props.prependAvatar || props.prependIcon);
|
||||
const hasPrepend = !!(hasPrependMedia || slots.prepend);
|
||||
list?.updateHasPrepend(hasPrepend);
|
||||
if (props.activeColor) {
|
||||
deprecate('active-color', ['color', 'base-color']);
|
||||
}
|
||||
return _withDirectives(_createVNode(Tag, _mergeProps(link.linkProps, {
|
||||
"ref": rootEl,
|
||||
"id": props.index !== undefined && list ? `v-list-item-${list.uid}-${props.index}` : undefined,
|
||||
"class": ['v-list-item', {
|
||||
'v-list-item--active': isActive.value,
|
||||
'v-list-item--disabled': props.disabled,
|
||||
'v-list-item--link': isClickable.value,
|
||||
'v-list-item--nav': props.nav,
|
||||
'v-list-item--prepend': !hasPrepend && list?.hasPrepend.value,
|
||||
'v-list-item--slim': props.slim,
|
||||
'v-list-item--focus-visible': isTracked.value,
|
||||
[`${props.activeClass}`]: props.activeClass && isActive.value
|
||||
}, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value, props.class],
|
||||
"style": [{
|
||||
'--v-list-prepend-gap': convertToUnit(props.prependGap)
|
||||
}, colorStyles.value, dimensionStyles.value, props.style],
|
||||
"tabindex": props.tabindex ?? (isClickable.value ? list ? -2 : 0 : undefined),
|
||||
"aria-selected": ariaSelected.value,
|
||||
"role": role.value,
|
||||
"onClick": onClick,
|
||||
"onKeydown": isClickable.value && !isLink.value && onKeyDown
|
||||
}), {
|
||||
default: () => [genOverlays(isClickable.value || isActive.value, 'v-list-item'), hasPrepend && _createElementVNode("div", {
|
||||
"key": "prepend",
|
||||
"class": "v-list-item__prepend"
|
||||
}, [!slots.prepend ? _createElementVNode(_Fragment, null, [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.prependAvatar
|
||||
},
|
||||
VIcon: {
|
||||
density: props.density,
|
||||
icon: props.prependIcon
|
||||
},
|
||||
VListItemAction: {
|
||||
start: true
|
||||
},
|
||||
VCheckboxBtn: {
|
||||
density: props.density
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [slots.prepend?.(slotProps.value)]
|
||||
}), _createElementVNode("div", {
|
||||
"class": "v-list-item__spacer"
|
||||
}, null)]), _createElementVNode("div", {
|
||||
"class": "v-list-item__content",
|
||||
"data-no-activator": ""
|
||||
}, [hasTitle && _createVNode(VListItemTitle, {
|
||||
"key": "title"
|
||||
}, {
|
||||
default: () => [slots.title?.({
|
||||
title: props.title
|
||||
}) ?? toDisplayString(props.title)]
|
||||
}), hasSubtitle && _createVNode(VListItemSubtitle, {
|
||||
"key": "subtitle"
|
||||
}, {
|
||||
default: () => [slots.subtitle?.({
|
||||
subtitle: props.subtitle
|
||||
}) ?? toDisplayString(props.subtitle)]
|
||||
}), slots.default?.(slotProps.value)]), hasAppend && _createElementVNode("div", {
|
||||
"key": "append",
|
||||
"class": "v-list-item__append"
|
||||
}, [!slots.append ? _createElementVNode(_Fragment, null, [props.appendIcon && _createVNode(VIcon, {
|
||||
"key": "append-icon",
|
||||
"density": props.density,
|
||||
"icon": props.appendIcon
|
||||
}, null), props.appendAvatar && _createVNode(VAvatar, {
|
||||
"key": "append-avatar",
|
||||
"density": props.density,
|
||||
"image": props.appendAvatar
|
||||
}, null)]) : _createVNode(VDefaultsProvider, {
|
||||
"key": "append-defaults",
|
||||
"defaults": {
|
||||
VAvatar: {
|
||||
density: props.density,
|
||||
image: props.appendAvatar
|
||||
},
|
||||
VIcon: {
|
||||
density: props.density,
|
||||
icon: props.appendIcon
|
||||
},
|
||||
VListItemAction: {
|
||||
end: true
|
||||
},
|
||||
VCheckboxBtn: {
|
||||
density: props.density
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [slots.append?.(slotProps.value)]
|
||||
}), _createElementVNode("div", {
|
||||
"class": "v-list-item__spacer"
|
||||
}, null)])]
|
||||
}), [[vRipple, isClickable.value && rippleOptions.value]]);
|
||||
});
|
||||
return {
|
||||
activate,
|
||||
isActivated,
|
||||
isGroupActivator,
|
||||
isSelected,
|
||||
list,
|
||||
select,
|
||||
root,
|
||||
id: uid,
|
||||
link
|
||||
};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VListItem.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+388
@@ -0,0 +1,388 @@
|
||||
@use 'sass:list'
|
||||
@use 'sass:map'
|
||||
@use 'sass:math'
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-list-item
|
||||
align-items: center
|
||||
display: grid
|
||||
flex: none
|
||||
grid-template-areas: "prepend content append"
|
||||
grid-template-columns: max-content 1fr auto
|
||||
outline: none
|
||||
max-width: 100%
|
||||
padding: $list-item-padding
|
||||
position: relative
|
||||
text-decoration: none
|
||||
|
||||
@include tools.border($list-item-border...)
|
||||
@include tools.states('.v-list-item__overlay')
|
||||
@include tools.rounded($list-item-border-radius)
|
||||
@include tools.variant($list-item-variants...)
|
||||
|
||||
&--focus-visible
|
||||
.v-list-item__overlay
|
||||
opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier))
|
||||
|
||||
@supports selector(:focus-visible)
|
||||
&::after
|
||||
pointer-events: none
|
||||
border: 2px solid currentColor
|
||||
border-radius: 4px
|
||||
opacity: 0
|
||||
transition: opacity .2s ease-in-out
|
||||
@include tools.absolute(true)
|
||||
|
||||
&:focus-visible::after,
|
||||
&--focus-visible::after
|
||||
opacity: calc(.15 * var(--v-theme-overlay-multiplier))
|
||||
|
||||
&__prepend,
|
||||
&__append
|
||||
> .v-badge .v-icon,
|
||||
> .v-icon
|
||||
opacity: #{$list-item-icon-opacity}
|
||||
|
||||
&--active
|
||||
.v-list-item__prepend,
|
||||
.v-list-item__append
|
||||
> .v-badge .v-icon,
|
||||
> .v-icon
|
||||
opacity: #{$list-item-icon-active-opacity}
|
||||
|
||||
&:not(.v-list-item--link)
|
||||
.v-list-item__overlay
|
||||
opacity: calc(#{map.get(settings.$states, 'activated')} * var(--v-theme-overlay-multiplier))
|
||||
|
||||
&--rounded
|
||||
@include tools.rounded($list-item-rounded-border-radius)
|
||||
|
||||
&--disabled
|
||||
pointer-events: none
|
||||
user-select: none
|
||||
opacity: $list-disabled-opacity
|
||||
|
||||
&--link
|
||||
cursor: pointer
|
||||
|
||||
.v-navigation-drawer--rail:not(.v-navigation-drawer--expand-on-hover) &,
|
||||
.v-navigation-drawer--rail.v-navigation-drawer--expand-on-hover:not(.v-navigation-drawer--is-hovering) &
|
||||
.v-avatar
|
||||
--v-avatar-height: 24px
|
||||
|
||||
.v-list-item__prepend
|
||||
align-items: center
|
||||
align-self: center
|
||||
display: flex
|
||||
grid-area: prepend
|
||||
|
||||
* ~ .v-list-item__spacer
|
||||
width: var(--v-list-prepend-gap)
|
||||
|
||||
> .v-badge,
|
||||
> .v-icon,
|
||||
> .v-tooltip
|
||||
~ .v-list-item__spacer
|
||||
width: var(--v-list-prepend-gap, $list-item-icon-margin-start)
|
||||
|
||||
> .v-avatar,
|
||||
> .v-badge:is(:has(.v-avatar))
|
||||
~ .v-list-item__spacer
|
||||
width: var(--v-list-prepend-gap, $list-item-avatar-margin-start)
|
||||
|
||||
|
||||
.v-list-item--slim &
|
||||
> .v-badge,
|
||||
> .v-icon,
|
||||
> .v-tooltip
|
||||
~ .v-list-item__spacer
|
||||
width: var(--v-list-prepend-gap, $list-item-slim-spacer-width)
|
||||
|
||||
> .v-avatar,
|
||||
> .v-badge:is(:has(.v-avatar))
|
||||
~ .v-list-item__spacer
|
||||
width: var(--v-list-prepend-gap, $list-item-slim-avatar-spacer-width)
|
||||
|
||||
> .v-list-item-action ~ .v-list-item__spacer
|
||||
width: var(--v-list-prepend-gap, $list-item-slim-action-spacer-width)
|
||||
|
||||
.v-list-item--three-line &
|
||||
align-self: start
|
||||
|
||||
.v-list-item__append
|
||||
align-self: center
|
||||
display: flex
|
||||
align-items: center
|
||||
grid-area: append
|
||||
|
||||
.v-list-item__spacer
|
||||
order: -1
|
||||
transition: 150ms width settings.$standard-easing
|
||||
|
||||
* ~ .v-list-item__spacer
|
||||
width: var(--v-list-prepend-gap)
|
||||
|
||||
> .v-badge,
|
||||
> .v-icon,
|
||||
> .v-tooltip
|
||||
~ .v-list-item__spacer
|
||||
width: var(--v-list-prepend-gap, $list-item-icon-margin-end)
|
||||
|
||||
> .v-avatar,
|
||||
> .v-badge:is(:has(.v-avatar))
|
||||
~ .v-list-item__spacer
|
||||
width: var(--v-list-prepend-gap, $list-item-avatar-margin-end)
|
||||
|
||||
> .v-list-item-action ~ .v-list-item__spacer
|
||||
width: var(--v-list-prepend-gap, $list-item-action-spacer-width)
|
||||
|
||||
.v-list-item--slim &
|
||||
> .v-badge,
|
||||
> .v-icon,
|
||||
> .v-tooltip
|
||||
~ .v-list-item__spacer
|
||||
width: var(--v-list-slim-spacer-width, $list-item-slim-spacer-width)
|
||||
|
||||
> .v-avatar,
|
||||
> .v-badge:is(:has(.v-avatar))
|
||||
~ .v-list-item__spacer
|
||||
width: var(--v-list-prepend-gap, $list-item-slim-avatar-spacer-width)
|
||||
|
||||
> .v-list-item-action ~ .v-list-item__spacer
|
||||
width: var(--v-list-prepend-gap, $list-item-slim-action-spacer-width)
|
||||
|
||||
.v-list-item--three-line &
|
||||
align-self: start
|
||||
|
||||
.v-list-item__content
|
||||
align-self: center
|
||||
grid-area: content
|
||||
overflow: hidden
|
||||
min-width: $list-item-content-min-width
|
||||
|
||||
.v-navigation-drawer--rail:not(.v-navigation-drawer--expand-on-hover) &,
|
||||
.v-navigation-drawer--rail.v-navigation-drawer--expand-on-hover:not(.v-navigation-drawer--is-hovering) &
|
||||
min-width: 0
|
||||
|
||||
.v-list-item-action
|
||||
align-self: center
|
||||
display: flex
|
||||
align-items: center
|
||||
flex: none
|
||||
transition: inherit
|
||||
transition-property: height, width
|
||||
|
||||
&--start
|
||||
margin-inline-end: $list-item-action-margin-end
|
||||
margin-inline-start: -$list-item-action-margin-start
|
||||
|
||||
&--end
|
||||
margin-inline-start: $list-item-action-margin-start
|
||||
margin-inline-end: -$list-item-action-margin-end
|
||||
|
||||
.v-list-item-media
|
||||
margin-top: $list-item-media-margin-top
|
||||
margin-bottom: $list-item-media-margin-bottom
|
||||
|
||||
&--start
|
||||
margin-inline-end: $list-item-media-margin-end
|
||||
|
||||
&--end
|
||||
margin-inline-start: $list-item-media-margin-start
|
||||
|
||||
.v-list-item--two-line &
|
||||
margin-top: $list-item-media-two-line-margin-top
|
||||
margin-bottom: $list-item-media-two-line-margin-bottom
|
||||
|
||||
.v-list-item--three-line &
|
||||
margin-top: $list-item-media-three-line-margin-top
|
||||
margin-bottom: $list-item-media-three-line-margin-bottom
|
||||
|
||||
.v-list-item-subtitle
|
||||
-webkit-box-orient: vertical
|
||||
display: -webkit-box
|
||||
opacity: $list-item-subtitle-opacity
|
||||
overflow: hidden
|
||||
padding: $list-item-subtitle-padding
|
||||
text-overflow: ellipsis
|
||||
overflow-wrap: $list-item-subtitle-overflow-wrap
|
||||
word-break: $list-item-subtitle-word-break
|
||||
|
||||
.v-list-item--one-line &
|
||||
-webkit-line-clamp: 1
|
||||
|
||||
.v-list-item--two-line &
|
||||
-webkit-line-clamp: 2
|
||||
|
||||
.v-list-item--three-line &
|
||||
-webkit-line-clamp: 3
|
||||
|
||||
@include tools.typography($list-item-subtitle-typography...)
|
||||
|
||||
.v-list-item--nav &
|
||||
@include tools.typography($list-item-nav-subtitle-typography...)
|
||||
|
||||
.v-list-item-title
|
||||
hyphens: $list-item-title-hyphens
|
||||
overflow-wrap: $list-item-title-overflow-wrap
|
||||
overflow: hidden
|
||||
padding: $list-item-title-padding
|
||||
white-space: nowrap
|
||||
text-overflow: ellipsis
|
||||
word-break: $list-item-title-word-break
|
||||
word-wrap: $list-item-title-word-wrap
|
||||
|
||||
@include tools.typography($list-item-title-typography...)
|
||||
|
||||
.v-list-item--nav &
|
||||
@include tools.typography($list-item-nav-title-typography...)
|
||||
|
||||
.v-list-item
|
||||
@at-root
|
||||
@include tools.density('v-list-item', $list-density) using ($modifier)
|
||||
min-height: $list-item-min-height + $modifier
|
||||
|
||||
&.v-list-item--one-line
|
||||
$one-line-padding: (list.nth($list-item-padding, 1) + $modifier)
|
||||
|
||||
min-height: $list-item-one-line-min-height + $modifier
|
||||
|
||||
@if ($one-line-padding > 0)
|
||||
padding-top: $one-line-padding
|
||||
padding-bottom: $one-line-padding
|
||||
|
||||
&.v-list-item--two-line
|
||||
$two-line-padding: (list.nth($list-item-two-line-padding, 1) + $modifier)
|
||||
|
||||
min-height: $list-item-two-line-min-height + $modifier
|
||||
|
||||
@if ($two-line-padding > 0)
|
||||
padding-top: $two-line-padding
|
||||
padding-bottom: $two-line-padding
|
||||
|
||||
&.v-list-item--three-line
|
||||
$three-line-padding: (list.nth($list-item-three-line-padding, 1) + $modifier)
|
||||
|
||||
min-height: $list-item-three-line-min-height + $modifier
|
||||
|
||||
@if ($three-line-padding > 0)
|
||||
padding-top: $three-line-padding
|
||||
padding-bottom: $three-line-padding
|
||||
|
||||
.v-list-item__prepend,
|
||||
.v-list-item__append
|
||||
padding-top: math.div($three-line-padding, 2)
|
||||
|
||||
&:not(.v-list-item--nav)
|
||||
&.v-list-item--one-line
|
||||
padding-inline: list.nth($list-item-padding, 2)
|
||||
|
||||
&.v-list-item--two-line
|
||||
padding-inline: list.nth($list-item-two-line-padding, 2)
|
||||
|
||||
&.v-list-item--three-line
|
||||
padding-inline: list.nth($list-item-three-line-padding, 2)
|
||||
|
||||
&--nav
|
||||
padding-inline: $list-nav-padding
|
||||
|
||||
.v-list-item__underlay
|
||||
position: absolute
|
||||
|
||||
.v-list-item__overlay
|
||||
background-color: currentColor
|
||||
border-radius: inherit
|
||||
bottom: 0
|
||||
left: 0
|
||||
opacity: 0
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
transition: 0.2s ease-in-out
|
||||
transition-property: opacity, color
|
||||
|
||||
.v-list-item--active.v-list-item--variant-elevated &
|
||||
--v-theme-overlay-multiplier: 0
|
||||
|
||||
$base-padding: list.nth($list-item-padding, 2)
|
||||
.v-list
|
||||
--indent-padding: 0px
|
||||
|
||||
&--nav
|
||||
--indent-padding: -#{$list-nav-padding}
|
||||
|
||||
.v-list-group
|
||||
--list-indent-size: #{$list-indent-size}
|
||||
--parent-padding: var(--indent-padding)
|
||||
--prepend-width: var(--v-list-group-prepend, #{$list-item-prepend-size})
|
||||
|
||||
.v-list--slim &
|
||||
--prepend-width: var(--v-list-group-prepend, #{$list-item-slim-prepend-size})
|
||||
|
||||
&--fluid
|
||||
--list-indent-size: 0px
|
||||
|
||||
&--prepend
|
||||
--parent-padding: calc(var(--indent-padding) + var(--prepend-width))
|
||||
|
||||
&--fluid.v-list-group--prepend
|
||||
--parent-padding: var(--indent-padding)
|
||||
|
||||
.v-list-group__items
|
||||
--indent-padding: calc(var(--parent-padding) + var(--v-list-indent, var(--list-indent-size)))
|
||||
min-width: min-content
|
||||
|
||||
.v-navigation-drawer--rail &
|
||||
min-width: 0
|
||||
|
||||
.v-list-group__items .v-list-item
|
||||
@include tools.layer('overrides')
|
||||
padding-inline-start: calc(#{$base-padding} + var(--indent-padding))
|
||||
|
||||
.v-list-group__header:not(.v-treeview-item--activatable-group-activator).v-list-item--active
|
||||
&:not(:focus-visible)
|
||||
.v-list-item__overlay
|
||||
opacity: 0
|
||||
|
||||
&:hover
|
||||
.v-list-item__overlay
|
||||
opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier))
|
||||
|
||||
@include tools.layer('trumps')
|
||||
@media (forced-colors: active)
|
||||
.v-list-item
|
||||
&--link:not(&--active)
|
||||
color: buttontext
|
||||
|
||||
&--link[href]:not(&--active)
|
||||
color: unset
|
||||
|
||||
&--active:not(&--disabled)
|
||||
[class*="v-list-item-"],
|
||||
[class*="v-list-item-"] > *,
|
||||
.v-icon
|
||||
color: highlight
|
||||
|
||||
&--active:not(&--variant-text, &--variant-plain):not(&--disabled)
|
||||
background: highlight
|
||||
|
||||
[class*="v-list-item-"],
|
||||
[class*="v-list-item-"] > *,
|
||||
.v-icon
|
||||
opacity: 1
|
||||
color: highlighttext
|
||||
forced-color-adjust: preserve-parent-color
|
||||
|
||||
&--focus-visible::after
|
||||
opacity: 1
|
||||
|
||||
@supports selector(:focus-visible)
|
||||
&::after
|
||||
color: buttontext
|
||||
|
||||
&:focus-visible::after
|
||||
opacity: 1
|
||||
+155
@@ -0,0 +1,155 @@
|
||||
export declare const makeVListItemActionProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
tag?: unknown;
|
||||
start?: unknown;
|
||||
end?: 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>;
|
||||
};
|
||||
start: unknown extends Defaults["start"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["start"] ? boolean : boolean | Defaults["start"]>;
|
||||
default: unknown extends Defaults["start"] ? boolean : boolean | Defaults["start"];
|
||||
};
|
||||
end: unknown extends Defaults["end"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["end"] ? boolean : boolean | Defaults["end"]>;
|
||||
default: unknown extends Defaults["end"] ? boolean : boolean | Defaults["end"];
|
||||
};
|
||||
};
|
||||
export declare const VListItemAction: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | 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;
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => 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;
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
start: boolean;
|
||||
end: 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;
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | 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;
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => 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;
|
||||
};
|
||||
start: BooleanConstructor;
|
||||
end: BooleanConstructor;
|
||||
}, 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;
|
||||
};
|
||||
start: BooleanConstructor;
|
||||
end: BooleanConstructor;
|
||||
}>>;
|
||||
export type VListItemAction = InstanceType<typeof VListItemAction>;
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
|
||||
// Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeTagProps } from "../../composables/tag.js"; // Utilities
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVListItemActionProps = propsFactory({
|
||||
start: Boolean,
|
||||
end: Boolean,
|
||||
...makeComponentProps(),
|
||||
...makeTagProps()
|
||||
}, 'VListItemAction');
|
||||
export const VListItemAction = genericComponent()({
|
||||
name: 'VListItemAction',
|
||||
props: makeVListItemActionProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
useRender(() => _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-list-item-action', {
|
||||
'v-list-item-action--start': props.start,
|
||||
'v-list-item-action--end': props.end
|
||||
}, props.class]),
|
||||
"style": _normalizeStyle(props.style)
|
||||
}, slots));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VListItemAction.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VListItemAction.js","names":["makeComponentProps","makeTagProps","genericComponent","propsFactory","useRender","makeVListItemActionProps","start","Boolean","end","VListItemAction","name","props","setup","slots","_createVNode","tag","_normalizeClass","class","_normalizeStyle","style"],"sources":["../../../src/components/VList/VListItemAction.tsx"],"sourcesContent":["// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVListItemActionProps = propsFactory({\n start: Boolean,\n end: Boolean,\n\n ...makeComponentProps(),\n ...makeTagProps(),\n}, 'VListItemAction')\n\nexport const VListItemAction = genericComponent()({\n name: 'VListItemAction',\n\n props: makeVListItemActionProps(),\n\n setup (props, { slots }) {\n useRender(() => (\n <props.tag\n class={[\n 'v-list-item-action',\n {\n 'v-list-item-action--start': props.start,\n 'v-list-item-action--end': props.end,\n },\n props.class,\n ]}\n style={ props.style }\n v-slots={ slots }\n />\n ))\n\n return {}\n },\n})\n\nexport type VListItemAction = InstanceType<typeof VListItemAction>\n"],"mappings":";AAAA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,YAAY,oCAErB;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,wBAAwB,GAAGF,YAAY,CAAC;EACnDG,KAAK,EAAEC,OAAO;EACdC,GAAG,EAAED,OAAO;EAEZ,GAAGP,kBAAkB,CAAC,CAAC;EACvB,GAAGC,YAAY,CAAC;AAClB,CAAC,EAAE,iBAAiB,CAAC;AAErB,OAAO,MAAMQ,eAAe,GAAGP,gBAAgB,CAAC,CAAC,CAAC;EAChDQ,IAAI,EAAE,iBAAiB;EAEvBC,KAAK,EAAEN,wBAAwB,CAAC,CAAC;EAEjCO,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvBT,SAAS,CAAC,MAAAU,YAAA,CAAAH,KAAA,CAAAI,GAAA;MAAA,SAAAC,eAAA,CAEC,CACL,oBAAoB,EACpB;QACE,2BAA2B,EAAEL,KAAK,CAACL,KAAK;QACxC,yBAAyB,EAAEK,KAAK,CAACH;MACnC,CAAC,EACDG,KAAK,CAACM,KAAK,CACZ;MAAA,SAAAC,eAAA,CACOP,KAAK,CAACQ,KAAK;IAAA,GACTN,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+155
@@ -0,0 +1,155 @@
|
||||
export declare const makeVListItemMediaProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
tag?: unknown;
|
||||
start?: unknown;
|
||||
end?: 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>;
|
||||
};
|
||||
start: unknown extends Defaults["start"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["start"] ? boolean : boolean | Defaults["start"]>;
|
||||
default: unknown extends Defaults["start"] ? boolean : boolean | Defaults["start"];
|
||||
};
|
||||
end: unknown extends Defaults["end"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["end"] ? boolean : boolean | Defaults["end"]>;
|
||||
default: unknown extends Defaults["end"] ? boolean : boolean | Defaults["end"];
|
||||
};
|
||||
};
|
||||
export declare const VListItemMedia: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | 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;
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => 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;
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
start: boolean;
|
||||
end: 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;
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | 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;
|
||||
start: boolean;
|
||||
end: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => 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;
|
||||
};
|
||||
start: BooleanConstructor;
|
||||
end: BooleanConstructor;
|
||||
}, 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;
|
||||
};
|
||||
start: BooleanConstructor;
|
||||
end: BooleanConstructor;
|
||||
}>>;
|
||||
export type VListItemMedia = InstanceType<typeof VListItemMedia>;
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
|
||||
// Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeTagProps } from "../../composables/tag.js"; // Utilities
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVListItemMediaProps = propsFactory({
|
||||
start: Boolean,
|
||||
end: Boolean,
|
||||
...makeComponentProps(),
|
||||
...makeTagProps()
|
||||
}, 'VListItemMedia');
|
||||
export const VListItemMedia = genericComponent()({
|
||||
name: 'VListItemMedia',
|
||||
props: makeVListItemMediaProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
useRender(() => {
|
||||
return _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-list-item-media', {
|
||||
'v-list-item-media--start': props.start,
|
||||
'v-list-item-media--end': props.end
|
||||
}, props.class]),
|
||||
"style": _normalizeStyle(props.style)
|
||||
}, slots);
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VListItemMedia.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VListItemMedia.js","names":["makeComponentProps","makeTagProps","genericComponent","propsFactory","useRender","makeVListItemMediaProps","start","Boolean","end","VListItemMedia","name","props","setup","slots","_createVNode","tag","_normalizeClass","class","_normalizeStyle","style"],"sources":["../../../src/components/VList/VListItemMedia.tsx"],"sourcesContent":["// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVListItemMediaProps = propsFactory({\n start: Boolean,\n end: Boolean,\n\n ...makeComponentProps(),\n ...makeTagProps(),\n}, 'VListItemMedia')\n\nexport const VListItemMedia = genericComponent()({\n name: 'VListItemMedia',\n\n props: makeVListItemMediaProps(),\n\n setup (props, { slots }) {\n useRender(() => {\n return (\n <props.tag\n class={[\n 'v-list-item-media',\n {\n 'v-list-item-media--start': props.start,\n 'v-list-item-media--end': props.end,\n },\n props.class,\n ]}\n style={ props.style }\n v-slots={ slots }\n />\n )\n })\n\n return {}\n },\n})\n\nexport type VListItemMedia = InstanceType<typeof VListItemMedia>\n"],"mappings":";AAAA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,YAAY,oCAErB;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,uBAAuB,GAAGF,YAAY,CAAC;EAClDG,KAAK,EAAEC,OAAO;EACdC,GAAG,EAAED,OAAO;EAEZ,GAAGP,kBAAkB,CAAC,CAAC;EACvB,GAAGC,YAAY,CAAC;AAClB,CAAC,EAAE,gBAAgB,CAAC;AAEpB,OAAO,MAAMQ,cAAc,GAAGP,gBAAgB,CAAC,CAAC,CAAC;EAC/CQ,IAAI,EAAE,gBAAgB;EAEtBC,KAAK,EAAEN,uBAAuB,CAAC,CAAC;EAEhCO,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvBT,SAAS,CAAC,MAAM;MACd,OAAAU,YAAA,CAAAH,KAAA,CAAAI,GAAA;QAAA,SAAAC,eAAA,CAEW,CACL,mBAAmB,EACnB;UACE,0BAA0B,EAAEL,KAAK,CAACL,KAAK;UACvC,wBAAwB,EAAEK,KAAK,CAACH;QAClC,CAAC,EACDG,KAAK,CAACM,KAAK,CACZ;QAAA,SAAAC,eAAA,CACOP,KAAK,CAACQ,KAAK;MAAA,GACTN,KAAK;IAGrB,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+139
@@ -0,0 +1,139 @@
|
||||
export declare const makeVListItemSubtitleProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
tag?: unknown;
|
||||
opacity?: 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>;
|
||||
};
|
||||
opacity: unknown extends Defaults["opacity"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: import("vue").PropType<unknown extends Defaults["opacity"] ? string | number : string | number | Defaults["opacity"]>;
|
||||
default: unknown extends Defaults["opacity"] ? string | number : Defaults["opacity"] | NonNullable<string | number>;
|
||||
};
|
||||
};
|
||||
export declare const VListItemSubtitle: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
} & {
|
||||
class?: any;
|
||||
opacity?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | 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;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => 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;
|
||||
} & {
|
||||
class?: any;
|
||||
opacity?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
}>;
|
||||
__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;
|
||||
} & {
|
||||
class?: any;
|
||||
opacity?: string | number | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | 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;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => 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;
|
||||
};
|
||||
opacity: (NumberConstructor | StringConstructor)[];
|
||||
}, 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;
|
||||
};
|
||||
opacity: (NumberConstructor | StringConstructor)[];
|
||||
}>>;
|
||||
export type VListItemSubtitle = InstanceType<typeof VListItemSubtitle>;
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
|
||||
// Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeTagProps } from "../../composables/tag.js"; // Utilities
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVListItemSubtitleProps = propsFactory({
|
||||
opacity: [Number, String],
|
||||
...makeComponentProps(),
|
||||
...makeTagProps()
|
||||
}, 'VListItemSubtitle');
|
||||
export const VListItemSubtitle = genericComponent()({
|
||||
name: 'VListItemSubtitle',
|
||||
props: makeVListItemSubtitleProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
useRender(() => _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-list-item-subtitle', props.class]),
|
||||
"style": _normalizeStyle([{
|
||||
'--v-list-item-subtitle-opacity': props.opacity
|
||||
}, props.style])
|
||||
}, slots));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VListItemSubtitle.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VListItemSubtitle.js","names":["makeComponentProps","makeTagProps","genericComponent","propsFactory","useRender","makeVListItemSubtitleProps","opacity","Number","String","VListItemSubtitle","name","props","setup","slots","_createVNode","tag","_normalizeClass","class","_normalizeStyle","style"],"sources":["../../../src/components/VList/VListItemSubtitle.tsx"],"sourcesContent":["// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVListItemSubtitleProps = propsFactory({\n opacity: [Number, String],\n\n ...makeComponentProps(),\n ...makeTagProps(),\n}, 'VListItemSubtitle')\n\nexport const VListItemSubtitle = genericComponent()({\n name: 'VListItemSubtitle',\n\n props: makeVListItemSubtitleProps(),\n\n setup (props, { slots }) {\n useRender(() => (\n <props.tag\n class={[\n 'v-list-item-subtitle',\n props.class,\n ]}\n style={[\n { '--v-list-item-subtitle-opacity': props.opacity },\n props.style,\n ]}\n v-slots={ slots }\n />\n ))\n\n return {}\n },\n})\n\nexport type VListItemSubtitle = InstanceType<typeof VListItemSubtitle>\n"],"mappings":";AAAA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,YAAY,oCAErB;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,0BAA0B,GAAGF,YAAY,CAAC;EACrDG,OAAO,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;EAEzB,GAAGR,kBAAkB,CAAC,CAAC;EACvB,GAAGC,YAAY,CAAC;AAClB,CAAC,EAAE,mBAAmB,CAAC;AAEvB,OAAO,MAAMQ,iBAAiB,GAAGP,gBAAgB,CAAC,CAAC,CAAC;EAClDQ,IAAI,EAAE,mBAAmB;EAEzBC,KAAK,EAAEN,0BAA0B,CAAC,CAAC;EAEnCO,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvBT,SAAS,CAAC,MAAAU,YAAA,CAAAH,KAAA,CAAAI,GAAA;MAAA,SAAAC,eAAA,CAEC,CACL,sBAAsB,EACtBL,KAAK,CAACM,KAAK,CACZ;MAAA,SAAAC,eAAA,CACM,CACL;QAAE,gCAAgC,EAAEP,KAAK,CAACL;MAAQ,CAAC,EACnDK,KAAK,CAACQ,KAAK,CACZ;IAAA,GACSN,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+105
@@ -0,0 +1,105 @@
|
||||
export declare const VListItemTitle: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, 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;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => 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;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => 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: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
tag: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
}>>;
|
||||
export type VListItemTitle = InstanceType<typeof VListItemTitle>;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
// Utilities
|
||||
import { createSimpleFunctional } from "../../util/index.js";
|
||||
export const VListItemTitle = createSimpleFunctional('v-list-item-title');
|
||||
//# sourceMappingURL=VListItemTitle.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VListItemTitle.js","names":["createSimpleFunctional","VListItemTitle"],"sources":["../../../src/components/VList/VListItemTitle.ts"],"sourcesContent":["// Utilities\nimport { createSimpleFunctional } from '@/util'\n\nexport const VListItemTitle = createSimpleFunctional('v-list-item-title')\n\nexport type VListItemTitle = InstanceType<typeof VListItemTitle>\n"],"mappings":"AAAA;AAAA,SACSA,sBAAsB;AAE/B,OAAO,MAAMC,cAAc,GAAGD,sBAAsB,CAAC,mBAAmB,CAAC","ignoreList":[]}
|
||||
+175
@@ -0,0 +1,175 @@
|
||||
export declare const makeVListSubheaderProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
tag?: unknown;
|
||||
color?: unknown;
|
||||
inset?: unknown;
|
||||
sticky?: unknown;
|
||||
title?: 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>;
|
||||
};
|
||||
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"];
|
||||
};
|
||||
inset: unknown extends Defaults["inset"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["inset"] ? boolean : boolean | Defaults["inset"]>;
|
||||
default: unknown extends Defaults["inset"] ? boolean : boolean | Defaults["inset"];
|
||||
};
|
||||
sticky: unknown extends Defaults["sticky"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["sticky"] ? boolean : boolean | Defaults["sticky"]>;
|
||||
default: unknown extends Defaults["sticky"] ? boolean : boolean | Defaults["sticky"];
|
||||
};
|
||||
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"];
|
||||
};
|
||||
};
|
||||
export declare const VListSubheader: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
inset: boolean;
|
||||
sticky: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
color?: string | undefined;
|
||||
title?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | 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;
|
||||
inset: boolean;
|
||||
sticky: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => 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;
|
||||
inset: boolean;
|
||||
sticky: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
color?: string | undefined;
|
||||
title?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
tag: string | import("../../util/index.js").JSXComponent;
|
||||
inset: boolean;
|
||||
sticky: 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;
|
||||
inset: boolean;
|
||||
sticky: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
color?: string | undefined;
|
||||
title?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | 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;
|
||||
inset: boolean;
|
||||
sticky: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => 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;
|
||||
};
|
||||
color: StringConstructor;
|
||||
inset: BooleanConstructor;
|
||||
sticky: BooleanConstructor;
|
||||
title: StringConstructor;
|
||||
}, 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;
|
||||
};
|
||||
color: StringConstructor;
|
||||
inset: BooleanConstructor;
|
||||
sticky: BooleanConstructor;
|
||||
title: StringConstructor;
|
||||
}>>;
|
||||
export type VListSubheader = InstanceType<typeof VListSubheader>;
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
import { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
|
||||
// Composables
|
||||
import { useTextColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeTagProps } from "../../composables/tag.js"; // Utilities
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVListSubheaderProps = propsFactory({
|
||||
color: String,
|
||||
inset: Boolean,
|
||||
sticky: Boolean,
|
||||
title: String,
|
||||
...makeComponentProps(),
|
||||
...makeTagProps()
|
||||
}, 'VListSubheader');
|
||||
export const VListSubheader = genericComponent()({
|
||||
name: 'VListSubheader',
|
||||
props: makeVListSubheaderProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
textColorClasses,
|
||||
textColorStyles
|
||||
} = useTextColor(() => props.color);
|
||||
useRender(() => {
|
||||
const hasText = !!(slots.default || props.title);
|
||||
return _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-list-subheader', {
|
||||
'v-list-subheader--inset': props.inset,
|
||||
'v-list-subheader--sticky': props.sticky
|
||||
}, textColorClasses.value, props.class]),
|
||||
"style": _normalizeStyle([{
|
||||
textColorStyles
|
||||
}, props.style])
|
||||
}, {
|
||||
default: () => [hasText && _createElementVNode("div", {
|
||||
"class": "v-list-subheader__text"
|
||||
}, [slots.default?.() ?? props.title])]
|
||||
});
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VListSubheader.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VListSubheader.js","names":["useTextColor","makeComponentProps","makeTagProps","genericComponent","propsFactory","useRender","makeVListSubheaderProps","color","String","inset","Boolean","sticky","title","VListSubheader","name","props","setup","slots","textColorClasses","textColorStyles","hasText","default","_createVNode","tag","_normalizeClass","value","class","_normalizeStyle","style","_createElementVNode"],"sources":["../../../src/components/VList/VListSubheader.tsx"],"sourcesContent":["// Composables\nimport { useTextColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVListSubheaderProps = propsFactory({\n color: String,\n inset: Boolean,\n sticky: Boolean,\n title: String,\n\n ...makeComponentProps(),\n ...makeTagProps(),\n}, 'VListSubheader')\n\nexport const VListSubheader = genericComponent()({\n name: 'VListSubheader',\n\n props: makeVListSubheaderProps(),\n\n setup (props, { slots }) {\n const { textColorClasses, textColorStyles } = useTextColor(() => props.color)\n\n useRender(() => {\n const hasText = !!(slots.default || props.title)\n\n return (\n <props.tag\n class={[\n 'v-list-subheader',\n {\n 'v-list-subheader--inset': props.inset,\n 'v-list-subheader--sticky': props.sticky,\n },\n textColorClasses.value,\n props.class,\n ]}\n style={[\n { textColorStyles },\n props.style,\n ]}\n >\n { hasText && (\n <div class=\"v-list-subheader__text\">\n { slots.default?.() ?? props.title }\n </div>\n )}\n </props.tag>\n )\n })\n\n return {}\n },\n})\n\nexport type VListSubheader = InstanceType<typeof VListSubheader>\n"],"mappings":";AAAA;AAAA,SACSA,YAAY;AAAA,SACZC,kBAAkB;AAAA,SAClBC,YAAY,oCAErB;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,uBAAuB,GAAGF,YAAY,CAAC;EAClDG,KAAK,EAAEC,MAAM;EACbC,KAAK,EAAEC,OAAO;EACdC,MAAM,EAAED,OAAO;EACfE,KAAK,EAAEJ,MAAM;EAEb,GAAGP,kBAAkB,CAAC,CAAC;EACvB,GAAGC,YAAY,CAAC;AAClB,CAAC,EAAE,gBAAgB,CAAC;AAEpB,OAAO,MAAMW,cAAc,GAAGV,gBAAgB,CAAC,CAAC,CAAC;EAC/CW,IAAI,EAAE,gBAAgB;EAEtBC,KAAK,EAAET,uBAAuB,CAAC,CAAC;EAEhCU,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvB,MAAM;MAAEC,gBAAgB;MAAEC;IAAgB,CAAC,GAAGnB,YAAY,CAAC,MAAMe,KAAK,CAACR,KAAK,CAAC;IAE7EF,SAAS,CAAC,MAAM;MACd,MAAMe,OAAO,GAAG,CAAC,EAAEH,KAAK,CAACI,OAAO,IAAIN,KAAK,CAACH,KAAK,CAAC;MAEhD,OAAAU,YAAA,CAAAP,KAAA,CAAAQ,GAAA;QAAA,SAAAC,eAAA,CAEW,CACL,kBAAkB,EAClB;UACE,yBAAyB,EAAET,KAAK,CAACN,KAAK;UACtC,0BAA0B,EAAEM,KAAK,CAACJ;QACpC,CAAC,EACDO,gBAAgB,CAACO,KAAK,EACtBV,KAAK,CAACW,KAAK,CACZ;QAAA,SAAAC,eAAA,CACM,CACL;UAAER;QAAgB,CAAC,EACnBJ,KAAK,CAACa,KAAK,CACZ;MAAA;QAAAP,OAAA,EAAAA,CAAA,MAECD,OAAO,IAAAS,mBAAA;UAAA;QAAA,IAEHZ,KAAK,CAACI,OAAO,GAAG,CAAC,IAAIN,KAAK,CAACH,KAAK,EAErC;MAAA;IAGP,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+168
@@ -0,0 +1,168 @@
|
||||
@use 'sass:map';
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
|
||||
// VList
|
||||
$list-background: rgba(var(--v-theme-surface)) !default;
|
||||
$list-border-color: settings.$border-color-root !default;
|
||||
$list-border-radius: 0 !default;
|
||||
$list-border-style: settings.$border-style-root !default;
|
||||
$list-border-thin-width: thin !default;
|
||||
$list-border-width: 0 !default;
|
||||
$list-color: tools.theme-color('on-surface', var(--v-high-emphasis-opacity)) !default;
|
||||
$list-disabled-opacity: 0.6 !default;
|
||||
$list-elevation: 0 !default;
|
||||
$list-padding: 8px 0 !default;
|
||||
$list-rounded-border-radius: map.get(settings.$rounded, null) !default;
|
||||
$list-indent-size: 16px !default;
|
||||
|
||||
$list-nav-padding: 8px !default;
|
||||
$list-nav-subheader-font-size: .75rem !default;
|
||||
|
||||
// VListSubheader
|
||||
$list-subheader-color: tools.theme-color('on-surface', var(--v-medium-emphasis-opacity)) !default;
|
||||
$list-subheader-font-size: .875rem !default;
|
||||
$list-subheader-font-weight: 400 !default;
|
||||
$list-subheader-inset-padding-start: 56px !default;
|
||||
$list-subheader-line-height: 1.375rem !default;
|
||||
$list-subheader-min-height: 40px !default;
|
||||
$list-subheader-padding-end: 16px !default;
|
||||
$list-subheader-padding-top: 0 !default;
|
||||
$list-subheader-min-height-multiplier: 1 !default;
|
||||
$list-subheader-transition: 0.2s min-height settings.$standard-easing !default;
|
||||
|
||||
// VListItem
|
||||
$list-item-border-color: settings.$border-color-root !default;
|
||||
$list-item-border-radius: 0 !default;
|
||||
$list-item-border-style: settings.$border-style-root !default;
|
||||
$list-item-border-width: 0 !default;
|
||||
$list-item-border-thin-width: thin !default;
|
||||
$list-item-content-min-width: 40px !default;
|
||||
$list-item-elevation: 1 !default;
|
||||
$list-item-icon-opacity: var(--v-medium-emphasis-opacity) !default;
|
||||
$list-item-icon-active-opacity: 1 !default;
|
||||
$list-item-min-height: 40px !default;
|
||||
$list-item-padding: 4px 16px !default;
|
||||
$list-item-prepend-size: 40px !default;
|
||||
$list-item-slim-prepend-size: 28px !default;
|
||||
$list-item-plain-opacity: .62 !default;
|
||||
$list-item-rounded-border-radius: map.get(settings.$rounded, null) !default;
|
||||
$list-item-one-line-min-height: 48px !default;
|
||||
$list-item-two-line-min-height: 64px !default;
|
||||
$list-item-two-line-padding: 12px 16px !default;
|
||||
$list-item-three-line-min-height: 88px !default;
|
||||
$list-item-three-line-padding: 16px 16px !default;
|
||||
|
||||
$list-item-action-spacer-width: 16px !default;
|
||||
$list-item-slim-action-spacer-width: 4px !default;
|
||||
$list-item-avatar-margin-end: 16px !default;
|
||||
$list-item-avatar-margin-start: 16px !default;
|
||||
$list-item-slim-spacer-width: 20px !default;
|
||||
$list-item-slim-avatar-spacer-width: 4px !default;
|
||||
|
||||
$list-item-action-margin-end: 8px !default;
|
||||
$list-item-action-margin-start: 8px !default;
|
||||
|
||||
$list-item-icon-margin-end: 32px !default;
|
||||
$list-item-icon-margin-start: 32px !default;
|
||||
|
||||
$list-item-media-margin-bottom: 0 !default;
|
||||
$list-item-media-margin-end: 16px !default;
|
||||
$list-item-media-margin-start: 16px !default;
|
||||
$list-item-media-margin-top: 0 !default;
|
||||
$list-item-media-two-line-margin-bottom: -4px !default;
|
||||
$list-item-media-two-line-margin-top: -4px !default;
|
||||
$list-item-media-three-line-margin-bottom: 0 !default;
|
||||
$list-item-media-three-line-margin-top: 0 !default;
|
||||
|
||||
$list-item-nav-margin-top: 4px !default;
|
||||
$list-item-nav-title-font-size: .8125rem !default;
|
||||
$list-item-nav-title-font-weight: 500 !default;
|
||||
$list-item-nav-title-letter-spacing: normal !default;
|
||||
$list-item-nav-title-line-height: 1rem !default;
|
||||
$list-item-nav-subtitle-font-size: .75rem !default;
|
||||
$list-item-nav-subtitle-font-weight: tools.map-deep-get(settings.$typography, 'body-medium', 'weight') !default;
|
||||
$list-item-nav-subtitle-letter-spacing: tools.map-deep-get(settings.$typography, 'body-medium', 'letter-spacing') !default;
|
||||
$list-item-nav-subtitle-line-height: 1rem !default;
|
||||
|
||||
$list-item-subtitle-opacity: var(--v-list-item-subtitle-opacity, var(--v-medium-emphasis-opacity)) !default;
|
||||
$list-item-subtitle-font-size: tools.map-deep-get(settings.$typography, 'body-medium', 'size') !default;
|
||||
$list-item-subtitle-font-weight: tools.map-deep-get(settings.$typography, 'body-medium', 'weight') !default;
|
||||
$list-item-subtitle-letter-spacing: tools.map-deep-get(settings.$typography, 'body-medium', 'letter-spacing') !default;
|
||||
$list-item-subtitle-line-height: 1rem !default;
|
||||
$list-item-subtitle-padding: 0 !default;
|
||||
$list-item-subtitle-text-transform: none !default;
|
||||
$list-item-subtitle-overflow-wrap: break-word !default;
|
||||
$list-item-subtitle-word-break: initial !default;
|
||||
|
||||
$list-item-title-font-size: tools.map-deep-get(settings.$typography, 'body-large', 'size') !default;
|
||||
$list-item-title-font-weight: tools.map-deep-get(settings.$typography, 'body-large', 'weight') !default;
|
||||
$list-item-title-hyphens: auto !default;
|
||||
$list-item-title-letter-spacing: tools.map-deep-get(settings.$typography, 'body-large', 'letter-spacing') !default;
|
||||
$list-item-title-line-height: tools.map-deep-get(settings.$typography, 'body-large', 'line-height') !default;
|
||||
$list-item-title-overflow-wrap: normal !default;
|
||||
$list-item-title-padding: 0 !default;
|
||||
$list-item-title-text-transform: none !default;
|
||||
$list-item-title-word-break: normal !default;
|
||||
$list-item-title-word-wrap: break-word !default;
|
||||
|
||||
$list-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
|
||||
|
||||
$list-border: (
|
||||
$list-border-color,
|
||||
$list-border-style,
|
||||
$list-border-width,
|
||||
$list-border-thin-width
|
||||
) !default;
|
||||
|
||||
$list-theme: (
|
||||
$list-background,
|
||||
$list-color
|
||||
) !default;
|
||||
|
||||
$list-item-border: (
|
||||
$list-item-border-color,
|
||||
$list-item-border-style,
|
||||
$list-item-border-width,
|
||||
$list-item-border-thin-width
|
||||
) !default;
|
||||
|
||||
$list-item-title-typography: (
|
||||
$list-item-title-font-size,
|
||||
$list-item-title-font-weight,
|
||||
$list-item-title-letter-spacing,
|
||||
$list-item-title-line-height,
|
||||
$list-item-title-text-transform
|
||||
) !default;
|
||||
|
||||
$list-item-subtitle-typography: (
|
||||
$list-item-subtitle-font-size,
|
||||
$list-item-subtitle-font-weight,
|
||||
$list-item-subtitle-letter-spacing,
|
||||
$list-item-subtitle-line-height,
|
||||
$list-item-subtitle-text-transform
|
||||
) !default;
|
||||
|
||||
$list-item-nav-title-typography: (
|
||||
$list-item-nav-title-font-size,
|
||||
$list-item-nav-title-font-weight,
|
||||
$list-item-nav-title-letter-spacing,
|
||||
$list-item-nav-title-line-height,
|
||||
null
|
||||
) !default;
|
||||
|
||||
$list-item-nav-subtitle-typography: (
|
||||
$list-item-nav-subtitle-font-size,
|
||||
$list-item-nav-subtitle-font-weight,
|
||||
$list-item-nav-subtitle-letter-spacing,
|
||||
$list-item-nav-subtitle-line-height,
|
||||
null
|
||||
) !default;
|
||||
|
||||
$list-item-variants: (
|
||||
$list-background,
|
||||
$list-color,
|
||||
$list-item-elevation,
|
||||
$list-item-plain-opacity,
|
||||
'v-list-item'
|
||||
) !default;
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
export { VList } from './VList.js';
|
||||
export { VListGroup } from './VListGroup.js';
|
||||
export { VListImg } from './VListImg.js';
|
||||
export { VListItem } from './VListItem.js';
|
||||
export { VListItemAction } from './VListItemAction.js';
|
||||
export { VListItemMedia } from './VListItemMedia.js';
|
||||
export { VListItemSubtitle } from './VListItemSubtitle.js';
|
||||
export { VListItemTitle } from './VListItemTitle.js';
|
||||
export { VListSubheader } from './VListSubheader.js';
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
export { VList } from "./VList.js";
|
||||
export { VListGroup } from "./VListGroup.js";
|
||||
export { VListImg } from "./VListImg.js";
|
||||
export { VListItem } from "./VListItem.js";
|
||||
export { VListItemAction } from "./VListItemAction.js";
|
||||
export { VListItemMedia } from "./VListItemMedia.js";
|
||||
export { VListItemSubtitle } from "./VListItemSubtitle.js";
|
||||
export { VListItemTitle } from "./VListItemTitle.js";
|
||||
export { VListSubheader } from "./VListSubheader.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VList","VListGroup","VListImg","VListItem","VListItemAction","VListItemMedia","VListItemSubtitle","VListItemTitle","VListSubheader"],"sources":["../../../src/components/VList/index.ts"],"sourcesContent":["export { VList } from './VList'\nexport { VListGroup } from './VListGroup'\nexport { VListImg } from './VListImg'\nexport { VListItem } from './VListItem'\nexport { VListItemAction } from './VListItemAction'\nexport { VListItemMedia } from './VListItemMedia'\nexport { VListItemSubtitle } from './VListItemSubtitle'\nexport { VListItemTitle } from './VListItemTitle'\nexport { VListSubheader } from './VListSubheader'\n"],"mappings":"SAASA,KAAK;AAAA,SACLC,UAAU;AAAA,SACVC,QAAQ;AAAA,SACRC,SAAS;AAAA,SACTC,eAAe;AAAA,SACfC,cAAc;AAAA,SACdC,iBAAiB;AAAA,SACjBC,cAAc;AAAA,SACdC,cAAc","ignoreList":[]}
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
import type { InjectionKey, MaybeRefOrGetter, Ref } from 'vue';
|
||||
export declare const DepthKey: InjectionKey<Ref<number>>;
|
||||
export declare function useDepth(hasPrepend?: Ref<boolean>): import("vue").ComputedRef<number>;
|
||||
export declare const ListKey: InjectionKey<{
|
||||
filterable: MaybeRefOrGetter<boolean>;
|
||||
hasPrepend: Ref<boolean>;
|
||||
updateHasPrepend: (value: boolean) => void;
|
||||
trackingIndex: Ref<number>;
|
||||
navigationStrategy: Ref<'focus' | 'track'>;
|
||||
uid: string;
|
||||
}>;
|
||||
type InjectedListOptions = {
|
||||
filterable: MaybeRefOrGetter<boolean>;
|
||||
trackingIndex?: Ref<number>;
|
||||
navigationStrategy?: Ref<'focus' | 'track'>;
|
||||
uid?: string;
|
||||
};
|
||||
export declare function createList(options?: InjectedListOptions): {
|
||||
filterable: MaybeRefOrGetter<boolean>;
|
||||
hasPrepend: Ref<boolean>;
|
||||
updateHasPrepend: (value: boolean) => void;
|
||||
trackingIndex: Ref<number>;
|
||||
navigationStrategy: Ref<'focus' | 'track'>;
|
||||
uid: string;
|
||||
};
|
||||
export declare function useList(): {
|
||||
filterable: MaybeRefOrGetter<boolean>;
|
||||
hasPrepend: Ref<boolean>;
|
||||
updateHasPrepend: (value: boolean) => void;
|
||||
trackingIndex: Ref<number>;
|
||||
navigationStrategy: Ref<'focus' | 'track'>;
|
||||
uid: string;
|
||||
} | null;
|
||||
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
// Utilities
|
||||
import { computed, inject, provide, shallowRef, useId } from 'vue';
|
||||
|
||||
// Types
|
||||
|
||||
// Depth
|
||||
export const DepthKey = Symbol.for('vuetify:depth');
|
||||
export function useDepth(hasPrepend) {
|
||||
const parent = inject(DepthKey, shallowRef(-1));
|
||||
const depth = computed(() => parent.value + 1 + (hasPrepend?.value ? 1 : 0));
|
||||
provide(DepthKey, depth);
|
||||
return depth;
|
||||
}
|
||||
|
||||
// List
|
||||
export const ListKey = Symbol.for('vuetify:list');
|
||||
export function createList(options = {
|
||||
filterable: false
|
||||
}) {
|
||||
const parent = inject(ListKey, {
|
||||
filterable: false,
|
||||
hasPrepend: shallowRef(false),
|
||||
updateHasPrepend: () => null,
|
||||
trackingIndex: shallowRef(-1),
|
||||
navigationStrategy: shallowRef('focus'),
|
||||
uid: ''
|
||||
});
|
||||
const {
|
||||
filterable,
|
||||
trackingIndex = parent.trackingIndex,
|
||||
navigationStrategy = parent.navigationStrategy,
|
||||
uid = parent.uid || useId()
|
||||
} = options;
|
||||
const data = {
|
||||
filterable: parent.filterable || filterable,
|
||||
hasPrepend: shallowRef(false),
|
||||
updateHasPrepend: value => {
|
||||
if (value) data.hasPrepend.value = value;
|
||||
},
|
||||
trackingIndex,
|
||||
navigationStrategy,
|
||||
uid
|
||||
};
|
||||
provide(ListKey, data);
|
||||
return parent;
|
||||
}
|
||||
export function useList() {
|
||||
return inject(ListKey, null);
|
||||
}
|
||||
//# sourceMappingURL=list.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"list.js","names":["computed","inject","provide","shallowRef","useId","DepthKey","Symbol","for","useDepth","hasPrepend","parent","depth","value","ListKey","createList","options","filterable","updateHasPrepend","trackingIndex","navigationStrategy","uid","data","useList"],"sources":["../../../src/components/VList/list.ts"],"sourcesContent":["// Utilities\nimport { computed, inject, provide, shallowRef, useId } from 'vue'\n\n// Types\nimport type { InjectionKey, MaybeRefOrGetter, Ref } from 'vue'\n\n// Depth\nexport const DepthKey: InjectionKey<Ref<number>> = Symbol.for('vuetify:depth')\n\nexport function useDepth (hasPrepend?: Ref<boolean>) {\n const parent = inject(DepthKey, shallowRef(-1))\n\n const depth = computed(() => parent.value + 1 + (hasPrepend?.value ? 1 : 0))\n\n provide(DepthKey, depth)\n\n return depth\n}\n\n// List\nexport const ListKey: InjectionKey<{\n filterable: MaybeRefOrGetter<boolean>\n hasPrepend: Ref<boolean>\n updateHasPrepend: (value: boolean) => void\n trackingIndex: Ref<number>\n navigationStrategy: Ref<'focus' | 'track'>\n uid: string\n}> = Symbol.for('vuetify:list')\n\ntype InjectedListOptions = {\n filterable: MaybeRefOrGetter<boolean>\n trackingIndex?: Ref<number>\n navigationStrategy?: Ref<'focus' | 'track'>\n uid?: string\n}\n\nexport function createList (options: InjectedListOptions = { filterable: false }) {\n const parent = inject(ListKey, {\n filterable: false,\n hasPrepend: shallowRef(false),\n updateHasPrepend: () => null,\n trackingIndex: shallowRef(-1),\n navigationStrategy: shallowRef('focus' as 'focus' | 'track'),\n uid: '',\n })\n\n const {\n filterable,\n trackingIndex = parent.trackingIndex,\n navigationStrategy = parent.navigationStrategy,\n uid = parent.uid || useId(),\n } = options\n\n const data = {\n filterable: parent.filterable || filterable,\n hasPrepend: shallowRef(false),\n updateHasPrepend: (value: boolean) => {\n if (value) data.hasPrepend.value = value\n },\n trackingIndex,\n navigationStrategy,\n uid,\n }\n\n provide(ListKey, data)\n\n return parent\n}\n\nexport function useList () {\n return inject(ListKey, null)\n}\n"],"mappings":"AAAA;AACA,SAASA,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,KAAK,QAAQ,KAAK;;AAElE;;AAGA;AACA,OAAO,MAAMC,QAAmC,GAAGC,MAAM,CAACC,GAAG,CAAC,eAAe,CAAC;AAE9E,OAAO,SAASC,QAAQA,CAAEC,UAAyB,EAAE;EACnD,MAAMC,MAAM,GAAGT,MAAM,CAACI,QAAQ,EAAEF,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;EAE/C,MAAMQ,KAAK,GAAGX,QAAQ,CAAC,MAAMU,MAAM,CAACE,KAAK,GAAG,CAAC,IAAIH,UAAU,EAAEG,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;EAE5EV,OAAO,CAACG,QAAQ,EAAEM,KAAK,CAAC;EAExB,OAAOA,KAAK;AACd;;AAEA;AACA,OAAO,MAAME,OAOX,GAAGP,MAAM,CAACC,GAAG,CAAC,cAAc,CAAC;AAS/B,OAAO,SAASO,UAAUA,CAAEC,OAA4B,GAAG;EAAEC,UAAU,EAAE;AAAM,CAAC,EAAE;EAChF,MAAMN,MAAM,GAAGT,MAAM,CAACY,OAAO,EAAE;IAC7BG,UAAU,EAAE,KAAK;IACjBP,UAAU,EAAEN,UAAU,CAAC,KAAK,CAAC;IAC7Bc,gBAAgB,EAAEA,CAAA,KAAM,IAAI;IAC5BC,aAAa,EAAEf,UAAU,CAAC,CAAC,CAAC,CAAC;IAC7BgB,kBAAkB,EAAEhB,UAAU,CAAC,OAA4B,CAAC;IAC5DiB,GAAG,EAAE;EACP,CAAC,CAAC;EAEF,MAAM;IACJJ,UAAU;IACVE,aAAa,GAAGR,MAAM,CAACQ,aAAa;IACpCC,kBAAkB,GAAGT,MAAM,CAACS,kBAAkB;IAC9CC,GAAG,GAAGV,MAAM,CAACU,GAAG,IAAIhB,KAAK,CAAC;EAC5B,CAAC,GAAGW,OAAO;EAEX,MAAMM,IAAI,GAAG;IACXL,UAAU,EAAEN,MAAM,CAACM,UAAU,IAAIA,UAAU;IAC3CP,UAAU,EAAEN,UAAU,CAAC,KAAK,CAAC;IAC7Bc,gBAAgB,EAAGL,KAAc,IAAK;MACpC,IAAIA,KAAK,EAAES,IAAI,CAACZ,UAAU,CAACG,KAAK,GAAGA,KAAK;IAC1C,CAAC;IACDM,aAAa;IACbC,kBAAkB;IAClBC;EACF,CAAC;EAEDlB,OAAO,CAACW,OAAO,EAAEQ,IAAI,CAAC;EAEtB,OAAOX,MAAM;AACf;AAEA,OAAO,SAASY,OAAOA,CAAA,EAAI;EACzB,OAAOrB,MAAM,CAACY,OAAO,EAAE,IAAI,CAAC;AAC9B","ignoreList":[]}
|
||||
Reference in New Issue
Block a user