@hashrytech/quick-components-kit 0.19.17 → 0.20.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hashrytech/quick-components-kit
 
+## 0.20.1
+
+### Patch Changes
+
+- fix: text breaking in toast
+
+## 0.20.0
+
+### Minor Changes
+
+- add: Toast component addition
+
 ## 0.19.17
 
 ### Patch Changes

package/dist/components/toast/Toast.svelte

@@ -0,0 +1,68 @@
+<script lang="ts" module>
+    import type { Snippet } from 'svelte';
+    import type { ClassNameValue } from 'tailwind-merge';
+    
+    export type ToastType = 'success' | 'info' | 'debug' | 'warning' | 'error';
+    export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';    
+
+</script>
+
+<script lang="ts">
+  import { fly } from 'svelte/transition';	
+  import { onMount, onDestroy } from 'svelte';
+  import { toastIcons, toastTypeClasses, toastTypeIconColours, toastOptions } from './index.js';
+
+  let { toastType="info", message = "This is a generic toast message", subMessage="", delToast} : 
+      { toastType:ToastType, message:string, subMessage:string, delToast?: ()=> void} = $props();
+
+  let open: boolean = $state(false);
+
+  let autoTimer: ReturnType<typeof setTimeout>;
+
+  onMount(async () => {
+    open = true;
+    if(toastOptions.autoRemove){        
+      autoTimer = setTimeout(async () => {await handle_close();}, toastOptions.removalTimeout);
+    }
+  });
+
+  onDestroy(() => {
+    clearTimeout(autoTimer);
+  });
+
+  async function handle_close(){
+      open = false;
+      await new Promise(r => setTimeout(r, 200));
+      delToast?.();
+  }
+
+</script>
+  
+  
+{#if open}
+<div transition:fly={{ delay: toastOptions.transitionDelay, duration: toastOptions.transitionDuration, y: toastOptions.transitionY, easing: toastOptions.transitionEasing }} class="flex flex-row rounded-lg mt-2 py-0.5 h-full min-h-[4rem] shadow-lg w-full max-w-md ring-1 
+  border-none pointer-events-auto text-neutral-700 {toastTypeClasses[toastType]}">
+  <div class="flex flex-row gap-4 items-center w-full justify-center rounded-sm px-4">          
+      
+      <div class="flex flex-row items-center justify-center">
+          <span class="{toastIcons[toastType]} {toastTypeIconColours[toastType]} size-8 outline-hidden"></span>
+      </div>
+      
+      <div class="flex flex-col gap-1 rounded-sm py-2 flex-1 min-w-0">
+          <p class="text-sm font-medium break-words overflow-wrap-anywhere hyphens-auto">{@html message}</p>
+          {#if subMessage}
+          <p class="text-xs font-light break-words whitespace-normal hyphens-auto">{@html subMessage}</p>
+          {/if}
+      </div>
+
+      {#if toastOptions.closeButtonIcon}
+      <button aria-label="close" class="cursor-pointer rounded-full size-6 hover:scale-105" onclick={handle_close}>
+        <span class="{toastOptions.closeButtonIcon} size-6 outline-hidden text-neutral-700"></span>
+      </button>
+      {/if}
+      
+  </div>
+</div>
+{/if}
+
+

package/dist/components/toast/Toast.svelte.d.ts

@@ -0,0 +1,11 @@
+export type ToastType = 'success' | 'info' | 'debug' | 'warning' | 'error';
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+type $$ComponentProps = {
+    toastType: ToastType;
+    message: string;
+    subMessage: string;
+    delToast?: () => void;
+};
+declare const Toast: import("svelte").Component<$$ComponentProps, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/components/toast/ToastContainer.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import Toast, { type ToastPosition } from './Toast.svelte';
+
+  let { position = 'top-right', id = "toast_area", reverseFlex = false }: { position?: ToastPosition, id?: string, reverseFlex?: boolean } = $props();
+  
+  // Position classes using Tailwind
+  const positionClasses: Record<ToastPosition, string> = {
+    'top-left': 'top-0 left-0',
+    'top-center': 'top-0 left-1/2 -translate-x-1/2',
+    'top-right': 'top-0 right-0',
+    'bottom-left': 'bottom-0 left-0 flex-col-reverse',
+    'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2 flex-col-reverse',
+    'bottom-right': 'bottom-0 right-0 flex-col-reverse'
+  };
+  
+</script>
+
+<div {id} class="fixed z-[9999] flex {reverseFlex ? 'flex-col-reverse' : 'flex-col'} gap-3 p-4 pointer-events-none {positionClasses[position]}">
+  
+</div>
+
+<style>
+  /* Responsive adjustments */
+  @media (max-width: 640px) {
+    div {
+      left: 0 !important;
+      right: 0 !important;
+      transform: none !important;
+      align-items: center;
+    }
+    
+    div :global(> *) {
+      width: calc(100% - 2rem);
+      max-width: 400px;
+    }
+  }
+</style>

package/dist/components/toast/ToastContainer.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type ToastPosition } from './Toast.svelte';
+type $$ComponentProps = {
+    position?: ToastPosition;
+    id?: string;
+    reverseFlex?: boolean;
+};
+declare const ToastContainer: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToastContainer = ReturnType<typeof ToastContainer>;
+export default ToastContainer;

package/dist/components/toast/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ToastContainer } from './ToastContainer.svelte';
+export { default as Toast } from './Toast.svelte';
+export { showToast, successToast, failToast, infoToast, warningToast, debugToast, toastIcons, toastTypeClasses, toastTypeIconColours, closeButtonIcon, toastOptions } from './toastFunctions.js';

package/dist/components/toast/index.js

@@ -0,0 +1,4 @@
+// src/lib/index.ts
+export { default as ToastContainer } from './ToastContainer.svelte';
+export { default as Toast } from './Toast.svelte';
+export { showToast, successToast, failToast, infoToast, warningToast, debugToast, toastIcons, toastTypeClasses, toastTypeIconColours, closeButtonIcon, toastOptions } from './toastFunctions.js';

package/dist/components/toast/toastFunctions.d.ts

@@ -0,0 +1,24 @@
+import type { ToastType } from "./Toast.svelte";
+export type ToastOptions = {
+    icons: Record<ToastType, string>;
+    classes: Record<string, string>;
+    colours: Record<ToastType, string>;
+    closeButtonIcon: string;
+    transitionDelay: number;
+    transitionDuration: number;
+    transitionY: number;
+    transitionEasing: (t: number) => number;
+    removalTimeout: number;
+    autoRemove: boolean;
+};
+export declare const closeButtonIcon: string[];
+export declare const toastTypeClasses: Record<ToastType, string>;
+export declare const toastTypeIconColours: Record<ToastType, string>;
+export declare const toastIcons: Record<ToastType, string>;
+export declare const toastOptions: ToastOptions;
+export declare function showToast(type: ToastType, message: string, subMessage?: string, target?: Element | null): void;
+export declare function successToast(message: string, subMessage?: string, target?: Element | null): void;
+export declare function failToast(message: string, subMessage?: string, target?: Element | null): void;
+export declare function infoToast(message: string, subMessage?: string, target?: Element | null): void;
+export declare function warningToast(message: string, subMessage?: string, target?: Element | null): void;
+export declare function debugToast(message: string, subMessage?: string, target?: Element | null): void;

package/dist/components/toast/toastFunctions.js

@@ -0,0 +1,68 @@
+import { mount, unmount } from 'svelte';
+import Toast from "./Toast.svelte";
+import { elasticInOut } from 'svelte/easing';
+export const closeButtonIcon = [];
+/* Tailwind classes for different toast types */
+export const toastTypeClasses = {
+    info: "ring-sky-500 border-sky-500 bg-sky-50",
+    success: "ring-green-500 border-green-500 bg-green-50",
+    warning: "ring-yellow-500 border-yellow-500 bg-yellow-50",
+    error: "ring-red-500 border-red-500 bg-red-50",
+    debug: "ring-neutral-500 border-neutral-500 bg-neutral-50",
+};
+/* Tailwind icon colour classes for different toast types */
+export const toastTypeIconColours = {
+    info: "text-blue-500",
+    success: "text-green-500",
+    warning: "text-yellow-500",
+    error: "text-red-500",
+    debug: "text-neutral-500",
+};
+/* Icons for different toast types
+Globally available state variables for toast:
+toastIcons['info'] = "icon-[ion--information-circle]";
+toastIcons['success'] = "icon-[ion--checkmark-circle]";
+toastIcons['warning'] = "icon-[ion--warning]";
+toastIcons['error'] = "icon-[ion--close-circle]";
+toastIcons['debug'] = "icon-[ion--bug]";
+*/
+export const toastIcons = {
+    info: "",
+    success: "",
+    warning: "",
+    error: "",
+    debug: "",
+};
+export const toastOptions = {
+    icons: toastIcons,
+    classes: toastTypeClasses,
+    colours: toastTypeIconColours,
+    closeButtonIcon: "",
+    transitionDelay: 0,
+    transitionDuration: 200,
+    transitionY: -100,
+    transitionEasing: elasticInOut,
+    removalTimeout: 8000,
+    autoRemove: true
+};
+export function showToast(type, message, subMessage = "", target = document.querySelector("#toast_area")) {
+    if (target !== null) {
+        const delToast = () => { unmount(toast, { outro: true }); };
+        const toast = mount(Toast, { target: target, props: { toastType: type, message: message, subMessage: subMessage, delToast: delToast } });
+    }
+}
+export function successToast(message, subMessage = "", target = document.querySelector("#toast_area")) {
+    showToast('success', message, subMessage, target);
+}
+export function failToast(message, subMessage = "", target = document.querySelector("#toast_area")) {
+    showToast('error', message, subMessage, target);
+}
+export function infoToast(message, subMessage = "", target = document.querySelector("#toast_area")) {
+    showToast('info', message, subMessage, target);
+}
+export function warningToast(message, subMessage = "", target = document.querySelector("#toast_area")) {
+    showToast('warning', message, subMessage, target);
+}
+export function debugToast(message, subMessage = "", target = document.querySelector("#toast_area")) {
+    showToast('debug', message, subMessage, target);
+}

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export * from './components/checkbox/index.js';
 export * from './components/tab-navigation/index.js';
 export * from './components/portal/index.js';
 export * from './components/table/index.js';
+export * from './components/toast/index.js';
 export * from './actions/disable-scroll.js';
 export * from './actions/on-keydown.js';
 export * from './actions/lock-scroll.js';

package/dist/index.js

@@ -14,6 +14,7 @@ export * from './components/checkbox/index.js';
 export * from './components/tab-navigation/index.js';
 export * from './components/portal/index.js';
 export * from './components/table/index.js';
+export * from './components/toast/index.js';
 // Actions
 export * from './actions/disable-scroll.js';
 export * from './actions/on-keydown.js';

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "git+https://github.com/hashrytech/quick-components-kit.git"
   },
-  "version": "0.19.17",
+  "version": "0.20.1",
   "license": "MIT",
   "author": "Hashry Tech",
   "files": [