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

package/dist/input/ToggleGroup.js

@@ -0,0 +1,211 @@
+import { defaultLabelledBy, mergeAttrs } from "../utils/props.js";
+import { buttonContent, buttonPart, buttonSx, useButtonAppearance, useButtonBehavior } from "../base/button-core.js";
+import { selectedValues, toggleSelection } from "../utils/data/selection.js";
+import { useFieldControl } from "../form/Field.js";
+import { rovingFocus } from "../utils/dom/roving-focus.js";
+import { useActiveIndicator } from "../utils/motion/active-indicator.js";
+import { ToolbarContext } from "../navigation/Toolbar.js";
+import { computed, createVNode, mergeProps, shallowRef } from "vue";
+import { _component, bindable, childrenProp, createContext, effect, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/input/ToggleGroup.tsx
+/** ToggleGroup 交给组内 ToggleGroupItem 的状态 */
+/** ToggleGroup 的上下文：自定义的项可以 inject 它接入组 */
+var ToggleGroupContext = createContext("ToggleGroup");
+/** 方向 */
+/** 角色由组件管理（role="group" 不允许 aria-orientation，方向只写在 data-orientation 上） */
+/** 两种选择方式共有的选项；未声明的属性落到 role="group" 的 div 上，aria-label 是这组的名称 */
+/** 单选或多选 */
+/** ToggleGroup 的样式：root、vertical、indicator */
+var toggleGroupStyles = css.create({
+	root: {
+		position: "relative",
+		isolation: "isolate",
+		display: "inline-flex",
+		width: "fit-content",
+		gap: "_xs",
+		padding: "_xs",
+		borderRadius: "_md",
+		backgroundColor: "_fill"
+	},
+	vertical: { flexDirection: "column" },
+	readonlyItem: {
+		cursor: "default",
+		backgroundColor: "transparent"
+	},
+	indicator: {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		zIndex: -1,
+		boxSizing: "border-box",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_accentBorder",
+		borderRadius: "_sm",
+		backgroundColor: "_accentSoft",
+		pointerEvents: "none"
+	}
+});
+/** 切换按钮组：单选或多选，整组一个 Tab 位置 */
+var ToggleGroup = /*#__PURE__*/ _component((_props, _ctx) => {
+	const selectionMode = readonlyProp(_props, "selectionMode", "single");
+	const value = bindable(_props, "_value", () => null, _ctx.emit);
+	const required = readonlyProp(_props, "required");
+	const disabled = readonlyProp(_props, "disabled");
+	const readonly = readonlyProp(_props, "readonly");
+	const orientation = readonlyProp(_props, "orientation", "horizontal");
+	const size = readonlyProp(_props, "size");
+	const ripple = readonlyProp(_props, "ripple");
+	const propsIndicator = readonlyProp(_props, "propsIndicator");
+	const children = childrenProp(_props);
+	const id = readonlyProp(_props, "id");
+	const rest = restProps(_props, _ctx, false);
+	const control = useFieldControl(() => ({
+		id: id.value,
+		disabled: disabled.value,
+		readonly: readonly.value,
+		required: required.value
+	}));
+	let root = shallowRef(null);
+	const inToolbar = ToolbarContext.inject(null) != null;
+	effect(() => root.value && !inToolbar ? rovingFocus(root.value, {
+		items: "button",
+		orientation: orientation.value,
+		loop: true
+	}) : void 0);
+	const selected = computed(() => selectedValues(value.value));
+	let indicator = shallowRef(null);
+	useActiveIndicator(() => ({
+		container: root.value,
+		indicator: indicator.value,
+		active: "[aria-pressed=\"true\"]",
+		axis: "both",
+		value: selected.value[0]
+	}));
+	ToggleGroupContext.provide({
+		get selected() {
+			return selected.value;
+		},
+		get size() {
+			return size.value;
+		},
+		get disabled() {
+			return control().disabled;
+		},
+		get readonly() {
+			return control().readonly;
+		},
+		get ripple() {
+			return ripple.value;
+		},
+		get sliding() {
+			return selectionMode.value === "single";
+		},
+		toggle(item) {
+			if (control().readonly) return;
+			const next = toggleSelection(selected.value, item, {
+				mode: selectionMode.value,
+				required: control().required
+			});
+			if (next === selected.value) return;
+			value.value = selectionMode.value === "multiple" ? [...next] : next[0] ?? null;
+		}
+	});
+	return () => {
+		const field = control();
+		return createVNode("div", mergeProps(mergeAttrs({ sx: [toggleGroupStyles.root, orientation.value === "vertical" && toggleGroupStyles.vertical] }, rest, {
+			ref: root,
+			id: field.id,
+			role: "group",
+			"aria-labelledby": defaultLabelledBy(rest, field.labelledBy),
+			"aria-describedby": field.describedBy
+		}), {
+			"data-orientation": orientation.value,
+			"data-disabled": field.disabled || void 0,
+			"data-readonly": field.readonly || void 0
+		}), [selectionMode.value === "single" && selected.value.length > 0 && createVNode("span", mergeAttrs({ sx: toggleGroupStyles.indicator }, propsIndicator.value, {
+			ref: indicator,
+			"aria-hidden": true
+		}), null), children.value]);
+	};
+}, {
+	name: "ToggleGroup",
+	props: [
+		"selectionMode",
+		"_value",
+		"onUpdate:_value",
+		"required",
+		"disabled",
+		"readonly",
+		"orientation",
+		"size",
+		"ripple",
+		"propsIndicator",
+		"id"
+	]
+});
+/** 选中、不可用由组件管理 */
+/** 未声明的属性落到 button 上；只有图标时写 aria-label */
+/** 切换按钮组里的一项（button，aria-pressed 表示是否选中） */
+var ToggleItem = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const value = readonlyProp(_props2, "value");
+	const icon = readonlyProp(_props2, "icon");
+	const disabled = readonlyProp(_props2, "disabled", false);
+	const radius = readonlyProp(_props2, "radius");
+	const propsIcon = readonlyProp(_props2, "propsIcon");
+	const propsContent = readonlyProp(_props2, "propsContent");
+	const children = childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	const group = ToggleGroupContext.inject();
+	const behavior = useButtonBehavior(() => ({
+		disabled: disabled.value || group.disabled,
+		loading: false,
+		ripple: group.readonly ? false : group.ripple
+	}), () => () => group.toggle(value.value));
+	const appearance = useButtonAppearance(() => ({
+		variant: void 0,
+		tone: "neutral",
+		size: group.size,
+		radius: radius.value ?? "sm"
+	}), "ghost");
+	return () => {
+		const pressed = group.selected.includes(value.value);
+		const off = disabled.value || group.disabled;
+		const base = appearance();
+		return createVNode("button", mergeProps(mergeAttrs({
+			...buttonPart,
+			sx: [buttonSx({
+				...base,
+				variant: pressed && !group.sliding ? "surface" : "ghost",
+				tone: pressed ? "accent" : "neutral"
+			}, {
+				disabled: off,
+				square: children.value == null
+			}), group.readonly && !pressed && toggleGroupStyles.readonlyItem]
+		}, rest, {
+			type: "button",
+			"aria-pressed": pressed,
+			...behavior()
+		}), { "data-state": pressed ? "on" : "off" }), [buttonContent({
+			icon: icon.value,
+			propsIcon: propsIcon.value,
+			propsContent: propsContent.value,
+			children: children.value
+		}, { loading: false })]);
+	};
+}, {
+	name: "ToggleItem",
+	props: [
+		"value",
+		"icon",
+		"disabled",
+		"radius",
+		"propsIcon",
+		"propsContent"
+	]
+});
+//#endregion
+export { ToggleGroup, ToggleGroupContext, ToggleItem, toggleGroupStyles };
+
+//# sourceMappingURL=ToggleGroup.js.map

package/dist/input/ToggleGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/input/ToggleGroup.tsx"],"sourcesContent":["/**\n * 切换按钮组，复合组件：ToggleGroup（role=\"group\"）> ToggleItem（带 aria-pressed 的 button）。\n * 单选像分段控件（视图切换、对齐方式），多选像格式按钮（加粗、斜体）。整组一个 Tab 位置，组内方向键移动（漫游焦点）。\n * 参考 Radix ToggleGroup、Ark UI SegmentGroup。\n *\n *   <ToggleGroup _value={view} aria-label=\"视图\" required>\n *     <ToggleItem value=\"list\" icon={List} aria-label=\"列表\" />\n *     <ToggleItem value=\"grid\" icon={LayoutGrid} aria-label=\"网格\" />\n *   </ToggleGroup>\n *   <ToggleGroup selectionMode=\"multiple\" _value={marks} aria-label=\"格式\">…</ToggleGroup>\n */\nimport { createContext, _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 {\n  buttonContent,\n  buttonPart,\n  buttonSx,\n  useButtonAppearance,\n  useButtonBehavior,\n  type ButtonOptions,\n} from '../base/button-core';\nimport type { IconData, IconProps } from '../base/Icon';\nimport { useActiveIndicator } from '../utils/motion/active-indicator';\nimport { defaultLabelledBy, mergeAttrs, type PartProps } from '../utils/props';\nimport { rovingFocus } from '../utils/dom/roving-focus';\nimport { ToolbarContext } from '../navigation/Toolbar';\nimport { selectedValues, toggleSelection, type SelectionProps } from '../utils/data/selection';\nimport { useFieldControl } from '../form/Field';\nimport type { TextSize } from '../utils/style/typography';\n\n/** ToggleGroup 交给组内 ToggleGroupItem 的状态 */\nexport interface ToggleGroupState {\n  /** 按下（选中）的项的值 */\n  readonly selected: readonly string[];\n  /** 字号档位；不写时继承 */\n  readonly size: TextSize | undefined;\n  /** 整组不可用 */\n  readonly disabled: boolean;\n  /** 整组只读：按钮照常显示与聚焦，点了不切换 */\n  readonly readonly: boolean;\n  /** 波纹；不写时沿用配置 */\n  readonly ripple: boolean | undefined;\n  /** 单选：选中底色由组里的滑块（Indicator）画，项本身不画底色 */\n  readonly sliding: boolean;\n  /** 切换一项（单选、多选的规则由组决定） */\n  toggle(value: string): void;\n}\n\n/** ToggleGroup 的上下文：自定义的项可以 inject 它接入组 */\nexport const ToggleGroupContext = createContext<ToggleGroupState>('ToggleGroup');\n\n/** 方向 */\nexport interface ToggleGroupOrientations {\n  /** 横排（默认），左右键移动 */\n  horizontal: unknown;\n  /** 竖排，上下键移动 */\n  vertical: unknown;\n}\n\n/** 角色由组件管理（role=\"group\" 不允许 aria-orientation，方向只写在 data-orientation 上） */\nexport type ToggleGroupManaged = 'role';\n\n/** 两种选择方式共有的选项；未声明的属性落到 role=\"group\" 的 div 上，aria-label 是这组的名称 */\nexport interface ToggleGroupBaseProps extends PartProps<'div', ToggleGroupManaged> {\n  /** 必须有选中项：最后一项不能取消（分段控件通常要求）；在必填的 Field 里默认开启 */\n  required?: boolean;\n  /** 整组不可用 */\n  disabled?: boolean;\n  /** 整组只读：选中项照常显示、按钮能聚焦，点了不切换（查看详情、审批时） */\n  readonly?: boolean;\n  /** 方向，默认 horizontal */\n  orientation?: keyof ToggleGroupOrientations;\n  /** 字号档位，按钮随之缩放 */\n  size?: TextSize;\n  /** 按下时的波纹；不写时沿用全局配置 */\n  ripple?: boolean;\n  /** 单选时选中项下面的滑块（切换时滑过去）的部件属性 */\n  propsIndicator?: PartProps<'span'>;\n  children?: VNodeChild;\n}\n\n/** 单选或多选 */\nexport type ToggleGroupProps = ToggleGroupBaseProps & SelectionProps;\n\n/** ToggleGroup 的样式：root、vertical、indicator */\nexport const toggleGroupStyles = css.create({\n  root: {\n    // 滑块按项的 offsetLeft / offsetTop 定位；isolation 让 zIndex: -1 的滑块压在项下、组的底色之上\n    position: 'relative',\n    isolation: 'isolate',\n    display: 'inline-flex',\n    // 放在竖排的弹性容器里（Field 的控件列）时不被拉满整行\n    width: 'fit-content',\n    gap: '_xs',\n    padding: '_xs',\n    borderRadius: '_md',\n    backgroundColor: '_fill',\n  },\n  vertical: { flexDirection: 'column' },\n  // 只读、没选中的项：不像能点（悬停也不出底色）\n  readonlyItem: { cursor: 'default', backgroundColor: 'transparent' },\n  // 同按钮的 surface 外观；位置与宽高由脚本写（useActiveIndicator）\n  indicator: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    zIndex: -1,\n    boxSizing: 'border-box',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_accentBorder',\n    borderRadius: '_sm',\n    backgroundColor: '_accentSoft',\n    pointerEvents: 'none',\n  },\n});\n\n/** 切换按钮组：单选或多选，整组一个 Tab 位置 */\nexport const ToggleGroup = _component(\n  ({\n    selectionMode = 'single',\n    _value: value = _bindable<string | string[] | null>(null),\n    required,\n    disabled,\n    readonly,\n    orientation = 'horizontal',\n    size,\n    ripple,\n    propsIndicator,\n    children,\n    id,\n    ...rest\n  }: ToggleGroupProps) => {\n    // 在 Field 里时：标签作为组的名称、关联说明与错误、沿用不可用与只读\n    const control = useFieldControl(() => ({ id, disabled, readonly, required }));\n    let root = _state.raw<HTMLElement | null>(null);\n    // 在工具栏里时焦点交给工具栏：整栏一个 Tab 位置，方向键跨过组内外的按钮（WAI-ARIA Toolbar 模式）\n    const inToolbar = ToolbarContext.inject(null) != null;\n    _effect(() =>\n      root && !inToolbar\n        ? rovingFocus(root, { items: 'button', orientation, loop: true })\n        : undefined,\n    );\n    const selected = _derived(selectedValues(value));\n    let indicator = _state.raw<HTMLElement | null>(null);\n    useActiveIndicator(() => ({\n      container: root,\n      indicator,\n      active: '[aria-pressed=\"true\"]',\n      axis: 'both',\n      value: selected[0],\n    }));\n\n    ToggleGroupContext.provide({\n      get selected() {\n        return selected;\n      },\n      get size() {\n        return size;\n      },\n      get disabled() {\n        return control().disabled;\n      },\n      get readonly() {\n        return control().readonly;\n      },\n      get ripple() {\n        return ripple;\n      },\n      get sliding() {\n        return selectionMode === 'single';\n      },\n      toggle(item) {\n        if (control().readonly) return;\n        const next = toggleSelection(selected, item, {\n          mode: selectionMode,\n          required: control().required,\n        });\n        if (next === selected) return;\n        value = selectionMode === 'multiple' ? [...next] : (next[0] ?? null);\n      },\n    });\n\n    return () => {\n      const field = control();\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                toggleGroupStyles.root,\n                orientation === 'vertical' && toggleGroupStyles.vertical,\n              ],\n            },\n            rest,\n            {\n              ref: _toRef(root),\n              id: field.id,\n              role: 'group',\n              'aria-labelledby': defaultLabelledBy(rest, field.labelledBy),\n              'aria-describedby': field.describedBy,\n            },\n          )}\n          data-orientation={orientation}\n          data-disabled={field.disabled || undefined}\n          data-readonly={field.readonly || undefined}\n        >\n          {selectionMode === 'single' && selected.length > 0 && (\n            <span\n              {...mergeAttrs<'span'>({ sx: toggleGroupStyles.indicator }, propsIndicator, {\n                ref: _toRef(indicator),\n                'aria-hidden': true,\n              })}\n            />\n          )}\n          {children}\n        </div>\n      );\n    };\n  },\n);\n\n/** 选中、不可用由组件管理 */\nexport type ToggleGroupItemManaged = 'aria-pressed' | 'disabled' | 'type';\n\n/** 未声明的属性落到 button 上；只有图标时写 aria-label */\nexport interface ToggleItemProps\n  extends PartProps<'button', ToggleGroupItemManaged>, Pick<ButtonOptions, 'radius'> {\n  /** 这一项的值 */\n  value: string;\n  /** 图标 */\n  icon?: IconData;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 内容层的部件属性 */\n  propsContent?: PartProps<'span'>;\n  children?: VNodeChild;\n}\n\n/** 切换按钮组里的一项（button，aria-pressed 表示是否选中） */\nexport const ToggleItem = _component(\n  ({\n    value,\n    icon,\n    disabled = false,\n    radius,\n    propsIcon,\n    propsContent,\n    children,\n    ...rest\n  }: ToggleItemProps) => {\n    const group = ToggleGroupContext.inject();\n    // 与 Button 同一套行为：不可用、拦截点击、波纹、状态 data 属性；只读时不出波纹\n    const behavior = useButtonBehavior(\n      () => ({\n        disabled: disabled || group.disabled,\n        loading: false,\n        ripple: group.readonly ? false : group.ripple,\n      }),\n      () => () => group.toggle(value),\n    );\n    // 选中的是浅色底，其余是幽灵按钮；尺寸跟随组\n    const appearance = useButtonAppearance(\n      () => ({ variant: undefined, tone: 'neutral', size: group.size, radius: radius ?? 'sm' }),\n      'ghost',\n    );\n\n    return () => {\n      const pressed = group.selected.includes(value);\n      const off = disabled || group.disabled;\n      const base = appearance();\n      return (\n        <button\n          {...mergeAttrs<'button'>(\n            {\n              ...buttonPart,\n              sx: [\n                buttonSx(\n                  {\n                    ...base,\n                    // 单选时选中底色由组的滑块画\n                    variant: pressed && !group.sliding ? 'surface' : 'ghost',\n                    tone: pressed ? 'accent' : 'neutral',\n                  },\n                  { disabled: off, square: children == null },\n                ),\n                group.readonly && !pressed && toggleGroupStyles.readonlyItem,\n              ],\n            },\n            rest,\n            {\n              type: 'button',\n              'aria-pressed': pressed,\n              // 使用方的 onClick 先执行，preventDefault 可以拦下切换（mergeProps 的规则）\n              ...behavior(),\n            },\n          )}\n          data-state={pressed ? 'on' : 'off'}\n        >\n          {buttonContent({ icon, propsIcon, propsContent, children }, { loading: false })}\n        </button>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/Transfer.d.ts

@@ -0,0 +1,67 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type IconButtonProps } from '../base/IconButton';
+import { type TreeProps } from '../display/Tree';
+import { type PartProps } from '../utils/props';
+import { type ListboxBaseProps } from './Listbox';
+import type { MultipleSelectionProps } from '../utils/data/selection';
+import { type ListboxOption, type OptionMapping } from './list-state';
+import { type TextFieldProps } from './TextField';
+/** 两边的列表（可多选的 Listbox）的属性：propsList 用它 */
+export type TransferListProps<T> = ListboxBaseProps<T> & MultipleSelectionProps & OptionMapping<T>;
+/** Transfer 与 TreeTransfer 共有的属性；未声明的属性落到外层 div（role="group"）上 */
+export interface TransferBaseProps extends PartProps<'div', 'role'> {
+    /** 右边（已选）的值，按移过去的先后排列：父级写 _value={keys} */
+    _value?: string[];
+    /** 左右两边的标题，默认取语言包（可选、已选） */
+    titles?: readonly [string, string];
+    /** 两边带搜索框 */
+    searchable?: boolean;
+    /** 不可用：勾不了、移不了 */
+    disabled?: boolean;
+    /** 每一边的部件属性（section；列表的高度给它的 sx） */
+    propsPanel?: PartProps<'section'>;
+    /** 搜索框的部件属性 */
+    propsSearch?: Partial<TextFieldProps>;
+    /** 中间两个按钮的部件属性 */
+    propsAction?: Partial<IconButtonProps>;
+}
+/** 选项是 ListboxOption、字符串，或任意数据加 toOption */
+export type TransferProps<T = ListboxOption> = TransferBaseProps & OptionMapping<T> & {
+    /** 全部数据（两边一起）：右边显示 value 里的那些 */
+    items: readonly T[];
+    /** 搜索时怎样算匹配；默认选项文字包含输入（忽略大小写与重音，或 createUi 的 textMatcher） */
+    filter?: (item: T, query: string) => boolean;
+    /** 两边列表的部件属性 */
+    propsList?: Partial<TransferListProps<T>>;
+};
+/** 左边是一棵树的穿梭框 */
+export interface TreeTransferProps<T> extends TransferBaseProps {
+    /** 第一层的节点 */
+    items: readonly T[];
+    /** 节点的 key，整棵树里唯一 */
+    getKey: (node: T) => string;
+    /** 节点的文字 */
+    getLabel: (node: T) => string;
+    /** 子节点 */
+    getChildren: (node: T) => readonly T[] | undefined;
+    /** 左边的树的部件属性 */
+    propsTree?: Partial<TreeProps<T>>;
+    /** 右边列表的部件属性 */
+    propsList?: Partial<TransferListProps<ListboxOption>>;
+}
+/** Transfer 的样式：root、panel、header、title、search、list、actions、actionIcon */
+export declare const transferStyles: Readonly<{
+    actionIcon: css.CompiledStyles;
+    actions: css.CompiledStyles;
+    header: css.CompiledStyles;
+    list: css.CompiledStyles;
+    panel: css.CompiledStyles;
+    root: css.CompiledStyles;
+    search: css.CompiledStyles;
+    searchField: css.CompiledStyles;
+    title: css.CompiledStyles;
+}>;
+/** 穿梭框：两个可多选的列表，勾上之后移到另一边 */
+export declare const Transfer: <T>(props: TransferProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;
+/** 左边是一棵树的穿梭框：勾选叶子（父子联动）移到右边 */
+export declare const TreeTransfer: <T>(props: TreeTransferProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;