@qodalis/vue-cli 2.0.0-beta.2 → 2.0.0-beta.21

package/dist/index.mjs

@@ -0,0 +1,658 @@
+// src/Cli.ts
+import {
+  defineComponent as defineComponent2,
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  h,
+  inject
+} from "vue";
+import { createCliEngine, resolveCliHostConfig } from "@qodalis/cli";
+
+// src/cliInjection.ts
+var CliInjectionKey = /* @__PURE__ */ Symbol("qodalis-cli");
+
+// src/CliConfigProvider.ts
+import { defineComponent, provide } from "vue";
+var CliConfigKey = /* @__PURE__ */ Symbol("qodalis-cli-config");
+var CliConfigProvider = defineComponent({
+  name: "CliConfigProvider",
+  props: {
+    modules: {
+      type: Array,
+      default: void 0
+    },
+    processors: {
+      type: Array,
+      default: void 0
+    },
+    options: {
+      type: Object,
+      default: void 0
+    },
+    services: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    provide(CliConfigKey, {
+      modules: props.modules,
+      processors: props.processors,
+      options: props.options,
+      services: props.services
+    });
+    return () => slots.default?.();
+  }
+});
+
+// src/Cli.ts
+var Cli = defineComponent2({
+  name: "Cli",
+  props: {
+    modules: {
+      type: Array,
+      default: void 0
+    },
+    processors: {
+      type: Array,
+      default: void 0
+    },
+    options: {
+      type: Object,
+      default: void 0
+    },
+    services: {
+      type: Object,
+      default: void 0
+    },
+    snapshot: {
+      type: Object,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["ready"],
+  setup(props, { emit }) {
+    const containerRef = ref(null);
+    const ctx = inject(CliInjectionKey, null);
+    const config = inject(CliConfigKey, null);
+    let engine = null;
+    if (ctx) {
+      return () => null;
+    }
+    const hostConfig = resolveCliHostConfig(props, config);
+    onMounted(async () => {
+      if (!containerRef.value) return;
+      engine = createCliEngine(containerRef.value, { ...hostConfig, snapshot: props.snapshot, framework: "Vue" });
+      await engine.start();
+      emit("ready", engine);
+    });
+    onBeforeUnmount(() => {
+      engine?.destroy();
+      engine = null;
+    });
+    return () => h("div", {
+      ref: containerRef,
+      style: { height: "100%", ...props.style },
+      class: props.class
+    });
+  }
+});
+
+// src/CliPanel.ts
+import { defineComponent as defineComponent3, computed, inject as inject2, watch, h as h2, onBeforeUnmount as onBeforeUnmount2, onMounted as onMounted2, shallowRef, Fragment } from "vue";
+import {
+  CliPanelController,
+  CLOSE_GLYPH,
+  CLOSE_ICON,
+  HIDE_ICON,
+  HIDE_TAB_TERMINAL_ICON,
+  MAXIMIZE_ICON,
+  PANEL_LABELS,
+  RESTORE_ICON,
+  TERMINAL_ICON,
+  collapseChevronIcon,
+  contextMenuItems,
+  contextMenuStyle,
+  glowLineClass,
+  handleRenameKey,
+  hideTabChevronIcon,
+  joinClasses,
+  mergeCliOptions,
+  openStatusDropdown,
+  paneClass,
+  paneStyle,
+  panelTabClass,
+  panelTabDotClass,
+  panelWrapperClass,
+  panelWrapperStyle,
+  panesContainerClass,
+  panesContainerWidth,
+  positionIcon,
+  positionOptions,
+  resolveCliHostConfig as resolveCliHostConfig2,
+  runContextMenuAction,
+  statusIndicators,
+  svgAttrs
+} from "@qodalis/cli";
+var PANEL_REF_METHODS = [
+  "open",
+  "collapse",
+  "toggleCollapse",
+  "hide",
+  "unhide",
+  "toggleHide",
+  "close",
+  "maximize",
+  "restore",
+  "toggleMaximize",
+  "resize",
+  "setPosition",
+  "addTab",
+  "closeTab",
+  "selectTab",
+  "renameTab",
+  "splitPane",
+  "closePane",
+  "getEngine",
+  "getState"
+];
+function icon(svg, className) {
+  return h2("svg", { class: className, ...svgAttrs(svg) }, svg.shapes.map((shape) => h2(shape.tag, shape.attrs)));
+}
+var stop = (e) => e.stopPropagation();
+var CliPanel = defineComponent3({
+  name: "CliPanel",
+  props: {
+    options: { type: Object, default: void 0 },
+    modules: { type: Array, default: void 0 },
+    processors: { type: Array, default: void 0 },
+    services: { type: Object, default: void 0 },
+    onClose: { 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 }
+  },
+  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(() => mergeCliOptions(props.options, config?.options));
+    const hostConfig = computed(() => resolveCliHostConfig2(props, config));
+    const controlled = () => ({
+      collapsed: props.collapsed,
+      hidden: props.hidden,
+      maximized: props.maximized,
+      activeTabId: props.activeTabId,
+      position: props.position,
+      height: props.height,
+      width: props.width
+    });
+    const controller = new CliPanelController({
+      config: mergedOptions.value,
+      controlled: controlled(),
+      callbacks: {
+        onCollapsedChange: (v) => emit("update:collapsed", v),
+        onHiddenChange: (v) => emit("update:hidden", v),
+        onMaximizedChange: (v) => emit("update:maximized", v),
+        onActiveTabIdChange: (v) => emit("update:activeTabId", v),
+        onPositionChange: (v) => emit("update:position", v),
+        onHeightChange: (v) => emit("update:height", v),
+        onWidthChange: (v) => emit("update:width", v),
+        onClose: () => {
+          emit("close");
+          props.onClose?.();
+        },
+        onTabAdded: (e) => emit("tab-added", e),
+        onTabClosed: (e) => emit("tab-closed", e),
+        onPaneSplit: (e) => emit("pane-split", e),
+        onPaneClosed: (e) => emit("pane-closed", e)
+      }
+    });
+    const state = shallowRef(controller.getSnapshot());
+    const unsubscribe = controller.subscribe(() => {
+      state.value = controller.getSnapshot();
+    });
+    watch(controlled, (values) => controller.setControlled(values));
+    watch(mergedOptions, (options) => controller.setOptions(options));
+    const root = shallowRef(null);
+    onMounted2(() => controller.setRootElement(root.value));
+    onBeforeUnmount2(() => {
+      unsubscribe();
+      controller.destroy();
+    });
+    const exposed = {};
+    for (const method of PANEL_REF_METHODS) {
+      exposed[method] = controller[method].bind(controller);
+    }
+    expose(exposed);
+    const openDropdown = (e, dropdown) => {
+      if (!dropdown) return;
+      e.stopPropagation();
+      const anchor = e.currentTarget;
+      if (dropdown === "services") controller.toggleServicesDropdown(anchor);
+      else controller.toggleServersDropdown(anchor);
+    };
+    const renderHeader = (s) => {
+      const indicators = statusIndicators(s);
+      return h2("div", { class: "cli-panel-header" }, [
+        h2(
+          "div",
+          {
+            class: "cli-panel-resize-bar",
+            onMousedown: (e) => {
+              if (!s.resizable) return;
+              e.preventDefault();
+              controller.startPanelResize(e.clientX, e.clientY);
+            }
+          },
+          [h2("div", { class: "cli-panel-resize-grip" })]
+        ),
+        h2("div", { class: "cli-panel-header-content" }, [
+          h2("p", { class: "cli-panel-title" }, [h2("span", { class: "cli-panel-title-icon" }, [icon(TERMINAL_ICON)]), PANEL_LABELS.title]),
+          s.showStatusIndicators ? h2(
+            "div",
+            { class: "cli-panel-status-indicators" },
+            indicators.map(
+              (item) => h2(
+                "span",
+                {
+                  key: item.key,
+                  class: joinClasses("cli-panel-status-item", item.itemClass),
+                  onClick: item.dropdown ? (e) => openDropdown(e, item.dropdown) : void 0
+                },
+                [
+                  item.dotClass ? h2("span", { class: `cli-panel-status-dot ${item.dotClass}` }) : null,
+                  item.icon ? h2("span", { class: joinClasses("cli-panel-status-icon", item.iconClass) }, item.icon) : null,
+                  h2("span", { class: "cli-panel-status-label" }, item.label)
+                ]
+              )
+            )
+          ) : null,
+          // Compact indicators for left/right positions (CSS controls visibility).
+          h2(
+            "div",
+            { class: "cli-panel-status-indicators-compact" },
+            indicators.map(
+              (item) => h2(
+                "span",
+                {
+                  key: item.key,
+                  class: joinClasses("cli-panel-status-compact-item", item.compactClass),
+                  title: item.title,
+                  onClick: item.dropdown ? (e) => openDropdown(e, item.dropdown) : void 0
+                },
+                [
+                  item.compactDotClass ? h2("span", { class: item.compactDotClass }) : null,
+                  item.dotClass ? h2("span", { class: `cli-panel-status-dot ${item.dotClass}` }) : null,
+                  item.icon ? h2("span", { class: joinClasses("cli-panel-status-icon", item.iconClass) }, item.icon) : null
+                ]
+              )
+            )
+          ),
+          h2("div", { class: "cli-panel-action-buttons" }, [
+            h2("div", { class: "cli-panel-btn-position-wrapper", onClick: stop }, [
+              h2(
+                "button",
+                {
+                  class: "cli-panel-btn cli-panel-btn-position",
+                  title: PANEL_LABELS.movePanel,
+                  onClick: () => controller.togglePositionDropdown()
+                },
+                [icon(positionIcon(s.position))]
+              ),
+              s.positionDropdownOpen ? h2(
+                "div",
+                { class: "cli-panel-position-dropdown" },
+                positionOptions(s).map(
+                  (opt) => h2(
+                    "button",
+                    { key: opt.position, class: opt.className, onClick: () => controller.setPosition(opt.position) },
+                    [icon(positionIcon(opt.position, 16)), opt.label]
+                  )
+                )
+              ) : null
+            ]),
+            s.hideable ? h2("button", { class: "cli-panel-btn cli-panel-btn-hide", title: PANEL_LABELS.hide, onClick: () => controller.hide() }, [icon(HIDE_ICON)]) : null,
+            h2(
+              "button",
+              {
+                class: "cli-panel-btn",
+                title: s.maximized ? PANEL_LABELS.restore : PANEL_LABELS.maximize,
+                disabled: s.collapsed,
+                onClick: () => controller.toggleMaximize()
+              },
+              [icon(s.maximized ? RESTORE_ICON : MAXIMIZE_ICON)]
+            ),
+            h2(
+              "button",
+              {
+                class: "cli-panel-btn",
+                title: s.collapsed ? PANEL_LABELS.expand : PANEL_LABELS.collapse,
+                onClick: () => controller.toggle()
+              },
+              [icon(collapseChevronIcon(s.position, s.collapsed))]
+            ),
+            s.closable ? h2("button", { class: "cli-panel-btn cli-panel-btn-close", title: PANEL_LABELS.close, onClick: () => controller.close() }, [icon(CLOSE_ICON)]) : null
+          ])
+        ]),
+        h2("div", { class: glowLineClass(s) })
+      ]);
+    };
+    const renderTabs = (s) => h2("div", { class: "cli-panel-tabs" }, [
+      h2(
+        "ul",
+        { class: "cli-panel-tab-list" },
+        s.tabs.map(
+          (tab) => h2(
+            "li",
+            {
+              key: tab.id,
+              class: panelTabClass(s, tab),
+              onClick: () => controller.selectTab(tab.id),
+              onDblclick: () => controller.startRename(tab.id),
+              onContextmenu: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                controller.openContextMenu(tab.id, e.clientX, e.clientY);
+              }
+            },
+            tab.isEditing ? [
+              h2("input", {
+                class: "cli-panel-tab-rename-input",
+                type: "text",
+                value: tab.title,
+                onVnodeMounted: (vnode) => {
+                  const input = vnode.el;
+                  input.focus();
+                  input.select();
+                },
+                onKeydown: (e) => handleRenameKey(controller, tab.id, e.key, e.target.value),
+                onBlur: (e) => controller.commitRename(tab.id, e.target.value),
+                onClick: stop,
+                onDblclick: stop
+              })
+            ] : [
+              h2("span", { class: panelTabDotClass(s, tab) }),
+              h2("span", { class: "cli-panel-tab-title" }, tab.title),
+              h2(
+                "button",
+                {
+                  class: "cli-panel-tab-close-btn",
+                  title: PANEL_LABELS.closeTab,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    controller.closeTab(tab.id);
+                  }
+                },
+                CLOSE_GLYPH
+              )
+            ]
+          )
+        )
+      ),
+      h2("button", { class: "cli-panel-add-tab", title: PANEL_LABELS.newTerminal, onClick: () => controller.addTab() }, "+")
+    ]);
+    const renderInstances = (s) => h2(
+      "div",
+      { class: "cli-panel-instances" },
+      s.tabs.map(
+        (tab) => h2("div", { key: tab.id, class: "cli-panel-instance", style: { display: tab.id === s.activeTabId ? void 0 : "none" } }, [
+          h2(
+            "div",
+            { class: panesContainerClass(s) },
+            tab.panes.flatMap((pane, i) => [
+              i > 0 ? h2(
+                "div",
+                {
+                  key: `divider-${pane.id}`,
+                  class: "cli-panel-pane-divider",
+                  onMousedown: (e) => {
+                    e.preventDefault();
+                    controller.startPaneResize(tab.id, i - 1, e.clientX, panesContainerWidth(e.target));
+                  }
+                },
+                [h2("div", { class: "cli-panel-pane-divider-grip" })]
+              ) : null,
+              h2(
+                "div",
+                {
+                  key: pane.id,
+                  class: paneClass(s, tab.id, pane.id),
+                  style: paneStyle(pane.widthPercent),
+                  onClick: () => controller.activatePane(tab.id, pane.id)
+                },
+                [
+                  tab.panes.length > 1 ? h2(
+                    "button",
+                    {
+                      class: "cli-panel-pane-close-btn",
+                      title: PANEL_LABELS.closePane,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        controller.closePane(pane.id);
+                      }
+                    },
+                    CLOSE_GLYPH
+                  ) : null,
+                  h2(Cli, {
+                    options: mergedOptions.value,
+                    modules: hostConfig.value.modules,
+                    processors: hostConfig.value.processors,
+                    services: hostConfig.value.services,
+                    snapshot: pane.snapshot,
+                    style: { height: "100%" },
+                    onReady: (engine) => controller.registerEngine(tab.id, pane.id, engine)
+                  })
+                ]
+              )
+            ])
+          )
+        ])
+      )
+    );
+    const renderContextMenu = (s) => h2(
+      "div",
+      { class: "cli-panel-context-menu", style: contextMenuStyle(s), onClick: stop },
+      contextMenuItems(s).flatMap((item) => [
+        item.separatorBefore ? h2("div", { class: "cli-panel-context-menu-separator" }) : null,
+        h2(
+          "button",
+          {
+            class: joinClasses("cli-panel-context-menu-item", item.destructive && "destructive"),
+            disabled: item.disabled,
+            onClick: () => runContextMenuAction(controller, item.action)
+          },
+          item.label
+        )
+      ])
+    );
+    const renderStatusDropdown = (s) => {
+      const dropdown = openStatusDropdown(s);
+      if (!dropdown) return null;
+      return h2("div", { class: "cli-panel-services-dropdown", style: dropdown.style, onClick: stop }, [
+        h2("div", { class: "cli-panel-services-dropdown-header" }, dropdown.header),
+        h2(
+          "div",
+          { class: "cli-panel-services-dropdown-list" },
+          dropdown.rows.map(
+            (row) => h2("div", { key: row.key, class: "cli-panel-services-dropdown-item" }, [
+              h2("span", { class: row.dotClass }),
+              h2("div", { class: "cli-panel-svc-info" }, [
+                h2("span", { class: "cli-panel-svc-name" }, row.name),
+                row.description ? h2("span", { class: "cli-panel-svc-desc" }, row.description) : null
+              ]),
+              dropdown.kind === "servers" ? h2("div", { class: "cli-panel-srv-meta" }, [
+                h2("span", { class: "cli-panel-svc-status" }, row.status),
+                ...row.meta.map((m) => h2("span", { key: m, class: "cli-panel-svc-desc" }, m))
+              ]) : h2("span", { class: "cli-panel-svc-status" }, row.status)
+            ])
+          )
+        ),
+        dropdown.rows.length === 0 ? h2("div", { class: "cli-panel-services-dropdown-empty" }, dropdown.emptyText) : null
+      ]);
+    };
+    return () => {
+      const s = state.value;
+      if (!s.visible) return null;
+      return h2(Fragment, [
+        s.hidden ? h2(
+          "button",
+          {
+            class: "cli-panel-hide-tab",
+            "data-position": s.position,
+            "data-hide-align": s.hideAlignment,
+            style: s.themeStyles,
+            title: PANEL_LABELS.showCli,
+            onClick: () => controller.unhide()
+          },
+          [
+            icon(HIDE_TAB_TERMINAL_ICON, "cli-panel-hide-tab-icon"),
+            h2("span", { class: "cli-panel-hide-tab-label" }, PANEL_LABELS.title),
+            icon(hideTabChevronIcon(s.position), "cli-panel-hide-tab-arrow")
+          ]
+        ) : null,
+        h2(
+          "div",
+          {
+            ref: root,
+            class: panelWrapperClass(s, props.class),
+            style: { ...panelWrapperStyle(s), ...props.style },
+            "data-position": s.position,
+            "data-resizable": String(s.resizable),
+            "data-closable": String(s.closable),
+            "data-hideable": String(s.hideable)
+          },
+          [
+            renderHeader(s),
+            s.initialized ? h2("div", { class: "cli-panel-content", style: s.collapsed ? { display: "none" } : void 0 }, [
+              renderTabs(s),
+              renderInstances(s)
+            ]) : null
+          ]
+        ),
+        s.contextMenu.visible ? renderContextMenu(s) : null,
+        renderStatusDropdown(s)
+      ]);
+    };
+  }
+});
+
+// src/CliProvider.ts
+import { defineComponent as defineComponent4, ref as ref2, h as h3, provide as provide2 } from "vue";
+
+// src/useCliEngine.ts
+import { onMounted as onMounted3, onBeforeUnmount as onBeforeUnmount3, shallowRef as shallowRef2 } from "vue";
+import { createCliEngine as createCliEngine2 } from "@qodalis/cli";
+function useCliEngine(containerRef, config) {
+  const engine = shallowRef2(null);
+  onMounted3(async () => {
+    if (!containerRef.value) return;
+    const e = createCliEngine2(containerRef.value, { ...config, framework: "Vue" });
+    await e.start();
+    engine.value = e;
+  });
+  onBeforeUnmount3(() => {
+    engine.value?.destroy();
+    engine.value = null;
+  });
+  return engine;
+}
+
+// src/CliProvider.ts
+var CliProvider = defineComponent4({
+  name: "CliProvider",
+  props: {
+    modules: {
+      type: Array,
+      default: void 0
+    },
+    processors: {
+      type: Array,
+      default: void 0
+    },
+    options: {
+      type: Object,
+      default: void 0
+    },
+    services: {
+      type: Object,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["ready"],
+  setup(props, { slots, emit }) {
+    const containerRef = ref2(null);
+    const engine = useCliEngine(containerRef, {
+      modules: props.modules,
+      processors: props.processors,
+      options: props.options,
+      services: props.services
+    });
+    provide2(CliInjectionKey, { engine });
+    return () => h3("div", { style: { height: "100%" } }, [
+      h3("div", {
+        ref: containerRef,
+        style: { height: "100%", ...props.style }
+      }),
+      slots.default?.()
+    ]);
+  }
+});
+
+// src/useCli.ts
+import { inject as inject3 } from "vue";
+function useCli() {
+  const ctx = inject3(CliInjectionKey);
+  if (!ctx) {
+    throw new Error(
+      "useCli() must be used inside a <CliProvider> component"
+    );
+  }
+  return ctx;
+}
+
+// src/index.ts
+import { CliEngine as CliEngine4 } from "@qodalis/cli";
+export {
+  Cli,
+  CliConfigKey,
+  CliConfigProvider,
+  CliEngine4 as CliEngine,
+  CliInjectionKey,
+  CliPanel,
+  CliProvider,
+  useCli,
+  useCliEngine
+};
+//# sourceMappingURL=index.mjs.map