@will-ui/vue 1.0.0

package/dist/components/mask/Mask.d.ts

@@ -0,0 +1,79 @@
+import { PropType } from 'vue';
+import { MaskBind } from './config';
+export type { MaskGlobalConfig, MaskBind } from './config';
+export { MASK_FALLBACK, resolveMaskBind } from './config';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    bind: {
+        type: PropType<MaskBind>;
+        default: any;
+    };
+    zIndex: NumberConstructor;
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    canCloseByClickSelf: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    /** 挂载点（与 React 主名一致）；默认 document.body */
+    to: {
+        type: PropType<HTMLElement | null>;
+        default: any;
+    };
+    /** 别名，等同 to（与 React / 历史用法互通） */
+    container: {
+        type: PropType<HTMLElement | null>;
+        default: any;
+    };
+    beforeClose: {
+        type: PropType<() => boolean | Promise<boolean>>;
+        default: any;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    'update:show': (_v: boolean) => true;
+    'get-ref': (_el: {
+        value: HTMLElement | null;
+    }) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    bind: {
+        type: PropType<MaskBind>;
+        default: any;
+    };
+    zIndex: NumberConstructor;
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    canCloseByClickSelf: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    /** 挂载点（与 React 主名一致）；默认 document.body */
+    to: {
+        type: PropType<HTMLElement | null>;
+        default: any;
+    };
+    /** 别名，等同 to（与 React / 历史用法互通） */
+    container: {
+        type: PropType<HTMLElement | null>;
+        default: any;
+    };
+    beforeClose: {
+        type: PropType<() => boolean | Promise<boolean>>;
+        default: any;
+    };
+}>> & Readonly<{
+    "onUpdate:show"?: (_v: boolean) => any;
+    "onGet-ref"?: (_el: {
+        value: HTMLElement | null;
+    }) => any;
+}>, {
+    show: boolean;
+    bind: MaskBind;
+    canCloseByClickSelf: boolean;
+    to: HTMLElement;
+    container: HTMLElement;
+    beforeClose: () => boolean | Promise<boolean>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/mask/Mask.js

@@ -0,0 +1,82 @@
+import useComponentConfig from "../../use/useComponentConfig.js";
+import useGlobalZIndex from "../../use/useGlobalZIndex.js";
+import { MASK_FALLBACK, resolveMaskBind } from "./config.js";
+import { Teleport, Transition, computed, createVNode, defineComponent, isVNode, normalizeClass, normalizeStyle, onMounted, ref, vShow, watch, withDirectives } from "vue";
+//#region components/mask/Mask.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var Mask_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	name: "Mask",
+	props: {
+		bind: {
+			type: String,
+			default: void 0
+		},
+		zIndex: Number,
+		show: {
+			type: Boolean,
+			default: false
+		},
+		canCloseByClickSelf: {
+			type: Boolean,
+			default: void 0
+		},
+		/** 挂载点（与 React 主名一致）；默认 document.body */
+		to: {
+			type: Object,
+			default: void 0
+		},
+		/** 别名，等同 to（与 React / 历史用法互通） */
+		container: {
+			type: Object,
+			default: void 0
+		},
+		beforeClose: {
+			type: Function,
+			default: void 0
+		}
+	},
+	emits: {
+		"update:show": (_v) => true,
+		"get-ref": (_el) => true
+	},
+	setup(props, { slots, attrs, emit }) {
+		const cfg = useComponentConfig("Mask", props, MASK_FALLBACK);
+		const root = ref(null);
+		const { zIndex } = useGlobalZIndex();
+		const visible = ref(!!props.show);
+		watch(() => props.show, (v) => {
+			visible.value = v;
+		});
+		watch(visible, (v) => {
+			emit("update:show", v);
+		});
+		onMounted(() => {
+			emit("get-ref", root);
+		});
+		const mountTo = computed(() => props.to ?? props.container ?? (typeof document !== "undefined" ? document.body : "body"));
+		const maskOptions = computed(() => ({
+			ref: root,
+			class: normalizeClass(["w-mask", attrs.class]),
+			style: normalizeStyle([{ "--__w-mask-z-index": props.zIndex ?? zIndex.value }, attrs.style]),
+			onClick: async (e) => {
+				if (e.target !== root.value || !cfg.value.canCloseByClickSelf) return;
+				if (props.beforeClose) {
+					if (await props.beforeClose()) visible.value = false;
+				} else visible.value = false;
+			}
+		}));
+		return () => {
+			let main = createVNode("div", maskOptions.value, [slots.default?.()]);
+			if (resolveMaskBind(cfg.value.bind ?? MASK_FALLBACK.bind) === "if") main = visible.value && main;
+			else main = withDirectives(main, [[vShow, visible.value]]);
+			return createVNode(Teleport, { "to": mountTo.value }, { default: () => [createVNode(Transition, { "name": "w-mask-fade" }, _isSlot(main) ? main : { default: () => [main] })] });
+		};
+	}
+});
+//#endregion
+export { Mask_default as default };
+
+//# sourceMappingURL=Mask.js.map

package/dist/components/mask/Mask.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mask.js","names":["defineComponent","computed","ref","Teleport","Transition","withDirectives","vShow","watch","onMounted","normalizeClass","normalizeStyle","createVNode","_createVNode","isVNode","_isVNode","useGlobalZIndex","useComponentConfig","MASK_FALLBACK","resolveMaskBind","_isSlot","s","Object","prototype","toString","call","inheritAttrs","name","props","bind","type","String","default","undefined","zIndex","Number","show","Boolean","canCloseByClickSelf","to","container","beforeClose","Function","emits","_v","_el","setup","slots","attrs","emit","cfg","root","visible","v","value","mountTo","document","body","maskOptions","class","style","onClick","e","target","ok","main","mode"],"sources":["../../../components/mask/Mask.tsx"],"sourcesContent":["import type { VNode, PropType } from 'vue'\r\nimport {\r\n  defineComponent,\r\n  computed,\r\n  ref,\r\n  Teleport,\r\n  Transition,\r\n  withDirectives,\r\n  vShow,\r\n  watch,\r\n  onMounted,\r\n  normalizeClass,\r\n  normalizeStyle,\r\n} from 'vue'\r\nimport useGlobalZIndex from '../../use/useGlobalZIndex'\r\nimport useComponentConfig from '../../use/useComponentConfig'\r\nimport {\r\n  MASK_FALLBACK,\r\n  resolveMaskBind,\r\n  type MaskBind,\r\n} from './config'\r\n\r\nexport type { MaskGlobalConfig, MaskBind } from './config'\r\nexport { MASK_FALLBACK, resolveMaskBind } from './config'\r\n\r\nexport default defineComponent({\r\n  inheritAttrs: false,\r\n  name: 'Mask',\r\n  props: {\r\n    bind: { type: String as PropType<MaskBind>, default: undefined },\r\n    zIndex: Number,\r\n    show: { type: Boolean, default: false },\r\n    canCloseByClickSelf: { type: Boolean, default: undefined },\r\n    /** 挂载点（与 React 主名一致）；默认 document.body */\r\n    to: { type: Object as PropType<HTMLElement | null>, default: undefined },\r\n    /** 别名，等同 to（与 React / 历史用法互通） */\r\n    container: {\r\n      type: Object as PropType<HTMLElement | null>,\r\n      default: undefined,\r\n    },\r\n    beforeClose: {\r\n      type: Function as PropType<() => boolean | Promise<boolean>>,\r\n      default: undefined,\r\n    },\r\n  },\r\n  emits: {\r\n    'update:show': (_v: boolean) => true,\r\n    'get-ref': (_el: { value: HTMLElement | null }) => true,\r\n  },\r\n  setup(props, { slots, attrs, emit }) {\r\n    const cfg = useComponentConfig('Mask', props, MASK_FALLBACK)\r\n    const root = ref<HTMLElement | null>(null)\r\n    const { zIndex } = useGlobalZIndex()\r\n    const visible = ref(!!props.show)\r\n\r\n    watch(\r\n      () => props.show,\r\n      (v) => {\r\n        visible.value = v\r\n      },\r\n    )\r\n    watch(visible, (v) => {\r\n      emit('update:show', v)\r\n    })\r\n    onMounted(() => {\r\n      emit('get-ref', root)\r\n    })\r\n\r\n    const mountTo = computed(\r\n      () =>\r\n        props.to ??\r\n        props.container ??\r\n        (typeof document !== 'undefined' ? document.body : 'body'),\r\n    )\r\n\r\n    const maskOptions = computed(() => ({\r\n      ref: root,\r\n      class: normalizeClass(['w-mask', attrs.class]),\r\n      style: normalizeStyle([\r\n        {\r\n          '--__w-mask-z-index': props.zIndex ?? zIndex.value,\r\n        },\r\n        attrs.style,\r\n      ]),\r\n      onClick: async (e: MouseEvent) => {\r\n        if (e.target !== root.value || !cfg.value.canCloseByClickSelf) return\r\n        if (props.beforeClose) {\r\n          const ok = await props.beforeClose()\r\n          if (ok) visible.value = false\r\n        } else {\r\n          visible.value = false\r\n        }\r\n      },\r\n    }))\r\n\r\n    return () => {\r\n      let main: VNode | false = (\r\n        <div {...maskOptions.value}>{slots.default?.()}</div>\r\n      )\r\n      const mode = resolveMaskBind(cfg.value.bind ?? MASK_FALLBACK.bind)\r\n      if (mode === 'if') {\r\n        main = visible.value && main\r\n      } else {\r\n        main = withDirectives(main as VNode, [[vShow, visible.value]])\r\n      }\r\n      return (\r\n        <Teleport to={mountTo.value}>\r\n          <Transition name=\"w-mask-fade\">{main}</Transition>\r\n        </Teleport>\r\n      )\r\n    }\r\n  },\r\n})\r\n"],"mappings":";;;;;AAoBiB,SAAAmB,QAAAC,GAAA;CAAA,OAAA,OAAAA,MAAA,cAAAC,OAAAC,UAAAC,SAAAC,KAAAJ,CAAA,MAAA,qBAAA,CAAAN,QAAAM,CAAA;AAAA;AAKjB,IAAA,eAAepB,gCAAgB;CAC7ByB,cAAc;CACdC,MAAM;CACNC,OAAO;EACLC,MAAM;GAAEC,MAAMC;GAA8BC,SAASC,KAAAA;EAAU;EAC/DC,QAAQC;EACRC,MAAM;GAAEN,MAAMO;GAASL,SAAS;EAAM;EACtCM,qBAAqB;GAAER,MAAMO;GAASL,SAASC,KAAAA;EAAU;;EAEzDM,IAAI;GAAET,MAAMR;GAAwCU,SAASC,KAAAA;EAAU;;EAEvEO,WAAW;GACTV,MAAMR;GACNU,SAASC,KAAAA;EACX;EACAQ,aAAa;GACXX,MAAMY;GACNV,SAASC,KAAAA;EACX;CACF;CACAU,OAAO;EACL,gBAAgBC,OAAgB;EAChC,YAAYC,QAAuC;CACrD;CACAC,MAAMlB,OAAO,EAAEmB,OAAOC,OAAOC,QAAQ;EACnC,MAAMC,MAAMjC,mBAAmB,QAAQW,OAAOV,aAAa;EAC3D,MAAMiC,OAAOhD,IAAwB,IAAI;EACzC,MAAM,EAAE+B,WAAWlB,gBAAgB;EACnC,MAAMoC,UAAUjD,IAAI,CAAC,CAACyB,MAAMQ,IAAI;EAEhC5B,YACQoB,MAAMQ,OACXiB,MAAM;GACLD,QAAQE,QAAQD;EAClB,CACF;EACA7C,MAAM4C,UAAUC,MAAM;GACpBJ,KAAK,eAAeI,CAAC;EACvB,CAAC;EACD5C,gBAAgB;GACdwC,KAAK,WAAWE,IAAI;EACtB,CAAC;EAED,MAAMI,UAAUrD,eAEZ0B,MAAMW,MACNX,MAAMY,cACL,OAAOgB,aAAa,cAAcA,SAASC,OAAO,OACvD;EAEA,MAAMC,cAAcxD,gBAAgB;GAClCC,KAAKgD;GACLQ,OAAOjD,eAAe,CAAC,UAAUsC,MAAMW,KAAK,CAAC;GAC7CC,OAAOjD,eAAe,CACpB,EACE,sBAAsBiB,MAAMM,UAAUA,OAAOoB,MAC/C,GACAN,MAAMY,KAAK,CACZ;GACDC,SAAS,OAAOC,MAAkB;IAChC,IAAIA,EAAEC,WAAWZ,KAAKG,SAAS,CAACJ,IAAII,MAAMhB,qBAAqB;IAC/D,IAAIV,MAAMa,aAEJuB;SAAAA,MADapC,MAAMa,YAAY,GAC3BW,QAAQE,QAAQ;IAAA,OAExBF,QAAQE,QAAQ;GAEpB;EACF,EAAE;EAEF,aAAa;GACX,IAAIW,OAAmBpD,YAAA,OACZ6C,YAAYJ,OAAK,CAAGP,MAAMf,UAAU,CAAC,CAAA;GAGhD,IADab,gBAAgB+B,IAAII,MAAMzB,QAAQX,cAAcW,IACzDqC,MAAS,MACXD,OAAOb,QAAQE,SAASW;QAExBA,OAAO3D,eAAe2D,MAAe,CAAC,CAAC1D,OAAO6C,QAAQE,KAAK,CAAC,CAAC;GAE/D,OAAAzC,YAAAT,UAAA,EAAA,MACgBmD,QAAQD,MAAK,GAAA,EAAAtB,eAAA,CAAAnB,YAAAR,YAAA,EAAA,QAAA,cAAA,GAAAe,QACO6C,IAAI,IAAJA,OAAI,EAAAjC,eAAA,CAAJiC,IAAI,EAAA,CAAA,CAAA,EAAA,CAAA;EAG1C;CACF;AACF,CAAC"}

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

@@ -0,0 +1,21 @@
+/**
+ * 可通过 `app.use(UI, { components: { Mask: {...} } })` 配置。
+ * 不宜全局配置：show / zIndex / to / container / beforeClose（实例态）。
+ *
+ * bind（与 React 对齐）：
+ * - `if`：隐藏时卸载（默认；亦兼容历史值 `v-if`）
+ * - `show`：隐藏时保留 DOM（亦兼容 `v-show`）
+ *
+ * 挂载点：`to` 为主名；`container` 为别名（与 React 互通）。
+ */
+export type MaskBind = 'if' | 'show' | 'v-if' | 'v-show';
+export type MaskGlobalConfig = Partial<{
+    bind: MaskBind;
+    canCloseByClickSelf: boolean;
+}>;
+export declare const MASK_FALLBACK: {
+    bind: MaskBind;
+    canCloseByClickSelf: boolean;
+};
+/** 归一为 'if' | 'show' */
+export declare function resolveMaskBind(bind?: MaskBind | null): 'if' | 'show';

package/dist/components/mask/config.js

@@ -0,0 +1,14 @@
+//#region components/mask/config.ts
+var MASK_FALLBACK = {
+	bind: "if",
+	canCloseByClickSelf: false
+};
+/** 归一为 'if' | 'show' */
+function resolveMaskBind(bind) {
+	if (bind === "show" || bind === "v-show") return "show";
+	return "if";
+}
+//#endregion
+export { MASK_FALLBACK, resolveMaskBind };
+
+//# sourceMappingURL=config.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","names":[],"sources":["../../../components/mask/config.ts"],"sourcesContent":["/**\r\n * 可通过 `app.use(UI, { components: { Mask: {...} } })` 配置。\r\n * 不宜全局配置：show / zIndex / to / container / beforeClose（实例态）。\r\n *\r\n * bind（与 React 对齐）：\r\n * - `if`：隐藏时卸载（默认；亦兼容历史值 `v-if`）\r\n * - `show`：隐藏时保留 DOM（亦兼容 `v-show`）\r\n *\r\n * 挂载点：`to` 为主名；`container` 为别名（与 React 互通）。\r\n */\r\nexport type MaskBind = 'if' | 'show' | 'v-if' | 'v-show'\r\n\r\nexport type MaskGlobalConfig = Partial<{\r\n  bind: MaskBind\r\n  canCloseByClickSelf: boolean\r\n}>\r\n\r\nexport const MASK_FALLBACK = {\r\n  bind: 'if' as MaskBind,\r\n  canCloseByClickSelf: false,\r\n}\r\n\r\n/** 归一为 'if' | 'show' */\r\nexport function resolveMaskBind(bind?: MaskBind | null): 'if' | 'show' {\r\n  if (bind === 'show' || bind === 'v-show') return 'show'\r\n  return 'if'\r\n}\r\n"],"mappings":";AAiBA,IAAa,gBAAgB;CAC3B,MAAM;CACN,qBAAqB;AACvB;;AAGA,SAAgB,gBAAgB,MAAuC;CACrE,IAAI,SAAS,UAAU,SAAS,UAAU,OAAO;CACjD,OAAO;AACT"}

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

@@ -0,0 +1,3 @@
+export { default } from './Mask';
+export type { MaskGlobalConfig, MaskBind } from './config';
+export { MASK_FALLBACK, resolveMaskBind } from './config';

package/dist/components/mask/style/mask.css

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