pxd 0.0.64 → 0.1.3

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

@@ -0,0 +1,151 @@
+import type { ComponentClass, ComponentLabel, ComponentValue } from '../../types/shared/props'
+
+export interface TreeOption {
+  value: ComponentValue
+  label?: ComponentLabel
+  disabled?: boolean
+  children?: TreeOption[]
+  /** Marks a leaf under `lazy`: no arrow, and never handed to `load`. */
+  isLeaf?: boolean
+  keywords?: string[]
+  [key: string]: any
+}
+
+export type TreeOptions = TreeOption[]
+
+export type TreeModelValue = ComponentValue | ComponentValue[] | null
+
+export type TreeFilterFn = (node: TreeOption, query: string) => boolean
+
+/** Hands the tree the nodes a query matched, their ancestors included. */
+export type TreeRemoteFilterFn = (query: string) => TreeOptions | Promise<TreeOptions>
+
+/** Hands the children of a node to the tree. An empty array marks it a leaf. */
+export type TreeLoadResolve = (children: TreeOptions) => void
+
+/** Gives up on a node without children: the arrow stays, and the next expand asks again. */
+export type TreeLoadReject = () => void
+
+export interface TreeLoadDetail {
+  node: TreeOption
+  depth: number
+  parent?: TreeOption
+}
+
+export type TreeLoadFn = (
+  detail: TreeLoadDetail,
+  resolve: TreeLoadResolve,
+  reject: TreeLoadReject,
+) => void
+
+/** Keeps a node out of the model without the rest of `disabled`: it still expands and takes drops. */
+export type TreeSelectableFn = (node: TreeOption) => boolean
+
+export interface TreeNodeDetail {
+  value: ComponentValue
+  node: TreeOption
+}
+
+export interface TreeChangeDetail extends TreeNodeDetail {
+  checked: boolean
+  checkedValues: ComponentValue[]
+  halfCheckedValues: ComponentValue[]
+}
+
+export interface TreeHighlightPart {
+  text: string
+  matched: boolean
+}
+
+export type TreeDropPosition = 'before' | 'inside' | 'after'
+
+export interface TreeDropTarget {
+  targetValue: ComponentValue
+  position: TreeDropPosition
+}
+
+export interface TreeMoveLocation {
+  parentValue?: ComponentValue
+  index: number
+}
+
+export interface TreeDropInfo {
+  dragValue: ComponentValue
+  dragNode: TreeOption
+  targetValue: ComponentValue
+  targetNode: TreeOption
+  position: TreeDropPosition
+}
+
+/** Decides whether a drop may land; the structural rules hold either way. */
+export type TreeAllowDropFn = (info: TreeDropInfo) => boolean
+
+export interface TreeMoveDetail {
+  value: ComponentValue
+  node: TreeOption
+  from: TreeMoveLocation
+  to: TreeMoveLocation & {
+    targetValue: ComponentValue
+    position: TreeDropPosition
+  }
+}
+
+export interface TreeFlatNode {
+  key: ComponentValue
+  node: TreeOption
+  depth: number
+  index: number
+  parentValue?: ComponentValue
+  hasChildren: boolean
+  expanded: boolean
+}
+
+export interface TreeProps {
+  data?: TreeOptions
+  modelValue?: TreeModelValue
+  multiple?: boolean
+  checkStrictly?: boolean
+  disabled?: boolean
+  selectable?: TreeSelectableFn
+  expandOnly?: boolean
+  draggable?: boolean
+  allowDrop?: TreeAllowDropFn
+  dropInsideLeaf?: boolean
+  virtual?: boolean
+  itemSize?: number
+  overScan?: number
+  height?: number | string
+  indent?: number
+  expandedKeys?: ComponentValue[]
+  defaultExpandedKeys?: ComponentValue[]
+  childrenField?: string
+  /** Fetch the children of a node when it first opens, instead of reading them from `data`. */
+  lazy?: boolean
+  /** Fetches the children of a node neither `data` nor an earlier request provided. */
+  load?: TreeLoadFn
+  loading?: boolean
+  filterable?: boolean
+  filter?: TreeFilterFn
+  /** Fetches the nodes a query matched, their ancestors included: giving it searches remotely. */
+  remoteFilter?: TreeRemoteFilterFn
+  /** Render only the nodes the filter matched, instead of the hits plus their ancestors. */
+  searchMatchesOnly?: boolean
+  /** Highlights the query inside a label. Only a contiguous run of characters is marked: a
+   *  fuzzy hit that is not one still shows its row, just without the highlight. */
+  highlightMatch?: boolean
+  searchPlaceholder?: string
+  searchValue?: string
+  defaultSearchValue?: string
+  itemClass?: ComponentClass
+}
+
+export interface TreeEmits {
+  'update:modelValue': [TreeModelValue]
+  'update:data': [TreeOptions]
+  move: [TreeMoveDetail]
+  change: [TreeChangeDetail]
+  'update:expandedKeys': [ComponentValue[]]
+  expand: [TreeNodeDetail]
+  collapse: [TreeNodeDetail]
+  'update:searchValue': [string]
+}

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

@@ -1,33 +1,31 @@
 import type { VirtualListProps } from './types';
-import { type VirtualListItem } from '../../composables/use-virtual-list';
-declare var __VLS_1: {
+import { type VirtualListItem } from '../../composables/use-virtual-list.js';
+declare var __VLS_2: {
     item: any;
     virtualItem: VirtualListItem;
-}, __VLS_3: {};
+}, __VLS_4: {};
 type __VLS_Slots = {} & {
-    item?: (props: typeof __VLS_1) => any;
+    item?: (props: typeof __VLS_2) => any;
 } & {
-    message?: (props: typeof __VLS_3) => any;
+    message?: (props: typeof __VLS_4) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<VirtualListProps, {
     totalSize: import("vue").ComputedRef<number>;
     virtualItems: import("vue").ComputedRef<VirtualListItem[]>;
     getVirtualizer: () => import("@tanstack/virtual-core").Virtualizer<HTMLElement, HTMLElement>;
-    scrollToIndex: (index: number, { align: initialAlign, behavior, }?: import("@tanstack/virtual-core").ScrollToOptions) => void;
-    scrollToOffset: (toOffset: number, { align, behavior }?: import("@tanstack/virtual-core").ScrollToOptions) => void;
-    scrollBy: (delta: number, { behavior }?: import("@tanstack/virtual-core").ScrollToOptions) => void;
+    scrollToIndex: (index: number, args_1?: import("@tanstack/virtual-core").ScrollToOptions | undefined) => void;
+    scrollToOffset: (toOffset: number, args_1?: import("@tanstack/virtual-core").ScrollToOptions | undefined) => void;
+    scrollBy: (delta: number, args_1?: import("@tanstack/virtual-core").ScrollToOptions | undefined) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    bottom: () => any;
     retry: () => any;
 }, string, import("vue").PublicProps, Readonly<VirtualListProps> & Readonly<{
-    onBottom?: (() => any) | undefined;
     onRetry?: (() => any) | undefined;
 }>, {
-    listData: any[];
-    errorText: string;
+    items: any[];
+    dataKey: string;
     loadingText: string;
+    errorText: string;
     finishedText: string;
-    dataKey: string;
     columnGap: number;
     columnCount: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,72 +1,138 @@
 <script setup>
 import LoaderCircleIcon from "@gdsicon/vue/loader-circle";
 import { shallowRef } from "vue";
-import { useVirtualList } from "../../composables/use-virtual-list";
+import { useVirtualList } from "../../composables/use-virtual-list.js";
 defineOptions({
-  name: "PVirtualList",
-  inheritAttrs: false
+	name: "PVirtualList",
+	inheritAttrs: false
 });
 const props = defineProps({
-  listClass: { type: [String, Array, Object], required: false },
-  itemClass: { type: [String, Array, Object], required: false },
-  errorText: { type: String, required: false, default: "Request failed. Click to reload" },
-  loadingText: { type: String, required: false, default: "Loading..." },
-  finishedText: { type: String, required: false, default: "Finished" },
-  status: { type: String, required: false },
-  dataKey: { type: String, required: false, default: "id" },
-  listData: { type: Array, required: false, default: () => [] },
-  itemSize: { type: Number, required: false },
-  overScan: { type: Number, required: false },
-  columnGap: { type: Number, required: false, default: 0 },
-  columnCount: { type: Number, required: false, default: 1 },
-  onBottom: { type: Function, required: false },
-  bottomThreshold: { type: Number, required: false }
+	listClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	},
+	itemClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	},
+	errorText: {
+		type: String,
+		required: false,
+		default: "Request failed. Click to reload"
+	},
+	loadingText: {
+		type: String,
+		required: false,
+		default: "Loading..."
+	},
+	finishedText: {
+		type: String,
+		required: false,
+		default: "Finished"
+	},
+	enabled: {
+		type: null,
+		required: false
+	},
+	status: {
+		type: String,
+		required: false
+	},
+	dataKey: {
+		type: String,
+		required: false,
+		default: "id"
+	},
+	items: {
+		type: Array,
+		required: false,
+		default: () => []
+	},
+	itemSize: {
+		type: Number,
+		required: false
+	},
+	overScan: {
+		type: Number,
+		required: false
+	},
+	columnGap: {
+		type: Number,
+		required: false,
+		default: 0
+	},
+	columnCount: {
+		type: Number,
+		required: false,
+		default: 1
+	},
+	scrollPaddingStart: {
+		type: Number,
+		required: false
+	},
+	scrollPaddingEnd: {
+		type: Number,
+		required: false
+	},
+	onBottom: {
+		type: Function,
+		required: false
+	},
+	bottomThreshold: {
+		type: Number,
+		required: false
+	}
 });
-const emits = defineEmits(["retry", "bottom"]);
+const emits = defineEmits(["retry"]);
 const containerRef = shallowRef();
-const {
-  totalSize,
-  virtualItems,
-  measureElement,
-  getVirtualizer,
-  scrollToIndex,
-  scrollToOffset,
-  scrollBy
-} = useVirtualList(containerRef, props);
+const { totalSize, virtualItems, measureElement, getVirtualizer, scrollToIndex, scrollToOffset, scrollBy } = useVirtualList(containerRef, props);
 function getItemStyle(virtualItem) {
-  const lanes = Math.max(1, Math.floor(props.columnCount));
-  const gap = props.columnGap;
-  const y = `translateY(${virtualItem.start}px)`;
-  if (lanes <= 1) {
-    return { transform: y };
-  }
-  const lane = virtualItem.lane;
-  const width = `calc((100% - ${(lanes - 1) * gap}px) / ${lanes})`;
-  const left = `calc(${lane} * ((100% - ${(lanes - 1) * gap}px) / ${lanes} + ${gap}px))`;
-  return {
-    width,
-    left,
-    transform: y
-  };
+	const lanes = Math.max(1, Math.floor(props.columnCount));
+	const gap = props.columnGap;
+	const y = `translateY(${virtualItem.start}px)`;
+	if (lanes <= 1) {
+		return { transform: y };
+	}
+	const lane = virtualItem.lane;
+	const width = `calc((100% - ${(lanes - 1) * gap}px) / ${lanes})`;
+	const left = `calc(${lane} * ((100% - ${(lanes - 1) * gap}px) / ${lanes} + ${gap}px))`;
+	return {
+		width,
+		left,
+		transform: y
+	};
 }
 function onRetryClick() {
-  if (props.status !== "error") {
-    return;
-  }
-  emits("retry");
+	if (props.status !== "error") {
+		return;
+	}
+	emits("retry");
 }
 defineExpose({
-  totalSize,
-  virtualItems,
-  getVirtualizer,
-  scrollToIndex,
-  scrollToOffset,
-  scrollBy
+	totalSize,
+	virtualItems,
+	getVirtualizer,
+	scrollToIndex,
+	scrollToOffset,
+	scrollBy
 });
 </script>
 
 <template>
-  <div ref="containerRef" class="pxd-virtual-list relative overflow-auto" v-bind="$attrs">
+  <div
+    data-virtual-list
+    ref="containerRef"
+    class="pxd-virtual-list relative overflow-auto"
+    v-bind="$attrs"
+  >
     <div
       class="pxd-virtual-list--content relative w-full content-visibility-auto"
       :class="listClass"
@@ -81,7 +147,7 @@ defineExpose({
         :class="itemClass"
         :style="getItemStyle(virtualItem)"
       >
-        <slot name="item" :item="listData[virtualItem.index]" :virtual-item="virtualItem" />
+        <slot name="item" :item="items[virtualItem.index]" :virtual-item="virtualItem" />
       </div>
     </div>
 
@@ -95,7 +161,7 @@ defineExpose({
         <span v-if="status === 'error'">{{ errorText }}</span>
         <span v-else-if="status === 'finished'">{{ finishedText }}</span>
         <template v-else-if="status === 'loading'">
-          <LoaderCircleIcon class="mr-1.5 motion-safe:animate-spin" />
+          <LoaderCircleIcon class="me-1.5 motion-safe:animate-spin" />
           <span>{{ loadingText }}</span>
         </template>
       </slot>

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

@@ -9,5 +9,4 @@ export interface VirtualListProps extends VirtualListOptions {
 }
 export interface VirtualListEmits {
     retry: [];
-    bottom: [];
 }

package/dist/composables/_internal/use-collapse-motion.d.ts

@@ -0,0 +1,6 @@
+import type { MaybeRefOrGetter, Ref } from 'vue';
+export declare function useCollapseMotion(contentRef: Ref<HTMLElement | undefined>, expanded: MaybeRefOrGetter<boolean>): {
+    detailsOpen: import("vue").ShallowRef<boolean, boolean>;
+    isLeaving: import("vue").ComputedRef<boolean>;
+    skipEnterMotion: () => void;
+};

package/dist/composables/_internal/use-collapse-motion.js

@@ -0,0 +1,85 @@
+import { computed, onMounted, onScopeDispose, shallowRef, watch } from "vue";
+import { getStyle } from "../../utils/dom.js";
+import { toValue } from "../../utils/helper.js";
+export function useCollapseMotion(contentRef, expanded) {
+  const detailsOpen = shallowRef(false);
+  let ready = false;
+  let skipEnter = false;
+  let stopWait;
+  const isLeaving = computed(() => detailsOpen.value && !toValue(expanded));
+  function skipEnterMotion() {
+    skipEnter = true;
+  }
+  function clearWait() {
+    stopWait?.();
+    stopWait = void 0;
+  }
+  function finish() {
+    clearWait();
+    const el = contentRef.value;
+    if (el) {
+      el.style.height = "";
+      el.style.overflow = "";
+    }
+    if (!toValue(expanded)) {
+      detailsOpen.value = false;
+    }
+  }
+  function animate(isExpanded) {
+    const el = contentRef.value;
+    if (!el) {
+      return;
+    }
+    clearWait();
+    el.style.overflow = "hidden";
+    el.style.height = isExpanded ? "0" : `${el.scrollHeight}px`;
+    void el.offsetHeight;
+    el.style.height = isExpanded ? `${el.scrollHeight}px` : "0";
+    const done = (event) => {
+      if (event && (event.propertyName !== "height" || event.target !== el)) {
+        return;
+      }
+      finish();
+    };
+    const ms = (Number.parseFloat(getStyle(el).transitionDuration) || 0) * 1e3;
+    if (!ms) {
+      done();
+      return;
+    }
+    el.addEventListener("transitionend", done);
+    const timer = window.setTimeout(done, ms + 50);
+    stopWait = () => {
+      el.removeEventListener("transitionend", done);
+      window.clearTimeout(timer);
+    };
+  }
+  watch(
+    () => toValue(expanded),
+    (isExpanded) => {
+      if (isExpanded) {
+        detailsOpen.value = true;
+      }
+      if (!ready) {
+        detailsOpen.value = isExpanded;
+        return;
+      }
+      if (isExpanded && skipEnter) {
+        skipEnter = false;
+        return;
+      }
+      animate(isExpanded);
+    },
+    { immediate: true, flush: "post" }
+  );
+  onMounted(() => {
+    ready = true;
+  });
+  onScopeDispose(() => {
+    clearWait();
+  });
+  return {
+    detailsOpen,
+    isLeaving,
+    skipEnterMotion
+  };
+}

package/dist/composables/{use-focus-trap.d.ts → _internal/use-focus-trap.d.ts}

@@ -1,4 +1,4 @@
-import type { MaybeElementRef } from '../types/shared/utils';
+import type { MaybeElementRef } from '../../types/shared/utils';
 import type { Options as FocusTrapOptions } from 'focus-trap';
 import { type MaybeRefOrGetter } from 'vue';
 export interface UseFocusTrapOptions extends FocusTrapOptions {
@@ -12,5 +12,5 @@ export interface UseFocusTrapOptions extends FocusTrapOptions {
  * - Share a trap stack among PXD traps so nested dialogs coordinate pause/unpause.
  */
 export declare function useFocusTrap(container: MaybeElementRef<HTMLElement>, userOptions?: MaybeRefOrGetter<UseFocusTrapOptions>): {
-    stop: import("vue").WatchHandle;
+    stop: () => void;
 };

package/dist/composables/_internal/use-focus-trap.js

@@ -0,0 +1,64 @@
+import { createFocusTrap } from "focus-trap";
+import { onScopeDispose, watch } from "vue";
+import { isTruthyProp } from "../../utils/format.js";
+import { toValue } from "../../utils/helper.js";
+const focusTrapStack = [];
+const AUTO_FOCUS_FIRST_SELECTOR = [
+  'input:not([type="hidden"]):not(:disabled)',
+  "button:not(:disabled)",
+  "select:not(:disabled)",
+  "textarea:not(:disabled)",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+export function useFocusTrap(container, userOptions = {}) {
+  let trapper = null;
+  function deactivate() {
+    trapper?.deactivate();
+    trapper = null;
+  }
+  function activate(target) {
+    const { autoFocusElement, ...restOptions } = toValue(userOptions);
+    const defaultOptions = {
+      allowOutsideClick: true,
+      escapeDeactivates: false,
+      clickOutsideDeactivates: false,
+      // A11y + robustness
+      // If set and is or returns true, a click outside the focus trap will not be prevented
+      returnFocusOnDeactivate: true,
+      preventScroll: true,
+      fallbackFocus: () => target,
+      initialFocus: () => {
+        if (isTruthyProp(autoFocusElement)) {
+          const elSelector = typeof autoFocusElement === "string" && autoFocusElement ? autoFocusElement : AUTO_FOCUS_FIRST_SELECTOR;
+          return target.querySelector(elSelector) ?? target;
+        }
+        return target;
+      },
+      // Coordinate nested PXD dialogs
+      trapStack: focusTrapStack
+    };
+    trapper = createFocusTrap(target, { ...defaultOptions, ...restOptions });
+    trapper.activate();
+  }
+  const unwatch = watch(
+    () => toValue(container),
+    (target) => {
+      deactivate();
+      if (!target) {
+        return;
+      }
+      activate(target);
+    },
+    { flush: "post" }
+  );
+  function stop() {
+    unwatch();
+    deactivate();
+  }
+  onScopeDispose(() => {
+    stop();
+  });
+  return {
+    stop
+  };
+}

package/dist/composables/{use-forward-ref-expose.js → _internal/use-forward-ref-expose.js}

@@ -1,4 +1,4 @@
-import { toValue } from "../utils/ref.js";
+import { toValue } from "../../utils/helper.js";
 export function useForwardRefExpose(refEl) {
   return new Proxy({}, {
     get(_, prop) {

package/dist/composables/_internal/use-list-filter.d.ts

@@ -0,0 +1,15 @@
+import type { ListOptions } from '../../components/list/types';
+import type { MaybeRefOrGetter, ComputedRef } from 'vue';
+export type ListFilterFn = (text: string, search: string, keywords: string[]) => boolean;
+export interface UseListFilterOptions {
+    filter?: ListFilterFn;
+}
+export interface UseListFilterReturn {
+    filteredOptions: ComputedRef<ListOptions>;
+    visibleCount: ComputedRef<number>;
+}
+/**
+ * Pure filter over list options. Groups with no matching children are dropped.
+ */
+export declare function filterListOptions(options: ListOptions, query: string, filter?: ListFilterFn): ListOptions;
+export declare function useListFilter(options: MaybeRefOrGetter<ListOptions>, keyword: MaybeRefOrGetter<string>, { filter }?: UseListFilterOptions): UseListFilterReturn;

package/dist/composables/_internal/use-list-filter.js

@@ -0,0 +1,48 @@
+import { computed } from "vue";
+import { isFuzzyMatch } from "../../utils/fuzzy-match.js";
+import { toValue } from "../../utils/helper.js";
+import { isListOptionGroup } from "./use-selected-list-item.js";
+function getOptionText(option) {
+  return `${String(option.label ?? "")}${String(option.description ?? "")}`.trim();
+}
+function countListOptions(options) {
+  let count = 0;
+  for (const entry of options) {
+    if (isListOptionGroup(entry)) {
+      count += entry.options.length;
+    } else {
+      count += 1;
+    }
+  }
+  return count;
+}
+export function filterListOptions(options, query, filter = isFuzzyMatch) {
+  const needle = query.trim();
+  if (!needle) {
+    return options;
+  }
+  const result = [];
+  for (const entry of options) {
+    if (isListOptionGroup(entry)) {
+      const matched = entry.options.filter(
+        (item) => filter(getOptionText(item), needle, item.keywords ?? [])
+      );
+      if (matched.length) {
+        result.push({ ...entry, options: matched });
+      }
+    } else if (filter(getOptionText(entry), needle, entry.keywords ?? [])) {
+      result.push(entry);
+    }
+  }
+  return result;
+}
+export function useListFilter(options, keyword, { filter = isFuzzyMatch } = {}) {
+  const filteredOptions = computed(
+    () => filterListOptions(toValue(options) ?? [], toValue(keyword) ?? "", filter)
+  );
+  const visibleCount = computed(() => countListOptions(filteredOptions.value));
+  return {
+    filteredOptions,
+    visibleCount
+  };
+}

package/dist/composables/_internal/use-list-keyboard-controller.d.ts

@@ -0,0 +1,21 @@
+import type { ListNavigationCommand } from './use-list-navigation';
+import type { MaybeRefOrGetter } from 'vue';
+export type ListKeyboardMap = Readonly<Record<string, ListNavigationCommand>>;
+export interface UseListKeyboardControllerOptions {
+    keymap: MaybeRefOrGetter<ListKeyboardMap>;
+    enabled?: MaybeRefOrGetter<boolean>;
+    preventDefaultKeys?: MaybeRefOrGetter<readonly string[]>;
+    onCommand: (command: ListNavigationCommand, ev: KeyboardEvent) => boolean;
+}
+/**
+ * Creates a keyboard event handler for list navigation.
+ *
+ * The handler maps enabled keyboard events to semantic navigation commands
+ * while ignoring IME composition events.
+ *
+ * @param options - Configuration for the list target, enabled state, and keys.
+ * @returns A keyboard event handler for list navigation.
+ */
+export declare function useListKeyboardController(options: UseListKeyboardControllerOptions): {
+    onKeydown: (ev: KeyboardEvent) => void;
+};