initialize file names and data

index.html

@@ -51,20 +51,21 @@ class FileGroup extends HTMLElement {
 
   addFile({name, data} = {}) {
     const el = document.createElement('m-file-view')
-    if (el.name !== undefined) {
+    if (name !== undefined) {
       el.name = name
     }
-    if (el.name !== undefined) {
+    if (data !== undefined) {
       el.data = data
     }
     this.contentEl.appendChild(el)
+    return el
   }
 }
 
 class FileView extends HTMLElement {
   icons = {
     menu: `
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
         <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
       </svg>
     `,
@@ -83,6 +84,14 @@ class FileView extends HTMLElement {
     this.contentEl.classList.add('content')
     this.shadowRoot.appendChild(this.headerEl)
     this.shadowRoot.appendChild(this.contentEl)
+    this.nameEl = document.createElement('input')
+    this.nameEl.classList.add('name')
+    this.headerEl.appendChild(this.nameEl)
+    this.editEl = document.createElement('m-text-edit')
+    this.contentEl.appendChild(this.editEl)
+    this.menuEl = document.createElement('button')
+    this.menuEl.innerHTML = this.icons.menu
+    this.headerEl.appendChild(this.menuEl)
   }
 
   connectedCallback() {
@@ -121,16 +130,28 @@ class FileView extends HTMLElement {
         flex-direction: column;
         align-items: stretch;
       }
+      svg {
+        height: 20px;
+        width: 20px;
+      }
     `
     this.shadowRoot.appendChild(style)
-    this.nameEl = document.createElement('input')
+  }
-    this.nameEl.classList.add('name')
+
-    this.headerEl.appendChild(this.nameEl)
+  set name(name) {
-    this.editEl = document.createElement('m-text-edit')
+    this.nameEl.value = name
-    this.contentEl.appendChild(this.editEl)
+  }
-    this.menuEl = document.createElement('button')
+
-    this.menuEl.innerHTML = this.icons.menu
+  get name() {
-    this.headerEl.appendChild(this.menuEl)
+    return this.nameEl.value
+  }
+
+  set data(data) {
+    this.editEl.value = data
+  }
+
+  get data() {
+    return this.editEl.value
   }
 }
 
@@ -182,6 +203,14 @@ class TextEdit extends HTMLElement {
     `
     this.shadowRoot.appendChild(style)
   }
+
+  set value(value) {
+    this.textEl.value = value
+  }
+
+  get value() {
+    return this.textEl.value
+  }
 }
 
 customElements.define('m-file-group', FileGroup)
@@ -190,6 +219,15 @@ customElements.define('m-text-edit', TextEdit)
 
 
 const fileGroup = document.createElement('m-file-group')
+fileGroup.addFile({
+  name: 'file-group.js',
+  data: 'code here'
+})
+fileGroup.addFile({
+  name: 'file-view.js',
+  data: 'code here'
+})
+
 document.body.appendChild(fileGroup)
 </script>