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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/buntui.so +0 -0
  2. package/dist/index.js +6 -6
  3. package/package.json +4 -4
  4. package/templates/basic/src/App.vue +8 -10
  5. package/templates/basic/src/main.ts +1 -1
  6. package/templates/full/src/components/BoxDemo.vue +26 -31
  7. package/templates/full/src/components/ButtonDemo.vue +4 -4
  8. package/templates/full/src/components/CheckboxDemo.vue +5 -5
  9. package/templates/full/src/components/InputDemo.vue +6 -8
  10. package/templates/full/src/components/ProgressDemo.vue +3 -3
  11. package/templates/full/src/components/RadioDemo.vue +2 -2
  12. package/templates/full/src/components/ScrollBoxDemo.vue +6 -11
  13. package/templates/full/src/components/SelectDemo.vue +6 -8
  14. package/templates/full/src/components/SwitchDemo.vue +5 -5
  15. package/templates/full/src/components/TableDemo.vue +2 -4
  16. package/templates/full/src/components/TextDemo.vue +18 -24
  17. package/templates/full/src/components/TextareaDemo.vue +15 -14
  18. package/templates/full/src/main.ts +1 -1
  19. package/templates/sfc/src/App.vue +11 -13
  20. package/templates/sfc/src/main.ts +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-buntui",
3
- "version": "0.1.0-alpha.2",
3
+ "version": "0.1.0-alpha.3",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/AlphaFoxz/buntui.git",
@@ -18,11 +18,11 @@
18
18
  "dev": "bun --preload @buntui/compiler/vue-plugin ./src/index.ts"
19
19
  },
20
20
  "dependencies": {
21
- "@buntui/core": "^0.1.0-alpha.2"
21
+ "@buntui/core": "^0.1.0-alpha.3"
22
22
  },
23
23
  "devDependencies": {
24
- "@buntui/compiler": "^0.1.0-alpha.2",
25
- "@buntui/native": "^0.1.0-alpha.2",
24
+ "@buntui/compiler": "^0.1.0-alpha.3",
25
+ "@buntui/native": "^0.1.0-alpha.3",
26
26
  "@vue/reactivity": "^3.5.34",
27
27
  "@types/bun": "^1.3.14"
28
28
  }
package/templates/basic/src/App.vue CHANGED
@@ -1,19 +1,17 @@
1
1
  <template>
2
2
  <Box
3
- :x="'20%'"
4
- :y="'30%'"
5
- :width="'60%'"
3
+ x="20%"
4
+ y="30%"
5
+ width="60%"
6
6
  :height="9"
7
- :colorBg="'rgba(30,30,46,1)'"
8
- :borderColor="'rgba(137,180,250,1)'"
9
7
  borderStyle="rounded"
10
- :direction="'vertical'"
8
+ direction="vertical"
11
9
  :gap="1"
12
- :align="'center'"
10
+ align="center"
13
11
  >
14
- <Text :colorFg="'rgba(137,180,250,1)'" :value="title" styleModifier="bold" />
15
- <Text :colorFg="'rgba(166,227,161,1)'" value="Edit src/App.vue to get started" />
16
- <Text :colorFg="'rgba(108,112,134,1)'" :value="clock" />
12
+ <Text :value="title" styleModifier="bold" />
13
+ <Text value="Edit src/App.vue to get started" />
14
+ <Text :value="clock" />
17
15
  </Box>
18
16
  </template>
19
17
 
package/templates/basic/src/main.ts CHANGED
@@ -4,7 +4,7 @@ import App from './App.vue';
4
4
  export const ENTRY = 'App.vue';
5
5
 
6
6
  export function run() {
7
- const app = createApp({logLevel: 'debug', clearLog: true, tickRate: 120, renderRate: 60});
7
+ const app = createApp({logLevel: 'info', clearLog: true, tickRate: 120, renderRate: 60});
8
8
  const scene = app.createScene(App, {bgHexRgb: 0x1A_1B_26, visible: true});
9
9
  app.start();
10
10
  return {app, scene};
package/templates/full/src/components/BoxDemo.vue CHANGED
@@ -1,83 +1,78 @@
1
1
  <template>
2
- <Text :x="1" :y="3" :colorFg="'rgba(137,180,250,1)'" value="Box widget — layout container with borders, padding, alignment" />
2
+ <Text :x="1" :y="3" value="Box widget — layout container with borders, padding, alignment" />
3
3
 
4
4
  <Box
5
5
  :x="1"
6
6
  :y="4"
7
7
  :width="30"
8
- :height="5"
9
- :colorBg="'rgba(30,30,46,1)'"
10
- :borderColor="'rgba(137,180,250,1)'"
8
+ :height="6"
9
+ borderColor="rgba(137,180,250,1)"
11
10
  borderStyle="rounded"
12
- :direction="'vertical'"
11
+ direction="vertical"
13
12
  :gap="1"
14
13
  :paddingTop="1"
15
14
  :paddingLeft="1"
16
15
  >
17
- <Text :colorFg="'rgba(205,214,244,1)'" value="Rounded border" />
18
- <Text :colorFg="'rgba(108,112,134,1)'" value="With padding and gap" />
16
+ <Text value="Rounded border" />
17
+ <Text value="With padding and gap" />
19
18
  </Box>
20
19
 
21
20
  <Box
22
21
  :x="33"
23
22
  :y="4"
24
23
  :width="30"
25
- :height="5"
26
- :colorBg="'rgba(30,30,46,1)'"
27
- :borderColor="'rgba(166,227,161,1)'"
24
+ :height="6"
25
+ borderColor="rgba(166,227,161,1)"
28
26
  borderStyle="double"
29
- :direction="'vertical'"
27
+ direction="vertical"
30
28
  :gap="1"
31
29
  :paddingTop="1"
32
30
  :paddingLeft="1"
33
31
  >
34
- <Text :colorFg="'rgba(166,227,161,1)'" value="Double border" />
35
- <Text :colorFg="'rgba(108,112,134,1)'" value="Vertical layout" />
32
+ <Text value="Double border" />
33
+ <Text value="Vertical layout" />
36
34
  </Box>
37
35
 
38
36
  <Box
39
37
  :x="1"
40
- :y="10"
38
+ :y="11"
41
39
  :width="30"
42
40
  :height="3"
43
- :colorBg="'rgba(30,30,46,1)'"
44
- :borderColor="'rgba(250,179,135,1)'"
41
+ borderColor="rgba(250,179,135,1)"
45
42
  borderStyle="solid"
46
- :direction="'horizontal'"
43
+ direction="horizontal"
47
44
  :gap="2"
48
- :align="'center'"
45
+ align="center"
49
46
  >
50
- <Text :colorFg="'rgba(250,179,135,1)'" value="Horizontal" />
51
- <Text :colorFg="'rgba(205,214,244,1)'" value="center aligned" />
47
+ <Text value="Horizontal" />
48
+ <Text value="center aligned" />
52
49
  </Box>
53
50
 
54
51
  <Box
55
52
  :x="33"
56
- :y="10"
53
+ :y="11"
57
54
  :width="30"
58
55
  :height="3"
59
- :colorBg="'rgba(30,30,46,1)'"
60
- :borderColor="'rgba(243,139,168,1)'"
56
+ borderColor="rgba(243,139,168,1)"
61
57
  borderStyle="dashed"
62
- :direction="'horizontal'"
58
+ direction="horizontal"
63
59
  :gap="2"
64
- :align="'center'"
60
+ align="center"
65
61
  >
66
- <Text :colorFg="'rgba(243,139,168,1)'" value="Dashed border" />
67
- <Text :colorFg="'rgba(205,214,244,1)'" value="gap=2" />
62
+ <Text value="Dashed border" />
63
+ <Text value="gap=2" />
68
64
  </Box>
69
65
 
70
66
  <Box
71
67
  :draggable="true"
72
68
  :x="1"
73
- :y="14"
69
+ :y="15"
74
70
  :width="20"
75
71
  :height="3"
76
- :colorBg="'rgba(203,166,245,0.2)'"
77
- :borderColor="'rgba(203,166,245,1)'"
72
+ borderColor="rgba(203,166,245,1)"
78
73
  borderStyle="rounded"
79
74
  >
80
- <Text :colorFg="'rgba(203,166,245,1)'" value="Drag me!" />
75
+ <Text value="Drag me!" />
81
76
  </Box>
82
77
  </template>
83
78
 
package/templates/full/src/components/ButtonDemo.vue CHANGED
@@ -1,16 +1,16 @@
1
1
  <template>
2
- <Text :x="1" :y="3" :colorFg="'rgba(137,180,250,1)'" value="Button widget — interactive clickable element" />
2
+ <Text :x="1" :y="3" value="Button widget — interactive clickable element" />
3
3
 
4
4
  <Button :x="1" :y="4" :width="18" :height="3" value="Click me" @click="handleClick" />
5
- <Text :x="21" :y="5" :colorFg="'rgba(108,112,134,1)'" :value="log" />
5
+ <Text :x="21" :y="5" :value="log" />
6
6
 
7
- <Text :x="1" :y="8" :colorFg="'rgba(166,227,161,1)'" value="Border variants:" />
7
+ <Text :x="1" :y="8" value="Border variants:" />
8
8
  <Button :x="1" :y="9" :width="12" :height="3" value="Solid" borderStyleNormal="solid" @click="handleClick" />
9
9
  <Button :x="15" :y="9" :width="12" :height="3" value="Rounded" borderStyleNormal="rounded" @click="handleClick" />
10
10
  <Button :x="29" :y="9" :width="12" :height="3" value="Bold" borderStyleNormal="bold" @click="handleClick" />
11
11
  <Button :x="43" :y="9" :width="12" :height="3" value="Double" borderStyleNormal="double" @click="handleClick" />
12
12
 
13
- <Text :x="1" :y="13" :colorFg="'rgba(250,179,135,1)'" value="States:" />
13
+ <Text :x="1" :y="13" value="States:" />
14
14
  <Button :x="1" :y="14" :width="18" :height="3" value="Disabled" :disabled="disabled" />
15
15
  <Button :x="21" :y="14" :width="18" :height="3" value="Toggle me" @click="toggleDisabled" />
16
16
  </template>
package/templates/full/src/components/CheckboxDemo.vue CHANGED
@@ -1,11 +1,11 @@
1
1
  <template>
2
- <Text :x="1" :y="3" :colorFg="'rgba(137,180,250,1)'" value="Checkbox widget — boolean toggle" />
2
+ <Text :x="1" :y="3" value="Checkbox widget — boolean toggle" />
3
3
 
4
- <Checkbox :x="1" :y="4" :label="'Enable feature A'" @change="handleChange('A', $event)" />
5
- <Checkbox :x="1" :y="5" :label="'Enable feature B'" @change="handleChange('B', $event)" />
6
- <Checkbox :x="1" :y="6" :label="'Disabled option'" :disabled="true" />
4
+ <Checkbox :x="1" :y="4" label="Enable feature A" @change="handleChange('A', $event)" />
5
+ <Checkbox :x="1" :y="5" label="Enable feature B" @change="handleChange('B', $event)" />
6
+ <Checkbox :x="1" :y="6" label="Disabled option" :disabled="true" />
7
7
 
8
- <Text :x="1" :y="8" :colorFg="'rgba(108,112,134,1)'" :value="log" />
8
+ <Text :x="1" :y="8" :value="log" />
9
9
  </template>
10
10
 
11
11
  <script setup lang="ts">
package/templates/full/src/components/InputDemo.vue CHANGED
@@ -1,28 +1,26 @@
1
1
  <template>
2
- <Text :x="1" :y="3" :colorFg="'rgba(137,180,250,1)'" value="Input widget — text field with editing support" />
2
+ <Text :x="1" :y="3" value="Input widget — text field with editing support" />
3
3
 
4
4
  <Box
5
5
  :x="1"
6
6
  :y="4"
7
7
  :width="50"
8
- :height="5"
9
- :colorBg="'rgba(30,30,46,1)'"
10
- :borderColor="'rgba(137,180,250,0.5)'"
8
+ :height="8"
11
9
  borderStyle="rounded"
12
- :direction="'vertical'"
10
+ direction="vertical"
13
11
  :gap="1"
14
12
  :paddingTop="1"
15
13
  :paddingLeft="1"
16
14
  >
17
- <Text :colorFg="'rgba(108,112,134,1)'" value="Type something and press Enter:" />
15
+ <Text value="Type something and press Enter:" />
18
16
  <Input
19
17
  :width="46"
20
- :placeholder="'Enter text here...'"
18
+ placeholder="Enter text here..."
21
19
  @submit="handleSubmit"
22
20
  />
23
21
  </Box>
24
22
 
25
- <Text :x="1" :y="10" :colorFg="'rgba(166,227,161,1)'" :value="submittedValue" />
23
+ <Text :x="1" :y="13" :value="submittedValue" />
26
24
  </template>
27
25
 
28
26
  <script setup lang="ts">
package/templates/full/src/components/ProgressDemo.vue CHANGED
@@ -1,10 +1,10 @@
1
1
  <template>
2
- <Text :x="1" :y="3" :colorFg="'rgba(137,180,250,1)'" value="Progress widget — bar indicator" />
2
+ <Text :x="1" :y="3" value="Progress widget — bar indicator" />
3
3
 
4
- <Text :x="1" :y="4" :colorFg="'rgba(108,112,134,1)'" value="Determinate:" />
4
+ <Text :x="1" :y="4" value="Determinate:" />
5
5
  <Progress :x="1" :y="5" :width="40" :height="1" :value="progress" />
6
6
 
7
- <Text :x="1" :y="7" :colorFg="'rgba(166,227,161,1)'" :value="`${Math.round(progress * 100)}%`" />
7
+ <Text :x="1" :y="7" :value="`${Math.round(progress * 100)}%`" />
8
8
 
9
9
  <Button :x="1" :y="9" :width="20" :height="3" value="Reset" @click="reset" />
10
10
  <Button :x="23" :y="9" :width="20" :height="3" value="Set 75%" @click="set75" />
package/templates/full/src/components/RadioDemo.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <Text :x="1" :y="3" :colorFg="'rgba(137,180,250,1)'" value="RadioGroup widget — single selection from options" />
2
+ <Text :x="1" :y="3" value="RadioGroup widget — single selection from options" />
3
3
 
4
4
  <RadioGroup
5
5
  :x="1"
@@ -9,7 +9,7 @@
9
9
  @change="handleChange"
10
10
  />
11
11
 
12
- <Text :x="1" :y="8" :colorFg="'rgba(108,112,134,1)'" :value="log" />
12
+ <Text :x="1" :y="8" :value="log" />
13
13
  </template>
14
14
 
15
15
  <script setup lang="ts">
package/templates/full/src/components/ScrollBoxDemo.vue CHANGED
@@ -1,21 +1,18 @@
1
1
  <template>
2
- <Text :x="1" :y="3" :colorFg="'rgba(137,180,250,1)'" value="ScrollBox widget — scrollable container" />
2
+ <Text :x="1" :y="3" value="ScrollBox widget — scrollable container" />
3
3
 
4
4
  <ScrollBox
5
5
  :x="1"
6
6
  :y="4"
7
7
  :width="40"
8
8
  :height="8"
9
- :colorBg="'rgba(30,30,46,1)'"
10
- :borderColor="'rgba(137,180,250,0.5)'"
11
9
  borderStyle="rounded"
12
- :direction="'vertical'"
13
10
  :gap="1"
14
11
  :paddingTop="1"
15
12
  :paddingLeft="1"
16
13
  :alwaysShowScrollbar="true"
17
14
  >
18
- <Text v-for="item in items" :key="item" :colorFg="'rgba(205,214,244,1)'" :value="item" />
15
+ <Text v-for="item in items" :key="item" :value="item" />
19
16
  </ScrollBox>
20
17
 
21
18
  <Box
@@ -23,17 +20,15 @@
23
20
  :y="4"
24
21
  :width="30"
25
22
  :height="8"
26
- :colorBg="'rgba(30,30,46,1)'"
27
- :borderColor="'rgba(166,227,161,0.5)'"
28
23
  borderStyle="rounded"
29
- :direction="'vertical'"
24
+ direction="vertical"
30
25
  :gap="1"
31
26
  :paddingTop="1"
32
27
  :paddingLeft="1"
33
28
  >
34
- <Text :colorFg="'rgba(166,227,161,1)'" value="Scroll with arrow keys" />
35
- <Text :colorFg="'rgba(108,112,134,1)'" value="Content overflows the visible area" />
36
- <Text :colorFg="'rgba(108,112,134,1)'" value="Scrollbar appears automatically" />
29
+ <Text value="Scroll with arrow keys" />
30
+ <Text value="Content overflows the visible area" />
31
+ <Text value="Scrollbar appears automatically" />
37
32
  </Box>
38
33
  </template>
39
34
 
package/templates/full/src/components/SelectDemo.vue CHANGED
@@ -1,29 +1,27 @@
1
1
  <template>
2
- <Text :x="1" :y="3" :colorFg="'rgba(137,180,250,1)'" value="Select widget — dropdown selection" />
2
+ <Text :x="1" :y="3" value="Select widget — dropdown selection" />
3
3
 
4
4
  <Box
5
5
  :x="1"
6
6
  :y="4"
7
7
  :width="50"
8
- :height="5"
9
- :colorBg="'rgba(30,30,46,1)'"
10
- :borderColor="'rgba(137,180,250,0.5)'"
8
+ :height="8"
11
9
  borderStyle="rounded"
12
- :direction="'vertical'"
10
+ direction="vertical"
13
11
  :gap="1"
14
12
  :paddingTop="1"
15
13
  :paddingLeft="1"
16
14
  >
17
- <Text :colorFg="'rgba(108,112,134,1)'" value="Choose a framework:" />
15
+ <Text value="Choose a framework:" />
18
16
  <Select
19
17
  :width="46"
20
18
  :options="frameworks"
21
- :placeholder="'Select a framework...'"
19
+ placeholder="Select a framework..."
22
20
  @change="handleChange"
23
21
  />
24
22
  </Box>
25
23
 
26
- <Text :x="1" :y="10" :colorFg="'rgba(166,227,161,1)'" :value="selected" />
24
+ <Text :x="1" :y="13" :value="selected" />
27
25
  </template>
28
26
 
29
27
  <script setup lang="ts">
package/templates/full/src/components/SwitchDemo.vue CHANGED
@@ -1,11 +1,11 @@
1
1
  <template>
2
- <Text :x="1" :y="3" :colorFg="'rgba(137,180,250,1)'" value="Switch widget — on/off toggle" />
2
+ <Text :x="1" :y="3" value="Switch widget — on/off toggle" />
3
3
 
4
- <Switch :x="1" :y="4" :label="'Dark mode'" @change="handleChange('Dark mode', $event)" />
5
- <Switch :x="1" :y="5" :label="'Notifications'" @change="handleChange('Notifications', $event)" />
6
- <Switch :x="1" :y="6" :label="'Disabled'" :disabled="true" />
4
+ <Switch :x="1" :y="4" label="Dark mode" @change="handleChange('Dark mode', $event)" />
5
+ <Switch :x="1" :y="5" label="Notifications" @change="handleChange('Notifications', $event)" />
6
+ <Switch :x="1" :y="6" label="Disabled" :disabled="true" />
7
7
 
8
- <Text :x="1" :y="8" :colorFg="'rgba(108,112,134,1)'" :value="log" />
8
+ <Text :x="1" :y="8" :value="log" />
9
9
  </template>
10
10
 
11
11
  <script setup lang="ts">
package/templates/full/src/components/TableDemo.vue CHANGED
@@ -1,19 +1,17 @@
1
1
  <template>
2
- <Text :x="1" :y="3" :colorFg="'rgba(137,180,250,1)'" value="Table widget — structured data display with selection" />
2
+ <Text :x="1" :y="3" value="Table widget — structured data display with selection" />
3
3
 
4
4
  <Table
5
5
  :x="1"
6
6
  :y="4"
7
7
  :width="60"
8
8
  :height="8"
9
- :colorBg="'rgba(30,30,46,1)'"
10
- :borderColor="'rgba(137,180,250,0.5)'"
11
9
  borderStyle="rounded"
12
10
  :columns="columns"
13
11
  :rows="rows"
14
12
  />
15
13
 
16
- <Text :x="1" :y="13" :colorFg="'rgba(108,112,134,1)'" value="Use arrow keys to navigate rows" />
14
+ <Text :x="1" :y="13" value="Use arrow keys to navigate rows" />
17
15
  </template>
18
16
 
19
17
  <script setup lang="ts">
package/templates/full/src/components/TextDemo.vue CHANGED
@@ -1,58 +1,52 @@
1
1
  <template>
2
- <Text :x="1" :y="3" :colorFg="'rgba(137,180,250,1)'" value="Text widget — display styled text" />
2
+ <Text :x="1" :y="3" value="Text widget — display styled text" />
3
3
 
4
4
  <Box
5
5
  :x="1"
6
6
  :y="4"
7
- :width="45%"
8
- :height="5"
9
- :colorBg="'rgba(30,30,46,1)'"
10
- :borderColor="'rgba(137,180,250,0.5)'"
7
+ width="45%"
8
+ :height="8"
11
9
  borderStyle="rounded"
12
- :direction="'vertical'"
10
+ direction="vertical"
13
11
  :gap="1"
14
12
  :paddingTop="1"
15
13
  :paddingLeft="1"
16
14
  >
17
- <Text :colorFg="'rgba(137,180,250,1)'" value="Font styles" />
18
- <Text styleModifier="bold" :colorFg="'rgba(205,214,244,1)'" value="Bold text" />
19
- <Text styleModifier="italic" :colorFg="'rgba(205,214,244,1)'" value="Italic text" />
15
+ <Text value="Font styles" />
16
+ <Text styleModifier="bold" value="Bold text" />
17
+ <Text styleModifier="italic" value="Italic text" />
20
18
  </Box>
21
19
 
22
20
  <Box
23
21
  x="50%"
24
22
  :y="4"
25
23
  width="45%"
26
- :height="5"
27
- :colorBg="'rgba(30,30,46,1)'"
28
- :borderColor="'rgba(166,227,161,0.5)'"
24
+ :height="10"
29
25
  borderStyle="rounded"
30
- :direction="'vertical'"
26
+ direction="vertical"
31
27
  :gap="1"
32
28
  :paddingTop="1"
33
29
  :paddingLeft="1"
34
30
  >
35
- <Text :colorFg="'rgba(166,227,161,1)'" value="Colors" />
36
- <Text :colorFg="'rgba(243,139,168,1)'" value="Red " />
37
- <Text :colorFg="'rgba(137,180,250,1)'" value="Blue " />
38
- <Text :colorFg="'rgba(166,227,161,1)'" value="Green" />
31
+ <Text value="Colors" />
32
+ <Text colorFg="rgba(243,139,168,1)" value="Red " />
33
+ <Text colorFg="rgba(137,180,250,1)" value="Blue " />
34
+ <Text colorFg="rgba(166,227,161,1)" value="Green" />
39
35
  </Box>
40
36
 
41
37
  <Box
42
38
  :x="1"
43
- :y="10"
39
+ :y="15"
44
40
  width="95%"
45
- :height="3"
46
- :colorBg="'rgba(30,30,46,1)'"
47
- :borderColor="'rgba(250,179,135,0.5)'"
41
+ :height="6"
48
42
  borderStyle="rounded"
49
- :direction="'vertical'"
43
+ direction="vertical"
50
44
  :gap="1"
51
45
  :paddingTop="1"
52
46
  :paddingLeft="1"
53
47
  >
54
- <Text :colorFg="'rgba(250,179,135,1)'" value="Dynamic clock:" />
55
- <Text :colorFg="'rgba(205,214,244,1)'" :value="clock" />
48
+ <Text value="Dynamic clock:" />
49
+ <Text :value="clock" />
56
50
  </Box>
57
51
  </template>
58
52
 
package/templates/full/src/components/TextareaDemo.vue CHANGED
@@ -1,37 +1,38 @@
1
1
  <template>
2
- <Text :x="1" :y="3" :colorFg="'rgba(137,180,250,1)'" value="Textarea widget — multi-line text editor" />
2
+ <Text :x="1" :y="3" value="Textarea widget — multi-line text editor" />
3
3
 
4
4
  <Box
5
5
  :x="1"
6
6
  :y="4"
7
7
  :width="50"
8
- :height="6"
9
- :colorBg="'rgba(30,30,46,1)'"
10
- :borderColor="'rgba(137,180,250,0.5)'"
8
+ :height="8"
11
9
  borderStyle="rounded"
12
- :direction="'vertical'"
10
+ direction="vertical"
13
11
  :gap="1"
14
12
  :paddingTop="1"
15
13
  :paddingLeft="1"
16
14
  >
17
- <Text :colorFg="'rgba(108,112,134,1)'" value="Type and press Ctrl+Enter to submit:" />
15
+ <Text :value="label" />
18
16
  <Textarea
19
17
  :width="46"
20
18
  :height="3"
21
- :placeholder="'Enter multi-line text...'"
22
- @submit="handleSubmit"
19
+ placeholder="Enter multi-line text..."
20
+ v-model="text"
23
21
  />
24
22
  </Box>
25
23
 
26
- <Text :x="1" :y="11" :colorFg="'rgba(166,227,161,1)'" :value="submittedValue" />
24
+ <Text :x="1" :y="13" :value="preview" />
27
25
  </template>
28
26
 
29
27
  <script setup lang="ts">
30
- import { ref } from '@vue/reactivity'
28
+ import { ref, computed } from '@vue/reactivity'
31
29
 
32
- const submittedValue = ref('Submit result appears here')
30
+ const text = ref('')
33
31
 
34
- function handleSubmit(event: TuiSubmitEvent) {
35
- submittedValue.value = `Submitted: "${event.value}"`
36
- }
32
+ const label = computed(() => text.value.length > 0 ? `Characters: ${text.value.length}` : 'Type something below:')
33
+
34
+ const preview = computed(() => {
35
+ const lines = text.value.split('\n')
36
+ return text.value.length > 0 ? `${lines.length} lines, ${text.value.length} chars` : 'Preview appears here'
37
+ })
37
38
  </script>
package/templates/full/src/main.ts CHANGED
@@ -5,7 +5,7 @@ export const ENTRY = 'App.vue';
5
5
 
6
6
  export function run(devOptions: {logFilePath?: string} = {}) {
7
7
  const app = createApp({
8
- logLevel: 'debug',
8
+ logLevel: 'info',
9
9
  clearLog: true,
10
10
  tickRate: 60,
11
11
  renderRate: 24,
package/templates/sfc/src/App.vue CHANGED
@@ -1,25 +1,23 @@
1
1
  <template>
2
2
  <Box
3
- :x="'20%'"
4
- :y="'25%'"
5
- :width="'60%'"
6
- :height="12"
7
- :colorBg="'rgba(30,30,46,1)'"
8
- :borderColor="'rgba(137,180,250,1)'"
3
+ x="20%"
4
+ y="25%"
5
+ width="60%"
6
+ :height="17"
9
7
  borderStyle="rounded"
10
- :direction="'vertical'"
8
+ direction="vertical"
11
9
  :gap="1"
12
- :align="'center'"
10
+ align="center"
13
11
  :paddingTop="1"
14
12
  :paddingBottom="1"
15
13
  :paddingLeft="2"
16
14
  :paddingRight="2"
17
15
  >
18
- <Text :colorFg="'rgba(137,180,250,1)'" :value="title" styleModifier="bold" />
19
- <Text :colorFg="'rgba(166,227,161,1)'" value="SFC template with hot reload" />
20
- <Text :colorFg="'rgba(205,214,244,1)'" value="Edit src/App.vue to get started" />
21
- <Text :colorFg="'rgba(108,112,134,1)'" :value="clock" />
22
- <Box :direction="'horizontal'" :gap="2" :align="'center'">
16
+ <Text :value="title" styleModifier="bold" />
17
+ <Text value="SFC template with hot reload" />
18
+ <Text value="Edit src/App.vue to get started" />
19
+ <Text :value="clock" />
20
+ <Box direction="horizontal" :gap="2" align="center">
23
21
  <Button :value="'Count: ' + count" @click="increment" />
24
22
  </Box>
25
23
  </Box>
package/templates/sfc/src/main.ts CHANGED
@@ -5,7 +5,7 @@ export const ENTRY = 'App.vue';
5
5
 
6
6
  export function run(devOptions: {logFilePath?: string} = {}) {
7
7
  const app = createApp({
8
- logLevel: 'debug',
8
+ logLevel: 'info',
9
9
  clearLog: true,
10
10
  tickRate: 60,
11
11
  renderRate: 24,