@onsvisual/svelte-components 0.1.33 → 0.1.35

package/dist/@types/inputs/Select/Select.svelte.d.ts

@@ -18,6 +18,7 @@ export default class Select extends SvelteComponentTyped<{
     idKey?: string;
     labelKey?: string;
     groupKey?: string;
+    clusterByGroup?: boolean;
     colors?: any[];
     itemFilter?: Function;
     loadOptions?: Function;
@@ -54,6 +55,7 @@ declare const __propDef: {
         idKey?: string;
         labelKey?: string;
         groupKey?: string | null;
+        clusterByGroup?: boolean;
         colors?: any[];
         itemFilter?: Function;
         loadOptions?: Function;

package/dist/@types/layout/NavSections/NavSection.svelte.d.ts

@@ -5,6 +5,7 @@ export default class NavSection extends SvelteComponentTyped<{
     id?: string;
     title?: string;
     hideTitle?: boolean;
+    subsection?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -20,6 +21,7 @@ declare const __propDef: {
         id?: string;
         title?: string;
         hideTitle?: boolean;
+        subsection?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/inputs/Select/Select.svelte

@@ -78,6 +78,11 @@
    * @type {string|null}
    */
   export let groupKey = null;
+  /**
+   * Cluster results by group. If {false}, the group name will be the suffix
+   * @type {boolean}
+   */
+  export let clusterByGroup = false;
   /**
    * Defines the width of the input in characters
    * @type {number}
@@ -153,6 +158,7 @@
       items="{options}"
       itemId="{idKey}"
       label="{labelKey}"
+      groupBy="{groupKey && clusterByGroup ? (item) => item[groupKey] : null}"
       showChevron="{!value}"
       multiple="{multiple}"
       clearable="{clearable}"
@@ -167,7 +173,7 @@
           new RegExp(`\\b${filterText}`, "i"),
           (str) => `<b>${str}</b>`
         )}
-        {#if groupKey}<span class="item-group">{item[groupKey]}</span>{/if}
+        {#if groupKey && !clusterByGroup}<span class="item-group">{item[groupKey]}</span>{/if}
       </div>
       <div slot="empty">{@html noOptionsMessage}</div>
       <div slot="chevron-icon" style:transform="{mode === "search" ? "translateY(2px)" : null}">
@@ -226,6 +232,7 @@
     --multi-item-height: 30px;
     --value-container-padding: 3px 0;
     --multi-select-padding: 0 0 0 6px;
+    --group-item-padding-left: 24px;
   }
   :global(.ons-themed-select > .svelte-select:focus-within) {
     outline: 3px solid #fbc900;

package/dist/layout/NavSections/NavSection.svelte

@@ -18,6 +18,11 @@
    * @type {boolean}
    */
   export let hideTitle = false;
+  /**
+   * Treat a section as sub-section. It will have an h3 title, and will be indented in the contents table
+   * @type {boolean}
+   */
+  export let subsection = false;
 
   const sections = getContext("sections");
   const observer = getContext("observer");
@@ -27,7 +32,7 @@
 
   onMount(() => {
     if (sections && observer) {
-      $sections = [...$sections, { title, id }];
+      $sections = [...$sections, { title, id, subsection }];
       $observer.observe(section);
     }
   });
@@ -42,7 +47,13 @@
 
 <section id="{id}" aria-label="{title}" bind:this="{section}">
   {#if title}
-    <h2 class="ons-u-mt-xl ons-u-pb-no ons-u-pt-no" class:ons-u-vh="{hideTitle}">{title}</h2>
+    {#if subsection}
+      <h3 class="subsection-title ons-u-fs-m" class:ons-u-vh="{hideTitle}">{title}</h3>
+    {:else}
+      <h2 class="section-title ons-u-mt-l ons-u-pb-no ons-u-pt-no" class:ons-u-vh="{hideTitle}">
+        {title}
+      </h2>
+    {/if}
   {/if}
   <slot />
   {#if tocId}

package/dist/layout/NavSections/NavSections.svelte

@@ -114,7 +114,7 @@
             {/if}
             <ol class="ons-list ons-u-mb-m ons-list--dashed">
               {#each $sections as section}
-                <li class="ons-list__item">
+                <li class="ons-list__item" class:ons-list__item-indented="{section.subsection}">
                   <a
                     href="#{section.id}"
                     class="ons-list__link"
@@ -130,7 +130,7 @@
         </nav>
       </aside>
     </div>
-    <div class="ons-grid__col ons-col-8@m ons-u-pl-no">
+    <div class="ons-nav-sections ons-grid__col ons-col-8@m ons-u-pl-no">
       <slot name="before" />
       {#if $observer}
         <slot />
@@ -151,4 +151,10 @@
       max-width: calc(100% - 280px);
       width: calc(100% - 280px);
     }
+  }
+  .ons-list__item-indented {
+    margin-left: 50px !important;
+  }
+  .ons-nav-sections :global(section:first-of-type h2) {
+    margin-top: 27px !important;
   }</style>

package/package.json

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