fluent-svelte-extra 1.2.7 → 1.2.8

package/AutoSuggestBox/AutoSuggestBox.svelte

@@ -6,10 +6,12 @@ import ListItem from "../ListItem/ListItem.svelte";
 /** The input's current value. */
 export let value = "";
 export let maxSuggestions = 99999;
-/** Array of strings that will be suggested to the user as options. */
+/** Array of strings will be suggested to the user as options. */
 export let items = [];
 /** The current visibility state of the suggestion flyout. */
 export let open = false;
+/** Disables or enables AutoSuggest mode */
+export let autoSuggest = true;
 /** Bindable index of the currently selected item. */
 export let selection = 0;
 /** Bindable array of currently suggested items. */
@@ -32,12 +34,46 @@ let focused = false;
 let typedValue = "";
 const dispatch = createEventDispatcher();
 const flyoutId = uid("fds-auto-suggest-flyout-");
+/** Pushes the specified item to the items array */
+export function addItem(item) {
+    items.push(item);
+}
+/** Removes the specified item from the items array */
+export function removeItem(item) {
+    items.splice(items.indexOf(item), 1);
+}
+/** Removes all of the items from the items array */
+export function removeAllItems() {
+    items = [];
+}
+/* Sets the items array to the specified array */
+export function setItems(argItems) {
+    items = argItems;
+}
+/** Pushes the specified item to the matches array */
+export function addMatch(match) {
+    matches.push(match);
+}
+/** Removes the specified item from the matches array */
+export function removeMatch(match) {
+    matches.splice(matches.indexOf(match), 1);
+}
+/** Removes all of the items from the matches array */
+export function removeAllMatches() {
+    matches = [];
+}
+/* Sets the matches array to the specified array */
+export function setMatches(argMatches) {
+    matches = argMatches;
+}
 $: {
-    const filter = items.filter(item => item.toLowerCase().includes(typedValue.toLowerCase()));
-    if (filter.length > maxSuggestions) {
-        filter.length = maxSuggestions; //slice it
+    if (autoSuggest) {
+        const filter = items.filter(item => item.toLowerCase().includes(typedValue.toLowerCase()));
+        if (filter.length > maxSuggestions) {
+            filter.length = maxSuggestions; //slice it
+        }
+        matches = filter;
     }
-    matches = filter;
 }
 $: selection, dispatchSelect();
 function dispatchSelect() {

package/AutoSuggestBox/AutoSuggestBox.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         maxSuggestions?: number;
         items?: string[];
         open?: boolean;
+        autoSuggest?: boolean;
         selection?: number;
         matches?: string[];
         class?: string;
@@ -15,6 +16,14 @@ declare const __propDef: {
         clearButtonElement?: HTMLButtonElement;
         searchButtonElement?: HTMLButtonElement;
         flyoutElement?: HTMLUListElement;
+        addItem?: (item: string) => void;
+        removeItem?: (item: string) => void;
+        removeAllItems?: () => void;
+        setItems?: (argItems: string[]) => void;
+        addMatch?: (match: string) => void;
+        removeMatch?: (match: string) => void;
+        removeAllMatches?: () => void;
+        setMatches?: (argMatches: string[]) => void;
     };
     events: {
         search: CustomEvent<any>;
@@ -59,5 +68,13 @@ export declare type AutoSuggestBoxProps = typeof __propDef.props;
 export declare type AutoSuggestBoxEvents = typeof __propDef.events;
 export declare type AutoSuggestBoxSlots = typeof __propDef.slots;
 export default class AutoSuggestBox extends SvelteComponentTyped<AutoSuggestBoxProps, AutoSuggestBoxEvents, AutoSuggestBoxSlots> {
+    get addItem(): (item: string) => void;
+    get removeItem(): (item: string) => void;
+    get removeAllItems(): () => void;
+    get setItems(): (argItems: string[]) => void;
+    get addMatch(): (match: string) => void;
+    get removeMatch(): (match: string) => void;
+    get removeAllMatches(): () => void;
+    get setMatches(): (argMatches: string[]) => void;
 }
 export {};

package/ExpandMenu/ExpandMenu.svelte

@@ -43,9 +43,9 @@ onMount(() => {
 </script>
 
 <div class="glob">
- <div class="expand-menu" bind:this={root}  use:forwardEvents>
+ <div role="list" class="expand-menu" bind:this={root}  use:forwardEvents>
   <slot></slot>
  </div>
 </div>
 
-<style>.expand-menu{background-color:var(--fds-solid-background-quarternary);display:flex;flex-direction:column;overflow:hidden;transition:width var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing)}.glob :global(.expand-menu-closed){width:48px!important}.glob :global(.expand-menu-closed>li[role=listitem]){padding-inline:unset!important}.glob :global(.expand-menu-icon){-webkit-margin-end:unset!important;left:11px;margin-inline-end:unset!important;min-height:16px;min-width:16px;position:absolute}.glob :global(.expand-menu-text){left:45px;position:absolute;white-space:nowrap!important}:global(.fds-copy-calculation){display:block;left:-1000000000px;opacity:0;position:absolute}</style>
+<style>.expand-menu{background-color:var(--fds-solid-background-quarternary);display:flex;flex-direction:column;overflow:hidden;transition:width var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing)}.glob :global(.expand-menu-closed){width:48px!important}.glob :global(.expand-menu-closed>li[role=listitem]){padding-inline:unset!important}.glob :global(.expand-menu-icon){-webkit-margin-end:unset!important;left:11px;margin-inline-end:unset!important;min-height:16px;min-width:16px;position:absolute}.glob :global(.expand-menu-text){left:45px;position:absolute;white-space:nowrap!important}:global(.fds-copy-calculation){display:block;left:-1000000000px;opacity:0;position:absolute}</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluent-svelte-extra",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "A faithful implementation of Microsoft's Fluent Design System in Svelte.",
   "homepage": "https://github.com/OpenAnime/fluent-svelte-extra",
   "license": "MIT",