@onsvisual/svelte-components 0.1.88-component.toolbar → 0.1.88

package/dist/inputs/Toolbar/ToolbarButton.svelte

@@ -1,104 +0,0 @@
-<script>import { onMount, onDestroy, createEventDispatcher, getContext } from "svelte";
-import Icon from "./Icon.svelte";
-import HelpModal from "./HelpModal.svelte";
-import { nanoid } from "nanoid";
-// Props for the ToolbarButton
-export let id = nanoid(6);
-export let icon = "";
-export let label = "";
-export let disabled = false;
-export let classes = "";
-export let helpText = null;
-export let selected = false;
-export let custom = false;
-export let hasAriaControls = false;
-const dispatch = createEventDispatcher();
-let buttonElement;
-// Get activeModalId store from context
-const activeModalId = getContext("activeModalId");
-// Retrieve button registry from context
-const { register, unregister } = getContext("buttonIds");
-// Register button on mount
-onMount(() => {
-    register(id);
-});
-// Unregister button on destroy
-onDestroy(() => {
-    unregister(id);
-});
-// Reactive store subscription
-$: isActive = $activeModalId === id;
-// Subscribe to the store to determine if this modal is active
-function handleClick() {
-    if (!disabled) {
-        dispatch("click");
-        activeModalId.set(isActive ? null : id); // Toggle the modal
-        // maybe something here to check if selected
-    }
-}
-</script>
-
-<div class="toolbar-button-wrapper">
-  {#if custom}
-    <div on:click="{handleClick}" bind:this="{buttonElement}">
-      <slot name="custom" />
-    </div>
-  {:else}
-    <button
-      type="button"
-      aria-label="{label}"
-      class="{`toolbar-button ${disabled ? 'disabled' : ''}  ${
-        isActive ? 'selected' : ''
-      } ${classes}`}"
-      on:click="{handleClick}"
-      disabled="{disabled}"
-      bind:this="{buttonElement}"
-      id="button-{id}"
-      aria-controls="{hasAriaControls ? `panel-${id}` : undefined}"
-    >
-      {#if icon}
-        <Icon type="{icon}" selected="{isActive ? true : false}" disabled="{disabled}" />
-      {:else}
-        {label}
-      {/if}
-    </button>
-  {/if}
-
-  {#if isActive}
-    {#if helpText}
-      <HelpModal triggerElement="{buttonElement}" onClose="{() => activeModalId.set(null)}">
-        <p>{helpText}</p>
-      </HelpModal>
-    {:else if !helpText}
-      <HelpModal triggerElement="{buttonElement}" onClose="{() => activeModalId.set(null)}">
-        <slot />
-      </HelpModal>
-    {/if}
-  {/if}
-</div>
-
-<style>
-  .toolbar-button-wrapper {
-    position: relative;
-  }
-  .toolbar-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.5rem;
-    background: none;
-    border: none;
-    cursor: pointer;
-    flex-shrink: 0;
-    flex-grow: 0;
-  }
-
-  .toolbar-button.disabled {
-    /* opacity: 0.5; */
-    cursor: not-allowed;
-  }
-
-  .selected {
-    background: #e9eff4;
-    border-radius: 8px;
-  }</style>

package/dist/inputs/Toolbar/ToolbarDivider.svelte

@@ -1,28 +0,0 @@
-<script>import { getContext } from "svelte";
-export let classes = "";
-// Get the orientation store from context
-const orientationStore = getContext("orientation");
-// Subscribe to the store to get its value
-let orientation;
-orientationStore.subscribe((value) => {
-    orientation = value;
-});
-</script>
-
-<div class="{`toolbar-divider ${orientation} ${classes}`}" aria-hidden="true"></div>
-
-<style>
-  .toolbar-divider {
-    background-color: #ccc;
-  }
-
-  .toolbar-divider.horizontal {
-    width: 1px;
-    margin: 0 0.5rem;
-  }
-
-  .toolbar-divider.vertical {
-    width: 100%;
-    height: 1px;
-    margin: 0.5rem 0;
-  }</style>

package/dist/inputs/Toolbar/ToolbarsContainer.svelte

@@ -1,46 +0,0 @@
-<script>import { setContext, onMount } from "svelte";
-import { writable } from "svelte/store";
-// Initialize a store for button IDs
-const buttonIds = writable([]);
-setContext("buttonIds", {
-    register: (id) => {
-        buttonIds.update((ids) => [...ids, id]);
-    },
-    unregister: (id) => {
-        buttonIds.update((ids) => ids.filter((btnId) => btnId !== id));
-    },
-    buttonIds,
-});
-// Initial state: true unless explicitly set to 'false' in either localStorage or sessionStorage
-const initialState = sessionStorage.getItem("showHelpModals") === "false"
-    ? false
-    : localStorage.getItem("showHelpModals") === "false"
-        ? false
-        : true;
-const showHelpModals = writable(initialState ?? true);
-// Subscribe to store changes to persist in localStorage
-// showHelpModals.subscribe((value) => {
-//   localStorage.setItem("showHelpModals", value);
-// });
-// Set context for showHelpModals
-setContext("showHelpModals", showHelpModals);
-const activeModalStore = writable(null); // Tracks the ID of the active modal
-setContext("activeModalId", activeModalStore);
-onMount(() => {
-    window.addEventListener("beforeunload", () => {
-        sessionStorage.removeItem("showHelpModals");
-    });
-});
-</script>
-
-<div class="multi-toolbar-container">
-  <slot />
-</div>
-
-<style>
-  .multi-toolbar-container {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-    justify-content: space-between;
-  }</style>