vue-layerx 0.0.1

package/dist/index.js

@@ -0,0 +1,521 @@
+// src/runtime/create-use-layer.ts
+import {
+  getCurrentInstance,
+  onUnmounted,
+  reactive,
+  shallowRef
+} from "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
+import { ref } from "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 = 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
+import { defineComponent, provide } from "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
+import { h } from "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 ? () => h(
+    plan.content.component,
+    {
+      ...plan.content.props,
+      key: contentMountKey,
+      [LAYERX_DIRECT_CONTENT]: true
+    },
+    plan.content.slots
+  ) : () => null;
+  return 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 defineComponent({
+    name: `LayerRoot_${opts.Content ? opts.Content.name ?? "Anonymous" : "Shell"}`,
+    setup() {
+      provide(LAYER_DEFINE_KEY, {
+        register(config) {
+          defineLayerConfig.value = config;
+          internal.bumpSlots();
+        }
+      });
+      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
+import { h as h2, render } from "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 = h2(root);
+      if (appContext) vnode.appContext = appContext;
+      render(vnode, container);
+    },
+    unmount() {
+      if (!container) return;
+      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 = reactive({
+    visible: false,
+    showOptions: {},
+    contentMountKey: 0
+  });
+  const defineLayerConfig = 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 = getCurrentInstance();
+    const appContext = hostInstance?.appContext ?? null;
+    const lifecycle = createInstanceLifecycle();
+    const { instance, dispose } = createInstance(ctx, {
+      Content,
+      useOptions,
+      partial: {},
+      appContext,
+      lifecycle
+    });
+    lifecycle.register(dispose);
+    if (hostInstance) {
+      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
+import { getCurrentInstance as getCurrentInstance2, inject } from "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 = inject(LAYER_DEFINE_KEY, null);
+  const instance = getCurrentInstance2();
+  if (!registry2 || !hasDirectLayerMarker(instance)) return;
+  registry2.register(options);
+}
+
+// src/components/layer-template.ts
+import { computed, defineComponent as defineComponent2, getCurrentInstance as getCurrentInstance3, inject as inject2, onMounted } from "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 = defineComponent2({
+  name: "LayerTemplate",
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    visibleOutside: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, { slots }) {
+    const layerRegistry = inject2(LAYER_TEMPLATE_REGISTRY_KEY, null);
+    const bindRegistry = inject2(LAYER_BIND_REGISTRY_KEY, null);
+    const instance = getCurrentInstance3();
+    const inLayer = computed(
+      () => layerRegistry !== null && isInDirectLayerContent(instance)
+    );
+    const inBind = computed(() => bindRegistry !== null);
+    const renderSlot = (templateScope) => slots.default?.(templateScope) ?? null;
+    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
+import { defineComponent as defineComponent3, provide as provide2 } from "vue";
+var LayerBind = defineComponent3({
+  name: "LayerBind",
+  props: {
+    to: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props, { slots }) {
+    const internal = getInternal(props.to);
+    provide2(LAYER_BIND_REGISTRY_KEY, {
+      registerContentTemplate: internal.registerContentTemplate
+    });
+    return () => slots.default?.();
+  }
+});
+export {
+  LayerBind,
+  LayerTemplate,
+  createLayer,
+  defineLayer
+};

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "vue-layerx",
+  "version": "0.0.1",
+  "description": "Vue 3 hook factory for declarative + imperative layered UI (dialogs, drawers, etc.)",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "playground": "pnpm build && pnpm --filter playground dev",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xuyimingwork/vue-layerx.git"
+  },
+  "homepage": "https://github.com/xuyimingwork/vue-layerx#readme",
+  "bugs": {
+    "url": "https://github.com/xuyimingwork/vue-layerx/issues"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "dialog",
+    "modal",
+    "layer",
+    "composable"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vue/test-utils": "^2.4.6",
+    "element-plus": "^2.11.4",
+    "jsdom": "^26.1.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3",
+    "vitepress": "^1.6.3",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.16"
+  }
+}