First Release

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bb-component-SuperTabs",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A Tabs component for Budibase with Super Powers",
   "author": "Michael Poirazi",
   "license": "MIT",

src/Component.svelte

@@ -53,21 +53,24 @@
   } 
 
   function hideNonSelected () {
-    let children = contents?.children
-
-    for(var i=0; i<children?.length; i++){
-      var child = children[i];
-      let id = (child.attributes.getNamedItem("data-id")?.nodeValue);   
-      if (id != $tabStore?.id) 
-        child.style.display = "none"
-      else 
-        child.style.display = "block"
-    }   
+    if (contents?.children.length > 0) {
+      let children = contents?.children
+
+      for(var i=0; i<children?.length; i++){
+        var child = children[i];
+        let id = (child.attributes.getNamedItem("data-id")?.nodeValue);   
+        if (id != $tabStore?.id) 
+          child.style.display = "none"
+        else 
+          child.style.display = "block"
+      }   
+    }
   }
 
   let left, top, width, height
   function calculateIndicator ()  
   {
+    if ($tabStore.id) {
       if (!vertical) {
         width = $tabStore?.boundingBox?.width + "px"
         height = "2px";
@@ -79,14 +82,15 @@
         top = $tabStore?.boundingBox?.top - container?.getBoundingClientRect().top + "px"
         left = -2 + "px"
       }
+    }
   }
-
+  
   onMount ( () => {
     hideNonSelected(); 
     calculateIndicator();
   })
 
-  $: console.log ($tabStore.id)
+  $: console.log ($tabStore?.id)
 </script>
 
 <div use:styleable={$component.styles}>
@@ -123,7 +127,12 @@
 
     </div>
     {:else}
-      <p> Please add some containers to get started ! </p>
+      <div class="instructions"> 
+          <h2> Super Tabs Component </h2>
+          <p> The Super Tabs Component will render a Tabs control with a Tab for each of it's child components </p>
+          <p> It will use the "Name" property of the component as Tab text </p>
+          <p> Add a couple of Container Components to get started ! </p>
+      </div>
     {/if}
 
 </div>

src/lib/Tab.svelte

@@ -8,7 +8,7 @@
     let container
     let isSelected
 
-    $: isSelected = ( $tabStore.id === id )
+    $: isSelected = ( $tabStore?.id === id )
     $: init (id, title, emphasized, $tabStore.id)
 
     function handleClick () {

yarn.lock

@@ -269,9 +269,9 @@
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
 "@types/node@*":
-  version "18.11.12"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.12.tgz#89e7f8aa8c88abf432f9bd594888144d7dba10aa"
-  integrity sha512-FgD3NtTAKvyMmD44T07zz2fEf+OKwutgBCEVM8GcvMGVGaDktiLNTDvPwC/LUe3PinMW+X6CuLOF2Ui1mAlSXg==
+  version "18.11.13"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.13.tgz#dff34f226ec1ac0432ae3b136ec5552bd3b9c0fe"
+  integrity sha512-IASpMGVcWpUsx5xBOrxMj7Bl8lqfuTY7FKAnPmu5cHkfQVWF8GulWS1jbRqA934qZL35xh5xN/+Xe/i26Bod4w==
 
 "@types/resolve@1.17.1":
   version "1.17.1"