flowbite-svelte 0.44.8 → 0.44.10

package/src/lib/utils/Frame.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { setContext } from 'svelte';
+
+  import type { Action } from 'svelte/action';
+  import type { TransitionConfig } from 'svelte/transition';
+  import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+  const null_transition = () => ({ duration: 0 });
+  const noop = () => {};
+
+  type TransitionFunc = (node: HTMLElement, params: any) => TransitionConfig;
+  type FrameColor = keyof typeof bgColors;
+
+  interface $$Props extends HTMLAnchorAttributes {
+    tag?: string;
+    color?: FrameColor;
+    rounded?: boolean;
+    border?: boolean;
+    shadow?: boolean;
+    transition?: TransitionFunc;
+    params?: object;
+    node?: HTMLElement | undefined;
+    use?: Action<HTMLElement, any>;
+    options?: object;
+    class?: string;
+    role?: string;
+  }
+
+  setContext('background', true);
+
+  export let tag: string = $$restProps.href ? 'a' : 'div';
+  export let color: FrameColor = 'default';
+  export let rounded: boolean = false;
+  export let border: boolean = false;
+  export let shadow: boolean = false;
+
+  // Export a prop through which you can set a desired svelte transition
+  export let transition: TransitionFunc = null_transition;
+  // Pass in extra transition params
+  export let params: object = {};
+
+  // For components development
+  export let node: HTMLElement | undefined = undefined;
+  // Action function and its params
+  export let use: Action<HTMLElement, any> = noop;
+  export let options = {};
+
+  export let role: string | undefined = undefined;
+
+  $: color = color ?? 'default'; // for cases when undefined
+  $: setContext('color', color);
+
+  // your script goes here
+  const bgColors = {
+    gray: 'bg-gray-50 dark:bg-gray-800',
+    red: 'bg-red-50 dark:bg-gray-800',
+    yellow: 'bg-yellow-50 dark:bg-gray-800 ',
+    green: 'bg-green-50 dark:bg-gray-800 ',
+    indigo: 'bg-indigo-50 dark:bg-gray-800 ',
+    purple: 'bg-purple-50 dark:bg-gray-800 ',
+    pink: 'bg-pink-50 dark:bg-gray-800 ',
+    blue: 'bg-blue-50 dark:bg-gray-800 ',
+    light: 'bg-gray-50 dark:bg-gray-700',
+    dark: 'bg-gray-50 dark:bg-gray-800',
+    default: 'bg-white dark:bg-gray-800',
+    dropdown: 'bg-white dark:bg-gray-700',
+    navbar: 'bg-white dark:bg-gray-900',
+    navbarUl: 'bg-gray-50 dark:bg-gray-800',
+    form: 'bg-gray-50 dark:bg-gray-700',
+    primary: 'bg-primary-50 dark:bg-gray-800 ',
+    orange: 'bg-orange-50 dark:bg-orange-800',
+    none: ''
+  };
+
+  const textColors = {
+    gray: 'text-gray-800 dark:text-gray-300',
+    red: 'text-red-800 dark:text-red-400',
+    yellow: 'text-yellow-800 dark:text-yellow-300',
+    green: 'text-green-800 dark:text-green-400',
+    indigo: 'text-indigo-800 dark:text-indigo-400',
+    purple: 'text-purple-800 dark:text-purple-400',
+    pink: 'text-pink-800 dark:text-pink-400',
+    blue: 'text-blue-800 dark:text-blue-400',
+    light: 'text-gray-700 dark:text-gray-300',
+    dark: 'text-gray-700 dark:text-gray-300',
+    default: 'text-gray-500 dark:text-gray-400',
+    dropdown: 'text-gray-700 dark:text-gray-200',
+    navbar: 'text-gray-700 dark:text-gray-200',
+    navbarUl: 'text-gray-700 dark:text-gray-400',
+    form: 'text-gray-900 dark:text-white',
+    primary: 'text-primary-800 dark:text-primary-400',
+    orange: 'text-orange-800 dark:text-orange-400',
+    none: ''
+  };
+
+  const borderColors = {
+    gray: 'border-gray-300 dark:border-gray-800 divide-gray-300 dark:divide-gray-800',
+    red: 'border-red-300 dark:border-red-800 divide-red-300 dark:divide-red-800',
+    yellow: 'border-yellow-300 dark:border-yellow-800 divide-yellow-300 dark:divide-yellow-800',
+    green: 'border-green-300 dark:border-green-800 divide-green-300 dark:divide-green-800',
+    indigo: 'border-indigo-300 dark:border-indigo-800 divide-indigo-300 dark:divide-indigo-800',
+    purple: 'border-purple-300 dark:border-purple-800 divide-purple-300 dark:divide-purple-800',
+    pink: 'border-pink-300 dark:border-pink-800 divide-pink-300 dark:divide-pink-800',
+    blue: 'border-blue-300 dark:border-blue-800 divide-blue-300 dark:divide-blue-800',
+    light: 'border-gray-500 divide-gray-500',
+    dark: 'border-gray-500 divide-gray-500',
+    default: 'border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700',
+    dropdown: 'border-gray-100 dark:border-gray-600 divide-gray-100 dark:divide-gray-600',
+    navbar: 'border-gray-100 dark:border-gray-700 divide-gray-100 dark:divide-gray-700',
+    navbarUl: 'border-gray-100 dark:border-gray-700 divide-gray-100 dark:divide-gray-700',
+    form: 'border-gray-300 dark:border-gray-700 divide-gray-300 dark:divide-gray-700',
+    primary: 'border-primary-500 dark:border-primary-200  divide-primary-500 dark:divide-primary-200 ',
+    orange: 'border-orange-300 dark:border-orange-800 divide-orange-300 dark:divide-orange-800',
+    none: ''
+  };
+
+  let divClass: string;
+
+  $: divClass = twMerge(bgColors[color], textColors[color], rounded && 'rounded-lg', border && 'border', borderColors[color], shadow && 'shadow-md', $$props.class);
+</script>
+
+<svelte:element this={tag} use:use={options} bind:this={node} transition:transition={params} {...$$restProps} class={divClass} on:click on:mouseenter on:mouseleave on:focusin on:focusout {role}>
+  <slot />
+</svelte:element>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let tag: string = $$restProps.href ? 'a' : 'div';
+@prop export let color: FrameColor = 'default';
+@prop export let rounded: boolean = false;
+@prop export let border: boolean = false;
+@prop export let shadow: boolean = false;
+@prop export let transition: TransitionFunc = null_transition;
+@prop export let params: object = {};
+@prop export let node: HTMLElement | undefined = undefined;
+@prop export let use: Action<HTMLElement, any> = noop;
+@prop export let options = {};
+@prop export let role: string | undefined = undefined;
+-->

package/src/lib/utils/Popper.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+  import type { ComputePositionReturn, Middleware, Placement, Side } from '@floating-ui/dom';
+  import * as dom from '@floating-ui/dom';
+  import { onMount, type ComponentProps } from 'svelte';
+  import { twJoin } from 'tailwind-merge';
+  import Frame from './Frame.svelte';
+  import createEventDispatcher from './createEventDispatcher';
+
+  // propagate props type from underlying Frame
+  interface $$Props extends ComponentProps<Frame> {
+    activeContent?: boolean;
+    arrow?: boolean;
+    offset?: number;
+    placement?: Placement;
+    trigger?: 'hover' | 'click';
+    triggeredBy?: string;
+    reference?: string;
+    strategy?: 'absolute' | 'fixed';
+    open?: boolean;
+    yOnly?: boolean;
+  }
+
+  export let activeContent: boolean = false;
+  export let arrow: boolean = true;
+  export let offset: number = 8;
+  export let placement: Placement = 'top';
+  export let trigger: 'hover' | 'click' = 'hover';
+  export let triggeredBy: string | undefined = undefined;
+  export let reference: string | undefined = undefined;
+  export let strategy: 'absolute' | 'fixed' = 'absolute';
+  export let open: boolean = false;
+  export let yOnly: boolean = false;
+
+  const dispatch = createEventDispatcher();
+
+  let clickable: boolean;
+  $: clickable = trigger === 'click';
+
+  $: dispatch('show', referenceEl, open);
+  $: placement && (referenceEl = referenceEl);
+
+  let referenceEl: Element;
+  let floatingEl: HTMLElement;
+  let arrowEl: HTMLElement | null;
+  let contentEl: HTMLElement;
+  let triggerEls: HTMLElement[] = [];
+
+  let _blocked: boolean = false; // management of the race condition between focusin and click events
+  const block = () => ((_blocked = true), setTimeout(() => (_blocked = false), 250));
+
+  const showHandler = (ev: Event) => {
+    if (referenceEl === undefined) console.error('trigger undefined');
+    if (!reference && triggerEls.includes(ev.target as HTMLElement) && referenceEl !== ev.target) {
+      referenceEl = ev.target as HTMLElement;
+      block();
+    }
+    if (clickable && ev.type === 'focusin' && !open) block();
+    open = clickable && ev.type === 'click' && !_blocked ? !open : true;
+  };
+
+  const hasHover = (el: Element) => el.matches(':hover');
+  const hasFocus = (el: Element) => el.contains(document.activeElement);
+  const px = (n: number | undefined) => (n != null ? `${n}px` : '');
+
+  const hideHandler = (ev: Event) => {
+    if (activeContent) {
+      setTimeout(() => {
+        const elements = [referenceEl, floatingEl, ...triggerEls].filter(Boolean);
+        if (ev.type === 'mouseleave' && elements.some(hasHover)) return;
+        if (ev.type === 'focusout' && elements.some(hasFocus)) return;
+        open = false;
+      }, 100);
+    } else open = false;
+  };
+
+  let arrowSide: Side;
+  const oppositeSideMap: Record<Side, Side> = {
+    left: 'right',
+    right: 'left',
+    bottom: 'top',
+    top: 'bottom'
+  };
+
+  let middleware: (Middleware | null)[];
+  $: middleware = [dom.flip(), dom.shift(), dom.offset(+offset), arrowEl && dom.arrow({ element: arrowEl, padding: 10 })];
+
+  function updatePosition() {
+    dom.computePosition(referenceEl, floatingEl, { placement, strategy, middleware }).then(({ x, y, middlewareData, placement, strategy }: ComputePositionReturn) => {
+      floatingEl.style.position = strategy;
+      floatingEl.style.left = yOnly ? '0' : px(x);
+      floatingEl.style.top = px(y);
+
+      if (middlewareData.arrow && arrowEl instanceof HTMLDivElement) {
+        arrowEl.style.left = px(middlewareData.arrow.x);
+        arrowEl.style.top = px(middlewareData.arrow.y);
+
+        arrowSide = oppositeSideMap[placement.split('-')[0] as Side];
+        arrowEl.style[arrowSide] = px(-arrowEl.offsetWidth / 2 - ($$props.border ? 1 : 0));
+      }
+    });
+  }
+
+  function init(node: HTMLElement, _referenceEl: HTMLElement) {
+    floatingEl = node;
+    let cleanup = dom.autoUpdate(_referenceEl, floatingEl, updatePosition);
+
+    return {
+      update(_referenceEl: HTMLElement) {
+        cleanup();
+        cleanup = dom.autoUpdate(_referenceEl, floatingEl, updatePosition);
+      },
+      destroy() {
+        cleanup();
+      }
+    };
+  }
+
+  onMount(() => {
+    const events: [string, any, boolean][] = [
+      ['focusin', showHandler, true],
+      ['focusout', hideHandler, true],
+      ['click', showHandler, clickable],
+      ['mouseenter', showHandler, !clickable],
+      ['mouseleave', hideHandler, !clickable]
+    ];
+
+    if (triggeredBy) triggerEls = [...document.querySelectorAll<HTMLElement>(triggeredBy)];
+    else triggerEls = contentEl.previousElementSibling ? [contentEl.previousElementSibling as HTMLElement] : [];
+
+    if (!triggerEls.length) {
+      console.error('No triggers found.');
+    }
+
+    triggerEls.forEach((element: HTMLElement) => {
+      if (element.tabIndex < 0) element.tabIndex = 0; // trigger must be focusable
+      for (const [name, handler, cond] of events) if (cond) element.addEventListener(name, handler);
+    });
+
+    if (reference) {
+      referenceEl = document.querySelector(reference) ?? document.body;
+      if (referenceEl === document.body) {
+        console.error(`Popup reference not found: '${reference}'`);
+      } else {
+        referenceEl.addEventListener('focusout', hideHandler);
+        if (!clickable) referenceEl.addEventListener('mouseleave', hideHandler);
+      }
+    } else {
+      referenceEl = triggerEls[0];
+    }
+
+    return () => {
+      triggerEls.forEach((element: HTMLElement) => {
+        if (element) {
+          for (const [name, handler] of events) element.removeEventListener(name, handler);
+        }
+      });
+      if (referenceEl) {
+        referenceEl.addEventListener('focusout', hideHandler);
+        referenceEl.addEventListener('mouseleave', hideHandler);
+      }
+    };
+  });
+
+  function optional(pred: boolean, func: (ev: Event) => void) {
+    return pred ? func : () => undefined;
+  }
+
+  let arrowClass: string;
+  $: arrowClass = twJoin('absolute pointer-events-none block w-[10px] h-[10px] rotate-45 bg-inherit border-inherit', $$props.border && arrowSide === 'bottom' && 'border-b border-r', $$props.border && arrowSide === 'top' && 'border-t border-l ', $$props.border && arrowSide === 'right' && 'border-t border-r ', $$props.border && arrowSide === 'left' && 'border-b border-l ');
+
+  function initArrow(node: HTMLElement) {
+    arrowEl = node;
+    return {
+      destroy() {
+        arrowEl = null;
+      }
+    };
+  }
+</script>
+
+{#if !referenceEl}
+  <div bind:this={contentEl} />
+{/if}
+
+{#if open && referenceEl}
+  <Frame use={init} options={referenceEl} role="tooltip" tabindex={activeContent ? -1 : undefined} on:focusin={optional(activeContent, showHandler)} on:focusout={optional(activeContent, hideHandler)} on:mouseenter={optional(activeContent && !clickable, showHandler)} on:mouseleave={optional(activeContent && !clickable, hideHandler)} {...$$restProps}>
+    <slot />
+    {#if arrow}<div use:initArrow class={arrowClass} />{/if}
+  </Frame>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let activeContent: boolean = false;
+@prop export let arrow: boolean = true;
+@prop export let offset: number = 8;
+@prop export let placement: Placement = 'top';
+@prop export let trigger: 'hover' | 'click' = 'hover';
+@prop export let triggeredBy: string | undefined = undefined;
+@prop export let reference: string | undefined = undefined;
+@prop export let strategy: 'absolute' | 'fixed' = 'absolute';
+@prop export let open: boolean = false;
+@prop export let yOnly: boolean = false;
+-->

package/src/lib/utils/Wrapper.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { Action } from 'svelte/action';
+
+  export let tag: string = 'div';
+  export let show: boolean;
+  export let use: Action<HTMLElement, any> = () => {};
+</script>
+
+{#if show}
+  <svelte:element this={tag} use:use {...$$restProps}><slot /></svelte:element>
+{:else}
+  <slot />
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let tag: string = 'div';
+@prop export let show: boolean;
+@prop export let use: Action<HTMLElement, any> = () => {};
+-->

package/src/lib/utils/backdrop.ts

@@ -0,0 +1,101 @@
+import { createEventDispatcher } from 'svelte';
+export let open = false;
+
+const backdropClasses = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40';
+export let placement: string;
+// const placement:
+// 		| 'top-left'
+// 		| 'top-center'
+// 		| 'top-right'
+// 		| 'center-left'
+// 		| 'center'
+// 		| 'center-right'
+// 		| 'bottom-left'
+// 		| 'bottom-center'
+// 		| 'bottom-right'='center';
+
+export const init = (node: HTMLElement, _open: boolean) => {
+  getPlacementClasses().map((c) => node.classList.add(c));
+  _open && createBackdrop(node);
+
+  return {
+    update(_open: boolean) {
+      allPlacementClasses.map((c) => node.classList.remove(c));
+      getPlacementClasses().map((c) => node.classList.add(c));
+
+      _open ? createBackdrop(node) : destroyBackdrop(node);
+    },
+
+    destroy() {
+      destroyBackdrop(node);
+    }
+  };
+};
+
+const getPlacementClasses = () => {
+  switch (placement) {
+    // top
+    case 'top-left':
+      return ['justify-start', 'items-start'];
+    case 'top-center':
+      return ['justify-center', 'items-start'];
+    case 'top-right':
+      return ['justify-end', 'items-start'];
+
+    // center
+    case 'center-left':
+      return ['justify-start', 'items-center'];
+    case 'center':
+      return ['justify-center', 'items-center'];
+    case 'center-right':
+      return ['justify-end', 'items-center'];
+
+    // bottom
+    case 'bottom-left':
+      return ['justify-start', 'items-end'];
+    case 'bottom-center':
+      return ['justify-center', 'items-end'];
+    case 'bottom-right':
+      return ['justify-end', 'items-end'];
+
+    default:
+      return ['justify-center', 'items-center'];
+  }
+};
+
+const createBackdrop = (node: Node) => {
+  if (!backdropEl) {
+    backdropEl = document.createElement('div');
+    backdropEl.classList.add(...backdropClasses.split(' '));
+
+    const body = document.body;
+    body.append(backdropEl);
+    body.style.overflow = 'hidden';
+
+    document.addEventListener('keydown', handleEscape, true);
+  }
+
+  dispatch('show', node);
+};
+
+const destroyBackdrop = (node: Node) => {
+  const body = document.body;
+  body.style.overflow = 'auto';
+
+  if (backdropEl) backdropEl.remove();
+  backdropEl = undefined;
+
+  document.removeEventListener('keydown', handleEscape, true);
+
+  dispatch('hide', node);
+};
+
+let backdropEl: HTMLElement | undefined;
+
+const handleEscape = (e: KeyboardEvent) => {
+  if (open && e.key === 'Escape') open = false;
+};
+
+const dispatch = createEventDispatcher();
+
+const allPlacementClasses = ['justify-start', 'justify-center', 'justify-end', 'items-start', 'items-center', 'items-end'];

package/src/lib/utils/clickOutside.ts

@@ -0,0 +1,16 @@
+export const clickOutside = (node: HTMLElement, callback: () => void) => {
+  const handleClick = (event: MouseEvent) => {
+    if (!event?.target) return;
+    if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
+      callback();
+    }
+  };
+
+  document.addEventListener('click', handleClick, true);
+
+  return {
+    destroy() {
+      document.removeEventListener('click', handleClick, true);
+    }
+  };
+};

package/src/lib/utils/createEventDispatcher.ts

@@ -0,0 +1,24 @@
+/*
+ Custom Event Dispatcher
+ 
+ Sets `target` in event data.
+
+ https://svelte.dev/repl/c93cbf99a8ca4f44912e662a8e3cbef7?version=3.37.0
+
+*/
+
+import { get_current_component } from 'svelte/internal';
+
+export default function createEventDispatcher() {
+  const component = get_current_component();
+  return (type: string, target: Element, detail: any) => {
+    const callbacks = component.$$.callbacks[type];
+    if (callbacks) {
+      const event = new CustomEvent(type, { detail });
+      target.dispatchEvent(event);
+      callbacks.slice().forEach((fn: (e: Event) => void) => {
+        fn.call(component, event);
+      });
+    }
+  };
+}

package/src/lib/utils/focusTrap.js

@@ -0,0 +1,42 @@
+//
+// Taken from github.com/carbon-design-system/carbon/packages/react/src/internal/keyboard/navigation.js
+//
+
+// add all the elements inside modal which you want to make focusable
+const selectorTabbable = `
+  a[href], area[href], input:not([disabled]):not([tabindex='-1']),
+  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),
+  textarea:not([disabled]):not([tabindex='-1']),
+  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]
+`;
+
+/** @type {import('svelte/action').Action<HTMLElement, any>} */
+export default function focusTrap(node) {
+  /** @type {(e:KeyboardEvent)=>void} */
+  function handleFocusTrap(e) {
+    let isTabPressed = e.key === 'Tab' || e.keyCode === 9;
+
+    if (!isTabPressed) {
+      return;
+    }
+
+    const tabbable = Array.from(node.querySelectorAll(selectorTabbable));
+
+    let index = tabbable.indexOf(document.activeElement ?? node);
+    if (index === -1 && e.shiftKey) index = 0;
+    index += tabbable.length + (e.shiftKey ? -1 : 1);
+    index %= tabbable.length;
+    /** @ts-ignore */
+    tabbable[index].focus();
+
+    e.preventDefault();
+  }
+
+  document.addEventListener('keydown', handleFocusTrap, true);
+
+  return {
+    destroy() {
+      document.removeEventListener('keydown', handleFocusTrap, true);
+    }
+  };
+}

package/src/lib/utils/generateId.js

@@ -0,0 +1,5 @@
+let n = Date.now();
+
+export default function () {
+  return (++n).toString(36);
+}

package/src/lib/video/Video.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let src: string;
+  export let type: string = 'video/mp4';
+  export let trackSrc: string = '';
+  export let srclang: string = 'en';
+  export let label: string = 'english_captions';
+
+  let videoClass = twMerge($$props.class);
+</script>
+
+<video {...$$restProps} class={videoClass}>
+  <source {src} {type} />
+  <slot />
+  <track src={trackSrc} kind="captions" {srclang} {label} />
+  Your browser does not support the video tag.
+</video>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let src: string;
+@prop export let type: string = 'video/mp4';
+@prop export let trackSrc: string = '';
+@prop export let srclang: string = 'en';
+@prop export let label: string = 'english_captions';
+-->

package/src/routes/+error.svelte

@@ -0,0 +1,5 @@
+<script>
+  import { page } from '$app/stores';
+</script>
+
+<h1>{$page.error?.message ?? 'Unknow error'}</h1>