dou-ui 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/components/virtual-list/virtual-list.js

@@ -1,4 +1,10 @@
 // src/components/virtual-list/virtual-list.ts
+/** The key of an item as `itemKey` gives it: a property, a function, or the index. */
+function virtualItemKey(itemKey, item, index) {
+	if (typeof itemKey === "function") return itemKey(item, index);
+	if (itemKey) return item[itemKey];
+	return index;
+}
 /**
 * Offsets of items with known heights. `start(i)` is where item `i`
 * begins; `find(y)` is the item covering `y`, by binary search.
@@ -23,6 +29,6 @@ function createOffsets(count, size) {
 		find
 	};
 }
-export { createOffsets };
+export { createOffsets, virtualItemKey };
 
 //# sourceMappingURL=virtual-list.js.map

package/dist/components/virtual-list/virtual-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"virtual-list.js","names":[],"sources":["../../../src/components/virtual-list/virtual-list.ts"],"sourcesContent":["export type VirtualListKey = string | number\nexport type VirtualListAlign = 'start' | 'center' | 'end' | 'nearest'\n\nexport interface VirtualListProps<T = any> {\n  /** The items. Only those in or near the viewport are rendered. */\n  items: T[]\n  /**\n   * The height of each item in px, or a function giving it per item.\n   * Heights are known up front, so the scrollbar never jumps. Without it,\n   * items are measured once rendered.\n   */\n  itemSize?: number | ((item: T, index: number) => number)\n  /** Without `itemSize`, the height to assume for an item not rendered yet. */\n  estimateSize?: number | ((item: T, index: number) => number)\n  /** A property of each item, or a function, that gives it a unique key. Defaults to the index. */\n  itemKey?: string | ((item: T, index: number) => VirtualListKey)\n  /** The height of the viewport. A number is in px. Without it the list fills its container. */\n  height?: number | string\n  /** Extra items rendered above and below the viewport, so fast scrolling shows no gaps. */\n  overscan?: number\n  /** How close to the bottom, in px, counts as reaching the end. */\n  endThreshold?: number\n}\n\nexport interface VirtualListEmits {\n  scroll: [event: Event]\n  /** Scrolled within `endThreshold` of the bottom, e.g. to load the next page. */\n  endReached: []\n}\n\nexport interface VirtualListSlots<T = any> {\n  /** One item. */\n  default?: (props: { item: T; index: number }) => unknown\n  /** Shown when there are no items. */\n  empty?: () => unknown\n}\n\nexport interface VirtualListExpose {\n  /** Scroll so the item at `index` is visible. `nearest` scrolls as little as possible. */\n  scrollToIndex: (index: number, align?: VirtualListAlign) => void\n  /** Scroll to an offset in px. */\n  scrollTo: (offset: number) => void\n  /** The scrolling element. */\n  el: () => HTMLElement | null\n}\n\n/**\n * Offsets of items with known heights. `start(i)` is where item `i`\n * begins; `find(y)` is the item covering `y`, by binary search.\n */\nexport function createOffsets(count: number, size: (index: number) => number) {\n  const starts = new Float64Array(count + 1)\n  for (let index = 0; index < count; index++) starts[index + 1] = starts[index]! + size(index)\n  const start = (index: number) => starts[Math.max(0, Math.min(index, count))]!\n  function find(y: number) {\n    let low = 0\n    let high = count - 1\n    while (low < high) {\n      const mid = (low + high + 1) >> 1\n      if (starts[mid]! <= y) low = mid\n      else high = mid - 1\n    }\n    return Math.max(0, low)\n  }\n  return { total: starts[count]!, start, find }\n}\n"],"mappings":";;;;;AAkDA,SAAgB,cAAc,OAAe,MAAiC;CAC5E,MAAM,SAAS,IAAI,aAAa,QAAQ,CAAC;CACzC,KAAK,IAAI,QAAQ,GAAG,QAAQ,OAAO,SAAS,OAAO,QAAQ,KAAK,OAAO,SAAU,KAAK,KAAK;CAC3F,MAAM,SAAS,UAAkB,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,KAAK,CAAC;CAC1E,SAAS,KAAK,GAAW;EACvB,IAAI,MAAM;EACV,IAAI,OAAO,QAAQ;EACnB,OAAO,MAAM,MAAM;GACjB,MAAM,MAAO,MAAM,OAAO,KAAM;GAChC,IAAI,OAAO,QAAS,GAAG,MAAM;QACxB,OAAO,MAAM;EACpB;EACA,OAAO,KAAK,IAAI,GAAG,GAAG;CACxB;CACA,OAAO;EAAE,OAAO,OAAO;EAAS;EAAO;CAAK;AAC9C"}
+{"version":3,"file":"virtual-list.js","names":[],"sources":["../../../src/components/virtual-list/virtual-list.ts"],"sourcesContent":["export type VirtualListKey = string | number\nexport type VirtualListAlign = 'start' | 'center' | 'end' | 'nearest'\n\n/** The key of an item as `itemKey` gives it: a property, a function, or the index. */\nexport function virtualItemKey<T>(\n  itemKey: VirtualListProps<T>['itemKey'],\n  item: T,\n  index: number,\n): VirtualListKey {\n  if (typeof itemKey === 'function') return itemKey(item, index)\n  if (itemKey) return (item as Record<string, VirtualListKey>)[itemKey]!\n  return index\n}\n\nexport interface VirtualListProps<T = any> {\n  /** The items. Only those in or near the viewport are rendered. */\n  items: T[]\n  /**\n   * The height of each item in px, or a function giving it per item.\n   * Heights are known up front, so the scrollbar never jumps. Without it,\n   * items are measured once rendered.\n   */\n  itemSize?: number | ((item: T, index: number) => number)\n  /** Without `itemSize`, the height to assume for an item not rendered yet. */\n  estimateSize?: number | ((item: T, index: number) => number)\n  /** A property of each item, or a function, that gives it a unique key. Defaults to the index. */\n  itemKey?: string | ((item: T, index: number) => VirtualListKey)\n  /** The height of the viewport. A number is in px. Without it the list fills its container. */\n  height?: number | string\n  /** Extra items rendered above and below the viewport, so fast scrolling shows no gaps. */\n  overscan?: number\n  /** How close to the bottom, in px, counts as reaching the end. */\n  endThreshold?: number\n}\n\nexport interface VirtualListEmits {\n  scroll: [event: Event]\n  /** Scrolled within `endThreshold` of the bottom, e.g. to load the next page. */\n  endReached: []\n}\n\nexport interface VirtualListSlots<T = any> {\n  /** One item. */\n  default?: (props: { item: T; index: number }) => unknown\n  /** Shown when there are no items. */\n  empty?: () => unknown\n}\n\nexport interface VirtualListExpose {\n  /** Scroll so the item at `index` is visible. `nearest` scrolls as little as possible. */\n  scrollToIndex: (index: number, align?: VirtualListAlign) => void\n  /** Scroll to an offset in px. */\n  scrollTo: (offset: number) => void\n  /** The scrolling element. */\n  el: () => HTMLElement | null\n}\n\n/**\n * Offsets of items with known heights. `start(i)` is where item `i`\n * begins; `find(y)` is the item covering `y`, by binary search.\n */\nexport function createOffsets(count: number, size: (index: number) => number) {\n  const starts = new Float64Array(count + 1)\n  for (let index = 0; index < count; index++) starts[index + 1] = starts[index]! + size(index)\n  const start = (index: number) => starts[Math.max(0, Math.min(index, count))]!\n  function find(y: number) {\n    let low = 0\n    let high = count - 1\n    while (low < high) {\n      const mid = (low + high + 1) >> 1\n      if (starts[mid]! <= y) low = mid\n      else high = mid - 1\n    }\n    return Math.max(0, low)\n  }\n  return { total: starts[count]!, start, find }\n}\n"],"mappings":";;AAIA,SAAgB,eACd,SACA,MACA,OACgB;CAChB,IAAI,OAAO,YAAY,YAAY,OAAO,QAAQ,MAAM,KAAK;CAC7D,IAAI,SAAS,OAAQ,KAAwC;CAC7D,OAAO;AACT;;;;;AAiDA,SAAgB,cAAc,OAAe,MAAiC;CAC5E,MAAM,SAAS,IAAI,aAAa,QAAQ,CAAC;CACzC,KAAK,IAAI,QAAQ,GAAG,QAAQ,OAAO,SAAS,OAAO,QAAQ,KAAK,OAAO,SAAU,KAAK,KAAK;CAC3F,MAAM,SAAS,UAAkB,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,KAAK,CAAC;CAC1E,SAAS,KAAK,GAAW;EACvB,IAAI,MAAM;EACV,IAAI,OAAO,QAAQ;EACnB,OAAO,MAAM,MAAM;GACjB,MAAM,MAAO,MAAM,OAAO,KAAM;GAChC,IAAI,OAAO,QAAS,GAAG,MAAM;QACxB,OAAO,MAAM;EACpB;EACA,OAAO,KAAK,IAAI,GAAG,GAAG;CACxB;CACA,OAAO;EAAE,OAAO,OAAO;EAAS;EAAO;CAAK;AAC9C"}

package/dist/components/virtual-list/virtual-list.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 import { useNamespace } from "../../utils/namespace.js";
 import { scrollPositionOf } from "../../utils/scroll.js";
-import { createOffsets } from "./virtual-list.js";
+import { createOffsets, virtualItemKey } from "./virtual-list.js";
 import { useTouchScroll } from "../../composables/use-touch-scroll.js";
 import { useMeasuredSizes } from "../../composables/use-measured-sizes.js";
 import { Fragment, computed, createElementBlock, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, openBlock, ref, renderList, renderSlot, shallowRef, unref, useTemplateRef, watch } from "vue";
@@ -59,12 +59,7 @@ var virtual_list_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				to: Math.min(count, last + 1 + props.overscan)
 			};
 		});
-		const keyOf = (item, index) => {
-			const { itemKey } = props;
-			if (typeof itemKey === "function") return itemKey(item, index);
-			if (itemKey) return item[itemKey];
-			return index;
-		};
+		const keyOf = (item, index) => virtualItemKey(props.itemKey, item, index);
 		const visible = computed(() => {
 			const { from, to } = range.value;
 			return props.items.slice(from, to).map((item, offset) => {

package/dist/components/virtual-list/virtual-list.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"virtual-list.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_Fragment","_renderList","_renderSlot"],"sources":["../../../src/components/virtual-list/virtual-list.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport type { HTMLAttributes } from 'vue'\nimport type { ForwardedAttributes } from '../../utils/install'\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  onUpdated,\n  ref,\n  shallowRef,\n  useTemplateRef,\n  watch,\n} from 'vue'\nimport { useMeasuredSizes } from '../../composables/use-measured-sizes'\nimport { useTouchScroll } from '../../composables/use-touch-scroll'\nimport { scrollPositionOf } from '../../utils/scroll'\nimport { useNamespace } from '../../utils/namespace'\nimport { createOffsets } from './virtual-list'\nimport type {\n  VirtualListAlign,\n  VirtualListEmits,\n  VirtualListExpose,\n  VirtualListKey,\n  VirtualListProps,\n  VirtualListSlots,\n} from './virtual-list'\n\ndefineOptions({ name: 'DouVirtualList' })\n\nconst props = withDefaults(\n  defineProps<\n    VirtualListProps<T> &\n      /* @vue-ignore */ ForwardedAttributes<\n        HTMLAttributes,\n        VirtualListProps<T>,\n        keyof VirtualListEmits & string\n      >\n  >(),\n  {\n    itemSize: undefined,\n    estimateSize: 40,\n    overscan: 4,\n    endThreshold: 40,\n  },\n)\nconst emit = defineEmits<{ scroll: [event: Event]; endReached: [] }>()\ndefineSlots<VirtualListSlots<T>>()\n\n// The list itself takes focus (tabindex 0) so the keyboard can scroll it.\n// A parent that manages focus on its own passes `:tabindex=\"undefined\"`.\nconst ns = useNamespace('virtual-list')\nconst elRef = useTemplateRef<HTMLElement>('el')\n\nconst sizeBy = (size: number | ((item: T, index: number) => number), index: number) =>\n  typeof size === 'function' ? size(props.items[index]!, index) : size\n\n// Without `itemSize`, heights come from the rendered items.\nconst measured = computed(() => props.itemSize === undefined)\nconst measuredSizes = useMeasuredSizes({\n  count: () => props.items.length,\n  keyOf: (index) => keyOf(props.items[index]!, index),\n  estimate: (index) => sizeBy(props.estimateSize, index),\n  container: () => elRef.value,\n})\nconst fixedOffsets = computed(() =>\n  createOffsets(props.items.length, (index) => sizeBy(props.itemSize!, index)),\n)\nconst offsets = computed(() => (measured.value ? measuredSizes.offsets.value : fixedOffsets.value))\nconst sizeOf = (index: number) =>\n  measured.value ? undefined : `${sizeBy(props.itemSize!, index)}px`\nonUpdated(measuredSizes.prune)\n\nconst scrollTop = ref(0)\n// The measured viewport, or the `height` prop until it can be measured.\nconst viewportSize = ref(0)\nconst viewport = computed(\n  () => viewportSize.value || (typeof props.height === 'number' ? props.height : 0),\n)\n\nconst range = computed(() => {\n  const count = props.items.length\n  if (!count) return { from: 0, to: 0 }\n  const { find } = offsets.value\n  const first = find(scrollTop.value)\n  const last = find(scrollTop.value + Math.max(viewport.value, 1) - 1)\n  return {\n    from: Math.max(0, first - props.overscan),\n    to: Math.min(count, last + 1 + props.overscan),\n  }\n})\n\nconst keyOf = (item: T, index: number): VirtualListKey => {\n  const { itemKey } = props\n  if (typeof itemKey === 'function') return itemKey(item, index)\n  if (itemKey) return (item as Record<string, VirtualListKey>)[itemKey]!\n  return index\n}\n\nconst visible = computed(() => {\n  const { from, to } = range.value\n  return props.items.slice(from, to).map((item, offset) => {\n    const index = from + offset\n    return { item, index, key: keyOf(item, index) }\n  })\n})\n\nconst style = computed(() =>\n  props.height === undefined\n    ? undefined\n    : { height: typeof props.height === 'number' ? `${props.height}px` : props.height },\n)\n\nlet reachedEnd = false\nfunction onScroll(event: Event) {\n  const el = event.currentTarget as HTMLElement\n  // iOS reports positions past either end while the content bounces back\n  scrollTop.value = scrollPositionOf(el).top\n  remember(el)\n  emit('scroll', event)\n  const atEnd = el.scrollTop + el.clientHeight >= el.scrollHeight - props.endThreshold\n  if (atEnd && !reachedEnd && props.items.length) emit('endReached')\n  reachedEnd = atEnd\n}\n// New items push the end away again.\nwatch(\n  () => props.items.length,\n  () => (reachedEnd = false),\n)\n\n// With measured items, items added or removed above the view keep the\n// first visible item where it was, e.g. earlier messages loaded on top,\n// also when the view is at the very top.\nconst touch = useTouchScroll()\nlet anchor: { key: VirtualListKey; offset: number } | undefined\nfunction remember(el: HTMLElement) {\n  if (!measured.value || !props.items.length) return (anchor = undefined)\n  const top = scrollPositionOf(el).top\n  const index = offsets.value.find(top)\n  anchor = {\n    key: keyOf(props.items[index]!, index),\n    offset: offsets.value.start(index) - top,\n  }\n}\nwatch(\n  () => props.items,\n  (items) => {\n    const held = anchor\n    const el = elRef.value\n    if (!held || !el) return\n    const index = items.findIndex((item, at) => keyOf(item, at) === held.key)\n    if (index < 0) return\n    // a move iOS drops during a touch scroll is made once it is over\n    const target = Math.max(0, offsets.value.start(index) - held.offset)\n    touch.shiftScroll(el, target - el.scrollTop)\n    scrollTop.value = scrollPositionOf(el).top\n    remember(el)\n  },\n  { flush: 'post' },\n)\n\nconst observer = shallowRef<ResizeObserver>()\nonMounted(() => {\n  const el = elRef.value\n  if (!el) return\n  viewportSize.value = el.clientHeight\n  if (typeof ResizeObserver === 'undefined') return\n  observer.value = new ResizeObserver(() => (viewportSize.value = el.clientHeight))\n  observer.value.observe(el)\n})\nonBeforeUnmount(() => observer.value?.disconnect())\n\nfunction scrollTo(offset: number) {\n  const el = elRef.value\n  if (!el) return\n  el.scrollTop = offset\n  // Rendering follows right away, without waiting for the scroll event.\n  scrollTop.value = el.scrollTop\n}\n\nfunction scrollToIndex(index: number, align: VirtualListAlign = 'nearest', settle = 2) {\n  if (index < 0 || index >= props.items.length) return\n  // Measured items land where estimated at first; once the items around\n  // the target are rendered and measured, aim again.\n  if (measured.value && settle > 0 && typeof requestAnimationFrame !== 'undefined') {\n    requestAnimationFrame(() => scrollToIndex(index, align, settle - 1))\n  }\n  const { start } = offsets.value\n  const top = start(index)\n  const bottom = start(index + 1)\n  const height = viewport.value\n  const current = scrollTop.value\n  let target = current\n  if (align === 'start') target = top\n  else if (align === 'end') target = bottom - height\n  else if (align === 'center') target = top - (height - (bottom - top)) / 2\n  else if (top < current) target = top\n  else if (bottom > current + height) target = bottom - height\n  if (target !== current) scrollTo(Math.max(0, target))\n}\n\ndefineExpose<VirtualListExpose>({\n  scrollToIndex: (index, align) => scrollToIndex(index, align),\n  scrollTo,\n  el: () => elRef.value,\n})\n</script>\n\n<template>\n  <div ref=\"el\" tabindex=\"0\" :class=\"ns.b()\" :style=\"style\" @scroll=\"onScroll\">\n    <div v-if=\"items.length\" :class=\"ns.e('spacer')\" :style=\"{ height: `${offsets.total}px` }\">\n      <div\n        v-for=\"entry in visible\"\n        :key=\"entry.key\"\n        :ref=\"\n          measured ? (el) => measuredSizes.track(el as Element, entry.key, entry.index) : undefined\n        \"\n        :class=\"ns.e('item')\"\n        :data-index=\"entry.index\"\n        :style=\"{\n          transform: `translateY(${offsets.start(entry.index)}px)`,\n          height: sizeOf(entry.index),\n        }\"\n      >\n        <slot :item=\"entry.item\" :index=\"entry.index\" />\n      </div>\n    </div>\n    <slot v-else name=\"empty\" />\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"virtual-list.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_Fragment","_renderList","_renderSlot"],"sources":["../../../src/components/virtual-list/virtual-list.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport type { HTMLAttributes } from 'vue'\nimport type { ForwardedAttributes } from '../../utils/install'\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  onUpdated,\n  ref,\n  shallowRef,\n  useTemplateRef,\n  watch,\n} from 'vue'\nimport { useMeasuredSizes } from '../../composables/use-measured-sizes'\nimport { useTouchScroll } from '../../composables/use-touch-scroll'\nimport { scrollPositionOf } from '../../utils/scroll'\nimport { useNamespace } from '../../utils/namespace'\nimport { createOffsets, virtualItemKey } from './virtual-list'\nimport type {\n  VirtualListAlign,\n  VirtualListEmits,\n  VirtualListExpose,\n  VirtualListKey,\n  VirtualListProps,\n  VirtualListSlots,\n} from './virtual-list'\n\ndefineOptions({ name: 'DouVirtualList' })\n\nconst props = withDefaults(\n  defineProps<\n    VirtualListProps<T> &\n      /* @vue-ignore */ ForwardedAttributes<\n        HTMLAttributes,\n        VirtualListProps<T>,\n        keyof VirtualListEmits & string\n      >\n  >(),\n  {\n    itemSize: undefined,\n    estimateSize: 40,\n    overscan: 4,\n    endThreshold: 40,\n  },\n)\nconst emit = defineEmits<{ scroll: [event: Event]; endReached: [] }>()\ndefineSlots<VirtualListSlots<T>>()\n\n// The list itself takes focus (tabindex 0) so the keyboard can scroll it.\n// A parent that manages focus on its own passes `:tabindex=\"undefined\"`.\nconst ns = useNamespace('virtual-list')\nconst elRef = useTemplateRef<HTMLElement>('el')\n\nconst sizeBy = (size: number | ((item: T, index: number) => number), index: number) =>\n  typeof size === 'function' ? size(props.items[index]!, index) : size\n\n// Without `itemSize`, heights come from the rendered items.\nconst measured = computed(() => props.itemSize === undefined)\nconst measuredSizes = useMeasuredSizes({\n  count: () => props.items.length,\n  keyOf: (index) => keyOf(props.items[index]!, index),\n  estimate: (index) => sizeBy(props.estimateSize, index),\n  container: () => elRef.value,\n})\nconst fixedOffsets = computed(() =>\n  createOffsets(props.items.length, (index) => sizeBy(props.itemSize!, index)),\n)\nconst offsets = computed(() => (measured.value ? measuredSizes.offsets.value : fixedOffsets.value))\nconst sizeOf = (index: number) =>\n  measured.value ? undefined : `${sizeBy(props.itemSize!, index)}px`\nonUpdated(measuredSizes.prune)\n\nconst scrollTop = ref(0)\n// The measured viewport, or the `height` prop until it can be measured.\nconst viewportSize = ref(0)\nconst viewport = computed(\n  () => viewportSize.value || (typeof props.height === 'number' ? props.height : 0),\n)\n\nconst range = computed(() => {\n  const count = props.items.length\n  if (!count) return { from: 0, to: 0 }\n  const { find } = offsets.value\n  const first = find(scrollTop.value)\n  const last = find(scrollTop.value + Math.max(viewport.value, 1) - 1)\n  return {\n    from: Math.max(0, first - props.overscan),\n    to: Math.min(count, last + 1 + props.overscan),\n  }\n})\n\nconst keyOf = (item: T, index: number) => virtualItemKey(props.itemKey, item, index)\n\nconst visible = computed(() => {\n  const { from, to } = range.value\n  return props.items.slice(from, to).map((item, offset) => {\n    const index = from + offset\n    return { item, index, key: keyOf(item, index) }\n  })\n})\n\nconst style = computed(() =>\n  props.height === undefined\n    ? undefined\n    : { height: typeof props.height === 'number' ? `${props.height}px` : props.height },\n)\n\nlet reachedEnd = false\nfunction onScroll(event: Event) {\n  const el = event.currentTarget as HTMLElement\n  // iOS reports positions past either end while the content bounces back\n  scrollTop.value = scrollPositionOf(el).top\n  remember(el)\n  emit('scroll', event)\n  const atEnd = el.scrollTop + el.clientHeight >= el.scrollHeight - props.endThreshold\n  if (atEnd && !reachedEnd && props.items.length) emit('endReached')\n  reachedEnd = atEnd\n}\n// New items push the end away again.\nwatch(\n  () => props.items.length,\n  () => (reachedEnd = false),\n)\n\n// With measured items, items added or removed above the view keep the\n// first visible item where it was, e.g. earlier messages loaded on top,\n// also when the view is at the very top.\nconst touch = useTouchScroll()\nlet anchor: { key: VirtualListKey; offset: number } | undefined\nfunction remember(el: HTMLElement) {\n  if (!measured.value || !props.items.length) return (anchor = undefined)\n  const top = scrollPositionOf(el).top\n  const index = offsets.value.find(top)\n  anchor = {\n    key: keyOf(props.items[index]!, index),\n    offset: offsets.value.start(index) - top,\n  }\n}\nwatch(\n  () => props.items,\n  (items) => {\n    const held = anchor\n    const el = elRef.value\n    if (!held || !el) return\n    const index = items.findIndex((item, at) => keyOf(item, at) === held.key)\n    if (index < 0) return\n    // a move iOS drops during a touch scroll is made once it is over\n    const target = Math.max(0, offsets.value.start(index) - held.offset)\n    touch.shiftScroll(el, target - el.scrollTop)\n    scrollTop.value = scrollPositionOf(el).top\n    remember(el)\n  },\n  { flush: 'post' },\n)\n\nconst observer = shallowRef<ResizeObserver>()\nonMounted(() => {\n  const el = elRef.value\n  if (!el) return\n  viewportSize.value = el.clientHeight\n  if (typeof ResizeObserver === 'undefined') return\n  observer.value = new ResizeObserver(() => (viewportSize.value = el.clientHeight))\n  observer.value.observe(el)\n})\nonBeforeUnmount(() => observer.value?.disconnect())\n\nfunction scrollTo(offset: number) {\n  const el = elRef.value\n  if (!el) return\n  el.scrollTop = offset\n  // Rendering follows right away, without waiting for the scroll event.\n  scrollTop.value = el.scrollTop\n}\n\nfunction scrollToIndex(index: number, align: VirtualListAlign = 'nearest', settle = 2) {\n  if (index < 0 || index >= props.items.length) return\n  // Measured items land where estimated at first; once the items around\n  // the target are rendered and measured, aim again.\n  if (measured.value && settle > 0 && typeof requestAnimationFrame !== 'undefined') {\n    requestAnimationFrame(() => scrollToIndex(index, align, settle - 1))\n  }\n  const { start } = offsets.value\n  const top = start(index)\n  const bottom = start(index + 1)\n  const height = viewport.value\n  const current = scrollTop.value\n  let target = current\n  if (align === 'start') target = top\n  else if (align === 'end') target = bottom - height\n  else if (align === 'center') target = top - (height - (bottom - top)) / 2\n  else if (top < current) target = top\n  else if (bottom > current + height) target = bottom - height\n  if (target !== current) scrollTo(Math.max(0, target))\n}\n\ndefineExpose<VirtualListExpose>({\n  scrollToIndex: (index, align) => scrollToIndex(index, align),\n  scrollTo,\n  el: () => elRef.value,\n})\n</script>\n\n<template>\n  <div ref=\"el\" tabindex=\"0\" :class=\"ns.b()\" :style=\"style\" @scroll=\"onScroll\">\n    <div v-if=\"items.length\" :class=\"ns.e('spacer')\" :style=\"{ height: `${offsets.total}px` }\">\n      <div\n        v-for=\"entry in visible\"\n        :key=\"entry.key\"\n        :ref=\"\n          measured ? (el) => measuredSizes.track(el as Element, entry.key, entry.index) : undefined\n        \"\n        :class=\"ns.e('item')\"\n        :data-index=\"entry.index\"\n        :style=\"{\n          transform: `translateY(${offsets.start(entry.index)}px)`,\n          height: sizeOf(entry.index),\n        }\"\n      >\n        <slot :item=\"entry.item\" :index=\"entry.index\" />\n      </div>\n    </div>\n    <slot v-else name=\"empty\" />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/virtual-list/virtual-list2.js.map

@@ -1 +1 @@
-{"version":3,"file":"virtual-list2.js","names":["_sfc_main"],"sources":["../../../src/components/virtual-list/virtual-list.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport type { HTMLAttributes } from 'vue'\nimport type { ForwardedAttributes } from '../../utils/install'\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  onUpdated,\n  ref,\n  shallowRef,\n  useTemplateRef,\n  watch,\n} from 'vue'\nimport { useMeasuredSizes } from '../../composables/use-measured-sizes'\nimport { useTouchScroll } from '../../composables/use-touch-scroll'\nimport { scrollPositionOf } from '../../utils/scroll'\nimport { useNamespace } from '../../utils/namespace'\nimport { createOffsets } from './virtual-list'\nimport type {\n  VirtualListAlign,\n  VirtualListEmits,\n  VirtualListExpose,\n  VirtualListKey,\n  VirtualListProps,\n  VirtualListSlots,\n} from './virtual-list'\n\ndefineOptions({ name: 'DouVirtualList' })\n\nconst props = withDefaults(\n  defineProps<\n    VirtualListProps<T> &\n      /* @vue-ignore */ ForwardedAttributes<\n        HTMLAttributes,\n        VirtualListProps<T>,\n        keyof VirtualListEmits & string\n      >\n  >(),\n  {\n    itemSize: undefined,\n    estimateSize: 40,\n    overscan: 4,\n    endThreshold: 40,\n  },\n)\nconst emit = defineEmits<{ scroll: [event: Event]; endReached: [] }>()\ndefineSlots<VirtualListSlots<T>>()\n\n// The list itself takes focus (tabindex 0) so the keyboard can scroll it.\n// A parent that manages focus on its own passes `:tabindex=\"undefined\"`.\nconst ns = useNamespace('virtual-list')\nconst elRef = useTemplateRef<HTMLElement>('el')\n\nconst sizeBy = (size: number | ((item: T, index: number) => number), index: number) =>\n  typeof size === 'function' ? size(props.items[index]!, index) : size\n\n// Without `itemSize`, heights come from the rendered items.\nconst measured = computed(() => props.itemSize === undefined)\nconst measuredSizes = useMeasuredSizes({\n  count: () => props.items.length,\n  keyOf: (index) => keyOf(props.items[index]!, index),\n  estimate: (index) => sizeBy(props.estimateSize, index),\n  container: () => elRef.value,\n})\nconst fixedOffsets = computed(() =>\n  createOffsets(props.items.length, (index) => sizeBy(props.itemSize!, index)),\n)\nconst offsets = computed(() => (measured.value ? measuredSizes.offsets.value : fixedOffsets.value))\nconst sizeOf = (index: number) =>\n  measured.value ? undefined : `${sizeBy(props.itemSize!, index)}px`\nonUpdated(measuredSizes.prune)\n\nconst scrollTop = ref(0)\n// The measured viewport, or the `height` prop until it can be measured.\nconst viewportSize = ref(0)\nconst viewport = computed(\n  () => viewportSize.value || (typeof props.height === 'number' ? props.height : 0),\n)\n\nconst range = computed(() => {\n  const count = props.items.length\n  if (!count) return { from: 0, to: 0 }\n  const { find } = offsets.value\n  const first = find(scrollTop.value)\n  const last = find(scrollTop.value + Math.max(viewport.value, 1) - 1)\n  return {\n    from: Math.max(0, first - props.overscan),\n    to: Math.min(count, last + 1 + props.overscan),\n  }\n})\n\nconst keyOf = (item: T, index: number): VirtualListKey => {\n  const { itemKey } = props\n  if (typeof itemKey === 'function') return itemKey(item, index)\n  if (itemKey) return (item as Record<string, VirtualListKey>)[itemKey]!\n  return index\n}\n\nconst visible = computed(() => {\n  const { from, to } = range.value\n  return props.items.slice(from, to).map((item, offset) => {\n    const index = from + offset\n    return { item, index, key: keyOf(item, index) }\n  })\n})\n\nconst style = computed(() =>\n  props.height === undefined\n    ? undefined\n    : { height: typeof props.height === 'number' ? `${props.height}px` : props.height },\n)\n\nlet reachedEnd = false\nfunction onScroll(event: Event) {\n  const el = event.currentTarget as HTMLElement\n  // iOS reports positions past either end while the content bounces back\n  scrollTop.value = scrollPositionOf(el).top\n  remember(el)\n  emit('scroll', event)\n  const atEnd = el.scrollTop + el.clientHeight >= el.scrollHeight - props.endThreshold\n  if (atEnd && !reachedEnd && props.items.length) emit('endReached')\n  reachedEnd = atEnd\n}\n// New items push the end away again.\nwatch(\n  () => props.items.length,\n  () => (reachedEnd = false),\n)\n\n// With measured items, items added or removed above the view keep the\n// first visible item where it was, e.g. earlier messages loaded on top,\n// also when the view is at the very top.\nconst touch = useTouchScroll()\nlet anchor: { key: VirtualListKey; offset: number } | undefined\nfunction remember(el: HTMLElement) {\n  if (!measured.value || !props.items.length) return (anchor = undefined)\n  const top = scrollPositionOf(el).top\n  const index = offsets.value.find(top)\n  anchor = {\n    key: keyOf(props.items[index]!, index),\n    offset: offsets.value.start(index) - top,\n  }\n}\nwatch(\n  () => props.items,\n  (items) => {\n    const held = anchor\n    const el = elRef.value\n    if (!held || !el) return\n    const index = items.findIndex((item, at) => keyOf(item, at) === held.key)\n    if (index < 0) return\n    // a move iOS drops during a touch scroll is made once it is over\n    const target = Math.max(0, offsets.value.start(index) - held.offset)\n    touch.shiftScroll(el, target - el.scrollTop)\n    scrollTop.value = scrollPositionOf(el).top\n    remember(el)\n  },\n  { flush: 'post' },\n)\n\nconst observer = shallowRef<ResizeObserver>()\nonMounted(() => {\n  const el = elRef.value\n  if (!el) return\n  viewportSize.value = el.clientHeight\n  if (typeof ResizeObserver === 'undefined') return\n  observer.value = new ResizeObserver(() => (viewportSize.value = el.clientHeight))\n  observer.value.observe(el)\n})\nonBeforeUnmount(() => observer.value?.disconnect())\n\nfunction scrollTo(offset: number) {\n  const el = elRef.value\n  if (!el) return\n  el.scrollTop = offset\n  // Rendering follows right away, without waiting for the scroll event.\n  scrollTop.value = el.scrollTop\n}\n\nfunction scrollToIndex(index: number, align: VirtualListAlign = 'nearest', settle = 2) {\n  if (index < 0 || index >= props.items.length) return\n  // Measured items land where estimated at first; once the items around\n  // the target are rendered and measured, aim again.\n  if (measured.value && settle > 0 && typeof requestAnimationFrame !== 'undefined') {\n    requestAnimationFrame(() => scrollToIndex(index, align, settle - 1))\n  }\n  const { start } = offsets.value\n  const top = start(index)\n  const bottom = start(index + 1)\n  const height = viewport.value\n  const current = scrollTop.value\n  let target = current\n  if (align === 'start') target = top\n  else if (align === 'end') target = bottom - height\n  else if (align === 'center') target = top - (height - (bottom - top)) / 2\n  else if (top < current) target = top\n  else if (bottom > current + height) target = bottom - height\n  if (target !== current) scrollTo(Math.max(0, target))\n}\n\ndefineExpose<VirtualListExpose>({\n  scrollToIndex: (index, align) => scrollToIndex(index, align),\n  scrollTo,\n  el: () => elRef.value,\n})\n</script>\n\n<template>\n  <div ref=\"el\" tabindex=\"0\" :class=\"ns.b()\" :style=\"style\" @scroll=\"onScroll\">\n    <div v-if=\"items.length\" :class=\"ns.e('spacer')\" :style=\"{ height: `${offsets.total}px` }\">\n      <div\n        v-for=\"entry in visible\"\n        :key=\"entry.key\"\n        :ref=\"\n          measured ? (el) => measuredSizes.track(el as Element, entry.key, entry.index) : undefined\n        \"\n        :class=\"ns.e('item')\"\n        :data-index=\"entry.index\"\n        :style=\"{\n          transform: `translateY(${offsets.start(entry.index)}px)`,\n          height: sizeOf(entry.index),\n        }\"\n      >\n        <slot :item=\"entry.item\" :index=\"entry.index\" />\n      </div>\n    </div>\n    <slot v-else name=\"empty\" />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"virtual-list2.js","names":["_sfc_main"],"sources":["../../../src/components/virtual-list/virtual-list.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport type { HTMLAttributes } from 'vue'\nimport type { ForwardedAttributes } from '../../utils/install'\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  onUpdated,\n  ref,\n  shallowRef,\n  useTemplateRef,\n  watch,\n} from 'vue'\nimport { useMeasuredSizes } from '../../composables/use-measured-sizes'\nimport { useTouchScroll } from '../../composables/use-touch-scroll'\nimport { scrollPositionOf } from '../../utils/scroll'\nimport { useNamespace } from '../../utils/namespace'\nimport { createOffsets, virtualItemKey } from './virtual-list'\nimport type {\n  VirtualListAlign,\n  VirtualListEmits,\n  VirtualListExpose,\n  VirtualListKey,\n  VirtualListProps,\n  VirtualListSlots,\n} from './virtual-list'\n\ndefineOptions({ name: 'DouVirtualList' })\n\nconst props = withDefaults(\n  defineProps<\n    VirtualListProps<T> &\n      /* @vue-ignore */ ForwardedAttributes<\n        HTMLAttributes,\n        VirtualListProps<T>,\n        keyof VirtualListEmits & string\n      >\n  >(),\n  {\n    itemSize: undefined,\n    estimateSize: 40,\n    overscan: 4,\n    endThreshold: 40,\n  },\n)\nconst emit = defineEmits<{ scroll: [event: Event]; endReached: [] }>()\ndefineSlots<VirtualListSlots<T>>()\n\n// The list itself takes focus (tabindex 0) so the keyboard can scroll it.\n// A parent that manages focus on its own passes `:tabindex=\"undefined\"`.\nconst ns = useNamespace('virtual-list')\nconst elRef = useTemplateRef<HTMLElement>('el')\n\nconst sizeBy = (size: number | ((item: T, index: number) => number), index: number) =>\n  typeof size === 'function' ? size(props.items[index]!, index) : size\n\n// Without `itemSize`, heights come from the rendered items.\nconst measured = computed(() => props.itemSize === undefined)\nconst measuredSizes = useMeasuredSizes({\n  count: () => props.items.length,\n  keyOf: (index) => keyOf(props.items[index]!, index),\n  estimate: (index) => sizeBy(props.estimateSize, index),\n  container: () => elRef.value,\n})\nconst fixedOffsets = computed(() =>\n  createOffsets(props.items.length, (index) => sizeBy(props.itemSize!, index)),\n)\nconst offsets = computed(() => (measured.value ? measuredSizes.offsets.value : fixedOffsets.value))\nconst sizeOf = (index: number) =>\n  measured.value ? undefined : `${sizeBy(props.itemSize!, index)}px`\nonUpdated(measuredSizes.prune)\n\nconst scrollTop = ref(0)\n// The measured viewport, or the `height` prop until it can be measured.\nconst viewportSize = ref(0)\nconst viewport = computed(\n  () => viewportSize.value || (typeof props.height === 'number' ? props.height : 0),\n)\n\nconst range = computed(() => {\n  const count = props.items.length\n  if (!count) return { from: 0, to: 0 }\n  const { find } = offsets.value\n  const first = find(scrollTop.value)\n  const last = find(scrollTop.value + Math.max(viewport.value, 1) - 1)\n  return {\n    from: Math.max(0, first - props.overscan),\n    to: Math.min(count, last + 1 + props.overscan),\n  }\n})\n\nconst keyOf = (item: T, index: number) => virtualItemKey(props.itemKey, item, index)\n\nconst visible = computed(() => {\n  const { from, to } = range.value\n  return props.items.slice(from, to).map((item, offset) => {\n    const index = from + offset\n    return { item, index, key: keyOf(item, index) }\n  })\n})\n\nconst style = computed(() =>\n  props.height === undefined\n    ? undefined\n    : { height: typeof props.height === 'number' ? `${props.height}px` : props.height },\n)\n\nlet reachedEnd = false\nfunction onScroll(event: Event) {\n  const el = event.currentTarget as HTMLElement\n  // iOS reports positions past either end while the content bounces back\n  scrollTop.value = scrollPositionOf(el).top\n  remember(el)\n  emit('scroll', event)\n  const atEnd = el.scrollTop + el.clientHeight >= el.scrollHeight - props.endThreshold\n  if (atEnd && !reachedEnd && props.items.length) emit('endReached')\n  reachedEnd = atEnd\n}\n// New items push the end away again.\nwatch(\n  () => props.items.length,\n  () => (reachedEnd = false),\n)\n\n// With measured items, items added or removed above the view keep the\n// first visible item where it was, e.g. earlier messages loaded on top,\n// also when the view is at the very top.\nconst touch = useTouchScroll()\nlet anchor: { key: VirtualListKey; offset: number } | undefined\nfunction remember(el: HTMLElement) {\n  if (!measured.value || !props.items.length) return (anchor = undefined)\n  const top = scrollPositionOf(el).top\n  const index = offsets.value.find(top)\n  anchor = {\n    key: keyOf(props.items[index]!, index),\n    offset: offsets.value.start(index) - top,\n  }\n}\nwatch(\n  () => props.items,\n  (items) => {\n    const held = anchor\n    const el = elRef.value\n    if (!held || !el) return\n    const index = items.findIndex((item, at) => keyOf(item, at) === held.key)\n    if (index < 0) return\n    // a move iOS drops during a touch scroll is made once it is over\n    const target = Math.max(0, offsets.value.start(index) - held.offset)\n    touch.shiftScroll(el, target - el.scrollTop)\n    scrollTop.value = scrollPositionOf(el).top\n    remember(el)\n  },\n  { flush: 'post' },\n)\n\nconst observer = shallowRef<ResizeObserver>()\nonMounted(() => {\n  const el = elRef.value\n  if (!el) return\n  viewportSize.value = el.clientHeight\n  if (typeof ResizeObserver === 'undefined') return\n  observer.value = new ResizeObserver(() => (viewportSize.value = el.clientHeight))\n  observer.value.observe(el)\n})\nonBeforeUnmount(() => observer.value?.disconnect())\n\nfunction scrollTo(offset: number) {\n  const el = elRef.value\n  if (!el) return\n  el.scrollTop = offset\n  // Rendering follows right away, without waiting for the scroll event.\n  scrollTop.value = el.scrollTop\n}\n\nfunction scrollToIndex(index: number, align: VirtualListAlign = 'nearest', settle = 2) {\n  if (index < 0 || index >= props.items.length) return\n  // Measured items land where estimated at first; once the items around\n  // the target are rendered and measured, aim again.\n  if (measured.value && settle > 0 && typeof requestAnimationFrame !== 'undefined') {\n    requestAnimationFrame(() => scrollToIndex(index, align, settle - 1))\n  }\n  const { start } = offsets.value\n  const top = start(index)\n  const bottom = start(index + 1)\n  const height = viewport.value\n  const current = scrollTop.value\n  let target = current\n  if (align === 'start') target = top\n  else if (align === 'end') target = bottom - height\n  else if (align === 'center') target = top - (height - (bottom - top)) / 2\n  else if (top < current) target = top\n  else if (bottom > current + height) target = bottom - height\n  if (target !== current) scrollTo(Math.max(0, target))\n}\n\ndefineExpose<VirtualListExpose>({\n  scrollToIndex: (index, align) => scrollToIndex(index, align),\n  scrollTo,\n  el: () => elRef.value,\n})\n</script>\n\n<template>\n  <div ref=\"el\" tabindex=\"0\" :class=\"ns.b()\" :style=\"style\" @scroll=\"onScroll\">\n    <div v-if=\"items.length\" :class=\"ns.e('spacer')\" :style=\"{ height: `${offsets.total}px` }\">\n      <div\n        v-for=\"entry in visible\"\n        :key=\"entry.key\"\n        :ref=\"\n          measured ? (el) => measuredSizes.track(el as Element, entry.key, entry.index) : undefined\n        \"\n        :class=\"ns.e('item')\"\n        :data-index=\"entry.index\"\n        :style=\"{\n          transform: `translateY(${offsets.start(entry.index)}px)`,\n          height: sizeOf(entry.index),\n        }\"\n      >\n        <slot :item=\"entry.item\" :index=\"entry.index\" />\n      </div>\n    </div>\n    <slot v-else name=\"empty\" />\n  </div>\n</template>\n"],"mappings":""}

package/dist/composables/use-popup.js

@@ -1,10 +1,12 @@
 import { useZIndex } from "../components/config-provider/use-config.js";
 import { onlyChildElement } from "../utils/only-child.js";
+import { hasHover } from "../utils/pointer.js";
 import { useFloating } from "./use-floating.js";
 import { useLayer } from "./use-layer.js";
 import { useThemeScope } from "./use-theme-scope.js";
 import { computed, nextTick, onScopeDispose, ref, toValue, watch } from "vue";
 // src/composables/use-popup.ts
+var hoverable = (event) => hasHover(event.pointerType);
 /**
 * The shared behavior of panels anchored to a trigger: opening on hover,
 * focus or click, closing on `Escape` or a press outside, stacking above
@@ -56,12 +58,16 @@ function usePopup(options) {
 		offset: options.offset,
 		sameWidth: options.sameWidth
 	});
+	let press = null;
+	/** The panel was opened by a tap, and stays until tapped away. */
+	const tapped = ref(false);
+	watch(open, (value) => value || (tapped.value = false));
 	useLayer({
 		open,
 		elements: () => [reference(), panelRef.value],
 		onEscape: dismiss,
 		onOutside: () => {
-			if (toValue(options.closeOnOutside) ?? (triggers.value.has("click") || triggers.value.has("focus"))) hide();
+			if (toValue(options.closeOnOutside) ?? (triggers.value.has("click") || triggers.value.has("focus") || tapped.value)) hide();
 		}
 	});
 	const showDelay = () => toValue(options.showDelay) ?? 0;
@@ -69,8 +75,26 @@ function usePopup(options) {
 	const triggerListeners = computed(() => {
 		const on = {};
 		if (triggers.value.has("hover")) {
-			on.onMouseenter = () => show(showDelay());
-			on.onMouseleave = () => hide(hideDelay());
+			on.onPointerenter = (event) => hoverable(event) && show(showDelay());
+			on.onPointerleave = (event) => hoverable(event) && hide(hideDelay());
+			if (!triggers.value.has("click") && (toValue(options.tap) ?? true)) {
+				on.onPointerdown = (event) => {
+					press = {
+						hover: hoverable(event),
+						wasOpen: open.value
+					};
+				};
+				on.onPointercancel = () => press = null;
+				on.onClick = (event) => {
+					const from = press;
+					press = null;
+					if (event.detail === 0 || from?.hover) return;
+					if (from ? from.wasOpen : open.value) return hide();
+					if (event.currentTarget?.closest("a[href]")) event.preventDefault();
+					tapped.value = !toValue(options.disabled);
+					show();
+				};
+			}
 		}
 		if (triggers.value.has("focus")) {
 			on.onFocusin = () => show();
@@ -86,8 +110,8 @@ function usePopup(options) {
 	const panelListeners = computed(() => {
 		if (!triggers.value.has("hover")) return {};
 		return {
-			onMouseenter: clear,
-			onMouseleave: () => hide(hideDelay())
+			onPointerenter: (event) => hoverable(event) && clear(),
+			onPointerleave: (event) => hoverable(event) && hide(hideDelay())
 		};
 	});
 	const panelStyle = computed(() => ({
@@ -104,6 +128,7 @@ function usePopup(options) {
 		panelStyle,
 		triggerListeners,
 		panelListeners,
+		tapped,
 		show,
 		hide,
 		dismiss,

package/dist/composables/use-popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-popup.js","names":[],"sources":["../../src/composables/use-popup.ts"],"sourcesContent":["import { computed, nextTick, onScopeDispose, ref, toValue, watch } from 'vue'\nimport type { CSSProperties, ComponentPublicInstance, MaybeRefOrGetter, Ref } from 'vue'\nimport { useZIndex } from '../components/config-provider/use-config'\nimport { onlyChildElement } from '../utils/only-child'\nimport { useFloating } from './use-floating'\nimport type { Placement, VirtualElement } from './use-floating'\nimport { useLayer } from './use-layer'\nimport { useThemeScope } from './use-theme-scope'\n\n/** What opens a floating panel. `manual` leaves it entirely to `v-model:open`. */\nexport type PopupTrigger = 'hover' | 'click' | 'focus' | 'manual'\n\nexport interface UsePopupOptions {\n  open: Ref<boolean>\n  trigger: MaybeRefOrGetter<PopupTrigger | PopupTrigger[]>\n  disabled?: MaybeRefOrGetter<boolean>\n  placement: MaybeRefOrGetter<Placement>\n  offset?: MaybeRefOrGetter<number>\n  sameWidth?: MaybeRefOrGetter<boolean>\n  /** Delay before opening on hover, in ms. */\n  showDelay?: MaybeRefOrGetter<number>\n  /** Delay before closing once the pointer leaves, in ms. */\n  hideDelay?: MaybeRefOrGetter<number>\n  /** Close on a press outside. Defaults to on for `click` and `focus` triggers. */\n  closeOnOutside?: MaybeRefOrGetter<boolean>\n  /** What the panel is placed next to, when not the trigger itself (e.g. the pointer). */\n  anchor?: () => Element | VirtualElement | null | undefined\n}\n\n/**\n * The shared behavior of panels anchored to a trigger: opening on hover,\n * focus or click, closing on `Escape` or a press outside, stacking above\n * other layers and following the trigger around.\n */\nexport function usePopup(options: UsePopupOptions) {\n  const { open } = options\n  const triggerRef = ref<ComponentPublicInstance | null>(null)\n  const panelRef = ref<HTMLElement | null>(null)\n  const reference = () => onlyChildElement(triggerRef.value)\n\n  const triggers = computed(() => {\n    const value = toValue(options.trigger)\n    return new Set(Array.isArray(value) ? value : [value])\n  })\n\n  let timer: ReturnType<typeof setTimeout> | undefined\n  const clear = () => clearTimeout(timer)\n  function show(delay = 0) {\n    clear()\n    if (toValue(options.disabled)) return\n    if (delay > 0) timer = setTimeout(() => (open.value = true), delay)\n    else open.value = true\n  }\n  function hide(delay = 0) {\n    clear()\n    if (delay > 0) timer = setTimeout(() => (open.value = false), delay)\n    else open.value = false\n  }\n  onScopeDispose(clear)\n\n  /** Close, handing focus back to the trigger if it was inside the panel. */\n  function dismiss() {\n    const restore = !!panelRef.value?.contains(document.activeElement)\n    hide()\n    if (restore) (reference() as HTMLElement | null)?.focus()\n  }\n\n  watch(\n    () => toValue(options.disabled),\n    (disabled) => disabled && hide(),\n  )\n\n  // Render the panel the first time it opens, then keep it.\n  const rendered = ref(open.value)\n  const zIndex = ref<number>()\n  const { next } = useZIndex()\n  const { theme, sync } = useThemeScope(reference)\n  watch(\n    open,\n    (value) => {\n      if (!value) return\n      rendered.value = true\n      zIndex.value = next()\n      void nextTick(sync)\n    },\n    { immediate: true },\n  )\n\n  const floating = useFloating(() => options.anchor?.() ?? reference(), panelRef, {\n    open,\n    placement: options.placement,\n    offset: options.offset,\n    sameWidth: options.sameWidth,\n  })\n\n  useLayer({\n    open,\n    elements: () => [reference(), panelRef.value],\n    onEscape: dismiss,\n    onOutside: () => {\n      const close =\n        toValue(options.closeOnOutside) ??\n        (triggers.value.has('click') || triggers.value.has('focus'))\n      if (close) hide()\n    },\n  })\n\n  const showDelay = () => toValue(options.showDelay) ?? 0\n  const hideDelay = () => toValue(options.hideDelay) ?? 0\n\n  const triggerListeners = computed(() => {\n    const on: Record<string, (event: Event) => void> = {}\n    if (triggers.value.has('hover')) {\n      on.onMouseenter = () => show(showDelay())\n      on.onMouseleave = () => hide(hideDelay())\n    }\n    if (triggers.value.has('focus')) {\n      on.onFocusin = () => show()\n      on.onFocusout = (event) => {\n        const related = (event as FocusEvent).relatedTarget\n        if (related instanceof Node && panelRef.value?.contains(related)) return\n        hide()\n      }\n    }\n    if (triggers.value.has('click')) {\n      on.onClick = () => (open.value ? hide() : show())\n    }\n    return on\n  })\n\n  // Moving from the trigger onto the panel keeps a hover panel open.\n  const panelListeners = computed(() => {\n    if (!triggers.value.has('hover')) return {}\n    return {\n      onMouseenter: clear,\n      onMouseleave: () => hide(hideDelay()),\n    }\n  })\n\n  const panelStyle = computed<CSSProperties>(() => ({\n    ...floating.style.value,\n    zIndex: zIndex.value,\n  }))\n\n  return {\n    triggerRef,\n    panelRef,\n    reference,\n    rendered,\n    theme,\n    placement: floating.placement,\n    panelStyle,\n    triggerListeners,\n    panelListeners,\n    show,\n    hide,\n    dismiss,\n    update: floating.update,\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-popup.js","names":[],"sources":["../../src/composables/use-popup.ts"],"sourcesContent":["import { computed, nextTick, onScopeDispose, ref, toValue, watch } from 'vue'\nimport type { CSSProperties, ComponentPublicInstance, MaybeRefOrGetter, Ref } from 'vue'\nimport { useZIndex } from '../components/config-provider/use-config'\nimport { onlyChildElement } from '../utils/only-child'\nimport { hasHover } from '../utils/pointer'\nimport { useFloating } from './use-floating'\nimport type { Placement, VirtualElement } from './use-floating'\nimport { useLayer } from './use-layer'\nimport { useThemeScope } from './use-theme-scope'\n\n/** What opens a floating panel. `manual` leaves it entirely to `v-model:open`. */\nexport type PopupTrigger = 'hover' | 'click' | 'focus' | 'manual'\n\nexport interface UsePopupOptions {\n  open: Ref<boolean>\n  trigger: MaybeRefOrGetter<PopupTrigger | PopupTrigger[]>\n  disabled?: MaybeRefOrGetter<boolean>\n  placement: MaybeRefOrGetter<Placement>\n  offset?: MaybeRefOrGetter<number>\n  sameWidth?: MaybeRefOrGetter<boolean>\n  /** Delay before opening on hover, in ms. */\n  showDelay?: MaybeRefOrGetter<number>\n  /** Delay before closing once the pointer leaves, in ms. */\n  hideDelay?: MaybeRefOrGetter<number>\n  /**\n   * Close on a press outside. Defaults to on for `click` and `focus` triggers,\n   * and for a `hover` panel a tap opened.\n   */\n  closeOnOutside?: MaybeRefOrGetter<boolean>\n  /**\n   * A finger or a pen has no hover: a tap on the trigger of a `hover` panel\n   * without the `click` trigger opens and closes it instead, and a link\n   * there is followed only once the panel is open. Defaults to on.\n   */\n  tap?: MaybeRefOrGetter<boolean>\n  /** What the panel is placed next to, when not the trigger itself (e.g. the pointer). */\n  anchor?: () => Element | VirtualElement | null | undefined\n}\n\n// Hover listens to pointer events and leaves fingers and pens out: a tap\n// also sends mouseenter, and the mouseleave that may follow at any time\n// (or only with the next tap elsewhere) would close what the tap opened.\nconst hoverable = (event: Event) => hasHover((event as PointerEvent).pointerType)\n\n/**\n * The shared behavior of panels anchored to a trigger: opening on hover,\n * focus or click, closing on `Escape` or a press outside, stacking above\n * other layers and following the trigger around.\n */\nexport function usePopup(options: UsePopupOptions) {\n  const { open } = options\n  const triggerRef = ref<ComponentPublicInstance | null>(null)\n  const panelRef = ref<HTMLElement | null>(null)\n  const reference = () => onlyChildElement(triggerRef.value)\n\n  const triggers = computed(() => {\n    const value = toValue(options.trigger)\n    return new Set(Array.isArray(value) ? value : [value])\n  })\n\n  let timer: ReturnType<typeof setTimeout> | undefined\n  const clear = () => clearTimeout(timer)\n  function show(delay = 0) {\n    clear()\n    if (toValue(options.disabled)) return\n    if (delay > 0) timer = setTimeout(() => (open.value = true), delay)\n    else open.value = true\n  }\n  function hide(delay = 0) {\n    clear()\n    if (delay > 0) timer = setTimeout(() => (open.value = false), delay)\n    else open.value = false\n  }\n  onScopeDispose(clear)\n\n  /** Close, handing focus back to the trigger if it was inside the panel. */\n  function dismiss() {\n    const restore = !!panelRef.value?.contains(document.activeElement)\n    hide()\n    if (restore) (reference() as HTMLElement | null)?.focus()\n  }\n\n  watch(\n    () => toValue(options.disabled),\n    (disabled) => disabled && hide(),\n  )\n\n  // Render the panel the first time it opens, then keep it.\n  const rendered = ref(open.value)\n  const zIndex = ref<number>()\n  const { next } = useZIndex()\n  const { theme, sync } = useThemeScope(reference)\n  watch(\n    open,\n    (value) => {\n      if (!value) return\n      rendered.value = true\n      zIndex.value = next()\n      void nextTick(sync)\n    },\n    { immediate: true },\n  )\n\n  const floating = useFloating(() => options.anchor?.() ?? reference(), panelRef, {\n    open,\n    placement: options.placement,\n    offset: options.offset,\n    sameWidth: options.sameWidth,\n  })\n\n  // The press the next click comes from, and whether the panel was open\n  // then: focus from the same tap may open it before the click arrives.\n  let press: { hover: boolean; wasOpen: boolean } | null = null\n  /** The panel was opened by a tap, and stays until tapped away. */\n  const tapped = ref(false)\n  watch(open, (value) => value || (tapped.value = false))\n\n  useLayer({\n    open,\n    elements: () => [reference(), panelRef.value],\n    onEscape: dismiss,\n    onOutside: () => {\n      const close =\n        toValue(options.closeOnOutside) ??\n        (triggers.value.has('click') || triggers.value.has('focus') || tapped.value)\n      if (close) hide()\n    },\n  })\n\n  const showDelay = () => toValue(options.showDelay) ?? 0\n  const hideDelay = () => toValue(options.hideDelay) ?? 0\n\n  const triggerListeners = computed(() => {\n    const on: Record<string, (event: Event) => void> = {}\n    if (triggers.value.has('hover')) {\n      on.onPointerenter = (event) => hoverable(event) && show(showDelay())\n      on.onPointerleave = (event) => hoverable(event) && hide(hideDelay())\n      if (!triggers.value.has('click') && (toValue(options.tap) ?? true)) {\n        on.onPointerdown = (event) => {\n          press = { hover: hoverable(event), wasOpen: open.value }\n        }\n        // a finger that scrolls the page instead sends no click\n        on.onPointercancel = () => (press = null)\n        on.onClick = (event) => {\n          const from = press\n          press = null\n          // the keyboard is left to the component, and the mouse has hover;\n          // a click with no press before it comes from assistive technology\n          if ((event as MouseEvent).detail === 0 || from?.hover) return\n          if (from ? from.wasOpen : open.value) return hide()\n          // a link opens the panel first; the next tap follows it\n          if ((event.currentTarget as Element | null)?.closest('a[href]')) event.preventDefault()\n          // before showing: a `v-model:open` only takes the new value later\n          tapped.value = !toValue(options.disabled)\n          show()\n        }\n      }\n    }\n    if (triggers.value.has('focus')) {\n      on.onFocusin = () => show()\n      on.onFocusout = (event) => {\n        const related = (event as FocusEvent).relatedTarget\n        if (related instanceof Node && panelRef.value?.contains(related)) return\n        hide()\n      }\n    }\n    if (triggers.value.has('click')) {\n      on.onClick = () => (open.value ? hide() : show())\n    }\n    return on\n  })\n\n  // Moving from the trigger onto the panel keeps a hover panel open.\n  const panelListeners = computed(() => {\n    if (!triggers.value.has('hover')) return {}\n    return {\n      onPointerenter: (event: Event) => hoverable(event) && clear(),\n      onPointerleave: (event: Event) => hoverable(event) && hide(hideDelay()),\n    }\n  })\n\n  const panelStyle = computed<CSSProperties>(() => ({\n    ...floating.style.value,\n    zIndex: zIndex.value,\n  }))\n\n  return {\n    triggerRef,\n    panelRef,\n    reference,\n    rendered,\n    theme,\n    placement: floating.placement,\n    panelStyle,\n    triggerListeners,\n    panelListeners,\n    tapped,\n    show,\n    hide,\n    dismiss,\n    update: floating.update,\n  }\n}\n"],"mappings":"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"}

package/dist/index.js

@@ -1,3 +1,4 @@
+import { installedAppContext, setInstalledAppContext } from "./utils/app-context.js";
 import { configProviderKey } from "./components/config-provider/config-provider.js";
 import { withInstall } from "./utils/install.js";
 import { useNamespace } from "./utils/namespace.js";
@@ -8,6 +9,7 @@ import { provideGlobalConfig, useGlobalConfig, useLocale, useZIndex } from "./co
 import { DouAlert } from "./components/alert/index.js";
 import { getMotionDuration, setMotionMode, useMotionMode, useReducedMotion } from "./composables/use-motion.js";
 import { DouAnchor } from "./components/anchor/index.js";
+import { holdPointer } from "./utils/pointer.js";
 import { computePosition, useFloating } from "./composables/use-floating.js";
 import { isComposing } from "./utils/keyboard.js";
 import { isTopLayer, useLayer } from "./composables/use-layer.js";
@@ -27,10 +29,10 @@ import { DouBanner } from "./components/banner/index.js";
 import { DouBreadcrumb } from "./components/breadcrumb/index.js";
 import { DouButton } from "./components/button/index.js";
 import { DouCalendarHeatmap } from "./components/calendar-heatmap/index.js";
-import { holdPointer } from "./utils/pointer.js";
 import { dropdownHostKey, dropdownKey } from "./components/dropdown/dropdown.js";
 import { DouIcon } from "./components/icon/index.js";
 import { ariaHotkey, formatHotkey, isApplePlatform, matchesHotkey, parseHotkey, useApplePlatform, useHotkey } from "./composables/use-hotkey.js";
+import { DouDropdownGroup, DouDropdownItem, DouDropdownRadioGroup } from "./components/dropdown/item-components.js";
 import { DouContextMenu } from "./components/context-menu/index.js";
 import { DouSegmentedControl } from "./components/segmented-control/index.js";
 import { visibleRange } from "./components/calendar-view/range.js";
@@ -39,47 +41,59 @@ import { DouCalendarView } from "./components/calendar-view/index.js";
 import { DouCard } from "./components/card/index.js";
 import { DouCarousel, DouCarouselItem } from "./components/carousel/index.js";
 import { checkboxGroupKey } from "./components/checkbox/checkbox.js";
+import { DouCheckbox, DouCheckboxGroup } from "./components/checkbox/index.js";
 import { DouTag } from "./components/tag/index.js";
 import { DouCascader } from "./components/cascader/index.js";
+import { DouShimmer } from "./components/shimmer/index.js";
 import { DouChatArtifact } from "./components/chat-artifact/index.js";
 import { formatFileSize, matchesAccept } from "./components/upload/upload.js";
 import { DouChatAttachments } from "./components/chat-attachments/index.js";
 import { DouChatBubble } from "./components/chat-bubble/index.js";
 import { DouChatConfirm } from "./components/chat-confirm/index.js";
 import { DouKbd } from "./components/kbd/index.js";
+import { DouTooltip } from "./components/tooltip/index.js";
 import { DouChatContextMeter } from "./components/chat-context-meter/index.js";
 import { DouChatInput } from "./components/chat-input/index.js";
 import { createOffsets } from "./components/virtual-list/virtual-list.js";
 import { useTouchScroll } from "./composables/use-touch-scroll.js";
 import { DouVirtualList } from "./components/virtual-list/index.js";
 import { DouChatList } from "./components/chat-list/index.js";
-import { useClipboard } from "./composables/use-clipboard.js";
-import { DouTooltip } from "./components/tooltip/index.js";
-import { DouChatMessage } from "./components/chat-message/index.js";
+import { DouChatQuestion } from "./components/chat-question/index.js";
+import { DouCollapseTransition } from "./components/collapse/collapse-transition.js";
+import { DouStatusDot } from "./components/status-dot/index.js";
 import { DouChatPlan } from "./components/chat-plan/index.js";
 import { DouChatReasoning } from "./components/chat-reasoning/index.js";
 import { getTabbable, useFocusTrap } from "./composables/use-focus-trap.js";
+import { DouPopover } from "./components/popover/index.js";
 import { DouChatCitation, DouChatSources } from "./components/chat-sources/index.js";
 import { DouChatSteps } from "./components/chat-steps/index.js";
-import { DouChatSuggestions } from "./components/chat-suggestions/index.js";
 import { DouChatToolCall } from "./components/chat-tool-call/index.js";
-import { DouCheckTag, DouCheckTagGroup } from "./components/check-tag/index.js";
+import { useClipboard } from "./composables/use-clipboard.js";
 import { DouCopyButton } from "./components/copy-button/index.js";
+import { createMarkdownParser, parseMarkdown } from "./components/markdown/parser.js";
 import { DouCodeBlock } from "./components/code-block/index.js";
+import { defaultSanitizeUrl } from "./components/markdown/url.js";
+import { DouMarkdown } from "./components/markdown/index.js";
+import { DouStreamText } from "./components/stream-text/index.js";
+import { DouChatMessage } from "./components/chat-message/index.js";
+import { DouChatSuggestions } from "./components/chat-suggestions/index.js";
+import { DouCheckTag, DouCheckTagGroup } from "./components/check-tag/index.js";
 import { useNow } from "./composables/use-now.js";
 import { DouRelativeTime } from "./components/relative-time/index.js";
-import { DouCheckbox, DouCheckboxGroup } from "./components/checkbox/index.js";
-import { DouCollapse, DouCollapseItem, DouCollapseTransition } from "./components/collapse/index.js";
+import { DouCollapse, DouCollapseItem } from "./components/collapse/index.js";
 import { colorModeScript, useColorMode } from "./components/color-mode/use-color-mode.js";
+import { DouSelect } from "./components/select/index.js";
+import { DouSwitch } from "./components/switch/index.js";
 import { DouColorModeButton, DouColorModeSelect, DouColorModeSwitch } from "./components/color-mode/index.js";
 import { DouFieldGroup, DouFieldGroupText } from "./components/field-group/index.js";
 import { DouColorPanel } from "./components/color-panel/index.js";
 import { DouColorPicker } from "./components/color-picker/index.js";
 import { fuzzyMatch, matchCommand } from "./components/command/command.js";
 import { useScrollLock } from "./composables/use-scroll-lock.js";
-import { dialog, setDialogContext, useDialog } from "./components/dialog/functional.js";
+import { dialog, useDialog } from "./components/dialog/functional.js";
 import { DouDialog } from "./components/dialog/index.js";
 import { DouCommand, DouCommandDialog } from "./components/command/index.js";
+import { DouDropdown, DouDropdownButton, DouDropdownSub } from "./components/dropdown/index.js";
 import { applyCommentAction, applySharedCommentAction, createCommentId, readSharedComments } from "./components/comment-thread/comments.js";
 import { DouCommentThread } from "./components/comment-thread/index.js";
 import { DouConfigProvider } from "./components/config-provider/index.js";
@@ -92,13 +106,11 @@ import { DouCalendar, DouDatePicker } from "./components/date-picker/index.js";
 import { DouDescriptions, DouDescriptionsItem } from "./components/descriptions/index.js";
 import { DouDivider } from "./components/divider/index.js";
 import { DouDrawer } from "./components/drawer/index.js";
-import { DouDropdown, DouDropdownButton, DouDropdownItem, DouDropdownRadioGroup, DouDropdownSub } from "./components/dropdown/index.js";
 import { DouEditable } from "./components/editable/index.js";
 import { useElementSize, useIntersection, useResizeObserver } from "./composables/use-element-size.js";
 import { DouEllipsis } from "./components/ellipsis/index.js";
 import { DouEmpty } from "./components/empty/index.js";
 import { DouFindReplace } from "./components/find-replace/index.js";
-import { DouPopover } from "./components/popover/index.js";
 import { layoutGraph } from "./components/node-graph/layout.js";
 import { DouNodeGraph, DouNodeGraphLegend } from "./components/node-graph/index.js";
 import { isStandardSchema } from "./components/form/standard-schema.js";
@@ -107,11 +119,12 @@ import { DouGrid, DouGridItem } from "./components/grid/index.js";
 import { DouHighlight } from "./components/highlight/index.js";
 import { downloadBlob } from "./utils/download.js";
 import { DouImage, DouImagePreview } from "./components/image/index.js";
+import { DouInputNumber } from "./components/input-number/index.js";
+import { DouSlider } from "./components/slider/index.js";
 import { DouImageCropper } from "./components/image-cropper/index.js";
 import { vInfiniteScroll } from "./components/infinite-scroll/directive.js";
 import { DouInfiniteScroll } from "./components/infinite-scroll/index.js";
 import { DouInputDate } from "./components/input-date/index.js";
-import { DouInputNumber } from "./components/input-number/index.js";
 import { DouInputOtp } from "./components/input-otp/index.js";
 import { DouInputTag } from "./components/input-tag/index.js";
 import { DouInputTime } from "./components/input-time/index.js";
@@ -141,18 +154,13 @@ import { DouRadio, DouRadioGroup } from "./components/radio/index.js";
 import { DouRate } from "./components/rate/index.js";
 import { DouResult } from "./components/result/index.js";
 import { DouScrollbar } from "./components/scrollbar/index.js";
-import { DouSelect } from "./components/select/index.js";
-import { DouShimmer } from "./components/shimmer/index.js";
 import { DouSkeleton } from "./components/skeleton/index.js";
-import { DouSlider } from "./components/slider/index.js";
 import { useSortable } from "./components/sortable/use-sortable.js";
 import { DouSortable, DouSortableHandle } from "./components/sortable/index.js";
 import { DouSpace } from "./components/space/index.js";
 import { DouSparkline } from "./components/sparkline/index.js";
 import { DouSplitter } from "./components/splitter/index.js";
 import { DouSteps } from "./components/steps/index.js";
-import { DouStreamText } from "./components/stream-text/index.js";
-import { DouSwitch } from "./components/switch/index.js";
 import { DouTable } from "./components/table/index.js";
 import { DouTabPanel, DouTabs } from "./components/tabs/index.js";
 import { DouText } from "./components/text/index.js";
@@ -160,7 +168,6 @@ import { DouTimePicker } from "./components/time-picker/index.js";
 import { DouTimeline, DouTimelineItem } from "./components/timeline/index.js";
 import { DouToggle, DouToggleGroup } from "./components/toggle/index.js";
 import { DouToolbar, DouToolbarSeparator } from "./components/toolbar/index.js";
-import { setToastContext } from "./components/toast/store.js";
 import { DouToastViewport, toast } from "./components/toast/index.js";
 import { DouTour } from "./components/tour/index.js";
 import { DouTransfer } from "./components/transfer/index.js";
@@ -177,6 +184,6 @@ import { CANVAS_MAX_SIDE, canvasMaxArea, fitPixelRatio, svgToPNG } from "./utils
 import { breakpoints, collaborationColors } from "@dou-ui/theme";
 // src/index.ts
 var src_default = DouUI;
-export { CANVAS_MAX_SIDE, DouAffix, DouAlert, DouAnchor, DouAutocomplete, DouAvatar, DouAvatarGroup, DouBackTop, DouBadge, DouBanner, DouBreadcrumb, DouButton, DouCalendar, DouCalendarHeatmap, DouCalendarView, DouCard, DouCarousel, DouCarouselItem, DouCascader, DouChatArtifact, DouChatAttachments, DouChatBubble, DouChatCitation, DouChatConfirm, DouChatContextMeter, DouChatInput, DouChatList, DouChatMessage, DouChatPlan, DouChatReasoning, DouChatSources, DouChatSteps, DouChatSuggestions, DouChatToolCall, DouCheckTag, DouCheckTagGroup, DouCheckbox, DouCheckboxGroup, DouCodeBlock, DouCollapse, DouCollapseItem, DouCollapseTransition, DouColorModeButton, DouColorModeSelect, DouColorModeSwitch, DouColorPanel, DouColorPicker, DouCommand, DouCommandDialog, DouCommentThread, DouConfigProvider, DouContextMenu, DouCopyButton, DouCountdown, DouDatePicker, DouDescriptions, DouDescriptionsItem, DouDialog, DouDivider, DouDrawer, DouDropdown, DouDropdownButton, DouDropdownItem, DouDropdownRadioGroup, DouDropdownSub, DouEditable, DouEllipsis, DouEmpty, DouFieldGroup, DouFieldGroupText, DouFindReplace, DouForm, DouFormItem, DouGrid, DouGridItem, DouHighlight, DouIcon, DouImage, DouImageCropper, DouImagePreview, DouInfiniteScroll, DouInput, DouInputDate, DouInputNumber, DouInputOtp, DouInputTag, DouInputTime, DouKbd, DouLayout, DouLayoutAside, DouLayoutAsideTrigger, DouLayoutFooter, DouLayoutHeader, DouLayoutMain, DouLink, DouListbox, DouLoading, DouMarquee, DouMasonry, DouMenu, DouMenubar, DouMenubarMenu, DouNodeGraph, DouNodeGraphLegend, DouPageHeader, DouPagination, DouPopconfirm, DouPopover, DouProgress, DouProgressGroup, DouQrcode, DouRadio, DouRadioGroup, DouRate, DouRelativeTime, DouResult, DouScrollbar, DouSegmentedControl, DouSelect, DouShimmer, DouSkeleton, DouSlider, DouSortable, DouSortableHandle, DouSpace, DouSparkline, DouSpinner, DouSplitter, DouStatistic, DouSteps, DouStreamText, DouSwitch, DouTabPanel, DouTable, DouTabs, DouTag, DouText, DouTextarea, DouTimePicker, DouTimeline, DouTimelineItem, DouToastViewport, DouToggle, DouToggleGroup, DouToolbar, DouToolbarSeparator, DouTooltip, DouTour, DouTransfer, DouTree, DouTreeSelect, DouUI, DouUpload, DouUser, DouVirtualList, DouWatermark, applyCommentAction, applySharedCommentAction, ariaHotkey, breakpointWidth, breakpoints, canvasMaxArea, checkboxGroupKey, collaborationColors, colorModeScript, computePosition, configProviderKey, createCommentId, createOffsets, createScrollLink, src_default as default, dialog, downloadBlob, dropdownHostKey, dropdownKey, en, encodeQr, expandRepeats, fieldGroupKey, fitPixelRatio, formItemKey, formKey, formatDateValue, formatDuration, formatFileSize, formatHotkey, fuzzyMatch, getMotionDuration, getTabbable, holdPointer, isApplePlatform, isComposing, isStandardSchema, isTopLayer, layoutGraph, layoutKey, matchCommand, matchesAccept, matchesHotkey, occurrenceOf, paginationRange, parseHotkey, placeItems, provideGlobalConfig, radioGroupKey, readSharedComments, scrollPositionOf, setDialogContext, setMotionMode, setToastContext, showFormErrors, splitHighlight, svgToPNG, toast, treeRowHeights, useApplePlatform, useBreakpoints, useClipboard, useColorMode, useCountdown, useDialog, useElementSize, useFloating, useFocusTrap, useFormDisabled, useFormItem, useFormReadonly, useFormSize, useGlobalConfig, useHotkey, useIntersection, useLayer, useLocale, useMotionMode, useNamespace, useNow, useReducedMotion, useResizeObserver, useRovingFocus, useScrollLock, useSortable, useTeleport, useTouchScroll, useZIndex, vInfiniteScroll, vLoading, visibleRange, withInstall, zhCN, zhTW };
+export { CANVAS_MAX_SIDE, DouAffix, DouAlert, DouAnchor, DouAutocomplete, DouAvatar, DouAvatarGroup, DouBackTop, DouBadge, DouBanner, DouBreadcrumb, DouButton, DouCalendar, DouCalendarHeatmap, DouCalendarView, DouCard, DouCarousel, DouCarouselItem, DouCascader, DouChatArtifact, DouChatAttachments, DouChatBubble, DouChatCitation, DouChatConfirm, DouChatContextMeter, DouChatInput, DouChatList, DouChatMessage, DouChatPlan, DouChatQuestion, DouChatReasoning, DouChatSources, DouChatSteps, DouChatSuggestions, DouChatToolCall, DouCheckTag, DouCheckTagGroup, DouCheckbox, DouCheckboxGroup, DouCodeBlock, DouCollapse, DouCollapseItem, DouCollapseTransition, DouColorModeButton, DouColorModeSelect, DouColorModeSwitch, DouColorPanel, DouColorPicker, DouCommand, DouCommandDialog, DouCommentThread, DouConfigProvider, DouContextMenu, DouCopyButton, DouCountdown, DouDatePicker, DouDescriptions, DouDescriptionsItem, DouDialog, DouDivider, DouDrawer, DouDropdown, DouDropdownButton, DouDropdownGroup, DouDropdownItem, DouDropdownRadioGroup, DouDropdownSub, DouEditable, DouEllipsis, DouEmpty, DouFieldGroup, DouFieldGroupText, DouFindReplace, DouForm, DouFormItem, DouGrid, DouGridItem, DouHighlight, DouIcon, DouImage, DouImageCropper, DouImagePreview, DouInfiniteScroll, DouInput, DouInputDate, DouInputNumber, DouInputOtp, DouInputTag, DouInputTime, DouKbd, DouLayout, DouLayoutAside, DouLayoutAsideTrigger, DouLayoutFooter, DouLayoutHeader, DouLayoutMain, DouLink, DouListbox, DouLoading, DouMarkdown, DouMarquee, DouMasonry, DouMenu, DouMenubar, DouMenubarMenu, DouNodeGraph, DouNodeGraphLegend, DouPageHeader, DouPagination, DouPopconfirm, DouPopover, DouProgress, DouProgressGroup, DouQrcode, DouRadio, DouRadioGroup, DouRate, DouRelativeTime, DouResult, DouScrollbar, DouSegmentedControl, DouSelect, DouShimmer, DouSkeleton, DouSlider, DouSortable, DouSortableHandle, DouSpace, DouSparkline, DouSpinner, DouSplitter, DouStatistic, DouStatusDot, DouSteps, DouStreamText, DouSwitch, DouTabPanel, DouTable, DouTabs, DouTag, DouText, DouTextarea, DouTimePicker, DouTimeline, DouTimelineItem, DouToastViewport, DouToggle, DouToggleGroup, DouToolbar, DouToolbarSeparator, DouTooltip, DouTour, DouTransfer, DouTree, DouTreeSelect, DouUI, DouUpload, DouUser, DouVirtualList, DouWatermark, applyCommentAction, applySharedCommentAction, ariaHotkey, breakpointWidth, breakpoints, canvasMaxArea, checkboxGroupKey, collaborationColors, colorModeScript, computePosition, configProviderKey, createCommentId, createMarkdownParser, createOffsets, createScrollLink, src_default as default, defaultSanitizeUrl, dialog, downloadBlob, dropdownHostKey, dropdownKey, en, encodeQr, expandRepeats, fieldGroupKey, fitPixelRatio, formItemKey, formKey, formatDateValue, formatDuration, formatFileSize, formatHotkey, fuzzyMatch, getMotionDuration, getTabbable, holdPointer, installedAppContext, isApplePlatform, isComposing, isStandardSchema, isTopLayer, layoutGraph, layoutKey, matchCommand, matchesAccept, matchesHotkey, occurrenceOf, paginationRange, parseHotkey, parseMarkdown, placeItems, provideGlobalConfig, radioGroupKey, readSharedComments, scrollPositionOf, setInstalledAppContext, setMotionMode, showFormErrors, splitHighlight, svgToPNG, toast, treeRowHeights, useApplePlatform, useBreakpoints, useClipboard, useColorMode, useCountdown, useDialog, useElementSize, useFloating, useFocusTrap, useFormDisabled, useFormItem, useFormReadonly, useFormSize, useGlobalConfig, useHotkey, useIntersection, useLayer, useLocale, useMotionMode, useNamespace, useNow, useReducedMotion, useResizeObserver, useRovingFocus, useScrollLock, useSortable, useTeleport, useTouchScroll, useZIndex, vInfiniteScroll, vLoading, visibleRange, withInstall, zhCN, zhTW };
 
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["import { DouUI } from './plugin'\n\nexport * from './components'\nexport * from './locale'\nexport {\n  computePosition,\n  getTabbable,\n  isTopLayer,\n  useFloating,\n  useFocusTrap,\n  useLayer,\n  useScrollLock,\n} from './composables'\nexport type {\n  Layer,\n  Placement,\n  Position,\n  PositionOptions,\n  Side,\n  UseFloatingOptions,\n  UseFocusTrapOptions,\n  UseLayerOptions,\n  VirtualElement,\n} from './composables'\nexport { useElementSize, useIntersection, useResizeObserver } from './composables/use-element-size'\nexport type {\n  UseElementSizeOptions,\n  UseIntersectionOptions,\n  UseResizeObserverOptions,\n} from './composables/use-element-size'\nexport {\n  getMotionDuration,\n  setMotionMode,\n  useMotionMode,\n  useReducedMotion,\n} from './composables/use-motion'\nexport type { MotionDuration, MotionMode } from './composables/use-motion'\nexport {\n  ariaHotkey,\n  formatHotkey,\n  isApplePlatform,\n  matchesHotkey,\n  parseHotkey,\n  useApplePlatform,\n  useHotkey,\n} from './composables/use-hotkey'\nexport type { UseHotkeyOptions } from './composables/use-hotkey'\nexport { breakpointWidth, useBreakpoints } from './composables/use-breakpoints'\nexport type { UseBreakpointsReturn } from './composables/use-breakpoints'\nexport { useClipboard } from './composables/use-clipboard'\nexport type { UseClipboardOptions, UseClipboardReturn } from './composables/use-clipboard'\nexport { useRovingFocus } from './composables/use-roving-focus'\nexport type { RovingOrientation, UseRovingFocusOptions } from './composables/use-roving-focus'\nexport { useNow } from './composables/use-now'\nexport type { UseNowOptions } from './composables/use-now'\nexport { breakpoints, collaborationColors } from '@dou-ui/theme'\nexport type { Breakpoint } from '@dou-ui/theme'\nexport { useNamespace, withInstall } from './utils'\nexport { isComposing } from './utils/keyboard'\nexport { holdPointer } from './utils/pointer'\nexport { createScrollLink, scrollPositionOf } from './utils/scroll'\nexport type { ScrollLink, ScrollLinkAxis } from './utils/scroll'\nexport { useTouchScroll } from './composables/use-touch-scroll'\nexport type { UseTouchScrollReturn } from './composables/use-touch-scroll'\nexport type { PointerHold } from './utils/pointer'\nexport { useTeleport } from './utils/teleport'\nexport type { TeleportTarget } from './utils/teleport'\nexport { CANVAS_MAX_SIDE, canvasMaxArea, fitPixelRatio, svgToPNG } from './utils/png'\nexport { downloadBlob } from './utils/download'\nexport type { PNGExportSource, SvgToPNGOptions } from './utils/png'\nexport type { ForwardedAttributes, Size, Tone, WithAttributes, WithInstall } from './utils'\nexport type { DataAttributes } from './attributes'\nexport { DouUI }\nexport default DouUI\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA,IAAA,cAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["import { DouUI } from './plugin'\n\nexport * from './components'\nexport * from './locale'\nexport {\n  computePosition,\n  getTabbable,\n  isTopLayer,\n  useFloating,\n  useFocusTrap,\n  useLayer,\n  useScrollLock,\n} from './composables'\nexport type {\n  Layer,\n  Placement,\n  Position,\n  PositionOptions,\n  Side,\n  UseFloatingOptions,\n  UseFocusTrapOptions,\n  UseLayerOptions,\n  VirtualElement,\n} from './composables'\nexport { useElementSize, useIntersection, useResizeObserver } from './composables/use-element-size'\nexport type {\n  UseElementSizeOptions,\n  UseIntersectionOptions,\n  UseResizeObserverOptions,\n} from './composables/use-element-size'\nexport {\n  getMotionDuration,\n  setMotionMode,\n  useMotionMode,\n  useReducedMotion,\n} from './composables/use-motion'\nexport type { MotionDuration, MotionMode } from './composables/use-motion'\nexport {\n  ariaHotkey,\n  formatHotkey,\n  isApplePlatform,\n  matchesHotkey,\n  parseHotkey,\n  useApplePlatform,\n  useHotkey,\n} from './composables/use-hotkey'\nexport type { UseHotkeyOptions } from './composables/use-hotkey'\nexport { breakpointWidth, useBreakpoints } from './composables/use-breakpoints'\nexport type { UseBreakpointsReturn } from './composables/use-breakpoints'\nexport { useClipboard } from './composables/use-clipboard'\nexport type { UseClipboardOptions, UseClipboardReturn } from './composables/use-clipboard'\nexport { useRovingFocus } from './composables/use-roving-focus'\nexport type { RovingOrientation, UseRovingFocusOptions } from './composables/use-roving-focus'\nexport { useNow } from './composables/use-now'\nexport type { UseNowOptions } from './composables/use-now'\nexport { breakpoints, collaborationColors } from '@dou-ui/theme'\nexport type { Breakpoint } from '@dou-ui/theme'\nexport { useNamespace, withInstall } from './utils'\nexport { isComposing } from './utils/keyboard'\nexport { holdPointer } from './utils/pointer'\nexport { createScrollLink, scrollPositionOf } from './utils/scroll'\nexport { installedAppContext, setInstalledAppContext } from './utils/app-context'\nexport type { ScrollLink, ScrollLinkAxis } from './utils/scroll'\nexport { useTouchScroll } from './composables/use-touch-scroll'\nexport type { UseTouchScrollReturn } from './composables/use-touch-scroll'\nexport type { PointerHold } from './utils/pointer'\nexport { useTeleport } from './utils/teleport'\nexport type { TeleportTarget } from './utils/teleport'\nexport { CANVAS_MAX_SIDE, canvasMaxArea, fitPixelRatio, svgToPNG } from './utils/png'\nexport { downloadBlob } from './utils/download'\nexport type { PNGExportSource, SvgToPNGOptions } from './utils/png'\nexport type { ForwardedAttributes, Size, Tone, WithAttributes, WithInstall } from './utils'\nexport type { DataAttributes } from './attributes'\nexport { DouUI }\nexport default DouUI\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA,IAAA,cAAe"}

package/dist/locale/en.js

@@ -130,17 +130,17 @@ var en = {
 		empty: "No results"
 	},
 	steps: {
-		finish: "completed",
-		process: "current",
-		wait: "not started",
+		done: "completed",
+		running: "current",
+		pending: "not started",
 		error: "failed"
 	},
 	nodeGraph: {
 		label: "Node graph",
 		status: {
-			wait: "Not started",
-			process: "In progress",
-			finish: "Completed",
+			pending: "Not started",
+			running: "In progress",
+			done: "Completed",
 			error: "Failed",
 			blocked: "Waiting on dependencies"
 		},
@@ -419,10 +419,12 @@ var en = {
 		reasoning: "Reasoning",
 		thoughtSeconds: "Thought for {seconds}s",
 		thoughtMinutes: "Thought for {minutes}m {seconds}s",
-		toolPending: "Awaiting approval",
+		toolPending: "Not started",
 		toolRunning: "Running",
-		toolSuccess: "Done",
+		toolWaiting: "Waiting",
+		toolDone: "Done",
 		toolError: "Failed",
+		toolWithdrawn: "Withdrawn",
 		toolInput: "Input",
 		toolOutput: "Output",
 		attachments: "Attachments",
@@ -431,10 +433,12 @@ var en = {
 		uploadError: "Upload failed",
 		plan: "Plan",
 		stepRunning: "In progress",
+		stepWaiting: "Waiting",
 		stepDone: "Done",
 		stepError: "Failed",
 		working: "Working",
 		stepsDone: "{count} steps done",
+		stepsTotal: "{count} steps",
 		sources: "Sources",
 		citation: "Source {index}: {title}",
 		approve: "Allow",
@@ -442,6 +446,8 @@ var en = {
 		deny: "Deny",
 		approved: "Allowed",
 		denied: "Denied",
+		answered: "Answered",
+		withdrawn: "Withdrawn",
 		generating: "Generating…",
 		generateError: "Generation failed",
 		context: "Context {used} / {total} ({percent}%)",