@kws3/ui 1.1.0 → 1.2.2

package/forms/select/SearchableSelect.svelte

@@ -0,0 +1,149 @@
+<!--
+  @component
+
+
+  @param {object} [value=null] - Value of the Input
+
+This property can be bound to, to fetch the current value, Default: `null`
+  @param {string} [placeholder="Please select..."] - Placeholder text for the input, Default: `"Please select..."`
+  @param {array} [options=[]] - Array of strings, or objects.
+Used to populate the list of options in the dropdown, Default: `[]`
+  @param {string} [search_key="name"] - If `options` is an array of objects,
+this property of each object will be searched, Default: `"name"`
+  @param {string} [value_key="id"] - If `options` is an array of objects,
+this property of each object will be returned as the value, Default: `"id"`
+  @param {''|'small'|'medium'|'large'} [size=""] - Size of the input, Default: `""`
+  @param {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the input, Default: `""`
+  @param {string} [style=""] - Inline CSS for input container, Default: `""`
+  @param {boolean} [readonly=false] - Marks component as read-only, Default: `false`
+  @param {boolean} [disabled=false] - Disables the component, Default: `false`
+  @param {string} [selected_icon="check"] - Icon used to mark selected items in dropdown list, Default: `"check"`
+  @param {string} [no_options_msg="No matching options"] - Message to display when no matching options are found, Default: `"No matching options"`
+  @param {string} [remove_all_tip="Clear Selection"] - Tooltip text for the Clear selection button, Default: `"Clear Selection"`
+  @param {string} [class=""] - CSS classes for input container, Default: `""`
+
+  ### Events
+  - `change` - Triggered when the value changes
+  - `blur` - Triggered when the input loses focus
+
+  ### Slots
+  - `<slot name="default" {search_key} {option} />` - Slot containing text for each selectable item
+
+Default value: `<span>{option[search_key] || option}</span>`
+
+-->
+<MultiSelect
+  bind:value
+  class={klass}
+  max={1}
+  {placeholder}
+  {options}
+  {search_key}
+  {value_key}
+  {size}
+  {color}
+  {style}
+  {readonly}
+  {disabled}
+  {selected_icon}
+  {remove_all_tip}
+  {no_options_msg}
+  on:change={change}
+  on:blur={blur}
+  let:option
+  let:search_key>
+  <!--
+    Slot containing text for each selectable item
+
+    Default value: `<span>{option[search_key] || option}</span>`
+  --><slot
+    {search_key}
+    {option}>{option[search_key] || option}</slot>
+</MultiSelect>
+
+<script>
+  import { createEventDispatcher } from "svelte";
+  import { MultiSelect } from "@kws3/ui";
+
+  const fire = createEventDispatcher();
+
+  /**
+   * Value of the Input
+   *
+   * This property can be bound to, to fetch the current value
+   */
+  export let value = null;
+  /**
+   * Placeholder text for the input
+   */
+  export let placeholder = "Please select...";
+  /**
+   * Array of strings, or objects.
+   * Used to populate the list of options in the dropdown
+   */
+  export let options = [];
+
+  /**
+   * If `options` is an array of objects,
+   * this property of each object will be searched
+   */
+  export let search_key = "name";
+  /**
+   * If `options` is an array of objects,
+   * this property of each object will be returned as the value
+   */
+  export let value_key = "id";
+  /**
+   * Size of the input
+   *  @type {''|'small'|'medium'|'large'}
+   */
+  export let size = "";
+  /**
+   * Color of the input
+   * @type {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'}
+   */
+  export let color = "";
+  /**
+   * Inline CSS for input container
+   */
+  export let style = "";
+  /**
+   * Marks component as read-only
+   */
+  export let readonly = false;
+  /**
+   * Disables the component
+   */
+  export let disabled = false;
+  /**
+   * Icon used to mark selected items in dropdown list
+   */
+  export let selected_icon = "check";
+  /**
+   * Message to display when no matching options are found
+   */
+  export let no_options_msg = "No matching options";
+  /**
+   * Tooltip text for the Clear selection button
+   */
+  export let remove_all_tip = "Clear Selection";
+
+  /**
+   * CSS classes for input container
+   */
+  let klass = "";
+  export { klass as class };
+
+  function change({ detail }) {
+    /**
+     * Triggered when the value changes
+     */
+    fire("change", detail);
+  }
+  function blur({ detail }) {
+    /**
+     * Triggered when the input loses focus
+     */
+    fire("blur", detail);
+  }
+</script>

package/helpers/ClipboardCopier.svelte

@@ -8,7 +8,7 @@
   @param {string} [copied_icon="check"] - Icon displayed on successful copy operation, Default: `"check"`
   @param {string} [copy=""] - Text to be copied into clipboard, Default: `""`
   @param {boolean} [copied=false] - Determines if the copy operation has taken place, Default: `false`
-  @param {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [copied_icon_color="success"] - Colour of the Icon after a succesful copy operation
+  @param {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [copied_icon_color="success"] - Colour of the `copied_icon` after a succesful copy operation
 
 If `''` is selected, Icon will not change colour after copying, Default: `"success"`
   @param {string} [class=""] - CSS classes for the whole component, Default: `""`
@@ -28,7 +28,7 @@ If `''` is selected, Icon will not change colour after copying, Default: `"succe
     icon={copied ? copied_icon : icon}
     size="small"
     color={copied ? copied_icon_color : ""}
-    icon_class={copied ? "is-bouncing-once" : ""} />
+    class={copied ? "is-bouncing-once" : ""} />
 </span>
 
 <style lang="scss">

package/helpers/FloatingUI/Floatie.svelte

@@ -0,0 +1,141 @@
+<!--
+  @component
+
+  @param {string} [title=""] - Title for display, Default: `""`
+  @param {string} [message=""] - Message for display, Default: `""`
+  @param {number} [duration=3000] - Duration for display message, Default: `3000`
+  @param {'warning'|'info'|'danger'|'primary'|'success'} [color="primary"] - Message background color, Default: `"primary"`
+  @param {'top'|'bottom'|'top-left'|'top-right'|'bottom-left'|'bottom-right'} [position=""] - Position of the message, Default: `""`
+  @param {boolean} [dismissable=true] - Dismissable message, Default: `true`
+  @param {boolean} [persistent=false] - Persistent message, Default: `false`
+  @param {string} [context=""] - Context value, Default: `""`
+  @param {object} [component=null] - Custom component, Default: `null`
+  @param {function} [beforeClose(props)] - Callback function call before close event
+  @param {function} [afterClose(props)] - Callback function call after close event
+-->
+
+{#if variant == "snackbar"}
+  <div class="snackbar is-{color} {light ? 'is-light' : ''}">
+    <div class="text">{message}</div>
+    <div class="action">
+      {#each buttonsToRender as { text, color: text_color, click }}
+        <button
+          class="button is-{color} has-text-{text_color}"
+          on:click={click}
+          on:click={destroy}>{text}</button>
+      {/each}
+    </div>
+    {#if !persistent}
+      <div class="floatie-progress" style="animation-duration:{duration}ms" />
+    {/if}
+  </div>
+{:else if variant == "toast"}
+  <div class="toast is-{color} {light ? 'is-light' : ''}">
+    {message}
+  </div>
+{:else}
+  <div class="notification is-{color} {light ? 'is-light' : ''}">
+    {#if component}
+      <svelte:component this={component} {...$$props} on:destroy={destroy} />
+    {:else}
+      {#if dismissable}
+        <button class="delete" on:click={destroy} />
+      {/if}
+      {#if title}
+        <h4 class="title is-5 is-marginless">{title}</h4>
+      {/if}
+
+      <p>{@html message}</p>
+
+      {#if !persistent}
+        <div class="floatie-progress" style="animation-duration:{duration}ms" />
+      {/if}
+    {/if}
+  </div>
+{/if}
+
+<script>
+  //TODO: Icon support
+  import { onMount, onDestroy, createEventDispatcher } from "svelte";
+
+  const fire = createEventDispatcher();
+
+  /**
+   * Title/Heading of the notification
+   */
+  export let title = "",
+    /**
+     * Message in the notification
+     */
+    message = "",
+    /**
+     * variation of floating UI
+     * @type {'notification'|'snackbar'|'toast'}
+     */
+    variant = "notification",
+    /**
+     * Duration of the notification
+     */
+    duration = 3000,
+    /**
+     * Toast notification background color
+     * @type {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'}
+     */
+    color = "primary",
+    /**
+     * Inverted colors for notification box and contents
+     */
+    light = false,
+    /**
+     * Determines if notification is dismissable
+     */
+    dismissable = true,
+    /**
+     * A persistent notification without duration, stays till dismissed
+     */
+    persistent = false,
+    /**
+     * Context value
+     */
+    context = "",
+    /**
+     * Custom component
+     */
+    component = null,
+    /**
+     * Callback function call before close event
+     */
+    beforeClose = (props) => {},
+    /**
+     * Callback function call after close event
+     */
+    afterClose = (props) => {},
+    /**
+     * List of buttons to show in snackbar
+     */
+    buttons = ["Ok"];
+
+  let timeout;
+
+  $: buttonsToRender = (buttons || []).map((b) => {
+    let defaults = { text: "Ok", color: "", click: () => {} },
+      obj = b;
+    if (typeof b == "string") {
+      obj = { text: b };
+    }
+    return Object.assign({}, defaults, obj);
+  });
+
+  const destroy = () =>
+    Promise.resolve(beforeClose($$props))
+      .then(() => fire("destroy", $$props))
+      .then(() => afterClose($$props));
+
+  onMount(() => {
+    timeout = setTimeout(() => {
+      if (!persistent) destroy();
+    }, duration);
+  });
+
+  onDestroy(() => clearTimeout(timeout));
+</script>

package/helpers/FloatingUI/FloatingUIOutput.svelte

@@ -0,0 +1,34 @@
+{#each Object.keys($FloatiesStore) as position}
+  {#each Object.keys($FloatiesStore[position]) as variant}
+    <div class="kws-floatie-output is-{position} is-{variant}-holder">
+      {#each $FloatiesStore[position][variant] as item (item.id)}
+        <div
+          class="kws-floatie-item has-{variant} is-{item.position}"
+          id={item.id}
+          animate:flip={{ easing: sineOut }}
+          transition:fly={{
+            y: transitionDistance(item.position),
+            duration: transitionDuration,
+            easing: sineOut,
+          }}>
+          <Floatie {...item} on:destroy={destroy} />
+        </div>
+      {/each}
+    </div>
+  {/each}
+{/each}
+
+<script>
+  import { fly } from "svelte/transition";
+  import { sineOut } from "svelte/easing";
+  import { flip } from "svelte/animate";
+  import { FloatiesStore } from "./index";
+  import { hasTransitions } from "../../settings";
+  import Floatie from "./Floatie.svelte";
+
+  const destroy = ({ detail }) => FloatiesStore.remove(detail);
+  const transitionDistance = (position) =>
+    position.indexOf("top") === 0 ? -50 : 50;
+
+  $: transitionDuration = $hasTransitions ? 150 : 0;
+</script>

package/helpers/FloatingUI/index.js

@@ -0,0 +1,156 @@
+import FloatingUIOutput from "./FloatingUIOutput.svelte";
+import { writable, get } from "svelte/store";
+import {
+  defaultToastPlacement,
+  defaultSnackbarPlacement,
+  defaultNotificationPlacement,
+} from "../../settings";
+
+const DEFAULT_POSITIONS = {
+  notification: get(defaultNotificationPlacement),
+  snackbar: get(defaultSnackbarPlacement),
+  toast: get(defaultToastPlacement),
+};
+
+let OUTPUT_IS_ON_PAGE = false;
+
+function ensureOutputIsOnPage() {
+  if (OUTPUT_IS_ON_PAGE) {
+    return;
+  }
+
+  OUTPUT_IS_ON_PAGE = new FloatingUIOutput({
+    target: document.body,
+  });
+}
+
+const getPosition = (props) => {
+  if (props.position) {
+    return props.position.indexOf("top") === 0 ? "top" : "bottom";
+  }
+  if (DEFAULT_POSITIONS[props.variant]) {
+    return DEFAULT_POSITIONS[props.variant].indexOf("top") === 0
+      ? "top"
+      : "bottom";
+  }
+  return "top";
+};
+
+export const FloatiesStore = (() => {
+  const { update, subscribe } = writable({
+    top: {
+      notification: [],
+      snackbar: [],
+      toast: [],
+    },
+    bottom: {
+      notification: [],
+      snackbar: [],
+      toast: [],
+    },
+  });
+
+  const create = (newItem) => {
+    update((items) => {
+      ensureOutputIsOnPage();
+
+      //verify we have a correct variant
+      if (!newItem.variant) {
+        newItem.variant = "notification";
+      }
+      if (!["notification", "snackbar", "toast"].includes(newItem.variant)) {
+        newItem.variant = "notification";
+      }
+
+      if (!newItem.position || newItem.position == "") {
+        newItem.position = DEFAULT_POSITIONS[newItem.variant];
+      }
+
+      if (!newItem.id) {
+        newItem.id = `__kws_${newItem.variant}_${new Date().getTime()}`;
+      }
+
+      items[getPosition(newItem)][newItem.variant].push(newItem);
+
+      return items;
+    });
+
+    return {
+      props: newItem,
+      destroy: () => remove(newItem),
+    };
+  };
+
+  const remove = (props) => {
+    update((items) => {
+      let _position = getPosition(props);
+      let _variant = props.variant;
+      let _items = items[_position][_variant];
+
+      items[_position][_variant] = _items.slice().filter((el) => {
+        return el && el.id && el.id != props.id;
+      });
+
+      return items;
+    });
+  };
+
+  return { create, remove, subscribe };
+})();
+
+const buildInitialiser = (defaultOpts, mandatoryOpts) => {
+  return (opts) => {
+    let _opts = Object.assign({}, defaultOpts, opts, mandatoryOpts);
+    return FloatiesStore.create(_opts);
+  };
+};
+
+export const Notifications = {
+  create: buildInitialiser(
+    {
+      //default Options
+      position: DEFAULT_POSITIONS["notification"],
+      dismissable: true,
+      persistent: false,
+    },
+    {
+      //mandatory options
+      variant: "notification",
+    }
+  ),
+  remove: FloatiesStore.remove,
+};
+
+export const Toasts = {
+  create: buildInitialiser(
+    {
+      //default Options
+      position: DEFAULT_POSITIONS["toast"],
+    },
+    {
+      //mandatory options
+      variant: "toast",
+      dismissable: true,
+      persistent: false,
+      title: "",
+    }
+  ),
+  remove: FloatiesStore.remove,
+};
+
+export const Snackbars = {
+  create: buildInitialiser(
+    {
+      //default Options
+      position: DEFAULT_POSITIONS["snackbar"],
+      dismissable: true,
+      persistent: false,
+    },
+    {
+      //mandatory options
+      variant: "snackbar",
+      title: "",
+    }
+  ),
+  remove: FloatiesStore.remove,
+};

package/helpers/Icon.svelte

@@ -5,7 +5,7 @@
   @param {''|'small'|'medium'|'large'} [size=""] - Size of the Icon, Default: `""`
   @param {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the Icon, Default: `""`
   @param {string} [icon=""] - The name of the icon that is to be displayed, from the relevant icon family, Default: `""`
-  @param {''|'fa'|'lar'|'las'|'gg'|'unicons'} [family=""] - Icon family, defaults to global family set via `setDefaultIconType()`
+  @param {''|'fa'|'lar'|'las'|'gg'|'unicons'} [family=""] - Icon family, can be modified globally in framework settings
 
 Ultimately defaults to `fa`, if family is not set anywhere, Default: `""`
   @param {string} [style=""] - Inline CSS for icon container, Default: `""`
@@ -67,7 +67,7 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `""`
      */
     icon = "",
     /**
-     * Icon family, defaults to global family set via `setDefaultIconType()`
+     * Icon family, can be modified globally in framework settings
      *
      * Ultimately defaults to `fa`, if family is not set anywhere
      * @type {''|'fa'|'lar'|'las'|'gg'|'unicons'}

package/index.js

@@ -12,6 +12,12 @@ export { default as Notification } from "./helpers/Notification.svelte";
 export { default as Loader } from "./helpers/Loader.svelte";
 export { default as ActionSheet } from "./helpers/ActionSheet.svelte";
 export { alert, confirm, prompt, default as Dialog } from "./helpers/Dialog";
+export {
+  Notifications,
+  Toasts,
+  Snackbars,
+  FloatiesStore,
+} from "./helpers/FloatingUI";
 
 export { default as ConfirmButton } from "./buttons/ConfirmButton.svelte";
 export { default as DeleteButton } from "./buttons/DeleteButton.svelte";
@@ -31,7 +37,8 @@ export { default as Nl2br } from "./helpers/Nl2br.svelte";
 export { default as Transition } from "./transitions/Transition.svelte";
 export { default as SlidingPane } from "./sliding-panes/SlidingPane.svelte";
 export { default as SlidingPaneSet } from "./sliding-panes/SlidingPaneSet.svelte";
-export { default as SearchableSelect } from "./forms/SearchableSelect.svelte";
+export { default as SearchableSelect } from "./forms/select/SearchableSelect.svelte";
+export { default as MultiSelect } from "./forms/select/MultiSelect.svelte";
 export { default as MaskedInput } from "./forms/MaskedInput.svelte";
 
 export { default as Colorpicker } from "./forms/colorpicker/Colorpicker.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.1.0",
+  "version": "1.2.2",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -27,5 +27,5 @@
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "bf983cded2a2272cacedfc58dde2576a7d6ef612"
+  "gitHead": "1f87ee1cde62bfc3f4fd94e41c3141dd9eec688c"
 }

package/settings.js

@@ -1,20 +1,32 @@
 import { writable } from "svelte/store";
 
 const defaultIconFamily = writable("fa");
-const defaultToastPlacement = writable("top-right");
+const defaultToastPlacement = writable("bottom");
+const defaultSnackbarPlacement = writable("bottom-right");
+const defaultNotificationPlacement = writable("top-right");
 const hasTransitions = writable(true);
 
 const SETTINGS = {
   defaultIconFamily,
   defaultToastPlacement,
+  defaultSnackbarPlacement,
+  defaultNotificationPlacement,
   hasTransitions,
 };
 
-export { defaultIconFamily, defaultToastPlacement, hasTransitions };
+export {
+  defaultIconFamily,
+  defaultToastPlacement,
+  defaultSnackbarPlacement,
+  defaultNotificationPlacement,
+  hasTransitions,
+};
 
 /**
  * - `defaultIconFamily`: `"fa"` - default icon family
- * - `defaultToastPlacement`: `"top-right"` - default placement of toast notifications
+ * - `defaultToastPlacement`: `"bottom"` - default placement of toast notifications
+ * - `defaultSnackbarPlacement`: `"bottom-right"` - default placement of snackbar notifications
+ * - `defaultNotificationPlacement`: `"top-right"` - default placement of floating notifications
  * - `hasTransitions`: `true` - Transitions are applied
  *
  * @param {*} object containing all settings