Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
package.lib.components.VList.VList.mjs Maven / Gradle / Ivy
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 { EventProp, focusChild, genericComponent, getPropertyFromItem, omit, 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 ? omit(item, ['children']) : 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;
}
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,
expandIcon: String,
collapseIcon: String,
lines: {
type: [Boolean, String],
default: 'one'
},
slim: Boolean,
nav: Boolean,
'onClick:open': EventProp(),
'onClick:select': EventProp(),
'onUpdate:opened': EventProp(),
...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': value => true,
'update:activated': value => true,
'update:opened': value => true,
'click:open': value => true,
'click:activate': 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 {
children,
open,
parents,
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,
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')
}
});
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) {
const target = e.target;
if (!contentRef.value || ['INPUT', 'TEXTAREA'].includes(target.tagName)) 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 onMousedown(e) {
isFocused.value = true;
}
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,
'v-list--slim': props.slim
}, 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,
"onMousedown": onMousedown
}, {
default: () => [_createVNode(VListChildren, {
"items": items.value,
"returnObject": props.returnObject
}, slots)]
});
});
return {
open,
select,
focus,
children,
parents
};
}
});
//# sourceMappingURL=VList.mjs.map
