vue-layerx 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 vue-layerx contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,85 @@
+# vue-layerx
+
+Vue 3 弹层工厂：用 **一个 content 组件 + 一个 `createLayer` 工厂** 覆盖详情、编辑、新建等场景，无需维护 `v-model` 和重复的 dialog 模板。
+
+## 安装
+
+```bash
+pnpm add vue-layerx
+# or
+npm install vue-layerx
+```
+
+**Peer dependency:** Vue `^3.5.0`
+
+## 快速开始
+
+```ts
+// layers/detail.ts
+import { createLayer } from 'vue-layerx'
+import BaseDialog from './BaseDialog.vue'
+
+export const useDetailLayer = createLayer(BaseDialog)
+```
+
+```ts
+// UserList.vue
+import { useDetailLayer } from './layers/detail'
+import UserForm from './UserForm.vue'
+
+const userLayer = useDetailLayer(UserForm)
+
+userLayer.show({ props: { mode: 'view', ...row } })   // 详情
+userLayer.show({ props: { mode: 'edit', onSubmit } }) // 编辑
+```
+
+```vue
+<!-- UserForm.vue -->
+<script setup lang="ts">
+import { defineLayer, LayerTemplate } from 'vue-layerx'
+
+defineLayer({ props: { title: '用户' }, hideOn: ['submit'] })
+</script>
+
+<template>
+  <ElInput v-model="name" :disabled="mode === 'view'" />
+  <LayerTemplate v-if="mode !== 'view'" name="footer" #default="{ inLayer }">
+    <ElButton v-if="inLayer" type="primary" @click="submit">保存</ElButton>
+  </LayerTemplate>
+</template>
+```
+
+## 核心 API
+
+| 导出 | 用途 |
+|------|------|
+| `createLayer(Layer, defaults?, adapt?)` | 创建弹层工厂，返回 `useX(Content)` |
+| `defineLayer(options)` | 在 content 内声明默认 layer 配置 |
+| `LayerTemplate` | 声明式投递 layer / content 插槽 |
+| `LayerBind` | 调用方填充 content 插槽 |
+
+## 文档
+
+```bash
+pnpm docs:dev   # 本地文档站
+pnpm playground # 交互式 demo
+```
+
+教程与 API 详见仓库内 [docs/](docs/) 目录，或克隆后运行 `pnpm docs:dev`。
+
+## 已知限制
+
+- **不支持 SSR**
+- 0.0.x 为早期版本，公共 API 可能调整
+
+## 开发
+
+```bash
+pnpm install
+pnpm test
+pnpm build
+```
+
+## License
+
+[MIT](LICENSE)

package/dist/index.cjs

@@ -0,0 +1,546 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  LayerBind: () => LayerBind,
+  LayerTemplate: () => LayerTemplate,
+  createLayer: () => createLayer,
+  defineLayer: () => defineLayer
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/runtime/create-use-layer.ts
+var import_vue5 = require("vue");
+
+// src/vue/instance/instance-registry.ts
+var registry = /* @__PURE__ */ new WeakMap();
+function attachInternal(instance, internal) {
+  registry.set(instance, internal);
+}
+function getInternal(instance) {
+  const internal = registry.get(instance);
+  if (!internal) {
+    throw new Error("[vue-layerx] Invalid LayerInstance passed to LayerBind");
+  }
+  return internal;
+}
+
+// src/vue/instance/internal-state.ts
+var import_vue = require("vue");
+function warnDuplicate(name, scope) {
+  if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") return;
+  console.warn(
+    `[vue-layerx] Duplicate LayerTemplate name="${name}" in ${scope} scope; latter wins`
+  );
+}
+function createLayerInternalState() {
+  const slotsVersion = (0, import_vue.ref)(0);
+  const layerTemplates = {};
+  const contentTemplates = {};
+  const bumpSlots = () => {
+    slotsVersion.value++;
+  };
+  const registerLayerTemplate = (name, entry) => {
+    if (layerTemplates[name]) warnDuplicate(name, "layer");
+    layerTemplates[name] = entry;
+    bumpSlots();
+  };
+  const registerContentTemplate = (name, entry) => {
+    if (contentTemplates[name]) warnDuplicate(name, "content");
+    contentTemplates[name] = entry;
+    bumpSlots();
+  };
+  return {
+    layerTemplates,
+    contentTemplates,
+    slotsVersion,
+    bumpSlots,
+    registerLayerTemplate,
+    registerContentTemplate
+  };
+}
+
+// src/runtime/layer-root.ts
+var import_vue3 = require("vue");
+
+// src/core/config/merge-node-config.ts
+function mergeProps(...sources) {
+  const result = {};
+  for (const source of sources) {
+    if (!source) continue;
+    Object.assign(result, source);
+  }
+  return result;
+}
+function mergeNodeConfig(...sources) {
+  const result = {};
+  for (const source of sources) {
+    if (!source) continue;
+    if (source.component !== void 0) result.component = source.component;
+    result.props = mergeProps(result.props, source.props);
+    if (source.slots) {
+      result.slots = { ...result.slots, ...source.slots };
+    }
+  }
+  return result;
+}
+
+// src/core/config/merge-config.ts
+function pickContentConfig(payload) {
+  if (!payload) return void 0;
+  const result = {};
+  if (payload.component !== void 0) result.component = payload.component;
+  if (payload.props !== void 0) result.props = payload.props;
+  if (payload.slots !== void 0) result.slots = payload.slots;
+  if (Object.keys(result).length === 0) return void 0;
+  return result;
+}
+function pickLayerConfig(payload) {
+  return payload?.layer;
+}
+function defineLayerToConfig(defineLayer2) {
+  if (!defineLayer2) return void 0;
+  const result = {
+    layer: mergeNodeConfig(
+      defineLayer2.props ? { props: defineLayer2.props } : void 0,
+      defineLayer2.layer
+    )
+  };
+  if (defineLayer2.hideOn) result.hideOn = defineLayer2.hideOn;
+  return result;
+}
+function mergeConfig(ctx) {
+  const defineLayerConfig = defineLayerToConfig(ctx.defineLayer);
+  const content = mergeNodeConfig(
+    ctx.layerDefaults.content,
+    pickContentConfig(ctx.useOptions),
+    pickContentConfig(ctx.partial),
+    pickContentConfig(ctx.showOptions)
+  );
+  const layer = mergeNodeConfig(
+    ctx.layerDefaults.layer,
+    defineLayerConfig?.layer,
+    pickLayerConfig(ctx.useOptions),
+    pickLayerConfig(ctx.partial),
+    pickLayerConfig(ctx.showOptions)
+  );
+  const hideOn = ctx.showOptions.hideOn ?? ctx.partial?.hideOn ?? ctx.useOptions.hideOn ?? defineLayerConfig?.hideOn;
+  return { content, layer, hideOn };
+}
+
+// src/core/config/bind-hide-on.ts
+function bindHideOn(contentProps, events, hide) {
+  if (!events?.length) return contentProps;
+  const listeners = {};
+  for (const event of events) {
+    const key = `on${event.charAt(0).toUpperCase()}${event.slice(1)}`;
+    const prev = contentProps[key];
+    listeners[key] = (...args) => {
+      prev?.(...args);
+      hide();
+    };
+  }
+  return { ...contentProps, ...listeners };
+}
+
+// src/core/config/default-resolve.ts
+function materializeTemplates(templates) {
+  const slots = {};
+  for (const [name, entry] of Object.entries(templates)) {
+    slots[name] = (slotProps) => entry.render(slotProps ?? {});
+  }
+  return slots;
+}
+function resolveNodeSlots(templates, mergedSlots) {
+  return {
+    ...materializeTemplates(templates),
+    ...mergedSlots
+  };
+}
+function defaultResolve(ctx) {
+  const { merged, LayerComponent, boundContent, layerTemplates, contentTemplates, hide } = ctx;
+  const contentComponent = merged.content.component ?? boundContent;
+  const layerNormalized = {
+    component: merged.layer.component ?? LayerComponent,
+    props: merged.layer.props ?? {},
+    slots: resolveNodeSlots(layerTemplates, merged.layer.slots)
+  };
+  if (!contentComponent) {
+    return {
+      layer: layerNormalized,
+      content: {
+        component: LayerComponent,
+        props: {},
+        slots: {}
+      }
+    };
+  }
+  const contentProps = bindHideOn(merged.content.props ?? {}, merged.hideOn, hide);
+  return {
+    layer: layerNormalized,
+    content: {
+      component: contentComponent,
+      props: contentProps,
+      slots: resolveNodeSlots(contentTemplates, merged.content.slots)
+    }
+  };
+}
+function hasContentComponent(ctx) {
+  return !!(ctx.merged.content.component ?? ctx.boundContent);
+}
+
+// src/vue/render/render-layer-tree.ts
+var import_vue2 = require("vue");
+
+// src/core/constants/markers.ts
+var LAYERX_DIRECT_CONTENT = "__layerxDirect";
+
+// src/vue/render/build-visible-props.ts
+function buildVisibleProps(layerProps, visible, visibleProp, visibleEvent, hide) {
+  return {
+    ...layerProps,
+    [visibleProp]: visible,
+    [visibleEvent]: (value) => {
+      if (value === false || value === void 0) hide();
+    }
+  };
+}
+
+// src/vue/render/render-layer-tree.ts
+function renderLayerTree({
+  plan,
+  hasContent,
+  contentMountKey
+}) {
+  const layerProps = buildVisibleProps(
+    plan.layer.props,
+    plan.visible,
+    plan.visibleProp,
+    plan.visibleEvent,
+    plan.onHide
+  );
+  const defaultSlot = hasContent ? () => (0, import_vue2.h)(
+    plan.content.component,
+    {
+      ...plan.content.props,
+      key: contentMountKey,
+      [LAYERX_DIRECT_CONTENT]: true
+    },
+    plan.content.slots
+  ) : () => null;
+  return (0, import_vue2.h)(plan.layer.component, layerProps, {
+    default: defaultSlot,
+    ...plan.layer.slots
+  });
+}
+
+// src/vue/di/injection-keys.ts
+var LAYER_DEFINE_KEY = /* @__PURE__ */ Symbol("vue-layerx-define");
+var LAYER_TEMPLATE_REGISTRY_KEY = /* @__PURE__ */ Symbol("vue-layerx-layer-template");
+var LAYER_BIND_REGISTRY_KEY = /* @__PURE__ */ Symbol("vue-layerx-content-template");
+
+// src/runtime/layer-root.ts
+function buildLayerRoot(ctx, opts, internal, state, defineLayerConfig, hide) {
+  return (0, import_vue3.defineComponent)({
+    name: `LayerRoot_${opts.Content ? opts.Content.name ?? "Anonymous" : "Shell"}`,
+    setup() {
+      (0, import_vue3.provide)(LAYER_DEFINE_KEY, {
+        register(config) {
+          defineLayerConfig.value = config;
+          internal.bumpSlots();
+        }
+      });
+      (0, import_vue3.provide)(LAYER_TEMPLATE_REGISTRY_KEY, {
+        registerLayerTemplate: internal.registerLayerTemplate
+      });
+      return () => {
+        if (!state.visible) return null;
+        void internal.slotsVersion.value;
+        const merged = mergeConfig({
+          layerDefaults: ctx.layerDefaults,
+          defineLayer: defineLayerConfig.value,
+          useOptions: opts.useOptions,
+          showOptions: state.showOptions,
+          partial: opts.partial
+        });
+        const resolveCtx = {
+          merged,
+          LayerComponent: ctx.LayerComponent,
+          boundContent: opts.Content,
+          layerTemplates: internal.layerTemplates,
+          contentTemplates: internal.contentTemplates,
+          hide
+        };
+        const resolved = defaultResolve(resolveCtx);
+        const normalized = ctx.adapt ? ctx.adapt(resolved) : resolved;
+        const contentPresent = hasContentComponent(resolveCtx);
+        const plan = {
+          ...normalized,
+          visible: true,
+          visibleProp: ctx.visibleProp,
+          visibleEvent: ctx.visibleEvent,
+          onHide: hide
+        };
+        return renderLayerTree({
+          plan,
+          hasContent: contentPresent,
+          contentMountKey: contentPresent ? state.contentMountKey : void 0
+        });
+      };
+    }
+  });
+}
+
+// src/runtime/layer-runtime.ts
+var import_vue4 = require("vue");
+function createLayerRuntime(root, appContext) {
+  let container = null;
+  return {
+    get mounted() {
+      return container !== null;
+    },
+    mount() {
+      if (!container) {
+        container = document.createElement("div");
+        document.body.appendChild(container);
+      }
+      const vnode = (0, import_vue4.h)(root);
+      if (appContext) vnode.appContext = appContext;
+      (0, import_vue4.render)(vnode, container);
+    },
+    unmount() {
+      if (!container) return;
+      (0, import_vue4.render)(null, container);
+      container.remove();
+      container = null;
+    }
+  };
+}
+
+// src/runtime/create-use-layer.ts
+function createInstanceLifecycle() {
+  const disposers = [];
+  return {
+    register(dispose) {
+      disposers.push(dispose);
+    },
+    dispose() {
+      for (const dispose of disposers.splice(0)) dispose();
+    }
+  };
+}
+function createInstance(ctx, opts) {
+  const internal = createLayerInternalState();
+  const state = (0, import_vue5.reactive)({
+    visible: false,
+    showOptions: {},
+    contentMountKey: 0
+  });
+  const defineLayerConfig = (0, import_vue5.shallowRef)(null);
+  const hide = () => {
+    state.visible = false;
+  };
+  const LayerRoot = buildLayerRoot(ctx, opts, internal, state, defineLayerConfig, hide);
+  const runtime = createLayerRuntime(LayerRoot, opts.appContext);
+  const dispose = () => {
+    state.visible = false;
+    runtime.unmount();
+  };
+  const show = (payload) => {
+    defineLayerConfig.value = null;
+    if (payload) state.showOptions = payload;
+    state.contentMountKey++;
+    state.visible = true;
+    if (!runtime.mounted) runtime.mount();
+  };
+  const instance = {
+    show,
+    hide,
+    clone(partial) {
+      const bundle = createInstance(ctx, {
+        Content: opts.Content,
+        useOptions: opts.useOptions,
+        partial: partial ?? {},
+        appContext: opts.appContext,
+        lifecycle: opts.lifecycle
+      });
+      opts.lifecycle.register(bundle.dispose);
+      return bundle.instance;
+    },
+    get visible() {
+      return state.visible;
+    }
+  };
+  attachInternal(instance, internal);
+  return { instance, dispose };
+}
+function createUseLayer(ctx) {
+  return function useLayer(Content, useOptions = {}) {
+    const hostInstance = (0, import_vue5.getCurrentInstance)();
+    const appContext = hostInstance?.appContext ?? null;
+    const lifecycle = createInstanceLifecycle();
+    const { instance, dispose } = createInstance(ctx, {
+      Content,
+      useOptions,
+      partial: {},
+      appContext,
+      lifecycle
+    });
+    lifecycle.register(dispose);
+    if (hostInstance) {
+      (0, import_vue5.onUnmounted)(() => lifecycle.dispose());
+    }
+    return instance;
+  };
+}
+
+// src/api/create-layer.ts
+var DEFAULT_VISIBLE = ["modelValue", "onUpdate:modelValue"];
+function createLayer(LayerComponent, defaults = {}, adapt) {
+  const [visibleProp, visibleEvent] = defaults.visible ?? DEFAULT_VISIBLE;
+  return createUseLayer({
+    LayerComponent,
+    layerDefaults: defaults,
+    visibleProp,
+    visibleEvent,
+    adapt
+  });
+}
+
+// src/api/define-layer.ts
+var import_vue6 = require("vue");
+
+// src/vue/context/layer-marker.ts
+function hasDirectLayerMarker(instance) {
+  if (!instance) return false;
+  if (instance.props?.[LAYERX_DIRECT_CONTENT] === true) return true;
+  const attrs = instance.attrs;
+  if (attrs?.[LAYERX_DIRECT_CONTENT] === true) return true;
+  const vnodeProps = instance.vnode?.props;
+  if (vnodeProps?.[LAYERX_DIRECT_CONTENT] === true) return true;
+  return false;
+}
+
+// src/api/define-layer.ts
+function defineLayer(options = {}) {
+  const registry2 = (0, import_vue6.inject)(LAYER_DEFINE_KEY, null);
+  const instance = (0, import_vue6.getCurrentInstance)();
+  if (!registry2 || !hasDirectLayerMarker(instance)) return;
+  registry2.register(options);
+}
+
+// src/components/layer-template.ts
+var import_vue7 = require("vue");
+
+// src/vue/context/owning-content.ts
+function getOwningContentInstance(instance) {
+  let cur = instance?.parent ?? null;
+  while (cur) {
+    const type = cur.type;
+    if (typeof type === "object" || typeof type === "function") {
+      return cur;
+    }
+    cur = cur.parent;
+  }
+  return null;
+}
+
+// src/vue/context/in-layer-content.ts
+function isInDirectLayerContent(instance) {
+  return hasDirectLayerMarker(getOwningContentInstance(instance));
+}
+
+// src/components/layer-template.ts
+function buildTemplateScope(slotProps, layer) {
+  return {
+    slotProps,
+    inLayer: layer.inLayer,
+    outsideLayer: layer.outsideLayer
+  };
+}
+var LayerTemplate = (0, import_vue7.defineComponent)({
+  name: "LayerTemplate",
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    visibleOutside: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, { slots }) {
+    const layerRegistry = (0, import_vue7.inject)(LAYER_TEMPLATE_REGISTRY_KEY, null);
+    const bindRegistry = (0, import_vue7.inject)(LAYER_BIND_REGISTRY_KEY, null);
+    const instance = (0, import_vue7.getCurrentInstance)();
+    const inLayer = (0, import_vue7.computed)(
+      () => layerRegistry !== null && isInDirectLayerContent(instance)
+    );
+    const inBind = (0, import_vue7.computed)(() => bindRegistry !== null);
+    const renderSlot = (templateScope) => slots.default?.(templateScope) ?? null;
+    (0, import_vue7.onMounted)(() => {
+      const renderWithScope = (layer) => (slotProps = {}) => renderSlot(buildTemplateScope(slotProps, layer));
+      if (inLayer.value && layerRegistry) {
+        layerRegistry.registerLayerTemplate(props.name, {
+          render: renderWithScope({ inLayer: true, outsideLayer: false })
+        });
+        return;
+      }
+      if (inBind.value && bindRegistry) {
+        bindRegistry.registerContentTemplate(props.name, {
+          render: renderWithScope({ inLayer: true, outsideLayer: false })
+        });
+      }
+    });
+    return () => {
+      if (inLayer.value || inBind.value) return null;
+      if (!props.visibleOutside) return null;
+      return renderSlot(buildTemplateScope({}, { inLayer: false, outsideLayer: true }));
+    };
+  }
+});
+
+// src/components/layer-bind.ts
+var import_vue8 = require("vue");
+var LayerBind = (0, import_vue8.defineComponent)({
+  name: "LayerBind",
+  props: {
+    to: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props, { slots }) {
+    const internal = getInternal(props.to);
+    (0, import_vue8.provide)(LAYER_BIND_REGISTRY_KEY, {
+      registerContentTemplate: internal.registerContentTemplate
+    });
+    return () => slots.default?.();
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LayerBind,
+  LayerTemplate,
+  createLayer,
+  defineLayer
+});