@epxing/dashboard 0.0.0-stage → 5.3.0-beta.1

package/dist/src/DashboardGrid.js

@@ -0,0 +1,182 @@
+import { isContainerType, normalizeGridParams } from "./grid/model.js";
+import { normalizeGridItem } from "./layout-util.js";
+import { layoutHeight, itemRect, rectStyle, resolveGrid } from "./grid/geometry.js";
+import { compact } from "./grid/compact.js";
+import { createViewportGate } from "./grid/useViewportGate.js";
+import { resolveDirective, openBlock, createElementBlock, normalizeStyle, normalizeClass, Fragment, renderList, withDirectives, renderSlot, createCommentVNode } from "vue";
+/* empty css                  */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-dashboard-grid",
+  props: {
+    items: { type: Array, default: () => [] },
+    grid: { type: Object, default: () => ({}) },
+    mode: { type: String, default: "view" },
+    // all：全部挂载；current：进入可视区后挂载、不再卸载；viewport：进入挂载、远离卸载
+    // 挂载后不可变；要切换请由父组件加 key 重建
+    loadWay: { type: String, default: "all" },
+    // 显式容器宽度（测试 / 无 ResizeObserver 环境用），缺省由 ResizeObserver 测量
+    // 挂载后不可变；要切换请由父组件加 key 重建
+    width: { type: Number, default: 0 },
+    // rowHeight / gap 为 'auto' 时的换算基准（document.body 高度），由父组件传入并随 resize 更新
+    bodyHeight: { type: Number, default: 0 },
+    // 可视区门控的滚动容器：从本组件向上找最近的匹配祖先，找不到用视口
+    scrollRootSelector: { type: String, default: ".epx-dashboard__container" }
+  },
+  directives: {
+    // 用指令而不是函数 ref：指令的 mounted / unmounted 都能拿到元素本身，函数 ref 卸载时只给 null。
+    // 值是 entry：容器项（entry.gated 为 false）不交给观察器（R14：容器本身不门控，门控作用在容器内的项上）
+    gate: {
+      mounted(el, binding) {
+        if (binding.value.gated) binding.instance.gateObserve(el, binding.value.item.id);
+      },
+      unmounted(el, binding) {
+        binding.instance.gateUnobserve(el);
+      }
+    }
+  },
+  data() {
+    const needGate = this.loadWay === "current" || this.loadWay === "viewport";
+    const gateUnsupported = needGate && !(typeof window !== "undefined" && typeof window.IntersectionObserver === "function");
+    return { measuredWidth: 0, activeIds: {}, gateUnsupported };
+  },
+  computed: {
+    gridParams() {
+      return normalizeGridParams(this.grid);
+    },
+    containerWidth() {
+      return this.width || this.measuredWidth;
+    },
+    resolved() {
+      return resolveGrid(this.gridParams, { containerWidth: this.containerWidth, bodyHeight: this.bodyHeight });
+    },
+    // 整页悬浮（grid.mode === 'float'，R30）：全部项按悬浮处理——不压紧、按 z 叠放，与设计态只有悬浮层一致
+    floatMode() {
+      return this.gridParams.mode === "float";
+    },
+    // 渲染用坐标：与旧布局库 mounted 后的 compact 同一算法（空隙上移、重叠推下，static 项不动、float 项原样），
+    // 算出的是副本，不写回 props / 页面配置；每项 { item: 原始项, pos: 压紧后的坐标副本 }。整页悬浮时全部项按悬浮算
+    compacted() {
+      const live = (this.items || []).filter(Boolean);
+      const positions = compact(this.floatMode ? live.map((item) => ({ ...item, float: true })) : live);
+      return live.map((item, idx) => ({ item, pos: positions[idx] }));
+    },
+    // 只做几何计算、不改写 item：规范化交给下面 items 的 deep watch，在渲染前把
+    // x/y/w/h 落定成数字，这里保持 computed 该有的无副作用约定
+    entries() {
+      return this.compacted.map(({ item, pos }) => {
+        const rect = itemRect(pos, this.resolved);
+        const style = rectStyle(rect);
+        const float = this.floatMode || !!item.float;
+        if (float) style.zIndex = 10 + (Number(item.z) || 0);
+        return { item, rect, style, float, gated: !isContainerType(item.contentType) };
+      });
+    },
+    containerStyle() {
+      return { height: layoutHeight(this.compacted.map((e) => e.pos), this.resolved) + "px" };
+    },
+    gated() {
+      return (this.loadWay === "current" || this.loadWay === "viewport") && !this.gateUnsupported;
+    }
+  },
+  watch: {
+    // 规范化 x/y/w/h（原来放在 entries computed 里就地改写 item，违反 computed 无副作用
+    // 约定，items 若来自 readonly() 源还会静默失败）；顺带把已经不在 items 里的项的
+    // 激活记录一并清掉，别让 activeIds 只增不减。deep: 1 只跟踪数组层与元素身份，不深度
+    // 追踪每项内部字段——这里就地写 item.x/y/w/h，用 deep: true 会和这次改写形成响应式回环。
+    // immediate 让规范化在首帧渲染前就完成，entries 求值时数字已经就绪。
+    items: {
+      deep: 1,
+      handler(v) {
+        const list = v || [];
+        const alive = /* @__PURE__ */ new Set();
+        for (const item of list) {
+          if (!item) continue;
+          normalizeGridItem(item);
+          alive.add(String(item.id));
+        }
+        for (const id in this.activeIds) if (!alive.has(id)) delete this.activeIds[id];
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    shouldRender(item) {
+      if (!this.gated) return true;
+      if (isContainerType(item.contentType) || item.keepAlive) return true;
+      return !!this.activeIds[item.id];
+    },
+    gateObserve(el, id) {
+      if (this.gate) this.gate.observe(el, id);
+    },
+    gateUnobserve(el) {
+      if (this.gate) this.gate.unobserve(el);
+      if (el.dataset && el.dataset.itemId != null) delete this.activeIds[el.dataset.itemId];
+    },
+    measure() {
+      if (this.$refs.root) this.measuredWidth = this.$refs.root.offsetWidth;
+    }
+  },
+  mounted() {
+    if (!this.width) {
+      this.measure();
+      if (typeof ResizeObserver !== "undefined") {
+        this.resizeObserver = new ResizeObserver(() => this.measure());
+        this.resizeObserver.observe(this.$refs.root);
+      }
+    }
+    if (this.loadWay === "current" || this.loadWay === "viewport") {
+      const root = this.scrollRootSelector && this.$el.closest(this.scrollRootSelector) || null;
+      this.gate = createViewportGate({
+        root,
+        sticky: this.loadWay === "current",
+        onChange: (id, active) => {
+          if (active) this.activeIds[id] = true;
+          else delete this.activeIds[id];
+        }
+      });
+      if (!this.gate.supported) {
+        this.gateUnsupported = true;
+        return;
+      }
+      for (const el of Array.from(this.$el.children)) {
+        if (el.dataset && el.dataset.itemId != null && el.dataset.gated === "1") this.gate.observe(el, el.dataset.itemId);
+      }
+    }
+  },
+  beforeUnmount() {
+    if (this.resizeObserver) this.resizeObserver.disconnect();
+    if (this.gate) this.gate.destroy();
+  }
+};
+const _hoisted_1 = ["data-item-id", "data-gated"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _directive_gate = resolveDirective("gate");
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(["epx-dashboard-grid", { "epx-dashboard-grid--float-mode": $options.floatMode }]),
+    style: normalizeStyle($options.containerStyle)
+  }, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList($options.entries, (entry) => {
+      return withDirectives((openBlock(), createElementBlock("div", {
+        key: entry.item.id,
+        class: normalizeClass(["epx-dashboard-grid__item", { "epx-dashboard-grid__item--float": entry.float, "epx-dashboard-grid__item--static": !!entry.item.static }]),
+        style: normalizeStyle(entry.style),
+        "data-item-id": entry.item.id,
+        "data-gated": entry.gated ? "1" : null
+      }, [
+        $options.shouldRender(entry.item) ? renderSlot(_ctx.$slots, "item", {
+          key: 0,
+          item: entry.item,
+          rect: entry.rect
+        }) : createCommentVNode("", true)
+      ], 14, _hoisted_1)), [
+        [_directive_gate, entry]
+      ]);
+    }), 128))
+  ], 6);
+}
+const DashboardGrid = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  DashboardGrid as default
+};