pxd 0.0.64 → 0.1.3

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

@@ -0,0 +1,110 @@
+<script setup>
+import { computed } from "vue";
+defineOptions({
+	name: "PTimelineItem",
+	inheritAttrs: false
+});
+const props = defineProps({
+	timestamp: {
+		type: String,
+		required: false,
+		default: ""
+	},
+	hideTimestamp: {
+		type: Boolean,
+		required: false
+	},
+	placement: {
+		type: String,
+		required: false,
+		default: "bottom"
+	},
+	type: {
+		type: String,
+		required: false,
+		default: ""
+	},
+	color: {
+		type: String,
+		required: false,
+		default: ""
+	},
+	size: {
+		type: String,
+		required: false,
+		default: "normal"
+	},
+	icon: {
+		type: null,
+		required: false
+	},
+	hollow: {
+		type: Boolean,
+		required: false
+	}
+});
+const nodeClasses = computed(() => [
+	`is-${props.size} min-w-2 min-h-2 p-px left-[0.28125rem] -translate-x-1/2 leading-none`,
+	props.type && `is-${props.type}`,
+	{ "is-hollow": props.hollow },
+	{
+		"bg-primary border-primary": props.type === "primary",
+		"bg-blue-700 border-blue-700": props.type === "success",
+		"bg-amber-700 border-amber-700": props.type === "warning",
+		"bg-red-700 border-red-700": props.type === "danger",
+		"bg-gray-600 border-gray-600": props.type === "info",
+		"bg-gray-400 border-gray-400": !props.type,
+		"border-2 border-solid bg-background-100": props.hollow
+	}
+]);
+</script>
+
+<template>
+  <li
+    data-timeline-item
+    class="pxd-timeline-item group/timeline-item pbe-4 last:pbe-0 relative"
+    v-bind="$attrs"
+  >
+    <div
+      aria-hidden="true"
+      class="pxd-timeline-item--tail left-1 top-0 absolute h-full border-l border-gray-300 group-last/timeline-item:hidden"
+    />
+
+    <div
+      v-if="!$slots.dot"
+      aria-hidden="true"
+      class="pxd-timeline-item--node absolute flex items-center justify-center rounded-full text-primary-foreground"
+      :class="nodeClasses"
+      :style="{ backgroundColor: color, borderColor: color }"
+    >
+      <Component :is="icon" v-if="icon" class="pxd-timeline-item--icon size-3" />
+    </div>
+    <div
+      v-else
+      aria-hidden="true"
+      class="pxd-timeline-item--dot left-1.25 absolute flex -translate-x-1/2 items-center justify-center"
+    >
+      <slot name="dot" />
+    </div>
+
+    <div class="pxd-timeline-item--wrapper px-5 -top-1.5 relative">
+      <div
+        v-if="!hideTimestamp && placement === 'top'"
+        class="pxd-timeline-item--timestamp is-top mbe-1 pbs-1 text-xs leading-none text-foreground-secondary"
+      >
+        {{ timestamp }}
+      </div>
+
+      <div class="pxd-timeline-item--content text-foreground">
+        <slot />
+      </div>
+
+      <div
+        v-if="!hideTimestamp && placement === 'bottom'"
+        class="pxd-timeline-item--timestamp is-bottom mbs-0.5 text-xs leading-none text-foreground-secondary"
+      >
+        {{ timestamp }}
+      </div>
+    </div>
+  </li>
+</template>

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

@@ -0,0 +1,16 @@
+import type { Component } from 'vue'
+
+export type TimelineItemPlacement = 'top' | 'bottom'
+export type TimelineItemType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | ''
+export type TimelineItemSize = 'normal' | 'large'
+
+export interface TimelineItemProps {
+  timestamp?: string
+  hideTimestamp?: boolean
+  placement?: TimelineItemPlacement
+  type?: TimelineItemType
+  color?: string
+  size?: TimelineItemSize
+  icon?: string | Component
+  hollow?: boolean
+}

package/dist/components/toc/index.d.vue.ts

@@ -0,0 +1,37 @@
+import type { TocItem, TocProps } from './types';
+declare function scrollTo(id: string): boolean;
+declare var __VLS_2: {
+    active: boolean;
+    select: (event: PointerEvent) => void;
+    item: TocItem;
+    index: number;
+    depth: number;
+};
+type __VLS_Slots = {} & {
+    item?: (props: typeof __VLS_2) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TocProps, {
+    activeId: import("vue").ComputedRef<string | null>;
+    items: import("vue").ComputedRef<TocItem[]>;
+    scrollTo: typeof scrollTo;
+    update: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "item-click": (item: TocItem, event: MouseEvent) => any;
+    "active-change": (item: TocItem | null) => any;
+}, string, import("vue").PublicProps, Readonly<TocProps> & Readonly<{
+    "onItem-click"?: ((item: TocItem, event: MouseEvent) => any) | undefined;
+    "onActive-change"?: ((item: TocItem | null) => any) | undefined;
+}>, {
+    scrollTarget: HTMLElement | null;
+    scrollBehavior: ScrollBehavior;
+    offset: number;
+    scrollActiveIntoView: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/toc/index.vue

@@ -0,0 +1,199 @@
+<script setup>
+import { computed, ref, shallowRef, watch } from "vue";
+import { useMotionReduced } from "../../composables/use-motion-reduce.js";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { useMutationObserver } from "../../composables/use-mutation-observer.js";
+import { useScrollspy } from "../../composables/use-scrollspy.js";
+import { getScrollElement, isViewportScroll, resolveScrollBehavior } from "../../utils/dom.js";
+import { scheduleByRaf } from "../../utils/event.js";
+import { isServer } from "../../utils/is.js";
+defineOptions({
+	name: "PToc",
+	inheritAttrs: false
+});
+const INDENT_BASE = 8;
+const INDENT_STEP = 14;
+const ITEM_ACTIVE_CLASS = "pxd-toc--item_active bg-gray-200 text-primary";
+const ITEM_IDLE_CLASS = "text-foreground-secondary hover:bg-gray-100 hover:text-gray-900";
+const props = defineProps({
+	selector: {
+		type: String,
+		required: true
+	},
+	scrollTarget: {
+		type: null,
+		required: false,
+		default: null
+	},
+	offset: {
+		type: Number,
+		required: false,
+		default: 0
+	},
+	scrollBehavior: {
+		type: null,
+		required: false,
+		default: "auto"
+	},
+	scrollActiveIntoView: {
+		type: Boolean,
+		required: false,
+		default: true
+	}
+});
+const emit = defineEmits(["item-click", "active-change"]);
+const motionReduce = useMotionReduced();
+const { attrs, classes } = useTailwindVariant({ base: "pxd-toc text-sm w-full max-w-full" });
+const listEl = ref(null);
+const entries = shallowRef([]);
+function outlineRoot() {
+	return props.scrollTarget ?? document.body;
+}
+function isSameOutline(next, current) {
+	return next.length === current.length && next.every((entry, index) => {
+		const previous = current[index];
+		return entry.el === previous.el && entry.item.label === previous.item.label && entry.item.level === previous.item.level;
+	});
+}
+function readOutline() {
+	const next = Array.from(outlineRoot().querySelectorAll(props.selector)).filter((el) => el.id).map((el) => ({
+		el,
+		item: {
+			id: el.id,
+			label: el.textContent?.trim().replace(/^#\s*/, "") || "",
+			level: Number.parseInt(el.tagName.slice(1), 10) || 1
+		}
+	}));
+	if (isSameOutline(next, entries.value)) {
+		return;
+	}
+	entries.value = next;
+}
+const scheduleRead = scheduleByRaf(readOutline);
+const { activeEl, update } = useScrollspy(computed(() => entries.value.map((entry) => entry.el)), {
+	scrollTarget: () => props.scrollTarget,
+	topOffset: () => props.offset
+});
+const items = computed(() => entries.value.map((entry) => entry.item));
+const activeId = computed(() => activeEl.value?.id ?? null);
+const tocItems = computed(() => {
+	if (!items.value.length) {
+		return [];
+	}
+	// Depth is measured against the shallowest heading present, not `h1`.
+	const minLevel = items.value.reduce((min, item) => Math.min(min, item.level), Infinity);
+	return items.value.map((item, index) => ({
+		item,
+		index,
+		depth: item.level - minLevel
+	}));
+});
+// Indexed by the outline, not the spy's targets, so a dropped element can't shift later rows.
+const activeRowIndex = computed(() => items.value.findIndex((item) => item.id === activeId.value));
+function getScrollTop(target, container) {
+	const top = target.getBoundingClientRect().top;
+	if (isViewportScroll(container)) {
+		return top + window.scrollY - props.offset;
+	}
+	return top - container.getBoundingClientRect().top + container.scrollTop - props.offset;
+}
+function scrollTo(id) {
+	const target = document.getElementById(id);
+	if (!target) {
+		return false;
+	}
+	const container = getScrollElement(props.scrollTarget);
+	const scroller = isViewportScroll(container) ? window : container;
+	scroller.scrollTo({
+		top: Math.max(getScrollTop(target, container), 0),
+		behavior: resolveScrollBehavior(props.scrollBehavior, motionReduce)
+	});
+	return true;
+}
+function onItemClick(item, event) {
+	emit("item-click", item, event);
+	// Modified and non-primary clicks keep the browser's native jump (scroll-margin-top).
+	if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+		return;
+	}
+	event.preventDefault();
+	scrollTo(item.id);
+}
+function keepActiveVisible() {
+	const list = listEl.value;
+	const index = activeRowIndex.value;
+	if (!props.scrollActiveIntoView || !list || index < 0) {
+		return;
+	}
+	const row = list.children[index];
+	if (!row) {
+		return;
+	}
+	const listRect = list.getBoundingClientRect();
+	const rowRect = row.getBoundingClientRect();
+	if (rowRect.top < listRect.top) {
+		list.scrollTop -= listRect.top - rowRect.top;
+	} else if (rowRect.bottom > listRect.bottom) {
+		list.scrollTop += rowRect.bottom - listRect.bottom;
+	}
+}
+if (!isServer()) {
+	useMutationObserver(outlineRoot, scheduleRead, {
+		childList: true,
+		subtree: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: ["id"]
+	});
+	watch(() => [props.selector, props.scrollTarget], scheduleRead, {
+		immediate: true,
+		flush: "post"
+	});
+	watch(() => activeId.value, (id) => {
+		emit("active-change", items.value.find((item) => item.id === id) ?? null);
+		keepActiveVisible();
+	}, { flush: "post" });
+}
+defineExpose({
+	activeId,
+	items,
+	scrollTo,
+	update
+});
+</script>
+
+<template>
+  <nav data-toc v-if="tocItems.length" :class="classes" v-bind="attrs">
+    <ol ref="listEl" class="m-0 p-0 list-none">
+      <li
+        v-for="row in tocItems"
+        :key="row.item.id"
+        data-toc-item
+        class="pxd-toc--item m-0 list-none"
+      >
+        <slot
+          v-if="$slots.item"
+          name="item"
+          v-bind="row"
+          :active="row.item.id === activeId"
+          :select="(event) => onItemClick(row.item, event)"
+        />
+        <a
+          v-else
+          :href="`#${row.item.id}`"
+          class="pxd-toc--item-label py-1.5 pe-2 block w-full max-w-full cursor-pointer truncate rounded-md text-start no-underline self-focus-ring outline-none motion-safe:transition-colors"
+          :class="row.item.id === activeId ? ITEM_ACTIVE_CLASS : ITEM_IDLE_CLASS"
+          :style="{ paddingInlineStart: `${row.depth * INDENT_STEP + INDENT_BASE}px` }"
+          :aria-current="row.item.id === activeId ? 'location' : void 0"
+          @click="onItemClick(row.item, $event)"
+        >
+          {{ row.item.label }}
+        </a>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<style>
+@media (hover:hover){[data-toc-item]:has(>.pxd-toc--item-label:hover):has(+[data-toc-item]>.pxd-toc--item_active)>.pxd-toc--item-label:hover,[data-toc-item]:has(>.pxd-toc--item_active):has(+[data-toc-item]>.pxd-toc--item-label:hover)>.pxd-toc--item_active{border-bottom-left-radius:0;border-bottom-right-radius:0}[data-toc-item]:has(>.pxd-toc--item-label:hover)+[data-toc-item]>.pxd-toc--item_active,[data-toc-item]:has(>.pxd-toc--item_active)+[data-toc-item]>.pxd-toc--item-label:hover{border-top-left-radius:0;border-top-right-radius:0}}
+</style>

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

@@ -0,0 +1,28 @@
+export interface TocItem {
+  /** `id` of the heading element this entry scrolls to. */
+  id: string
+  /** Text rendered for the entry. */
+  label: string
+  /** Heading level (1-6), drives the indent. */
+  level: number
+}
+
+export interface TocProps {
+  /** Headings that make up the outline, as a CSS selector. */
+  selector: string
+  /** Scrollable container holding the headings; leave empty to read the document. */
+  scrollTarget?: HTMLElement | null
+  /** Pixels kept above the heading when scrolling to it, and the spy probe line. */
+  offset?: number
+  /** Scroll animation when an entry is activated; `auto` follows the system motion preference. */
+  scrollBehavior?: ScrollBehavior
+  /** Scroll the active entry back into view when it leaves the list. */
+  scrollActiveIntoView?: boolean
+}
+
+export interface TocEmits {
+  /** Emitted when the user activates an entry. */
+  'item-click': [item: TocItem, event: MouseEvent]
+  /** Emitted when the active heading changes. */
+  'active-change': [item: TocItem | null]
+}

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

@@ -0,0 +1,64 @@
+import type { TodoChangeDetail, TodoItemKey, TodoOption, TodoProps, TodoStats, TodoStatus } from './types';
+declare function start(target: TodoItemKey): void;
+declare function complete(target: TodoItemKey): void;
+declare function cancel(target: TodoItemKey): void;
+declare function reset(target: TodoItemKey): void;
+declare function expand(): void;
+declare function collapse(): void;
+declare function toggleExpand(next?: boolean): void;
+declare var __VLS_6: {
+    expanded: boolean;
+    stats: TodoStats;
+    title: string | number;
+    summary: string;
+}, __VLS_13: {}, __VLS_16: {
+    item: TodoOption;
+    index: number;
+    status: TodoStatus;
+    toggle: () => void;
+}, __VLS_33: {
+    item: TodoOption;
+    index: number;
+    status: TodoStatus;
+};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_6) => any;
+} & {
+    empty?: (props: typeof __VLS_13) => any;
+} & {
+    item?: (props: typeof __VLS_16) => any;
+} & {
+    'item-content'?: (props: typeof __VLS_33) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TodoProps, {
+    isExpanded: import("vue").ShallowRef<boolean, boolean>;
+    stats: import("vue").ComputedRef<TodoStats>;
+    expand: typeof expand;
+    collapse: typeof collapse;
+    toggleExpand: typeof toggleExpand;
+    start: typeof start;
+    complete: typeof complete;
+    cancel: typeof cancel;
+    reset: typeof reset;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: TodoChangeDetail) => any;
+    "update:modelValue": (args_0: TodoOption[]) => any;
+    toggle: (expanded: boolean, event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<TodoProps> & Readonly<{
+    onChange?: ((args_0: TodoChangeDetail) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: TodoOption[]) => any) | undefined;
+    onToggle?: ((expanded: boolean, event: MouseEvent) => any) | undefined;
+}>, {
+    options: TodoOption[];
+    readonly: boolean;
+    collapsible: boolean;
+    defaultExpanded: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};