tecitheme 0.11.7 → 0.11.8

package/dist/components/FeatureTable.svelte

@@ -1,5 +1,8 @@
 <script>
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
   import { getColorStyles, makeIdString } from "../utils";
+  import { onMount } from "svelte";
   import { writable } from "svelte/store";
 
   export let data = {};
@@ -38,21 +41,21 @@
    * }
   */
   let tables = {};
-  data.groups.forEach(section => {
-    if (section.options) 
+  data.groups.forEach(group => {
+    if (group.options) 
     {
-      tables[section.name] = {columns: [], categories: []}; //Initialize key for the section object
+      tables[group.name] = {name: group.name, columns: [], categories: []}; //Initialize key for the section object
 
-      section.options.forEach(option => {
+      group.options.forEach(option => {
 
-        tables[section.name]["columns"].push({name: option.name, description: option.description, highlightOption: option.highlightOption});
+        tables[group.name]["columns"].push({name: option.name, description: option.description, highlightOption: option.highlightOption});
 
         if (option.features) {
           option.features.forEach(category => { 
 
             // Big 'ole ternary to retrieve or initialize category data
-            let catData = tables[section.name]["categories"][category.name] 
-            ? tables[section.name]["categories"][category.name] 
+            let catData = tables[group.name]["categories"][category.name] 
+            ? tables[group.name]["categories"][category.name] 
             : {name: category.name, features: {}};
 
             category.features.forEach((feature, index) => {
@@ -73,7 +76,7 @@
             });
 
             //Store category data
-            tables[section.name]["categories"][category.name] = catData;
+            tables[group.name]["categories"][category.name] = catData;
 
           });
         }
@@ -82,17 +85,17 @@
     }
   });
 
-  let selectedButton = writable({});
+  let selectedGroup = writable({});
   let selectedTable = writable({});
 
   //Initialize data stores
   if (data.groups) {
-    selectedButton.update(val => data.groups[0]);
-    selectedTable.update(val => tables[$selectedButton.name]);
+    selectedGroup.update(val => data.groups[0]);
+    selectedTable.update(val => tables[$selectedGroup.name]);
   }
 
   //Update table store when new button is selected
-  selectedButton.subscribe(val => selectedTable.update(table => tables[val.name]))
+  selectedGroup.subscribe(val => selectedTable.update(table => tables[val.name]))
 
   /**
    * 
@@ -123,6 +126,24 @@
     }
   }
 
+  onMount(() => {
+    let initialGroupParam = $page.url.searchParams.get("group");
+    if (initialGroupParam != null) {
+      let initialGroup = data.groups.filter(group => group.name === initialGroupParam)[0];
+      selectedGroup.update(_ => initialGroup);
+    }
+
+    selectedGroup.subscribe(newGroup => {
+      $page.url.searchParams.set("group", newGroup.name);
+      goto($page.url.toString(), {noScroll: true});
+
+      setTimeout(() => {
+        let anchorElement = document.getElementById($page.url.hash.slice(1,));
+        if (anchorElement) anchorElement.scrollIntoView(true);
+      }, 300)
+    })
+  })
+
 </script>
 
 <div id={id} class="relative flex flex-col space-y-4">
@@ -138,7 +159,10 @@
           <fieldset class="flex flex-row bg-white/5 text-center text-xs font-semibold leading-5 shadow-lg ring ring-gray-200/50">
             <legend class="sr-only">Group Selector</legend>
             {#each data.groups as btn}
-              <button class="{$selectedButton === btn ? getColorStyles("background", data.color) : getColorStyles("button", "white")} px-4 py-2 transition ease-in-out duration-300" on:click={selectedButton.update(val => btn)}>
+              <button class="{$selectedGroup === btn ? getColorStyles("background", data.color) : getColorStyles("button", "white")} px-4 py-2 transition ease-in-out duration-300" on:click={() => {
+                selectedGroup.update(_ => btn);
+                goto($page.url.pathname + $page.url.search);
+              }}>
                 {btn.name}
               </button>
             {/each}
@@ -152,8 +176,8 @@
 
         <div class="hidden lg:absolute lg:inset-x-px lg:bottom-0 lg:top-4 lg:block" aria-hidden="true"></div>
 
-        {#if $selectedButton.options}
-          {#each $selectedButton.options as card}
+        {#if $selectedGroup.options}
+          {#each $selectedGroup.options as card}
             
             <div class="relative ring-1 ring-white/30 lg:pb-14 {card.highlightOption ? getColorStyles("background", data.color) : "bg-white"} w-full shadow-lg">
               <div class="p-8 lg:pt-12 xl:p-10 xl:pt-14">
@@ -223,7 +247,14 @@
   {#each Object.values($selectedTable.categories) as category, categoryIndex}
 
     <!-- Category Name -->
-    <h4 class="hidden sm:block sticky top-32 z-20 bg-white font-semibold leading-6 text-gray-900 px-4 py-2 w-fit">{category.name}</h4>
+    <div class="hidden sm:flex sticky top-32 z-20 bg-transparent flex-row">
+
+      <h4 id={makeIdString($selectedTable.name + " " + category.name)} class="scroll-mt-24 bg-white font-semibold leading-6 text-gray-900 pl-4 mr-8 py-2 w-full"><a href={"#"+makeIdString($selectedTable.name + " " + category.name)}>{category.name}</a></h4>
+
+      {#each $selectedTable.columns as col}
+      <div class="w-full"></div>
+      {/each}
+    </div>
 
     <!-- Table -->
     <div class="hidden relative sm:flex flex-col w-full shadow-lg">
@@ -310,7 +341,7 @@
       {#if sortFeaturesByOrder(category.features, column.name).length > 0}
     
         <!-- Category Headings -->
-        <h4 class="sticky top-44 sm:hidden block font-semibold leading-6 text-gray-900 w-full bg-white z-20 py-2">{category.name}</h4>
+        <h4 id={makeIdString(column.name + " " + category.name)} class="sticky top-44 sm:hidden block font-semibold leading-6 text-gray-900 w-full bg-white z-20 py-2 scroll-mt-36"><a href={"#" + makeIdString(column.name + " " + category.name)}>{category.name}</a></h4>
 
         <div class="sm:hidden relative flex flex-col">
           <!-- Tables -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tecitheme",
-  "version": "0.11.7",
+  "version": "0.11.8",
   "license": "MIT",
   "scripts": {
     "dev": "vite dev",