123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216 |
- import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
- // Styles
- import "./VList.css";
- // Components
- import { VListChildren } from "./VListChildren.mjs"; // Composables
- import { createList } from "./list.mjs";
- import { makeBorderProps, useBorder } from "../../composables/border.mjs";
- import { useBackgroundColor } from "../../composables/color.mjs";
- import { makeComponentProps } from "../../composables/component.mjs";
- import { provideDefaults } from "../../composables/defaults.mjs";
- import { makeDensityProps, useDensity } from "../../composables/density.mjs";
- import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
- import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
- import { makeItemsProps } from "../../composables/list-items.mjs";
- import { makeNestedProps, useNested } from "../../composables/nested/nested.mjs";
- import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
- import { makeTagProps } from "../../composables/tag.mjs";
- import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
- import { makeVariantProps } from "../../composables/variant.mjs"; // Utilities
- import { computed, ref, shallowRef, toRef } from 'vue';
- import { focusChild, genericComponent, getPropertyFromItem, pick, propsFactory, useRender } from "../../util/index.mjs"; // Types
- function isPrimitive(value) {
- return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';
- }
- function transformItem(props, item) {
- const type = getPropertyFromItem(item, props.itemType, 'item');
- const title = isPrimitive(item) ? item : getPropertyFromItem(item, props.itemTitle);
- const value = getPropertyFromItem(item, props.itemValue, undefined);
- const children = getPropertyFromItem(item, props.itemChildren);
- const itemProps = props.itemProps === true ? pick(item, ['children'])[1] : getPropertyFromItem(item, props.itemProps);
- 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;
- }
- 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,
- lines: {
- type: [Boolean, String],
- default: 'one'
- },
- nav: Boolean,
- ...makeNestedProps({
- selectStrategy: 'single-leaf',
- openStrategy: 'list'
- }),
- ...makeBorderProps(),
- ...makeComponentProps(),
- ...makeDensityProps(),
- ...makeDimensionProps(),
- ...makeElevationProps(),
- itemType: {
- type: String,
- default: 'type'
- },
- ...makeItemsProps(),
- ...makeRoundedProps(),
- ...makeTagProps(),
- ...makeThemeProps(),
- ...makeVariantProps({
- variant: 'text'
- })
- }, 'VList');
- export const VList = genericComponent()({
- name: 'VList',
- props: makeVListProps(),
- emits: {
- 'update:selected': val => true,
- 'update:opened': val => true,
- 'click:open': value => true,
- 'click:select': value => true
- },
- setup(props, _ref) {
- let {
- slots
- } = _ref;
- const {
- items
- } = useListItems(props);
- const {
- themeClasses
- } = provideTheme(props);
- const {
- backgroundColorClasses,
- backgroundColorStyles
- } = useBackgroundColor(toRef(props, 'bgColor'));
- const {
- borderClasses
- } = useBorder(props);
- const {
- densityClasses
- } = useDensity(props);
- const {
- dimensionStyles
- } = useDimension(props);
- const {
- elevationClasses
- } = useElevation(props);
- const {
- roundedClasses
- } = useRounded(props);
- const {
- open,
- select
- } = useNested(props);
- const lineClasses = computed(() => props.lines ? `v-list--${props.lines}-line` : undefined);
- const activeColor = toRef(props, 'activeColor');
- const baseColor = toRef(props, 'baseColor');
- const color = toRef(props, 'color');
- createList();
- provideDefaults({
- VListGroup: {
- activeColor,
- baseColor,
- color
- },
- VListItem: {
- activeClass: toRef(props, 'activeClass'),
- activeColor,
- baseColor,
- color,
- density: toRef(props, 'density'),
- disabled: toRef(props, 'disabled'),
- lines: toRef(props, 'lines'),
- nav: toRef(props, 'nav'),
- variant: toRef(props, 'variant')
- }
- });
- const isFocused = shallowRef(false);
- const contentRef = ref();
- function onFocusin(e) {
- isFocused.value = true;
- }
- function onFocusout(e) {
- isFocused.value = false;
- }
- function onFocus(e) {
- if (!isFocused.value && !(e.relatedTarget && contentRef.value?.contains(e.relatedTarget))) focus();
- }
- function onKeydown(e) {
- if (!contentRef.value) return;
- if (e.key === 'ArrowDown') {
- focus('next');
- } else if (e.key === 'ArrowUp') {
- focus('prev');
- } else if (e.key === 'Home') {
- focus('first');
- } else if (e.key === 'End') {
- focus('last');
- } else {
- return;
- }
- e.preventDefault();
- }
- function focus(location) {
- if (contentRef.value) {
- return focusChild(contentRef.value, location);
- }
- }
- useRender(() => {
- return _createVNode(props.tag, {
- "ref": contentRef,
- "class": ['v-list', {
- 'v-list--disabled': props.disabled,
- 'v-list--nav': props.nav
- }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, props.class],
- "style": [backgroundColorStyles.value, dimensionStyles.value, props.style],
- "tabindex": props.disabled || isFocused.value ? -1 : 0,
- "role": "listbox",
- "aria-activedescendant": undefined,
- "onFocusin": onFocusin,
- "onFocusout": onFocusout,
- "onFocus": onFocus,
- "onKeydown": onKeydown
- }, {
- default: () => [_createVNode(VListChildren, {
- "items": items.value
- }, slots)]
- });
- });
- return {
- open,
- select,
- focus
- };
- }
- });
- //# sourceMappingURL=VList.mjs.map
|