layplux 2.0.0 → 2.0.1

package/dist/cjs/managers/index.cjs

@@ -1,20 +1,12 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var managers_exports = {};
-module.exports = __toCommonJS(managers_exports);
-__reExport(managers_exports, require("./skeleton"), module.exports);
-__reExport(managers_exports, require("./area"), module.exports);
-__reExport(managers_exports, require("./widget"), module.exports);
+'use strict';
+
+var skeleton = require('./skeleton.cjs');
+var area = require('./area.cjs');
+var widget = require('./widget.cjs');
+
+
+
+exports.useSkeleton = skeleton.useSkeleton;
+exports.useArea = area.useArea;
+exports.isWidget = widget.isWidget;
+exports.useWidget = widget.useWidget;

package/dist/cjs/managers/pane.cjs

@@ -1,29 +1,13 @@
-"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);
-var pane_exports = {};
-__export(pane_exports, {
-  usePane: () => usePane
-});
-module.exports = __toCommonJS(pane_exports);
-var import_vue = require("vue");
-function usePane(defaultViewMode = "DockPinned") {
-  const viewMode = (0, import_vue.ref)(defaultViewMode);
+'use strict';
+
+var vue = require('vue');
+
+/**
+ * 没个widget都会对应自己的pane的状态
+ */
+
+function usePane(defaultViewMode = 'DockPinned') {
+  const viewMode = vue.ref(defaultViewMode);
   function setViewMode(mode) {
     viewMode.value = mode;
   }
@@ -32,3 +16,5 @@ function usePane(defaultViewMode = "DockPinned") {
     setViewMode
   };
 }
+
+exports.usePane = usePane;

package/dist/cjs/managers/skeleton.cjs

@@ -1,135 +1,109 @@
-"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);
-var skeleton_exports = {};
-__export(skeleton_exports, {
-  useSkeleton: () => useSkeleton
-});
-module.exports = __toCommonJS(skeleton_exports);
-var import_vue = require("vue");
-var import_area = require("./area");
-var import_widget = require("./widget");
-var import_widget_container = require("./widget-container");
-var import_utils = require("../utils");
-var import_theme = require("./theme");
+'use strict';
+
+var vue = require('vue');
+var area = require('./area.cjs');
+var widget = require('./widget.cjs');
+var widgetContainer = require('./widget-container.cjs');
+var theme = require('./theme.cjs');
+var eventBus = require('../utils/event-bus.cjs');
+var index = require('../locales/index.cjs');
+var focusTracker = require('../utils/focus-tracker.cjs');
+
 function useSkeleton() {
   const widgets = [];
   const self = {};
-  const containers = /* @__PURE__ */ new Map();
-  const focusTracker = new import_utils.FocusTracker();
-  const event = (0, import_utils.createPluginEventBus)("skeleton");
-  const locale = (0, import_vue.ref)((0, import_utils.getBuiltInLocale)("zh-CN"));
+  const containers = new Map();
+  const focusTracker$1 = new focusTracker.FocusTracker();
+  const event = eventBus.createPluginEventBus('skeleton');
+  const locale = vue.ref(index.getBuiltInLocale('zh-CN'));
   function setLocale(name) {
-    locale.value = (0, import_utils.getBuiltInLocale)(name);
+    locale.value = index.getBuiltInLocale(name);
   }
-  const theme = (0, import_vue.ref)("system");
-  const systemDark = (0, import_vue.ref)(
-    typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)").matches : false
-  );
+  const theme$1 = vue.ref('system');
+  const systemDark = vue.ref(typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)').matches : false);
   function resolveTheme() {
-    if (theme.value === "system") {
-      return systemDark.value ? "dark" : "light";
+    if (theme$1.value === 'system') {
+      return systemDark.value ? 'dark' : 'light';
     }
-    return theme.value;
+    return theme$1.value;
   }
   function isDark() {
-    return resolveTheme() === "dark";
+    return resolveTheme() === 'dark';
   }
   function setTheme(t) {
-    theme.value = t;
+    theme$1.value = t;
   }
-  const themeName = (0, import_vue.ref)("default");
+  const themeName = vue.ref('default');
   function setThemeName(name) {
     themeName.value = name;
   }
   function registerTheme(name, vars) {
-    (0, import_theme.injectThemeCSS)(name, vars);
+    theme.injectThemeCSS(name, vars);
   }
-  if (typeof window !== "undefined") {
-    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+
+  // 监听系统主题变化
+  if (typeof window !== 'undefined') {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
       systemDark.value = e.matches;
     });
   }
-  const topArea = (0, import_area.useArea)(
-    {
-      createContainer
-    },
-    "topArea",
-    (config, container) => createWidget(config, container)
-  );
-  const bottomArea = (0, import_area.useArea)(
-    {
-      createContainer
-    },
-    "bottomArea",
-    (config, container) => createWidget(config, container)
-  );
-  const leftTopArea = (0, import_area.useArea)(
-    {
-      createContainer
-    },
-    "leftTopArea",
-    (config, container) => createWidget(config, container)
-  );
-  const leftBottomArea = (0, import_area.useArea)(
-    {
-      createContainer
-    },
-    "leftBottomArea",
-    (config, container) => createWidget(config, container)
-  );
-  const rightTopArea = (0, import_area.useArea)(
-    { createContainer },
-    "rightTopArea",
-    (config, container) => createWidget(config, container)
-  );
-  const rightBottomArea = (0, import_area.useArea)(
-    { createContainer },
-    "rightBottomArea",
-    (config, container) => createWidget(config, container)
-  );
-  const bottomRightArea = (0, import_area.useArea)(
-    { createContainer },
-    "bottomRightArea",
-    (config, container) => createWidget(config, container)
-  );
-  const bottomLeftArea = (0, import_area.useArea)(
-    {
-      createContainer
-    },
-    "bottomLeftArea",
-    (config, container) => createWidget(config, container)
-  );
-  const centerArea = (0, import_area.useArea)(
-    { createContainer },
-    "centerArea",
-    (config, container) => createWidget(config, container)
-  );
+
+  // 顶部工具栏
+  const topArea = area.useArea({
+    createContainer
+  }, 'topArea', (config, container) => createWidget(config, container));
+
+  // 底部状态栏
+  const bottomArea = area.useArea({
+    createContainer
+  }, 'bottomArea', (config, container) => createWidget(config, container));
+
+  // 左侧顶部主区域
+  const leftTopArea = area.useArea({
+    createContainer
+  }, 'leftTopArea', (config, container) => createWidget(config, container));
+
+  // 左侧底部快捷区域
+  const leftBottomArea = area.useArea({
+    createContainer
+  }, 'leftBottomArea', (config, container) => createWidget(config, container));
+
+  // 右侧顶部主区域
+  const rightTopArea = area.useArea({
+    createContainer
+  }, 'rightTopArea', (config, container) => createWidget(config, container));
+
+  // 右侧底部区域
+  const rightBottomArea = area.useArea({
+    createContainer
+  }, 'rightBottomArea', (config, container) => createWidget(config, container));
+
+  // 右侧最底部快捷操作
+  const bottomRightArea = area.useArea({
+    createContainer
+  }, 'bottomRightArea', (config, container) => createWidget(config, container));
+
+  // 左侧最底部快捷操作（交互型）
+  const bottomLeftArea = area.useArea({
+    createContainer
+  }, 'bottomLeftArea', (config, container) => createWidget(config, container));
+
+  // 中心区域
+  const centerArea = area.useArea({
+    createContainer
+  }, 'centerArea', (config, container) => createWidget(config, container));
   function createWidget(config, container) {
-    if ((0, import_widget.isWidget)(config)) {
+    if (widget.isWidget(config)) {
       return config;
     }
-    const widget = (0, import_widget.useWidget)(config, container, self);
-    widgets.push(widget);
-    event.emitGlobal("skeleton:widget-added", { widget });
-    return widget;
+    const widget$1 = widget.useWidget(config, container, self);
+    widgets.push(widget$1);
+    event.emitGlobal('skeleton:widget-added', {
+      widget: widget$1
+    });
+    return widget$1;
   }
-  const focusedId = (0, import_vue.ref)(null);
+  const focusedId = vue.ref(null);
   function toggleFocus(id) {
     if (focusedId.value === id) {
       blur();
@@ -139,42 +113,54 @@ function useSkeleton() {
   }
   function focus(id) {
     focusedId.value = id;
-    event.emitGlobal("skeleton:focus-changed", { focusedId: id });
+    event.emitGlobal('skeleton:focus-changed', {
+      focusedId: id
+    });
   }
   function blur() {
     focusedId.value = null;
-    event.emitGlobal("skeleton:focus-changed", { focusedId: null });
+    event.emitGlobal('skeleton:focus-changed', {
+      focusedId: null
+    });
   }
   function add(config, extraConfig) {
+    // TODO: 处理extraConfig
     if (extraConfig) {
-      config = { ...config, ...extraConfig };
+      config = {
+        ...config,
+        ...extraConfig
+      };
     }
-    const { area } = config;
-    if (area === "topArea") {
+    const {
+      area
+    } = config;
+    if (area === 'topArea') {
       topArea.add(config);
-    } else if (area === "bottomArea") {
+    } else if (area === 'bottomArea') {
       bottomArea.add(config);
-    } else if (area === "leftTopArea") {
+    } else if (area === 'leftTopArea') {
       leftTopArea.add(config);
-    } else if (area === "leftBottomArea") {
+    } else if (area === 'leftBottomArea') {
       leftBottomArea.add(config);
-    } else if (area === "bottomLeftArea") {
+    } else if (area === 'bottomLeftArea') {
       bottomLeftArea.add(config);
-    } else if (area === "rightTopArea") {
+    } else if (area === 'rightTopArea') {
       rightTopArea.add(config);
-    } else if (area === "rightBottomArea") {
+    } else if (area === 'rightBottomArea') {
       rightBottomArea.add(config);
-    } else if (area === "bottomRightArea") {
+    } else if (area === 'bottomRightArea') {
       bottomRightArea.add(config);
-    } else if (area === "centerArea") {
+    } else if (area === 'centerArea') {
       centerArea.add(config);
     }
   }
   function createContainer(name, handle) {
-    const container = (0, import_widget_container.useWidgetContainer)(handle, self);
+    const container = widgetContainer.useWidgetContainer(handle, self);
     containers.set(name, container);
     return container;
   }
+
+  // 4. 填充 self 的真正属性
   Object.assign(self, {
     widgets,
     topArea,
@@ -187,11 +173,11 @@ function useSkeleton() {
     bottomLeftArea,
     centerArea,
     focusedId,
-    focusTracker,
+    focusTracker: focusTracker$1,
     event,
     locale,
     setLocale,
-    theme,
+    theme: theme$1,
     resolveTheme,
     isDark,
     setTheme,
@@ -206,3 +192,5 @@ function useSkeleton() {
   });
   return self;
 }
+
+exports.useSkeleton = useSkeleton;

package/dist/cjs/managers/theme.cjs

@@ -1,37 +1,16 @@
-"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);
-var theme_exports = {};
-__export(theme_exports, {
-  injectThemeCSS: () => injectThemeCSS
-});
-module.exports = __toCommonJS(theme_exports);
+'use strict';
+
+/** 为指定 theme 注入 CSS 变量样式，重复注册会替换 */
 function injectThemeCSS(name, vars) {
   const styleId = `layplux-theme-${name}`;
   let styleEl = document.getElementById(styleId);
   if (!styleEl) {
-    styleEl = document.createElement("style");
+    styleEl = document.createElement('style');
     styleEl.id = styleId;
     document.head.appendChild(styleEl);
   }
-  const varLines = Object.entries(vars).map(([key, value]) => `    ${key}: ${value};`).join("\n");
-  styleEl.textContent = `.layplux-root[data-theme='${name}'] {
-${varLines}
-}
-`;
+  const varLines = Object.entries(vars).map(([key, value]) => `    ${key}: ${value};`).join('\n');
+  styleEl.textContent = `.layplux-root[data-theme='${name}'] {\n${varLines}\n}\n`;
 }
+
+exports.injectThemeCSS = injectThemeCSS;

package/dist/cjs/managers/widget-container.cjs

@@ -1,31 +1,22 @@
-"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);
-var widget_container_exports = {};
-__export(widget_container_exports, {
-  useWidgetContainer: () => useWidgetContainer
-});
-module.exports = __toCommonJS(widget_container_exports);
-var import_vue = require("vue");
+'use strict';
+
+var vue = require('vue');
+
+/**
+ * handle 函数签名：把原始 item（config 或 widget）转换成 widget 实例。
+ * 第二个参数是所属 container 的引用，方便在创建 widget 时回引。
+ */
+
+/**
+ * widget container 用于管理 widget 的添加、删除、获取等操作
+ * T 为 widget 的类型
+ * G 为 widgetconfig 的配置类型
+ */
 function useWidgetContainer(handle, skeleton) {
   const maps = {};
-  const items = (0, import_vue.ref)([]);
-  const activeId = (0, import_vue.ref)(null);
+  const items = vue.ref([]);
+  const activeId = vue.ref(null); // ✅ 单一数据源
+
   const self = {
     items,
     activeId,
@@ -39,6 +30,7 @@ function useWidgetContainer(handle, skeleton) {
     toggleActive
   };
   function add(item) {
+    // 将config转换为widget,将创建widget的能力交给外部，并把 container 自身传出去
     const nItem = handle(item, self);
     const origin = get(nItem.name);
     if (origin === nItem) return origin;
@@ -66,23 +58,29 @@ function useWidgetContainer(handle, skeleton) {
     const i = items.value.indexOf(item);
     if (i > -1) items.value.splice(i, 1);
     delete maps[name];
-    skeleton.event.emitGlobal("skeleton:widget-removed", { name });
+    skeleton.event.emitGlobal('skeleton:widget-removed', {
+      name
+    });
     return item;
   }
   function activate(id) {
     if (!maps[id]) return;
     activeId.value = id;
     skeleton.focus(id);
-    maps[id].focusable.active();
-    skeleton.event.emitGlobal(`widget:${id}:activated`, { widget: maps[id] });
+    maps[id].focusable.active(); // 面板激活 → 同步焦点栈
+    skeleton.event.emitGlobal(`widget:${id}:activated`, {
+      widget: maps[id]
+    });
   }
   function deactivate() {
     const current = activeId.value;
     activeId.value = null;
     skeleton.blur();
     if (current && maps[current]) {
-      maps[current].focusable.suspense();
-      skeleton.event.emitGlobal(`widget:${current}:deactivated`, { widget: maps[current] });
+      maps[current].focusable.suspense(); // 面板收起 → 从焦点栈移除
+      skeleton.event.emitGlobal(`widget:${current}:deactivated`, {
+        widget: maps[current]
+      });
     }
   }
   function toggleActive(id) {
@@ -94,3 +92,5 @@ function useWidgetContainer(handle, skeleton) {
   }
   return self;
 }
+
+exports.useWidgetContainer = useWidgetContainer;