@kws3/ui 2.0.5 → 2.1.0

package/canvas/PenControls.svelte

@@ -0,0 +1,234 @@
+<!--
+  @component
+
+
+  @param {any} [EXPANDED_BUTTON=undefined] - EXPANDED_BUTTON property, Default: `undefined`
+  @param {string} [canvas_controls_styles=""] - Inline CSS for the control, Default: `""`
+  @param {boolean} [disabled=false] - Determines whether canvas is disabled or not, Default: `false`
+  @param {boolean} [readonly=false] - Determines whether canvas is readonly or not, Default: `false`
+  @param {object} [tools={}] - List of tools available, Default: `{}`
+  @param {array} [actions=[]] - List of actions toolbar, Default: `[]`
+  @param {string} [active_tool="Pen"] - Determines which tool is select, Default: `"Pen"`
+  @param {Extract<Positions, 'bottom'|'top'>} [toolbar_placement=bottom] - Determines where the action tools are placed, Default: `bottom`
+  @param {string} [default_color=""] - colorpicker's default color, Default: `""`
+  @param {Extract<Positions, 'start'|'center'|'end'>} [control_position=center] - Default position of controls, Default: `center`
+  @param {boolean} [can_undo=false] - Whether allowed to undo drawing changes or not, Default: `false`
+  @param {boolean} [can_redo=false] - Whether allowed to redo drawing changes or not, Default: `false`
+  @param {boolean} [show_tools=false] - Whether allowed to show tools or not, Default: `false`
+
+  ### Events
+  - `toggleExpand`
+  - `setTool`
+  - `undo`
+  - `redo`
+  - `reset`
+  - `changeColor`
+
+-->
+<div
+  class="kws-pen-controls is-placement-{toolbar_placement}"
+  style={canvas_controls_styles}>
+  {#if initialized && !readonly && !disabled}
+    <div
+      class="columns m-0 is-flex is-justify-content-{control_position}"
+      style="gap: 0.5rem;">
+      {#each actions as action}
+        {#if action === "controls"}
+          <div class="control">
+            <div class="dropdown is-{show_tools ? 'active' : ''} is-up">
+              <div class="dropdown-trigger">
+                <button
+                  type="button"
+                  use:tooltip
+                  class="button is-info is-small"
+                  data-tooltip="Tools"
+                  aria-controls="tools-dropdown"
+                  on:click={() => (show_tools = !show_tools)}>
+                  <Icon icon={toolMap[active_tool].icon} size="small" />
+                </button>
+              </div>
+
+              <div
+                class="dropdown-menu"
+                id="tools-dropdown"
+                role="menu"
+                style="min-width:auto;">
+                <div class="dropdown-content has-text-left">
+                  {#each Object.values(tools) as { name, icon }}
+                    <a
+                      href="/#"
+                      class="dropdown-item {toolMap[active_tool].icon === icon
+                        ? 'has-text-weight-bold'
+                        : ''}"
+                      on:click|preventDefault={() => {
+                        active_tool = name;
+                        fire("setTool", { tool: name });
+                      }}
+                      style="padding-right:1rem;">
+                      <Icon {icon} size="small" />
+                      <span>{name}</span>
+                    </a>
+                  {/each}
+                </div>
+              </div>
+            </div>
+          </div>
+        {:else if action === "undo"}
+          <div class="control">
+            <button
+              use:tooltip
+              type="button"
+              class="button is-small is-warning"
+              data-tooltip="Undo"
+              on:click={() => fire("undo")}
+              disabled={!can_undo}>
+              <Icon icon="undo" size="small" />
+            </button>
+          </div>
+        {:else if action === "redo"}
+          <div class="control">
+            <button
+              use:tooltip
+              type="button"
+              class="button is-small is-warning"
+              data-tooltip="Redo"
+              on:click={() => fire("redo")}
+              disabled={!can_redo}>
+              <Icon icon="repeat" size="small" />
+            </button>
+          </div>
+        {:else if action === "reset"}
+          <div class="control">
+            <button
+              use:tooltip
+              type="button"
+              class="button is-small is-danger"
+              data-tooltip="Reset"
+              on:click={() => fire("reset")}>
+              <Icon icon="refresh" size="small" />
+            </button>
+          </div>
+        {:else if action === "expand"}
+          <div class="control">
+            <button
+              use:tooltip
+              bind:this={EXPANDED_BUTTON}
+              type="button"
+              class="button is-small is-dark"
+              data-tooltip={expanded ? "Contract" : "Expand"}
+              on:click={() => expandContract()}>
+              <Icon icon={expanded ? "compress" : "expand"} size="small" />
+            </button>
+          </div>
+        {:else if action === "colorpicker"}
+          <div class="control">
+            <input
+              use:tooltip
+              type="color"
+              bind:value={color}
+              class="button is-small"
+              on:input={() => {
+                fire("changeColor", { color });
+              }}
+              data-tooltip="Pick Color" />
+          </div>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<script>
+  import { Icon, tooltip } from "@kws3/ui";
+  import { createEventDispatcher, onMount } from "svelte";
+
+  const fire = createEventDispatcher();
+  export let EXPANDED_BUTTON;
+
+  /**
+   * @typedef {import('@kws3/ui/types').Positions} Positions
+   */
+
+  /**
+   * Inline CSS for the control
+   */
+  export let canvas_controls_styles = "";
+  /**
+   * Determines whether canvas is disabled or not
+   */
+  export let disabled = false;
+  /**
+   * Determines whether canvas is readonly or not
+   */
+  export let readonly = false;
+  /**
+   * List of tools available
+   */
+  export let tools = {};
+  /**
+   * List of actions toolbar
+   */
+  export let actions = ["controls", "undo", "redo", "reset", "expand"];
+  /**
+   * Determines which tool is select
+   */
+  export let active_tool = "Pen";
+  /**
+   * Determines where the action tools are placed
+   * @type {Extract<Positions, 'bottom'|'top'>}
+   */
+
+  export let toolbar_placement = "bottom";
+
+  /**
+   * colorpicker's default color
+   */
+  export let default_color = "";
+  /**
+   * Default position of controls
+   * @type {Extract<Positions, 'start'|'center'|'end'>}
+   */
+  export let control_position = "center";
+
+  /**
+   * Whether allowed to undo drawing changes or not
+   */
+  export let can_undo = false;
+  /**
+   * Whether allowed to redo drawing changes or not
+   */
+  export let can_redo = false;
+  /**
+   * Whether allowed to show tools or not
+   */
+  export let show_tools = false;
+
+  let expanded = false;
+  let color = "";
+  let toolMap = {};
+  let initialized = false;
+
+  onMount(() => {
+    if (actions.includes("colorpicker") && default_color !== "") {
+      color = default_color;
+    }
+    setToolMap();
+    initialized = true;
+  });
+
+  function setToolMap() {
+    Object.values(tools).forEach((v) => {
+      toolMap[v.name] = v;
+    });
+  }
+
+  function expandContract() {
+    expanded = !expanded;
+    if (EXPANDED_BUTTON) {
+      EXPANDED_BUTTON._tippy.setContent(
+        EXPANDED_BUTTON.getAttribute("data-tooltip")
+      );
+    }
+    fire("toggleExpand");
+  }
+</script>

package/canvas/PenInput.svelte

@@ -0,0 +1,152 @@
+<!--
+  @component
+
+
+  @param {string} [width="250px"] - Canvas width, Default: `"250px"`
+  @param {string} [height="250px"] - Canvas height, Default: `"250px"`
+  @param {number} [pen_width=2] - pen width, Default: `2`
+  @param {number} [eraser_width=6] - Eraser width, Default: `6`
+  @param {string} [pen_color="#000000"] - line color, Default: `"#000000"`
+  @param {string} [background_image=""] - Background image for the canvas, Default: `""`
+  @param {boolean} [readonly=false] - Determines whether canvas is readonly or not, Default: `false`
+  @param {boolean} [disabled=false] - Determines whether canvas is disabled or not, Default: `false`
+  @param {string} [image=""] - The Data created in the canvas by the user, Default: `""`
+  @param {number} [initial_scale=1] - Initial transform scale for the canvas before expansion, Default: `1`
+  @param {number} [expand_scale=50] - Transform scale of the canvas on expansion, Default: `50`
+  @param {DrawingTools} [tools=undefined] - List of tools available for user to select from, Default: `undefined`
+  @param {DrawingPad} [DRAWING_PAD=undefined] - DRAWING_PAD property, Default: `undefined`
+
+-->
+<div
+  class="kws-pen-input {readonly || disabled ? 'is-readonly' : ''}"
+  style:width
+  style:height>
+  {#if disabled || readonly}
+    <img
+      alt="canvasimage"
+      src={image || emptyImage}
+      style:width
+      style:height
+      style:background-image="url({background_image})" />
+  {/if}
+  <canvas
+    bind:this={CANVAS}
+    style:width
+    style:height
+    style:background-image="url({background_image})"
+    style:background-color={readonly ? "transparent" : ""} />
+</div>
+
+<script>
+  import { DrawingPad } from "../internal";
+
+  import { onMount, createEventDispatcher } from "svelte";
+  /**
+   * @typedef {import('@kws3/ui/internal/DrawingPad').DrawingPad} DrawingPad
+   * @typedef {import('@kws3/ui/types').DrawingTools} DrawingTools
+   */
+
+  const fire = createEventDispatcher();
+
+  /**
+   * Canvas width
+   */
+  export let width = "250px";
+  /**
+   * Canvas height
+   */
+  export let height = "250px";
+  /**
+   *pen width
+   */
+  export let pen_width = 2;
+  /**
+   * Eraser width
+   */
+  export let eraser_width = 6;
+  /**
+   * line color
+   */
+  export let pen_color = "#000000";
+  /**
+    /**
+     * Background image for the canvas
+     */
+  export let background_image = "";
+  /**
+   * Determines whether canvas is readonly or not
+   */
+  export let readonly = false;
+  /**
+   * Determines whether canvas is disabled or not
+   */
+  export let disabled = false;
+  /**
+   * The Data created in the canvas by the user
+   */
+  export let image = "";
+  /**
+   * Initial transform scale for the canvas before expansion
+   */
+  export let initial_scale = 1;
+  /**
+   * Transform scale of the canvas on expansion
+   */
+  export let expand_scale = 50;
+  /**
+   * List of tools available for user to select from
+   * @type {DrawingTools}
+   */
+  export let tools = {};
+
+  /**
+   * @type {DrawingPad}
+   */
+  export let DRAWING_PAD;
+
+  /**
+   * @type {HTMLCanvasElement}
+   */
+  let CANVAS,
+    is_ready = false,
+    emptyImage =
+      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
+
+  $: readonly, setEvents();
+
+  onMount(() => {
+    CANVAS && CANVAS.setAttribute("width", width.replace("px", ""));
+    CANVAS && CANVAS.setAttribute("height", height.replace("px", ""));
+
+    DRAWING_PAD = new DrawingPad(
+      { CANVAS, fire },
+      {
+        penWidth: pen_width,
+        penColor: pen_color,
+        eraserWidth: eraser_width,
+        initialScale: initial_scale,
+        image: image || emptyImage,
+        readonly,
+        expand: expand_scale,
+        tools: tools,
+      }
+    );
+
+    DRAWING_PAD && DRAWING_PAD.init();
+    is_ready = true;
+
+    return () => {
+      CANVAS && DRAWING_PAD.removeEvent();
+    };
+  });
+
+  function setEvents() {
+    if (is_ready) {
+      if (readonly) {
+        DRAWING_PAD && DRAWING_PAD.removeEvent();
+      } else {
+        DRAWING_PAD && DRAWING_PAD.addEvent();
+      }
+    }
+  }
+</script>

package/charts/AreaChart.svelte

@@ -12,9 +12,9 @@ squeezed into small spaces, Default: `false`
   @param {object} [y_axis_options={}] - Y Axis options, see ApexCharts options for Y Axis, Default: `{}`
   @param {string} [width="100%"] - Chart width, supports CSS size strings, Default: `"100%"`
   @param {string} [height="auto"] - Chart height, supports CSS size strings, Default: `"auto"`
-  @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
+  @param {array} [colors=[]] - Chart colors, can be modified globally in framework settings
 
-Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `[]`
   @param {array} [captured_events=[]] - String array of event names that will be captured and fired as svelte events.
 This is to prevent unnecessary event subscriptions., Default: `[]`
   @param {string} [class=""] - CSS classes for container, Default: `""`

package/charts/BarChart.svelte

@@ -16,9 +16,9 @@ squeezed into small spaces, Default: `false`
   @param {object} [y_axis_options={}] - Y Axis options, see ApexCharts options for Y Axis, Default: `{}`
   @param {string} [width="100%"] - Chart width, supports CSS size strings, Default: `"100%"`
   @param {string} [height="auto"] - Chart height, supports CSS size strings, Default: `"auto"`
-  @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
+  @param {array} [colors=[]] - Chart colors, can be modified globally in framework settings
 
-Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `[]`
   @param {array} [captured_events=[]] - String array of event names that will be captured and fired as svelte events.
 This is to prevent unnecessary event subscriptions., Default: `[]`
   @param {string} [class=""] - CSS classes for container, Default: `""`

package/charts/Chart.svelte

@@ -16,21 +16,14 @@ This is to prevent unnecessary event subscriptions., Default: `[]`
 <div class="kws-chart {klass}" bind:this={canvas} />
 
 <script>
-  import { onMount, createEventDispatcher } from "svelte";
-  import ApexCharts from "apexcharts/dist/apexcharts.esm";
+  import { createEventDispatcher, onMount } from "svelte";
   import { merge } from "./utils";
 
-  //some functions such as brush charts
-  //require ApexCharts to be globally available
-  if (window) {
-    if (!window.ApexCharts) {
-      window.ApexCharts = ApexCharts;
-    }
-  }
-
   const fire = createEventDispatcher();
   let canvas, chart;
 
+  let ApexCharts;
+
   /**
    * Chart options
    */
@@ -91,8 +84,13 @@ This is to prevent unnecessary event subscriptions., Default: `[]`
     "brushScrolled",
   ];
 
-  onMount(() => {
+  onMount(async () => {
+    const module = await import("apexcharts/dist/apexcharts.esm");
+    ApexCharts = module.default;
+    window.ApexCharts = ApexCharts;
+
     init();
+
     return () => {
       chart && chart.destroy();
     };
@@ -120,6 +118,12 @@ This is to prevent unnecessary event subscriptions., Default: `[]`
   const init = () => {
     chart && chart.destroy();
 
+    if (typeof window !== "undefined") {
+      if (!window.ApexCharts) {
+        window.ApexCharts = ApexCharts;
+      }
+    }
+
     const newOptions = {
       chart: {
         type,
@@ -156,7 +160,7 @@ This is to prevent unnecessary event subscriptions., Default: `[]`
 
   const optionsChanged = () => {
     if (chart) {
-      if (typeof options.chart.events != "undefined") {
+      if (typeof options.chart.events !== "undefined") {
         options.chart.events = Events;
       }
       chart.updateOptions(options, true);

package/charts/DonutChart.svelte

@@ -10,9 +10,9 @@ These are charts with minimal UI and can be
 squeezed into small spaces, Default: `false`
   @param {string} [width="100%"] - Chart width, supports CSS size strings, Default: `"100%"`
   @param {string} [height="auto"] - Chart height, supports CSS size strings, Default: `"auto"`
-  @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
+  @param {array} [colors=[]] - Chart colors, can be modified globally in framework settings
 
-Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `[]`
   @param {array} [captured_events=[]] - String array of event names that will be captured and fired as svelte events.
 This is to prevent unnecessary event subscriptions., Default: `[]`
   @param {string} [class=""] - CSS classes for container, Default: `""`

package/charts/LineChart.svelte

@@ -12,9 +12,9 @@ squeezed into small spaces, Default: `false`
   @param {object} [y_axis_options={}] - Y Axis options, see ApexCharts options for Y Axis, Default: `{}`
   @param {string} [width="100%"] - Chart width, supports CSS size strings, Default: `"100%"`
   @param {string} [height="auto"] - Chart height, supports CSS size strings, Default: `"auto"`
-  @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
+  @param {array} [colors=[]] - Chart colors, can be modified globally in framework settings
 
-Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `[]`
   @param {array} [captured_events=[]] - String array of event names that will be captured and fired as svelte events.
 This is to prevent unnecessary event subscriptions., Default: `[]`
   @param {string} [class=""] - CSS classes for container, Default: `""`

package/charts/MixedChart.svelte

@@ -13,9 +13,9 @@ squeezed into small spaces, Default: `false`
   @param {object} [y_axis_options={}] - Y Axis options, see ApexCharts options for Y Axis, Default: `{}`
   @param {string} [width="100%"] - Chart width, supports CSS size strings, Default: `"100%"`
   @param {string} [height="auto"] - Chart height, supports CSS size strings, Default: `"auto"`
-  @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
+  @param {array} [colors=[]] - Chart colors, can be modified globally in framework settings
 
-Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `[]`
   @param {array} [captured_events=[]] - String array of event names that will be captured and fired as svelte events.
 This is to prevent unnecessary event subscriptions., Default: `[]`
   @param {string} [class=""] - CSS classes for container, Default: `""`

package/charts/PieChart.svelte

@@ -10,9 +10,9 @@ These are charts with minimal UI and can be
 squeezed into small spaces, Default: `false`
   @param {string} [width="100%"] - Chart width, supports CSS size strings, Default: `"100%"`
   @param {string} [height="auto"] - Chart height, supports CSS size strings, Default: `"auto"`
-  @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
+  @param {array} [colors=[]] - Chart colors, can be modified globally in framework settings
 
-Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `[]`
   @param {array} [captured_events=[]] - String array of event names that will be captured and fired as svelte events.
 This is to prevent unnecessary event subscriptions., Default: `[]`
   @param {string} [class=""] - CSS classes for container, Default: `""`

package/charts/RadialChart.svelte

@@ -12,9 +12,9 @@ These are charts with minimal UI and can be
 squeezed into small spaces, Default: `false`
   @param {string} [width="100%"] - Chart width, supports CSS size strings, Default: `"100%"`
   @param {string} [height="auto"] - Chart height, supports CSS size strings, Default: `"auto"`
-  @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
+  @param {array} [colors=[]] - Chart colors, can be modified globally in framework settings
 
-Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `[]`
   @param {array} [captured_events=[]] - String array of event names that will be captured and fired as svelte events.
 This is to prevent unnecessary event subscriptions., Default: `[]`
   @param {string} [class=""] - CSS classes for container, Default: `""`