@will-ui/vue 1.0.0

package/dist/components/drawer/Drawer.js

@@ -0,0 +1,329 @@
+import useComponentConfig from "../../use/useComponentConfig.js";
+import { propSizeToCssVars, toCssVarsStyle } from "../../util/cssVars.js";
+import useGlobalZIndex from "../../use/useGlobalZIndex.js";
+import useEscStack from "../../use/useEscStack.js";
+import Mask_default from "../mask/Mask.js";
+import Loading_default from "../loading/Loading.js";
+import useScaleFromPoint, { captureScaleFromPoint } from "../../use/useScaleFromPoint.js";
+import { DRAWER_FALLBACK } from "./config.js";
+import { Fragment, Teleport, Transition, computed, createVNode, defineComponent, isVNode, mergeProps, nextTick, normalizeClass, onMounted, ref, vShow, watch, withDirectives } from "vue";
+//#region components/drawer/Drawer.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var Drawer_default = /* @__PURE__ */ defineComponent({
+	name: "Drawer",
+	components: {
+		Mask: Mask_default,
+		Loading: Loading_default
+	},
+	inheritAttrs: false,
+	props: {
+		bind: {
+			type: String,
+			default: void 0
+		},
+		show: {
+			type: Boolean,
+			default: false
+		},
+		hasMask: {
+			type: Boolean,
+			default: void 0
+		},
+		placement: {
+			type: String,
+			default: void 0
+		},
+		to: {
+			type: HTMLElement,
+			default: () => document.body
+		},
+		canCloseByClickMask: {
+			type: Boolean,
+			default: void 0
+		},
+		headerClass: [
+			String,
+			Object,
+			Array
+		],
+		bodyClass: [
+			String,
+			Object,
+			Array
+		],
+		footerClass: [
+			String,
+			Object,
+			Array
+		],
+		maskClass: [
+			String,
+			Object,
+			Array
+		],
+		maskStyle: { type: [
+			Object,
+			String,
+			Array
+		] },
+		/** 供 Confirm 等命令式用法：挂载后立即显示 */
+		isConfirm: Boolean,
+		beforeClose: Function,
+		afterClose: Function,
+		resizeAfterEnter: {
+			type: Boolean,
+			default: void 0
+		},
+		width: {
+			type: String,
+			default: void 0
+		},
+		height: {
+			type: String,
+			default: void 0
+		},
+		title: {
+			type: String,
+			default: void 0
+		},
+		/** 尺度核 → `--w-prop-drawer-size`（标题 / header / Close） */
+		size: {
+			type: Number,
+			default: void 0
+		},
+		/** 实例 CSS 变量 */
+		cssVars: {
+			type: Object,
+			default: void 0
+		},
+		loading: {
+			type: Object,
+			default: () => ({ show: false })
+		}
+	},
+	emits: {
+		"update:show": (_v) => true,
+		enter: (_el) => true,
+		"after-enter": () => true
+	},
+	setup(props, { attrs, emit, slots }) {
+		const cfg = useComponentConfig("Drawer", props, DRAWER_FALLBACK);
+		const center = ref();
+		const measureEl = ref();
+		const visible = ref(!!props.show);
+		/** center 外壳：打开时挂上，离场结束再卸 */
+		const showCenterShell = ref(false);
+		/** 对齐 Modal：先挂真实内容测原点，再播 w-scale */
+		const showMeasure = ref(false);
+		const showPanel = ref(false);
+		let openGen = 0;
+		const { zIndex, add, get } = useGlobalZIndex();
+		const { transformOrigin, measureOrigin, morphCss, fromTrigger, pinTriggerForLeave, unpinTrigger } = useScaleFromPoint(props.isConfirm ? "confirm" : void 0);
+		const placement = computed(() => cfg.value.placement || DRAWER_FALLBACK.placement);
+		const isCenter = computed(() => placement.value === "center");
+		const drawOptions = computed(() => {
+			const p = placement.value;
+			const isHorizontal = p === "left" || p === "right";
+			const isVertical = p === "top" || p === "bottom";
+			const style = {
+				...toCssVarsStyle({
+					...propSizeToCssVars("drawer", cfg.value.size),
+					...props.cssVars
+				}),
+				...typeof attrs.style === "object" && attrs.style ? attrs.style : null,
+				zIndex: zIndex.value
+			};
+			if (isCenter.value) {
+				style.transformOrigin = `${transformOrigin.x}px ${transformOrigin.y}px`;
+				Object.assign(style, morphCss.value);
+			}
+			if (isHorizontal && cfg.value.width) {
+				style.width = cfg.value.width;
+				style["--w-drawer-width"] = cfg.value.width;
+			}
+			if (isVertical && cfg.value.height) {
+				style.height = cfg.value.height;
+				style["--w-drawer-height"] = cfg.value.height;
+			}
+			return {
+				class: normalizeClass([
+					"w-drawer",
+					`w-drawer--${p}`,
+					isCenter.value && fromTrigger.value && "w-scale-from-trigger",
+					attrs.class
+				]),
+				style
+			};
+		});
+		let isClosing = false;
+		async function close() {
+			if (isClosing) return;
+			isClosing = true;
+			try {
+				if (props.beforeClose) {
+					if (await props.beforeClose()) visible.value = false;
+					else {
+						await nextTick();
+						emit("update:show", true);
+					}
+				} else visible.value = false;
+			} finally {
+				isClosing = false;
+			}
+		}
+		function show() {
+			add();
+			visible.value = true;
+		}
+		function afterLeave() {
+			showCenterShell.value = false;
+			showMeasure.value = false;
+			showPanel.value = false;
+			props.afterClose?.();
+			nextTick(() => unpinTrigger());
+		}
+		function afterEnter() {
+			emit("after-enter");
+			if (cfg.value.resizeAfterEnter) window.dispatchEvent(new Event("resize"));
+		}
+		function onEnter(el) {
+			emit("enter", el);
+		}
+		async function prepareCenterOpen(gen) {
+			showCenterShell.value = true;
+			showMeasure.value = true;
+			showPanel.value = false;
+			await nextTick();
+			if (gen !== openGen) return;
+			measureOrigin(measureEl.value);
+			showMeasure.value = false;
+			await nextTick();
+			if (gen !== openGen) return;
+			showPanel.value = true;
+		}
+		onMounted(() => {
+			if (props.isConfirm) visible.value = true;
+		});
+		watch(() => props.show, (v) => {
+			if (v) visible.value = v;
+			else if (visible.value) close();
+		});
+		watch(visible, (v) => {
+			if (v) {
+				add();
+				if (isCenter.value) {
+					captureScaleFromPoint();
+					prepareCenterOpen(++openGen);
+				}
+			} else if (isCenter.value) {
+				openGen += 1;
+				showMeasure.value = false;
+				showPanel.value = false;
+			}
+			emit("update:show", v);
+		});
+		useEscStack(visible, () => {
+			close();
+		}, () => get());
+		function renderLoading() {
+			return createVNode(Loading_default, {
+				...props.loading,
+				show: props.loading?.show,
+				transitionName: "w-fade-white",
+				class: "w-drawer-loading",
+				style: { "z-index": zIndex.value }
+			}, null);
+		}
+		function renderHeader() {
+			if (!slots.header && !cfg.value.title) return null;
+			return createVNode("div", { "class": ["w-drawer-header", props.headerClass] }, [slots.header?.({ close }) ?? createVNode("div", { "class": "w-drawer-title" }, [cfg.value.title])]);
+		}
+		function renderPanel(opts) {
+			const base = drawOptions.value;
+			return createVNode("div", mergeProps(base, {
+				"ref": opts?.measure ? measureEl : void 0,
+				"style": {
+					...base.style,
+					...opts?.extraStyle
+				}
+			}), [
+				slots.close?.({ close }),
+				renderHeader(),
+				createVNode("div", { "class": ["w-drawer-body", props.bodyClass] }, [slots.default?.({ close })]),
+				slots.footer && createVNode("div", { "class": ["w-drawer-footer", props.footerClass] }, [slots.footer({ close })]),
+				renderLoading()
+			]);
+		}
+		return () => {
+			const p = placement.value;
+			let mask = null;
+			if (cfg.value.hasMask) mask = createVNode(Mask_default, {
+				"show": visible.value,
+				"class": [props.maskClass, `w-drawer--${p}`],
+				"style": props.maskStyle,
+				"beforeClose": props.beforeClose,
+				"canCloseByClickSelf": cfg.value.canCloseByClickMask,
+				"to": props.to,
+				"onUpdate:show": (v) => {
+					visible.value = v;
+				},
+				"zIndex": zIndex.value - 1
+			}, null);
+			const bind = cfg.value.bind || DRAWER_FALLBACK.bind;
+			if (isCenter.value) {
+				const wrapperProps = {
+					class: "w-drawer-center-wrapper",
+					style: { zIndex: zIndex.value },
+					ref: center
+				};
+				if (cfg.value.canCloseByClickMask) wrapperProps.onClick = (e) => {
+					if (e.target === center.value) close();
+				};
+				return createVNode(Fragment, null, [
+					slots.trigger?.({
+						close,
+						show
+					}),
+					mask,
+					showCenterShell.value ? createVNode(Teleport, { "to": props.to }, { default: () => [createVNode("div", wrapperProps, [showMeasure.value ? renderPanel({
+						measure: true,
+						extraStyle: {
+							visibility: "hidden",
+							pointerEvents: "none"
+						}
+					}) : null, createVNode(Transition, {
+						"name": "w-scale",
+						"onEnter": onEnter,
+						"onBeforeLeave": (el) => {
+							pinTriggerForLeave(zIndex.value, el);
+						},
+						"onAfterLeave": afterLeave,
+						"onAfterEnter": afterEnter
+					}, { default: () => [showPanel.value ? renderPanel() : null] })])] }) : null
+				]);
+			}
+			let main = renderPanel();
+			if (bind === "v-if") main = visible.value && main;
+			else if (bind === "v-show") main = withDirectives(main, [[vShow, visible.value]]);
+			return createVNode(Fragment, null, [
+				slots.trigger?.({
+					close,
+					show
+				}),
+				mask,
+				createVNode(Teleport, { "to": props.to }, { default: () => [createVNode(Transition, {
+					"name": `w-drawer-transition--${p}`,
+					"onEnter": onEnter,
+					"onAfterLeave": afterLeave,
+					"onAfterEnter": afterEnter
+				}, _isSlot(main) ? main : { default: () => [main] })] })
+			]);
+		};
+	}
+});
+//#endregion
+export { Drawer_default as default };
+
+//# sourceMappingURL=Drawer.js.map

package/dist/components/drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","names":["computed","defineComponent","Transition","Teleport","ref","watch","withDirectives","vShow","nextTick","onMounted","normalizeClass","createVNode","_createVNode","mergeProps","_mergeProps","Fragment","_Fragment","isVNode","_isVNode","Mask","Loading","useGlobalZIndex","useComponentConfig","useScaleFromPoint","captureScaleFromPoint","useEscStack","propSizeToCssVars","toCssVarsStyle","DRAWER_FALLBACK","_isSlot","s","Object","prototype","toString","call","name","components","inheritAttrs","props","bind","type","String","default","undefined","show","Boolean","hasMask","placement","to","HTMLElement","document","body","canCloseByClickMask","headerClass","Array","bodyClass","footerClass","maskClass","maskStyle","isConfirm","beforeClose","Function","afterClose","resizeAfterEnter","width","height","title","size","Number","cssVars","loading","emits","_v","enter","_el","after-enter","setup","attrs","emit","slots","cfg","center","measureEl","visible","showCenterShell","showMeasure","showPanel","openGen","zIndex","add","get","transformOrigin","measureOrigin","morphCss","fromTrigger","pinTriggerForLeave","unpinTrigger","value","isCenter","drawOptions","p","isHorizontal","isVertical","style","x","y","assign","class","isClosing","close","ok","afterLeave","afterEnter","window","dispatchEvent","Event","onEnter","el","prepareCenterOpen","gen","v","renderLoading","transitionName","renderHeader","header","renderPanel","opts","base","measure","extraStyle","footer","mask","wrapperProps","onClick","e","target","trigger","visibility","pointerEvents","main"],"sources":["../../../components/drawer/Drawer.tsx"],"sourcesContent":["import {\r\n  computed,\r\n  defineComponent,\r\n  Transition,\r\n  Teleport,\r\n  ref,\r\n  watch,\r\n  withDirectives,\r\n  vShow,\r\n  nextTick,\r\n  onMounted,\r\n  normalizeClass,\r\n  type PropType,\r\n} from 'vue'\r\nimport Mask from '../mask'\r\nimport Loading from '../loading/index'\r\nimport type { LoadingComponentProps } from '../loading/type'\r\nimport useGlobalZIndex from '../../use/useGlobalZIndex'\r\nimport useComponentConfig from '../../use/useComponentConfig'\r\nimport useScaleFromPoint, {\r\n  captureScaleFromPoint,\r\n} from '../../use/useScaleFromPoint'\r\nimport useEscStack from '../../use/useEscStack'\r\nimport { propSizeToCssVars, toCssVarsStyle, type CssVars } from '../../util'\r\nimport { DRAWER_FALLBACK, type DrawerPlacement } from './config'\r\n\r\nexport type { DrawerGlobalConfig, DrawerPlacement } from './config'\r\nexport { DRAWER_FALLBACK } from './config'\r\n\r\nexport default defineComponent({\r\n  name: 'Drawer',\r\n  components: { Mask, Loading },\r\n  inheritAttrs: false,\r\n  props: {\r\n    bind: { type: String as PropType<'v-if' | 'v-show'>, default: undefined },\r\n    show: { type: Boolean, default: false },\r\n    hasMask: { type: Boolean, default: undefined },\r\n    placement: {\r\n      type: String as PropType<DrawerPlacement>,\r\n      default: undefined,\r\n    },\r\n    to: {\r\n      type: HTMLElement,\r\n      default: () => document.body,\r\n    },\r\n    canCloseByClickMask: { type: Boolean, default: undefined },\r\n    headerClass: [String, Object, Array],\r\n    bodyClass: [String, Object, Array],\r\n    footerClass: [String, Object, Array],\r\n    maskClass: [String, Object, Array],\r\n    maskStyle: {\r\n      type: [Object, String, Array] as PropType<\r\n        Record<string, any> | string | Array<Record<string, any> | string>\r\n      >,\r\n    },\r\n    /** 供 Confirm 等命令式用法：挂载后立即显示 */\r\n    isConfirm: Boolean,\r\n    beforeClose: Function as PropType<() => Promise<boolean>>,\r\n    afterClose: Function,\r\n    resizeAfterEnter: { type: Boolean, default: undefined },\r\n    width: { type: String, default: undefined },\r\n    height: { type: String, default: undefined },\r\n    title: { type: String, default: undefined },\r\n    /** 尺度核 → `--w-prop-drawer-size`（标题 / header / Close） */\r\n    size: { type: Number, default: undefined },\r\n    /** 实例 CSS 变量 */\r\n    cssVars: { type: Object as PropType<CssVars>, default: undefined },\r\n    loading: {\r\n      type: Object as PropType<LoadingComponentProps>,\r\n      default: () => ({ show: false }),\r\n    },\r\n  },\r\n  emits: {\r\n    'update:show': (_v: boolean) => true,\r\n    enter: (_el: Element) => true,\r\n    'after-enter': () => true,\r\n  },\r\n  setup(props, { attrs, emit, slots }) {\r\n    const cfg = useComponentConfig('Drawer', props, DRAWER_FALLBACK)\r\n    const center = ref<HTMLElement>()\r\n    const measureEl = ref<HTMLElement>()\r\n    const visible = ref(!!props.show)\r\n    /** center 外壳：打开时挂上，离场结束再卸 */\r\n    const showCenterShell = ref(false)\r\n    /** 对齐 Modal：先挂真实内容测原点，再播 w-scale */\r\n    const showMeasure = ref(false)\r\n    const showPanel = ref(false)\r\n    let openGen = 0\r\n    const { zIndex, add, get } = useGlobalZIndex()\r\n    const {\r\n      transformOrigin,\r\n      measureOrigin,\r\n      morphCss,\r\n      fromTrigger,\r\n      pinTriggerForLeave,\r\n      unpinTrigger,\r\n    } = useScaleFromPoint(props.isConfirm ? 'confirm' : undefined)\r\n\r\n    const placement = computed(\r\n      () => cfg.value.placement || DRAWER_FALLBACK.placement,\r\n    )\r\n    const isCenter = computed(() => placement.value === 'center')\r\n\r\n    const drawOptions = computed(() => {\r\n      const p = placement.value\r\n      const isHorizontal = p === 'left' || p === 'right'\r\n      const isVertical = p === 'top' || p === 'bottom'\r\n      const style: Record<string, any> = {\r\n        ...toCssVarsStyle({\r\n          ...propSizeToCssVars('drawer', cfg.value.size),\r\n          ...props.cssVars,\r\n        }),\r\n        ...(typeof attrs.style === 'object' && attrs.style\r\n          ? (attrs.style as Record<string, any>)\r\n          : null),\r\n        zIndex: zIndex.value,\r\n      }\r\n      if (isCenter.value) {\r\n        style.transformOrigin = `${transformOrigin.x}px ${transformOrigin.y}px`\r\n        Object.assign(style, morphCss.value)\r\n      }\r\n      if (isHorizontal && cfg.value.width) {\r\n        style.width = cfg.value.width\r\n        style['--w-drawer-width'] = cfg.value.width\r\n      }\r\n      if (isVertical && cfg.value.height) {\r\n        style.height = cfg.value.height\r\n        style['--w-drawer-height'] = cfg.value.height\r\n      }\r\n      return {\r\n        class: normalizeClass([\r\n          'w-drawer',\r\n          `w-drawer--${p}`,\r\n          isCenter.value && fromTrigger.value && 'w-scale-from-trigger',\r\n          attrs.class,\r\n        ]),\r\n        style,\r\n      }\r\n    })\r\n\r\n    let isClosing = false\r\n    async function close() {\r\n      if (isClosing) return\r\n      isClosing = true\r\n      try {\r\n        if (props.beforeClose) {\r\n          const ok = await props.beforeClose()\r\n          if (ok) {\r\n            visible.value = false\r\n          } else {\r\n            await nextTick()\r\n            emit('update:show', true)\r\n          }\r\n        } else {\r\n          visible.value = false\r\n        }\r\n      } finally {\r\n        isClosing = false\r\n      }\r\n    }\r\n\r\n    function show() {\r\n      add()\r\n      visible.value = true\r\n    }\r\n\r\n    function afterLeave() {\r\n      showCenterShell.value = false\r\n      showMeasure.value = false\r\n      showPanel.value = false\r\n      props.afterClose?.()\r\n      nextTick(() => unpinTrigger())\r\n    }\r\n\r\n    function afterEnter() {\r\n      emit('after-enter')\r\n      if (cfg.value.resizeAfterEnter) {\r\n        window.dispatchEvent(new Event('resize'))\r\n      }\r\n    }\r\n\r\n    function onEnter(el: Element) {\r\n      emit('enter', el)\r\n    }\r\n\r\n    async function prepareCenterOpen(gen: number) {\r\n      showCenterShell.value = true\r\n      showMeasure.value = true\r\n      showPanel.value = false\r\n      await nextTick()\r\n      if (gen !== openGen) return\r\n      // 真实内容已布局后再量（Confirm 尺寸随内容，不能量空壳）\r\n      measureOrigin(measureEl.value)\r\n      showMeasure.value = false\r\n      await nextTick()\r\n      if (gen !== openGen) return\r\n      showPanel.value = true\r\n    }\r\n\r\n    onMounted(() => {\r\n      if (props.isConfirm) visible.value = true\r\n    })\r\n\r\n    watch(\r\n      () => props.show,\r\n      (v) => {\r\n        if (v) {\r\n          visible.value = v\r\n        } else if (visible.value) {\r\n          close()\r\n        }\r\n      },\r\n    )\r\n    watch(visible, (v) => {\r\n      if (v) {\r\n        add()\r\n        if (isCenter.value) {\r\n          captureScaleFromPoint()\r\n          const gen = ++openGen\r\n          void prepareCenterOpen(gen)\r\n        }\r\n      } else if (isCenter.value) {\r\n        openGen += 1\r\n        showMeasure.value = false\r\n        showPanel.value = false\r\n      }\r\n      emit('update:show', v)\r\n    })\r\n\r\n    // add() 之后再入栈（同一 tick 内 watch 按注册序执行）\r\n    useEscStack(\r\n      visible,\r\n      () => {\r\n        void close()\r\n      },\r\n      () => get(),\r\n    )\r\n\r\n    function renderLoading() {\r\n      return (\r\n        <Loading\r\n          {...{\r\n            ...props.loading,\r\n            show: props.loading?.show,\r\n            transitionName: 'w-fade-white',\r\n            class: 'w-drawer-loading',\r\n            style: { 'z-index': zIndex.value },\r\n          }}\r\n        />\r\n      )\r\n    }\r\n\r\n    function renderHeader() {\r\n      if (!slots.header && !cfg.value.title) return null\r\n      return (\r\n        <div class={['w-drawer-header', props.headerClass]}>\r\n          {slots.header?.({ close }) ?? (\r\n            <div class=\"w-drawer-title\">{cfg.value.title}</div>\r\n          )}\r\n        </div>\r\n      )\r\n    }\r\n\r\n    function renderPanel(opts?: {\r\n      measure?: boolean\r\n      extraStyle?: Record<string, any>\r\n    }) {\r\n      const base = drawOptions.value\r\n      return (\r\n        <div\r\n          {...base}\r\n          ref={opts?.measure ? measureEl : undefined}\r\n          style={{\r\n            ...base.style,\r\n            ...opts?.extraStyle,\r\n          }}>\r\n          {slots.close?.({ close })}\r\n          {renderHeader()}\r\n          <div class={['w-drawer-body', props.bodyClass]}>\r\n            {slots.default?.({ close })}\r\n          </div>\r\n          {slots.footer && (\r\n            <div class={['w-drawer-footer', props.footerClass]}>\r\n              {slots.footer({ close })}\r\n            </div>\r\n          )}\r\n          {renderLoading()}\r\n        </div>\r\n      )\r\n    }\r\n\r\n    return () => {\r\n      const p = placement.value\r\n      let mask = null\r\n      if (cfg.value.hasMask) {\r\n        mask = (\r\n          <Mask\r\n            show={visible.value}\r\n            class={[props.maskClass, `w-drawer--${p}`]}\r\n            style={props.maskStyle}\r\n            beforeClose={props.beforeClose}\r\n            canCloseByClickSelf={cfg.value.canCloseByClickMask}\r\n            to={props.to}\r\n            onUpdate:show={(v: boolean) => {\r\n              visible.value = v\r\n            }}\r\n            zIndex={zIndex.value - 1}\r\n          />\r\n        )\r\n      }\r\n\r\n      const bind = cfg.value.bind || DRAWER_FALLBACK.bind\r\n\r\n      // center：对齐 Modal —— 先测真实面板原点，再 w-scale\r\n      if (isCenter.value) {\r\n        const wrapperProps: any = {\r\n          class: 'w-drawer-center-wrapper',\r\n          style: { zIndex: zIndex.value },\r\n          ref: center,\r\n        }\r\n        if (cfg.value.canCloseByClickMask) {\r\n          wrapperProps.onClick = (e: MouseEvent) => {\r\n            if (e.target === center.value) close()\r\n          }\r\n        }\r\n\r\n        return (\r\n          <>\r\n            {slots.trigger?.({ close, show })}\r\n            {mask}\r\n            {showCenterShell.value ? (\r\n              <Teleport to={props.to}>\r\n                <div {...wrapperProps}>\r\n                  {showMeasure.value\r\n                    ? renderPanel({\r\n                        measure: true,\r\n                        extraStyle: {\r\n                          visibility: 'hidden',\r\n                          pointerEvents: 'none',\r\n                        },\r\n                      })\r\n                    : null}\r\n                  <Transition\r\n                    name=\"w-scale\"\r\n                    onEnter={onEnter}\r\n                    onBeforeLeave={(el) => {\r\n                      pinTriggerForLeave(zIndex.value, el as HTMLElement)\r\n                    }}\r\n                    onAfterLeave={afterLeave}\r\n                    onAfterEnter={afterEnter}>\r\n                    {showPanel.value ? renderPanel() : null}\r\n                  </Transition>\r\n                </div>\r\n              </Teleport>\r\n            ) : null}\r\n          </>\r\n        )\r\n      }\r\n\r\n      let main: any = renderPanel()\r\n      if (bind === 'v-if') {\r\n        main = visible.value && main\r\n      } else if (bind === 'v-show') {\r\n        main = withDirectives(main, [[vShow, visible.value]])\r\n      }\r\n\r\n      return (\r\n        <>\r\n          {slots.trigger?.({ close, show })}\r\n          {mask}\r\n          <Teleport to={props.to}>\r\n            <Transition\r\n              name={`w-drawer-transition--${p}`}\r\n              onEnter={onEnter}\r\n              onAfterLeave={afterLeave}\r\n              onAfterEnter={afterEnter}>\r\n              {main}\r\n            </Transition>\r\n          </Teleport>\r\n        </>\r\n      )\r\n    }\r\n  },\r\n})\r\n"],"mappings":"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"}

package/dist/components/drawer/config.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 可通过 `app.use(UI, { components: { Drawer: {...} } })` 配置。
+ * 不宜全局配置：show / to / loading / beforeClose / afterClose（实例态）。
+ */
+export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom' | 'center';
+export type DrawerGlobalConfig = Partial<{
+    bind: 'v-if' | 'v-show';
+    hasMask: boolean;
+    placement: DrawerPlacement;
+    canCloseByClickMask: boolean;
+    resizeAfterEnter: boolean;
+    width: string;
+    height: string;
+    title: string;
+    /** 尺度核 → `--w-prop-drawer-size`（标题 / header padding / Close） */
+    size: number;
+}>;
+export declare const DRAWER_FALLBACK: {
+    bind: "v-if" | "v-show";
+    hasMask: boolean;
+    placement: DrawerPlacement;
+    canCloseByClickMask: boolean;
+    resizeAfterEnter: boolean;
+    width: string | undefined;
+    height: string | undefined;
+    title: string | undefined;
+    size: number | undefined;
+};

package/dist/components/drawer/config.js

@@ -0,0 +1,16 @@
+//#region components/drawer/config.ts
+var DRAWER_FALLBACK = {
+	bind: "v-if",
+	hasMask: true,
+	placement: "right",
+	canCloseByClickMask: true,
+	resizeAfterEnter: true,
+	width: void 0,
+	height: void 0,
+	title: void 0,
+	size: void 0
+};
+//#endregion
+export { DRAWER_FALLBACK };
+
+//# sourceMappingURL=config.js.map

package/dist/components/drawer/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","names":[],"sources":["../../../components/drawer/config.ts"],"sourcesContent":["/**\r\n * 可通过 `app.use(UI, { components: { Drawer: {...} } })` 配置。\r\n * 不宜全局配置：show / to / loading / beforeClose / afterClose（实例态）。\r\n */\r\nexport type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom' | 'center'\r\n\r\nexport type DrawerGlobalConfig = Partial<{\r\n  bind: 'v-if' | 'v-show'\r\n  hasMask: boolean\r\n  placement: DrawerPlacement\r\n  canCloseByClickMask: boolean\r\n  resizeAfterEnter: boolean\r\n  width: string\r\n  height: string\r\n  title: string\r\n  /** 尺度核 → `--w-prop-drawer-size`（标题 / header padding / Close） */\r\n  size: number\r\n}>\r\n\r\nexport const DRAWER_FALLBACK = {\r\n  bind: 'v-if' as 'v-if' | 'v-show',\r\n  hasMask: true,\r\n  placement: 'right' as DrawerPlacement,\r\n  canCloseByClickMask: true,\r\n  resizeAfterEnter: true,\r\n  width: undefined as string | undefined,\r\n  height: undefined as string | undefined,\r\n  title: undefined as string | undefined,\r\n  size: undefined as number | undefined,\r\n}\r\n"],"mappings":";AAmBA,IAAa,kBAAkB;CAC7B,MAAM;CACN,SAAS;CACT,WAAW;CACX,qBAAqB;CACrB,kBAAkB;CAClB,OAAO,KAAA;CACP,QAAQ,KAAA;CACR,OAAO,KAAA;CACP,MAAM,KAAA;AACR"}

package/dist/components/drawer/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Drawer';
+export type { DrawerGlobalConfig, DrawerPlacement } from './config';
+export { DRAWER_FALLBACK } from './config';

package/dist/components/drawer/src/style/drawer.css

@@ -0,0 +1 @@
+@import '../../../../theme/tokens/components/drawer.css';

package/dist/components/ellipsis/Ellipsis.d.ts

@@ -0,0 +1,74 @@
+import { PropType } from 'vue';
+import { PlacementType } from '../../config/types';
+import { CssVars } from '../../util';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** 截断展示与气泡默认文案；有默认插槽时展示优先插槽 */
+    text: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: any;
+    };
+    /** 最大行数；1 = 单行 ellipsis，>1 = line-clamp */
+    lines: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 气泡位置（透传 Tooltip / Layer） */
+    placement: {
+        type: PropType<PlacementType>;
+        default: string;
+    };
+    /** 溢出时是否显示气泡 */
+    showTooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 实例尺度（px）→ `--w-prop-ellipsis-size`；并桥接内部 Tooltip */
+    size: {
+        type: NumberConstructor;
+        default: any;
+    };
+    /** 实例 CSS 变量 */
+    cssVars: {
+        type: PropType<CssVars>;
+        default: any;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 截断展示与气泡默认文案；有默认插槽时展示优先插槽 */
+    text: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: any;
+    };
+    /** 最大行数；1 = 单行 ellipsis，>1 = line-clamp */
+    lines: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 气泡位置（透传 Tooltip / Layer） */
+    placement: {
+        type: PropType<PlacementType>;
+        default: string;
+    };
+    /** 溢出时是否显示气泡 */
+    showTooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 实例尺度（px）→ `--w-prop-ellipsis-size`；并桥接内部 Tooltip */
+    size: {
+        type: NumberConstructor;
+        default: any;
+    };
+    /** 实例 CSS 变量 */
+    cssVars: {
+        type: PropType<CssVars>;
+        default: any;
+    };
+}>> & Readonly<{}>, {
+    text: string | number;
+    size: number;
+    placement: "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "center" | "client-center";
+    cssVars: CssVars;
+    lines: number;
+    showTooltip: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/ellipsis/Ellipsis.js

@@ -0,0 +1,103 @@
+import { effectiveSizeVar, propSizeToCssVars, toCssVarsStyle } from "../../util/cssVars.js";
+import Tooltip_default from "../tooltip/Tooltip.js";
+import useVisibleResize from "../../use/useVisibleResize.js";
+import { computed, createVNode, defineComponent, mergeProps, nextTick, ref, watch } from "vue";
+//#region components/ellipsis/Ellipsis.tsx
+function isOverflow(el) {
+	if (!el) return false;
+	return el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
+}
+var Ellipsis_default = /* @__PURE__ */ defineComponent({
+	name: "Ellipsis",
+	inheritAttrs: false,
+	props: {
+		/** 截断展示与气泡默认文案；有默认插槽时展示优先插槽 */
+		text: {
+			type: [String, Number],
+			default: void 0
+		},
+		/** 最大行数；1 = 单行 ellipsis，>1 = line-clamp */
+		lines: {
+			type: Number,
+			default: 1
+		},
+		/** 气泡位置（透传 Tooltip / Layer） */
+		placement: {
+			type: String,
+			default: "bottom"
+		},
+		/** 溢出时是否显示气泡 */
+		showTooltip: {
+			type: Boolean,
+			default: true
+		},
+		/** 实例尺度（px）→ `--w-prop-ellipsis-size`；并桥接内部 Tooltip */
+		size: {
+			type: Number,
+			default: void 0
+		},
+		/** 实例 CSS 变量 */
+		cssVars: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { attrs, slots }) {
+		/**
+		* 测量节点必须与 Layer trigger 根分离：
+		* Layer 会对 trigger vnode cloneVNode 并覆写 ref，直接把 ref 挂在 trigger 根上会丢引用，
+		* 导致永远测不到溢出、气泡一直 disabled。
+		*/
+		const measureRef = ref();
+		const overflow = ref(false);
+		function checkOverflow(el) {
+			const next = isOverflow(el ?? measureRef.value);
+			if (overflow.value !== next) overflow.value = next;
+		}
+		useVisibleResize(measureRef, () => checkOverflow());
+		watch(() => [props.text, props.lines], () => {
+			nextTick(() => checkOverflow());
+		});
+		const linesSafe = computed(() => Math.max(1, Math.floor(props.lines) || 1));
+		const multi = computed(() => linesSafe.value > 1);
+		const rootStyle = computed(() => toCssVarsStyle({
+			...propSizeToCssVars("ellipsis", props.size),
+			"--w-prop-ellipsis-lines": linesSafe.value,
+			...props.cssVars
+		}));
+		const tooltipLayerStyle = computed(() => toCssVarsStyle({
+			...propSizeToCssVars("ellipsis", props.size),
+			"--w-prop-tooltip-size": effectiveSizeVar("ellipsis"),
+			...props.cssVars
+		}));
+		const tipDisabled = computed(() => !props.showTooltip || !overflow.value);
+		return () => {
+			const display = slots.default?.() ?? props.text;
+			const tip = slots.tooltip?.() ?? props.text ?? slots.default?.();
+			const measureProps = mergeProps({
+				ref: measureRef,
+				class: [
+					"w-ellipsis",
+					"w-ellipsis--comp",
+					{ "w-ellipsis--multi": multi.value }
+				],
+				style: rootStyle.value,
+				onMouseenter: (e) => {
+					checkOverflow(e.currentTarget);
+				}
+			}, attrs);
+			return createVNode(Tooltip_default, {
+				"disabled": tipDisabled.value,
+				"placement": props.placement,
+				"layerStyle": tooltipLayerStyle.value
+			}, {
+				trigger: () => createVNode("div", { "class": "w-ellipsis-host" }, [createVNode("div", measureProps, [display])]),
+				default: () => tip
+			});
+		};
+	}
+});
+//#endregion
+export { Ellipsis_default as default };
+
+//# sourceMappingURL=Ellipsis.js.map

package/dist/components/ellipsis/Ellipsis.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ellipsis.js","names":["computed","defineComponent","mergeProps","nextTick","ref","watch","createVNode","_createVNode","useVisibleResize","effectiveSizeVar","propSizeToCssVars","toCssVarsStyle","Tooltip","isOverflow","el","scrollHeight","clientHeight","scrollWidth","clientWidth","name","inheritAttrs","props","text","type","String","Number","default","undefined","lines","placement","showTooltip","Boolean","size","cssVars","Object","setup","attrs","slots","measureRef","overflow","checkOverflow","target","value","next","linesSafe","Math","max","floor","multi","rootStyle","tooltipLayerStyle","tipDisabled","display","tip","tooltip","measureProps","class","style","onMouseenter","e","currentTarget","trigger"],"sources":["../../../components/ellipsis/Ellipsis.tsx"],"sourcesContent":["import type { PropType } from 'vue'\r\nimport {\r\n  computed,\r\n  defineComponent,\r\n  mergeProps,\r\n  nextTick,\r\n  ref,\r\n  watch,\r\n} from 'vue'\r\nimport type { PlacementType } from '../../config/types'\r\nimport useVisibleResize from '../../use/useVisibleResize'\r\nimport {\r\n  effectiveSizeVar,\r\n  propSizeToCssVars,\r\n  toCssVarsStyle,\r\n  type CssVars,\r\n} from '../../util'\r\nimport Tooltip from '../tooltip'\r\n\r\nfunction isOverflow(el: HTMLElement | null | undefined): boolean {\r\n  if (!el) return false\r\n  return el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth\r\n}\r\n\r\nexport default defineComponent({\r\n  name: 'Ellipsis',\r\n  inheritAttrs: false,\r\n  props: {\r\n    /** 截断展示与气泡默认文案；有默认插槽时展示优先插槽 */\r\n    text: { type: [String, Number], default: undefined },\r\n    /** 最大行数；1 = 单行 ellipsis，>1 = line-clamp */\r\n    lines: { type: Number, default: 1 },\r\n    /** 气泡位置（透传 Tooltip / Layer） */\r\n    placement: {\r\n      type: String as PropType<PlacementType>,\r\n      default: 'bottom',\r\n    },\r\n    /** 溢出时是否显示气泡 */\r\n    showTooltip: { type: Boolean, default: true },\r\n    /** 实例尺度（px）→ `--w-prop-ellipsis-size`；并桥接内部 Tooltip */\r\n    size: { type: Number, default: undefined },\r\n    /** 实例 CSS 变量 */\r\n    cssVars: { type: Object as PropType<CssVars>, default: undefined },\r\n  },\r\n  setup(props, { attrs, slots }) {\r\n    /**\r\n     * 测量节点必须与 Layer trigger 根分离：\r\n     * Layer 会对 trigger vnode cloneVNode 并覆写 ref，直接把 ref 挂在 trigger 根上会丢引用，\r\n     * 导致永远测不到溢出、气泡一直 disabled。\r\n     */\r\n    const measureRef = ref<HTMLElement>()\r\n    const overflow = ref(false)\r\n\r\n    function checkOverflow(el?: HTMLElement | null) {\r\n      const target = el ?? measureRef.value\r\n      const next = isOverflow(target)\r\n      if (overflow.value !== next) overflow.value = next\r\n    }\r\n\r\n    useVisibleResize(measureRef, () => checkOverflow())\r\n\r\n    watch(\r\n      () => [props.text, props.lines] as const,\r\n      () => {\r\n        nextTick(() => checkOverflow())\r\n      },\r\n    )\r\n\r\n    const linesSafe = computed(() => Math.max(1, Math.floor(props.lines) || 1))\r\n    const multi = computed(() => linesSafe.value > 1)\r\n\r\n    const rootStyle = computed(() =>\r\n      toCssVarsStyle({\r\n        ...propSizeToCssVars('ellipsis', props.size),\r\n        '--w-prop-ellipsis-lines': linesSafe.value,\r\n        ...props.cssVars,\r\n      }),\r\n    )\r\n\r\n    const tooltipLayerStyle = computed(() =>\r\n      toCssVarsStyle({\r\n        ...propSizeToCssVars('ellipsis', props.size),\r\n        '--w-prop-tooltip-size': effectiveSizeVar('ellipsis'),\r\n        ...props.cssVars,\r\n      }),\r\n    )\r\n\r\n    const tipDisabled = computed(\r\n      () => !props.showTooltip || !overflow.value,\r\n    )\r\n\r\n    return () => {\r\n      const display = slots.default?.() ?? props.text\r\n      const tip = slots.tooltip?.() ?? props.text ?? slots.default?.()\r\n\r\n      const measureProps = mergeProps(\r\n        {\r\n          ref: measureRef,\r\n          class: [\r\n            'w-ellipsis',\r\n            'w-ellipsis--comp',\r\n            { 'w-ellipsis--multi': multi.value },\r\n          ],\r\n          style: rootStyle.value,\r\n          onMouseenter: (e: MouseEvent) => {\r\n            checkOverflow(e.currentTarget as HTMLElement)\r\n          },\r\n        },\r\n        attrs,\r\n      )\r\n\r\n      return (\r\n        <Tooltip\r\n          disabled={tipDisabled.value}\r\n          placement={props.placement}\r\n          layerStyle={tooltipLayerStyle.value}\r\n          v-slots={{\r\n            trigger: () => (\r\n              <div class=\"w-ellipsis-host\">\r\n                <div {...measureProps}>{display}</div>\r\n              </div>\r\n            ),\r\n            default: () => tip,\r\n          }}\r\n        />\r\n      )\r\n    }\r\n  },\r\n})\r\n"],"mappings":";;;;;AAmBA,SAASa,WAAWC,IAA6C;CAC/D,IAAI,CAACA,IAAI,OAAO;CAChB,OAAOA,GAAGC,eAAeD,GAAGE,gBAAgBF,GAAGG,cAAcH,GAAGI;AAClE;AAEA,IAAA,mBAAejB,gCAAgB;CAC7BkB,MAAM;CACNC,cAAc;CACdC,OAAO;;EAELC,MAAM;GAAEC,MAAM,CAACC,QAAQC,MAAM;GAAGC,SAASC,KAAAA;EAAU;;EAEnDC,OAAO;GAAEL,MAAME;GAAQC,SAAS;EAAE;;EAElCG,WAAW;GACTN,MAAMC;GACNE,SAAS;EACX;;EAEAI,aAAa;GAAEP,MAAMQ;GAASL,SAAS;EAAK;;EAE5CM,MAAM;GAAET,MAAME;GAAQC,SAASC,KAAAA;EAAU;;EAEzCM,SAAS;GAAEV,MAAMW;GAA6BR,SAASC,KAAAA;EAAU;CACnE;CACAQ,MAAMd,OAAO,EAAEe,OAAOC,SAAS;;;;;;EAM7B,MAAMC,aAAalC,IAAiB;EACpC,MAAMmC,WAAWnC,IAAI,KAAK;EAE1B,SAASoC,cAAc1B,IAAyB;GAE9C,MAAM6B,OAAO9B,WADEC,MAAMwB,WAAWI,KACF;GAC9B,IAAIH,SAASG,UAAUC,MAAMJ,SAASG,QAAQC;EAChD;EAEAnC,iBAAiB8B,kBAAkBE,cAAc,CAAC;EAElDnC,YACQ,CAACgB,MAAMC,MAAMD,MAAMO,KAAK,SACxB;GACJzB,eAAeqC,cAAc,CAAC;EAChC,CACF;EAEA,MAAMI,YAAY5C,eAAe6C,KAAKC,IAAI,GAAGD,KAAKE,MAAM1B,MAAMO,KAAK,KAAK,CAAC,CAAC;EAC1E,MAAMoB,QAAQhD,eAAe4C,UAAUF,QAAQ,CAAC;EAEhD,MAAMO,YAAYjD,eAChBW,eAAe;GACb,GAAGD,kBAAkB,YAAYW,MAAMW,IAAI;GAC3C,2BAA2BY,UAAUF;GACrC,GAAGrB,MAAMY;EACX,CAAC,CACH;EAEA,MAAMiB,oBAAoBlD,eACxBW,eAAe;GACb,GAAGD,kBAAkB,YAAYW,MAAMW,IAAI;GAC3C,yBAAyBvB,iBAAiB,UAAU;GACpD,GAAGY,MAAMY;EACX,CAAC,CACH;EAEA,MAAMkB,cAAcnD,eACZ,CAACqB,MAAMS,eAAe,CAACS,SAASG,KACxC;EAEA,aAAa;GACX,MAAMU,UAAUf,MAAMX,UAAU,KAAKL,MAAMC;GAC3C,MAAM+B,MAAMhB,MAAMiB,UAAU,KAAKjC,MAAMC,QAAQe,MAAMX,UAAU;GAE/D,MAAM6B,eAAerD,WACnB;IACEE,KAAKkC;IACLkB,OAAO;KACL;KACA;KACA,EAAE,qBAAqBR,MAAMN,MAAM;IAAC;IAEtCe,OAAOR,UAAUP;IACjBgB,eAAeC,MAAkB;KAC/BnB,cAAcmB,EAAEC,aAA4B;IAC9C;GACF,GACAxB,KACF;GAEA,OAAA7B,YAAAK,iBAAA;IAAA,YAEcuC,YAAYT;IAAK,aAChBrB,MAAMQ;IAAS,cACdqB,kBAAkBR;GAAK,GAC1B;IACPmB,eAAStD,YAAA,OAAA,EAAA,SAAA,kBAAA,GAAA,CAAAA,YAAA,OAEIgD,cAAY,CAAGH,OAAO,CAAA,CAAA,CAAA;IAGnC1B,eAAe2B;GACjB,CAAC;EAGP;CACF;AACF,CAAC"}

package/dist/components/ellipsis/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Ellipsis';

package/dist/components/ellipsis/style/index.css

@@ -0,0 +1 @@
+@import '../../../theme/tokens/components/ellipsis.css';