vuetify
Version:
Vue Material Component Framework
1 lines • 16 kB
Source Map (JSON)
{"version":3,"file":"VList.mjs","names":["VListChildren","createList","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makeItemsProps","makeNestedProps","useNested","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","makeVariantProps","provideDefaults","useBackgroundColor","computed","ref","toRef","genericComponent","getPropertyFromItem","pick","useRender","isPrimitive","value","transformItem","props","item","type","itemType","title","itemTitle","itemValue","undefined","children","itemChildren","itemProps","_props","transformItems","raw","items","array","push","useListItems","VList","name","activeColor","String","activeClass","bgColor","disabled","Boolean","lines","default","nav","selectStrategy","openStrategy","variant","emits","val","setup","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","borderClasses","densityClasses","dimensionStyles","elevationClasses","roundedClasses","open","select","lineClasses","color","VListGroup","VListItem","density","isFocused","contentRef","onFocusin","e","onFocusout","onFocus","relatedTarget","contains","focus","onKeydown","key","preventDefault","location","focusable","querySelectorAll","filter","el","hasAttribute","idx","indexOf","document","activeElement","at","idxx","inc","offsetParent","length"],"sources":["../../../src/components/VList/VList.tsx"],"sourcesContent":["// Styles\nimport './VList.sass'\n\n// Components\nimport { VListChildren } from './VListChildren'\n\n// Composables\nimport { createList } from './list'\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeItemsProps } from '@/composables/items'\nimport { makeNestedProps, useNested } from '@/composables/nested/nested'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeVariantProps } from '@/composables/variant'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useBackgroundColor } from '@/composables/color'\n\n// Utilities\nimport { computed, ref, toRef } from 'vue'\nimport { genericComponent, getPropertyFromItem, pick, useRender } from '@/util'\n\n// Types\nimport type { InternalItem, ItemProps } from '@/composables/items'\nimport type { SlotsToProps } from '@/util'\nimport type { PropType } from 'vue'\n\nexport interface InternalListItem extends InternalItem {\n type?: 'item' | 'subheader' | 'divider'\n}\n\nfunction isPrimitive (value: unknown): value is string | number | boolean {\n return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean'\n}\n\nfunction transformItem (props: ItemProps & { itemType: string }, item: any): InternalListItem {\n const type = getPropertyFromItem(item, props.itemType, 'item')\n const title = isPrimitive(item) ? item : getPropertyFromItem(item, props.itemTitle)\n const value = getPropertyFromItem(item, props.itemValue, undefined)\n const children = getPropertyFromItem(item, props.itemChildren)\n const itemProps = props.itemProps === true ? pick(item, ['children'])[1] : getPropertyFromItem(item, props.itemProps)\n\n const _props = {\n title,\n value,\n ...itemProps,\n }\n\n return {\n type,\n title: _props.title,\n value: _props.value,\n props: _props,\n children: type === 'item' && children ? transformItems(props, children) : undefined,\n raw: item,\n }\n}\n\nfunction transformItems (props: ItemProps & { itemType: string }, items: (string | object)[]) {\n const array: InternalListItem[] = []\n\n for (const item of items) {\n array.push(transformItem(props, item))\n }\n\n return array\n}\n\nfunction useListItems (props: ItemProps & { itemType: string }) {\n const items = computed(() => transformItems(props, props.items))\n\n return { items }\n}\n\nexport const VList = genericComponent<new <T>() => {\n $props: {\n items?: T[]\n } & SlotsToProps<{\n subheader: []\n header: [{ props: Record<string, unknown> }]\n item: [T]\n }>\n}>()({\n name: 'VList',\n\n props: {\n activeColor: String,\n activeClass: String,\n bgColor: String,\n disabled: Boolean,\n lines: {\n type: [Boolean, String] as PropType<'one' | 'two' | 'three' | false>,\n default: 'one',\n },\n nav: Boolean,\n\n ...makeNestedProps({\n selectStrategy: 'single-leaf' as const,\n openStrategy: 'list' as const,\n }),\n ...makeBorderProps(),\n ...makeDensityProps(),\n ...makeDimensionProps(),\n ...makeElevationProps(),\n itemType: {\n type: String,\n default: 'type',\n },\n ...makeItemsProps(),\n ...makeRoundedProps(),\n ...makeTagProps(),\n ...makeThemeProps(),\n ...makeVariantProps({ variant: 'text' } as const),\n },\n\n emits: {\n 'update:selected': (val: unknown[]) => true,\n 'update:opened': (val: unknown[]) => true,\n 'click:open': (value: { id: unknown, value: boolean, path: unknown[] }) => true,\n 'click:select': (value: { id: unknown, value: boolean, path: unknown[] }) => true,\n },\n\n setup (props, { slots }) {\n const { items } = useListItems(props)\n const { themeClasses } = provideTheme(props)\n const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))\n const { borderClasses } = useBorder(props)\n const { densityClasses } = useDensity(props)\n const { dimensionStyles } = useDimension(props)\n const { elevationClasses } = useElevation(props)\n const { roundedClasses } = useRounded(props)\n const { open, select } = useNested(props)\n const lineClasses = computed(() => props.lines ? `v-list--${props.lines}-line` : undefined)\n const activeColor = toRef(props, 'activeColor')\n const color = toRef(props, 'color')\n\n createList()\n\n provideDefaults({\n VListGroup: {\n activeColor,\n color,\n },\n VListItem: {\n activeClass: toRef(props, 'activeClass'),\n activeColor,\n color,\n density: toRef(props, 'density'),\n disabled: toRef(props, 'disabled'),\n lines: toRef(props, 'lines'),\n nav: toRef(props, 'nav'),\n variant: toRef(props, 'variant'),\n },\n })\n\n const isFocused = ref(false)\n const contentRef = ref<HTMLElement>()\n function onFocusin (e: FocusEvent) {\n isFocused.value = true\n }\n\n function onFocusout (e: FocusEvent) {\n isFocused.value = false\n }\n\n function onFocus (e: FocusEvent) {\n if (\n !isFocused.value &&\n !(e.relatedTarget && contentRef.value?.contains(e.relatedTarget as Node))\n ) focus()\n }\n\n function onKeydown (e: KeyboardEvent) {\n if (!contentRef.value) return\n\n if (e.key === 'ArrowDown') {\n focus('next')\n } else if (e.key === 'ArrowUp') {\n focus('prev')\n } else if (e.key === 'Home') {\n focus('first')\n } else if (e.key === 'End') {\n focus('last')\n } else {\n return\n }\n\n e.preventDefault()\n }\n\n function focus (location?: 'next' | 'prev' | 'first' | 'last') {\n if (!contentRef.value) return\n\n const focusable = [...contentRef.value.querySelectorAll(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n )].filter(el => !el.hasAttribute('disabled')) as HTMLElement[]\n const idx = focusable.indexOf(document.activeElement as HTMLElement)\n\n if (!location) {\n if (!contentRef.value.contains(document.activeElement)) {\n focusable[0]?.focus()\n }\n } else if (location === 'first') {\n focusable[0]?.focus()\n } else if (location === 'last') {\n focusable.at(-1)?.focus()\n } else {\n let el\n let idxx = idx\n const inc = location === 'next' ? 1 : -1\n do {\n idxx += inc\n el = focusable[idxx]\n } while ((!el || el.offsetParent == null) && idxx < focusable.length && idxx >= 0)\n if (el) el.focus()\n else focus(location === 'next' ? 'first' : 'last')\n }\n }\n\n useRender(() => {\n return (\n <props.tag\n ref={ contentRef }\n class={[\n 'v-list',\n {\n 'v-list--disabled': props.disabled,\n 'v-list--nav': props.nav,\n },\n themeClasses.value,\n backgroundColorClasses.value,\n borderClasses.value,\n densityClasses.value,\n elevationClasses.value,\n lineClasses.value,\n roundedClasses.value,\n ]}\n style={[\n backgroundColorStyles.value,\n dimensionStyles.value,\n ]}\n role=\"listbox\"\n aria-activedescendant={ undefined }\n onFocusin={ onFocusin }\n onFocusout={ onFocusout }\n onFocus={ onFocus }\n onKeydown={ onKeydown }\n >\n <VListChildren items={ items.value } v-slots={ slots }></VListChildren>\n </props.tag>\n )\n })\n\n return {\n open,\n select,\n focus,\n }\n },\n})\n\nexport type VList = InstanceType<typeof VList>\n"],"mappings":"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"}