testing max width

Author: posva

src/tui/App.vue

@@ -1,7 +1,18 @@
 <script setup lang="ts">
+import { Boxes } from 'cli-boxes'
 import { TuiBox as Box } from 'vue-termui'
 
 const n = ref(0)
+const styles: Array<keyof Boxes> = [
+  'arrow',
+  'bold',
+  'classic',
+  'double',
+  'doubleSingle',
+  'round',
+  'single',
+  'singleDouble',
+]
 onMounted(() => {
   setInterval(() => {
     n.value++
@@ -10,8 +21,15 @@ onMounted(() => {
 </script>
 
 <template>
-  <Box align-items="flex-end" justify="center" width="80" height="50">
-    <span color="red"
+  <Box
+    :borderStyle="styles[n % styles.length]"
+    :marginX="0"
+    :paddingX="1"
+    width="100%"
+    :maxWidth="80"
+    color="red"
+  >
+    <span
       >Counter: <span bold>{{ n }}</span
       >.
       <br />
@@ -21,8 +39,8 @@ onMounted(() => {
           {{ n % 2 == 0 ? 'No' : 'Yes' }}
         </span>
       </span>
-      <!-- <br /> -->
-      <!-- <Span inverse color="yellow">Hello</Span> -->
+      <br />
+      <Span color="yellow">Current style: {{ styles[n % styles.length] }}</Span>
     </span>
   </Box>
 </template>

src/tui/index.ts

@@ -1,4 +1,5 @@
 import App from './App.vue'
+// import App from './demos/Borders.vue'
 import { createApp } from 'vue-termui'
 
 await createApp(App).mount()

src/tui/renderer/styles.ts

@@ -127,6 +127,16 @@ export interface Styles {
    */
   readonly minHeight?: number | string
 
+  /**
+   * Sets a maximum width of the element.
+   */
+  readonly maxWidth?: number | string
+
+  /**
+   * Sets a maximum height of the element.
+   */
+  readonly maxHeight?: number | string
+
   /**
    * Set this property to `none` to hide the element.
    */
@@ -294,6 +304,7 @@ const applyDimensionStyles = (node: YogaNode, style: Styles): void => {
   if ('width' in style) {
     if (typeof style.width === 'number') {
       node.setWidth(style.width)
+      // TODO: handle strings with endsWith %
     } else if (typeof style.width === 'string') {
       node.setWidthPercent(Number.parseInt(style.width, 10))
     } else {
@@ -326,6 +337,15 @@ const applyDimensionStyles = (node: YogaNode, style: Styles): void => {
       node.setMinHeight(style.minHeight ?? 0)
     }
   }
+
+  if ('maxWidth' in style) {
+    const { maxWidth } = style
+    if (typeof maxWidth === 'string' && maxWidth.endsWith('%')) {
+      node.setMaxHeightPercent(Number.parseInt(maxWidth, 10))
+    } else {
+      node.setMaxWidth(maxWidth ?? 0)
+    }
+  }
 }
 
 const applyDisplayStyles = (node: YogaNode, style: Styles): void => {