pxd 0.0.64 → 0.1.2

package/dist/components/list/index.vue

@@ -1,101 +1,262 @@
 <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, reactive, shallowRef } from "vue";
+import { useListNavigation } from "../../composables/_internal/use-list-navigation.js";
+import { flattenListOptions, resolveNavigableOption, resolveRowIndexByNavIndex } 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 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 flattened = computed(() => flattenListOptions(props.options));
+const rows = computed(() => flattened.value.rows);
+const navigableCount = computed(() => flattened.value.navigableCount);
+function isNavDisabled(index) {
+	return resolveNavigableOption(rows.value, index)?.option.disabled === true;
 }
-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 virtualOptions = reactive({
+	dataKey: "key",
+	enabled: () => props.virtual,
+	scrollPaddingStart: 16,
+	scrollPaddingEnd: 16,
+	get items() {
+		return rows.value;
+	},
+	get itemSize() {
+		return props.itemSize;
+	},
+	get overScan() {
+		return props.overScan;
+	}
 });
-const filterCtx = useListFilterContext(null);
-if (filterCtx) {
-  watch(
-    () => filterCtx.searchValue.value.trim(),
-    async () => {
-      await refreshItems();
-      setFirstAsActive();
-    }
-  );
+const { totalSize, virtualItems, scrollToIndex } = useVirtualList(containerRef, virtualOptions);
+function scrollNavIndexIntoView(navIndex) {
+	const rowIndex = resolveRowIndexByNavIndex(rows.value, navIndex);
+	if (rowIndex < 0) {
+		return;
+	}
+	if (props.virtual) {
+		scrollToIndex(rowIndex, {
+			align: "auto",
+			behavior: "instant"
+		});
+		return;
+	}
+	const selector = `[data-list-item][data-index="${navIndex}"]`;
+	getElement(selector, containerRef.value)?.scrollIntoView({
+		block: "nearest",
+		behavior: "instant"
+	});
 }
-watch(
-  () => props.visible,
-  (visible) => {
-    if (visible) {
-      cachedOff(document, "keydown", onKeydown);
-      cachedOn(document, "keydown", onKeydown);
-    } else {
-      setActiveIndex(-1);
-      cachedOff(document, "keydown", onKeydown);
-    }
-  }
-);
-provideListContext({
-  activeIndex,
-  registerItem,
-  unregisterItem,
-  onOptionClick
+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) {
+		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 = resolveNavigableOption(rows.value, navIndex);
+	if (!row) {
+		return;
+	}
+	onItemSelect(row.option.value);
+}
+const { activeIndex, dispatch, setActiveIndex, onPointerOver, setFirstAsActive } = useListNavigation({
+	loop: () => props.loop,
+	count: () => navigableCount.value,
+	defaultActiveIndex: () => props.defaultActiveIndex,
+	isDisabled: isNavDisabled,
+	onActivateItem,
+	scrollToIndex: scrollNavIndexIntoView
+});
+function isItemActive(row) {
+	return activeIndex.value === row.navIndex;
+}
+function dispatchCommand(command) {
+	if (props.loading) {
+		return false;
+	}
+	return dispatch(command);
+}
+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
+	}));
 });
-onMounted(async () => {
-  if (isServer()) {
-    return;
-  }
-  cachedOn(document, "keydown", onKeydown);
+const contentStyle = computed(() => {
+	if (!props.virtual) {
+		return undefined;
+	}
+	return { height: `${totalSize.value}px` };
 });
-onBeforeUnmount(() => {
-  cachedOff(document, "keydown", onKeydown);
+provideListContext({
+	value: computed(() => props.modelValue),
+	onItemSelect
 });
 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"
+          :active="isItemActive(entry.itemRow)"
+          :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'
 
-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'
+
+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_10: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_10) => 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;

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

@@ -1,98 +1,100 @@
 <script setup>
-import { tv } from "tailwind-variants";
-import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
-import { useListContext, useListFilterContext, useListFilterGroupId } from "../../contexts/list";
-import { unrefElement } from "../../utils/ref";
-import { getUniqueId } from "../../utils/uid";
+import CheckIcon from "@gdsicon/vue/check";
+import { computed } from "vue";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { useListContext } from "../../contexts/list.js";
+import { toArray } from "../../utils/format.js";
+import { isNil } from "../../utils/is.js";
 defineOptions({
-  name: "PListItem",
-  inheritAttrs: false
+	name: "PListItem",
+	inheritAttrs: false
 });
 const props = defineProps({
-  as: { type: [String, Object], required: false, default: "li" },
-  type: { type: String, required: false, default: "default" },
-  label: { type: [String, Number, Array, null], required: false },
-  value: { type: [String, Number], required: false },
-  disabled: { type: Boolean, required: false, default: false },
-  keywords: { type: Array, required: false, default: () => [] },
-  description: { type: [String, Number, Array, null], required: false }
+	as: {
+		type: [String, Object],
+		required: false,
+		default: "div"
+	},
+	label: {
+		type: null,
+		required: false
+	},
+	value: {
+		type: [String, Number],
+		required: false
+	},
+	variant: {
+		type: String,
+		required: false,
+		default: "default"
+	},
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	description: {
+		type: String,
+		required: false
+	},
+	index: {
+		type: Number,
+		required: false
+	},
+	active: {
+		type: Boolean,
+		required: false,
+		default: false
+	}
 });
 const emits = defineEmits(["click"]);
-const listItemVariant = tv({
-  base: "pxd-list-item sm:h-10 h-11 gap-3 px-2 scroll-m-2 text-sm flex w-full cursor-pointer items-center rounded-md outline-none [contain-intrinsic-size:auto_2.5rem] content-visibility-auto data-[disabled=true]:pointer-events-none data-[disabled=true]:text-gray-700",
-  variants: {
-    type: {
-      error: "text-red-900 active:bg-red-100 pointer-fine:aria-selected:bg-red-100",
-      warning: "text-amber-900 active:bg-amber-100 pointer-fine:aria-selected:bg-amber-100",
-      default: "text-foreground active:bg-gray-alpha-100 pointer-fine:aria-selected:bg-gray-alpha-100"
-    }
-  }
+const { value: selectedValue, onItemSelect } = useListContext();
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-list-item min-h-9 p-2 text-sm pe-8 gap-2 flex w-full max-w-full cursor-pointer items-center rounded-md outline-none content-visibility-auto data-[disabled=true]:pointer-events-none data-[disabled=true]:text-gray-700",
+	variants: { variant: {
+		error: "text-red-900 active:bg-red-100 pointer-fine:aria-selected:bg-red-100",
+		warning: "text-amber-900 active:bg-amber-100 pointer-fine:aria-selected:bg-amber-100",
+		default: "text-foreground active:bg-gray-alpha-100 pointer-fine:aria-selected:bg-gray-alpha-100"
+	} }
+}, { selection: () => ({ variant: props.variant }) });
+const isChecked = computed(() => {
+	return !isNil(props.value) && toArray(selectedValue.value).includes(props.value);
 });
-const { activeIndex, registerItem, unregisterItem, onOptionClick } = useListContext();
-const groupId = useListFilterGroupId(null);
-const filterCtx = useListFilterContext(null);
-const itemId = getUniqueId("list-item");
-const itemRef = shallowRef();
-const itemIndex = shallowRef(-1);
-const isVisible = computed(() => {
-  if (!filterCtx || !filterCtx.searchValue.value.trim()) {
-    return true;
-  }
-  return filterCtx.isItemVisible(itemId);
-});
-const isSelected = computed(() => itemIndex.value !== -1 && itemIndex.value === activeIndex.value);
-const computedClasses = computed(() => {
-  return listItemVariant({ type: props.type });
-});
-function getValue() {
-  return `${String(props.label ?? "")}${String(props.description ?? "")}`.trim();
-}
-function getKeywords() {
-  return props.keywords;
-}
 function onItemClick(ev) {
-  const { as, keywords, ...restProps } = props;
-  emits("click", restProps, ev);
-  onOptionClick?.(restProps, ev);
+	const value = props.value;
+	if (isNil(value)) {
+		return;
+	}
+	emits("click", value, ev);
+	onItemSelect?.(value);
 }
-onMounted(() => {
-  const el = unrefElement(itemRef.value);
-  if (el) {
-    registerItem(el, itemIndex);
-  }
-  filterCtx?.registerItem(itemId, {
-    groupId,
-    getValue,
-    getKeywords
-  });
-});
-onBeforeUnmount(() => {
-  const el = unrefElement(itemRef.value);
-  if (el) {
-    unregisterItem(el);
-  }
-  filterCtx?.unregisterItem(itemId);
-});
 </script>
 
 <template>
   <Component
     :is="as"
-    ref="itemRef"
     tabindex="-1"
-    role="listitem"
+    role="option"
     data-list-item
-    :data-type="type"
+    :data-index="index"
+    :data-variant="variant"
+    :data-checked="isChecked"
     :data-disabled="disabled"
-    :aria-selected="isSelected"
-    :hidden="!isVisible"
-    :class="computedClasses"
-    v-bind="$attrs"
-    @click.prevent.stop="onItemClick"
+    :aria-selected="active"
+    :class="classes"
+    v-bind="attrs"
+    @click.stop="onItemClick"
   >
     <slot>
-      <span>{{ label }}</span>
-      <span v-if="description" class="text-foreground-secondary">{{ description }}</span>
+      <div class="pxd-list-item--content">
+        <span>{{ label }}</span>
+        <div v-if="description" class="mbs-0.5 text-foreground-secondary">{{ description }}</div>
+      </div>
     </slot>
+
+    <CheckIcon
+      v-if="isChecked"
+      class="pxd-list-item--checked right-2 pointer-events-none absolute top-1/2 -translate-y-1/2 text-primary"
+    />
   </Component>
 </template>

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

@@ -1,15 +1,18 @@
-import type { ListOption, ListOptionSelected } from '../list/types'
+import type { ListOption } from '../list/types'
 
 export interface ListItemProps {
   as?: ListOption['as']
-  type?: ListOption['type']
   label?: ListOption['label']
   value?: ListOption['value']
+  variant?: ListOption['variant']
   disabled?: ListOption['disabled']
-  keywords?: string[]
   description?: ListOption['description']
+  /** Navigable index within the list (for keyboard / pointer). */
+  index?: number
+  /** Whether this item is the keyboard/pointer active item. */
+  active?: boolean
 }
 
 export interface ListItemEmits {
-  click: [ListOptionSelected, MouseEvent]
+  click: [ListOption['value'], MouseEvent]
 }