feat(vue): comprehensive Vue package improvements with devtools, Portal, and tests

packages/vue/README.md

@@ -45,21 +45,20 @@ declare module "*.vue" {
 </script>
 
 <template>
-    <textRenderable :style="{ fg: '#ff0000' }">
+    <Text :style="{ fg: '#ff0000' }">
         Hello World
-    </textRenderable>
+    </Text>
 </template>
 ```
 
 ### 5. Create the entry point index.ts.
 
 ```ts
 // index.ts
-import { createApp } from "vue"
 import { render } from "@opentui/vue"
 import App from "./App.vue"
 
-render(createApp(App))
+render(App)
 ```
 
 ### 6. Create a build script build.ts.
@@ -104,9 +103,9 @@ bun run dist/index.js
 
 ## Note
 
-Important Note on <textRenderable>
+Important Note on `<Text>`
 
-The <textRenderable> component only accepts plain text as a direct child. For styled text or text chunks, you must use the content prop.
+The `<Text>` component only accepts plain text as a direct child. For styled text or text chunks, you must use the content prop.
 
 ```jsx
 <script setup lang="ts">
@@ -117,10 +116,10 @@ const textChunk: TextChunk = bold(`This is a text chunk.`)
 </script>
 
 <template>
-  <textRenderable :content="styledText" />
-  <textRenderable :content="textChunk" />
+  <Text :content="styledText" />
+  <Text :content="textChunk" />
 
-<textRenderable>This is plain text.</textRenderable>
+  <Text>This is plain text.</Text>
 </template>
 ```
 
@@ -156,9 +155,9 @@ useKeyboard((key: KeyEvent) => {
 </script>
 
 <template>
-  <textRenderable>
+  <Text>
     Last key pressed: {{ lastKey }}
-  </textRenderable>
+  </Text>
 </template>
 ```
 
@@ -188,9 +187,9 @@ const dimensions = useTerminalDimensions()
 </script>
 
 <template>
-  <textRenderable>
+  <Text>
     Width: {{ dimensions.width }}, Height: {{ dimensions.height }}
-  </textRenderable>
+  </Text>
 </template>
 ```
 
@@ -250,7 +249,7 @@ export class ConsoleButtonRenderable extends BoxRenderable {
 
 #### 2. Register the new component
 
-In your application's entry point (e.g., `main.ts`), import the `extend` function and your custom component. Then, call `extend` with an object where the key is the component's tag name (in camelCase) and the value is the component class.
+In your application's entry point (e.g., `main.ts`), import the `extend` function and your custom component. Then, call `extend` with an object where the key is the component's tag name (in PascalCase) and the value is the component class.
 
 `main.ts`:
 
@@ -260,7 +259,7 @@ import { ConsoleButtonRenderable } from "./CustomButtonRenderable"
 import App from "./App.vue"
 
 // Register the custom component
-extend({ consoleButtonRenderable: ConsoleButtonRenderable })
+extend({ ConsoleButton: ConsoleButtonRenderable })
 
 // Render the app
 render(App)
@@ -279,7 +278,7 @@ import { ConsoleButtonRenderable } from "./CustomButtonRenderable"
 
 declare module "@opentui/vue" {
   export interface OpenTUIComponents {
-    consoleButtonRenderable: typeof ConsoleButtonRenderable
+    ConsoleButton: typeof ConsoleButtonRenderable
   }
 }
 ```
@@ -288,21 +287,21 @@ _Note: Make sure this file is included in your `tsconfig.json`._
 
 #### 4. Use your custom component
 
-Now you can use `<consoleButtonRenderable>` in your Vue components just like any other OpenTUI component.
+Now you can use `<ConsoleButton>` in your Vue components just like any other OpenTUI component.
 
 `ExtendExample.vue`:
 
 ```vue
 <template>
-  <boxRenderable :style="{ flexDirection: 'column' }">
-    <textRenderable>Custom Button Example</textRenderable>
-    <consoleButtonRenderable
+  <box :style="{ flexDirection: 'column' }">
+    <Text>Custom Button Example</Text>
+    <ConsoleButton
       label="Another Button"
       :style="{
         backgroundColor: 'green',
       }"
     />
-  </boxRenderable>
+  </box>
 </template>
 
 <script setup lang="ts"></script>

packages/vue/example/ASCII.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { measureText } from "@opentui/core"
+import type { SelectOption } from "@opentui/core"
 import { ref, computed } from "vue"
 
 const text = "ASCII"
@@ -12,8 +13,9 @@ const dimensions = computed(() => {
   })
 })
 
-const handleFontChange = (_: any, option: any) => {
-  font.value = option?.value
+const handleFontChange = (_index: number, option: SelectOption | null) => {
+  if (!option?.value) return
+  font.value = option.value as typeof font.value
 }
 
 const selectOptions = [
@@ -45,16 +47,16 @@ const selectStyles = { flexGrow: 1 }
 </script>
 
 <template>
-  <boxRenderable :style="groupStyles">
-    <boxRenderable :style="boxStyles">
-      <selectRenderable
+  <box :style="groupStyles">
+    <box :style="boxStyles">
+      <Select
         :focused="true"
         showScrollIndicator
         :onChange="handleFontChange"
         :options="selectOptions"
         :style="selectStyles"
-      ></selectRenderable>
-    </boxRenderable>
-    <asciiFontRenderable :style="{ width: dimensions.width, height: dimensions.height }" :text="text" :font="font" />
-  </boxRenderable>
+      ></Select>
+    </box>
+    <ascii-font :style="{ width: dimensions.width, height: dimensions.height }" :text="text" :font="font" />
+  </box>
 </template>

packages/vue/example/Animation.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { ref } from "vue"
+import { useTimeline, useTerminalDimensions } from "@opentui/vue"
+import type { JSAnimation } from "@opentui/core"
+
+const dimensions = useTerminalDimensions()
+
+const animatedSystem = ref({
+  cpu: 0,
+  memory: 0,
+  network: 0,
+  disk: 0,
+})
+
+const systems = [
+  { name: "CPU", color: "#6a5acd", animKey: "cpu" as const },
+  { name: "MEM", color: "#4682b4", animKey: "memory" as const },
+  { name: "NET", color: "#20b2aa", animKey: "network" as const },
+  { name: "DSK", color: "#daa520", animKey: "disk" as const },
+]
+
+const stats = ["PACKETS", "CONNECTIONS", "PROCESSES", "UPTIME"]
+const topColors = ["#ff6b9d", "#4ecdc4", "#ffe66d"]
+const rightColors = ["#ff8a80", "#80cbc4", "#fff176"]
+
+const timeline = useTimeline({
+  duration: 8000,
+  loop: false,
+})
+
+timeline.add(
+  animatedSystem.value,
+  {
+    cpu: 85,
+    memory: 70,
+    network: 95,
+    disk: 60,
+    duration: 3000,
+    ease: "inOutQuad",
+    onUpdate(animation: JSAnimation) {
+      animatedSystem.value = { ...(animation.targets[0] as typeof animatedSystem.value) }
+    },
+  },
+  0,
+)
+</script>
+
+<template>
+  <box :style="{ zIndex: 5 }">
+    <!-- System Monitor Panel -->
+    <box
+      title="SYSTEM MONITOR"
+      titleAlignment="center"
+      :style="{
+        position: 'absolute',
+        left: 2,
+        top: 5,
+        width: dimensions.width - 6,
+        height: 8,
+        backgroundColor: '#1a1a2e',
+        zIndex: 1,
+        border: true,
+        borderStyle: 'double',
+        borderColor: '#4a4a4a',
+      }"
+    >
+      <box
+        v-for="system in systems"
+        :key="system.name"
+        :style="{
+          flexDirection: 'row',
+          height: 1,
+          width: '100%',
+          paddingLeft: 1,
+          paddingRight: 2,
+        }"
+      >
+        <Text
+          :style="{
+            fg: system.color,
+            zIndex: 2,
+            marginRight: 1,
+          }"
+        >
+          {{ system.name }}
+        </Text>
+        <box
+          :style="{
+            height: 1,
+            backgroundColor: '#333333',
+            zIndex: 1,
+            flexGrow: 1,
+          }"
+        >
+          <box
+            :style="{
+              width: `${animatedSystem[system.animKey]}%`,
+              height: 1,
+              backgroundColor: system.color,
+              zIndex: 2,
+            }"
+          />
+        </box>
+      </box>
+    </box>
+
+    <!-- Real-time Stats Panel -->
+    <box
+      title="◇ REAL-TIME STATS ◇"
+      titleAlignment="center"
+      :style="{
+        position: 'absolute',
+        left: 2,
+        top: 14,
+        width: dimensions.width - 6,
+        height: 4,
+        backgroundColor: '#2d1b2e',
+        zIndex: 1,
+        border: true,
+        borderStyle: 'single',
+        borderColor: '#8a4a8a',
+      }"
+    />
+
+    <!-- Stats Labels -->
+    <Text
+      v-for="(label, index) in stats"
+      :key="label"
+      :style="{
+        position: 'absolute',
+        left: 4 + index * 15,
+        top: 15,
+        fg: '#9a9acd',
+        zIndex: 2,
+      }"
+    >
+      {{ label }}: 0
+    </Text>
+
+    <!-- Top Left Indicators -->
+    <box
+      v-for="(color, index) in topColors"
+      :key="`top-${index}`"
+      :style="{
+        position: 'absolute',
+        left: 2 + index * 4,
+        top: 2,
+        width: 3,
+        height: 1,
+        backgroundColor: color,
+        zIndex: 3,
+      }"
+    />
+
+    <!-- Top Right Indicators -->
+    <box
+      v-for="(color, index) in rightColors"
+      :key="`right-${index}`"
+      :style="{
+        position: 'absolute',
+        left: dimensions.width - 8 + index * 2,
+        top: 1,
+        width: 1,
+        height: 1,
+        backgroundColor: color,
+        zIndex: 3,
+      }"
+    />
+
+    <!-- Instructions -->
+    <Text
+      :style="{
+        position: 'absolute',
+        left: 2,
+        top: dimensions.height - 2,
+        fg: '#565f89',
+      }"
+    >
+      Press ESC to return to menu
+    </Text>
+  </box>
+</template>