log component layout and styling

nicegui/elements/custom_view.py

@@ -15,6 +15,7 @@ class CustomView(jp.JustpyBaseComponent):
 
         self.pages = {}
         self.classes = ''
+        self.style = ''
         self.options = jp.Dict(**options)
 
         super().__init__(temp=False)
@@ -50,5 +51,7 @@ class CustomView(jp.JustpyBaseComponent):
             'vue_type': self.vue_type,
             'id': self.id,
             'show': True,
+            'classes': self.classes,
+            'style': self.style,
             'options': self.options,
         }

nicegui/elements/log.js

@@ -1,17 +1,15 @@
-var lines = [];
-
 Vue.component("log", {
-  template: `<div v-bind:id="jp_props.id">Hello!</div>`,
+  template: `<textarea v-bind:id="jp_props.id" :class="jp_props.classes" :style="jp_props.style"></textarea>`,
   mounted() {
     comp_dict[this.$props.jp_props.id] = this;
   },
   methods: {
     push(line) {
-      lines.push(line);
-      document.getElementById(this.$props.jp_props.id).innerText = lines;
+      const textarea = document.getElementById(this.$props.jp_props.id);
+      textarea.innerHTML += (textarea.innerHTML ? "\n" : "") + line;
+      textarea.scrollTop = textarea.scrollHeight;
     },
   },
-  updated() {},
   props: {
     jp_props: Object,
   },

nicegui/elements/log.py

@@ -15,6 +15,8 @@ class Log(Element):
 
         super().__init__(LogView())
 
+        self.classes('border whitespace-pre font-mono')
+
     async def push(self, line: str):
 
         await asyncio.gather(*[