@xihan-ui/vue 1.1.0 → 2.0.0

package/dist/components/hover-card/use-hover-card.js

@@ -4,8 +4,8 @@ import { useXhConfig } from "../../config/config.js";
 import { useMachine } from "../../runtime/use-machine.js";
 import { createVueIdGenerator } from "../../runtime/vue-id.js";
 import { computed, ref } from "vue";
+import { createRuntimeConfig, createScope } from "@xihan-ui/core";
 import { connectHoverCard, hoverCardMachine } from "@xihan-ui/headless";
-import { createRuntimeConfig, createScope } from "@xihan-ui/kernel";
 import { createPositionEngine } from "@xihan-ui/position";
 //#region src/components/hover-card/use-hover-card.ts
 function useHoverCard(props, onOpenChange) {
@@ -13,6 +13,8 @@ function useHoverCard(props, onOpenChange) {
 	const triggerRef = ref(null);
 	const positionerRef = ref(null);
 	const contentRef = ref(null);
+	const titleRef = ref(null);
+	const descriptionRef = ref(null);
 	const idGen = createVueIdGenerator();
 	const scope = createScope(null, idGen);
 	const service = useMachine(hoverCardMachine, () => ({
@@ -30,7 +32,6 @@ function useHoverCard(props, onOpenChange) {
 			node: () => contentRef.value,
 			branches: () => [triggerRef.value, positionerRef.value].filter(Boolean),
 			isModal: () => false,
-			setModal: () => {},
 			surfaces: () => []
 		});
 		service.refs.set("config", config);
@@ -40,18 +41,23 @@ function useHoverCard(props, onOpenChange) {
 	service.refs.set("getAnchorEl", () => triggerRef.value);
 	service.refs.set("getFloatingEl", () => positionerRef.value);
 	service.refs.set("getContentEl", () => contentRef.value);
+	service.refs.set("getTitleEl", () => titleRef.value);
+	service.refs.set("getDescriptionEl", () => descriptionRef.value);
 	const api = computed(() => connectHoverCard(service, vueNormalize));
 	return {
 		visible: useOverlayExit({
 			config,
 			isOpen: () => api.value.open,
-			contentRef
+			contentRef,
+			onPresence: (presence) => service.refs.set("presence", presence)
 		}),
 		service,
 		api,
 		triggerRef,
 		positionerRef,
 		contentRef,
+		titleRef,
+		descriptionRef,
 		portalTarget: computed(() => xhConfig.value.portalContainer?.() ?? config?.portalContainer() ?? "body")
 	};
 }

package/dist/components/hover-card/use-hover-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-hover-card.js","names":[],"sources":["../../../src/components/hover-card/use-hover-card.ts"],"sourcesContent":["import type { HoverCardApi, HoverCardSchema } from '@xihan-ui/headless'\nimport type { Cleanup, Layer, RuntimeConfig } from '@xihan-ui/kernel'\nimport type { Service } from '@xihan-ui/machine'\nimport type { ComputedRef, Ref } from 'vue'\nimport { connectHoverCard, hoverCardMachine } from '@xihan-ui/headless'\nimport { createRuntimeConfig, createScope } from '@xihan-ui/kernel'\nimport { createPositionEngine } from '@xihan-ui/position'\nimport { computed, ref } from 'vue'\nimport { useXhConfig } from '../../config/config'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { useOverlayExit } from '../../runtime/use-overlay-exit'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface HoverCardContext {\n  service: Service<HoverCardSchema>\n  api: ComputedRef<HoverCardApi>\n  /** 定位锚点。 */\n  triggerRef: Ref<HTMLElement | null>\n  /** 被定位的浮层。 */\n  positionerRef: Ref<HTMLElement | null>\n  /** 消解层节点，也是判定焦点是否仍在卡片内的依据。 */\n  contentRef: Ref<HTMLElement | null>\n  /** 此刻该不该渲染：退场动画播完之前仍为真。 */\n  visible: Ref<boolean>\n  /** 浮层搬到哪儿：全局配置的 portalContainer > body。 */\n  portalTarget: ComputedRef<string | Element>\n}\n\nexport function useHoverCard(\n  props: HoverCardSchema['props'],\n  onOpenChange?: HoverCardSchema['props']['onOpenChange'],\n): HoverCardContext {\n  const xhConfig = useXhConfig()\n  const triggerRef = ref<HTMLElement | null>(null)\n  const positionerRef = ref<HTMLElement | null>(null)\n  const contentRef = ref<HTMLElement | null>(null)\n\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  const service = useMachine(hoverCardMachine, () => ({ ...props, onOpenChange }), scope)\n\n  // 无 DOM 环境（SSR）不建引擎与消解层\n  // 服务端没有 DOM、也就没有退场：config 传 null 时闸门退化成「跟着展开态」\n  let config: RuntimeConfig | null = null\n\n  if (typeof document !== 'undefined') {\n    config = createRuntimeConfig({ scope, idGenerator: idGen })\n\n    // 只提供注册函数，入栈出栈由机器的 trackLayer 效应按可见态驱动\n    const registerLayer = (): { layer: Layer, dispose: Cleanup } => config!.layerRegistry.register({\n      kind: 'popover',\n      node: () => contentRef.value,\n      // trigger 记为本层分支，指针按在它上面算层内交互；\n      // 浮层壳一并记上：卡片之外还浮着自绘滚动条，按住它拖动不该把卡片消解掉\n      branches: () => [triggerRef.value, positionerRef.value].filter(Boolean) as Element[],\n      // 悬停卡片非模态：不陷焦点、不锁滚动、无遮罩\n      isModal: () => false,\n      setModal: () => {},\n      surfaces: () => [],\n    })\n\n    // 定位引擎由适配器注入，机器只经端口驱动\n    service.refs.set('config', config!)\n    service.refs.set('registerLayer', registerLayer)\n    service.refs.set('position', createPositionEngine())\n  }\n\n  // 元素 getter 在无 DOM 环境下也要设，连接层判定焦点去向时经它们取节点\n  service.refs.set('getAnchorEl', () => triggerRef.value)\n  service.refs.set('getFloatingEl', () => positionerRef.value)\n  service.refs.set('getContentEl', () => contentRef.value)\n\n  const api = computed(() => connectHoverCard(service, vueNormalize))\n  // 退场闸门：收起从跟着 open 走，改成跟着 presence 走\n  const visible = useOverlayExit({ config, isOpen: () => api.value.open, contentRef })\n  // 先问全局配置的落点，没有才落 body\n  const portalTarget = computed<string | Element>(() => xhConfig.value.portalContainer?.() ?? config?.portalContainer() ?? 'body')\n\n  return { visible, service, api, triggerRef, positionerRef, contentRef, portalTarget }\n}\n"],"mappings":";;;;;;;;;;AA6BA,SAAgB,aACd,OACA,cACkB;CAClB,MAAM,WAAW,YAAY;CAC7B,MAAM,aAAa,IAAwB,IAAI;CAC/C,MAAM,gBAAgB,IAAwB,IAAI;CAClD,MAAM,aAAa,IAAwB,IAAI;CAE/C,MAAM,QAAQ,qBAAqB;CACnC,MAAM,QAAQ,YAAY,MAAM,KAAK;CACrC,MAAM,UAAU,WAAW,yBAAyB;EAAE,GAAG;EAAO;CAAa,IAAI,KAAK;CAItF,IAAI,SAA+B;CAEnC,IAAI,OAAO,aAAa,aAAa;EACnC,SAAS,oBAAoB;GAAE;GAAO,aAAa;EAAM,CAAC;EAG1D,MAAM,sBAA0D,OAAQ,cAAc,SAAS;GAC7F,MAAM;GACN,YAAY,WAAW;GAGvB,gBAAgB,CAAC,WAAW,OAAO,cAAc,KAAK,CAAC,CAAC,OAAO,OAAO;GAEtE,eAAe;GACf,gBAAgB,CAAC;GACjB,gBAAgB,CAAC;EACnB,CAAC;EAGD,QAAQ,KAAK,IAAI,UAAU,MAAO;EAClC,QAAQ,KAAK,IAAI,iBAAiB,aAAa;EAC/C,QAAQ,KAAK,IAAI,YAAY,qBAAqB,CAAC;CACrD;CAGA,QAAQ,KAAK,IAAI,qBAAqB,WAAW,KAAK;CACtD,QAAQ,KAAK,IAAI,uBAAuB,cAAc,KAAK;CAC3D,QAAQ,KAAK,IAAI,sBAAsB,WAAW,KAAK;CAEvD,MAAM,MAAM,eAAe,iBAAiB,SAAS,YAAY,CAAC;CAMlE,OAAO;EAAE,SAJO,eAAe;GAAE;GAAQ,cAAc,IAAI,MAAM;GAAM;EAAW,CAInE;EAAG;EAAS;EAAK;EAAY;EAAe;EAAY,cAFlD,eAAiC,SAAS,MAAM,kBAAkB,KAAK,QAAQ,gBAAgB,KAAK,MAEvC;CAAE;AACtF"}
+{"version":3,"file":"use-hover-card.js","names":[],"sources":["../../../src/components/hover-card/use-hover-card.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use hover card 相关实现。\n\nimport type { Cleanup, Layer, RuntimeConfig, Service } from '@xihan-ui/core'\nimport type { HoverCardApi, HoverCardSchema } from '@xihan-ui/headless'\nimport type { ComputedRef, Ref } from 'vue'\nimport { createRuntimeConfig, createScope } from '@xihan-ui/core'\nimport { connectHoverCard, hoverCardMachine } from '@xihan-ui/headless'\nimport { createPositionEngine } from '@xihan-ui/position'\nimport { computed, ref } from 'vue'\nimport { useXhConfig } from '../../config/config'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\nimport { useOverlayExit } from '../../runtime/use-overlay-exit'\nimport { createVueIdGenerator } from '../../runtime/vue-id'\n\nexport interface HoverCardContext {\n  service: Service<HoverCardSchema>\n  api: ComputedRef<HoverCardApi>\n  /** 定位锚点。 */\n  triggerRef: Ref<HTMLElement | null>\n  /** 被定位的浮层。 */\n  positionerRef: Ref<HTMLElement | null>\n  /** 消解层节点，也是判定焦点是否仍在卡片内的依据。 */\n  contentRef: Ref<HTMLElement | null>\n  /** title 部件；作者未放置它时卡片的可及名指回 trigger。 */\n  titleRef: Ref<HTMLElement | null>\n  /** description 部件；作者未放置它时不发 aria-describedby。 */\n  descriptionRef: Ref<HTMLElement | null>\n  /** 当前是否应当渲染：退场动画播完之前仍为真。 */\n  visible: Ref<boolean>\n  /** 浮层迁移到的位置：全局配置的 portalContainer > body。 */\n  portalTarget: ComputedRef<string | Element>\n}\n\nexport function useHoverCard(\n  props: HoverCardSchema['props'],\n  onOpenChange?: HoverCardSchema['props']['onOpenChange'],\n): HoverCardContext {\n  const xhConfig = useXhConfig()\n  const triggerRef = ref<HTMLElement | null>(null)\n  const positionerRef = ref<HTMLElement | null>(null)\n  const contentRef = ref<HTMLElement | null>(null)\n  const titleRef = ref<HTMLElement | null>(null)\n  const descriptionRef = ref<HTMLElement | null>(null)\n\n  const idGen = createVueIdGenerator()\n  const scope = createScope(null, idGen)\n  const service = useMachine(hoverCardMachine, () => ({ ...props, onOpenChange }), scope)\n\n  // 无 DOM 环境（SSR）不建引擎与消解层\n  // 服务端没有 DOM、也就没有退场：config 传 null 时闸门退化成「跟着展开态」\n  let config: RuntimeConfig | null = null\n\n  if (typeof document !== 'undefined') {\n    config = createRuntimeConfig({ scope, idGenerator: idGen })\n\n    // 只提供注册函数，入栈出栈由机器的 trackLayer 效应按可见态驱动\n    const registerLayer = (): { layer: Layer, dispose: Cleanup } => config!.layerRegistry.register({\n      kind: 'popover',\n      node: () => contentRef.value,\n      // trigger 记为本层分支，指针按在它上面算层内交互；\n      // 浮层壳一并记上：卡片之外还浮着自绘滚动条，按住它拖动不该把卡片消解掉\n      branches: () => [triggerRef.value, positionerRef.value].filter(Boolean) as Element[],\n      // 悬停卡片非模态：不陷焦点、不锁滚动、无遮罩\n      isModal: () => false,\n      surfaces: () => [],\n    })\n\n    // 定位引擎由适配器注入，机器只经端口驱动\n    service.refs.set('config', config!)\n    service.refs.set('registerLayer', registerLayer)\n    service.refs.set('position', createPositionEngine())\n  }\n\n  // 元素 getter 在无 DOM 环境下也要设，连接层判定焦点去向时经它们取节点\n  service.refs.set('getAnchorEl', () => triggerRef.value)\n  service.refs.set('getFloatingEl', () => positionerRef.value)\n  service.refs.set('getContentEl', () => contentRef.value)\n  service.refs.set('getTitleEl', () => titleRef.value)\n  service.refs.set('getDescriptionEl', () => descriptionRef.value)\n\n  const api = computed(() => connectHoverCard(service, vueNormalize))\n  // 退场闸门：收起从跟着 open 走，改成跟着 presence 走\n  const visible = useOverlayExit({\n    config,\n    isOpen: () => api.value.open,\n    contentRef,\n    onPresence: presence => service.refs.set('presence', presence),\n  })\n  // 先问全局配置的落点，没有才落 body\n  const portalTarget = computed<string | Element>(() => xhConfig.value.portalContainer?.() ?? config?.portalContainer() ?? 'body')\n\n  return { visible, service, api, triggerRef, positionerRef, contentRef, titleRef, descriptionRef, portalTarget }\n}\n"],"mappings":";;;;;;;;;;AAuCA,SAAgB,aACd,OACA,cACkB;CAClB,MAAM,WAAW,YAAY;CAC7B,MAAM,aAAa,IAAwB,IAAI;CAC/C,MAAM,gBAAgB,IAAwB,IAAI;CAClD,MAAM,aAAa,IAAwB,IAAI;CAC/C,MAAM,WAAW,IAAwB,IAAI;CAC7C,MAAM,iBAAiB,IAAwB,IAAI;CAEnD,MAAM,QAAQ,qBAAqB;CACnC,MAAM,QAAQ,YAAY,MAAM,KAAK;CACrC,MAAM,UAAU,WAAW,yBAAyB;EAAE,GAAG;EAAO;CAAa,IAAI,KAAK;CAItF,IAAI,SAA+B;CAEnC,IAAI,OAAO,aAAa,aAAa;EACnC,SAAS,oBAAoB;GAAE;GAAO,aAAa;EAAM,CAAC;EAG1D,MAAM,sBAA0D,OAAQ,cAAc,SAAS;GAC7F,MAAM;GACN,YAAY,WAAW;GAGvB,gBAAgB,CAAC,WAAW,OAAO,cAAc,KAAK,CAAC,CAAC,OAAO,OAAO;GAEtE,eAAe;GACf,gBAAgB,CAAC;EACnB,CAAC;EAGD,QAAQ,KAAK,IAAI,UAAU,MAAO;EAClC,QAAQ,KAAK,IAAI,iBAAiB,aAAa;EAC/C,QAAQ,KAAK,IAAI,YAAY,qBAAqB,CAAC;CACrD;CAGA,QAAQ,KAAK,IAAI,qBAAqB,WAAW,KAAK;CACtD,QAAQ,KAAK,IAAI,uBAAuB,cAAc,KAAK;CAC3D,QAAQ,KAAK,IAAI,sBAAsB,WAAW,KAAK;CACvD,QAAQ,KAAK,IAAI,oBAAoB,SAAS,KAAK;CACnD,QAAQ,KAAK,IAAI,0BAA0B,eAAe,KAAK;CAE/D,MAAM,MAAM,eAAe,iBAAiB,SAAS,YAAY,CAAC;CAWlE,OAAO;EAAE,SATO,eAAe;GAC7B;GACA,cAAc,IAAI,MAAM;GACxB;GACA,aAAY,aAAY,QAAQ,KAAK,IAAI,YAAY,QAAQ;EAC/D,CAIe;EAAG;EAAS;EAAK;EAAY;EAAe;EAAY;EAAU;EAAgB,cAF5E,eAAiC,SAAS,MAAM,kBAAkB,KAAK,QAAQ,gBAAgB,KAAK,MAEb;CAAE;AAChH"}

package/dist/components/icon/icon.d.ts

@@ -1,64 +1,60 @@
 import { PropType, VNode } from "vue";
-import { IconWeight } from "@xihan-ui/headless";
-import { IconRecord, Size, Tone } from "@xihan-ui/kernel";
+import { IconRecord, Tone } from "@xihan-ui/core";
+import { IconFlip, IconRotate, IconSize, IconWeight } from "@xihan-ui/headless";
 //#region src/components/icon/icon.d.ts
 /**
- * 根 `<svg>` 加一层 `<g>` 空壳，图元铺在空壳里。
- * 默认插槽给出了内容时改由插槽内容填充根，元素不再生成 glyph 与图元；
- * 判据是插槽产出里有真会画出东西的节点：既不是插槽函数存不存在（宿主可能恒传一个插槽），
- * 也不是产出数组非空（`v-if` 为假时产出里还剩一个注释节点）。
+ * 根 `<svg>` 加一层 `<g>` 空壳，图元铺在空壳中。
+ * 默认插槽给出内容时改由插槽内容填充根，元素不再生成 glyph 与图元；
+ * 判据是插槽产出中有真正会渲染出内容的节点：既不是插槽函数是否存在（宿主可能恒传一个插槽），
+ * 也不是产出数组非空（`v-if` 为假时产出中还剩一个注释节点）。
  */
 declare const XhIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   icon: {
     type: PropType<IconRecord>;
-    default: undefined;
   };
   label: {
     type: StringConstructor;
-    default: undefined;
   };
   size: {
-    type: PropType<Size>;
-    default: undefined;
+    type: PropType<IconSize>;
   };
   weight: {
     type: PropType<IconWeight>;
-    default: undefined;
   };
   tone: {
     type: PropType<Tone>;
-    default: undefined;
+  };
+  rotate: {
+    type: PropType<IconRotate | string>;
+  };
+  flip: {
+    type: PropType<IconFlip>;
   };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   icon: {
     type: PropType<IconRecord>;
-    default: undefined;
   };
   label: {
     type: StringConstructor;
-    default: undefined;
   };
   size: {
-    type: PropType<Size>;
-    default: undefined;
+    type: PropType<IconSize>;
   };
   weight: {
     type: PropType<IconWeight>;
-    default: undefined;
   };
   tone: {
     type: PropType<Tone>;
-    default: undefined;
   };
-}>> & Readonly<{}>, {
-  label: string;
-  tone: Tone;
-  size: Size;
-  icon: IconRecord;
-  weight: IconWeight;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+  rotate: {
+    type: PropType<IconRotate | string>;
+  };
+  flip: {
+    type: PropType<IconFlip>;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
 export { XhIcon };
 //# sourceMappingURL=icon.d.ts.map

package/dist/components/icon/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","names":[],"sources":["../../../src/components/icon/icon.ts"],"mappings":";;;;;;;;;;cAsBa,sBAAM,8BAAA;;IAIS,MAAA,SAAS;;;;;;;;IAET,MAAA,SAAS;;;;IACP,MAAA,SAAS;;;;IACX,MAAA,SAAS;;;;;;;IAJT,MAAA,SAAS;;;;;;;;IAET,MAAA,SAAS;;;;IACP,MAAA,SAAS;;;;IACX,MAAA,SAAS;;;;;;;;;qCAmBnC"}
+{"version":3,"file":"icon.d.ts","names":[],"sources":["../../../src/components/icon/icon.ts"],"mappings":";;;;;;;;;;cA6Ba,sBAAM,8BAAA;;IAIS,MAAA,SAAS;;;;;;IAET,MAAA,SAAS;;;IACP,MAAA,SAAS;;;IACX,MAAA,SAAS;;;IACG,MAAA,SAAS;;;IACrB,MAAA,SAAS;;;;;;IANT,MAAA,SAAS;;;;;;IAET,MAAA,SAAS;;;IACP,MAAA,SAAS;;;IACX,MAAA,SAAS;;;IACG,MAAA,SAAS;;;IACrB,MAAA,SAAS;;MAmBnC,oDAAA"}

package/dist/components/icon/icon.js

@@ -4,41 +4,28 @@ import { useIcon } from "./use-icon.js";
 import { defineComponent, h } from "vue";
 //#region src/components/icon/icon.ts
 /**
-* 把一个图元节点建成 VNode，递归到底。
-* 标签与属性名逐字透传（连字符与大小写都保留），命名空间由 Vue 从父 `<svg>` 往下带。
+* 把一个图元节点建为 VNode，递归到底。
+* 标签与属性名逐字透传（连字符与大小写都保留），命名空间由 Vue 从父 `<svg>` 向下传递。
 */
 function renderNode(node) {
 	return h(node.tag, node.attrs, node.children?.map(renderNode));
 }
 /**
-* 根 `<svg>` 加一层 `<g>` 空壳，图元铺在空壳里。
-* 默认插槽给出了内容时改由插槽内容填充根，元素不再生成 glyph 与图元；
-* 判据是插槽产出里有真会画出东西的节点：既不是插槽函数存不存在（宿主可能恒传一个插槽），
-* 也不是产出数组非空（`v-if` 为假时产出里还剩一个注释节点）。
+* 根 `<svg>` 加一层 `<g>` 空壳，图元铺在空壳中。
+* 默认插槽给出内容时改由插槽内容填充根，元素不再生成 glyph 与图元；
+* 判据是插槽产出中有真正会渲染出内容的节点：既不是插槽函数是否存在（宿主可能恒传一个插槽），
+* 也不是产出数组非空（`v-if` 为假时产出中还剩一个注释节点）。
 */
 const XhIcon = defineComponent({
 	name: "XhIcon",
 	props: {
-		icon: {
-			type: Object,
-			default: void 0
-		},
-		label: {
-			type: String,
-			default: void 0
-		},
-		size: {
-			type: String,
-			default: void 0
-		},
-		weight: {
-			type: String,
-			default: void 0
-		},
-		tone: {
-			type: String,
-			default: void 0
-		}
+		icon: { type: Object },
+		label: { type: String },
+		size: { type: String },
+		weight: { type: String },
+		tone: { type: String },
+		rotate: { type: [Number, String] },
+		flip: { type: String }
 	},
 	setup(props, { slots }) {
 		const ctx = useIcon(withXhConfig("icon", props));

package/dist/components/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","names":[],"sources":["../../../src/components/icon/icon.ts"],"sourcesContent":["import type { IconProps, IconWeight } from '@xihan-ui/headless'\nimport type { IconNode, IconRecord, Size, Tone } from '@xihan-ui/kernel'\nimport type { PropType, VNode } from 'vue'\nimport { defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { slotPaints } from '../../runtime/slot-content'\nimport { useIcon } from './use-icon'\n\n/**\n * 把一个图元节点建成 VNode，递归到底。\n * 标签与属性名逐字透传（连字符与大小写都保留），命名空间由 Vue 从父 `<svg>` 往下带。\n */\nfunction renderNode(node: IconNode): VNode {\n  return h(node.tag, node.attrs as Record<string, unknown> | undefined, node.children?.map(renderNode))\n}\n\n/**\n * 根 `<svg>` 加一层 `<g>` 空壳，图元铺在空壳里。\n * 默认插槽给出了内容时改由插槽内容填充根，元素不再生成 glyph 与图元；\n * 判据是插槽产出里有真会画出东西的节点：既不是插槽函数存不存在（宿主可能恒传一个插槽），\n * 也不是产出数组非空（`v-if` 为假时产出里还剩一个注释节点）。\n */\nexport const XhIcon = defineComponent({\n  name: 'XhIcon',\n  // 缺省值由 connect 给出，这里一律 default: undefined\n  props: {\n    icon: { type: Object as PropType<IconRecord>, default: undefined },\n    label: { type: String, default: undefined },\n    size: { type: String as PropType<Size>, default: undefined },\n    weight: { type: String as PropType<IconWeight>, default: undefined },\n    tone: { type: String as PropType<Tone>, default: undefined },\n  },\n  setup(props, { slots }) {\n    const ctx = useIcon(withXhConfig('icon', props) as IconProps)\n    return () => {\n      const authored = slots.default?.()\n      return h(\n        'svg',\n        ctx.api.value.getRootProps() as Record<string, unknown>,\n        slotPaints(authored)\n          ? authored\n          : [h(\n              'g',\n              ctx.api.value.getGlyphProps() as Record<string, unknown>,\n              ctx.api.value.nodes.map(renderNode),\n            )],\n      )\n    }\n  },\n})\n"],"mappings":";;;;;;;;;AAYA,SAAS,WAAW,MAAuB;CACzC,OAAO,EAAE,KAAK,KAAK,KAAK,OAA8C,KAAK,UAAU,IAAI,UAAU,CAAC;AACtG;;;;;;;AAQA,MAAa,SAAS,gBAAgB;CACpC,MAAM;CAEN,OAAO;EACL,MAAM;GAAE,MAAM;GAAgC,SAAS,KAAA;EAAU;EACjE,OAAO;GAAE,MAAM;GAAQ,SAAS,KAAA;EAAU;EAC1C,MAAM;GAAE,MAAM;GAA0B,SAAS,KAAA;EAAU;EAC3D,QAAQ;GAAE,MAAM;GAAgC,SAAS,KAAA;EAAU;EACnE,MAAM;GAAE,MAAM;GAA0B,SAAS,KAAA;EAAU;CAC7D;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,QAAQ,aAAa,QAAQ,KAAK,CAAc;EAC5D,aAAa;GACX,MAAM,WAAW,MAAM,UAAU;GACjC,OAAO,EACL,OACA,IAAI,IAAI,MAAM,aAAa,GAC3B,WAAW,QAAQ,IACf,WACA,CAAC,EACC,KACA,IAAI,IAAI,MAAM,cAAc,GAC5B,IAAI,IAAI,MAAM,MAAM,IAAI,UAAU,CACpC,CAAC,CACP;EACF;CACF;AACF,CAAC"}
+{"version":3,"file":"icon.js","names":[],"sources":["../../../src/components/icon/icon.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 icon 相关实现。\n\nimport type { IconNode, IconRecord, Tone } from '@xihan-ui/core'\nimport type { IconFlip, IconProps, IconRotate, IconSize, IconWeight } from '@xihan-ui/headless'\nimport type { PropType, VNode } from 'vue'\nimport { defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { slotPaints } from '../../runtime/slot-content'\nimport { useIcon } from './use-icon'\n\n/**\n * 把一个图元节点建为 VNode，递归到底。\n * 标签与属性名逐字透传（连字符与大小写都保留），命名空间由 Vue 从父 `<svg>` 向下传递。\n */\nfunction renderNode(node: IconNode): VNode {\n  return h(node.tag, node.attrs as Record<string, unknown> | undefined, node.children?.map(renderNode))\n}\n\n/**\n * 根 `<svg>` 加一层 `<g>` 空壳，图元铺在空壳中。\n * 默认插槽给出内容时改由插槽内容填充根，元素不再生成 glyph 与图元；\n * 判据是插槽产出中有真正会渲染出内容的节点：既不是插槽函数是否存在（宿主可能恒传一个插槽），\n * 也不是产出数组非空（`v-if` 为假时产出中还剩一个注释节点）。\n */\nexport const XhIcon = defineComponent({\n  name: 'XhIcon',\n  // 缺省值由 connect 给出；普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    icon: { type: Object as PropType<IconRecord> },\n    label: { type: String },\n    size: { type: String as PropType<IconSize> },\n    weight: { type: String as PropType<IconWeight> },\n    tone: { type: String as PropType<Tone> },\n    rotate: { type: [Number, String] as PropType<IconRotate | string> },\n    flip: { type: String as PropType<IconFlip> },\n  },\n  setup(props, { slots }) {\n    const ctx = useIcon(withXhConfig('icon', props) as IconProps)\n    return () => {\n      const authored = slots.default?.()\n      return h(\n        'svg',\n        ctx.api.value.getRootProps() as Record<string, unknown>,\n        slotPaints(authored)\n          ? authored\n          : [h(\n              'g',\n              ctx.api.value.getGlyphProps() as Record<string, unknown>,\n              ctx.api.value.nodes.map(renderNode),\n            )],\n      )\n    }\n  },\n})\n"],"mappings":";;;;;;;;;AAmBA,SAAS,WAAW,MAAuB;CACzC,OAAO,EAAE,KAAK,KAAK,KAAK,OAA8C,KAAK,UAAU,IAAI,UAAU,CAAC;AACtG;;;;;;;AAQA,MAAa,SAAS,gBAAgB;CACpC,MAAM;CAEN,OAAO;EACL,MAAM,EAAE,MAAM,OAA+B;EAC7C,OAAO,EAAE,MAAM,OAAO;EACtB,MAAM,EAAE,MAAM,OAA6B;EAC3C,QAAQ,EAAE,MAAM,OAA+B;EAC/C,MAAM,EAAE,MAAM,OAAyB;EACvC,QAAQ,EAAE,MAAM,CAAC,QAAQ,MAAM,EAAmC;EAClE,MAAM,EAAE,MAAM,OAA6B;CAC7C;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,MAAM,QAAQ,aAAa,QAAQ,KAAK,CAAc;EAC5D,aAAa;GACX,MAAM,WAAW,MAAM,UAAU;GACjC,OAAO,EACL,OACA,IAAI,IAAI,MAAM,aAAa,GAC3B,WAAW,QAAQ,IACf,WACA,CAAC,EACC,KACA,IAAI,IAAI,MAAM,cAAc,GAC5B,IAAI,IAAI,MAAM,MAAM,IAAI,UAAU,CACpC,CAAC,CACP;EACF;CACF;AACF,CAAC"}

package/dist/components/icon/use-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-icon.d.ts","names":[],"sources":["../../../src/components/icon/use-icon.ts"],"mappings":";;;UAMiB;EACf,KAAK,YAAY;;iBAIH,QAAQ,OAAO,YAAY"}
+{"version":3,"file":"use-icon.d.ts","names":[],"sources":["../../../src/components/icon/use-icon.ts"],"mappings":";;;UAaiB;EACf,KAAK,YAAY;;iBAIH,QAAQ,OAAO,YAAY"}

package/dist/components/icon/use-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-icon.js","names":[],"sources":["../../../src/components/icon/use-icon.ts"],"sourcesContent":["import type { IconApi, IconProps } from '@xihan-ui/headless'\nimport type { ComputedRef } from 'vue'\nimport { connectIcon } from '@xihan-ui/headless'\nimport { computed } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\n\nexport interface IconContext {\n  api: ComputedRef<IconApi>\n}\n\n// Icon 无状态机也不派生 part id，props 变了由 computed 重算属性\nexport function useIcon(props: IconProps): IconContext {\n  const api = computed(() => connectIcon(props, vueNormalize))\n  return { api }\n}\n"],"mappings":";;;;AAWA,SAAgB,QAAQ,OAA+B;CAErD,OAAO,EAAE,KADG,eAAe,YAAY,OAAO,YAAY,CAC/C,EAAE;AACf"}
+{"version":3,"file":"use-icon.js","names":[],"sources":["../../../src/components/icon/use-icon.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use icon 相关实现。\n\nimport type { IconApi, IconProps } from '@xihan-ui/headless'\nimport type { ComputedRef } from 'vue'\nimport { connectIcon } from '@xihan-ui/headless'\nimport { computed } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\n\nexport interface IconContext {\n  api: ComputedRef<IconApi>\n}\n\n// Icon 无状态机也不派生 part id，props 变了由 computed 重算属性\nexport function useIcon(props: IconProps): IconContext {\n  const api = computed(() => connectIcon(props, vueNormalize))\n  return { api }\n}\n"],"mappings":";;;;AAkBA,SAAgB,QAAQ,OAA+B;CAErD,OAAO,EAAE,KADG,eAAe,YAAY,OAAO,YAAY,CAC/C,EAAE;AACf"}

package/dist/components/icon-wrapper/icon-wrapper.d.ts

@@ -1,39 +1,29 @@
 import { PropType } from "vue";
-import { ActionVariant, Size, Tone } from "@xihan-ui/kernel";
+import { ActionVariant, Size, Tone } from "@xihan-ui/core";
 //#region src/components/icon-wrapper/icon-wrapper.d.ts
 declare const XhIconWrapper: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   variant: {
     type: PropType<ActionVariant>;
-    default: undefined;
   };
   tone: {
     type: PropType<Tone>;
-    default: undefined;
   };
   size: {
     type: PropType<Size>;
-    default: undefined;
   };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   variant: {
     type: PropType<ActionVariant>;
-    default: undefined;
   };
   tone: {
     type: PropType<Tone>;
-    default: undefined;
   };
   size: {
     type: PropType<Size>;
-    default: undefined;
   };
-}>> & Readonly<{}>, {
-  tone: Tone;
-  size: Size;
-  variant: ActionVariant;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
 export { XhIconWrapper };
 //# sourceMappingURL=icon-wrapper.d.ts.map

package/dist/components/icon-wrapper/icon-wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-wrapper.d.ts","names":[],"sources":["../../../src/components/icon-wrapper/icon-wrapper.ts"],"mappings":";;;cAQa,6BAAa,8BAAA;;IAIK,MAAA,SAAS;;;;IACZ,MAAA,SAAS;;;;IACT,MAAA,SAAS;;;;;;;IAFN,MAAA,SAAS;;;;IACZ,MAAA,SAAS;;;;IACT,MAAA,SAAS;;;;;;;qCASnC"}
+{"version":3,"file":"icon-wrapper.d.ts","names":[],"sources":["../../../src/components/icon-wrapper/icon-wrapper.ts"],"mappings":";;;cAea,6BAAa,8BAAA;;IAIK,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;;;;;IAFN,MAAA,SAAS;;;IACZ,MAAA,SAAS;;;IACT,MAAA,SAAS;;MASnC,oDAAA"}

package/dist/components/icon-wrapper/icon-wrapper.js

@@ -6,18 +6,9 @@ import { connectIconWrapper } from "@xihan-ui/headless";
 const XhIconWrapper = defineComponent({
 	name: "XhIconWrapper",
 	props: {
-		variant: {
-			type: String,
-			default: void 0
-		},
-		tone: {
-			type: String,
-			default: void 0
-		},
-		size: {
-			type: String,
-			default: void 0
-		}
+		variant: { type: String },
+		tone: { type: String },
+		size: { type: String }
 	},
 	setup(props, { slots }) {
 		return () => h("span", connectIconWrapper(withXhConfig("icon-wrapper", props), vueNormalize).getRootProps(), slots.default?.());

package/dist/components/icon-wrapper/icon-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-wrapper.js","names":[],"sources":["../../../src/components/icon-wrapper/icon-wrapper.ts"],"sourcesContent":["import type { IconWrapperProps } from '@xihan-ui/headless'\nimport type { ActionVariant, Size, Tone } from '@xihan-ui/kernel'\nimport type { PropType } from 'vue'\nimport { connectIconWrapper } from '@xihan-ui/headless'\nimport { defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { vueNormalize } from '../../runtime/normalize-props'\n\nexport const XhIconWrapper = defineComponent({\n  name: 'XhIconWrapper',\n  // 有 connect 兜底的 prop 一律 default: undefined\n  props: {\n    variant: { type: String as PropType<ActionVariant>, default: undefined },\n    tone: { type: String as PropType<Tone>, default: undefined },\n    size: { type: String as PropType<Size>, default: undefined },\n  },\n  setup(props, { slots }) {\n    return () => h(\n      'span',\n      connectIconWrapper(withXhConfig('icon-wrapper', props) as IconWrapperProps, vueNormalize).getRootProps() as Record<string, unknown>,\n      slots.default?.(),\n    )\n  },\n})\n"],"mappings":";;;;;AAQA,MAAa,gBAAgB,gBAAgB;CAC3C,MAAM;CAEN,OAAO;EACL,SAAS;GAAE,MAAM;GAAmC,SAAS,KAAA;EAAU;EACvE,MAAM;GAAE,MAAM;GAA0B,SAAS,KAAA;EAAU;EAC3D,MAAM;GAAE,MAAM;GAA0B,SAAS,KAAA;EAAU;CAC7D;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,aAAa,EACX,QACA,mBAAmB,aAAa,gBAAgB,KAAK,GAAuB,YAAY,CAAC,CAAC,aAAa,GACvG,MAAM,UAAU,CAClB;CACF;AACF,CAAC"}
+{"version":3,"file":"icon-wrapper.js","names":[],"sources":["../../../src/components/icon-wrapper/icon-wrapper.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 icon wrapper 相关实现。\n\nimport type { ActionVariant, Size, Tone } from '@xihan-ui/core'\nimport type { IconWrapperProps } from '@xihan-ui/headless'\nimport type { PropType } from 'vue'\nimport { connectIconWrapper } from '@xihan-ui/headless'\nimport { defineComponent, h } from 'vue'\nimport { withXhConfig } from '../../config/config'\nimport { vueNormalize } from '../../runtime/normalize-props'\n\nexport const XhIconWrapper = defineComponent({\n  name: 'XhIconWrapper',\n  // 有 connect 兜底的 prop：普通类型省略 default，Boolean 显式保留 undefined\n  props: {\n    variant: { type: String as PropType<ActionVariant> },\n    tone: { type: String as PropType<Tone> },\n    size: { type: String as PropType<Size> },\n  },\n  setup(props, { slots }) {\n    return () => h(\n      'span',\n      connectIconWrapper(withXhConfig('icon-wrapper', props) as IconWrapperProps, vueNormalize).getRootProps() as Record<string, unknown>,\n      slots.default?.(),\n    )\n  },\n})\n"],"mappings":";;;;;AAeA,MAAa,gBAAgB,gBAAgB;CAC3C,MAAM;CAEN,OAAO;EACL,SAAS,EAAE,MAAM,OAAkC;EACnD,MAAM,EAAE,MAAM,OAAyB;EACvC,MAAM,EAAE,MAAM,OAAyB;CACzC;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,aAAa,EACX,QACA,mBAAmB,aAAa,gBAAgB,KAAK,GAAuB,YAAY,CAAC,CAAC,aAAa,GACvG,MAAM,UAAU,CAClB;CACF;AACF,CAAC"}

package/dist/components/image/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/image/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { ImageContext } from './use-image'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<ImageContext> = Symbol.for('xh-image')\n\nexport function provideImage(ctx: ImageContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useImageContext(): ImageContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Image 部件必须用在 XhImageRoot 内')\n  return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAkC,OAAO,IAAI,UAAU;AAE7D,SAAgB,aAAa,KAAyB;CACpD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,kBAAgC;CAC9C,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,iCAAiC;CACnD,OAAO;AACT"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/image/context.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 context 相关实现。\n\nimport type { InjectionKey } from 'vue'\nimport type { ImageContext } from './use-image'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<ImageContext> = Symbol.for('xh-image')\n\nexport function provideImage(ctx: ImageContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useImageContext(): ImageContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] Image 部件必须用在 XhImageRoot 内')\n  return ctx\n}\n"],"mappings":";;AAWA,MAAM,MAAkC,OAAO,IAAI,UAAU;AAE7D,SAAgB,aAAa,KAAyB;CACpD,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,kBAAgC;CAC9C,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,iCAAiC;CACnD,OAAO;AACT"}

package/dist/components/image/image.d.ts

@@ -3,20 +3,17 @@ import { SlotsType, VNode } from "vue";
 import { ImageApi, ImageSchema } from "@xihan-ui/headless";
 //#region src/components/image/image.d.ts
 type ImageProps = ImageSchema['props'];
-/** 默认插槽的载荷：加载状态、是否已加载完，以及回退内容此刻该不该露面。 */
-type ImageRootSlotProps = Pick<ImageApi, 'status' | 'loaded' | 'showFallback'>;
+/** 默认插槽的载荷：加载状态、是否已加载完成，以及回退内容当前是否应当显示。 */
+type ImageRootSlotProps = Pick<ImageApi, 'status' | 'loaded' | 'showFallback' | 'showPlaceholder'>;
 declare const XhImageRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   src: {
     type: StringConstructor;
-    default: undefined;
   };
   alt: {
     type: StringConstructor;
-    default: undefined;
   };
   fallbackDelay: {
     type: NumberConstructor;
-    default: undefined;
   };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
@@ -25,31 +22,27 @@ declare const XhImageRoot: import("vue").DefineComponent<import("vue").ExtractPr
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   src: {
     type: StringConstructor;
-    default: undefined;
   };
   alt: {
     type: StringConstructor;
-    default: undefined;
   };
   fallbackDelay: {
     type: NumberConstructor;
-    default: undefined;
   };
 }>> & Readonly<{
   "onStatus-change"?: ((_details: import("@xihan-ui/headless").ImageStatusChangeDetails) => any) | undefined;
-}>, {
-  src: string;
-  alt: string;
-  fallbackDelay: number;
-}, SlotsType<{
+}>, {}, SlotsType<{
   default?: (props: ImageRootSlotProps) => VNode[];
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhImageImage: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const XhImagePlaceholder: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const XhImageFallback: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
-export { ImageRootSlotProps, XhImageFallback, XhImageImage, XhImageRoot };
+export { ImageRootSlotProps, XhImageFallback, XhImageImage, XhImagePlaceholder, XhImageRoot };
 //# sourceMappingURL=image.d.ts.map

package/dist/components/image/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","names":[],"sources":["../../../src/components/image/image.ts"],"mappings":";;;;KAOK,aAAa;;KAGN,qBAAqB,KAAK;cAEzB,2BAAW,8BAAA;;;;;;;;;;;;;;;;EAUQ,kBAAA,UAAA,UAAU;;;;;;;;;;;;;;;;;;;;;EAG5B,WAAC,OAAO,uBAAuB;kCAY3C;cAEW,4BAAY,0BAAA,oBAAA,4BAAA;;8BAsBvB,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,+BAAe,0BAAA,oBAAA,4BAAA;;8BAO1B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}
+{"version":3,"file":"image.d.ts","names":[],"sources":["../../../src/components/image/image.ts"],"mappings":";;;;KAcK,aAAa;;KAGN,qBAAqB,KAAK;cAEzB,2BAAW,8BAAA;;;;;;;;;;;;;EAUQ,kBAAA,UAAA,UAAU;;;;;;;;;;;;;;EAG5B,WAAC,OAAO,uBAAuB;kCAa3C;cAEW,4BAAY,0BAAA,oBAAA,4BAAA;;8BAsBvB,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,kCAAkB,0BAAA,oBAAA,4BAAA;;8BAO7B,qCAAA,iDAAA,aAAA,eAAA,oDAAA;cAEW,+BAAe,0BAAA,oBAAA,4BAAA;;8BAO1B,qCAAA,iDAAA,aAAA,eAAA,oDAAA"}

package/dist/components/image/image.js

@@ -5,18 +5,9 @@ import { defineComponent, h, ref, watch } from "vue";
 const XhImageRoot = defineComponent({
 	name: "XhImageRoot",
 	props: {
-		src: {
-			type: String,
-			default: void 0
-		},
-		alt: {
-			type: String,
-			default: void 0
-		},
-		fallbackDelay: {
-			type: Number,
-			default: void 0
-		}
+		src: { type: String },
+		alt: { type: String },
+		fallbackDelay: { type: Number }
 	},
 	emits: { "status-change": (_details) => true },
 	slots: Object,
@@ -27,7 +18,8 @@ const XhImageRoot = defineComponent({
 		return () => h("div", ctx.api.value.getRootProps(), slots.default?.({
 			status: ctx.api.value.status,
 			loaded: ctx.api.value.loaded,
-			showFallback: ctx.api.value.showFallback
+			showFallback: ctx.api.value.showFallback,
+			showPlaceholder: ctx.api.value.showPlaceholder
 		}));
 	}
 });
@@ -51,6 +43,13 @@ const XhImageImage = defineComponent({
 		});
 	}
 });
+const XhImagePlaceholder = defineComponent({
+	name: "XhImagePlaceholder",
+	setup(_, { slots }) {
+		const ctx = useImageContext();
+		return () => h("div", ctx.api.value.getPlaceholderProps(), slots.default?.());
+	}
+});
 const XhImageFallback = defineComponent({
 	name: "XhImageFallback",
 	setup(_, { slots }) {
@@ -59,6 +58,6 @@ const XhImageFallback = defineComponent({
 	}
 });
 //#endregion
-export { XhImageFallback, XhImageImage, XhImageRoot };
+export { XhImageFallback, XhImageImage, XhImagePlaceholder, XhImageRoot };
 
 //# sourceMappingURL=image.js.map

package/dist/components/image/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","names":[],"sources":["../../../src/components/image/image.ts"],"sourcesContent":["import type { ImageApi, ImageSchema } from '@xihan-ui/headless'\nimport type { SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h, ref, watch } from 'vue'\nimport { provideImage, useImageContext } from './context'\nimport { useImage } from './use-image'\n\ntype ImageProps = ImageSchema['props']\n\n/** 默认插槽的载荷：加载状态、是否已加载完，以及回退内容此刻该不该露面。 */\nexport type ImageRootSlotProps = Pick<ImageApi, 'status' | 'loaded' | 'showFallback'>\n\nexport const XhImageRoot = defineComponent({\n  name: 'XhImageRoot',\n  props: {\n    // 缺席即无来源，落回退态\n    src: { type: String, default: undefined },\n    alt: { type: String, default: undefined },\n    fallbackDelay: { type: Number, default: undefined },\n  },\n  // status-change 携带 { status }\n  emits: {\n    'status-change': (_details: PayloadOf<ImageProps, 'onStatusChange'>) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: ImageRootSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const notify: ImageProps['onStatusChange'] = details => emit('status-change', details)\n    const ctx = useImage(props as ImageProps, notify)\n    provideImage(ctx)\n    return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n      status: ctx.api.value.status,\n      loaded: ctx.api.value.loaded,\n      showFallback: ctx.api.value.showFallback,\n    }))\n  },\n})\n\nexport const XhImageImage = defineComponent({\n  name: 'XhImageImage',\n  setup() {\n    const ctx = useImageContext()\n    const imageEl = ref<HTMLImageElement | null>(null)\n\n    // 进入 loading 时为已就绪的图（如注水前就加载完的 SSR 图）补报一次加载完成\n    watch(() => ctx.api.value.status, (status) => {\n      const { service } = ctx\n      if (status !== 'loading' || service.getStatus() !== 'Started')\n        return\n      const img = imageEl.value\n      if (img?.complete && img.naturalWidth > 0 && img.currentSrc === img.src)\n        service.send({ type: 'IMAGE.LOAD' })\n    }, { immediate: true, flush: 'post' })\n\n    // 节点常挂，靠 hidden 显隐\n    return () => h('img', {\n      ...ctx.api.value.getImageProps() as Record<string, unknown>,\n      ref: imageEl,\n    })\n  },\n})\n\nexport const XhImageFallback = defineComponent({\n  name: 'XhImageFallback',\n  setup(_, { slots }) {\n    const ctx = useImageContext()\n    // 节点常挂，靠 hidden 显隐\n    return () => h('div', ctx.api.value.getFallbackProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n"],"mappings":";;;;AAYA,MAAa,cAAc,gBAAgB;CACzC,MAAM;CACN,OAAO;EAEL,KAAK;GAAE,MAAM;GAAQ,SAAS,KAAA;EAAU;EACxC,KAAK;GAAE,MAAM;GAAQ,SAAS,KAAA;EAAU;EACxC,eAAe;GAAE,MAAM;GAAQ,SAAS,KAAA;EAAU;CACpD;CAEA,OAAO,EACL,kBAAkB,aAAsD,KAC1E;CACA,OAAO;CAGP,MAAM,OAAO,EAAE,OAAO,QAAQ;EAC5B,MAAM,UAAuC,YAAW,KAAK,iBAAiB,OAAO;EACrF,MAAM,MAAM,SAAS,OAAqB,MAAM;EAChD,aAAa,GAAG;EAChB,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,aAAa,GAA8B,MAAM,UAAU;GAC7F,QAAQ,IAAI,IAAI,MAAM;GACtB,QAAQ,IAAI,IAAI,MAAM;GACtB,cAAc,IAAI,IAAI,MAAM;EAC9B,CAAC,CAAC;CACJ;AACF,CAAC;AAED,MAAa,eAAe,gBAAgB;CAC1C,MAAM;CACN,QAAQ;EACN,MAAM,MAAM,gBAAgB;EAC5B,MAAM,UAAU,IAA6B,IAAI;EAGjD,YAAY,IAAI,IAAI,MAAM,SAAS,WAAW;GAC5C,MAAM,EAAE,YAAY;GACpB,IAAI,WAAW,aAAa,QAAQ,UAAU,MAAM,WAClD;GACF,MAAM,MAAM,QAAQ;GACpB,IAAI,KAAK,YAAY,IAAI,eAAe,KAAK,IAAI,eAAe,IAAI,KAClE,QAAQ,KAAK,EAAE,MAAM,aAAa,CAAC;EACvC,GAAG;GAAE,WAAW;GAAM,OAAO;EAAO,CAAC;EAGrC,aAAa,EAAE,OAAO;GACpB,GAAG,IAAI,IAAI,MAAM,cAAc;GAC/B,KAAK;EACP,CAAC;CACH;AACF,CAAC;AAED,MAAa,kBAAkB,gBAAgB;CAC7C,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,gBAAgB;EAE5B,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,iBAAiB,GAA8B,MAAM,UAAU,CAAC;CACtG;AACF,CAAC"}
+{"version":3,"file":"image.js","names":[],"sources":["../../../src/components/image/image.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 image 相关实现。\n\nimport type { ImageApi, ImageSchema } from '@xihan-ui/headless'\nimport type { SlotsType, VNode } from 'vue'\nimport type { PayloadOf } from '../../runtime/payload'\nimport { defineComponent, h, ref, watch } from 'vue'\nimport { provideImage, useImageContext } from './context'\nimport { useImage } from './use-image'\n\ntype ImageProps = ImageSchema['props']\n\n/** 默认插槽的载荷：加载状态、是否已加载完成，以及回退内容当前是否应当显示。 */\nexport type ImageRootSlotProps = Pick<ImageApi, 'status' | 'loaded' | 'showFallback' | 'showPlaceholder'>\n\nexport const XhImageRoot = defineComponent({\n  name: 'XhImageRoot',\n  props: {\n    // 缺席即无来源，落回退态\n    src: { type: String },\n    alt: { type: String },\n    fallbackDelay: { type: Number },\n  },\n  // status-change 携带 { status }\n  emits: {\n    'status-change': (_details: PayloadOf<ImageProps, 'onStatusChange'>) => true,\n  },\n  slots: Object as SlotsType<{\n    default?: (props: ImageRootSlotProps) => VNode[]\n  }>,\n  setup(props, { slots, emit }) {\n    const notify: ImageProps['onStatusChange'] = details => emit('status-change', details)\n    const ctx = useImage(props as ImageProps, notify)\n    provideImage(ctx)\n    return () => h('div', ctx.api.value.getRootProps() as Record<string, unknown>, slots.default?.({\n      status: ctx.api.value.status,\n      loaded: ctx.api.value.loaded,\n      showFallback: ctx.api.value.showFallback,\n      showPlaceholder: ctx.api.value.showPlaceholder,\n    }))\n  },\n})\n\nexport const XhImageImage = defineComponent({\n  name: 'XhImageImage',\n  setup() {\n    const ctx = useImageContext()\n    const imageEl = ref<HTMLImageElement | null>(null)\n\n    // 进入 loading 时为已就绪的图（如注水前就加载完的 SSR 图）补报一次加载完成\n    watch(() => ctx.api.value.status, (status) => {\n      const { service } = ctx\n      if (status !== 'loading' || service.getStatus() !== 'Started')\n        return\n      const img = imageEl.value\n      if (img?.complete && img.naturalWidth > 0 && img.currentSrc === img.src)\n        service.send({ type: 'IMAGE.LOAD' })\n    }, { immediate: true, flush: 'post' })\n\n    // 节点常挂，靠 hidden 显隐\n    return () => h('img', {\n      ...ctx.api.value.getImageProps() as Record<string, unknown>,\n      ref: imageEl,\n    })\n  },\n})\n\nexport const XhImagePlaceholder = defineComponent({\n  name: 'XhImagePlaceholder',\n  setup(_, { slots }) {\n    const ctx = useImageContext()\n    // 节点常挂，靠 hidden 显隐\n    return () => h('div', ctx.api.value.getPlaceholderProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n\nexport const XhImageFallback = defineComponent({\n  name: 'XhImageFallback',\n  setup(_, { slots }) {\n    const ctx = useImageContext()\n    // 节点常挂，靠 hidden 显隐\n    return () => h('div', ctx.api.value.getFallbackProps() as Record<string, unknown>, slots.default?.())\n  },\n})\n"],"mappings":";;;;AAmBA,MAAa,cAAc,gBAAgB;CACzC,MAAM;CACN,OAAO;EAEL,KAAK,EAAE,MAAM,OAAO;EACpB,KAAK,EAAE,MAAM,OAAO;EACpB,eAAe,EAAE,MAAM,OAAO;CAChC;CAEA,OAAO,EACL,kBAAkB,aAAsD,KAC1E;CACA,OAAO;CAGP,MAAM,OAAO,EAAE,OAAO,QAAQ;EAC5B,MAAM,UAAuC,YAAW,KAAK,iBAAiB,OAAO;EACrF,MAAM,MAAM,SAAS,OAAqB,MAAM;EAChD,aAAa,GAAG;EAChB,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,aAAa,GAA8B,MAAM,UAAU;GAC7F,QAAQ,IAAI,IAAI,MAAM;GACtB,QAAQ,IAAI,IAAI,MAAM;GACtB,cAAc,IAAI,IAAI,MAAM;GAC5B,iBAAiB,IAAI,IAAI,MAAM;EACjC,CAAC,CAAC;CACJ;AACF,CAAC;AAED,MAAa,eAAe,gBAAgB;CAC1C,MAAM;CACN,QAAQ;EACN,MAAM,MAAM,gBAAgB;EAC5B,MAAM,UAAU,IAA6B,IAAI;EAGjD,YAAY,IAAI,IAAI,MAAM,SAAS,WAAW;GAC5C,MAAM,EAAE,YAAY;GACpB,IAAI,WAAW,aAAa,QAAQ,UAAU,MAAM,WAClD;GACF,MAAM,MAAM,QAAQ;GACpB,IAAI,KAAK,YAAY,IAAI,eAAe,KAAK,IAAI,eAAe,IAAI,KAClE,QAAQ,KAAK,EAAE,MAAM,aAAa,CAAC;EACvC,GAAG;GAAE,WAAW;GAAM,OAAO;EAAO,CAAC;EAGrC,aAAa,EAAE,OAAO;GACpB,GAAG,IAAI,IAAI,MAAM,cAAc;GAC/B,KAAK;EACP,CAAC;CACH;AACF,CAAC;AAED,MAAa,qBAAqB,gBAAgB;CAChD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,gBAAgB;EAE5B,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,oBAAoB,GAA8B,MAAM,UAAU,CAAC;CACzG;AACF,CAAC;AAED,MAAa,kBAAkB,gBAAgB;CAC7C,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,MAAM,gBAAgB;EAE5B,aAAa,EAAE,OAAO,IAAI,IAAI,MAAM,iBAAiB,GAA8B,MAAM,UAAU,CAAC;CACtG;AACF,CAAC"}

package/dist/components/image/use-image.d.ts

@@ -1,6 +1,6 @@
 import { ComputedRef } from "vue";
+import { Service } from "@xihan-ui/core";
 import { ImageApi, ImageSchema } from "@xihan-ui/headless";
-import { Service } from "@xihan-ui/machine";
 //#region src/components/image/use-image.d.ts
 interface ImageContext {
   service: Service<ImageSchema>;

package/dist/components/image/use-image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-image.d.ts","names":[],"sources":["../../../src/components/image/use-image.ts"],"mappings":";;;;UAQiB;EACf,SAAS,QAAQ;EACjB,KAAK,YAAY;;iBAGH,SACd,OAAO,sBACP,iBAAiB,yCAChB"}
+{"version":3,"file":"use-image.d.ts","names":[],"sources":["../../../src/components/image/use-image.ts"],"mappings":";;;;UAeiB;EACf,SAAS,QAAQ;EACjB,KAAK,YAAY;;iBAGH,SACd,OAAO,sBACP,iBAAiB,yCAChB"}

package/dist/components/image/use-image.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-image.js","names":[],"sources":["../../../src/components/image/use-image.ts"],"sourcesContent":["import type { ImageApi, ImageSchema } from '@xihan-ui/headless'\nimport type { Service } from '@xihan-ui/machine'\nimport type { ComputedRef } from 'vue'\nimport { connectImage, imageMachine } from '@xihan-ui/headless'\nimport { computed } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\n\nexport interface ImageContext {\n  service: Service<ImageSchema>\n  api: ComputedRef<ImageApi>\n}\n\nexport function useImage(\n  props: ImageSchema['props'],\n  onStatusChange?: ImageSchema['props']['onStatusChange'],\n): ImageContext {\n  const service = useMachine(imageMachine, () => ({ ...props, onStatusChange }))\n  const api = computed(() => connectImage(service, vueNormalize))\n  return { service, api }\n}\n"],"mappings":";;;;;AAaA,SAAgB,SACd,OACA,gBACc;CACd,MAAM,UAAU,WAAW,qBAAqB;EAAE,GAAG;EAAO;CAAe,EAAE;CAE7E,OAAO;EAAE;EAAS,KADN,eAAe,aAAa,SAAS,YAAY,CACzC;CAAE;AACxB"}
+{"version":3,"file":"use-image.js","names":[],"sources":["../../../src/components/image/use-image.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 use image 相关实现。\n\nimport type { Service } from '@xihan-ui/core'\nimport type { ImageApi, ImageSchema } from '@xihan-ui/headless'\nimport type { ComputedRef } from 'vue'\nimport { connectImage, imageMachine } from '@xihan-ui/headless'\nimport { computed } from 'vue'\nimport { vueNormalize } from '../../runtime/normalize-props'\nimport { useMachine } from '../../runtime/use-machine'\n\nexport interface ImageContext {\n  service: Service<ImageSchema>\n  api: ComputedRef<ImageApi>\n}\n\nexport function useImage(\n  props: ImageSchema['props'],\n  onStatusChange?: ImageSchema['props']['onStatusChange'],\n): ImageContext {\n  const service = useMachine(imageMachine, () => ({ ...props, onStatusChange }))\n  const api = computed(() => connectImage(service, vueNormalize))\n  return { service, api }\n}\n"],"mappings":";;;;;AAoBA,SAAgB,SACd,OACA,gBACc;CACd,MAAM,UAAU,WAAW,qBAAqB;EAAE,GAAG;EAAO;CAAe,EAAE;CAE7E,OAAO;EAAE;EAAS,KADN,eAAe,aAAa,SAAS,YAAY,CACzC;CAAE;AACxB"}

package/dist/components/image-cropper/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/components/image-cropper/context.ts"],"mappings":";;iBAUgB,0BAA0B"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/components/image-cropper/context.ts"],"mappings":";;iBAiBgB,0BAA0B"}

package/dist/components/image-cropper/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/image-cropper/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { ImageCropperContext } from './use-image-cropper'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<ImageCropperContext> = Symbol.for('xh-image-cropper')\n\nexport function provideImageCropper(ctx: ImageCropperContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useImageCropperContext(): ImageCropperContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] ImageCropper 部件必须用在 XhImageCropperRoot 内')\n  return ctx\n}\n"],"mappings":";;AAIA,MAAM,MAAyC,OAAO,IAAI,kBAAkB;AAE5E,SAAgB,oBAAoB,KAAgC;CAClE,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,yBAA8C;CAC5D,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,+CAA+C;CACjE,OAAO;AACT"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/image-cropper/context.ts"],"sourcesContent":["/*\n * Copyright (c) 2021-Present XiHanFun and contributors.\n * Licensed under the MIT License. See LICENSE in the project root for license information.\n */\n\n// 提供 context 相关实现。\n\nimport type { InjectionKey } from 'vue'\nimport type { ImageCropperContext } from './use-image-cropper'\nimport { inject, provide } from 'vue'\n\nconst KEY: InjectionKey<ImageCropperContext> = Symbol.for('xh-image-cropper')\n\nexport function provideImageCropper(ctx: ImageCropperContext): void {\n  provide(KEY, ctx)\n}\n\nexport function useImageCropperContext(): ImageCropperContext {\n  const ctx = inject(KEY, null)\n  if (!ctx)\n    throw new Error('[xh] ImageCropper 部件必须用在 XhImageCropperRoot 内')\n  return ctx\n}\n"],"mappings":";;AAWA,MAAM,MAAyC,OAAO,IAAI,kBAAkB;AAE5E,SAAgB,oBAAoB,KAAgC;CAClE,QAAQ,KAAK,GAAG;AAClB;AAEA,SAAgB,yBAA8C;CAC5D,MAAM,MAAM,OAAO,KAAK,IAAI;CAC5B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,+CAA+C;CACjE,OAAO;AACT"}