pxd 0.0.64 → 0.1.3

package/dist/components/list/index.vue

@@ -1,101 +1,341 @@
 <script setup>
-import { onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
-import { useListNavigation } from "../../composables/use-list-navigation";
-import { provideListContext, useListFilterContext } from "../../contexts/list";
-import { cachedOff, cachedOn } from "../../utils/event";
-import { isServer } from "../../utils/is";
+import { computed, nextTick, onMounted, reactive, shallowRef, watch } from "vue";
+import { useListNavigation } from "../../composables/_internal/use-list-navigation.js";
+import { flattenListOptions } from "../../composables/_internal/use-list-rows.js";
+import { resolveNextListValue } from "../../composables/_internal/use-list-selection.js";
+import { resolveOptionByValue } from "../../composables/_internal/use-selected-list-item.js";
+import { useVirtualList } from "../../composables/use-virtual-list.js";
+import { provideListContext } from "../../contexts/list.js";
+import { getElement } from "../../utils/dom.js";
+import { toArray } from "../../utils/format.js";
+import { isNil } from "../../utils/is.js";
+import PLoadingMask from "../_internal/loading-mask.vue";
+import PListGroup from "../list-group/index.vue";
 import PListItem from "../list-item/index.vue";
 defineOptions({
-  name: "PList",
-  inheritAttrs: false
+	name: "PList",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  loop: { type: Boolean, required: false, default: true },
-  visible: { type: Boolean, required: false },
-  options: { type: Array, required: false, default: () => [] },
-  toggleOnKeyPress: { type: Boolean, required: false, default: true },
-  defaultActiveIndex: { type: Number, required: false, default: -1 }
+	loop: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	multiple: {
+		type: Boolean,
+		required: false
+	},
+	modelValue: {
+		type: [
+			String,
+			Number,
+			Array,
+			null
+		],
+		required: false
+	},
+	options: {
+		type: Array,
+		required: false,
+		default: () => []
+	},
+	itemClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	},
+	defaultActiveIndex: {
+		type: Number,
+		required: false,
+		default: -1
+	},
+	loading: {
+		type: Boolean,
+		required: false
+	},
+	virtual: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	itemSize: {
+		type: Number,
+		required: false,
+		default: 36
+	},
+	overScan: {
+		type: Number,
+		required: false,
+		default: 4
+	}
 });
-const emits = defineEmits(["toggle", "select"]);
+const emits = defineEmits(["change", "update:modelValue"]);
 const containerRef = shallowRef();
-function onOptionClick(item, ev) {
-  emits("select", item, ev);
-}
-const {
-  activeIndex,
-  isEmpty,
-  onKeydown,
-  setActiveIndex,
-  registerItem,
-  unregisterItem,
-  onPointerOver,
-  refreshItems,
-  setFirstAsActive
-} = useListNavigation(containerRef, {
-  loop: props.loop,
-  itemSelector: `[data-list-item]:not([data-disabled="true"],[hidden])`,
-  toggleOnKeyPress: props.toggleOnKeyPress,
-  defaultActiveIndex: props.defaultActiveIndex,
-  onToggle: () => emits("toggle")
+const flattened = computed(() => flattenListOptions(props.options));
+const rows = computed(() => flattened.value.rows);
+const itemRows = computed(() => flattened.value.itemRows);
+const navigableCount = computed(() => flattened.value.navigableCount);
+const virtualOptions = reactive({
+	dataKey: "key",
+	enabled: () => props.virtual,
+	scrollPaddingStart: props.itemSize / 2,
+	scrollPaddingEnd: props.itemSize / 2,
+	get items() {
+		return rows.value;
+	},
+	get itemSize() {
+		return props.itemSize;
+	},
+	get overScan() {
+		return props.overScan;
+	}
+});
+const { activeIndex, dispatch, setActiveIndex, onPointerOver, setFirstAsActive } = useListNavigation({
+	loop: () => props.loop,
+	count: () => navigableCount.value,
+	defaultActiveIndex: () => props.defaultActiveIndex,
+	isDisabled: isNavDisabled,
+	onActivateItem,
+	scrollToIndex: scrollNavIndexIntoView
+});
+const { totalSize, virtualItems, scrollToIndex } = useVirtualList(containerRef, virtualOptions);
+const renderEntries = computed(() => {
+	if (props.virtual) {
+		return virtualItems.value.map((virtualItem) => {
+			const row = rows.value[virtualItem.index];
+			return {
+				key: virtualItem.key,
+				start: virtualItem.start,
+				row,
+				itemRow: row?.type === "item" ? row : undefined,
+				headerLabel: row?.type === "header" ? row.label : undefined
+			};
+		});
+	}
+	return rows.value.map((row) => ({
+		key: row.key,
+		row,
+		itemRow: row.type === "item" ? row : undefined,
+		headerLabel: row.type === "header" ? row.label : undefined
+	}));
 });
-const filterCtx = useListFilterContext(null);
-if (filterCtx) {
-  watch(
-    () => filterCtx.searchValue.value.trim(),
-    async () => {
-      await refreshItems();
-      setFirstAsActive();
-    }
-  );
+const contentStyle = computed(() => {
+	if (!props.virtual) {
+		return undefined;
+	}
+	return { height: `${totalSize.value}px` };
+});
+function isNavDisabled(index) {
+	return itemRows.value[index]?.option.disabled === true;
+}
+function scrollNavIndexIntoView(navIndex) {
+	const row = itemRows.value[navIndex];
+	if (!row) {
+		return;
+	}
+	if (props.virtual) {
+		scrollToIndex(row.rowIndex, {
+			align: "auto",
+			behavior: "instant"
+		});
+		return;
+	}
+	const selector = `[data-list-item][data-index="${navIndex}"]`;
+	getElement(selector, containerRef.value)?.scrollIntoView({
+		block: "nearest",
+		behavior: "instant"
+	});
+}
+function toSelectedOption(option) {
+	const { as, keywords, ...selectedOption } = option;
+	return selectedOption;
+}
+function onItemSelect(value) {
+	if (props.loading) {
+		return;
+	}
+	const option = resolveOptionByValue(props.options, value);
+	if (!option || option.disabled) {
+		return;
+	}
+	const nextValue = resolveNextListValue(props.modelValue, value, props.multiple);
+	emits("update:modelValue", nextValue);
+	emits("change", toSelectedOption(option));
+}
+function onActivateItem(navIndex) {
+	const el = getElement(`[data-list-item][data-index="${navIndex}"]`, containerRef.value);
+	if (el) {
+		el.click();
+		return;
+	}
+	const row = itemRows.value[navIndex];
+	if (!row) {
+		return;
+	}
+	onItemSelect(row.option.value);
+}
+function dispatchCommand(command) {
+	if (props.loading) {
+		return false;
+	}
+	return dispatch(command);
 }
-watch(
-  () => props.visible,
-  (visible) => {
-    if (visible) {
-      cachedOff(document, "keydown", onKeydown);
-      cachedOn(document, "keydown", onKeydown);
-    } else {
-      setActiveIndex(-1);
-      cachedOff(document, "keydown", onKeydown);
-    }
-  }
-);
+function findItemElement(navIndex) {
+	return getElement(`[data-list-item][data-index="${navIndex}"]`, containerRef.value);
+}
+function syncActiveItem(next, previous) {
+	if (previous >= 0) {
+		findItemElement(previous)?.removeAttribute("data-active");
+	}
+	if (next >= 0) {
+		findItemElement(next)?.setAttribute("data-active", "true");
+	}
+}
+function refreshActiveItem() {
+	const container = containerRef.value;
+	if (!container) {
+		return;
+	}
+	container.querySelectorAll("[data-list-item][data-active]").forEach((el) => {
+		el.removeAttribute("data-active");
+	});
+	if (activeIndex.value >= 0) {
+		findItemElement(activeIndex.value)?.setAttribute("data-active", "true");
+	}
+}
+function scrollToFirstSelected() {
+	const firstValue = toArray(props.modelValue)[0];
+	if (isNil(firstValue)) {
+		return false;
+	}
+	const target = itemRows.value.find((row) => row.option.value === firstValue);
+	if (!target) {
+		return false;
+	}
+	if (props.virtual) {
+		nextTick(() => scrollNavIndexIntoView(target.navIndex));
+		return true;
+	}
+	const container = containerRef.value;
+	const item = getElement(`[data-list-item][data-index="${target.navIndex}"]`, container);
+	if (!container || !item) {
+		return false;
+	}
+	const itemRect = item.getBoundingClientRect();
+	const containerRect = container.getBoundingClientRect();
+	if (itemRect.top < containerRect.top) {
+		// Keep one row between the selection and the top edge.
+		container.scrollTop -= containerRect.top - itemRect.top + itemRect.height;
+	} else if (itemRect.bottom > containerRect.bottom) {
+		// Keep one row between the selection and the bottom edge.
+		container.scrollTop += itemRect.bottom - containerRect.bottom + itemRect.height;
+	}
+	return true;
+}
+function scrollToFirstOption() {
+	if (props.virtual) {
+		if (rows.value.length > 0) {
+			scrollToIndex(0, {
+				align: "start",
+				behavior: "instant"
+			});
+		}
+		return;
+	}
+	if (containerRef.value) {
+		containerRef.value.scrollTop = 0;
+	}
+}
+watch(activeIndex, syncActiveItem, { flush: "post" });
+watch(renderEntries, refreshActiveItem, { flush: "post" });
 provideListContext({
-  activeIndex,
-  registerItem,
-  unregisterItem,
-  onOptionClick
-});
-onMounted(async () => {
-  if (isServer()) {
-    return;
-  }
-  cachedOn(document, "keydown", onKeydown);
+	value: computed(() => props.modelValue),
+	onItemSelect
 });
-onBeforeUnmount(() => {
-  cachedOff(document, "keydown", onKeydown);
+watch(rows, async () => {
+	await nextTick();
+	if (!scrollToFirstSelected()) {
+		scrollToFirstOption();
+	}
+}, { flush: "post" });
+onMounted(() => {
+	refreshActiveItem();
+	if (!scrollToFirstSelected()) {
+		scrollToFirstOption();
+	}
 });
 defineExpose({
-  isEmpty,
-  refreshItems,
-  setActiveIndex,
-  setFirstAsActive
+	focus: () => containerRef.value?.focus(),
+	dispatch: dispatchCommand,
+	setActiveIndex,
+	setFirstAsActive,
+	activeIndex
 });
 </script>
 
 <template>
-  <ul
+  <div
     ref="containerRef"
-    role="list"
+    role="listbox"
     tabindex="-1"
-    class="pxd-list m-0 p-2 max-w-full list-none overflow-auto bg-background-100 outline-none"
+    data-list
+    :aria-busy="loading"
+    :aria-multiselectable="multiple"
+    class="pxd-list m-0 p-2 scroll-p-2 relative max-w-full list-none overflow-auto rounded-inherit bg-background-100 outline-none empty:hidden"
+    :class="{ 'min-h-22': loading && !rows.length }"
     v-bind="$attrs"
     @pointerover="onPointerOver"
   >
-    <slot>
-      <PListItem v-for="(option, index) in options" :key="option.value ?? index" v-bind="option">
-        <slot name="item" :item="option" />
-      </PListItem>
-    </slot>
-  </ul>
+    <div
+      role="presentation"
+      class="pxd-list--content w-full"
+      :class="{ relative: virtual }"
+      :style="contentStyle"
+    >
+      <div
+        v-for="entry in renderEntries"
+        :key="entry.key"
+        role="presentation"
+        class="pxd-list--row w-full"
+        :class="{ 'left-0 top-0 absolute': virtual }"
+        :style="virtual ? { transform: `translateY(${entry.start}px)` } : void 0"
+      >
+        <PListGroup v-if="entry.row?.type === 'header'" :label="entry.headerLabel" />
+
+        <PListItem
+          v-else-if="entry.itemRow"
+          v-bind="entry.itemRow.option"
+          :index="entry.itemRow.navIndex"
+          :class="itemClass"
+        >
+          <template v-if="$slots.item">
+            <slot
+              name="item"
+              :item="entry.itemRow.option"
+              :index="entry.itemRow.itemIndex"
+              :group="entry.itemRow.group"
+              :group-index="entry.itemRow.groupIndex"
+            />
+          </template>
+        </PListItem>
+      </div>
+    </div>
+
+    <PLoadingMask v-if="loading" />
+    <p
+      v-else-if="!rows.length"
+      role="presentation"
+      class="pxd-list--empty py-6.5 m-0 text-sm text-center text-foreground-secondary empty:hidden"
+    >
+      <slot name="empty" />
+    </p>
+  </div>
 </template>

package/dist/components/list/types.d.ts

@@ -1,23 +1,51 @@
-import type { ComponentAs, ComponentLabel, ComponentOption } from '../../types/shared'
+import type {
+  ComponentAs,
+  ComponentClass,
+  ComponentLabel,
+  ComponentValue,
+} from '../../types/shared/props'
 
-export interface ListOption extends Partial<ComponentOption> {
+export interface ListOption {
   as?: ComponentAs
-  type?: 'default' | 'error' | 'warning'
-  description?: ComponentLabel
-  onClick?: (item: ListOptionSelected, ev: MouseEvent) => void
+  label?: ComponentLabel
+  value: ComponentValue
+  disabled?: boolean
+  variant?: 'default' | 'error' | 'warning'
+  description?: string
+  keywords?: string[]
+  [key: string]: any
 }
 
-export type ListOptionSelected = Omit<ListOption, 'as' | 'onClick'>
+export interface ListOptionGroup {
+  type: 'group'
+  label?: string
+  options: ListOption[]
+}
+
+export type ListOptionEntry = ListOption | ListOptionGroup
+
+export type ListOptionSelected = Omit<ListOption, 'as' | 'keywords'>
+export type ListOptions = ListOptionEntry[]
+export type ListModelValue = ComponentValue | ComponentValue[] | null
 
 export interface ListProps {
   loop?: boolean
-  visible?: boolean
-  options?: ListOption[]
-  toggleOnKeyPress?: boolean
+  multiple?: boolean
+  modelValue?: ListModelValue
+  options?: ListOptionEntry[]
+  /** Class merged into every internally rendered list item. */
+  itemClass?: ComponentClass
   defaultActiveIndex?: number
+  loading?: boolean
+  /** Enable virtualized rendering for large option sets. */
+  virtual?: boolean
+  /** Estimated row height in px when `virtual` is enabled. */
+  itemSize?: number
+  /** Extra rows rendered outside the viewport when `virtual` is enabled. */
+  overScan?: number
 }
 
 export interface ListEmits {
-  toggle: []
-  select: [ListOptionSelected, MouseEvent]
+  change: [ListOptionSelected]
+  'update:modelValue': [ListModelValue]
 }

package/dist/components/list-group/index.d.vue.ts

@@ -0,0 +1,4 @@
+import type { ListGroupProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<ListGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ListGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/list-group/index.vue

@@ -0,0 +1,22 @@
+<script setup>
+defineOptions({
+	name: "PListGroup",
+	inheritAttrs: false
+});
+defineProps({ label: {
+	type: String,
+	required: false
+} });
+</script>
+
+<template>
+  <div
+    role="group"
+    data-list-group
+    :aria-label="label"
+    class="pxd-list-group min-h-9 px-2 py-1 flex items-center text-13 text-foreground-secondary"
+    v-bind="$attrs"
+  >
+    {{ label }}
+  </div>
+</template>

package/dist/components/list-group/types.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentLabel } from '../../types/shared/props'
+
+export interface ListGroupProps {
+  label?: string
+}

package/dist/components/list-item/index.d.vue.ts

@@ -1,17 +1,17 @@
 import type { ListItemProps } from './types';
-declare var __VLS_11: {};
+declare var __VLS_9: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ListItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (args_0: import("../list/types").ListOptionSelected, args_1: MouseEvent) => any;
+    click: (args_0: import("../../types/shared/props.js").ComponentValue, args_1: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<ListItemProps> & Readonly<{
-    onClick?: ((args_0: import("../list/types").ListOptionSelected, args_1: MouseEvent) => any) | undefined;
+    onClick?: ((args_0: import("../../types/shared/props.js").ComponentValue, args_1: MouseEvent) => any) | undefined;
 }>, {
-    type: "error" | "default" | "warning";
+    as: import("../../types/shared/props.js").ComponentAs;
+    variant: "default" | "error" | "warning";
     disabled: boolean;
-    as: import("../../types/shared").ComponentAs;
-    keywords: string[];
+    active: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;