@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/patterns/KanbanBoard.js

@@ -0,0 +1,294 @@
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { mergeAttrs } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { Badge } from "../base/Badge.js";
+import { VisuallyHidden } from "../base/VisuallyHidden.js";
+import { ButtonBase } from "../base/ButtonBase.js";
+import { ScrollArea } from "../layout/ScrollArea.js";
+import { useSortable } from "../utils/dom/sortable.js";
+import { useMessages } from "../config/lang/messages.js";
+import { patternsMessages } from "./messages.js";
+import { createVNode, mergeProps, shallowRef } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { GripVertical } from "@lucide/icons";
+//#region src/patterns/KanbanBoard.tsx
+/**
+* 看板：一列一个状态（或阶段、负责人），卡片在列之间移动。任务看板、招聘流程、工单。
+*
+*   <KanbanBoard
+*     aria-label="任务看板"
+*     columns={[{ key: 'designing', label: '设计中' }, { key: 'verifying', label: '测试中' }]}
+*     items={tasks}
+*     getKey={(task) => task.code}
+*     getColumn={(task) => task.status}
+*     getLabel={(task) => task.name}
+*     canMove={(task, to) => (to === next(task.status) ? null : '只能拖到下一列')}
+*     onMove={(task, to) => openProcessDialog(task, to)}
+*   >
+*     {(task) => <TaskCard task={task} />}
+*   </KanbanBoard>
+*
+* 数据由使用方控制：看板不自己挪卡片，只在放下时报告 onMove（使用方处理完、刷新数据，卡片才换列）。
+* canMove 返回不能移动的原因（null 是可以）：拖动时经过的列按它高亮（可以放的是强调色，不能放的标红并写出原因），
+* 落点处画一条插入线；放在不能放的列上时卡片弹回、读屏播报原因，并报告 onReject。
+* 给了 onReorder 时列内也能排序（数据立即重排，写回整个数组）。
+*
+* 拖动、键盘、读屏播报、自动滚动建在 useSortable 的分组上（utils/dom/sortable.ts）：
+* - 指针：在卡片上按下拖动超过 3px 开始（点在卡片里的链接、按钮上不算），影子卡跟着指针走，原位留着变淡的占位；
+* - 键盘：每张卡片有把手按钮，空格 / Enter 拿起，← / → 换列（从右到左排版下镜像），↑ / ↓ 调整位置，
+*   空格 / Enter 放下，Esc 取消；每一步都有读屏播报（aria-live）。
+* 列多时整块横向滚动（ScrollArea），每列里的卡片多时列自己竖向滚动。
+*/
+/** 看板的一列 */
+/** 卡片的渲染状态 */
+/** 未声明的属性落到外层 div 上；aria-label 是看板的名称 */
+/** KanbanBoard 的样式：board、column、header、list、card、handle… */
+var kanbanBoardStyles = css.create({
+	board: {
+		display: "flex",
+		gap: "_md",
+		alignItems: "flex-start",
+		paddingBlockEnd: "_sm"
+	},
+	column: {
+		display: "flex",
+		flexDirection: "column",
+		flexShrink: 0,
+		borderRadius: "_lg",
+		backgroundColor: "_surfaceMuted",
+		outlineWidth: "_borderWidths.sm",
+		outlineStyle: "solid",
+		outlineColor: "transparent",
+		outlineOffset: "-2px",
+		transition: `outline-color ${t.durations.sm} ${t.easings.standard}`
+	},
+	allowed: { outlineColor: "_accent" },
+	denied: { outlineColor: "_danger" },
+	header: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		gap: "_sm",
+		paddingBlock: "_sm",
+		paddingInline: "_md",
+		fontWeight: "_semibold",
+		fontSize: "_sm"
+	},
+	reason: {
+		paddingInline: "_md",
+		paddingBlockEnd: "_xs",
+		color: "_dangerText",
+		fontSize: "_xs"
+	},
+	list: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_sm",
+		margin: 0,
+		paddingInline: "_sm",
+		paddingBlockEnd: "_sm",
+		listStyle: "none",
+		overflowY: "auto",
+		minHeight: "3rem"
+	},
+	card: {
+		position: "relative",
+		display: "grid",
+		gridTemplateColumns: "minmax(0, 1fr) auto",
+		alignItems: "start",
+		gap: "_xs",
+		padding: "_sm",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_border",
+		borderRadius: "_md",
+		backgroundColor: "_surfaceRaised",
+		cursor: "grab",
+		touchAction: "none",
+		transition: `translate ${t.durations.md} ${t.easings.standard}`
+	},
+	placeholder: { opacity: .4 },
+	ghost: {
+		position: "fixed",
+		zIndex: 50,
+		pointerEvents: "none",
+		cursor: "grabbing",
+		boxShadow: "_lg",
+		transition: "none",
+		rotate: "1.5deg"
+	},
+	lifted: {
+		borderColor: "_accent",
+		boxShadow: "_md"
+	},
+	handle: {
+		color: "_textMuted",
+		borderRadius: "_sm",
+		padding: "2px",
+		cursor: "grab"
+	},
+	empty: {
+		color: "_textMuted",
+		fontSize: "_xs",
+		paddingBlock: "_sm",
+		textAlign: "center"
+	},
+	indicator: {
+		height: "_borderWidths.md",
+		marginBlock: `calc(-1 * ${t.space.xs})`,
+		borderRadius: "_full",
+		backgroundColor: "_accent"
+	},
+	indicatorDenied: { backgroundColor: "_danger" }
+});
+/** KanbanBoard 的动态样式：列宽、列高、拖动的位移 */
+var kanbanBoardDynamicStyles = css.create({
+	width: (width) => ({
+		flexBasis: width,
+		flexGrow: 1,
+		minWidth: width
+	}),
+	height: (height) => ({ maxHeight: height }),
+	ghost: (left, top, width) => ({
+		left,
+		top,
+		width
+	})
+});
+/** 看板 */
+var KanbanBoard = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const columns = readonlyProp(_props, "columns");
+	const items = readonlyProp(_props, "items");
+	const getKey = readonlyProp(_props, "getKey");
+	const getColumn = readonlyProp(_props, "getColumn");
+	const getLabel = readonlyProp(_props, "getLabel");
+	const canMove = readonlyProp(_props, "canMove");
+	const onMove = readonlyProp(_props, "onMove");
+	const onReorder = readonlyProp(_props, "onReorder");
+	const onReject = readonlyProp(_props, "onReject");
+	const columnWidth = readonlyProp(_props, "columnWidth", "16rem");
+	const columnHeight = readonlyProp(_props, "columnHeight", "70vh");
+	const empty = readonlyProp(_props, "empty");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const lang = useLang();
+	const messages = useMessages("patterns", patternsMessages);
+	let board = shallowRef(null);
+	const labelOf = (item) => getLabel.value?.(item) ?? getKey.value(item);
+	const itemOf = (key) => items.value.find((item) => getKey.value(item) === key);
+	const sortable = useSortable({
+		items: () => items.value,
+		getKey: (item) => getKey.value(item),
+		getLabel: labelOf,
+		get onChange() {
+			return onReorder.value && ((next) => onReorder.value(next));
+		},
+		container: () => board.value,
+		groups: {
+			keys: () => columns.value.map((column) => column.key),
+			of: (item) => getColumn.value(item),
+			label: (key) => columns.value.find((column) => column.key === key)?.label ?? key,
+			canMove: (item, to) => canMove.value?.(item, to),
+			onMove: (item, to, index) => onMove.value(item, to, index),
+			onReject: (item, to, reason) => onReject.value?.(item, to, reason)
+		}
+	});
+	/** 整张卡片都能拖：卡片里的链接、按钮（把手除外）、输入框照常点 */
+	function onPointerdown(event, key) {
+		if (event.target.closest("a, input, select, textarea, button:not([data-handle])")) return;
+		sortable.handleProps(key).onPointerdown(event);
+	}
+	return () => {
+		const dragging = sortable.active;
+		const drop = sortable.target;
+		const ghost = sortable.ghost;
+		const ghostItem = ghost && itemOf(ghost.key);
+		const draggedItem = dragging === void 0 ? void 0 : itemOf(dragging);
+		const draggedFrom = draggedItem === void 0 ? void 0 : getColumn.value(draggedItem);
+		return createVNode("div", mergeAttrs({}, rest, { role: "group" }), [
+			createVNode(ScrollArea, { "axis": "x" }, { default: () => [createVNode("div", mergeProps({ "ref": _cache[0] || (_cache[0] = (element) => board.value = element instanceof HTMLElement ? element : null) }, css.attrs(kanbanBoardStyles.board)), [columns.value.map((column) => {
+				const cards = items.value.filter((item) => getColumn.value(item) === column.key);
+				const over = drop && draggedFrom !== column.key && drop.group === column.key;
+				const reason = over ? drop.reason : null;
+				const headingId = `${sortable.instructionsId}-${column.key}`;
+				const indicator = createVNode("li", mergeProps({
+					"key": "drop-indicator",
+					"aria-hidden": "true"
+				}, css.attrs(kanbanBoardStyles.indicator, reason != null && kanbanBoardStyles.indicatorDenied)), null);
+				return createVNode("section", mergeProps({
+					"key": column.key,
+					"aria-labelledby": headingId
+				}, sortable.groupProps(column.key), css.attrs(kanbanBoardStyles.column, css.bind(kanbanBoardDynamicStyles.width, () => [columnWidth.value], true), over && (reason ? kanbanBoardStyles.denied : kanbanBoardStyles.allowed))), [
+					createVNode("div", css.attrs(kanbanBoardStyles.header), [createVNode("span", { "id": headingId }, [column.label]), createVNode(Badge, {
+						"radius": "full",
+						"tone": cards.length > 0 ? column.tone ?? "neutral" : "neutral"
+					}, { default: () => [cards.length] })]),
+					reason && createVNode("div", css.attrs(kanbanBoardStyles.reason), [reason]),
+					createVNode("ul", css.attrs(kanbanBoardStyles.list, css.bind(kanbanBoardDynamicStyles.height, () => [columnHeight.value], true)), [
+						cards.length === 0 && !over && createVNode("li", css.attrs(kanbanBoardStyles.empty), [empty.value ?? messages.kanbanEmpty]),
+						cards.flatMap((item, index) => {
+							const key = getKey.value(item);
+							const active = dragging === key;
+							const { onPointerdown: _, ...handle } = sortable.handleProps(key);
+							const card = createVNode("li", mergeProps({ "key": key }, sortable.itemProps(key), css.attrs(kanbanBoardStyles.card, active && ghost && kanbanBoardStyles.placeholder, active && !ghost && kanbanBoardStyles.lifted), {
+								"data-state": active ? "dragging" : void 0,
+								"onPointerdown": (event) => onPointerdown(event, key)
+							}), [createVNode("div", null, [children.value(item, { dragging: active })]), createVNode(ButtonBase, mergeProps(handle, {
+								"data-handle": "",
+								"sx": kanbanBoardStyles.handle,
+								"aria-label": lang.sortableHandle(labelOf(item))
+							}), {
+								default: () => [createVNode(Icon, { "icon": GripVertical }, null)],
+								$stable: true
+							})]);
+							return over && drop.index === index ? [indicator, card] : [card];
+						}),
+						over && drop.index >= cards.length && indicator
+					])
+				]);
+			})])] }),
+			ghost && ghostItem !== void 0 && createVNode("div", mergeProps({ "aria-hidden": "true" }, css.attrs(kanbanBoardStyles.card, kanbanBoardStyles.ghost, css.bind(kanbanBoardDynamicStyles.ghost, () => [
+				ghost.left,
+				ghost.top,
+				ghost.width
+			]))), [createVNode("div", null, [children.value(ghostItem, { dragging: true })])]),
+			createVNode(VisuallyHidden, {
+				"id": sortable.instructionsId,
+				"key": "__site0"
+			}, {
+				default: () => [messages.kanbanInstructions],
+				$stable: true
+			}),
+			createVNode(VisuallyHidden, {
+				"aria-live": "assertive",
+				"key": "__site1"
+			}, {
+				default: () => [sortable.announcement],
+				$stable: true
+			})
+		]);
+	};
+}, {
+	name: "KanbanBoard",
+	props: [
+		"columns",
+		"items",
+		"getKey",
+		"getColumn",
+		"getLabel",
+		"canMove",
+		"onMove",
+		"onReorder",
+		"onReject",
+		"columnWidth",
+		"columnHeight",
+		"empty"
+	]
+});
+//#endregion
+export { KanbanBoard, kanbanBoardDynamicStyles, kanbanBoardStyles };
+
+//# sourceMappingURL=KanbanBoard.js.map

package/dist/patterns/KanbanBoard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanBoard.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/patterns/KanbanBoard.tsx"],"sourcesContent":["/**\n * 看板：一列一个状态（或阶段、负责人），卡片在列之间移动。任务看板、招聘流程、工单。\n *\n *   <KanbanBoard\n *     aria-label=\"任务看板\"\n *     columns={[{ key: 'designing', label: '设计中' }, { key: 'verifying', label: '测试中' }]}\n *     items={tasks}\n *     getKey={(task) => task.code}\n *     getColumn={(task) => task.status}\n *     getLabel={(task) => task.name}\n *     canMove={(task, to) => (to === next(task.status) ? null : '只能拖到下一列')}\n *     onMove={(task, to) => openProcessDialog(task, to)}\n *   >\n *     {(task) => <TaskCard task={task} />}\n *   </KanbanBoard>\n *\n * 数据由使用方控制：看板不自己挪卡片，只在放下时报告 onMove（使用方处理完、刷新数据，卡片才换列）。\n * canMove 返回不能移动的原因（null 是可以）：拖动时经过的列按它高亮（可以放的是强调色，不能放的标红并写出原因），\n * 落点处画一条插入线；放在不能放的列上时卡片弹回、读屏播报原因，并报告 onReject。\n * 给了 onReorder 时列内也能排序（数据立即重排，写回整个数组）。\n *\n * 拖动、键盘、读屏播报、自动滚动建在 useSortable 的分组上（utils/dom/sortable.ts）：\n * - 指针：在卡片上按下拖动超过 3px 开始（点在卡片里的链接、按钮上不算），影子卡跟着指针走，原位留着变淡的占位；\n * - 键盘：每张卡片有把手按钮，空格 / Enter 拿起，← / → 换列（从右到左排版下镜像），↑ / ↓ 调整位置，\n *   空格 / Enter 放下，Esc 取消；每一步都有读屏播报（aria-live）。\n * 列多时整块横向滚动（ScrollArea），每列里的卡片多时列自己竖向滚动。\n */\nimport { GripVertical } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Badge } from '../base/Badge';\nimport { useMessages } from '../config/lang/messages';\nimport { patternsMessages } from './messages';\nimport { ButtonBase } from '../base/ButtonBase';\nimport { Icon } from '../base/Icon';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { ScrollArea } from '../layout/ScrollArea';\nimport { useSortable } from '../utils/dom/sortable';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport { t } from '../config/theme/tokens';\n\n/** 看板的一列 */\nexport interface KanbanColumn {\n  /** 列的标识：getColumn 返回它 */\n  key: string;\n  /** 列名 */\n  label: string;\n  /** 列名旁计数的色调（超时、异常这类要注意的列） */\n  tone?: StatusTone;\n}\n\n/** 卡片的渲染状态 */\nexport interface KanbanCardState {\n  /** 正在被拖动或被键盘拿起 */\n  dragging: boolean;\n}\n\n/** 未声明的属性落到外层 div 上；aria-label 是看板的名称 */\nexport interface KanbanBoardProps<T> extends PartProps<'div'> {\n  /** 各列：从起始边排 */\n  columns: readonly KanbanColumn[];\n  /** 全部卡片的数据 */\n  items: readonly T[];\n  /** 卡片的标识 */\n  getKey: (item: T) => string;\n  /** 卡片在哪一列 */\n  getColumn: (item: T) => string;\n  /** 卡片的名称：把手的名称、读屏播报；默认是 key */\n  getLabel?: (item: T) => string;\n  /** 能不能移到 to 列：返回不能的原因，null、undefined 是可以 */\n  canMove?: (item: T, to: string) => string | null | undefined;\n  /** 放到了可以放的列：使用方处理（打开处理的对话框、调接口），完成后刷新数据；index 是在目标列里的位置 */\n  onMove: (item: T, to: string, index: number) => void;\n  /** 列内排序：写回新的数组（所有列的卡片）；不给时列内不能排序 */\n  onReorder?: (items: T[]) => void;\n  /** 放到了不能放的列：卡片已经弹回，可以在这里提示原因 */\n  onReject?: (item: T, to: string, reason: string) => void;\n  /**\n   * 每列至少多宽（CSS 长度）：放得下时各列平分整行，放不下时横向滚动\n   * @default '16rem'\n   */\n  columnWidth?: string;\n  /**\n   * 每列的最大高度（CSS 长度）：卡片多时列里竖向滚动\n   * @default '70vh'\n   */\n  columnHeight?: string;\n  /** 一列没有卡片时显示的内容，默认“没有” */\n  empty?: VNodeChild;\n  /** 卡片的内容 */\n  children: (item: T, state: KanbanCardState) => VNodeChild;\n}\n\n/** KanbanBoard 的样式：board、column、header、list、card、handle… */\nexport const kanbanBoardStyles = css.create({\n  board: { display: 'flex', gap: '_md', alignItems: 'flex-start', paddingBlockEnd: '_sm' },\n  column: {\n    display: 'flex',\n    flexDirection: 'column',\n    flexShrink: 0,\n    borderRadius: '_lg',\n    backgroundColor: '_surfaceMuted',\n    outlineWidth: '_borderWidths.sm',\n    outlineStyle: 'solid',\n    outlineColor: 'transparent',\n    outlineOffset: '-2px',\n    transition: `outline-color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  allowed: { outlineColor: '_accent' },\n  denied: { outlineColor: '_danger' },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: '_sm',\n    paddingBlock: '_sm',\n    paddingInline: '_md',\n    fontWeight: '_semibold',\n    fontSize: '_sm',\n  },\n  reason: { paddingInline: '_md', paddingBlockEnd: '_xs', color: '_dangerText', fontSize: '_xs' },\n  list: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_sm',\n    margin: 0,\n    paddingInline: '_sm',\n    paddingBlockEnd: '_sm',\n    listStyle: 'none',\n    overflowY: 'auto',\n    minHeight: '3rem',\n  },\n  card: {\n    position: 'relative',\n    display: 'grid',\n    gridTemplateColumns: 'minmax(0, 1fr) auto',\n    alignItems: 'start',\n    gap: '_xs',\n    padding: '_sm',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_md',\n    backgroundColor: '_surfaceRaised',\n    cursor: 'grab',\n    touchAction: 'none',\n    transition: `translate ${t.durations.md} ${t.easings.standard}`,\n  },\n  // 指针拖动中：原位的卡片变淡，跟着指针走的是影子卡（画在滚动区域外面，不被列裁掉）\n  placeholder: { opacity: 0.4 },\n  ghost: {\n    position: 'fixed',\n    zIndex: 50,\n    pointerEvents: 'none',\n    cursor: 'grabbing',\n    boxShadow: '_lg',\n    transition: 'none',\n    rotate: '1.5deg',\n  },\n  // 键盘拿起：高亮边框\n  lifted: { borderColor: '_accent', boxShadow: '_md' },\n  handle: { color: '_textMuted', borderRadius: '_sm', padding: '2px', cursor: 'grab' },\n  empty: { color: '_textMuted', fontSize: '_xs', paddingBlock: '_sm', textAlign: 'center' },\n  // 拖到别的列时的落点：卡片之间的一条线\n  indicator: {\n    height: '_borderWidths.md',\n    marginBlock: `calc(-1 * ${t.space.xs})`,\n    borderRadius: '_full',\n    backgroundColor: '_accent',\n  },\n  indicatorDenied: { backgroundColor: '_danger' },\n});\n\n/** KanbanBoard 的动态样式：列宽、列高、拖动的位移 */\nexport const kanbanBoardDynamicStyles = css.create({\n  // 至少这么宽，富余的空间各列平分（同 Jira 的看板），放不下时外层横向滚动\n  width: (width: string) => ({ flexBasis: width, flexGrow: 1, minWidth: width }),\n  height: (height: string) => ({ maxHeight: height }),\n  ghost: (left: number, top: number, width: number) => ({ left, top, width }),\n});\n\n/** 看板 */\nexport const KanbanBoard = _component(\n  <T,>({\n    columns,\n    items,\n    getKey,\n    getColumn,\n    getLabel,\n    canMove,\n    onMove,\n    onReorder,\n    onReject,\n    columnWidth = '16rem',\n    columnHeight = '70vh',\n    empty,\n    children,\n    ...rest\n  }: KanbanBoardProps<T>) => {\n    const lang = useLang();\n    const messages = useMessages('patterns', patternsMessages);\n    let board = _state.raw<HTMLElement | null>(null);\n    const labelOf = (item: T) => getLabel?.(item) ?? getKey(item);\n    const itemOf = (key: string) => items.find((item) => getKey(item) === key);\n    const sortable = useSortable({\n      items: () => items,\n      getKey: (item) => getKey(item),\n      getLabel: labelOf,\n      // 用时再读属性：写没写 onReorder 决定了列内能不能排序，父级后来才给也要跟上\n      get onChange() {\n        return onReorder && ((next: T[]) => onReorder(next));\n      },\n      container: () => board,\n      groups: {\n        keys: () => columns.map((column) => column.key),\n        of: (item) => getColumn(item),\n        label: (key) => columns.find((column) => column.key === key)?.label ?? key,\n        canMove: (item, to) => canMove?.(item, to),\n        onMove: (item, to, index) => onMove(item, to, index),\n        onReject: (item, to, reason) => onReject?.(item, to, reason),\n      },\n    });\n\n    /** 整张卡片都能拖：卡片里的链接、按钮（把手除外）、输入框照常点 */\n    function onPointerdown(event: PointerEvent, key: string) {\n      const target = event.target as Element;\n      if (target.closest('a, input, select, textarea, button:not([data-handle])')) return;\n      (sortable.handleProps(key).onPointerdown as (event: PointerEvent) => void)(event);\n    }\n\n    return () => {\n      const dragging = sortable.active;\n      const drop = sortable.target;\n      const ghost = sortable.ghost;\n      const ghostItem = ghost && itemOf(ghost.key);\n      const draggedItem = dragging === undefined ? undefined : itemOf(dragging);\n      const draggedFrom = draggedItem === undefined ? undefined : getColumn(draggedItem);\n      return (\n        <div {...mergeAttrs<'div'>({}, rest, { role: 'group' })}>\n          <ScrollArea axis=\"x\">\n            <div\n              ref={(element: unknown) => (board = element instanceof HTMLElement ? element : null)}\n              {...css.attrs(kanbanBoardStyles.board)}\n            >\n              {columns.map((column) => {\n                const cards = items.filter((item) => getColumn(item) === column.key);\n                // 拖到了别的列：高亮这一列，在落点画线\n                const over = drop && draggedFrom !== column.key && drop.group === column.key;\n                const reason = over ? drop.reason : null;\n                const headingId = `${sortable.instructionsId}-${column.key}`;\n                const indicator = (\n                  <li\n                    key=\"drop-indicator\"\n                    aria-hidden=\"true\"\n                    {...css.attrs(\n                      kanbanBoardStyles.indicator,\n                      reason != null && kanbanBoardStyles.indicatorDenied,\n                    )}\n                  />\n                );\n                return (\n                  <section\n                    key={column.key}\n                    aria-labelledby={headingId}\n                    {...sortable.groupProps(column.key)}\n                    {...css.attrs(\n                      kanbanBoardStyles.column,\n                      kanbanBoardDynamicStyles.width(columnWidth),\n                      over && (reason ? kanbanBoardStyles.denied : kanbanBoardStyles.allowed),\n                    )}\n                  >\n                    <div {...css.attrs(kanbanBoardStyles.header)}>\n                      <span id={headingId}>{column.label}</span>\n                      <Badge\n                        radius=\"full\"\n                        tone={cards.length > 0 ? (column.tone ?? 'neutral') : 'neutral'}\n                      >\n                        {cards.length}\n                      </Badge>\n                    </div>\n                    {reason && <div {...css.attrs(kanbanBoardStyles.reason)}>{reason}</div>}\n                    <ul\n                      {...css.attrs(\n                        kanbanBoardStyles.list,\n                        kanbanBoardDynamicStyles.height(columnHeight),\n                      )}\n                    >\n                      {cards.length === 0 && !over && (\n                        <li {...css.attrs(kanbanBoardStyles.empty)}>\n                          {empty ?? messages.kanbanEmpty}\n                        </li>\n                      )}\n                      {cards.flatMap((item, index) => {\n                        const key = getKey(item);\n                        const active = dragging === key;\n                        const { onPointerdown: _, ...handle } = sortable.handleProps(key);\n                        const card = (\n                          <li\n                            key={key}\n                            {...sortable.itemProps(key)}\n                            {...css.attrs(\n                              kanbanBoardStyles.card,\n                              active && ghost && kanbanBoardStyles.placeholder,\n                              active && !ghost && kanbanBoardStyles.lifted,\n                            )}\n                            data-state={active ? 'dragging' : undefined}\n                            onPointerdown={(event: PointerEvent) => onPointerdown(event, key)}\n                          >\n                            <div>{children(item, { dragging: active })}</div>\n                            <ButtonBase\n                              {...handle}\n                              data-handle=\"\"\n                              sx={kanbanBoardStyles.handle}\n                              aria-label={lang.sortableHandle(labelOf(item))}\n                            >\n                              <Icon icon={GripVertical} />\n                            </ButtonBase>\n                          </li>\n                        );\n                        return over && drop.index === index ? [indicator, card] : [card];\n                      })}\n                      {over && drop.index >= cards.length && indicator}\n                    </ul>\n                  </section>\n                );\n              })}\n            </div>\n          </ScrollArea>\n          {ghost && ghostItem !== undefined && (\n            <div\n              aria-hidden=\"true\"\n              {...css.attrs(\n                kanbanBoardStyles.card,\n                kanbanBoardStyles.ghost,\n                kanbanBoardDynamicStyles.ghost(ghost.left, ghost.top, ghost.width),\n              )}\n            >\n              <div>{children(ghostItem, { dragging: true })}</div>\n            </div>\n          )}\n          <VisuallyHidden id={sortable.instructionsId}>\n            {messages.kanbanInstructions}\n          </VisuallyHidden>\n          <VisuallyHidden aria-live=\"assertive\">{sortable.announcement}</VisuallyHidden>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/patterns/NotificationCenter.d.ts

@@ -0,0 +1,110 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type ButtonProps } from '../base/Button';
+import { type IconButtonProps } from '../base/IconButton';
+import { type SwitchProps } from '../input/Switch';
+import { type ToggleGroupBaseProps } from '../input/ToggleGroup';
+import { type PopoverProps } from '../overlay/Popover';
+import { type PartProps } from '../utils/props';
+import type { StatusTone } from '../utils/style/tone-styles';
+/** 一条通知 */
+export interface NotificationItem {
+    /** 标识 */
+    id: string;
+    /** 标题：一句话说清发生了什么 */
+    title: string;
+    /** 补充说明（谁、哪张单） */
+    description?: string;
+    /** 发生的时间（ISO） */
+    time: string;
+    /** 类型：按 types 筛选 */
+    type?: string;
+    /** 读过了 */
+    read: boolean;
+    /** 点了去哪儿 */
+    href?: string;
+    /** 未读色点的色调，默认 accent；超时、被退回用 danger、warning */
+    tone?: StatusTone;
+}
+/** 通知的一种类型（筛选按钮） */
+export interface NotificationType {
+    /** 类型：对应 NotificationItem.type */
+    key: string;
+    /** 名称 */
+    label: string;
+}
+/** 通知列表的内容与回调：NotificationList 与 NotificationCenter 共用 */
+export interface NotificationListOptions {
+    /** 通知：新的在前（组件不排序） */
+    items: readonly NotificationItem[];
+    /** 类型：写了时列表上方有按类型筛选的按钮 */
+    types?: readonly NotificationType[];
+    /** 这些通知读过了：点了一条、全部标为已读 */
+    onRead?: (ids: string[]) => void;
+    /** 点了一条（标为已读之后）；有 href 时还会去那里 */
+    onItemClick?: (item: NotificationItem) => void;
+    /** 列表下面的内容（“查看全部”） */
+    footer?: VNodeChild;
+    /** 没有通知时显示的内容，默认是“没有通知” */
+    empty?: VNodeChild;
+    /** 相对时间以哪个时刻为现在（毫秒时间戳），默认此刻；演示数据固定日期时传 */
+    now?: number;
+}
+/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */
+export interface NotificationListProps extends PartProps<'div', 'title'>, NotificationListOptions {
+    /** 标题，默认“通知”；false 不要标题行（“全部标为已读”挪到筛选那一行） */
+    title?: VNodeChild | false;
+    /** 标题行的部件属性 */
+    propsHead?: PartProps<'div'>;
+    /** “全部标为已读”按钮的部件属性 */
+    propsMarkAll?: Partial<ButtonProps>;
+    /** 筛选行的部件属性 */
+    propsFilters?: PartProps<'div'>;
+    /** 类型筛选按钮组的部件属性 */
+    propsTypes?: Partial<ToggleGroupBaseProps>;
+    /** “只看未读”开关的部件属性 */
+    propsUnreadOnly?: Partial<SwitchProps>;
+    /** 列表（ul）的部件属性 */
+    propsList?: PartProps<'ul'>;
+    /** 每一条（a）的部件属性，可以按条计算 */
+    propsItem?: PartProps<'a'> | ((item: NotificationItem) => PartProps<'a'>);
+    /** 列表为空时那一块的部件属性 */
+    propsEmpty?: PartProps<'div'>;
+    /** 列表下面那一行的部件属性 */
+    propsFooter?: PartProps<'div'>;
+}
+/** NotificationList 的样式：root、head、title、filters、list、item、dot… */
+export declare const notificationListStyles: Readonly<{
+    body: css.CompiledStyles;
+    dot: css.CompiledStyles;
+    empty: css.CompiledStyles;
+    end: css.CompiledStyles;
+    filters: css.CompiledStyles;
+    foot: css.CompiledStyles;
+    head: css.CompiledStyles;
+    item: css.CompiledStyles;
+    itemTitle: css.CompiledStyles;
+    itemTitleUnread: css.CompiledStyles;
+    list: css.CompiledStyles;
+    muted: css.CompiledStyles;
+    root: css.CompiledStyles;
+    time: css.CompiledStyles;
+    title: css.CompiledStyles;
+    types: css.CompiledStyles;
+}>;
+/** 通知列表：标题行、筛选、通知（新的在前）、底部；直接放在页面、抽屉里，或由 NotificationCenter 放进弹出层 */
+export declare const NotificationList: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<NotificationListProps>;
+/** 未声明的属性落到弹出层的面板上 */
+export interface NotificationCenterProps extends Omit<PopoverProps, 'trigger' | 'children'>, NotificationListOptions {
+    /** 铃铛按钮的部件属性 */
+    propsTrigger?: Partial<IconButtonProps>;
+    /** 面板里的通知列表的部件属性 */
+    propsNotificationList?: Partial<NotificationListProps>;
+}
+/** NotificationCenter 的样式：panel（弹出层的宽度）、list（列表的最大高度） */
+export declare const notificationCenterStyles: Readonly<{
+    list: css.CompiledStyles;
+    panel: css.CompiledStyles;
+}>;
+/** 通知中心：顶栏的铃铛（带未读数），点开是 NotificationList；点了一条就收起 */
+export declare const NotificationCenter: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<NotificationCenterProps>;