@qodalis/vue-cli 2.0.0-beta.10 → 2.0.0-beta.11

package/dist/index.mjs

@@ -256,38 +256,97 @@ var CliPanel = defineComponent3({
       type: Function,
       default: void 0
     },
+    collapsed: { type: Boolean, default: void 0 },
+    hidden: { type: Boolean, default: void 0 },
+    maximized: { type: Boolean, default: void 0 },
+    activeTabId: { type: Number, default: void 0 },
+    position: { type: String, default: void 0 },
+    height: { type: Number, default: void 0 },
+    width: { type: Number, default: void 0 },
     style: {
       type: Object,
       default: void 0
     },
     class: { type: String, default: void 0 }
   },
-  setup(props) {
+  emits: [
+    "update:collapsed",
+    "update:hidden",
+    "update:maximized",
+    "update:activeTabId",
+    "update:position",
+    "update:height",
+    "update:width",
+    "close",
+    "tab-added",
+    "tab-closed",
+    "pane-split",
+    "pane-closed"
+  ],
+  setup(props, { expose, emit }) {
     const config = inject2(CliConfigKey, null);
     const mergedOptions = computed(() => props.options ?? config?.options);
     const mergedModules = computed(() => props.modules ?? config?.modules);
     const mergedProcessors = computed(() => props.processors ?? config?.processors);
     const mergedServices = computed(() => props.services ?? config?.services);
     const visible = ref2(true);
-    const collapsed = ref2(mergedOptions.value?.isCollapsed ?? true);
-    const maximized = ref2(false);
-    const panelHeight = ref2(600);
-    const panelWidth = ref2(400);
+    const internalCollapsed = ref2(mergedOptions.value?.isCollapsed ?? true);
+    const internalMaximized = ref2(false);
+    const internalHeight = ref2(600);
+    const internalWidth = ref2(400);
     const prevHeight = ref2(600);
     const prevWidth = ref2(400);
     const initialized = ref2(false);
-    const hidden = ref2(props.options?.isHidden ?? false);
+    const internalHidden = ref2(props.options?.isHidden ?? false);
     let preHideCollapsed = true;
-    const position = ref2(loadPanelPosition() ?? mergedOptions.value?.position ?? "bottom");
+    const internalActiveTabId = ref2(0);
+    const internalPosition = ref2(
+      loadPanelPosition() ?? mergedOptions.value?.position ?? "bottom"
+    );
+    const resolvedCollapsed = computed(() => props.collapsed !== void 0 ? props.collapsed : internalCollapsed.value);
+    const resolvedHidden = computed(() => props.hidden !== void 0 ? props.hidden : internalHidden.value);
+    const resolvedMaximized = computed(() => props.maximized !== void 0 ? props.maximized : internalMaximized.value);
+    const resolvedActiveTabId = computed(() => props.activeTabId !== void 0 ? props.activeTabId : internalActiveTabId.value);
+    const resolvedHeight = computed(() => props.height !== void 0 ? props.height : internalHeight.value);
+    const resolvedWidth = computed(() => props.width !== void 0 ? props.width : internalWidth.value);
+    const resolvedPosition = computed(() => props.position !== void 0 ? props.position : internalPosition.value);
+    function updateCollapsed(value) {
+      internalCollapsed.value = value;
+      emit("update:collapsed", value);
+    }
+    function updateHidden(value) {
+      internalHidden.value = value;
+      emit("update:hidden", value);
+    }
+    function updateMaximized(value) {
+      internalMaximized.value = value;
+      emit("update:maximized", value);
+    }
+    function updateActiveTabId(value) {
+      internalActiveTabId.value = value;
+      emit("update:activeTabId", value);
+    }
+    function updateHeight(value) {
+      internalHeight.value = value;
+      emit("update:height", value);
+    }
+    function updateWidth(value) {
+      internalWidth.value = value;
+      emit("update:width", value);
+    }
+    function updatePosition(value) {
+      internalPosition.value = value;
+      savePanelPosition(value);
+      emit("update:position", value);
+    }
     const closable = computed(() => mergedOptions.value?.closable ?? true);
     const resizable = computed(() => mergedOptions.value?.resizable ?? true);
-    const isHorizontal = computed(() => position.value === "left" || position.value === "right");
+    const isHorizontal = computed(() => resolvedPosition.value === "left" || resolvedPosition.value === "right");
     const hideable = computed(() => mergedOptions.value?.hideable ?? true);
     const hideAlignment = computed(() => mergedOptions.value?.hideAlignment ?? "center");
     const syncTheme = computed(() => mergedOptions.value?.syncTheme ?? false);
     const themeStyles = ref2({});
     const tabs = ref2([]);
-    const activeTabId = ref2(0);
     const activePaneId = ref2(0);
     let nextTabId = 1;
     let nextPaneId = 1;
@@ -308,19 +367,19 @@ var CliPanel = defineComponent3({
     };
     const panelResizing = ref2(false);
     let panelResizeState = { startY: 0, startHeight: 0, startX: 0, startWidth: 0 };
-    function addTab() {
-      const paneId = nextPaneId++;
+    function addTab(title) {
       const tabId = nextTabId++;
-      const pane = { id: paneId, widthPercent: 100 };
-      const tab = {
+      const paneId = nextPaneId++;
+      tabs.value = [...tabs.value, {
         id: tabId,
-        title: `Terminal ${tabId}`,
+        title: title ?? `Terminal ${tabId}`,
         isEditing: false,
-        panes: [pane]
-      };
-      tabs.value.push(tab);
-      activeTabId.value = tabId;
+        panes: [{ id: paneId, widthPercent: 100 }]
+      }];
+      updateActiveTabId(tabId);
       activePaneId.value = paneId;
+      emit("tab-added", { tabId });
+      return tabId;
     }
     let themeObserver;
     function syncThemeFromEngine() {
@@ -348,8 +407,9 @@ var CliPanel = defineComponent3({
       document.removeEventListener("click", closePositionDropdown);
     });
     function toggle() {
-      collapsed.value = !collapsed.value;
-      if (!collapsed.value && !initialized.value) {
+      const newVal = !resolvedCollapsed.value;
+      updateCollapsed(newVal);
+      if (!newVal && !initialized.value) {
         initialized.value = true;
         addTab();
         setupThemeSync();
@@ -359,58 +419,61 @@ var CliPanel = defineComponent3({
       const idx = tabs.value.findIndex((t) => t.id === id);
       if (idx === -1) return;
       tabs.value.splice(idx, 1);
+      emit("tab-closed", { tabId: id });
       if (tabs.value.length === 0) {
         initialized.value = false;
-        collapsed.value = true;
+        updateCollapsed(true);
         return;
       }
-      if (activeTabId.value === id) {
+      if (resolvedActiveTabId.value === id) {
         const newIdx = Math.min(idx, tabs.value.length - 1);
         selectTab(tabs.value[newIdx].id);
       }
     }
     function selectTab(id) {
-      activeTabId.value = id;
+      updateActiveTabId(id);
       const tab = tabs.value.find((t) => t.id === id);
       if (tab && tab.panes.length > 0) {
         activePaneId.value = tab.panes[0].id;
       }
     }
-    function splitRight(tabId) {
-      const tab = tabs.value.find(
-        (t) => t.id === (tabId ?? activeTabId.value)
-      );
-      if (!tab) return;
-      const idx = tab.panes.findIndex((p) => p.id === activePaneId.value);
-      const insertIdx = idx === -1 ? tab.panes.length : idx + 1;
-      const newPaneId = nextPaneId++;
-      tab.panes.splice(insertIdx, 0, { id: newPaneId, widthPercent: 0 });
-      const evenWidth = 100 / tab.panes.length;
-      tab.panes.forEach((p) => {
-        p.widthPercent = evenWidth;
+    function splitPane(tabId) {
+      const targetTabId = tabId ?? resolvedActiveTabId.value;
+      const paneId = nextPaneId++;
+      tabs.value = tabs.value.map((t) => {
+        if (t.id !== targetTabId) return t;
+        const newPanes = [...t.panes, { id: paneId, widthPercent: 0 }];
+        normalizePanes(newPanes);
+        return { ...t, panes: newPanes };
       });
-      normalizePanes(tab.panes);
-      activePaneId.value = newPaneId;
+      activePaneId.value = paneId;
+      emit("pane-split", { paneId, tabId: targetTabId });
+      return paneId;
     }
-    function closePane(tabId, paneId) {
-      const tab = tabs.value.find((t) => t.id === tabId);
-      if (!tab) return;
-      if (tab.panes.length <= 1) {
-        closeTab(tabId);
+    function closePane(paneId) {
+      for (const tab of tabs.value) {
+        const idx = tab.panes.findIndex((p) => p.id === paneId);
+        if (idx === -1) continue;
+        if (tab.panes.length <= 1) {
+          closeTab(tab.id);
+          return;
+        }
+        engineMap.get(paneId)?.destroy();
+        engineMap.delete(paneId);
+        const newPanes = tab.panes.filter((p) => p.id !== paneId);
+        normalizePanes(newPanes);
+        if (activePaneId.value === paneId) {
+          activePaneId.value = newPanes[Math.min(idx, newPanes.length - 1)].id;
+        }
+        emit("pane-closed", { paneId });
+        tabs.value = tabs.value.map(
+          (t) => t.id === tab.id ? { ...t, panes: newPanes } : t
+        );
         return;
       }
-      const idx = tab.panes.findIndex((p) => p.id === paneId);
-      if (idx === -1) return;
-      tab.panes.splice(idx, 1);
-      const total = tab.panes.reduce((s, p) => s + p.widthPercent, 0);
-      if (total > 0)
-        tab.panes.forEach((p) => {
-          p.widthPercent = p.widthPercent / total * 100;
-        });
-      normalizePanes(tab.panes);
-      if (activePaneId.value === paneId) {
-        activePaneId.value = tab.panes[Math.min(idx, tab.panes.length - 1)].id;
-      }
+    }
+    function renameTab(tabId, title) {
+      tabs.value = tabs.value.map((t) => t.id === tabId ? { ...t, title } : t);
     }
     function startRename(tabId) {
       tabs.value.forEach((t) => {
@@ -438,27 +501,27 @@ var CliPanel = defineComponent3({
     function onPanelResizeStart(e) {
       if (!resizable.value) return;
       e.preventDefault();
-      if (collapsed.value) toggle();
+      if (resolvedCollapsed.value) toggle();
       panelResizing.value = true;
       panelResizeState = {
         startY: e.clientY,
-        startHeight: panelHeight.value,
+        startHeight: resolvedHeight.value,
         startX: e.clientX,
-        startWidth: panelWidth.value
+        startWidth: resolvedWidth.value
       };
     }
     function onPanelResizeMove(e) {
       if (!panelResizing.value) return;
       if (isHorizontal.value) {
-        const deltaX = position.value === "left" ? e.clientX - panelResizeState.startX : panelResizeState.startX - e.clientX;
+        const deltaX = resolvedPosition.value === "left" ? e.clientX - panelResizeState.startX : panelResizeState.startX - e.clientX;
         let next = Math.max(100, panelResizeState.startWidth + deltaX);
         if (next > window.innerWidth) next = window.innerWidth;
-        panelWidth.value = next;
+        updateWidth(next);
       } else {
-        const deltaY = position.value === "top" ? e.clientY - panelResizeState.startY : panelResizeState.startY - e.clientY;
+        const deltaY = resolvedPosition.value === "top" ? e.clientY - panelResizeState.startY : panelResizeState.startY - e.clientY;
         let next = Math.max(100, panelResizeState.startHeight + deltaY);
         if (next > window.innerHeight) next = window.innerHeight;
-        panelHeight.value = next;
+        updateHeight(next);
       }
     }
     function onPanelResizeEnd() {
@@ -524,34 +587,35 @@ var CliPanel = defineComponent3({
       document.removeEventListener("mouseup", onPaneResizeEnd);
     });
     function toggleMaximize() {
-      if (!maximized.value) {
+      if (!resolvedMaximized.value) {
         if (isHorizontal.value) {
-          prevWidth.value = panelWidth.value;
-          panelWidth.value = window.innerWidth;
+          prevWidth.value = resolvedWidth.value;
+          updateWidth(window.innerWidth);
         } else {
-          prevHeight.value = panelHeight.value;
-          panelHeight.value = window.innerHeight;
+          prevHeight.value = resolvedHeight.value;
+          updateHeight(window.innerHeight);
         }
       } else {
         if (isHorizontal.value) {
-          panelWidth.value = prevWidth.value;
+          updateWidth(prevWidth.value);
         } else {
-          panelHeight.value = prevHeight.value;
+          updateHeight(prevHeight.value);
         }
       }
-      maximized.value = !maximized.value;
+      updateMaximized(!resolvedMaximized.value);
     }
     function handleClose() {
       visible.value = false;
+      emit("close");
       props.onClose?.();
     }
     function handleHide() {
-      preHideCollapsed = collapsed.value;
-      hidden.value = true;
+      preHideCollapsed = resolvedCollapsed.value;
+      updateHidden(true);
     }
     function handleUnhide() {
-      hidden.value = false;
-      collapsed.value = preHideCollapsed;
+      updateHidden(false);
+      updateCollapsed(preHideCollapsed);
     }
     const positionDropdownOpen = ref2(false);
     function closePositionDropdown() {
@@ -563,21 +627,106 @@ var CliPanel = defineComponent3({
     }
     function selectPosition(pos) {
       positionDropdownOpen.value = false;
-      position.value = pos;
-      savePanelPosition(pos);
+      updatePosition(pos);
     }
+    function getEngine(paneId) {
+      const targetId = paneId ?? activePaneId.value;
+      return engineMap.get(targetId);
+    }
+    function getState() {
+      return {
+        collapsed: resolvedCollapsed.value,
+        hidden: resolvedHidden.value,
+        maximized: resolvedMaximized.value,
+        position: resolvedPosition.value,
+        height: resolvedHeight.value,
+        width: resolvedWidth.value,
+        activeTabId: resolvedActiveTabId.value,
+        activePaneId: activePaneId.value,
+        tabs: tabs.value.map((t) => ({
+          id: t.id,
+          title: t.title,
+          panes: t.panes.map((p) => ({ id: p.id, widthPercent: p.widthPercent }))
+        }))
+      };
+    }
+    expose({
+      open: () => {
+        if (!visible.value) {
+          visible.value = true;
+        }
+        if (resolvedHidden.value) {
+          updateHidden(false);
+        }
+        if (resolvedCollapsed.value) {
+          updateCollapsed(false);
+          if (!initialized.value) {
+            initialized.value = true;
+            addTab();
+            setupThemeSync();
+          }
+        }
+      },
+      collapse: () => {
+        if (!resolvedCollapsed.value) updateCollapsed(true);
+      },
+      toggleCollapse: () => {
+        if (resolvedCollapsed.value) {
+          updateCollapsed(false);
+          if (!initialized.value) {
+            initialized.value = true;
+            addTab();
+            setupThemeSync();
+          }
+        } else {
+          updateCollapsed(true);
+        }
+      },
+      hide: () => {
+        if (!resolvedHidden.value) updateHidden(true);
+      },
+      unhide: () => {
+        if (resolvedHidden.value) updateHidden(false);
+      },
+      toggleHide: () => {
+        updateHidden(!resolvedHidden.value);
+      },
+      close: handleClose,
+      maximize: () => {
+        if (!resolvedMaximized.value) updateMaximized(true);
+      },
+      restore: () => {
+        if (resolvedMaximized.value) updateMaximized(false);
+      },
+      toggleMaximize: () => {
+        updateMaximized(!resolvedMaximized.value);
+      },
+      resize: (dims) => {
+        if (dims.height !== void 0) updateHeight(dims.height);
+        if (dims.width !== void 0) updateWidth(dims.width);
+      },
+      setPosition: updatePosition,
+      addTab,
+      closeTab,
+      selectTab,
+      renameTab,
+      splitPane,
+      closePane,
+      getEngine,
+      getState
+    });
     return () => {
       if (!visible.value) return null;
       const wrapperClass = [
         "cli-panel-wrapper",
-        collapsed.value && "collapsed",
-        maximized.value && "maximized",
+        resolvedCollapsed.value && "collapsed",
+        resolvedMaximized.value && "maximized",
         panelResizing.value && "resizing",
         props.class
       ].filter(Boolean).join(" ");
       const wrapperStyle = {
-        ...isHorizontal.value ? { width: `${panelWidth.value}px` } : { height: `${panelHeight.value}px` },
-        ...hidden.value ? { display: "none" } : {},
+        ...isHorizontal.value ? { width: `${resolvedWidth.value}px` } : { height: `${resolvedHeight.value}px` },
+        ...resolvedHidden.value ? { display: "none" } : {},
         ...themeStyles.value,
         ...props.style
       };
@@ -606,13 +755,13 @@ var CliPanel = defineComponent3({
                 class: "cli-panel-btn cli-panel-btn-position",
                 title: "Move panel",
                 onClick: togglePositionDropdown
-              }, [positionIcon(position.value)]),
+              }, [positionIcon(resolvedPosition.value)]),
               positionDropdownOpen.value ? h2(
                 "div",
                 { class: "cli-panel-position-dropdown" },
                 ["bottom", "top", "left", "right"].map(
                   (pos) => h2("button", {
-                    class: ["cli-panel-position-dropdown-item", position.value === pos ? "active" : ""].filter(Boolean).join(" "),
+                    class: ["cli-panel-position-dropdown-item", resolvedPosition.value === pos ? "active" : ""].filter(Boolean).join(" "),
                     onClick: () => selectPosition(pos)
                   }, [
                     positionIcon(pos, 16),
@@ -630,20 +779,20 @@ var CliPanel = defineComponent3({
               "button",
               {
                 class: "cli-panel-btn",
-                title: maximized.value ? "Restore" : "Maximize",
-                disabled: collapsed.value,
+                title: resolvedMaximized.value ? "Restore" : "Maximize",
+                disabled: resolvedCollapsed.value,
                 onClick: toggleMaximize
               },
-              [maximized.value ? restoreIcon() : maximizeIcon()]
+              [resolvedMaximized.value ? restoreIcon() : maximizeIcon()]
             ),
             h2(
               "button",
               {
                 class: "cli-panel-btn",
-                title: collapsed.value ? "Expand" : "Collapse",
+                title: resolvedCollapsed.value ? "Expand" : "Collapse",
                 onClick: toggle
               },
-              [collapseChevron(position.value, collapsed.value)]
+              [collapseChevron(resolvedPosition.value, resolvedCollapsed.value)]
             ),
             closable.value ? h2(
               "button",
@@ -657,7 +806,7 @@ var CliPanel = defineComponent3({
           ])
         ])
       ]);
-      const contentEl = initialized.value ? h2("div", { class: "cli-panel-content", style: collapsed.value ? { display: "none" } : void 0 }, [
+      const contentEl = initialized.value ? h2("div", { class: "cli-panel-content", style: resolvedCollapsed.value ? { display: "none" } : void 0 }, [
         // Tab bar
         h2("div", { class: "cli-panel-tabs" }, [
           h2(
@@ -670,7 +819,7 @@ var CliPanel = defineComponent3({
                   key: tab.id,
                   class: [
                     "cli-panel-tab",
-                    tab.id === activeTabId.value && "active"
+                    tab.id === resolvedActiveTabId.value && "active"
                   ].filter(Boolean).join(" "),
                   onClick: () => selectTab(tab.id),
                   onDblclick: () => startRename(tab.id),
@@ -754,7 +903,7 @@ var CliPanel = defineComponent3({
                 key: tab.id,
                 class: "cli-panel-instance",
                 style: {
-                  display: tab.id === activeTabId.value ? void 0 : "none"
+                  display: tab.id === resolvedActiveTabId.value ? void 0 : "none"
                 }
               },
               [
@@ -794,7 +943,7 @@ var CliPanel = defineComponent3({
                         {
                           class: [
                             "cli-panel-pane",
-                            pane.id === activePaneId.value && tab.id === activeTabId.value && "active-pane"
+                            pane.id === activePaneId.value && tab.id === resolvedActiveTabId.value && "active-pane"
                           ].filter(
                             Boolean
                           ).join(" "),
@@ -803,7 +952,7 @@ var CliPanel = defineComponent3({
                           },
                           onClick: () => {
                             activePaneId.value = pane.id;
-                            activeTabId.value = tab.id;
+                            updateActiveTabId(tab.id);
                           }
                         },
                         [
@@ -815,7 +964,6 @@ var CliPanel = defineComponent3({
                               onClick: (e) => {
                                 e.stopPropagation();
                                 closePane(
-                                  tab.id,
                                   pane.id
                                 );
                               }
@@ -891,7 +1039,7 @@ var CliPanel = defineComponent3({
                     { id: paneId, widthPercent: 100, snapshot }
                   ]
                 });
-                activeTabId.value = tabId;
+                updateActiveTabId(tabId);
                 activePaneId.value = paneId;
               }
             },
@@ -903,7 +1051,7 @@ var CliPanel = defineComponent3({
               class: "cli-panel-context-menu-item",
               onClick: () => {
                 closeContextMenu();
-                splitRight(contextMenu.value.tabId);
+                splitPane(contextMenu.value.tabId);
               }
             },
             "Split Right"
@@ -933,7 +1081,7 @@ var CliPanel = defineComponent3({
                 tabs.value = tabs.value.filter(
                   (t) => t.id === id
                 );
-                activeTabId.value = id;
+                updateActiveTabId(id);
               }
             },
             "Close Others"
@@ -968,16 +1116,16 @@ var CliPanel = defineComponent3({
                 closeContextMenu();
                 tabs.value = [];
                 initialized.value = false;
-                collapsed.value = true;
+                updateCollapsed(true);
               }
             },
             "Close All"
           )
         ]
       ) : null;
-      const hideTabEl = hidden.value ? h2("button", {
+      const hideTabEl = resolvedHidden.value ? h2("button", {
         class: "cli-panel-hide-tab",
-        "data-position": position.value,
+        "data-position": resolvedPosition.value,
         "data-hide-align": hideAlignment.value,
         style: themeStyles.value,
         title: "Show CLI",
@@ -988,7 +1136,7 @@ var CliPanel = defineComponent3({
           h2("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
         ]),
         h2("span", { class: "cli-panel-hide-tab-label" }, "CLI"),
-        hideTabChevron(position.value)
+        hideTabChevron(resolvedPosition.value)
       ]) : null;
       return h2("div", {}, [
         hideTabEl,
@@ -997,7 +1145,7 @@ var CliPanel = defineComponent3({
           {
             class: wrapperClass,
             style: wrapperStyle,
-            "data-position": position.value,
+            "data-position": resolvedPosition.value,
             "data-resizable": String(resizable.value),
             "data-closable": String(closable.value),
             "data-hideable": String(hideable.value)