@zerodep-dev/vue-tsx-pro-mobile 0.0.0-stage → 0.4.0

package/dist/display/Collapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/display/Collapse.tsx"],"sourcesContent":["/**\n * 折叠面板：一组可展开、收起的段落（常见问题、订单详情的分组）；手风琴模式下同时只展开一个。\n *\n *   <Collapse _value={open}>\n *     <CollapseItem name=\"ship\" title=\"多久发货？\">付款后 48 小时内发货。</CollapseItem>\n *     <CollapseItem name=\"refund\" title=\"怎么退款？\">…</CollapseItem>\n *   </Collapse>\n *   <Collapse _value={current} accordion>…</Collapse>\n *\n * 展开收起的高度动画用网格行（0fr ↔ 1fr），不用量内容的高度，小程序里也一样。\n */\nimport { ChevronDown } from '@lucide/icons';\nimport { _component, createContext } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Icon } from '../base/Icon';\nimport { dividerImage, dividerLayout } from '../theme/divider';\nimport { dataAttrs, hasContent, mergeAttrs, type PartProps } from '../utils/props';\n\n/** 面板提供给各项的 */\ninterface CollapseState {\n  isOpen(name: string): boolean;\n  toggle(name: string): void;\n}\n\nconst CollapseContext = createContext<CollapseState>('Collapse');\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface CollapseProps extends Omit<PartProps<'div'>, 'onChange'> {\n  /** 展开的项；双向绑定写 `_value={x}`。手风琴模式下是一个名字（或 null），否则是名字的数组 */\n  _value?: string[] | string | null;\n  /** 手风琴：同时只展开一个 */\n  accordion?: boolean;\n  /** 展开的项变了 */\n  onChange?: (value: string[] | string | null) => void;\n  /** 各个 CollapseItem */\n  children?: VNodeChild;\n}\n\n/** Collapse 的样式：root、header、title、arrow、panel、content */\nexport const collapseStyles = css.create({\n  root: { backgroundColor: '_surface' },\n  item: {\n    // 项之间的细线（同 Cell），最后一项不画\n    backgroundImage: {\n      default: dividerImage,\n      ':last-child': 'none',\n    },\n    ...dividerLayout,\n  },\n  header: {\n    boxSizing: 'border-box',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_md',\n    width: '100%',\n    minHeight: '_control',\n    margin: 0,\n    paddingBlock: '0.7em',\n    paddingInline: '_lg',\n    borderWidth: 0,\n    backgroundColor: { default: 'transparent', ':active:not([disabled])': '_fillActive' },\n    color: { default: '_text', '[disabled]': '_textDisabled' },\n    fontFamily: 'inherit',\n    fontSize: '_md',\n    lineHeight: '1.5',\n    textAlign: 'start',\n    cursor: { default: 'pointer', '[disabled]': 'not-allowed' },\n  },\n  title: { flex: '1 1 auto', minWidth: 0, overflowWrap: 'anywhere' },\n  value: { flex: 'none', color: '_textMuted' },\n  arrow: {\n    flex: 'none',\n    color: '_textPlaceholder',\n    transform: { default: 'none', '[data-open]': 'rotate(180deg)' },\n    transitionProperty: 'transform',\n    transitionDuration: '_md',\n  },\n  panel: {\n    display: 'grid',\n    gridTemplateRows: { default: '0fr', '[data-open]': '1fr' },\n    transitionProperty: 'grid-template-rows',\n    transitionDuration: '_md',\n    transitionTimingFunction: '_standard',\n  },\n  clip: { overflow: 'hidden', minHeight: 0 },\n  content: {\n    paddingBlock: '0.25em 1em',\n    paddingInline: '_lg',\n    fontSize: '_sm',\n    lineHeight: '1.6',\n    color: '_textMuted',\n  },\n});\n\n/** 折叠面板（div > 各项） */\nexport const Collapse = _component(\n  ({\n    _value: value = _bindable<string[] | string | null>([]),\n    accordion = false,\n    onChange,\n    children,\n    ...rest\n  }: CollapseProps) => {\n    CollapseContext.provide({\n      isOpen: (name) => (Array.isArray(value) ? value.includes(name) : value === name),\n      toggle(name) {\n        if (accordion) value = value === name ? null : name;\n        else {\n          const list = Array.isArray(value) ? value : [];\n          value = list.includes(name) ? list.filter((item) => item !== name) : [...list, name];\n        }\n        onChange?.(value);\n      },\n    });\n    return () => <div {...mergeAttrs<'div'>({ sx: collapseStyles.root }, rest)}>{children}</div>;\n  },\n);\n\n/** 未声明的属性落到这一项的根元素（div）上 */\nexport interface CollapseItemProps extends PartProps<'div', 'title'> {\n  /** 名字：展开的状态按它记 */\n  name: string;\n  /** 标题 */\n  title: VNodeChild;\n  /** 标题右边的值 */\n  value?: VNodeChild;\n  /** 不能展开 */\n  disabled?: boolean;\n  /** 展开的内容 */\n  children?: VNodeChild;\n  /** 标题栏（button）的部件属性 */\n  propsHeader?: PartProps<'button'>;\n  /** 内容的部件属性 */\n  propsContent?: PartProps<'div'>;\n}\n\n/** 折叠面板的一项（div > 标题栏 button[aria-expanded] + 内容） */\nexport const CollapseItem = _component(\n  ({\n    name,\n    title,\n    value,\n    disabled = false,\n    children,\n    propsHeader,\n    propsContent,\n    ...rest\n  }: CollapseItemProps) => {\n    const collapse = CollapseContext.inject();\n    return () => {\n      const open = collapse.isOpen(name);\n      const state = dataAttrs({ 'data-open': open });\n      return (\n        <div {...mergeAttrs<'div'>({ sx: collapseStyles.item }, rest, state)}>\n          <button\n            {...mergeAttrs<'button'>({ sx: collapseStyles.header }, propsHeader, {\n              type: 'button',\n              disabled,\n              'aria-expanded': open ? 'true' : 'false',\n              onClick: () => collapse.toggle(name),\n            })}\n          >\n            <span {...mergeAttrs<'span'>({ sx: collapseStyles.title })}>{title}</span>\n            {hasContent(value) && (\n              <span {...mergeAttrs<'span'>({ sx: collapseStyles.value })}>{value}</span>\n            )}\n            <Icon icon={ChevronDown} sx={collapseStyles.arrow} {...state} />\n          </button>\n          <div {...mergeAttrs<'div'>({ sx: collapseStyles.panel }, state)}>\n            <div {...mergeAttrs<'div'>({ sx: collapseStyles.clip })}>\n              <div {...mergeAttrs<'div'>({ sx: collapseStyles.content }, propsContent)}>\n                {children}\n              </div>\n            </div>\n          </div>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyBA,IAAM,kBAAkB,cAA6B,UAAU;;;AAe/D,IAAa,iBAAiB,IAAI,OAAO;CACvC,MAAM,EAAE,iBAAiB,WAAW;CACpC,MAAM;EAEJ,iBAAiB;GACf,SAAS;GACT,eAAe;EACjB;EACA,GAAG;CACL;CACA,QAAQ;EACN,WAAW;EACX,SAAS;EACT,YAAY;EACZ,KAAK;EACL,OAAO;EACP,WAAW;EACX,QAAQ;EACR,cAAc;EACd,eAAe;EACf,aAAa;EACb,iBAAiB;GAAE,SAAS;GAAe,2BAA2B;EAAc;EACpF,OAAO;GAAE,SAAS;GAAS,cAAc;EAAgB;EACzD,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,WAAW;EACX,QAAQ;GAAE,SAAS;GAAW,cAAc;EAAc;CAC5D;CACA,OAAO;EAAE,MAAM;EAAY,UAAU;EAAG,cAAc;CAAW;CACjE,OAAO;EAAE,MAAM;EAAQ,OAAO;CAAa;CAC3C,OAAO;EACL,MAAM;EACN,OAAO;EACP,WAAW;GAAE,SAAS;GAAQ,eAAe;EAAiB;EAC9D,oBAAoB;EACpB,oBAAoB;CACtB;CACA,OAAO;EACL,SAAS;EACT,kBAAkB;GAAE,SAAS;GAAO,eAAe;EAAM;EACzD,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;CAC5B;CACA,MAAM;EAAE,UAAU;EAAU,WAAW;CAAE;CACzC,SAAS;EACP,cAAc;EACd,eAAe;EACf,UAAU;EACV,YAAY;EACZ,OAAO;CACT;AACF,CAAC;;AAGD,IAAa,WAAW,0BACtB,QAAA,SAMqB;CAAA,MAAA,QAAAA,SAAA,QAAA,gBALiC,CAAA,GAAE,KAAA,IAAA;CAAA,MAAA,YAAAC,aAAA,QAAA,aAC1C,KAAK;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAGd,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,gBAAgB,QAAQ;EACtB,SAAS,SAAU,MAAM,QAAO,MAAA,KAAM,IAAI,MAAA,MAAM,SAAS,IAAI,IAAI,MAAA,UAAU;EAC3E,OAAO,MAAM;GACX,IAAA,UAAA,OAAe,MAAA,QAAQ,MAAA,UAAU,OAAO,OAAO;QAC1C;IACH,MAAM,OAAO,MAAM,QAAO,MAAA,KAAM,IAAC,MAAA,QAAW,CAAA;IAC5C,MAAA,QAAQ,KAAK,SAAS,IAAI,IAAI,KAAK,QAAQ,SAAS,SAAS,IAAI,IAAI,CAAC,GAAG,MAAM,IAAI;GACrF;GACA,SAAA,QAAA,MAAA,KAAgB;EAClB;CACF,CAAC;CACD,aAAOC,YAAA,OAAe,WAAkB,EAAE,IAAI,eAAe,KAAK,GAAG,IAAI,GAAC,CAAA,SAAA,KAAA,CAAA;AAC5E,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH;;;AAqBA,IAAa,eAAe,0BAC1B,SAAA,UASyB;CAAA,MAAA,OAAAH,aAAA,SAAA,MAAA;CAAA,MAAA,QAAAA,aAAA,SAAA,OAAA;CAAA,MAAA,QAAAA,aAAA,SAAA,OAAA;CAAA,MAAA,WAAAA,aAAA,SAAA,YALZ,KAAK;CAAA,MAAA,WAAAC,aAAA,OAAA;CAAA,MAAA,cAAAD,aAAA,SAAA,aAAA;CAAA,MAAA,eAAAA,aAAA,SAAA,cAAA;CAAA,MAIb,OAAIE,UAAA,SAAA,OAAA,KAAA;CAEP,MAAM,WAAW,gBAAgB,OAAO;CACxC,aAAa;EACX,MAAM,OAAO,SAAS,OAAM,KAAA,KAAK;EACjC,MAAM,QAAQ,UAAU,EAAE,aAAa,KAAK,CAAC;EAC7C,OAAAC,YAAA,OACW,WAAkB,EAAE,IAAI,eAAe,KAAK,GAAG,MAAM,KAAK,GAAC,CAAAA,YAAA,UAE5D,WAAqB,EAAE,IAAI,eAAe,OAAO,GAAC,YAAA,OAAe;GACnE,MAAM;GACN,UAAQ,SAAA;GACR,iBAAiB,OAAO,SAAS;GACjC,eAAe,SAAS,OAAM,KAAA,KAAK;EACrC,CAAC,GAAC;GAAAA,YAAA,QAEQ,WAAmB,EAAE,IAAI,eAAe,MAAM,CAAC,GAAC,CAAA,MAAA,KAAA,CAAA;GACzD,WAAU,MAAA,KAAM,KAACA,YAAA,QACN,WAAmB,EAAE,IAAI,eAAe,MAAM,CAAC,GAAC,CAAA,MAAA,KAAA,CAAA;GAC3DA,YAAA,MAAAC,cAAA;IAAA,QACW;IAAW,MAAM,eAAe;GAAK,GAAM,KAAK,GAAA,IAAA;EAAA,CAAA,GAAAD,YAAA,OAErD,WAAkB,EAAE,IAAI,eAAe,MAAM,GAAG,KAAK,GAAC,CAAAA,YAAA,OACpD,WAAkB,EAAE,IAAI,eAAe,KAAK,CAAC,GAAC,CAAAA,YAAA,OAC5C,WAAkB,EAAE,IAAI,eAAe,QAAQ,GAAC,aAAA,KAAc,GAAC,CAAA,SAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;CAOlF;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/display/Empty.d.ts

@@ -0,0 +1,42 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type IconData, type IconProps } from '../base/Icon';
+import { type PartProps } from '../utils/props';
+/** 预设的图标 */
+export interface EmptyPresets {
+    /** 没有数据（默认） */
+    default: unknown;
+    /** 没有搜索结果 */
+    search: unknown;
+    /** 网络不通 */
+    network: unknown;
+    /** 出错了 */
+    error: unknown;
+}
+/** 未声明的属性落到根元素（div）上 */
+export interface EmptyProps extends PartProps<'div'> {
+    /**
+     * 预设的图标
+     * @default 'default'
+     */
+    preset?: keyof EmptyPresets;
+    /** 自己的图标（代替预设的） */
+    icon?: IconData;
+    /** 说明；不给时用语言包的“暂无数据” */
+    description?: VNodeChild;
+    /** 下面的操作（按钮） */
+    children?: VNodeChild;
+    /** 图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+    /** 说明的部件属性 */
+    propsDescription?: PartProps<'div'>;
+}
+/** Empty 的样式：root、icon、description、actions */
+export declare const emptyStyles: Readonly<{
+    actions: css.CompiledStyles;
+    description: css.CompiledStyles;
+    icon: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** 空状态（div > 图标 + 说明 + 操作） */
+export declare const Empty: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<EmptyProps>;

package/dist/display/Empty.js

@@ -0,0 +1,79 @@
+import { useConfig } from "../config/context.js";
+import { hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode } from "vue";
+import { CircleAlert, Inbox, SearchX, WifiOff } from "@lucide/icons";
+//#region src/display/Empty.tsx
+/**
+* 空状态：列表没有数据、搜索没有结果、网络出错时，在内容区中间放一个大图标、一句说明，下面可放操作按钮。
+*
+*   <Empty />                                   暂无数据
+*   <Empty preset="search" description="没有找到相关商品" />
+*   <Empty preset="network"><Button size="sm" onClick={retry}>重新加载</Button></Empty>
+*/
+/** 预设的图标 */
+/** 未声明的属性落到根元素（div）上 */
+/** Empty 的样式：root、icon、description、actions */
+var emptyStyles = css.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: "_md",
+		paddingBlock: "2.5em",
+		paddingInline: "_xl",
+		textAlign: "center"
+	},
+	icon: {
+		fontSize: "4em",
+		color: "_border"
+	},
+	description: {
+		fontSize: "_sm",
+		lineHeight: "1.5",
+		color: "_textMuted"
+	},
+	actions: { marginBlockStart: "_sm" }
+});
+var PRESETS = {
+	default: Inbox,
+	search: SearchX,
+	network: WifiOff,
+	error: CircleAlert
+};
+/** 空状态（div > 图标 + 说明 + 操作） */
+var Empty = /*#__PURE__*/ _component((_props, _ctx) => {
+	const preset = readonlyProp(_props, "preset", "default");
+	const icon = readonlyProp(_props, "icon");
+	const description = readonlyProp(_props, "description");
+	const children = childrenProp(_props);
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsDescription = readonlyProp(_props, "propsDescription");
+	const rest = restProps(_props, _ctx, false);
+	const config = useConfig();
+	return () => createVNode("div", mergeAttrs({ sx: emptyStyles.root }, rest), [
+		createVNode(Icon, mergePartProps({
+			icon: icon.value ?? PRESETS[preset.value],
+			strokeWidth: 1.25,
+			sx: emptyStyles.icon
+		}, propsIcon.value), null),
+		createVNode("div", mergeAttrs({ sx: emptyStyles.description }, propsDescription.value), [description.value ?? config.lang.empty]),
+		hasContent(children.value) && createVNode("div", mergeAttrs({ sx: emptyStyles.actions }), [children.value])
+	]);
+}, {
+	name: "Empty",
+	props: [
+		"preset",
+		"icon",
+		"description",
+		"propsIcon",
+		"propsDescription"
+	]
+});
+//#endregion
+export { Empty, emptyStyles };
+
+//# sourceMappingURL=Empty.js.map

package/dist/display/Empty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Empty.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/display/Empty.tsx"],"sourcesContent":["/**\n * 空状态：列表没有数据、搜索没有结果、网络出错时，在内容区中间放一个大图标、一句说明，下面可放操作按钮。\n *\n *   <Empty />                                   暂无数据\n *   <Empty preset=\"search\" description=\"没有找到相关商品\" />\n *   <Empty preset=\"network\"><Button size=\"sm\" onClick={retry}>重新加载</Button></Empty>\n */\nimport { CircleAlert, Inbox, SearchX, WifiOff } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { useConfig } from '../config/context';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\n\n/** 预设的图标 */\nexport interface EmptyPresets {\n  /** 没有数据（默认） */\n  default: unknown;\n  /** 没有搜索结果 */\n  search: unknown;\n  /** 网络不通 */\n  network: unknown;\n  /** 出错了 */\n  error: unknown;\n}\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface EmptyProps extends PartProps<'div'> {\n  /**\n   * 预设的图标\n   * @default 'default'\n   */\n  preset?: keyof EmptyPresets;\n  /** 自己的图标（代替预设的） */\n  icon?: IconData;\n  /** 说明；不给时用语言包的“暂无数据” */\n  description?: VNodeChild;\n  /** 下面的操作（按钮） */\n  children?: VNodeChild;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 说明的部件属性 */\n  propsDescription?: PartProps<'div'>;\n}\n\n/** Empty 的样式：root、icon、description、actions */\nexport const emptyStyles = css.create({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '_md',\n    paddingBlock: '2.5em',\n    paddingInline: '_xl',\n    textAlign: 'center',\n  },\n  icon: { fontSize: '4em', color: '_border' },\n  description: { fontSize: '_sm', lineHeight: '1.5', color: '_textMuted' },\n  actions: { marginBlockStart: '_sm' },\n});\n\nconst PRESETS = { default: Inbox, search: SearchX, network: WifiOff, error: CircleAlert } as const;\n\n/** 空状态（div > 图标 + 说明 + 操作） */\nexport const Empty = _component(\n  ({\n    preset = 'default',\n    icon,\n    description,\n    children,\n    propsIcon,\n    propsDescription,\n    ...rest\n  }: EmptyProps) => {\n    const config = useConfig();\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: emptyStyles.root }, rest)}>\n        <Icon\n          {...mergePartProps<IconProps>(\n            { icon: icon ?? PRESETS[preset], strokeWidth: 1.25, sx: emptyStyles.icon },\n            propsIcon,\n          )}\n        />\n        <div {...mergeAttrs<'div'>({ sx: emptyStyles.description }, propsDescription)}>\n          {description ?? config.lang.empty}\n        </div>\n        {hasContent(children) && (\n          <div {...mergeAttrs<'div'>({ sx: emptyStyles.actions })}>{children}</div>\n        )}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;AA+CA,IAAa,cAAc,IAAI,OAAO;CACpC,MAAM;EACJ,SAAS;EACT,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,KAAK;EACL,cAAc;EACd,eAAe;EACf,WAAW;CACb;CACA,MAAM;EAAE,UAAU;EAAO,OAAO;CAAU;CAC1C,aAAa;EAAE,UAAU;EAAO,YAAY;EAAO,OAAO;CAAa;CACvE,SAAS,EAAE,kBAAkB,MAAM;AACrC,CAAC;AAED,IAAM,UAAU;CAAE,SAAS;CAAO,QAAQ;CAAS,SAAS;CAAS,OAAO;AAAY;;AAGxF,IAAa,QAAQ,0BACnB,QAAA,SAQkB;CAAA,MAAA,SAAAA,aAAA,QAAA,UAPP,SAAS;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAA,YAAAD,aAAA,QAAA,WAAA;CAAA,MAAA,mBAAAA,aAAA,QAAA,kBAAA;CAAA,MAMf,OAAIE,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,SAAS,UAAU;CACzB,aAAOC,YAAA,OACI,WAAkB,EAAE,IAAI,YAAY,KAAK,GAAG,IAAI,GAAC;EAAAA,YAAA,MAElD,eACF;GAAE,MAAM,KAAA,SAAQ,QAAO,OAAA;GAAU,aAAa;GAAM,IAAI,YAAY;EAAK,GAAC,UAAA,KAE5E,GAAC,IAAA;EAAAA,YAAA,OAEM,WAAkB,EAAE,IAAI,YAAY,YAAY,GAAC,iBAAA,KAAkB,GAAC,CAC1E,YAAA,SAAe,OAAO,KAAK,KAAK,CAAA;EAElC,WAAU,SAAA,KAAS,KAACA,YAAA,OACV,WAAkB,EAAE,IAAI,YAAY,QAAQ,CAAC,GAAC,CAAA,SAAA,KAAA,CAAA;CACxD,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/display/Grid.d.ts

@@ -0,0 +1,49 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type IconData, type IconProps } from '../base/Icon';
+import { type PartProps } from '../utils/props';
+/** 未声明的属性落到根元素（div）上 */
+export interface GridProps extends PartProps<'div'> {
+    /**
+     * 一排几个
+     * @default 4
+     */
+    columns?: number;
+    /** 每格是正方形 */
+    square?: boolean;
+    /**
+     * 格子之间画细线
+     * @default true
+     */
+    border?: boolean;
+    /** 各个 GridItem */
+    children?: VNodeChild;
+}
+/** Grid、GridItem 的样式：root、bordered、item、itemBorder、square、clickable、icon、text */
+export declare const gridStyles: Readonly<{
+    bordered: css.CompiledStyles;
+    clickable: css.CompiledStyles;
+    icon: css.CompiledStyles;
+    item: css.CompiledStyles;
+    itemBorder: css.CompiledStyles;
+    root: css.CompiledStyles;
+    square: css.CompiledStyles;
+    text: css.CompiledStyles;
+}>;
+/** 宫格（div > 各格） */
+export declare const Grid: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<GridProps>;
+/** 未声明的属性落到格子（div）上 */
+export interface GridItemProps extends PartProps<'div', 'role'> {
+    /** 图标 */
+    icon?: IconData;
+    /** 文字 */
+    text?: VNodeChild;
+    /** 图标右上角的徽标：数字、文字，true 是小红点 */
+    badge?: number | string | boolean;
+    /** 自定义内容（代替图标与文字） */
+    children?: VNodeChild;
+    /** 图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+}
+/** 宫格的一格（div[role=listitem]）：有 onClick 时可点击 */
+export declare const GridItem: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<GridItemProps>;

package/dist/display/Grid.js

@@ -0,0 +1,136 @@
+import { dataAttrs, hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { Badge } from "./Badge.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, childrenProp, createContext, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, isVNode } from "vue";
+//#region src/display/Grid.tsx
+/** 宫格提供给各格的 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var GridContext = createContext("Grid");
+/** 未声明的属性落到根元素（div）上 */
+/** Grid、GridItem 的样式：root、bordered、item、itemBorder、square、clickable、icon、text */
+var gridStyles = css.create({
+	root: {
+		display: "flex",
+		flexWrap: "wrap",
+		backgroundColor: "_surface"
+	},
+	bordered: {
+		borderBlockStartWidth: "_hairline",
+		borderBlockStartStyle: "solid",
+		borderBlockStartColor: "_border"
+	},
+	item: {
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: "0.45em",
+		paddingBlock: "1em",
+		paddingInline: "0.5em",
+		fontSize: "_xs",
+		color: "_text",
+		textAlign: "center"
+	},
+	itemBorder: {
+		borderInlineEndWidth: "_hairline",
+		borderInlineEndStyle: "solid",
+		borderInlineEndColor: "_border",
+		borderBlockEndWidth: "_hairline",
+		borderBlockEndStyle: "solid",
+		borderBlockEndColor: "_border"
+	},
+	square: { aspectRatio: "1" },
+	clickable: {
+		cursor: "pointer",
+		userSelect: "none",
+		backgroundColor: {
+			default: "_surface",
+			":active": "_fillActive"
+		}
+	},
+	icon: {
+		fontSize: "1.75em",
+		color: "_text"
+	},
+	text: { overflowWrap: "anywhere" }
+});
+/** 宫格（div > 各格） */
+var Grid = /*#__PURE__*/ _component((_props, _ctx) => {
+	const columns = readonlyProp(_props, "columns", 4);
+	const square = readonlyProp(_props, "square", false);
+	const border = readonlyProp(_props, "border", true);
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	GridContext.provide({
+		get columns() {
+			return columns.value;
+		},
+		get square() {
+			return square.value;
+		},
+		get border() {
+			return border.value;
+		}
+	});
+	return () => createVNode("div", mergeAttrs({ sx: [gridStyles.root, border.value && gridStyles.bordered] }, rest, { role: "list" }), [children.value]);
+}, {
+	name: "Grid",
+	props: [
+		"columns",
+		"square",
+		"border"
+	]
+});
+/** 未声明的属性落到格子（div）上 */
+/** 宫格的一格（div[role=listitem]）：有 onClick 时可点击 */
+var GridItem = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const icon = readonlyProp(_props2, "icon");
+	const text = readonlyProp(_props2, "text");
+	const badge = readonlyProp(_props2, "badge");
+	const children = childrenProp(_props2);
+	const propsIcon = readonlyProp(_props2, "propsIcon");
+	const rest = restProps(_props2, _ctx2, false);
+	const grid = GridContext.inject();
+	return () => {
+		const clickable = rest.onClick !== void 0;
+		const glyph = icon.value && createVNode(Icon, mergePartProps({
+			icon: icon.value,
+			sx: gridStyles.icon
+		}, propsIcon.value), null);
+		return createVNode("div", mergeAttrs({
+			sx: [
+				gridStyles.item,
+				css.select(() => grid.border && gridStyles.itemBorder, true),
+				css.select(() => grid.square && gridStyles.square, true),
+				clickable && gridStyles.clickable
+			],
+			style: {
+				flexBasis: `${100 / grid.columns}%`,
+				maxWidth: `${100 / grid.columns}%`
+			}
+		}, rest, {
+			role: "listitem",
+			...dataAttrs({ "data-clickable": clickable })
+		}), [hasContent(children.value) ? children.value : [glyph && (badge.value === void 0 || badge.value === false ? glyph : createVNode(Badge, {
+			"content": badge.value === true ? void 0 : badge.value,
+			"dot": badge.value === true
+		}, _isSlot(glyph) ? glyph : { default: () => [glyph] })), hasContent(text.value) && createVNode("span", mergeAttrs({ sx: gridStyles.text }), [text.value])]]);
+	};
+}, {
+	name: "GridItem",
+	props: [
+		"icon",
+		"text",
+		"badge",
+		"propsIcon"
+	]
+});
+//#endregion
+export { Grid, GridItem, gridStyles };
+
+//# sourceMappingURL=Grid.js.map

package/dist/display/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","names":["_isVNode","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/display/Grid.tsx"],"sourcesContent":["/**\n * 宫格：一排几个的入口（首页的功能区、个人中心的订单状态），每格一个图标加文字，可带徽标。\n *\n *   <Grid columns={4}>\n *     <GridItem icon={Wallet} text=\"待付款\" badge={2} onClick={…} />\n *     <GridItem icon={Truck} text=\"待收货\" />\n *   </Grid>\n *   <Grid columns={3} square border={false}>…</Grid>\n */\nimport { _component, createContext } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { dataAttrs, hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { Badge } from './Badge';\n\n/** 宫格提供给各格的 */\ninterface GridState {\n  readonly columns: number;\n  readonly square: boolean;\n  readonly border: boolean;\n}\n\nconst GridContext = createContext<GridState>('Grid');\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface GridProps extends PartProps<'div'> {\n  /**\n   * 一排几个\n   * @default 4\n   */\n  columns?: number;\n  /** 每格是正方形 */\n  square?: boolean;\n  /**\n   * 格子之间画细线\n   * @default true\n   */\n  border?: boolean;\n  /** 各个 GridItem */\n  children?: VNodeChild;\n}\n\n/** Grid、GridItem 的样式：root、bordered、item、itemBorder、square、clickable、icon、text */\nexport const gridStyles = css.create({\n  root: { display: 'flex', flexWrap: 'wrap', backgroundColor: '_surface' },\n  bordered: {\n    borderBlockStartWidth: '_hairline',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_border',\n  },\n  item: {\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '0.45em',\n    paddingBlock: '1em',\n    paddingInline: '0.5em',\n    fontSize: '_xs',\n    color: '_text',\n    textAlign: 'center',\n  },\n  itemBorder: {\n    borderInlineEndWidth: '_hairline',\n    borderInlineEndStyle: 'solid',\n    borderInlineEndColor: '_border',\n    borderBlockEndWidth: '_hairline',\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_border',\n  },\n  square: { aspectRatio: '1' },\n  clickable: {\n    cursor: 'pointer',\n    userSelect: 'none',\n    backgroundColor: { default: '_surface', ':active': '_fillActive' },\n  },\n  icon: { fontSize: '1.75em', color: '_text' },\n  text: { overflowWrap: 'anywhere' },\n});\n\n/** 宫格（div > 各格） */\nexport const Grid = _component(\n  ({ columns = 4, square = false, border = true, children, ...rest }: GridProps) => {\n    GridContext.provide({\n      get columns() {\n        return columns;\n      },\n      get square() {\n        return square;\n      },\n      get border() {\n        return border;\n      },\n    });\n    return () => (\n      <div\n        {...mergeAttrs<'div'>({ sx: [gridStyles.root, border && gridStyles.bordered] }, rest, {\n          role: 'list',\n        })}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\n/** 未声明的属性落到格子（div）上 */\nexport interface GridItemProps extends PartProps<'div', 'role'> {\n  /** 图标 */\n  icon?: IconData;\n  /** 文字 */\n  text?: VNodeChild;\n  /** 图标右上角的徽标：数字、文字，true 是小红点 */\n  badge?: number | string | boolean;\n  /** 自定义内容（代替图标与文字） */\n  children?: VNodeChild;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n}\n\n/** 宫格的一格（div[role=listitem]）：有 onClick 时可点击 */\nexport const GridItem = _component(\n  ({ icon, text, badge, children, propsIcon, ...rest }: GridItemProps) => {\n    const grid = GridContext.inject();\n    return () => {\n      const clickable = rest.onClick !== undefined;\n      const glyph = icon && (\n        <Icon {...mergePartProps<IconProps>({ icon, sx: gridStyles.icon }, propsIcon)} />\n      );\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                gridStyles.item,\n                grid.border && gridStyles.itemBorder,\n                grid.square && gridStyles.square,\n                clickable && gridStyles.clickable,\n              ],\n              style: { flexBasis: `${100 / grid.columns}%`, maxWidth: `${100 / grid.columns}%` },\n            },\n            rest,\n            { role: 'listitem', ...dataAttrs({ 'data-clickable': clickable }) },\n          )}\n        >\n          {hasContent(children)\n            ? children\n            : [\n                glyph &&\n                  (badge === undefined || badge === false ? (\n                    glyph\n                  ) : (\n                    <Badge content={badge === true ? undefined : badge} dot={badge === true}>\n                      {glyph}\n                    </Badge>\n                  )),\n                hasContent(text) && (\n                  <span {...mergeAttrs<'span'>({ sx: gridStyles.text })}>{text}</span>\n                ),\n              ]}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/display/Image.d.ts

@@ -0,0 +1,70 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type IconProps } from '../base/Icon';
+import { type LoadingProps } from '../feedback/Loading';
+import { type PartProps } from '../utils/props';
+/** 填充方式（同 CSS 的 object-fit） */
+export interface ImageFits {
+    /** 保持比例填满，多出的裁掉 */
+    cover: unknown;
+    /** 保持比例完整显示，可能留白 */
+    contain: unknown;
+    /** 拉伸填满 */
+    fill: unknown;
+    /** 原始大小 */
+    none: unknown;
+}
+/** 由组件管理的 img 属性 */
+export type ImageManaged = 'src' | 'loading' | 'onLoad' | 'onError';
+/** 未声明的属性落到 img 上 */
+export interface ImageProps extends PartProps<'img', ImageManaged> {
+    /** 图片地址 */
+    src?: string;
+    /** 宽度（px，或 CSS 长度） */
+    width?: number | string;
+    /** 高度（px，或 CSS 长度） */
+    height?: number | string;
+    /**
+     * 填充方式
+     * @default 'fill'
+     */
+    fit?: keyof ImageFits;
+    /** 圆角档位 */
+    radius?: 'sm' | 'md' | 'lg';
+    /** 圆形 */
+    round?: boolean;
+    /** 进入视口才加载 */
+    lazy?: boolean;
+    /**
+     * 加载中显示旋转指示
+     * @default true
+     */
+    showLoading?: boolean;
+    /**
+     * 加载失败显示占位图标
+     * @default true
+     */
+    showError?: boolean;
+    /** 加载完成 */
+    onLoad?: (event: Event) => void;
+    /** 加载失败 */
+    onError?: (event: Event) => void;
+    /** 外层（裁切与占位）的部件属性 */
+    propsRoot?: PartProps<'div'>;
+    /** 加载指示的部件属性 */
+    propsLoading?: Partial<LoadingProps>;
+    /** 失败图标的部件属性 */
+    propsError?: Partial<IconProps>;
+}
+/** Image 的样式：root、round、各圆角、img、hidden、placeholder */
+export declare const imageStyles: Readonly<{
+    hidden: css.CompiledStyles;
+    img: css.CompiledStyles;
+    lg: css.CompiledStyles;
+    md: css.CompiledStyles;
+    placeholder: css.CompiledStyles;
+    root: css.CompiledStyles;
+    round: css.CompiledStyles;
+    sm: css.CompiledStyles;
+}>;
+/** 图片（div > img + 占位） */
+export declare const Image: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ImageProps>;

package/dist/display/Image.js

@@ -0,0 +1,138 @@
+import { dataAttrs, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { Loading } from "../feedback/Loading.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, overridable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode } from "vue";
+import { ImageOff } from "@lucide/icons";
+//#region src/display/Image.tsx
+/**
+* 图片：按 fit 填充、加载中与加载失败有占位、可圆角或圆形、可懒加载。
+*
+*   <Image src={url} width={96} height={96} fit="cover" radius="md" />
+*   <Image src={avatar} width={40} height={40} round />
+*
+* 小程序里由运行时渲染成 image 组件，fit 换成对应的 mode。
+*/
+/** 填充方式（同 CSS 的 object-fit） */
+/** 小程序 image 组件的 mode（运行时读 img 上的 mode 属性） */
+var MINI_MODES = {
+	cover: "aspectFill",
+	contain: "aspectFit",
+	fill: "scaleToFill",
+	none: "center"
+};
+/** 加载状态 */
+/** 由组件管理的 img 属性 */
+/** 未声明的属性落到 img 上 */
+/**
+* 给小程序 image 组件的属性（mode、lazy-load）：浏览器忽略不认识的属性；
+* 不在 img 的属性类型里，单独组一个对象再展开
+*/
+var miniImageAttrs = (fit, lazy) => ({
+	mode: MINI_MODES[fit],
+	"lazy-load": lazy || void 0
+});
+var length = (value) => typeof value === "number" ? `${value}px` : value;
+/** Image 的样式：root、round、各圆角、img、hidden、placeholder */
+var imageStyles = css.create({
+	root: {
+		position: "relative",
+		display: "inline-block",
+		overflow: "hidden",
+		verticalAlign: "middle",
+		backgroundColor: {
+			default: "transparent",
+			"[data-status=\"loading\"]": "_fill",
+			"[data-status=\"error\"]": "_fill"
+		}
+	},
+	round: { borderRadius: "_full" },
+	sm: { borderRadius: "_sm" },
+	md: { borderRadius: "_md" },
+	lg: { borderRadius: "_lg" },
+	img: {
+		display: "block",
+		width: "100%",
+		height: "100%"
+	},
+	hidden: { opacity: 0 },
+	placeholder: {
+		position: "absolute",
+		inset: 0,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontSize: "_xxl",
+		color: "_textPlaceholder"
+	}
+});
+/** 图片（div > img + 占位） */
+var Image = /*#__PURE__*/ _component((_props, _ctx) => {
+	const src = readonlyProp(_props, "src");
+	const width = readonlyProp(_props, "width");
+	const height = readonlyProp(_props, "height");
+	const fit = readonlyProp(_props, "fit", "fill");
+	const radius = readonlyProp(_props, "radius");
+	const round = readonlyProp(_props, "round", false);
+	const lazy = readonlyProp(_props, "lazy", false);
+	const showLoading = readonlyProp(_props, "showLoading", true);
+	const showError = readonlyProp(_props, "showError", true);
+	const onLoad = readonlyProp(_props, "onLoad");
+	const onError = readonlyProp(_props, "onError");
+	const propsRoot = readonlyProp(_props, "propsRoot");
+	const propsLoading = readonlyProp(_props, "propsLoading");
+	const propsError = readonlyProp(_props, "propsError");
+	const rest = restProps(_props, _ctx, true);
+	let status = overridable(() => src.value ? "loading" : "error");
+	return () => createVNode("div", mergeAttrs({ sx: [
+		imageStyles.root,
+		round.value && imageStyles.round,
+		radius.value && imageStyles[radius.value]
+	] }, propsRoot.value, {
+		style: {
+			width: length(width.value),
+			height: length(height.value)
+		},
+		...dataAttrs({ "data-status": status.value })
+	}), [
+		src.value && createVNode("img", mergeAttrs({ sx: [imageStyles.img, status.value !== "loaded" && imageStyles.hidden] }, rest, {
+			src: src.value,
+			loading: lazy.value ? "lazy" : void 0,
+			style: { objectFit: fit.value },
+			...miniImageAttrs(fit.value, lazy.value),
+			onLoad: (event) => {
+				status.value = "loaded";
+				onLoad.value?.(event);
+			},
+			onError: (event) => {
+				status.value = "error";
+				onError.value?.(event);
+			}
+		}), null),
+		status.value === "loading" && showLoading.value && createVNode("div", mergeAttrs({ sx: imageStyles.placeholder }), [createVNode(Loading, mergePartProps({}, propsLoading.value), null)]),
+		status.value === "error" && showError.value && createVNode("div", mergeAttrs({ sx: imageStyles.placeholder }), [createVNode(Icon, mergePartProps({ icon: ImageOff }, propsError.value), null)])
+	]);
+}, {
+	name: "Image",
+	props: [
+		"src",
+		"width",
+		"height",
+		"fit",
+		"radius",
+		"round",
+		"lazy",
+		"showLoading",
+		"showError",
+		"onLoad",
+		"onError",
+		"propsRoot",
+		"propsLoading",
+		"propsError"
+	]
+});
+//#endregion
+export { Image, imageStyles };
+
+//# sourceMappingURL=Image.js.map

package/dist/display/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","names":["_vtp_readonlyProp","_vtp_restProps","_vtp_overridable","_createVNode"],"sources":["../../src/display/Image.tsx"],"sourcesContent":["/**\n * 图片：按 fit 填充、加载中与加载失败有占位、可圆角或圆形、可懒加载。\n *\n *   <Image src={url} width={96} height={96} fit=\"cover\" radius=\"md\" />\n *   <Image src={avatar} width={40} height={40} round />\n *\n * 小程序里由运行时渲染成 image 组件，fit 换成对应的 mode。\n */\nimport { ImageOff } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Icon, type IconProps } from '../base/Icon';\nimport { Loading, type LoadingProps } from '../feedback/Loading';\nimport { dataAttrs, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\n\n/** 填充方式（同 CSS 的 object-fit） */\nexport interface ImageFits {\n  /** 保持比例填满，多出的裁掉 */\n  cover: unknown;\n  /** 保持比例完整显示，可能留白 */\n  contain: unknown;\n  /** 拉伸填满 */\n  fill: unknown;\n  /** 原始大小 */\n  none: unknown;\n}\n\n/** 小程序 image 组件的 mode（运行时读 img 上的 mode 属性） */\nconst MINI_MODES = {\n  cover: 'aspectFill',\n  contain: 'aspectFit',\n  fill: 'scaleToFill',\n  none: 'center',\n} as const satisfies Record<keyof ImageFits, string>;\n\n/** 加载状态 */\ntype ImageStatus = 'loading' | 'loaded' | 'error';\n\n/** 由组件管理的 img 属性 */\nexport type ImageManaged = 'src' | 'loading' | 'onLoad' | 'onError';\n\n/** 未声明的属性落到 img 上 */\nexport interface ImageProps extends PartProps<'img', ImageManaged> {\n  /** 图片地址 */\n  src?: string;\n  /** 宽度（px，或 CSS 长度） */\n  width?: number | string;\n  /** 高度（px，或 CSS 长度） */\n  height?: number | string;\n  /**\n   * 填充方式\n   * @default 'fill'\n   */\n  fit?: keyof ImageFits;\n  /** 圆角档位 */\n  radius?: 'sm' | 'md' | 'lg';\n  /** 圆形 */\n  round?: boolean;\n  /** 进入视口才加载 */\n  lazy?: boolean;\n  /**\n   * 加载中显示旋转指示\n   * @default true\n   */\n  showLoading?: boolean;\n  /**\n   * 加载失败显示占位图标\n   * @default true\n   */\n  showError?: boolean;\n  /** 加载完成 */\n  onLoad?: (event: Event) => void;\n  /** 加载失败 */\n  onError?: (event: Event) => void;\n  /** 外层（裁切与占位）的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 加载指示的部件属性 */\n  propsLoading?: Partial<LoadingProps>;\n  /** 失败图标的部件属性 */\n  propsError?: Partial<IconProps>;\n}\n\n/**\n * 给小程序 image 组件的属性（mode、lazy-load）：浏览器忽略不认识的属性；\n * 不在 img 的属性类型里，单独组一个对象再展开\n */\nconst miniImageAttrs = (fit: keyof ImageFits, lazy: boolean): Record<string, unknown> => ({\n  mode: MINI_MODES[fit],\n  'lazy-load': lazy || undefined,\n});\n\nconst length = (value: number | string | undefined) =>\n  typeof value === 'number' ? `${value}px` : value;\n\n/** Image 的样式：root、round、各圆角、img、hidden、placeholder */\nexport const imageStyles = css.create({\n  root: {\n    position: 'relative',\n    display: 'inline-block',\n    overflow: 'hidden',\n    verticalAlign: 'middle',\n    backgroundColor: {\n      default: 'transparent',\n      '[data-status=\"loading\"]': '_fill',\n      '[data-status=\"error\"]': '_fill',\n    },\n  },\n  round: { borderRadius: '_full' },\n  sm: { borderRadius: '_sm' },\n  md: { borderRadius: '_md' },\n  lg: { borderRadius: '_lg' },\n  img: { display: 'block', width: '100%', height: '100%' },\n  hidden: { opacity: 0 },\n  placeholder: {\n    position: 'absolute',\n    inset: 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    fontSize: '_xxl',\n    color: '_textPlaceholder',\n  },\n});\n\n/** 图片（div > img + 占位） */\nexport const Image = _component(\n  ({\n    src,\n    width,\n    height,\n    fit = 'fill',\n    radius,\n    round = false,\n    lazy = false,\n    showLoading = true,\n    showError = true,\n    onLoad,\n    onError,\n    propsRoot,\n    propsLoading,\n    propsError,\n    ...rest\n  }: ImageProps) => {\n    // 加载完、失败时覆盖；换了 src 重新回到加载中\n    let status = _derived<ImageStatus>(src ? 'loading' : 'error');\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          { sx: [imageStyles.root, round && imageStyles.round, radius && imageStyles[radius]] },\n          propsRoot,\n          {\n            style: { width: length(width), height: length(height) },\n            ...dataAttrs({ 'data-status': status }),\n          },\n        )}\n      >\n        {src && (\n          <img\n            {...mergeAttrs<'img'>(\n              { sx: [imageStyles.img, status !== 'loaded' && imageStyles.hidden] },\n              rest,\n              {\n                src,\n                loading: lazy ? 'lazy' : undefined,\n                style: { objectFit: fit },\n                ...miniImageAttrs(fit, lazy),\n                onLoad: (event: Event) => {\n                  status = 'loaded';\n                  onLoad?.(event);\n                },\n                onError: (event: Event) => {\n                  status = 'error';\n                  onError?.(event);\n                },\n              },\n            )}\n          />\n        )}\n        {status === 'loading' && showLoading && (\n          <div {...mergeAttrs<'div'>({ sx: imageStyles.placeholder })}>\n            <Loading {...mergePartProps<LoadingProps>({}, propsLoading)} />\n          </div>\n        )}\n        {status === 'error' && showError && (\n          <div {...mergeAttrs<'div'>({ sx: imageStyles.placeholder })}>\n            <Icon {...mergePartProps<IconProps>({ icon: ImageOff }, propsError)} />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/display/IndexBar.d.ts

@@ -0,0 +1,34 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 未声明的属性落到根元素（div）上 */
+export interface IndexBarProps extends Omit<PartProps<'div'>, 'onSelect'> {
+    /**
+     * 组标题吸住时离顶部多远（CSS 长度；页面顶部有固定的导航栏时写它的高度）
+     * @default '0px'
+     */
+    stickyOffsetTop?: string;
+    /** 点（或滑到）右边的一个字母 */
+    onSelect?: (index: string) => void;
+    /** 各组的 IndexAnchor 与内容 */
+    children?: VNodeChild;
+    /** 右边字母栏的部件属性 */
+    propsSidebar?: PartProps<'div'>;
+}
+/** IndexBar、IndexAnchor 的样式 */
+export declare const indexBarStyles: Readonly<{
+    anchor: css.CompiledStyles;
+    letter: css.CompiledStyles;
+    sidebar: css.CompiledStyles;
+}>;
+/** 索引栏（div > 内容 + 右边的字母栏） */
+export declare const IndexBar: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<IndexBarProps>;
+/** 未声明的属性落到标题（div）上 */
+export interface IndexAnchorProps extends PartProps<'div'> {
+    /** 这一组的字母（也是右边字母栏上的字） */
+    index: string;
+    /** 标题的内容；不给时显示 index */
+    children?: VNodeChild;
+}
+/** 一组的标题（div，吸顶） */
+export declare const IndexAnchor: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<IndexAnchorProps>;