create-buntui 0.1.0-alpha.2 → 0.1.0-alpha.4

package/templates/full/src/apps/main/components/CheckboxDemo.vue

@@ -0,0 +1,19 @@
+<template>
+    <Text :x="1" :y="3" value="Checkbox widget — boolean toggle" />
+
+    <Checkbox :x="1" :y="4" label="Enable feature A" @change="handleChange('A', $event)" />
+    <Checkbox :x="1" :y="5" label="Enable feature B" @change="handleChange('B', $event)" />
+    <Checkbox :x="1" :y="6" label="Disabled option" :disabled="true" />
+
+    <Text :x="1" :y="8" :value="log" />
+</template>
+
+<script setup lang="ts">
+import { ref } from '@vue/reactivity'
+
+const log = ref('Toggle a checkbox above')
+
+function handleChange(name: string, event: TuiCheckboxChangeEvent) {
+    log.value = `${name}: ${event.checked ? 'checked' : 'unchecked'}`
+}
+</script>

package/templates/full/src/{components → apps/main/components}/InputDemo.vue

@@ -1,28 +1,26 @@
 <template>
-    <Text :x="1" :y="3" :colorFg="'rgba(137,180,250,1)'" value="Input widget — text field with editing support" />
+    <Text :x="1" :y="3" value="Input widget — text field with editing support" />
 
     <Box
         :x="1"
         :y="4"
         :width="50"
-        :height="5"
-        :colorBg="'rgba(30,30,46,1)'"
-        :borderColor="'rgba(137,180,250,0.5)'"
+        :height="8"
         borderStyle="rounded"
-        :direction="'vertical'"
+        direction="vertical"
         :gap="1"
         :paddingTop="1"
         :paddingLeft="1"
     >
-        <Text :colorFg="'rgba(108,112,134,1)'" value="Type something and press Enter:" />
+        <Text value="Type something and press Enter:" />
         <Input
             :width="46"
-            :placeholder="'Enter text here...'"
+            placeholder="Enter text here..."
             @submit="handleSubmit"
         />
     </Box>
 
-    <Text :x="1" :y="10" :colorFg="'rgba(166,227,161,1)'" :value="submittedValue" />
+    <Text :x="1" :y="13" :value="submittedValue" />
 </template>
 
 <script setup lang="ts">

package/templates/full/src/{components → apps/main/components}/ProgressDemo.vue

@@ -1,10 +1,10 @@
 <template>
-    <Text :x="1" :y="3" :colorFg="'rgba(137,180,250,1)'" value="Progress widget — bar indicator" />
+    <Text :x="1" :y="3" value="Progress widget — bar indicator" />
 
-    <Text :x="1" :y="4" :colorFg="'rgba(108,112,134,1)'" value="Determinate:" />
+    <Text :x="1" :y="4" value="Determinate:" />
     <Progress :x="1" :y="5" :width="40" :height="1" :value="progress" />
 
-    <Text :x="1" :y="7" :colorFg="'rgba(166,227,161,1)'" :value="`${Math.round(progress * 100)}%`" />
+    <Text :x="1" :y="7" :value="`${Math.round(progress * 100)}%`" />
 
     <Button :x="1" :y="9" :width="20" :height="3" value="Reset" @click="reset" />
     <Button :x="23" :y="9" :width="20" :height="3" value="Set 75%" @click="set75" />

package/templates/full/src/{components → apps/main/components}/RadioDemo.vue

@@ -1,5 +1,5 @@
 <template>
-    <Text :x="1" :y="3" :colorFg="'rgba(137,180,250,1)'" value="RadioGroup widget — single selection from options" />
+    <Text :x="1" :y="3" value="RadioGroup widget — single selection from options" />
 
     <RadioGroup
         :x="1"
@@ -9,7 +9,7 @@
         @change="handleChange"
     />
 
-    <Text :x="1" :y="8" :colorFg="'rgba(108,112,134,1)'" :value="log" />
+    <Text :x="1" :y="8" :value="log" />
 </template>
 
 <script setup lang="ts">

package/templates/full/src/{components → apps/main/components}/ScrollBoxDemo.vue

@@ -1,21 +1,18 @@
 <template>
-    <Text :x="1" :y="3" :colorFg="'rgba(137,180,250,1)'" value="ScrollBox widget — scrollable container" />
+    <Text :x="1" :y="3" value="ScrollBox widget — scrollable container" />
 
     <ScrollBox
         :x="1"
         :y="4"
         :width="40"
         :height="8"
-        :colorBg="'rgba(30,30,46,1)'"
-        :borderColor="'rgba(137,180,250,0.5)'"
         borderStyle="rounded"
-        :direction="'vertical'"
         :gap="1"
         :paddingTop="1"
         :paddingLeft="1"
         :alwaysShowScrollbar="true"
     >
-        <Text v-for="item in items" :key="item" :colorFg="'rgba(205,214,244,1)'" :value="item" />
+        <Text v-for="item in items" :key="item" :value="item" />
     </ScrollBox>
 
     <Box
@@ -23,17 +20,15 @@
         :y="4"
         :width="30"
         :height="8"
-        :colorBg="'rgba(30,30,46,1)'"
-        :borderColor="'rgba(166,227,161,0.5)'"
         borderStyle="rounded"
-        :direction="'vertical'"
+        direction="vertical"
         :gap="1"
         :paddingTop="1"
         :paddingLeft="1"
     >
-        <Text :colorFg="'rgba(166,227,161,1)'" value="Scroll with arrow keys" />
-        <Text :colorFg="'rgba(108,112,134,1)'" value="Content overflows the visible area" />
-        <Text :colorFg="'rgba(108,112,134,1)'" value="Scrollbar appears automatically" />
+        <Text value="Scroll with arrow keys" />
+        <Text value="Content overflows the visible area" />
+        <Text value="Scrollbar appears automatically" />
     </Box>
 </template>
 

package/templates/full/src/{components → apps/main/components}/SelectDemo.vue

@@ -1,29 +1,27 @@
 <template>
-    <Text :x="1" :y="3" :colorFg="'rgba(137,180,250,1)'" value="Select widget — dropdown selection" />
+    <Text :x="1" :y="3" value="Select widget — dropdown selection" />
 
     <Box
         :x="1"
         :y="4"
         :width="50"
-        :height="5"
-        :colorBg="'rgba(30,30,46,1)'"
-        :borderColor="'rgba(137,180,250,0.5)'"
+        :height="8"
         borderStyle="rounded"
-        :direction="'vertical'"
+        direction="vertical"
         :gap="1"
         :paddingTop="1"
         :paddingLeft="1"
     >
-        <Text :colorFg="'rgba(108,112,134,1)'" value="Choose a framework:" />
+        <Text value="Choose a framework:" />
         <Select
             :width="46"
             :options="frameworks"
-            :placeholder="'Select a framework...'"
+            placeholder="Select a framework..."
             @change="handleChange"
         />
     </Box>
 
-    <Text :x="1" :y="10" :colorFg="'rgba(166,227,161,1)'" :value="selected" />
+    <Text :x="1" :y="13" :value="selected" />
 </template>
 
 <script setup lang="ts">

package/templates/full/src/apps/main/components/SwitchDemo.vue

@@ -0,0 +1,19 @@
+<template>
+    <Text :x="1" :y="3" value="Switch widget — on/off toggle" />
+
+    <Switch :x="1" :y="4" label="Dark mode" @change="handleChange('Dark mode', $event)" />
+    <Switch :x="1" :y="5" label="Notifications" @change="handleChange('Notifications', $event)" />
+    <Switch :x="1" :y="6" label="Disabled" :disabled="true" />
+
+    <Text :x="1" :y="8" :value="log" />
+</template>
+
+<script setup lang="ts">
+import { ref } from '@vue/reactivity'
+
+const log = ref('Toggle a switch above')
+
+function handleChange(name: string, event: TuiSwitchChangeEvent) {
+    log.value = `${name}: ${event.checked ? 'on' : 'off'}`
+}
+</script>

package/templates/full/src/{components → apps/main/components}/TableDemo.vue

@@ -1,19 +1,17 @@
 <template>
-    <Text :x="1" :y="3" :colorFg="'rgba(137,180,250,1)'" value="Table widget — structured data display with selection" />
+    <Text :x="1" :y="3" value="Table widget — structured data display with selection" />
 
     <Table
         :x="1"
         :y="4"
         :width="60"
         :height="8"
-        :colorBg="'rgba(30,30,46,1)'"
-        :borderColor="'rgba(137,180,250,0.5)'"
         borderStyle="rounded"
         :columns="columns"
         :rows="rows"
     />
 
-    <Text :x="1" :y="13" :colorFg="'rgba(108,112,134,1)'" value="Use arrow keys to navigate rows" />
+    <Text :x="1" :y="13" value="Use arrow keys to navigate rows" />
 </template>
 
 <script setup lang="ts">

package/templates/full/src/apps/main/components/TextDemo.vue

@@ -0,0 +1,66 @@
+<template>
+    <Text :x="1" :y="3" value="Text widget — display styled text" />
+
+    <Box
+        :x="1"
+        :y="4"
+        width="45%"
+        :height="8"
+        borderStyle="rounded"
+        direction="vertical"
+        :gap="1"
+        :paddingTop="1"
+        :paddingLeft="1"
+    >
+        <Text value="Font styles" />
+        <Text styleModifier="bold" value="Bold text" />
+        <Text styleModifier="italic" value="Italic text" />
+    </Box>
+
+    <Box
+        x="50%"
+        :y="4"
+        width="45%"
+        :height="10"
+        borderStyle="rounded"
+        direction="vertical"
+        :gap="1"
+        :paddingTop="1"
+        :paddingLeft="1"
+    >
+        <Text value="Colors" />
+        <Text colorFg="rgba(243,139,168,1)" value="Red " />
+        <Text colorFg="rgba(137,180,250,1)" value="Blue " />
+        <Text colorFg="rgba(166,227,161,1)" value="Green" />
+    </Box>
+
+    <Box
+        :x="1"
+        :y="15"
+        width="95%"
+        :height="6"
+        borderStyle="rounded"
+        direction="vertical"
+        :gap="1"
+        :paddingTop="1"
+        :paddingLeft="1"
+    >
+        <Text value="Dynamic clock:" />
+        <Text :value="clock" />
+    </Box>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from '@vue/reactivity'
+
+const elapsed = ref(0)
+setInterval(() => {
+    elapsed.value += 1
+}, 1000)
+
+const clock = computed(() => {
+    elapsed.value
+    const now = new Date()
+    return now.toLocaleTimeString()
+})
+</script>

package/templates/full/src/apps/main/components/TextareaDemo.vue

@@ -0,0 +1,38 @@
+<template>
+    <Text :x="1" :y="3" value="Textarea widget — multi-line text editor" />
+
+    <Box
+        :x="1"
+        :y="4"
+        :width="50"
+        :height="8"
+        borderStyle="rounded"
+        direction="vertical"
+        :gap="1"
+        :paddingTop="1"
+        :paddingLeft="1"
+    >
+        <Text :value="label" />
+        <Textarea
+            :width="46"
+            :height="3"
+            placeholder="Enter multi-line text..."
+            v-model="text"
+        />
+    </Box>
+
+    <Text :x="1" :y="13" :value="preview" />
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from '@vue/reactivity'
+
+const text = ref('')
+
+const label = computed(() => text.value.length > 0 ? `Characters: ${text.value.length}` : 'Type something below:')
+
+const preview = computed(() => {
+    const lines = text.value.split('\n')
+    return text.value.length > 0 ? `${lines.length} lines, ${text.value.length} chars` : 'Preview appears here'
+})
+</script>

package/templates/full/src/apps/main/main.ts

@@ -0,0 +1,12 @@
+import {runApp} from '../../shared/runApp.ts';
+import App from './App.vue';
+
+export const ENTRY = 'App.vue';
+
+export function run(options?: {logFilePath?: string}) {
+  return runApp(App, options);
+}
+
+if (import.meta.main) {
+  run();
+}

package/templates/full/src/shared/runApp.ts

@@ -0,0 +1,14 @@
+import {createApp, type TuiSFCModule} from '@buntui/core';
+
+export function runApp(vueComponent: TuiSFCModule, options: {logFilePath?: string} = {}) {
+  const app = createApp({
+    logLevel: 'info',
+    clearLog: true,
+    tickRate: 60,
+    renderRate: 24,
+    ...options,
+  });
+  const scene = app.createScene(vueComponent, {bgHexRgb: 0x1A_1B_26, visible: true});
+  app.start();
+  return {app, scene};
+}

package/templates/sfc/README.md

@@ -22,7 +22,9 @@ The built output is in `dist/`.
 
 ```
 src/
-  main.ts      Production entry
-  dev.ts       Dev server with HMR
-  App.vue      Root SFC component
+  apps/main/     App entry point
+    App.vue      Root SFC component
+    main.ts      Production & dev entry
+  shared/
+    runApp.ts    App bootstrap helper
 ```

package/templates/sfc/package.json

@@ -3,17 +3,17 @@
     "version": "0.0.1",
     "type": "module",
     "scripts": {
-        "dev": "bun --preload @buntui/compiler/vue-plugin src/dev.ts",
-        "build": "bun run ./scripts/build.ts"
+        "dev": "buntui dev",
+        "build": "buntui build"
     },
     "dependencies": {
         "@buntui/core": "{{version}}",
-        "@buntui/compiler": "{{version}}",
         "@buntui/native": "{{version}}",
         "@buntui/extensions": "{{version}}",
         "@vue/reactivity": "^3.5.34"
     },
     "devDependencies": {
+        "@buntui/cli": "{{version}}",
         "@types/bun": "latest",
         "vue": "^3.5.34",
         "vue-tsc": "^3.2.8"

package/templates/sfc/src/apps/main/App.vue

@@ -0,0 +1,42 @@
+<template>
+    <Box
+        x="20%"
+        y="25%"
+        width="60%"
+        :height="17"
+        borderStyle="rounded"
+        direction="vertical"
+        :gap="1"
+        align="center"
+        :paddingTop="1"
+        :paddingBottom="1"
+        :paddingLeft="2"
+        :paddingRight="2"
+    >
+        <Text :value="title" styleModifier="bold" />
+        <Text value="SFC template with hot reload" />
+        <Text value="Edit src/App.vue to get started" />
+        <Text :value="clock" />
+        <Box direction="horizontal" :gap="2" align="center">
+            <Button :value="'Count: ' + count" @click="increment" />
+        </Box>
+    </Box>
+</template>
+
+<script setup lang="ts">
+import { onTick } from '@buntui/core'
+import { ref } from '@vue/reactivity'
+
+const title = '{{name}}'
+const clock = ref('')
+const count = ref(0)
+
+onTick(() => {
+    const now = new Date()
+    clock.value = now.toLocaleTimeString()
+})
+
+function increment() {
+    count.value++
+}
+</script>

package/templates/sfc/src/apps/main/main.ts

@@ -0,0 +1,12 @@
+import {runApp} from '../../shared/runApp.ts';
+import App from './App.vue';
+
+export const ENTRY = 'App.vue';
+
+export function run(options?: {logFilePath?: string}) {
+  return runApp(App, options);
+}
+
+if (import.meta.main) {
+  run();
+}

package/templates/sfc/src/shared/runApp.ts

@@ -0,0 +1,14 @@
+import {createApp, type TuiSFCModule} from '@buntui/core';
+
+export function runApp(vueComponent: TuiSFCModule, options: {logFilePath?: string} = {}) {
+  const app = createApp({
+    logLevel: 'info',
+    clearLog: true,
+    tickRate: 60,
+    renderRate: 24,
+    ...options,
+  });
+  const scene = app.createScene(vueComponent, {bgHexRgb: 0x1A_1B_26, visible: true});
+  app.start();
+  return {app, scene};
+}