@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/dist/src/visual/config/Options.js

@@ -0,0 +1,8 @@
+import '../../../style.css';
+import _sfc_main from "./Options.vue.js";
+/* empty css             */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const ConfigOptions = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e487f04a"]]);
+export {
+  ConfigOptions as default
+};

package/dist/src/visual/config/Options.vue.js

@@ -0,0 +1,278 @@
+import { createVNode, resolveComponent, isVNode } from "vue";
+import _sfc_main$1 from "./FormItem.js";
+import { captureRef } from "@epxing/core/src/capture-ref";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const _sfc_main = {
+  name: "epx-visual-config-options",
+  components: {
+    [_sfc_main$1.name]: _sfc_main$1
+  },
+  props: {
+    configOptions: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      loadedOptionMap: {},
+      foldMap: {},
+      activeCategory: null,
+      categoryNavTop: 12
+    };
+  },
+  computed: {
+    categories() {
+      return this.configOptions.filter((item) => {
+        var _a;
+        return !item.render && item.label && ((_a = item.children) == null ? void 0 : _a.length) > 0;
+      });
+    }
+  },
+  watch: {
+    // 父面板的 showConfigOptions 每次重算都是新数组（一次选中里会换三四次，改任一配置项也会换），
+    // 这里只按 key 集合同步：引用变了但项没变就什么都不做，已加载的项不会被打回骨架屏
+    configOptions() {
+      this.syncLazyLoad();
+      this.$nextTick(() => this.updateActiveCategory());
+    }
+  },
+  methods: {
+    bindCategoryScroll() {
+      let container = this.$el.parentElement;
+      while (container && !/(auto|scroll|overlay)/.test(getComputedStyle(container).overflowY)) {
+        container = container.parentElement;
+      }
+      this._scrollContainer = container || document.scrollingElement || document.documentElement;
+      this._scrollTarget = container || window;
+      this._scrollTarget.addEventListener("scroll", this.scheduleCategoryUpdate, {
+        passive: true
+      });
+      this._categoryResizeObserver = new ResizeObserver(this.scheduleCategoryUpdate);
+      this._categoryResizeObserver.observe(this.$el);
+      this._categoryResizeObserver.observe(this._scrollContainer);
+      this.updateActiveCategory();
+    },
+    scheduleCategoryUpdate() {
+      if (this._categoryFrame != null) return;
+      this._categoryFrame = requestAnimationFrame(() => {
+        this._categoryFrame = null;
+        this.updateActiveCategory();
+      });
+    },
+    categoryViewportTop() {
+      const container = this._scrollContainer;
+      return this._scrollTarget === window ? 0 : container.getBoundingClientRect().top + container.clientTop;
+    },
+    updateActiveCategory() {
+      var _a, _b;
+      if (!this._scrollContainer) return;
+      const viewportHeight = this._scrollTarget === window ? window.innerHeight : this._scrollContainer.clientHeight;
+      this.categoryNavTop = Math.max(12, (viewportHeight - (((_a = this.$refs.categoryNav) == null ? void 0 : _a.offsetHeight) || 0)) / 2);
+      const top = this.categoryViewportTop() + 8;
+      let active = null;
+      for (const item of this.categories) {
+        const el = this.$refs["category_" + item.key];
+        if (el && el.getBoundingClientRect().top <= top + 1) active = item.key;
+      }
+      const container = this._scrollContainer;
+      if (container.scrollTop > 0 && container.scrollTop + container.clientHeight >= container.scrollHeight - 1) {
+        active = ((_b = this.categories[this.categories.length - 1]) == null ? void 0 : _b.key) ?? null;
+      }
+      this.activeCategory = active;
+    },
+    async scrollToCategory(item) {
+      this.foldMap[item.key] = false;
+      for (const child of item.children) {
+        if (this.loadedOptionMap[child.key] === false) {
+          this.unobserve(child.key);
+          this.loadedOptionMap[child.key] = true;
+        }
+      }
+      await this.$nextTick();
+      const el = this.$refs["category_" + item.key];
+      const container = this._scrollContainer;
+      if (!el || !container) return;
+      const top = container.scrollTop + el.getBoundingClientRect().top - this.categoryViewportTop() - 8;
+      const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      container.scrollTo({
+        top: Math.max(0, top),
+        behavior: reducedMotion || this.isLazyLoad ? "auto" : "smooth"
+      });
+      this.activeCategory = item.key;
+    },
+    switchAccordion(key) {
+      this.foldMap[key] = !this.foldMap[key];
+    },
+    // 会走懒加载的配置项 key：折叠面板取其子项；自定义 render 的项始终直接渲染、不登记
+    collectLazyKeys() {
+      var _a;
+      const keys = [];
+      for (const item of this.configOptions) {
+        if (item.render) continue;
+        if (((_a = item.children) == null ? void 0 : _a.length) > 0 || item.type === "area") {
+          for (const child of item.children || []) keys.push(child.key);
+        } else {
+          keys.push(item.key);
+        }
+      }
+      return keys;
+    },
+    // 面板创建时只有 5 个基础项，配置项树到了才超过 20 项，所以创建与每次 configOptions 变化都要同步一次。
+    // 已加载状态只从「未加载」走向「已加载」：从面板上消失的项注销，新出现的项登记为未加载，其余不动
+    syncLazyLoad() {
+      const keys = this.collectLazyKeys();
+      const sig = keys.join("\n");
+      if (sig === this._optionSig) return;
+      const prevKeys = new Set(this._optionSig ? this._optionSig.split("\n") : []);
+      this._optionSig = sig;
+      if (!this.isLazyLoad) {
+        const optionLength = this.configOptions.reduce((sum, item) => item.children ? sum + item.children.length : sum + 1, 0);
+        if (optionLength <= 20) return;
+        this.isLazyLoad = true;
+      }
+      const keySet = new Set(keys);
+      for (const key in this.loadedOptionMap) {
+        if (!keySet.has(key)) {
+          this.unobserve(key);
+          delete this.loadedOptionMap[key];
+        }
+      }
+      for (const key of keys) {
+        if (!(key in this.loadedOptionMap) && !prevKeys.has(key)) this.loadedOptionMap[key] = false;
+      }
+      this.$nextTick(() => this.observePlaceholders());
+    },
+    // 给未加载项的骨架屏挂 IntersectionObserver，滚进视口就换成真正的表单项；
+    // 骨架屏因显隐条件重建过（元素变了）的重新挂，其余已挂的跳过
+    observePlaceholders() {
+      for (const key in this.loadedOptionMap) {
+        if (this.loadedOptionMap[key] !== false) continue;
+        const el = this.$refs["placeholder_" + key];
+        if (!el) continue;
+        const current = this._observers.get(key);
+        if (current && current.el === el) continue;
+        if (current) current.observer.disconnect();
+        const observer = new IntersectionObserver((entries) => {
+          if (!entries.some((entry) => entry.isIntersecting)) return;
+          this.unobserve(key);
+          this.loadedOptionMap[key] = true;
+        });
+        observer.observe(el);
+        this._observers.set(key, {
+          el,
+          observer
+        });
+      }
+    },
+    unobserve(key) {
+      const current = this._observers.get(key);
+      if (!current) return;
+      current.observer.disconnect();
+      this._observers.delete(key);
+    },
+    // 占位用纯 div + CSS 闪动：el-skeleton 每个占位是 5 个组件实例，大面板 77 个占位就是 ~400 个
+    renderPlaceholder(item) {
+      return createVNode("div", {
+        "key": item.key,
+        "ref": captureRef(this, "placeholder_" + item.key),
+        "class": "epx-visual-component__placeholder"
+      }, null);
+    },
+    renderAccordion(item) {
+      return createVNode("div", {
+        "key": item.key,
+        "ref": captureRef(this, "category_" + item.key),
+        "class": {
+          "epx-visual-component__accordion": true,
+          "is-fold": this.foldMap[item.key]
+        }
+      }, [createVNode("div", {
+        "class": "epx-visual-component__accordion-header"
+      }, [createVNode("span", null, [item.label]), createVNode("i", {
+        "class": "epx-visual-component__accordion-icon el-icon-arrow-up",
+        "onClick": this.switchAccordion.bind(this, item.key)
+      }, null)]), createVNode("div", {
+        "class": "epx-visual-component__accordion-body"
+      }, [item.children.map((child) => {
+        return this.loadedOptionMap[child.key] !== false ? createVNode(resolveComponent("epx-visual-config-form-item"), {
+          "key": child.key,
+          "item": child
+        }, null) : this.renderPlaceholder(child);
+      })])]);
+    }
+  },
+  render() {
+    let _slot;
+    return createVNode("div", {
+      "class": ["epx-visual-config-options", {
+        "has-category-nav": this.categories.length > 0
+      }]
+    }, [this.categories.length > 0 && createVNode("div", {
+      "class": "epx-visual-config-category-rail",
+      "style": {
+        top: `${this.categoryNavTop}px`
+      }
+    }, [createVNode("nav", {
+      "ref": "categoryNav",
+      "class": "epx-visual-config-category-nav",
+      "aria-label": "配置分类导航"
+    }, [this.categories.map((item) => createVNode("button", {
+      "key": item.key,
+      "type": "button",
+      "class": ["epx-visual-config-category-nav__item", {
+        "is-active": this.activeCategory === item.key
+      }],
+      "aria-label": item.label,
+      "aria-current": this.activeCategory === item.key ? "location" : void 0,
+      "onClick": () => this.scrollToCategory(item)
+    }, [createVNode("span", {
+      "class": "epx-visual-config-category-nav__dot",
+      "aria-hidden": "true"
+    }, null), createVNode("span", {
+      "class": "epx-visual-config-category-nav__label",
+      "aria-hidden": "true"
+    }, [item.label])]))])]), createVNode(resolveComponent("el-form"), {
+      "inline": true,
+      "label-position": "left",
+      "label-width": "98px",
+      "onVnodeMounted": this.observePlaceholders
+    }, _isSlot(_slot = // 每个配置项是独立子组件（item 引用不变时不重渲染），自定义 render 的项也走它
+    this.configOptions.map((item) => {
+      var _a;
+      if (item.render) return createVNode(resolveComponent("epx-visual-config-form-item"), {
+        "key": item.key,
+        "item": item
+      }, null);
+      if (((_a = item.children) == null ? void 0 : _a.length) > 0 || item.type === "area") return this.renderAccordion(item);
+      return this.loadedOptionMap[item.key] !== false ? createVNode(resolveComponent("epx-visual-config-form-item"), {
+        "key": item.key,
+        "item": item
+      }, null) : this.renderPlaceholder(item);
+    })) ? _slot : {
+      default: () => [_slot]
+    })]);
+  },
+  mounted() {
+    this.bindCategoryScroll();
+  },
+  beforeUnmount() {
+    var _a, _b;
+    (_a = this._scrollTarget) == null ? void 0 : _a.removeEventListener("scroll", this.scheduleCategoryUpdate);
+    (_b = this._categoryResizeObserver) == null ? void 0 : _b.disconnect();
+    if (this._categoryFrame != null) cancelAnimationFrame(this._categoryFrame);
+    for (const key of [...this._observers.keys()]) this.unobserve(key);
+  },
+  created() {
+    this._observers = /* @__PURE__ */ new Map();
+    this._optionSig = null;
+    this.syncLazyLoad();
+  }
+};
+export {
+  _sfc_main as default
+};