@onsvisual/svelte-components 0.1.61 → 0.1.63

package/dist/inputs/Checkbox/Checkbox.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { createEventDispatcher } from "svelte";
+  import { onMount, onDestroy, getContext, createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -54,13 +54,41 @@
    */
   export let compact = false;
 
+  const checkboxes = getContext("checkboxes");
+
+  let el;
+
+  function findAncestor(el, cls) {
+    while ((el = el.parentElement) && !el.classList.contains(cls));
+    return el;
+  }
+
+  function updateGroup() {
+    const newGroup = $checkboxes.filter((c) => c.checked).map((c) => c.id);
+    if (newGroup.join() !== group.join()) group = newGroup;
+  }
+
   function doChange(e) {
-    if (Array.isArray(group)) {
-      if (checked) group = [...group, value];
-      else group = group.filter((d) => d != value);
+    if (Array.isArray(group) && Array.isArray($checkboxes)) {
+      updateGroup();
     }
-    dispatch("change", e);
+    dispatch("change", { id, checked, group, e });
   }
+
+  onMount(() => {
+    if (Array.isArray(group) && Array.isArray($checkboxes)) {
+      const root = findAncestor(el, "ons-checkboxes__items");
+      $checkboxes = [...root.getElementsByTagName("input")];
+      updateGroup();
+    }
+  });
+
+  onDestroy(() => {
+    if (Array.isArray(group) && Array.isArray($checkboxes)) {
+      $checkboxes = $checkboxes.filter((c) => c.id !== id);
+      updateGroup();
+    }
+  });
 </script>
 
 <span
@@ -79,6 +107,7 @@
       disabled="{disabled}"
       aria-disabled="{disabled}"
       on:change="{doChange}"
+      bind:this="{el}"
     />
     <label
       class="ons-checkbox__label"

package/dist/inputs/Checkboxes/Checkboxes.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
   import Checkbox from "../Checkbox/Checkbox.svelte";
 
   /**
@@ -18,6 +20,9 @@
    * @type {array}
    */
   export let value = [];
+
+  const checkboxes = writable([]);
+  setContext("checkboxes", checkboxes);
 </script>
 
 {#if label}
@@ -26,7 +31,7 @@
 <div class="ons-checkboxes__items">
   <slot />
   {#if items}
-    {#each items as item, i}
+    {#each items as item}
       <Checkbox {...item} bind:group="{value}" compact="{compact}" on:change />
     {/each}
   {/if}

package/dist/layout/NavSections/NavSection.svelte

@@ -37,7 +37,7 @@
 
   onMount(() => {
     if (sections && observer) {
-      $sections = [...$sections, { title, id, subsection }];
+      $sections = [...section.parentElement.childNodes].filter((c) => c.tagName === "SECTION");
       $observer.observe(section);
     }
   });
@@ -50,7 +50,14 @@
   });
 </script>
 
-<section id="{id}" class="{cls}" aria-label="{title}" bind:this="{section}">
+<section
+  id="{id}"
+  title="{title}"
+  data-subsection="{subsection}"
+  class="{cls}"
+  aria-label="{title}"
+  bind:this="{section}"
+>
   {#if title}
     {#if subsection}
       <h3 class="subsection-title ons-u-fs-m" class:ons-u-vh="{hideTitle}">{title}</h3>

package/dist/layout/NavSections/NavSections.svelte

@@ -114,7 +114,10 @@
             {/if}
             <ol class="ons-list ons-u-mb-m ons-list--dashed">
               {#each $sections as section}
-                <li class="ons-list__item" class:ons-list__item-indented="{section.subsection}">
+                <li
+                  class="ons-list__item"
+                  class:ons-list__item-indented="{section.dataset.subsection === 'true'}"
+                >
                   <a
                     href="#{section.id}"
                     class="ons-list__link"

package/dist/layout/Tabs/Tab.svelte

@@ -25,20 +25,22 @@
 
   onMount(() => {
     if (sections) {
-      if (!$selected) $selected = id;
-      $sections = [...$sections, { title, id, el }];
+      $sections = [...el.parentElement.childNodes].filter((c) => c.tagName === "SECTION");
+      if ($selected === null || $selected === undefined) $selected = $sections[0]?.id;
     }
   });
 
   onDestroy(() => {
     if (sections) {
       $sections = $sections.filter((s) => s.id !== id);
+      if ($selected === id) $selected = $sections.length > 0 ? $sections[0].id : null;
     }
   });
 </script>
 
 <section
   id="{id}"
+  title="{title}"
   class="ons-tabs__panel"
   bind:this="{el}"
   class:ons-tabs__panel--hidden="{$selected !== id}"

package/dist/layout/Tabs/Tabs.svelte

@@ -29,8 +29,7 @@
     $_selected = id;
     [...$sections].forEach(
       (s) =>
-        (s.el.className =
-          s.id === id ? "ons-tabs__panel" : "ons-tabs__panel ons-tabs__panel--hidden")
+        (s.className = s.id === id ? "ons-tabs__panel" : "ons-tabs__panel ons-tabs__panel--hidden")
     );
     dispatch("change", { id });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.1.61",
+  "version": "0.1.63",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",