@onsvisual/svelte-components 0.0.34 → 0.0.36

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

@@ -13,6 +13,7 @@ export default class Select extends SvelteComponentTyped<{
     multiple?: boolean;
     maxSelected?: number;
     clearable?: boolean;
+    autoClear?: boolean;
     idKey?: string;
     labelKey?: string;
     colors?: any[];
@@ -21,10 +22,10 @@ export default class Select extends SvelteComponentTyped<{
     floatingConfig?: any;
 }, {
     input: CustomEvent<any>;
-    change: CustomEvent<any>;
     focus: CustomEvent<any>;
     blur: CustomEvent<any>;
     clear: CustomEvent<any>;
+    change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -46,6 +47,7 @@ declare const __propDef: {
         multiple?: boolean;
         maxSelected?: number;
         clearable?: boolean;
+        autoClear?: boolean;
         idKey?: string;
         labelKey?: string;
         colors?: any[];
@@ -55,10 +57,10 @@ declare const __propDef: {
     };
     events: {
         input: CustomEvent<any>;
-        change: CustomEvent<any>;
         focus: CustomEvent<any>;
         blur: CustomEvent<any>;
         clear: CustomEvent<any>;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/@types/js/utils.d.ts

@@ -8,3 +8,4 @@ export function formatDate(str: any, locale?: string, opts?: {
 export function commas(num: any): string;
 export function ascending(a: any, b: any): number;
 export function descending(a: any, b: any): number;
+export function sleep(ms?: number): Promise<any>;

package/dist/@types/layout/Titleblock/Titleblock.svelte.d.ts

@@ -13,6 +13,7 @@ export default class Titleblock extends SvelteComponentTyped<{
     [evt: string]: CustomEvent<any>;
 }, {
     before: {};
+    default: {};
     brand: {};
     after: {};
 }> {
@@ -36,6 +37,7 @@ declare const __propDef: {
     };
     slots: {
         before: {};
+        default: {};
         brand: {};
         after: {};
     };

package/dist/inputs/Select/Select.svelte

@@ -1,5 +1,7 @@
 <script>
+  import { createEventDispatcher } from "svelte";
   import SelectInner from "svelte-select";
+  import { sleep } from "../../js/utils";
 
   /**
    * Unique id for the element
@@ -26,6 +28,11 @@
    * @type {boolean}
    */
   export let clearable = true;
+  /**
+   * Clear value on selection (default for "search" mode)
+   * @type {boolean}
+   */
+  export let autoClear = mode === "search";
   /**
    * A label to describe the element (expected for accessibility)
    * @type {string}
@@ -110,6 +117,16 @@
       : "No options available";
 
   let filterText = "";
+
+  const dispatch = createEventDispatcher();
+
+  async function handleChange(e) {
+    dispatch("change", e.detail);
+    if (autoClear) {
+      await sleep(100);
+      value = null;
+    }
+  }
 </script>
 
 <div class="ons-field" style="{style}">
@@ -131,8 +148,8 @@
       showChevron="{!value}"
       multiple="{multiple}"
       clearable="{clearable}"
+      on:change="{handleChange}"
       on:input
-      on:change
       on:focus
       on:blur
       on:clear

package/dist/js/utils.js

@@ -44,3 +44,5 @@ export const ascending = (a, b) =>
 
 export const descending = (a, b) =>
   a == null || b == null ? NaN : b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;
+
+export const sleep = (ms = 1000) => new Promise((resolve) => setTimeout(resolve, ms));

package/dist/layout/Titleblock/Titleblock.svelte

@@ -67,6 +67,7 @@
         </div>
       {/if}
     </div>
+    <slot />
     <slot name="brand" />
     {#if censusLogo}
       <div class="ons-grid ons-u-mb-m">

package/package.json

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