add margin to widgets and add item template to PyList

pyscriptjs/src/components/pybox.ts

@@ -19,7 +19,7 @@ export class PyBox extends HTMLElement {
 
     connectedCallback() {
       let mainDiv = document.createElement('div');
-      addClasses(mainDiv, ["flex"])
+      addClasses(mainDiv, ["flex", "mx-8"])
       
       // Hack: for some reason when moving children, the editor box duplicates children
       // meaning that we end up with 2 editors, if there's a <py-repl> inside the <py-box>

pyscriptjs/src/components/pyrepl.ts

@@ -98,7 +98,7 @@ export class PyRepl extends BaseEvalElement {
       })
   
       let mainDiv = document.createElement('div');
-      addClasses(mainDiv, ["parentBox", "group", "flex", "flex-col", "mt-2", "border-2", "border-gray-200", "rounded-lg"])
+      addClasses(mainDiv, ["parentBox", "group", "flex", "flex-col", "mt-2", "border-2", "border-gray-200", "rounded-lg", "mx-8"])
       // add Editor to main PyScript div
   
       // Butons DIV

pyscriptjs/src/interpreter.ts

@@ -130,6 +130,7 @@ def create(what, id_=None, classes=''):
   add_classes(element, classes)
   return Element(id_, element)
 
+
 class PyWidgetTheme:
   def __init__(self, main_style_classes):
     self.main_style_classes = main_style_classes
@@ -139,57 +140,6 @@ class PyWidgetTheme:
       widget.classList.add(klass)
 
 
-class PyListTemplate:
-  theme = PyWidgetTheme("flex flex-col-reverse mt-8 mx-4")
-  
-
-  def __init__(self, parent):
-    self.parent = parent
-    self._children = []
-    self._id = self.parent.id
-
-  @property
-  def children(self):
-    return self._children
-
-  @property
-  def data(self):
-    return [c.data for c in self._children]
-
-  def render_children(self):
-    return [c.element.innerHTML.replace("\\n", "") for c in self._children]
-
-  def connect(self):
-    self.md = main_div = document.createElement('div');
-    main_div.id = self._id + "-list-tasks-container"
-
-    if self.theme:
-      self.theme.theme_it(main_div)
-    
-    self.parent.appendChild(main_div)
-
-  def add(self, child):
-    child.register_parent(self)
-    return self._add(child)
-
-  def _add(self, child_elem):
-    console.log("appending child", child_elem.element)
-    self.pre_child_append(child_elem)
-    child_elem.pre_append()
-    self._children.append(child_elem)
-    self.md.appendChild(child_elem.create().element)
-    child_elem.post_append()
-    self.child_appended(child_elem)
-    return child_elem
-
-  def pre_child_append(self, child):
-    pass
-
-  def child_appended(self, child):
-    """Overwrite me to define logic"""
-    pass
-
-
 class PyItemTemplate(Element):
   label_fields = None
 
@@ -253,6 +203,61 @@ class PyItemTemplate(Element):
 
   def render_content(self):
     return ' - '.join([self.data[f] for f in self.labels])
+
+class PyListTemplate:
+  theme = PyWidgetTheme("flex flex-col-reverse mt-8 mx-8")
+  item_class = PyItemTemplate
+
+  def __init__(self, parent):
+    self.parent = parent
+    self._children = []
+    self._id = self.parent.id
+
+  @property
+  def children(self):
+    return self._children
+
+  @property
+  def data(self):
+    return [c.data for c in self._children]
+
+  def render_children(self):
+    return [c.element.innerHTML.replace("\\n", "") for c in self._children]
+
+  def connect(self):
+    self.md = main_div = document.createElement('div');
+    main_div.id = self._id + "-list-tasks-container"
+
+    if self.theme:
+      self.theme.theme_it(main_div)
+
+    self.parent.appendChild(main_div)
+
+  def add(self, *args, **kws):
+    if not isinstance(args[0], self.item_class):
+      child = self.item_class(*args, **kws)
+    else:
+      child = args[0]
+    child.register_parent(self)
+    return self._add(child)
+
+  def _add(self, child_elem):
+    console.log("appending child", child_elem.element)
+    self.pre_child_append(child_elem)
+    child_elem.pre_append()
+    self._children.append(child_elem)
+    self.md.appendChild(child_elem.create().element)
+    child_elem.post_append()
+    self.child_appended(child_elem)
+    return child_elem
+
+  def pre_child_append(self, child):
+    pass
+
+  def child_appended(self, child):
+    """Overwrite me to define logic"""
+    pass
+
     
 
 class OutputCtxManager: